/* ═══════════════════════════════════════════════════════════════════════════════════════
   P1 Web CAD — dispatch boards (Active / Pending call boards + Units Queue)
   Mirrors the desktop app theme: Themes/DarkTheme.xaml + Themes/LightTheme.xaml.
   Shared by index.html and board.html so the two can never drift.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --t-bg:#1E2028; --t-panel:#272A33; --t-surface:#22252E; --t-input:#1A1D26; --t-hover:#2E323C;
  --t-selected:#1E3A5F; --t-popup:#272A33; --t-detail:#1A1D26; --t-tab-active:#2E323C; --t-tab-hover:#272A33;
  --t-border:#383C47; --t-border-sub:#2E323C; --t-border-hover:#484D5A; --t-border-menu:#383C47;
  --t-accent:#3B82F6; --t-accent-bright:#60A5FA; --t-accent-dim:#5A5F6B; --t-accent-title:#3B82F6;
  --t-text:#E8EAED; --t-text-dim:#9BA1AE; --t-text-muted:#6B7280; --t-text-faint:#5A5F6B; --t-text-menu:#E8EAED;
  --t-text-note:#9BA1AE; --t-red:#EF4444; --t-green:#22C55E; --t-amber:#F59E0B;
  --t-hdr-bg:linear-gradient(180deg,#272A33 0%,#22252E 45%,#1E2028 100%);
  --t-hdr-hover:linear-gradient(180deg,#2E323C 0%,#272A33 45%,#22252E 100%);
  --t-hdr-border:#383C47;
  --t-scroll:#484D5A; --t-scroll-hover:#6A7183;
  --t-menu-hl-text:#FFFFFF;
  --gfs:13px;                 /* GlobalFontSize (desktop default 13, dispatcher 10-22) */
  --urow:34px;                /* UnitRowHeight: COMPACT 34 / ROOMY 46 */
  --b-mono:'Cascadia Code',Consolas,'Courier New',monospace;
  --b-ui:'Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
}
html[data-theme="light"]{
  --t-bg:#F2F4F7; --t-panel:#FFFFFF; --t-surface:#ECEEF2; --t-input:#FFFFFF; --t-hover:#E6EBF0;
  --t-selected:#D4E4F0; --t-popup:#FFFFFF; --t-detail:#F7F9FC; --t-tab-active:#E1E8F0; --t-tab-hover:#EFF3F7;
  --t-border:#D8DFE8; --t-border-sub:#C6D0DC; --t-border-hover:#8FA4B8; --t-border-menu:#D8DFE8;
  --t-accent:#0E6B8F; --t-accent-bright:#0A5570; --t-accent-dim:#5B8FA6; --t-accent-title:#0A5570;
  --t-text:#0D1B2A; --t-text-dim:#3D5166; --t-text-muted:#5C7080; --t-text-faint:#96AABB; --t-text-menu:#3D5166;
  --t-text-note:#3D5166; --t-red:#C8202A; --t-green:#0B8A5C; --t-amber:#C47A0A;
  --t-hdr-bg:linear-gradient(180deg,#F8FAFB 0%,#EEF1F5 45%,#E4E8EE 100%);
  --t-hdr-hover:linear-gradient(180deg,#FFFFFF 0%,#F0F4F8 45%,#E8ECF2 100%);
  --t-hdr-border:#C6D0DC;
  --t-scroll:#C0CDD8; --t-scroll-hover:#94A6B6;
  --t-menu-hl-text:#0D1B2A;
  /* the host page's own tokens follow the theme too */
  --bg:#F2F4F7; --surface:#ECEEF2; --detail:#F7F9FC; --hover:#E6EBF0; --selected:#D4E4F0;
  --border:#D8DFE8; --border-sub:#C6D0DC; --accent:#0E6B8F; --accent-dim:#5B8FA6;
  --txt:#0D1B2A; --txt-dim:#3D5166; --txt-faint:#96AABB; --txt-sec:#5C7080;
}

/* ── generic chrome ─────────────────────────────────────────────────────────────────── */
.b-scroll{overflow:auto;min-height:0;flex:1}
.b-scroll::-webkit-scrollbar{width:10px;height:10px}
.b-scroll::-webkit-scrollbar-thumb{background:var(--t-scroll);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
.b-scroll::-webkit-scrollbar-thumb:hover{background:var(--t-scroll-hover);background-clip:padding-box}
.b-scroll::-webkit-scrollbar-track,.b-scroll::-webkit-scrollbar-corner{background:transparent}

/* ── the boards area: ACTIVE over PENDING with a splitter, status bar underneath ───────── */
.bd-host{display:flex;flex-direction:column;min-height:0;flex:1;background:var(--t-bg);font-family:var(--b-mono)}
.bd-split{display:flex;flex-direction:column;flex:1;min-height:0}
.bd-pane{display:flex;flex-direction:column;min-height:80px;border:1px solid var(--t-border);background:var(--t-bg)}
.bd-pane-h{display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;background:var(--t-surface);
  border-bottom:1px solid var(--t-border);font:700 11px var(--b-ui);letter-spacing:.4px;color:var(--t-text-dim);text-transform:uppercase}
.bd-pane-h .sp{flex:1}
.bd-pane-h .pbtn{background:transparent;border:1px solid transparent;color:var(--t-text-muted);height:20px;width:24px;padding:0;
  border-radius:3px;font-size:12px;cursor:pointer}
.bd-pane-h .pbtn:hover{background:var(--t-hover);border-color:var(--t-border);color:var(--t-text)}
.bd-gutter{height:6px;cursor:row-resize;background:var(--t-bg);flex:none;position:relative}
.bd-gutter::after{content:'';position:absolute;left:50%;top:2px;width:40px;height:2px;margin-left:-20px;border-radius:1px;background:var(--t-border)}
.bd-gutter:hover::after,.bd-gutter.drag::after{background:var(--t-accent)}
.bd-status{display:flex;align-items:center;gap:0;height:28px;padding:4px 12px;background:var(--t-surface);border-top:1px solid var(--t-border);
  font:11px Consolas,var(--b-mono);color:var(--t-text-dim);flex:none}
.bd-status .late{color:#EF4444;font-weight:700;margin-left:8px;min-width:0}
.bd-status .div{width:1px;height:14px;background:var(--t-border);margin:0 14px}
.bd-status .clock{margin-left:auto;color:var(--t-text-faint)}
.bd-offline{display:none;align-items:center;gap:10px;justify-content:center;background:var(--t-red);color:#fff;font:700 13px Consolas,var(--b-mono);padding:6px}
.bd-offline.show{display:flex}

/* ── tab strip (ThemedAgencyTab) ───────────────────────────────────────────────────── */
.bd-tabs{display:flex;align-items:flex-end;gap:0;padding:6px 6px 0;background:var(--t-bg);position:relative;flex:none;flex-wrap:wrap}
.bd-tab{display:flex;align-items:center;padding:7px 14px;margin-right:4px;border-radius:6px 6px 0 0;cursor:pointer;user-select:none;
  font:700 12px var(--b-ui);color:var(--t-text-muted);white-space:nowrap}
html[data-theme="light"] .bd-tab{font-weight:600}
.bd-tab:hover{background:var(--t-tab-hover)}
html[data-theme="light"] .bd-tab:hover{color:var(--t-text-dim)}
.bd-tab.on{background:var(--t-tab-active);color:var(--t-accent-bright)}
.bd-tab .agchip{width:4px;height:14px;border-radius:1px;margin-right:8px;flex:none}
.bd-tab .cnt{margin-left:7px;padding:1px 6px;border-radius:7px;background:var(--t-surface);border:1px solid var(--t-border);
  font:700 10px Consolas,var(--b-mono);color:var(--t-text-dim)}
.bd-tab .cnt.zero{opacity:.45}
.bd-tab .ldot{width:6px;height:6px;border-radius:50%;background:var(--t-red);margin-left:6px;flex:none}
.bd-tab .tx{margin:0 -4px 0 10px;width:16px;height:16px;line-height:15px;text-align:center;font:700 14px var(--b-ui);color:var(--t-text-muted);border-radius:3px}
.bd-tab .tx:hover{color:var(--t-text);background:var(--t-hover)}
.bd-tabadd{margin-left:auto;align-self:flex-start;width:28px;height:22px;margin-top:2px;margin-right:4px;border-radius:3px;border:none;background:transparent;
  color:var(--t-accent-dim);font:700 14px var(--b-ui);cursor:pointer;padding:0}
.bd-tabadd:hover{background:var(--t-hover);color:var(--t-accent)}

/* ── per-view header row: late chip + quick filter ────────────────────────────────────── */
.bd-view{display:flex;flex-direction:column;flex:1;min-height:0;padding:6px 6px 0}
.bd-view.active{background:var(--t-panel)}
.bd-view.pending{background:var(--t-input)}
.bd-vhead{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:8px;flex:none}
.latechip{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid #7F1D1D;border-radius:3px;padding:5px 9px;
  font:700 11px Consolas,var(--b-mono);color:#F87171;cursor:pointer;height:auto}
.latechip:hover{background:#2A1618;border-color:#EF4444}
.latechip:active{background:#EF4444;color:#fff}
.latechip img{width:14px;height:14px}
.qfilter{display:flex;align-items:center;background:var(--t-input);border:1px solid var(--t-border-sub);border-radius:3px;padding:6px 10px}
.qfilter.round{border-radius:6px}
.qfilter svg{width:12px;height:11px;margin-right:8px;flex:none}
.qfilter input{background:transparent;border:none;outline:none;color:var(--t-text);font:12px Consolas,var(--b-mono);width:200px;height:auto;padding:0}
.qfilter input::placeholder{color:var(--t-text-faint)}
.qfilter.grow{flex:1}
.qfilter.grow input{width:100%;font:12px var(--b-ui)}

/* ── grids ─────────────────────────────────────────────────────────────────────────── */
table.bg{border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:100%}
table.bg th{position:sticky;top:0;z-index:2;background:var(--t-hdr-bg);border:solid var(--t-hdr-border);border-width:0 1px 1px 0;
  padding:10px 12px;text-align:left;font:600 10px var(--b-ui);color:var(--t-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;user-select:none}
table.bg th:hover{background:var(--t-hdr-hover);color:var(--t-accent-bright)}
table.bg th.nohdr{cursor:default}
table.bg th .sa{display:inline-block;width:8px;height:6px;margin-left:6px;vertical-align:middle}
table.bg th .sa path{fill:var(--t-accent-bright)}
html[data-theme="light"] table.bg th .sa path{fill:var(--t-accent)}
table.bg th .grip{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:3}
table.bg th{position:sticky}
table.bg th.dragover{box-shadow:inset 2px 0 0 var(--t-accent)}
table.bg td{padding:10px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;border-bottom:1px solid var(--t-border);vertical-align:middle}
table.bg tr.r{cursor:default}
table.bg tr.r td{background:transparent}
.bg-empty{color:var(--t-text-faint);font:13px var(--b-ui);text-align:center;padding:60px 20px;white-space:pre-line}

/* call rows */
table.cg{font-family:var(--b-mono);font-size:var(--gfs)}
table.cg tr.r{min-height:34px;color:var(--t-text)}
table.cg tr.r.dflt{background:#020617;color:#FFFFFF}
html[data-theme="light"] table.cg tr.r.dflt{background:transparent;color:var(--t-text)}
table.cg tr.r.sel{background:var(--t-selected)!important;color:var(--t-text)!important}
table.cg tr.r.sel td{border-bottom-color:var(--t-accent)}
table.cg tr.r.late td:first-child{box-shadow:inset 3px 0 0 #EF4444}
table.cg tr.r.dropok{outline:2px dashed var(--t-accent);outline-offset:-2px}
table.cg td.c-id{font-weight:700}
table.cg td.c-nature.semi{font-weight:600}
table.cg td.c-elapsed{text-align:right}
table.cg tr.r.late td.c-elapsed{font-weight:700}
.beacon{width:18px;height:18px;margin-right:8px;vertical-align:-4px;animation:beacon .9s ease-in-out infinite alternate}
@keyframes beacon{from{opacity:1}to{opacity:.25}}
.caret{display:inline-block;width:8px;height:8px;vertical-align:middle;overflow:visible}
.caret path{fill:none;stroke:var(--t-text-muted);stroke-width:1.5}
td[data-caret]{cursor:pointer}
.caret.open path{stroke:var(--t-accent-bright)}
.ppill{display:inline-block;border-radius:3px;padding:2px 8px;font:700 10px Consolas,var(--b-mono);white-space:nowrap;background:#3A3F4B;color:#E8EAED}
.ubadge{display:inline-block;border-radius:3px;padding:2px 6px;margin:2px 4px 2px 0;font-weight:700;font-size:var(--gfs);white-space:nowrap;line-height:1.2}
.ubplus{display:inline-block;border-radius:3px;padding:2px 5px;margin-left:2px;background:var(--t-surface);border:1px solid var(--t-border);font:700 10px var(--b-mono);color:var(--t-text-dim)}

/* expanded row detail */
tr.det td{padding:0;border-bottom:1px solid var(--t-border);white-space:normal;background:var(--t-detail);cursor:default}
.det-in{display:grid;padding:14px 20px 16px 56px;animation:detin .18s ease-out;color:var(--t-text);font-family:var(--b-mono)}
@keyframes detin{from{opacity:0}to{opacity:1}}
.det-in .dv{background:var(--t-border);margin:4px 0}
.det-in .sec{padding:0 16px;min-width:0;overflow:hidden}
.det-in .lbl{font:800 9px var(--b-ui);color:var(--t-text-faint);letter-spacing:.3px;margin-bottom:4px}
.det-in .lbl.mt{margin-top:10px}
.det-in .big{font-size:20px;font-weight:800;color:var(--t-accent)}
.det-in .el{font-size:18px;font-weight:800}
.det-in .dim{color:var(--t-text-dim)} .det-in .faint{color:var(--t-text-faint)}
.det-in .xs{font-size:10px;font-weight:700} .det-in .s11{font-size:11px}
.det-in .lr{color:#EF4444;font-style:italic;font-size:11px;margin-top:6px}
.det-in .note{padding:4px 0;border-bottom:1px solid var(--t-border)}
.det-in .note .nh{font:700 9px var(--b-mono);color:var(--t-accent-dim)}
.det-in .note .nb{font-size:11px;line-height:15px;color:var(--t-text-dim);white-space:pre-wrap;word-break:break-word}
.det-in .log{max-height:140px;overflow:auto}
.det-in .ubadge{padding:3px 8px;font-size:11px;margin:0 6px 5px 0}

/* unit rows */
table.ug{font-family:Tahoma,Verdana,sans-serif;font-size:var(--gfs)}
table.ug tr.r{height:var(--urow)}
table.ug tr.r td{border-bottom:1px solid var(--t-border)}
table.ug tr.r.late{font-weight:700}
table.ug tr.r.late td:first-child{box-shadow:inset 3px 0 0 #EF4444}
table.ug tr.r.emerg{font-weight:700}
table.ug tr.r.emerg td:first-child{box-shadow:inset 6px 0 0 #FEE2E2}
table.ug tr.r.sel td:first-child{box-shadow:inset 4px 0 0 var(--t-accent)}
table.ug tr.r[draggable="true"]{cursor:grab}
.spill{display:inline-block;border-radius:3px;padding:4px 8px;margin:0 2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.mdtdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#00C853}
.agyico{width:17px;height:17px;vertical-align:middle}
.ugdet .big{font-size:20px;font-weight:800;color:var(--t-accent)}
.ugdet .veh{font-size:12px;color:var(--t-accent-dim)}
.ugdet .st{font-size:15px;font-weight:800}
.ugdet .oos{font-size:11px;color:#EF4444}
.ugdet .qn{font-size:11px;color:var(--t-text-note);white-space:pre-wrap}

/* units queue chrome */
.uq-host{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--t-bg);font-family:Consolas,var(--b-mono)}
.uq-tool{display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;background:var(--t-panel);border-bottom:1px solid var(--t-border);flex:none}
.uq-btn{height:26px;padding:0 10px;background:transparent;border:1px solid transparent;border-radius:4px;font:700 11px Consolas,var(--b-mono);color:var(--t-text-dim);cursor:pointer}
.uq-btn:hover{background:var(--t-hover);border-color:var(--t-border);color:var(--t-text)}
.uq-div{width:1px;height:18px;background:var(--t-border);margin:0 4px}
.uq-sp{flex:1}
.uq-stat{font-size:11px;color:var(--t-text-faint);margin-left:10px}
.uq-stat.av{font-weight:700;color:var(--t-accent)}
.uq-stat.cm{color:var(--t-text-dim)}
.uq-chip{margin-left:10px;padding:3px 8px;border-radius:4px;font:700 11px Consolas,var(--b-mono)}
.uq-chip.late{background:#EF4444;color:#fff}
.uq-chip.emerg{background:#7F1D1D;color:#FEE2E2}
.uq-clock{margin-left:12px;font-size:11px;color:var(--t-text-faint)}
.uq-phead{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--t-surface);flex:none}
.uq-bulk{height:28px;min-width:120px;padding:0 10px;background:var(--t-accent);border:1px solid var(--t-accent);border-radius:4px;color:#fff;font:800 10px var(--b-ui);cursor:pointer}
.uq-bulk:disabled{opacity:.45;cursor:default}

/* menus (row context menu, [+] filter, column chooser) */
.bmenu{position:fixed;z-index:900;background:var(--t-popup);border:1px solid var(--t-border-menu);border-radius:3px;padding:4px 6px;
  box-shadow:0 4px 20px rgba(0,0,0,.5);min-width:200px;font:12px var(--b-ui);color:var(--t-text-menu);max-height:80vh;overflow:auto}
.bmenu.r8{border-radius:8px;padding:6px 6px 8px}
.bmenu.uq{border-color:var(--t-border-hover);border-radius:8px;min-width:240px;font:12px Consolas,var(--b-mono);color:var(--t-text-dim);box-shadow:0 4px 24px rgba(0,0,0,.35)}
.bmenu .mi{display:flex;align-items:center;gap:0;padding:8px 16px;margin:1px 2px;border-radius:4px;cursor:pointer;white-space:nowrap}
.bmenu.uq .mi{padding:8px 12px;border-radius:5px}
.bmenu .mi:hover{background:var(--t-tab-active);color:var(--t-menu-hl-text)}
.bmenu.uq .mi:hover{background:var(--t-hover);color:var(--t-text)}
.bmenu .mi.dis{opacity:.4;pointer-events:none}
.bmenu .mi.cur{font-weight:700;color:var(--t-accent)}
.bmenu .mi .sw{width:10px;height:10px;border-radius:3px;margin-right:10px;flex:none;border:1px solid rgba(0,0,0,.25)}
.bmenu .mi .ico{width:22px;flex:none;color:var(--t-accent-dim);font-size:13px}
.bmenu .mi .ck{width:20px;flex:none}
.bmenu .mi .ck svg{width:9px;height:8px}
.bmenu .mi .ck path{fill:none;stroke:var(--t-accent-bright);stroke-width:1.8}
.bmenu .mi .tag{margin-left:auto;padding-left:14px;font:700 8px var(--b-ui);color:var(--t-text-faint)}
.bmenu .mi.bold{font-weight:700;color:var(--t-accent)}
.bmenu .mh{font:800 9px var(--b-ui);color:var(--t-text-faint);padding:6px 12px 4px;letter-spacing:.3px}
.bmenu .ms{height:1px;background:var(--t-border-menu);margin:4px 6px}
.bmenu.uq .ms{background:var(--t-border-sub);margin:5px 12px}
.bmenu .mt{font:800 9px var(--b-ui);color:var(--t-text-faint);padding:4px 14px 6px;border-bottom:1px solid var(--t-border-menu);margin-bottom:4px}
.bmenu.flt{font:11px Consolas,var(--b-mono)}

/* modal dialog (close call, create tab, quick note, call picker) */
.bmodal *,.bmenu *{box-sizing:border-box}
.bmodal{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.bmodal .card{width:440px;max-width:94vw;background:var(--t-panel);border:1px solid var(--t-border);border-radius:8px;box-shadow:0 18px 50px rgba(0,0,0,.55);
  font:12px var(--b-ui);color:var(--t-text);overflow:hidden}
.bmodal .hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--t-surface);border-bottom:1px solid var(--t-border)}
.bmodal .hd .bar{width:4px;height:20px;background:var(--t-accent);border-radius:1px}
.bmodal .hd b{font:700 13px Consolas,var(--b-mono);letter-spacing:.3px}
.bmodal .hd small{display:block;color:var(--t-text-faint);font-size:11px}
.bmodal .bd{padding:14px 16px;max-height:60vh;overflow:auto}
.bmodal label{display:block;font:800 9px var(--b-ui);color:var(--t-text-faint);letter-spacing:.3px;margin:10px 0 4px}
.bmodal input[type=text],.bmodal select,.bmodal textarea{width:100%;background:var(--t-input);color:var(--t-text);border:1px solid var(--t-border-sub);
  border-radius:4px;padding:7px 9px;font:12px var(--b-ui);height:auto}
.bmodal textarea{min-height:80px;resize:vertical}
.bmodal .chk{display:flex;align-items:center;gap:8px;padding:5px 2px;cursor:pointer}
.bmodal .chk input{width:auto;height:auto}
.bmodal .ft{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--t-border);background:var(--t-surface)}
.bmodal .ft button{height:30px;padding:0 16px;border-radius:4px;font:700 11px Consolas,var(--b-mono);cursor:pointer;border:1px solid var(--t-border);background:var(--t-hover);color:var(--t-text)}
.bmodal .ft button.pri{background:var(--t-accent);border-color:var(--t-accent);color:#fff}
.bmodal .ft button.dng{background:#7F1D1D;border-color:#991B1B;color:#FEE2E2}
.bmodal .err{color:#F87171;font-size:11px;margin-top:8px;min-height:14px}
.bmodal .opt{display:block;width:100%;text-align:left;padding:9px 10px;margin-bottom:5px;border:1px solid var(--t-border);border-radius:4px;
  background:var(--t-input);color:var(--t-text);font:12px Consolas,var(--b-mono);cursor:pointer;height:auto}
.bmodal .opt:hover{border-color:var(--t-accent)}
.bmodal .s11{font-size:11px}
.bmodal input[type=date]{background:var(--t-input);color:var(--t-text);border:1px solid var(--t-border-sub);border-radius:4px;padding:6px 8px;font:12px var(--b-ui);height:auto;color-scheme:dark}
html[data-theme="light"] .bmodal input[type=date]{color-scheme:light}