:root{font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;color:#18243a;background:#f6f8fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #88adf7;outline-offset:2px}.app-shell{max-width:1540px;margin:auto;min-height:100vh}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #dee5ee;background:#fff}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:#1859d1;color:white;font-weight:800;border-radius:7px}.brand strong{display:block;font-size:18px;letter-spacing:-.03em}.brand small{display:block;color:#59677d;font-size:11px}.top-meta{display:flex;gap:24px;color:#718097;font-size:12px}.top-meta span:first-child{border:1px solid #dee5ee;padding:6px 10px;border-radius:20px}main{padding:36px 40px 60px}.workspace-head{display:flex;align-items:end;justify-content:space-between;gap:24px}.eyebrow{margin:0 0 9px;color:#1859d1;font-size:10px;font-weight:700;letter-spacing:.14em}.workspace-head h1{font-size:32px;line-height:1.3;margin:0;letter-spacing:-.04em}.subtle{color:#59677d;margin:8px 0 0;font-size:14px}.identity label,.token-row label{display:block;color:#59677d;font-size:12px;font-weight:700;margin-bottom:8px}.identity-controls{display:flex;gap:8px}.identity input{width:132px}.identity input,.token-row input{height:39px;padding:0 12px;border:1px solid #cbd5e2;border-radius:6px;background:#fff}.button{border:0;border-radius:6px;min-height:38px;padding:0 16px;font-weight:700;white-space:nowrap}.secondary{background:#e8eef8;color:#1859d1}.primary{background:#1859d1;color:white}.token-row{display:flex;align-items:center;gap:12px;margin-top:24px}.token-row label{margin:0}.token-row input{width:240px}.token-row span{font-size:12px;color:#718097}.presence{display:flex;align-items:center;gap:30px;min-height:61px;border-top:1px solid #dee5ee;border-bottom:1px solid #dee5ee;margin:22px 0 30px}.presence>div{display:flex;align-items:center;gap:8px;font-size:13px}.presence strong{font-weight:700}.presence p{margin-left:auto;color:#59677d;font-size:12px}.dot{width:8px;height:8px;border-radius:50%;background:#a8b1bd}.dot.online{background:#167657;box-shadow:0 0 0 3px #e4f5ee}.work-grid{display:grid;grid-template-columns:minmax(0,1fr) 276px;gap:24px}.queue{min-width:0}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}.section-heading h2,.call-rail h2{font-size:20px;margin:0;letter-spacing:-.03em}.count{color:#59677d;font-size:12px}.table-wrap{overflow-x:auto;border:1px solid #dee5ee;border-radius:8px;background:#fff}table{border-collapse:collapse;width:100%;min-width:730px;text-align:left}th{background:#f0f4f9;color:#59677d;font-size:11px;font-weight:700;height:42px}td{height:65px;border-top:1px solid #e7ecf3;font-size:13px}th,td{padding:0 14px}td:first-child{color:#4d5f7c;font-family:Consolas,monospace;font-size:12px}td strong{display:block;font-weight:700}td small{color:#7a889a}td.amount,th.amount{text-align:right;font-variant-numeric:tabular-nums}td.days,th.days{text-align:center;font-variant-numeric:tabular-nums}.dpd{display:inline-block;padding:4px 8px;border-radius:5px;color:#86540a;background:#fff1d9}.dpd.high{color:#a33d32;background:#fff0ee}.call-button{min-width:76px;padding:7px 12px;border:1px solid #b7cae9;background:#f4f8ff;color:#1859d1;border-radius:5px;font-weight:700}.call-button:hover:not(:disabled),.secondary:hover{background:#dce9ff}.table-note{font-size:11px;color:#718097;margin-top:12px}.call-rail{min-height:340px;background:#fff;border:1px solid #dee5ee;border-left:3px solid #1859d1;border-radius:8px;padding:22px 22px 24px}.call-rail h2{margin-bottom:25px}.phone-glyph{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#eef4ff;color:#1859d1;font-size:25px;margin-bottom:20px}#call-empty p{font-size:14px;font-weight:700;margin:0 0 6px}#call-empty small{color:#718097;line-height:1.5}.call-stage{color:#1859d1;font-size:13px;font-weight:700;margin:0 0 15px}.call-stage.pulse::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#1859d1;margin-right:8px;animation:pulse 1.4s infinite}.call-customer{display:block;font-size:21px;line-height:1.3}.call-timer{display:flex;align-items:end;justify-content:space-between;border-top:1px solid #dee5ee;margin-top:25px;padding-top:18px;font-size:12px;color:#59677d}.call-timer strong{font:700 27px Consolas,monospace;color:#18243a}.call-detail{font-size:12px;color:#59677d;line-height:1.5}dialog{border:1px solid #d9e1ec;border-radius:10px;padding:0;width:min(480px,calc(100vw - 24px));box-shadow:0 22px 80px #18243a36}dialog::backdrop{background:#18243a88}dialog form{padding:27px}.dialog-head{border-bottom:1px solid #dee5ee;padding-bottom:16px;margin-bottom:20px}.dialog-head h2{margin:0;font-size:23px}.dialog-head p:last-child{margin:7px 0 0;color:#59677d;font-size:13px}fieldset{border:0;padding:0;margin:0 0 20px}legend,.field{font-size:13px;font-weight:700;margin-bottom:9px}.radio-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.radio-grid label{font-size:13px;display:flex;align-items:center;gap:7px;padding:10px;border:1px solid #dee5ee;border-radius:5px}.radio-grid label:has(input:checked){border-color:#1859d1;background:#f4f8ff}.field{display:block;margin-top:15px}#date-hint{font-weight:400;color:#718097}#promise-date,textarea{width:100%;border:1px solid #cbd5e2;border-radius:5px;padding:9px;background:#fff}textarea{resize:vertical;min-height:92px}.form-error{color:#a33d32;font-size:12px;min-height:17px}.dialog-actions{display:flex;justify-content:flex-end;margin-top:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes pulse{50%{opacity:.25}}@media(max-width:900px){.work-grid{grid-template-columns:1fr}.call-rail{min-height:220px}.presence p{display:none}}@media(max-width:600px){.topbar{padding:0 18px}.top-meta span:first-child{display:none}main{padding:25px 18px}.workspace-head{align-items:stretch;flex-direction:column}.token-row{align-items:start;flex-wrap:wrap}.token-row span{width:100%}.presence{gap:15px}.radio-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.call-stage.pulse::before{animation:none}}


*{scrollbar-color:#b7c6db #f6f8fb;scrollbar-width:thin}
[hidden]{display:none!important}.login-screen{max-width:850px;margin:8vh auto 0;display:grid;grid-template-columns:1fr 330px;gap:64px;align-items:center}.login-copy h1{font-size:42px;letter-spacing:-.05em;line-height:1.25;margin:0 0 16px}.login-copy>p:last-child{color:#59677d;line-height:1.8}.login-form{display:grid;gap:10px;background:#fff;border:1px solid #dee5ee;border-radius:10px;padding:28px;box-shadow:0 18px 45px #18243a0b}.login-form label{font-size:13px;font-weight:700}.login-form input{height:42px;padding:0 12px;border:1px solid #cbd5e2;border-radius:6px}.login-form button{margin-top:5px}.identity{display:flex;align-items:center;gap:14px;font-size:13px;color:#59677d}.identity strong{color:#18243a}.pairing{display:flex;align-items:center;justify-content:space-between;gap:22px;background:#fff;border:1px solid #cbdaf2;border-left:3px solid #1859d1;border-radius:8px;padding:19px 23px;margin-top:24px}.pairing h2{font-size:18px;margin:0}.pairing p:last-child{font-size:12px;color:#59677d;margin:7px 0 0}.qr-control{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.qr-control strong{font:700 27px Consolas,monospace;letter-spacing:.15em;color:#1859d1}.qr-control span{color:#59677d;font-size:12px;min-width:115px}@media(max-width:700px){.login-screen{margin-top:3vh;grid-template-columns:1fr;gap:24px}.login-copy h1{font-size:32px}.pairing{align-items:flex-start;flex-direction:column}}
.pairing .qr-warning{color:#a33d32!important}.qr-control{justify-content:flex-end;max-width:330px}.qr-control img{border:5px solid #fff;box-shadow:0 0 0 1px #dee5ee;border-radius:4px;image-rendering:pixelated}@media(max-width:700px){.qr-control{justify-content:flex-start}}

/* Compact signed-in shell and on-demand pairing. */
.top-actions,.header-account{display:flex;align-items:center;gap:18px}
.top-actions{color:#718097;font-size:12px}
.header-account{border-left:1px solid #dee5ee;padding-left:18px;color:#59677d;font-size:12px}
.header-account strong{color:#18243a;font-size:13px;margin-left:4px;font-variant-numeric:tabular-nums}
.header-account .button{min-height:34px;padding:0 12px}
#dashboard .presence{margin:0 0 30px;min-height:68px;gap:24px}
#dashboard .presence #pairing-open{margin-left:0}
#pairing-dialog{width:min(440px,calc(100vw - 24px))}
.pairing-dialog{padding:28px}
.pairing-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}
.pairing-heading h2{font-size:21px;line-height:1.35;margin:0}
.dialog-close{display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;border-radius:6px;background:#f0f4f9;color:#59677d;font-size:23px;line-height:1}
.dialog-close:hover{background:#e4ecf7}
.pairing-instruction{font-size:13px;color:#59677d;line-height:1.65;margin:14px 0 20px}
.pairing-dialog .qr-control{max-width:none;min-height:236px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#f6f8fb;border:1px solid #dee5ee;border-radius:8px;padding:16px;text-align:center}
.pairing-dialog .qr-control img{background:#fff}
.pairing-dialog .qr-control span{min-width:0;font-size:13px}
.pairing-dialog .qr-warning{color:#a33d32;font-size:12px;line-height:1.5;margin:16px 0}
.pairing-dialog #new-qr{width:100%}
@media(max-width:900px){#dashboard .presence{flex-wrap:wrap;gap:12px 20px;padding:12px 0}#dashboard .presence p{display:block;margin:0 auto 0 0}}
@media(max-width:600px){.topbar{height:auto;min-height:70px;padding:10px 18px;gap:10px}.brand small,#clock{display:none}.top-actions,.header-account{gap:8px}.header-account{border:0;padding:0}.header-account span{font-size:11px}.header-account strong{display:block;margin:1px 0 0;font-size:12px}.header-account .button{font-size:11px;padding:0 9px}main{padding-top:14px}#dashboard .presence{align-items:center}#dashboard .presence p{order:3;width:100%}#dashboard .presence #pairing-open{margin-left:auto}.pairing-dialog{padding:22px}}

/* Shared account management controls. */
.admin-help{color:#59677d;font-size:12px;line-height:1.6;margin:7px 0 0}
.user-role-select,.user-reset input{width:100%;height:40px;padding:0 11px;border:1px solid #cbd5e2;border-radius:6px;background:#fff;color:#18243a}
.admin-message{min-height:20px;color:#1859d1;font-size:12px;margin:12px 0}
.admin-message.error{color:#a33d32}
.admin-users{display:grid;gap:10px;max-height:42vh;overflow:auto;padding:2px}
.user-card{border:1px solid #dee5ee;border-radius:8px;padding:14px 16px;background:#fff}
.user-card-top,.user-card-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.user-card-top{justify-content:space-between;margin-bottom:13px}
.user-card strong{color:#18243a;font-size:14px}
.user-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#59677d;font-size:11px}
.user-badge{border-radius:20px;background:#eef4ff;color:#1859d1;padding:4px 8px}
.user-badge.inactive{background:#fff0ee;color:#a33d32}
.user-card-actions{justify-content:flex-end}
.user-card-actions .button{min-height:34px;padding:0 10px;font-size:12px}
.user-role-select{width:120px;height:34px;font-size:12px}
.user-reset{display:flex;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #dee5ee}
.user-reset input{max-width:290px;height:36px}
.user-reset .button{min-height:36px;font-size:12px}
.admin-create-form input:focus-visible,.admin-create-form select:focus-visible,.admin-search input:focus-visible,.user-role-select:focus-visible,.user-branch-select:focus-visible,.user-reset input:focus-visible{outline:3px solid #88adf7;outline-offset:2px}

/* The administration route uses the same ledger system as the call desk. */
.admin-page{padding-top:30px}
.admin-page-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.admin-page-head h1{font-size:32px;line-height:1.25;letter-spacing:-.04em;margin:0}
.admin-page-head p:last-child{font-size:13px;color:#59677d;margin:8px 0 0}
.admin-page-stat{min-width:125px;padding:12px 16px;border-left:3px solid #1859d1;background:#fff}
.admin-page-stat strong{display:block;color:#1859d1;font:700 28px Consolas,monospace}
.admin-page-stat span{display:block;color:#59677d;font-size:11px}
.admin-page-grid{display:grid;grid-template-columns:minmax(290px,340px) minmax(0,1fr);gap:18px;align-items:start}
.admin-panel{background:#fff;border:1px solid #dee5ee;border-radius:8px;padding:22px;min-width:0}
.admin-panel-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}
.admin-panel-heading h2{font-size:18px;letter-spacing:-.025em;margin:0}
.admin-panel-heading p{font-size:12px;line-height:1.55;color:#59677d;margin:6px 0 0}
.admin-create-form{display:grid;gap:9px}
.admin-create-form>label,.admin-branch-field label,.admin-search{font-size:12px;font-weight:700;color:#59677d}
.admin-create-form>input,.admin-create-form>select,.admin-branch-field select,.admin-search input,.user-branch-select{height:40px;width:100%;padding:0 11px;border:1px solid #cbd5e2;border-radius:6px;background:#fff;color:#18243a}
.admin-create-form>input,.admin-create-form>select{margin-bottom:7px}
.admin-branch-field{display:grid;gap:9px;margin-bottom:11px}
.admin-create-form>.button{height:42px}
.admin-search{display:grid;gap:6px;min-width:205px}
.admin-search input{height:35px;font-weight:400}
.admin-page .admin-users{max-height:690px;overflow-y:auto}
.admin-page .user-card{background:#fbfcfe}
.admin-page .user-card-actions{justify-content:flex-start}
.user-branch-name{display:block;margin-top:4px;color:#59677d;font-size:12px}
.user-branch-select{width:min(220px,100%);height:34px;font-size:12px}
.admin-empty{padding:28px;color:#59677d;text-align:center;font-size:13px}
.admin-branches{margin-top:18px}
.admin-branches .table-wrap{max-height:440px;overflow:auto}
.admin-branches .branch-table{min-width:440px}
.admin-branches .branch-table td{height:42px}
.admin-loading{color:#59677d;font-size:13px}
@media(max-width:900px){.admin-page-grid{grid-template-columns:1fr}.admin-page .admin-users{max-height:none}}
@media(max-width:600px){.admin-page-head{align-items:start}.admin-page-head h1{font-size:25px}.admin-page-stat{min-width:88px;padding:9px 10px}.admin-panel{padding:17px}.admin-panel-heading{align-items:start;flex-direction:column}.admin-search{width:100%}.admin-page .user-card-actions{display:grid;grid-template-columns:1fr 1fr}.user-role-select,.user-branch-select{width:100%}.admin-page .user-reset{flex-wrap:wrap}.admin-page .user-reset input{max-width:none}.admin-page-head p:last-child{line-height:1.5}}