/* ===================== THEME SYSTEM (ported from blotter deck) ===================== */
:root{
  --bg:#03070c;--bg2:#050b12;--pane:#071019;--pane2:#0a1622;--head:#0a1622;
  --rule:#16313f;--rule2:#1f4356;--txt:#cfe6f5;--txt2:#97b8cd;--txt3:#6a8898;
  --ink:#021018;--hover:#0d1f2c;--sel:#123043;
  --amber:#62d0ff;--green:#3be0c4;--red:#ff6b8a;--cyan:#5ad1ff;
  --pos:#3be0c4;--neg:#ff6b8a;--warn:#ffc24d;--gold:#7fd8ff;
  --shadow:rgba(0,0,0,.82);--thumb:#1c3a4a;--thumb2:#27506a;
  --a-over:#62a6ff;--a-map:#5ad1ff;--a-blot:#3be0c4;--a-route:#9ad0ff;--a-fleet:#5ad1ff;
  --a-driv:#ffc24d;--a-assign:#b78bff;--a-load:#ff9a6a;--a-cover:#3be0c4;--a-feed:#62d0ff;
}
html[data-theme="amber"]{--bg:#05080a;--bg2:#080c10;--pane:#0a0f13;--pane2:#0c1217;--head:#0a1014;
  --rule:#16202a;--rule2:#1d2a36;--txt:#c7d4cf;--txt2:#94a89f;--txt3:#6c7d75;--ink:#000;--hover:#0d161c;--sel:#13202a;
  --amber:#ffb000;--green:#21d07a;--red:#ff4d4d;--cyan:#34c7d4;--pos:#21d07a;--neg:#ff4d4d;--warn:#ffb000;--gold:#ffb000;
  --thumb:#1b2730;--thumb2:#27353f;--a-over:#7da6ff;--a-map:#34c7d4;--a-blot:#21d07a;--a-route:#9aa7ff;--a-fleet:#34c7d4;
  --a-driv:#ffb000;--a-assign:#b78bff;--a-load:#ff7a59;--a-cover:#21d07a;--a-feed:#ffb000;}
html[data-theme="bloomberg"]{--bg:#070503;--bg2:#0c0906;--pane:#120d08;--pane2:#18110a;--head:#18110a;
  --rule:#2a1c0c;--rule2:#3a2810;--txt:#f0d9b8;--txt2:#c8a370;--txt3:#8e7048;--ink:#000;--hover:#1c1206;--sel:#2a1c0a;
  --amber:#ff9b1e;--green:#46d07a;--red:#ff5340;--cyan:#f0a83c;--pos:#46d07a;--neg:#ff5340;--warn:#ffb01e;--gold:#ff9b1e;
  --thumb:#2a1c0c;--thumb2:#4a3216;--a-over:#f0a83c;--a-map:#f0a83c;--a-blot:#46d07a;--a-route:#e0b85a;--a-fleet:#f0a83c;
  --a-driv:#ffb01e;--a-assign:#ff8c5a;--a-load:#ff5340;--a-cover:#46d07a;--a-feed:#ff9b1e;}
html[data-theme="phosphor"]{--bg:#020503;--bg2:#040906;--pane:#061009;--pane2:#08150d;--head:#08150d;
  --rule:#103a22;--rule2:#1a5436;--txt:#9ff7b8;--txt2:#6cc890;--txt3:#479866;--ink:#021006;--hover:#0c2316;--sel:#103420;
  --amber:#7dff9e;--green:#39ff88;--red:#ff6a5a;--cyan:#6affc8;--pos:#39ff88;--neg:#ff6a5a;--warn:#c8ff7d;--gold:#aaff7d;
  --thumb:#16573a;--thumb2:#1f7a52;--a-over:#6affc8;--a-map:#6affc8;--a-blot:#39ff88;--a-route:#8effd0;--a-fleet:#6affc8;
  --a-driv:#aaff7d;--a-assign:#9affb0;--a-load:#ffb86a;--a-cover:#39ff88;--a-feed:#aaff7d;}
html[data-theme="midnight"]{--bg:#070912;--bg2:#0a0d1a;--pane:#0e1224;--pane2:#12172e;--head:#12172e;
  --rule:#222a4a;--rule2:#2f3a60;--txt:#d2d8f5;--txt2:#a2abda;--txt3:#717bac;--ink:#05071a;--hover:#171d38;--sel:#1e2748;
  --amber:#9aa6ff;--green:#5ae0a8;--red:#ff6b8a;--cyan:#6ad0ff;--pos:#5ae0a8;--neg:#ff6b8a;--warn:#ffd06a;--gold:#ffd06a;
  --thumb:#2a3258;--thumb2:#3a4578;--a-over:#7da6ff;--a-map:#6ad0ff;--a-blot:#5ae0a8;--a-route:#b0b8ff;--a-fleet:#6ad0ff;
  --a-driv:#ffd06a;--a-assign:#c08bff;--a-load:#ff8c9a;--a-cover:#5ae0a8;--a-feed:#ffd06a;}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:12px/1.4 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  background:var(--bg);color:var(--txt);overflow:hidden;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column}
.mono{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--thumb2)}::-webkit-scrollbar-track{background:transparent}
button{font:inherit;color:inherit;cursor:pointer}
.pos{color:var(--pos)}.neg{color:var(--neg)}.warn{color:var(--warn)}.dim{color:var(--txt3)}.t2{color:var(--txt2)}

/* ===================== TOP BAR ===================== */
.topbar{height:46px;flex:none;display:flex;align-items:center;gap:0;border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg,var(--bg2),var(--bg));padding:0 12px;z-index:50}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13px;letter-spacing:.04em;padding-right:14px;border-right:1px solid var(--rule)}
.brand .mk{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;background:var(--a-map);color:var(--ink);font-weight:800;font-size:13px}
.brand small{color:var(--txt3);font-weight:600;font-size:10px;letter-spacing:.22em}
.glob{display:flex;align-items:stretch;gap:0;height:100%;overflow:hidden;flex:1}
.gstat{display:flex;flex-direction:column;justify-content:center;padding:0 14px;border-right:1px solid var(--rule);min-width:74px}
.gstat .v{font-size:13px;font-weight:700;letter-spacing:.02em}.gstat .k{font-size:9px;letter-spacing:.13em;color:var(--txt3);text-transform:uppercase}
.tb-right{display:flex;align-items:center;gap:12px;padding-left:12px}
.clock{font-size:13px;font-weight:700;color:var(--a-map);letter-spacing:.05em}
.clock small{color:var(--txt3);font-weight:500;margin-left:7px;font-size:10px}
.conn{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--green);letter-spacing:.1em}
.conn .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:bl 1.6s infinite}
@keyframes bl{50%{opacity:.35}}
.thsel{background:var(--pane);border:1px solid var(--rule);color:var(--txt2);border-radius:5px;padding:4px 6px;font:inherit;font-size:10px}

/* ===================== TABS ===================== */
.tabs{height:34px;flex:none;display:flex;align-items:stretch;border-bottom:1px solid var(--rule);background:var(--bg2);padding:0 8px;gap:1px;overflow-x:auto}
.tab{display:flex;align-items:center;gap:7px;padding:0 13px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--txt3);
  border:none;background:none;border-bottom:2px solid transparent;white-space:nowrap;text-transform:uppercase;position:relative}
.tab .kc{font-size:9px;color:var(--txt3);border:1px solid var(--rule);border-radius:3px;padding:0 4px;line-height:14px}
.tab:hover{color:var(--txt)}
.tab.on{color:var(--a-map);border-bottom-color:var(--a-map)}   /* active tab = single theme accent (consistent across all tabs) */
.tab .badge{background:var(--neg);color:#fff;border-radius:8px;font-size:9px;padding:0 5px;line-height:14px;font-weight:700}

/* ===================== VIEW ===================== */
#view{flex:1;min-height:0;position:relative;overflow:hidden}
.mod{position:absolute;inset:0;overflow:auto;padding:10px;display:none}
.mod.on{display:block}
.mod.flex{display:none}.mod.flex.on{display:flex}

/* grid helpers */
.grid{display:grid;gap:10px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g-12-1{grid-template-columns:1.2fr 1fr}.row{display:flex;gap:10px}

/* PANE */
.pane{background:var(--pane);border:1px solid var(--rule);border-radius:7px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pane>.ph{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--rule);
  background:var(--head);flex:none}
.ph h3{margin:0;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);font-weight:700;display:flex;align-items:center;gap:7px}
.ph h3 .acc{width:7px;height:7px;border-radius:2px;background:var(--ac,var(--a-map))}
.ph .meta{font-size:10px;color:var(--txt3);letter-spacing:.06em}
.pbody{overflow:auto;flex:1;min-height:0}

/* KPI tiles */
.kpi{background:var(--pane);border:1px solid var(--rule);border-radius:7px;padding:11px 13px;position:relative;overflow:hidden}
.kpi .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}
.kpi .v{font-size:27px;font-weight:800;letter-spacing:-.01em;margin-top:3px;line-height:1}
.kpi .sub{font-size:10px;color:var(--txt2);margin-top:5px}
.kpi .spark{position:absolute;right:10px;top:10px;opacity:.8}
.kpi .stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac,var(--a-over))}

/* TABLES (blotter) */
table.blot{width:100%;border-collapse:collapse;font-size:11px}
table.blot th{position:sticky;top:0;background:var(--head);text-align:left;padding:6px 9px;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt3);font-weight:700;border-bottom:1px solid var(--rule2);cursor:pointer;white-space:nowrap;z-index:2}
table.blot th:hover{color:var(--txt)}
table.blot th.num,table.blot td.num{text-align:right;font-variant-numeric:tabular-nums}
table.blot td{padding:5px 9px;border-bottom:1px solid var(--rule);white-space:nowrap}
table.blot tbody tr{cursor:pointer}
table.blot tbody tr:hover{background:var(--hover)}
table.blot tbody tr.sel{background:var(--sel)}
table.blot tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--ac,var(--a-map))}
.code{font-weight:700;letter-spacing:.03em}
.tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:4px;border:1px solid;text-transform:uppercase}
.t-done{color:var(--txt3);border-color:var(--rule2);background:transparent}
.t-enr{color:var(--a-map);border-color:color-mix(in srgb,var(--a-map) 40%,transparent);background:color-mix(in srgb,var(--a-map) 10%,transparent)}
.t-next{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.t-q{color:var(--txt2);border-color:var(--rule2)}
.t-urg{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 50%,transparent);background:color-mix(in srgb,var(--neg) 12%,transparent);animation:bl 1.1s infinite}
.t-ok{color:var(--pos);border-color:color-mix(in srgb,var(--pos) 40%,transparent);background:color-mix(in srgb,var(--pos) 10%,transparent)}
.t-risk{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.t-late{color:var(--neg);border-color:color-mix(in srgb,var(--neg) 45%,transparent);background:color-mix(in srgb,var(--neg) 11%,transparent)}
.dotc{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.bar{height:6px;border-radius:4px;background:var(--rule);overflow:hidden;min-width:46px;display:inline-block;vertical-align:middle}
.bar i{display:block;height:100%;border-radius:4px}
.miniact{font-size:9.5px;font-weight:700;letter-spacing:.05em;padding:2px 8px;border-radius:4px;border:1px solid var(--rule2);
  background:var(--pane2);color:var(--txt)}
.miniact:hover{background:var(--ac,var(--a-map));color:var(--ink);border-color:transparent}

/* coverage ring */
.ring{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;position:relative;flex:none}
.ring b{font-size:14px;font-weight:800}
.gauge{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--rule)}
.gauge:last-child{border-bottom:none}

/* OVERVIEW alert list */
.alert{display:flex;gap:9px;padding:8px 10px;border-bottom:1px solid var(--rule);align-items:flex-start}
.alert .ai{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none;color:var(--ink)}
.alert .at{font-size:11px;font-weight:700}.alert .ab{font-size:10px;color:var(--txt2);margin-top:2px;line-height:1.35}
.alert .ar{margin-left:auto;font-size:9.5px;font-weight:700;color:var(--txt3)}
.alert .acts{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}

/* ASSIGN best match */
.bestmatch{border:1px solid color-mix(in srgb,var(--a-assign) 55%,transparent);border-radius:8px;padding:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--a-assign) 12%,transparent),transparent)}
.score{font-size:42px;font-weight:800;color:var(--a-assign);line-height:1;letter-spacing:-.02em}
.sbk{margin-top:4px}.sbk .row2{display:flex;align-items:center;gap:9px;margin:6px 0;font-size:10.5px}
.sbk .row2 .lab{width:150px;color:var(--txt2)}.sbk .row2 .bar{flex:1}

/* LOADING bay */
.bay{display:flex;flex-direction:column-reverse;gap:3px;padding:8px;background:var(--bg2);border:1px solid var(--rule);border-radius:6px}
.bayslot{height:30px;border-radius:4px;display:flex;align-items:center;padding:0 10px;font-size:10.5px;font-weight:700;color:var(--ink);justify-content:space-between}
.constraint{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:11px}
.constraint .ck{margin-left:auto;font-weight:800}

/* big buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.05em;
  border:1px solid var(--rule2);background:var(--pane2);color:var(--txt)}
.btn:hover{border-color:var(--ac,var(--a-map))}
.btn.primary{background:var(--ac,var(--a-map));color:var(--ink);border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}

/* ===================== LIVE MAP MODULE ===================== */
#mapModule{padding:0}
.mapwrap{position:absolute;inset:0;display:grid;grid-template-columns:268px 1fr 280px}
#map{position:relative;background:#06121e}
.leaflet-container{background:#06121e;font-family:inherit}
.leaflet-control-attribution{background:rgba(3,7,12,.7)!important;color:var(--txt3)!important;font-size:9px}
.leaflet-control-attribution a{color:var(--txt2)!important}.leaflet-control-zoom{display:none}
.mapside{border-right:1px solid var(--rule);background:var(--pane);display:flex;flex-direction:column;min-height:0}
.mapside.r{border-right:none;border-left:1px solid var(--rule)}
.rcard{padding:9px 10px;border-bottom:1px solid var(--rule);cursor:pointer;position:relative}
.rcard:hover{background:var(--hover)}.rcard.sel{background:var(--sel)}
.rcard.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc)}
.rc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.rc-code{font-weight:700;font-size:12px;display:flex;align-items:center;gap:6px}
.rc-meta{font-size:9.5px;color:var(--txt3);margin-bottom:6px}
.rc-bars{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:9px;color:var(--txt3)}
.feedrow{padding:6px 10px;border-bottom:1px solid var(--rule);font-size:10px;display:flex;gap:7px;align-items:baseline}
.feedrow .ts{color:var(--txt3);font-size:9px;flex:none}
.feedrow .sev{width:4px;align-self:stretch;border-radius:2px;flex:none}
.mapkpi{position:absolute;left:10px;bottom:10px;z-index:500;display:flex;gap:0;background:rgba(3,7,12,.72);
  backdrop-filter:blur(8px);border:1px solid var(--rule);border-radius:7px;overflow:hidden}
.mapkpi .mk{padding:7px 12px;border-right:1px solid var(--rule)}.mapkpi .mk:last-child{border-right:none}
.mapkpi .v{font-size:15px;font-weight:800}.mapkpi .k{font-size:8.5px;letter-spacing:.12em;color:var(--txt3);text-transform:uppercase}
.maptools{position:absolute;right:10px;top:10px;z-index:500;display:flex;gap:5px}
.mtool{background:rgba(3,7,12,.72);backdrop-filter:blur(8px);border:1px solid var(--rule);border-radius:6px;color:var(--txt2);padding:6px 9px;font-size:10px;font-weight:600}
.mtool:hover,.mtool.on{color:var(--ink);background:var(--a-map);border-color:transparent}

/* markers */
.truck-wrap{position:relative;width:30px;height:30px}
.truck-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,var(--c) 0%,transparent 70%);opacity:.5;animation:halo 2.2s ease-out infinite}
@keyframes halo{0%{transform:scale(.5);opacity:.55}100%{transform:scale(1.5);opacity:0}}
.truck-glyph{position:absolute;top:50%;left:50%;width:23px;height:23px;transform:translate(-50%,-50%);border-radius:6px;
  display:grid;place-items:center;background:#06121e;border:1.5px solid var(--rc);box-shadow:0 0 12px -2px var(--rc);font-size:11px;color:var(--rc)}
.truck-rot{display:block}
.stopmk{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800;
  border:2px solid var(--rc);background:#06121e;color:var(--rc);box-shadow:0 0 0 2px rgba(6,18,30,.7)}
.stopmk.done{background:var(--rc);color:#04121e}.stopmk.next{animation:np 1.4s infinite;border-color:#fff}
@keyframes np{50%{box-shadow:0 0 0 5px rgba(255,255,255,.001),0 0 0 2px rgba(6,18,30,.7)}}
.stopmk.urg{border-color:var(--neg);color:var(--neg);animation:np 1s infinite}
.depotmk{width:20px;height:20px;transform:rotate(45deg);border-radius:4px;background:#06121e;border:2px solid var(--cyan);display:grid;place-items:center;box-shadow:0 0 10px -2px var(--cyan)}
.depotmk i{transform:rotate(-45deg);font-size:9px;color:var(--cyan);font-style:normal}
.leaflet-popup-content-wrapper{background:var(--pane2);color:var(--txt);border:1px solid var(--rule2);border-radius:7px}
.leaflet-popup-tip{background:var(--pane2)}.leaflet-popup-content{margin:9px 11px;font-size:11px}
.poph{font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.popr{display:flex;justify-content:space-between;gap:16px;color:var(--txt2)}.popr b{color:var(--txt)}

/* ===================== TAPE + STATUSBAR ===================== */
.tape{height:28px;flex:none;display:flex;align-items:center;border-top:1px solid var(--rule);background:var(--bg2);overflow:hidden}
.tape .lbl{flex:none;padding:0 11px;height:100%;display:flex;align-items:center;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  color:var(--ink);background:var(--a-feed);text-transform:uppercase}
.tape .track{flex:1;overflow:hidden;position:relative;height:100%}
.tape .marq{position:absolute;white-space:nowrap;display:flex;align-items:center;height:100%;animation:marq 60s linear infinite;will-change:transform}
.tape .it{padding:0 18px;font-size:10.5px;color:var(--txt2);display:inline-flex;gap:8px;align-items:center}
.tape .it b{color:var(--txt)}.tape .it .sv{width:6px;height:6px;border-radius:50%}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape:hover .marq{animation-play-state:paused}
.statusbar{height:20px;flex:none;display:flex;align-items:center;gap:0;border-top:1px solid var(--rule);background:var(--bg);font-size:9.5px;color:var(--txt3);padding:0 10px}
.statusbar .s{padding:0 11px;border-right:1px solid var(--rule)}.statusbar .s:first-child{padding-left:0}
.statusbar .sp{flex:1}
kbd{font:inherit;font-size:9px;border:1px solid var(--rule2);border-radius:3px;padding:0 4px;color:var(--txt2);background:var(--pane)}

/* toast */
#toasts{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:7px;align-items:center}
.toast{background:var(--pane2);border:1px solid var(--rule2);border-left:3px solid var(--a-map);border-radius:6px;padding:9px 14px;font-size:11px;
  box-shadow:0 14px 36px -14px var(--shadow);animation:ti .25s ease;max-width:460px}
@keyframes ti{from{opacity:0;transform:translateY(8px)}}
.toast b{color:var(--txt)}

/* ===== Live-map ops rail ===== */
.opsec{border-bottom:1px solid var(--rule)}
.opsh{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;
  background:var(--head);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt2);font-weight:700;border-bottom:1px solid var(--rule)}
.opsh .n{background:var(--ac,var(--a-map));color:var(--ink);border-radius:8px;padding:0 6px;font-size:9px}
.qcard{padding:8px 10px;border-bottom:1px solid var(--rule)}
.qcard .qt{display:flex;align-items:center;justify-content:space-between;gap:6px}
.qcard .qm{font-size:9.5px;color:var(--txt3);margin:3px 0 6px}
.monrow{padding:8px 10px;border-bottom:1px solid var(--rule)}
.monrow .mt{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}
.monrow .ms{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--txt3);margin:4px 0 6px}
.monrow .acts{display:flex;gap:5px;flex-wrap:wrap}
.sdot{width:8px;height:8px;border-radius:50%;flex:none}

/* ===== Dispatch board ===== */
.dwrap{display:flex;flex-direction:column;height:100%}
.dstrip{display:flex;gap:8px;align-items:center;margin-bottom:9px;flex:none}
.dpill{border:1px solid var(--rule);border-radius:6px;padding:5px 11px;font-size:10px}
.dpill b{font-size:14px;font-weight:800;margin-right:5px}
.seg{display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden;margin-left:auto}
.seg button{padding:5px 12px;font-size:10px;font-weight:600;background:var(--pane);border:none;color:var(--txt3);letter-spacing:.05em}
.seg button.on{background:var(--a-map);color:var(--ink)}
.dboard{display:flex;gap:10px;flex:1;min-height:0}
.bucket{width:236px;flex:none;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden}
.lanes{flex:1;display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.lane{width:228px;flex:none;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden;transition:.15s}
.lane.target{outline:2px dashed var(--rc);outline-offset:-2px;cursor:pointer}
.lane.target:hover{background:var(--hover)}
.lanehd{padding:8px 10px;border-bottom:1px solid var(--rule);background:var(--head);position:relative}
.lanehd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rc)}
.lanestops{flex:1;overflow:auto}
.ordcard{border:1px solid var(--rule);border-radius:6px;padding:8px;margin:7px;background:var(--pane2);cursor:pointer;transition:.12s}
.ordcard:hover{border-color:var(--a-blot)}
.ordcard.sel{outline:1.5px solid var(--a-blot);border-color:transparent;background:var(--sel)}
.stopchip{display:flex;align-items:center;gap:8px;padding:6px 9px;border-bottom:1px solid var(--rule);font-size:10.5px}
.stopchip .sn{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800;flex:none;border:1.5px solid var(--rc);color:var(--rc)}
.stopchip.done .sn{background:var(--rc);color:var(--ink)}.stopchip.done{opacity:.5}
.stopchip.next .sn{border-color:#fff;animation:bl 1.4s infinite}
.dropzone{margin:7px;padding:11px;border:1.5px dashed var(--rc);border-radius:6px;text-align:center;font-size:10px;color:var(--rc);cursor:pointer;font-weight:700;letter-spacing:.05em}
.dropzone:hover{background:var(--hover)}
.capm{height:5px;border-radius:4px;background:var(--rule);overflow:hidden;margin-top:6px}.capm i{display:block;height:100%}

/* ===== Route lists ===== */
.rlwrap{display:grid;grid-template-columns:300px 1fr;gap:10px;height:100%}
.rltpl{padding:10px;border-bottom:1px solid var(--rule);cursor:pointer;position:relative}
.rltpl:hover{background:var(--hover)}.rltpl.sel{background:var(--sel)}
.rltpl.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--a-route)}
.rltpl .due{font-size:9px;letter-spacing:.05em;padding:1px 6px;border-radius:4px}
.chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--rule2);display:inline-grid;place-items:center;cursor:pointer;font-size:10px;color:transparent;flex:none}
.chk.on{background:var(--a-route);border-color:transparent;color:var(--ink)}

/* ===== Inventory ===== */
.invbar{height:8px;border-radius:5px;background:var(--rule);overflow:hidden;min-width:90px;display:inline-block;vertical-align:middle}
.invbar i{display:block;height:100%;border-radius:5px}
.sku{display:inline-flex;align-items:center;gap:5px;font-size:10px}.sku .sg{width:10px;height:10px;border-radius:3px}

/* ===== Truck cargo (loading) ===== */
.truckwrap{display:flex;justify-content:center;padding:6px 0}
.bays{display:flex;gap:3px;align-items:flex-end}
.tbay{width:74px;border-radius:4px 4px 0 0;display:flex;flex-direction:column;justify-content:flex-end;padding:7px 6px;
  color:var(--ink);font-size:9.5px;font-weight:700;position:relative;cursor:pointer;transition:.15s;border:1px solid rgba(0,0,0,.2)}
.tbay:hover{filter:brightness(1.12)}
.tbay.dim{opacity:.32}.tbay.now{outline:2px solid #fff;outline-offset:1px}
.tbay .lab{font-size:9px;opacity:.85}.tbay .wt{font-size:13px;font-weight:800;line-height:1}
.tbay .stack{display:flex;flex-direction:column;gap:2px;margin-bottom:5px}
.tbay .ice{height:6px;border-radius:2px;background:rgba(255,255,255,.55)}
.tlx{display:flex;align-items:stretch;gap:0}
.cab{width:34px;background:linear-gradient(180deg,var(--rule2),var(--head));border:1px solid var(--rule2);border-radius:6px 10px 0 6px;align-self:stretch;display:grid;place-items:center;color:var(--txt3);font-size:8px}
.ltabs{display:flex;gap:0;border:1px solid var(--rule);border-radius:6px;overflow:hidden;width:max-content}
.ltabs button{padding:6px 16px;font-size:10px;font-weight:700;letter-spacing:.06em;background:var(--pane);border:none;color:var(--txt3)}
.ltabs button.on{background:var(--a-map);color:var(--ink)}

/* ===== Graphical dock scene ===== */
.dock-scene{position:relative;height:288px;border:1px solid var(--rule);border-radius:8px;overflow:hidden;flex:none;
  background:linear-gradient(180deg,#0a1119 0%,#0a1119 60%,#0c141d 60%,#0c141d 100%)}
.dock-grid{position:absolute;inset:0;background-image:linear-gradient(var(--rule) 1px,transparent 1px);background-size:100% 30px;opacity:.16}
.dground{position:absolute;left:0;right:0;bottom:0;height:40%;background:#0c141d;border-top:1px solid var(--rule2);
  background-image:repeating-linear-gradient(90deg,transparent,transparent 76px,rgba(255,255,255,.03) 76px,rgba(255,255,255,.03) 78px)}
.wh{position:absolute;left:0;top:18px;bottom:0;width:44%;background:linear-gradient(180deg,#141d27,#0e151d);border-right:4px solid #080d12;z-index:1}
.wh-roof{position:absolute;top:0;left:0;right:0;height:15px;background:#080d12}
.wh-sign{position:absolute;top:22px;left:16px;font-size:10px;letter-spacing:.16em;color:var(--a-load);font-weight:800}
.wh-sub{position:absolute;top:38px;left:16px;font-size:8px;letter-spacing:.12em;color:var(--txt3)}
.bay-opening{position:absolute;right:-4px;bottom:40%;width:118px;height:128px;background:#04070b;border:3px solid #080d12;border-right:none;border-radius:5px 0 0 5px}
.bay-opening .roll{position:absolute;top:0;left:0;right:0;height:32px;background:repeating-linear-gradient(180deg,#1b2734,#1b2734 4px,#141d27 4px,#141d27 8px);border-bottom:2px solid #080d12}
.bay-opening .lbl{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:8px;color:var(--txt3);letter-spacing:.12em}
.leveler{position:absolute;left:calc(44% - 4px);bottom:calc(40% + 4px);width:30px;height:7px;background:#34485a;transform:skewX(-22deg);z-index:4}
.staging{position:absolute;left:14px;bottom:calc(40% + 3px);display:flex;gap:5px;align-items:flex-end;z-index:2}
.staging .ttl{position:absolute;top:-15px;left:0;font-size:8px;color:var(--txt3);letter-spacing:.1em;white-space:nowrap}
.pallet{width:21px;border-radius:2px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:2px;border:1px solid rgba(0,0,0,.25)}
.pallet .pi{width:15px;height:3px;background:rgba(255,255,255,.5);border-radius:1px;margin:1px 0}
.dock-truck{position:absolute;right:14px;bottom:40%;display:flex;align-items:flex-end;z-index:3;
  transform:translateX(140%);transition:transform 1.25s cubic-bezier(.2,.8,.25,1)}
.dock-truck.in{transform:translateX(0)}
.dt-box{position:relative;display:flex;align-items:flex-end;gap:0;height:120px;padding:14px 5px 6px;background:#0c141d;border:2px solid #243341;border-radius:3px}
.dt-box::before{content:"REEFER 26' · #104";position:absolute;top:3px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:.12em;color:var(--txt3)}
.dt-cab{width:36px;height:78px;margin-left:3px;background:linear-gradient(180deg,#26333f,#141d27);border:2px solid #243341;border-radius:5px 9px 3px 3px;position:relative}
.dt-cab::after{content:"";position:absolute;top:9px;left:6px;right:6px;height:17px;background:#0a3850;border-radius:3px;opacity:.8}
.dt-wheel{position:absolute;bottom:-11px;width:17px;height:17px;border-radius:50%;background:#05080c;border:3px solid #243341}
.dbay{position:relative;width:26px;height:100%;border-radius:3px 3px 0 0;border:1px dashed var(--rule2);overflow:hidden;background:rgba(255,255,255,.015);margin:0 1px}
.dbay .bn{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:7px;color:var(--txt3);z-index:2}
.dbay .fill{position:absolute;left:1px;right:1px;bottom:1px;border-radius:2px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;color:var(--ink);font-size:7.5px;font-weight:800;padding-bottom:1px}
.dbay .fill .pi{width:15px;height:3px;background:rgba(255,255,255,.55);border-radius:1px;margin:1px 0}
.dbay.full{border-style:solid;border-color:rgba(0,0,0,.3)}
@keyframes dropIn{from{transform:translateY(-150%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(-220%);opacity:0}}
.dbay.anim-load .fill{animation:dropIn .5s ease}
.dbay.anim-unload .fill{animation:slideOut .55s ease forwards}
.forklift{position:absolute;bottom:calc(40% - 3px);left:38%;font-size:19px;z-index:5;opacity:0;transition:left .5s ease,opacity .25s}
.forklift.show{opacity:1}

/* command palette */
#cmdk{position:fixed;inset:0;z-index:980;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;
  background:rgba(2,5,9,.62);backdrop-filter:blur(3px)}
#cmdk.on{display:flex}
.cmdbox{width:560px;max-width:92vw;background:var(--pane);border:1px solid var(--rule2);border-radius:10px;
  box-shadow:0 30px 80px -20px #000;overflow:hidden;animation:cin .16s ease}
@keyframes cin{from{opacity:0;transform:translateY(-8px) scale(.99)}}
.cmdbox input{width:100%;border:none;background:transparent;color:var(--txt);font:14px 'JetBrains Mono',monospace;
  padding:15px 16px;outline:none;border-bottom:1px solid var(--rule)}
.cmdbox input::placeholder{color:var(--txt3)}
.cmdlist{max-height:46vh;overflow:auto}
.cmdrow{display:flex;align-items:center;gap:11px;padding:9px 16px;font-size:12px;cursor:pointer;border-left:2px solid transparent}
.cmdrow .ci{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink);flex:none}
.cmdrow .cg{margin-left:auto;font-size:9.5px;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase}
.cmdrow.sel{background:var(--hover);border-left-color:var(--a-map)}
.cmdrow .ck{font-size:9px;border:1px solid var(--rule2);border-radius:3px;padding:0 5px;color:var(--txt2)}
.cmdhint{padding:7px 16px;border-top:1px solid var(--rule);font-size:9.5px;color:var(--txt3);display:flex;gap:14px}

/* boot */
#boot{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .5s}
#boot.hide{opacity:0;pointer-events:none}
.bmk{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--ink);background:var(--a-map);box-shadow:0 0 30px -4px var(--a-map)}
.bt{font-size:15px;font-weight:700;letter-spacing:.1em}.bs{font-size:10px;color:var(--txt3);letter-spacing:.2em;text-transform:uppercase}
.bootlog{font-size:10px;color:var(--txt3);height:14px}

/* ===================== RADAR / BOARD mode + Geoman + Areas editor ===================== */
.modeswitch{display:flex;gap:0;border:1px solid var(--rule2);border-radius:6px;overflow:hidden}
.modeswitch .mbtn{padding:5px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;background:var(--pane);border:none;color:var(--txt2);border-right:1px solid var(--rule2)}
.modeswitch .mbtn:last-child{border-right:none}
.modeswitch .mbtn:hover{background:var(--hover);color:var(--txt)}

/* mode badge shown in topbar brand when window is locked to a role */
.modebadge{margin-left:10px;font-size:9.5px;font-weight:800;letter-spacing:.18em;padding:2px 9px;border-radius:5px;color:var(--ink)}
.modebadge.radar{background:var(--a-map)}.modebadge.board{background:var(--a-blot)}

/* locked full-screen role windows hide the tab bar + mode switch */
body.mode-radar .tabs,body.mode-board .tabs,body.mode-radar .modeswitch,body.mode-board .modeswitch{display:none}
body.mode-radar #mod-map,body.mode-board #mod-dispatch{padding:0}

/* cross-window linked selection highlight */
.rcard.linksel,.lane.linksel,.rrow.linksel,.grow.linksel{outline:2px solid var(--rc);outline-offset:-2px}
.rcard.sel,.rcard.linksel{box-shadow:inset 3px 0 0 var(--rc)}

/* Geoman toolbar — match the terminal theme */
.leaflet-pm-toolbar .leaflet-pm-actions-container,.leaflet-pm-toolbar .button-container a{background:var(--pane2);color:var(--txt)}
.leaflet-pm-toolbar .button-container a.leaflet-pm-actions-container{border-color:var(--rule2)}

/* Areas editor (admin) */
.areawrap{display:grid;grid-template-columns:1fr 320px;gap:10px;height:100%}
.arow{padding:9px 10px;border-bottom:1px solid var(--rule);cursor:pointer;position:relative;display:flex;align-items:center;gap:9px}
.arow:hover{background:var(--hover)}.arow.sel{background:var(--sel)}
.arow .sw{width:13px;height:13px;border-radius:3px;flex:none}
.afield{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.afield label{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3)}
.afield input,.afield select{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:6px 8px;font:inherit;font-size:11px}

/* ===================== ATC DISPATCH BOARD (flight strips + inspector) ===================== */
.dsplit{display:flex;gap:10px;flex:1;min-height:0}
.dmap-pane{flex:0 0 36%;min-width:300px}
.board-col{flex:1;min-width:0;display:flex;min-height:0;overflow:hidden}
.board-col .dboard{flex:1}
.inspector{flex:0 0 286px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden}
.insp-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;background:var(--head);border-bottom:1px solid var(--rule);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);font-weight:700}
.insp-x{background:none;border:none;color:var(--txt3);font-size:13px}.insp-x:hover{color:var(--neg)}
.insp-body{padding:11px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:0}
.insp-empty{align-items:flex-start}
.insp-title{font-size:14px;font-weight:800;margin-bottom:5px}
.insp-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--rule);font-size:10.5px}
.kv span{color:var(--txt3)}.kv b{color:var(--txt);text-align:right}
.insp-sec{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin:12px 0 6px;font-weight:700}
.insp-stops,.insp-load{display:flex;flex-direction:column;gap:3px}
.loadrow{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--rule);border-radius:5px;background:var(--pane2);font-size:10px}
.insp-acts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.insp-acts .irow{display:flex;gap:6px}
.ibtn{flex:1;padding:8px 10px;border-radius:6px;border:1px solid var(--rule2);background:var(--pane2);color:var(--txt);font-size:10.5px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.ibtn:hover{border-color:var(--rc,var(--a-blot))}
.ibtn.primary{background:var(--rc,var(--a-blot));color:var(--ink);border-color:transparent}.ibtn.primary:hover{filter:brightness(1.08)}
.ipick{display:flex;flex-direction:column;gap:5px;border:1px solid var(--rule);border-radius:6px;padding:8px}
.ipick select{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:6px;font:inherit;font-size:10px}

/* flight strips */
.strips{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:7px}
.strip{display:flex;align-items:stretch;gap:0;border:1px solid var(--rule2);border-radius:6px;background:var(--pane2);cursor:grab;overflow:hidden;transition:border-color .12s,transform .06s}
.strip:hover{border-color:var(--a-blot)}
.strip.sel{outline:1.5px solid var(--a-blot);outline-offset:0}
.strip.dragging{opacity:.4;cursor:grabbing}
.strip-flash{width:4px;flex:none;background:var(--rule2)}
.strip.urg .strip-flash{background:var(--neg);animation:bl 1s infinite}
.strip-main{flex:1;min-width:0;padding:7px 8px}
.strip-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.strip-top b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip.urg .strip-top b{color:var(--neg)}
.strip-sub{font-size:9px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip-go{align-self:stretch;border:none;border-left:1px solid var(--rule);background:var(--pane);color:var(--rc,var(--a-blot));font-size:9.5px;font-weight:800;letter-spacing:.03em;padding:0 10px;white-space:nowrap;flex:none}
.strip-go:hover{background:var(--rc,var(--a-blot));color:var(--ink)}

/* drop targets */
.droptarget.dragover{outline:2px dashed var(--rc,var(--a-blot));outline-offset:-3px;background:var(--hover)}
.lane-drop{display:none;text-align:center;font-size:9px;color:var(--rc);padding:7px;border-top:1px dashed var(--rule2);letter-spacing:.05em;font-weight:700}
.lane.dragover .lane-drop{display:block}
.bucket.dragover{background:var(--hover)}
.urgcard{border-left:3px solid var(--neg)}

/* ===================== pin states · urgent flash · slower ticker ===================== */
/* Stop pins: done = route-color tick, next = yellow, pending = route-color number */
.stopmk.done{background:#06121e;border-color:var(--rc);color:var(--rc);font-size:11px}
.stopmk.next{background:#06121e;border-color:#ffc24d;color:#ffc24d;animation:np 1.3s infinite}
.stopmk.todo{background:#06121e;border-color:var(--rc);color:var(--rc)}
.stopchip.done .sn{background:transparent;border-color:var(--rc);color:var(--rc)}
.stopchip.next .sn{border-color:#ffc24d;color:#ffc24d}

/* Urgent unscheduled — make the flash unmissable */
.strip.urg{border-color:var(--neg);box-shadow:0 0 0 1px color-mix(in srgb,var(--neg) 40%,transparent) inset}
.strip.urg .strip-flash{width:5px;background:var(--neg);animation:bl .85s infinite;box-shadow:0 0 9px var(--neg)}
.strip.urg .strip-top b{animation:bl 1.6s infinite}
.qcard.urgcard{animation:bl 2s infinite}
.qcard.urgcard{border-left:3px solid var(--neg)}

/* Slow the live-tape marquee right down */
.tape .marq{animation-duration:220s}

/* ===================== Live-Map right rail: tabs · copilot · detail window ===================== */
.opsTabs{display:flex;gap:1px;background:var(--head);border-bottom:1px solid var(--rule);flex:none;padding:5px 5px 0}
.opsTabs button{flex:1;padding:6px 3px;font-size:9px;font-weight:700;letter-spacing:.02em;background:none;border:none;color:var(--txt3);border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.opsTabs button.on{color:var(--a-map);border-bottom-color:var(--a-map)}
.opsTabs .otn{background:var(--neg);color:#fff;border-radius:7px;font-size:8px;padding:0 4px;font-weight:800}
#mapOps{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.opslist{overflow:auto;flex:1}
.opscard{padding:8px 10px;border-bottom:1px solid var(--rule);cursor:pointer}
.opscard:hover{background:var(--hover)}
.opscard .qt{display:flex;align-items:center;justify-content:space-between;gap:6px}
.opscard .qm{font-size:9.5px;color:var(--txt3);margin:3px 0 6px}

.copilot{display:flex;flex-direction:column;flex:1;min-height:0}
.cop-msgs{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.cmsg{display:flex}.cmsg.user{justify-content:flex-end}
.cbub{max-width:88%;padding:8px 10px;border-radius:9px;font-size:11px;line-height:1.45}
.cmsg.ai .cbub{background:var(--pane2);border:1px solid var(--rule);color:var(--txt)}
.cmsg.user .cbub{background:var(--a-map);color:var(--ink);font-weight:600}
.cref{margin-top:5px;padding:4px 7px;border:1px solid var(--rule2);border-radius:5px;cursor:pointer;font-size:10px}
.cref:hover{background:var(--hover);border-color:var(--a-map)}
.cacts{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.cact{font-size:9.5px;padding:4px 8px;border-radius:5px;border:1px solid var(--rule2);background:var(--pane2);color:var(--txt)}
.cact:hover{background:var(--a-map);color:var(--ink);border-color:transparent}
.cop-sugg{display:flex;gap:5px;flex-wrap:wrap;padding:7px 10px;border-top:1px solid var(--rule)}
.cop-sugg .sugg{font-size:9.5px;padding:4px 9px;border-radius:11px;border:1px solid var(--rule2);background:var(--pane2);color:var(--txt2)}
.cop-sugg .sugg:hover{color:var(--ink);background:var(--a-map);border-color:transparent}
.cop-in{display:flex;gap:6px;padding:9px 10px;border-top:1px solid var(--rule)}
.cop-in input{flex:1;background:var(--pane2);border:1px solid var(--rule2);border-radius:7px;padding:7px 10px;color:var(--txt);font:inherit;font-size:11px;outline:none}
.cop-in button{width:34px;border-radius:7px;background:var(--a-map);color:var(--ink);border:none;font-weight:800}

.detailwin{position:fixed;top:46px;right:0;bottom:48px;width:344px;max-width:92vw;background:var(--pane);border-left:1px solid var(--rule2);
  box-shadow:-18px 0 50px -20px #000;transform:translateX(103%);transition:transform .22s cubic-bezier(.2,.8,.25,1);z-index:600;display:flex;flex-direction:column;overflow:hidden}
.detailwin.on{transform:translateX(0)}
.dw-hd{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:var(--head);border-bottom:1px solid var(--rule);flex:none}
.dw-kind{font-size:9.5px;letter-spacing:.16em;font-weight:800}
.dw-x{background:none;border:none;color:var(--txt3);font-size:15px;cursor:pointer}.dw-x:hover{color:var(--neg)}
.dw-body{padding:13px;overflow:auto;flex:1}
.dw-title{font-size:16px;font-weight:800;margin-bottom:11px;line-height:1.2}

/* ===================== Settings (themes) · Users (perms) ===================== */
.themegrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.themecard{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--rule2);border-radius:8px;background:var(--pane2);color:var(--txt);font-size:11px;font-weight:700;letter-spacing:.06em}
.themecard:hover{border-color:var(--a-map)}
.themecard.on{border-color:var(--a-map);box-shadow:0 0 0 1px var(--a-map) inset}
.swatches{display:flex;gap:2px}.swatches i{width:11px;height:18px;border-radius:2px;display:block}
.prefrow{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--rule);font-size:11px}
.prefrow input{width:16px;height:16px;accent-color:var(--a-map)}
.permdot{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;border:1px solid var(--rule2);color:var(--txt3);cursor:pointer;font-weight:800}
.permdot.on{background:var(--pos);border-color:transparent;color:var(--ink)}

/* ===================== Route Lists 3-col · Inventory breakdown ===================== */
.rl3{display:grid;grid-template-columns:288px 1fr 1fr;gap:10px;height:100%}
.rl3 .pbody{overflow:auto}
tr.rl-in td{background:color-mix(in srgb,var(--a-route) 10%,transparent)}
.invsplit{display:flex;height:16px;border-radius:5px;overflow:hidden;gap:1px;background:var(--rule)}
.invseg{min-width:2px}

/* ===================== Dispatch GRID (grouped) + grid mode layout ===================== */
.dsplit.gridmode .dmap-pane{order:2;flex:0 0 42%}
.dsplit.gridmode .board-col{order:1;overflow:auto}
.gridgroup{margin-bottom:12px;border:1px solid var(--rule);border-radius:7px;overflow:hidden}
.gridgrouphd{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--head)}
.gridgroup table.blot th{background:var(--pane2)}

/* ===================== Loading — clear horizontal truck bay map ===================== */
.truckdiag{display:flex;align-items:stretch;gap:0;height:150px;border:1px solid var(--rule2);border-radius:8px;background:var(--bg2);overflow:hidden}
.td-end{width:80px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--txt2);background:var(--head)}
.td-end small{font-size:8px;font-weight:600;color:var(--txt3);letter-spacing:.04em}
.td-cab{background:linear-gradient(180deg,var(--rule2),var(--head));border-left:2px solid var(--rule2)}
.td-door{border-right:2px solid var(--rule2)}
.td-end .arrowdn{font-size:9px;color:var(--a-load);font-weight:700;margin-top:3px}
.td-bays{flex:1;display:flex;align-items:flex-end;gap:3px;padding:8px}
.tbay2{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;border:1px dashed var(--rule2);border-radius:4px 4px 0 0;overflow:hidden}
.tbay2.full{border-style:solid;border-color:var(--bc)}
.tbay2.now{outline:2px solid #fff;outline-offset:1px}
.tb-fill{width:100%;transition:height .45s cubic-bezier(.2,.8,.25,1);border-radius:3px 3px 0 0}
.tb-lab{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:8.5px;color:var(--txt2);line-height:1.3}
.tb-lab b{display:block;font-size:10px;color:var(--txt)}
.diaglegend{font-size:11px;color:var(--txt2);padding:9px 11px;border:1px solid var(--rule);border-radius:7px;background:var(--pane2)}

/* ===================== autoIQ theme pack (generated, mapped to tower vars) ===================== */
html[data-theme="amber"]{--bg:#05080a;--bg2:#080c10;--pane:#0a0f13;--pane2:#0c1217;--rule:#16202a;--rule2:#1d2a36;--txt:#c7d4cf;--txt2:#94a89f;--txt3:#6c7d75;--ink:#000;--hover:#0d161c;--sel:#13202a;--amber:#ffb000;--green:#21d07a;--red:#ff4d4d;--cyan:#34c7d4;--pos:#21d07a;--neg:#ff4d4d;--warn:#ffb000;--gold:#ffb000;--shadow:rgba(0,0,0,.8);--head:#0a1014;--thumb:#1b2730;--thumb2:#27353f;--a-over:#7da6ff;--a-map:#34c7d4;--a-blot:#21d07a;--a-route:#ffb000;--a-fleet:#9aa7ff;--a-driv:#e0a64b;--a-assign:#b78bff;--a-load:#ff7a59;--a-cover:#8aa0ad;--a-feed:#ffb000}
html[data-theme="phosphor"]{--bg:#020503;--bg2:#040906;--pane:#061009;--pane2:#08150d;--rule:#103a22;--rule2:#1a5436;--txt:#9ff7b8;--txt2:#6cc890;--txt3:#479866;--ink:#021006;--hover:#0c2316;--sel:#103420;--amber:#7dff9e;--green:#39ff88;--red:#ff6a5a;--cyan:#6affc8;--pos:#39ff88;--neg:#ff6a5a;--warn:#c8ff7d;--gold:#aaff7d;--shadow:rgba(0,0,0,.85);--head:#08150d;--thumb:#16573a;--thumb2:#1f7a52;--a-over:#6affc8;--a-map:#6affc8;--a-blot:#39ff88;--a-route:#aaff7d;--a-fleet:#8effd0;--a-driv:#d8ff7d;--a-assign:#9affb0;--a-load:#ffb86a;--a-cover:#7ec79a;--a-feed:#aaff7d}
html[data-theme="ice"]{--bg:#03070c;--bg2:#050b12;--pane:#071019;--pane2:#0a1622;--rule:#16313f;--rule2:#1f4356;--txt:#cfe6f5;--txt2:#97b8cd;--txt3:#6a8898;--ink:#021018;--hover:#0d1f2c;--sel:#123043;--amber:#62d0ff;--green:#3be0c4;--red:#ff6b8a;--cyan:#5ad1ff;--pos:#3be0c4;--neg:#ff6b8a;--warn:#62d0ff;--gold:#7fd8ff;--shadow:rgba(0,0,0,.82);--head:#0a1622;--thumb:#1c3a4a;--thumb2:#27506a;--a-over:#62a6ff;--a-map:#5ad1ff;--a-blot:#3be0c4;--a-route:#62d0ff;--a-fleet:#9ad0ff;--a-driv:#7fd0d8;--a-assign:#9aa6ff;--a-load:#ff9a6a;--a-cover:#9fb8c8;--a-feed:#62d0ff}
html[data-theme="bloomberg"]{--bg:#070503;--bg2:#0c0906;--pane:#120d08;--pane2:#18110a;--rule:#2a1c0c;--rule2:#3a2810;--txt:#f0d9b8;--txt2:#c8a370;--txt3:#8e7048;--ink:#000;--hover:#1c1206;--sel:#2a1c0a;--amber:#ff9b1e;--green:#46d07a;--red:#ff5340;--cyan:#f0a83c;--pos:#46d07a;--neg:#ff5340;--warn:#ffb01e;--gold:#ff9b1e;--shadow:rgba(0,0,0,.9);--head:#18110a;--thumb:#2a1c0c;--thumb2:#4a3216;--a-over:#f0a83c;--a-map:#ffcf7d;--a-blot:#46d07a;--a-route:#ff9b1e;--a-fleet:#e0b85a;--a-driv:#ffb01e;--a-assign:#ff8c5a;--a-load:#ff5340;--a-cover:#c8a878;--a-feed:#ff9b1e}
html[data-theme="matrix"]{--bg:#040804;--bg2:#071107;--pane:#0a160a;--pane2:#0d1c0d;--rule:#0d3a0d;--rule2:#155415;--txt:#b8ffb8;--txt2:#76d876;--txt3:#48a648;--ink:#001000;--hover:#0a230a;--sel:#0f340f;--amber:#9dff5a;--green:#33ff66;--red:#ff5a5a;--cyan:#5affa0;--pos:#33ff66;--neg:#ff5a5a;--warn:#c8ff33;--gold:#9dff5a;--shadow:rgba(0,0,0,.88);--head:#0d1c0d;--thumb:#155415;--thumb2:#1f7a1f;--a-over:#5affa0;--a-map:#5affa0;--a-blot:#33ff66;--a-route:#9dff5a;--a-fleet:#7dffb0;--a-driv:#d8ff33;--a-assign:#aaff7d;--a-load:#ffb05a;--a-cover:#8ac88a;--a-feed:#9dff5a}
html[data-theme="midnight"]{--bg:#070912;--bg2:#0a0d1a;--pane:#0e1224;--pane2:#12172e;--rule:#222a4a;--rule2:#2f3a60;--txt:#d2d8f5;--txt2:#a2abda;--txt3:#717bac;--ink:#05071a;--hover:#171d38;--sel:#1e2748;--amber:#9aa6ff;--green:#5ae0a8;--red:#ff6b8a;--cyan:#6ad0ff;--pos:#5ae0a8;--neg:#ff6b8a;--warn:#ffd06a;--gold:#ffd06a;--shadow:rgba(0,0,0,.82);--head:#12172e;--thumb:#2a3258;--thumb2:#3a4578;--a-over:#7da6ff;--a-map:#6ad0ff;--a-blot:#5ae0a8;--a-route:#ffd06a;--a-fleet:#b0b8ff;--a-driv:#e0a6ff;--a-assign:#c08bff;--a-load:#ff8c9a;--a-cover:#a8b0d8;--a-feed:#ffd06a}
html[data-theme="crimson"]{--bg:#0a0304;--bg2:#100508;--pane:#16080c;--pane2:#1c0a10;--rule:#3a1620;--rule2:#54202e;--txt:#f5d2d8;--txt2:#d2a2ac;--txt3:#a06872;--ink:#100204;--hover:#230c12;--sel:#34101a;--amber:#ff8c6a;--green:#5ad08a;--red:#ff4060;--cyan:#ff9aae;--pos:#5ad08a;--neg:#ff4060;--warn:#ffb05a;--gold:#ffb05a;--shadow:rgba(0,0,0,.85);--head:#1c0a10;--thumb:#54202e;--thumb2:#7a2f42;--a-over:#ff8ca0;--a-map:#ff9aae;--a-blot:#5ad08a;--a-route:#ff8c6a;--a-fleet:#ffb0c0;--a-driv:#ffb05a;--a-assign:#e08bff;--a-load:#ff4060;--a-cover:#d8a0a8;--a-feed:#ff8c6a}
html[data-theme="solarized"]{--bg:#002b36;--bg2:#02303b;--pane:#073642;--pane2:#083e4b;--rule:#0d4f5e;--rule2:#1a6577;--txt:#a7b3b3;--txt2:#7e9298;--txt3:#647c82;--ink:#002b36;--hover:#0a4250;--sel:#0e4e5e;--amber:#b58900;--green:#859900;--red:#dc322f;--cyan:#2aa198;--pos:#859900;--neg:#dc322f;--warn:#cb4b16;--gold:#b58900;--shadow:rgba(0,0,0,.6);--head:#073642;--thumb:#0d4f5e;--thumb2:#1a6577;--a-over:#268bd2;--a-map:#2aa198;--a-blot:#859900;--a-route:#b58900;--a-fleet:#6c71c4;--a-driv:#b58900;--a-assign:#d33682;--a-load:#cb4b16;--a-cover:#93a1a1;--a-feed:#b58900}
html[data-theme="nord"]{--bg:#242933;--bg2:#2e3440;--pane:#323a48;--pane2:#3b4252;--rule:#434c5e;--rule2:#4c566a;--txt:#eceff4;--txt2:#bcc4d2;--txt3:#8590a2;--ink:#2e3440;--hover:#3b4252;--sel:#434c5e;--amber:#ebcb8b;--green:#a3be8c;--red:#bf616a;--cyan:#88c0d0;--pos:#a3be8c;--neg:#bf616a;--warn:#d08770;--gold:#ebcb8b;--shadow:rgba(0,0,0,.55);--head:#3b4252;--thumb:#434c5e;--thumb2:#4c566a;--a-over:#81a1c1;--a-map:#88c0d0;--a-blot:#a3be8c;--a-route:#ebcb8b;--a-fleet:#b48ead;--a-driv:#ebcb8b;--a-assign:#b48ead;--a-load:#d08770;--a-cover:#d8dee9;--a-feed:#ebcb8b}
html[data-theme="paper"]{--bg:#e7e2d6;--bg2:#efe9dc;--pane:#f4efe4;--pane2:#fbf7ee;--rule:#cfc7b4;--rule2:#b8ae97;--txt:#2b2a26;--txt2:#545044;--txt3:#736d5d;--ink:#fbf7ee;--hover:#e0dac9;--sel:#d8e0d0;--amber:#a8690a;--green:#2e7d4f;--red:#c0392b;--cyan:#1f7a8c;--pos:#2e7d4f;--neg:#c0392b;--warn:#b5760a;--gold:#a8690a;--shadow:rgba(60,52,36,.28);--head:#e3ddcd;--thumb:#c2b9a4;--thumb2:#a89e86;--a-over:#2f5fb0;--a-map:#1f7a8c;--a-blot:#2e7d4f;--a-route:#a8690a;--a-fleet:#5a5fb0;--a-driv:#9a6a14;--a-assign:#8a4fb0;--a-load:#c0563b;--a-cover:#5a6068;--a-feed:#a8690a}
html[data-theme="cream"]{--bg:#efe7d6;--bg2:#f4ede0;--pane:#f9f3e9;--pane2:#fdf9f1;--rule:#d8ccb4;--rule2:#c2b496;--txt:#3a3328;--txt2:#605646;--txt3:#7d725d;--ink:#fdf9f1;--hover:#e8dfcb;--sel:#e0e3cf;--amber:#a06a14;--green:#3a7d52;--red:#bc4032;--cyan:#1f7a86;--pos:#3a7d52;--neg:#bc4032;--warn:#aa7314;--gold:#a87f1a;--shadow:rgba(70,58,36,.26);--head:#ece3d0;--thumb:#cabda4;--thumb2:#b0a286;--a-over:#33619e;--a-map:#1f7a86;--a-blot:#3a7d52;--a-route:#a06a14;--a-fleet:#5f63ad;--a-driv:#996814;--a-assign:#8a52a8;--a-load:#bc5a3b;--a-cover:#5e6068;--a-feed:#a06a14}
html[data-theme="coolgray"]{--bg:#e4e7ea;--bg2:#eaedf0;--pane:#f0f2f5;--pane2:#f7f8fa;--rule:#cbd1d8;--rule2:#aeb6c0;--txt:#28303a;--txt2:#4c5764;--txt3:#6f7a8a;--ink:#f7f8fa;--hover:#dde2e8;--sel:#d6e0ea;--amber:#9a6a1a;--green:#2f7d54;--red:#bc3b3b;--cyan:#1f7689;--pos:#2f7d54;--neg:#bc3b3b;--warn:#a07418;--gold:#9a7320;--shadow:rgba(40,48,58,.22);--head:#dde1e6;--thumb:#c0c8d0;--thumb2:#a4adb8;--a-over:#2f5fb0;--a-map:#1f7689;--a-blot:#2f7d54;--a-route:#9a6a1a;--a-fleet:#5860ad;--a-driv:#946618;--a-assign:#8550a8;--a-load:#bc553b;--a-cover:#5a6068;--a-feed:#9a6a1a}
html[data-theme="solight"]{--bg:#eee8d5;--bg2:#f2ecda;--pane:#f7f1e0;--pane2:#fdf6e3;--rule:#d8d0b4;--rule2:#bfb898;--txt:#3a4b50;--txt2:#5a7077;--txt3:#7a8888;--ink:#fdf6e3;--hover:#e6dfc6;--sel:#dfe2cb;--amber:#b58900;--green:#6f8400;--red:#dc322f;--cyan:#2aa198;--pos:#6f8400;--neg:#dc322f;--warn:#cb4b16;--gold:#b58900;--shadow:rgba(60,60,40,.2);--head:#e8e1cb;--thumb:#cfc8ac;--thumb2:#b6ae90;--a-over:#268bd2;--a-map:#2aa198;--a-blot:#6f8400;--a-route:#b58900;--a-fleet:#6c71c4;--a-driv:#b58900;--a-assign:#d33682;--a-load:#cb4b16;--a-cover:#5e6c6c;--a-feed:#b58900}
html[data-theme="sage"]{--bg:#dfe5dc;--bg2:#e6ebe2;--pane:#edf1e9;--pane2:#f4f7f1;--rule:#c6d0c0;--rule2:#a9b6a2;--txt:#2b332a;--txt2:#4c564a;--txt3:#6f7a6b;--ink:#f4f7f1;--hover:#d8e0d2;--sel:#d2e0d0;--amber:#977218;--green:#3a7d4f;--red:#bc4338;--cyan:#1f7a7e;--pos:#3a7d4f;--neg:#bc4338;--warn:#9c7618;--gold:#9a7720;--shadow:rgba(40,52,40,.22);--head:#d8e0d4;--thumb:#bcc8b6;--thumb2:#a2ae9a;--a-over:#2f64a8;--a-map:#1f7a7e;--a-blot:#3a7d4f;--a-route:#977218;--a-fleet:#5a64a8;--a-driv:#92681a;--a-assign:#8252a4;--a-load:#bc553b;--a-cover:#5a6460;--a-feed:#977218}
html[data-theme="graphite"]{--bg:#1a1c1f;--bg2:#1f2226;--pane:#24282d;--pane2:#2a2f35;--rule:#34393f;--rule2:#434a52;--txt:#d2d6db;--txt2:#a8aeb6;--txt3:#838a93;--ink:#16181b;--hover:#2c3036;--sel:#323841;--amber:#e0b15c;--green:#6cc28e;--red:#e0726a;--cyan:#67b8c8;--pos:#6cc28e;--neg:#e0726a;--warn:#e0b15c;--gold:#e0b15c;--shadow:rgba(0,0,0,.6);--head:#23272c;--thumb:#3a4047;--thumb2:#4a525b;--a-over:#7fa6e0;--a-map:#67b8c8;--a-blot:#6cc28e;--a-route:#e0b15c;--a-fleet:#9aa6e0;--a-driv:#d8b06a;--a-assign:#b48edd;--a-load:#e0876a;--a-cover:#aab2bc;--a-feed:#e0b15c}
html[data-theme="charcoal"]{--bg:#121417;--bg2:#16191d;--pane:#1b1f24;--pane2:#21262c;--rule:#2b3036;--rule2:#3a414a;--txt:#c8cdd4;--txt2:#a0a8b2;--txt3:#7a828d;--ink:#101216;--hover:#22272e;--sel:#28303a;--amber:#d8a850;--green:#5ebd86;--red:#dd6b64;--cyan:#5cb2c4;--pos:#5ebd86;--neg:#dd6b64;--warn:#d8a850;--gold:#d8a850;--shadow:rgba(0,0,0,.7);--head:#1a1e23;--thumb:#30373f;--thumb2:#414a54;--a-over:#76a0e0;--a-map:#5cb2c4;--a-blot:#5ebd86;--a-route:#d8a850;--a-fleet:#92a0e0;--a-driv:#d0a860;--a-assign:#ae88da;--a-load:#dd826a;--a-cover:#a2acb8;--a-feed:#d8a850}
html[data-theme="navy"]{--bg:#0e1622;--bg2:#121b2a;--pane:#172132;--pane2:#1c283c;--rule:#283750;--rule2:#374a68;--txt:#cdd6e4;--txt2:#a4b2c8;--txt3:#7c8aa4;--ink:#0c121c;--hover:#1e2a3e;--sel:#243450;--amber:#e0b96a;--green:#5ec795;--red:#e0707e;--cyan:#5fb6d0;--pos:#5ec795;--neg:#e0707e;--warn:#e0b96a;--gold:#e0b96a;--shadow:rgba(0,0,0,.66);--head:#172132;--thumb:#2c3c58;--thumb2:#3c4f70;--a-over:#74a4e8;--a-map:#5fb6d0;--a-blot:#5ec795;--a-route:#e0b96a;--a-fleet:#94a4e8;--a-driv:#d8b066;--a-assign:#b28ee0;--a-load:#e0876e;--a-cover:#a4b2c4;--a-feed:#e0b96a}
html[data-theme="dim"]{--bg:#1c1a18;--bg2:#211f1c;--pane:#272421;--pane2:#2d2a26;--rule:#383430;--rule2:#48433d;--txt:#d6d0c8;--txt2:#aea89e;--txt3:#8a847a;--ink:#181614;--hover:#2e2b27;--sel:#363229;--amber:#dcae5e;--green:#74bc8c;--red:#dd7a6e;--cyan:#6cb6b0;--pos:#74bc8c;--neg:#dd7a6e;--warn:#dcae5e;--gold:#dcae5e;--shadow:rgba(0,0,0,.62);--head:#262320;--thumb:#3c382f;--thumb2:#4d473c;--a-over:#86a4d8;--a-map:#6cb6b0;--a-blot:#74bc8c;--a-route:#dcae5e;--a-fleet:#a0a4d8;--a-driv:#d4a85e;--a-assign:#b48ed4;--a-load:#dd886e;--a-cover:#aaa89e;--a-feed:#dcae5e}
html[data-theme="slate"]{--bg:#15191e;--bg2:#191e24;--pane:#1e242b;--pane2:#242b33;--rule:#2c333c;--rule2:#3a434e;--txt:#cdd4dd;--txt2:#a6b2bf;--txt3:#828d9a;--ink:#131217;--hover:#262e37;--sel:#2c3742;--amber:#d6b277;--green:#7cc09a;--red:#d67e7e;--cyan:#7bb6c4;--pos:#7cc09a;--neg:#d67e7e;--warn:#d6b277;--gold:#d6b277;--shadow:rgba(0,0,0,.6);--head:#1d2229;--thumb:#323a44;--thumb2:#414b57;--a-over:#82a4cf;--a-map:#7bb6c4;--a-blot:#7cc09a;--a-route:#d6b277;--a-fleet:#9aa6cf;--a-driv:#cda968;--a-assign:#a994ce;--a-load:#d6957c;--a-cover:#a6b0bc;--a-feed:#d6b277}
html[data-theme="nordic"]{--bg:#222730;--bg2:#272d38;--pane:#2c333f;--pane2:#333b48;--rule:#3b4452;--rule2:#49546a;--txt:#dde3ee;--txt2:#b6bfd0;--txt3:#8893a4;--ink:#222730;--hover:#333b48;--sel:#3b4555;--amber:#ead2a0;--green:#a3be8c;--red:#cf7f87;--cyan:#88c0d0;--pos:#a3be8c;--neg:#cf7f87;--warn:#d8a07a;--gold:#ead2a0;--shadow:rgba(0,0,0,.5);--head:#2e3542;--thumb:#414b5a;--thumb2:#4f5a6c;--a-over:#8aa6cc;--a-map:#88c0d0;--a-blot:#a3be8c;--a-route:#ead2a0;--a-fleet:#b099c4;--a-driv:#e0c088;--a-assign:#b48ead;--a-load:#d49078;--a-cover:#d2dae6;--a-feed:#ead2a0}
html[data-theme="tokyonight"]{--bg:#1a1b26;--bg2:#1e2030;--pane:#232539;--pane2:#292b42;--rule:#2f334d;--rule2:#3b3f5c;--txt:#c0caf5;--txt2:#a2abd4;--txt3:#787ea0;--ink:#16161e;--hover:#2a2e45;--sel:#323852;--amber:#e0af68;--green:#9ece6a;--red:#e07a8a;--cyan:#7dcfff;--pos:#9ece6a;--neg:#e07a8a;--warn:#e0af68;--gold:#e0af68;--shadow:rgba(0,0,0,.65);--head:#24283b;--thumb:#363b56;--thumb2:#444a6a;--a-over:#7aa2f7;--a-map:#7dcfff;--a-blot:#9ece6a;--a-route:#e0af68;--a-fleet:#9aa5e6;--a-driv:#e0c07a;--a-assign:#bb9af7;--a-load:#e09a78;--a-cover:#a9b1d6;--a-feed:#e0af68}
html[data-theme="catppuccin"]{--bg:#1e2030;--bg2:#24273a;--pane:#2a2d44;--pane2:#303446;--rule:#363a54;--rule2:#444963;--txt:#cad3f5;--txt2:#b0b8da;--txt3:#868cae;--ink:#1a1b26;--hover:#2f3349;--sel:#383d57;--amber:#eed49f;--green:#a6da95;--red:#ed8796;--cyan:#8bd5ca;--pos:#a6da95;--neg:#ed8796;--warn:#f5a97f;--gold:#eed49f;--shadow:rgba(0,0,0,.58);--head:#2b2e42;--thumb:#3c4160;--thumb2:#4b5172;--a-over:#8aadf4;--a-map:#8bd5ca;--a-blot:#a6da95;--a-route:#eed49f;--a-fleet:#b7bdf8;--a-driv:#eed49f;--a-assign:#c6a0f6;--a-load:#f0a080;--a-cover:#b8c0e0;--a-feed:#eed49f}
html[data-theme="rosepine"]{--bg:#1f1d2c;--bg2:#232136;--pane:#2a273f;--pane2:#302d4a;--rule:#393552;--rule2:#474364;--txt:#e0def4;--txt2:#b6b0d6;--txt3:#8a86a8;--ink:#191724;--hover:#2f2b47;--sel:#393552;--amber:#f6c177;--green:#9ccfd8;--red:#eb6f92;--cyan:#9ccfd8;--pos:#9ccfd8;--neg:#eb6f92;--warn:#f6c177;--gold:#f6c177;--shadow:rgba(0,0,0,.6);--head:#2b283e;--thumb:#3e3a5a;--thumb2:#4d4870;--a-over:#88a6d8;--a-map:#9ccfd8;--a-blot:#9ccfd8;--a-route:#f6c177;--a-fleet:#c4a7e7;--a-driv:#f0bd86;--a-assign:#c4a7e7;--a-load:#ea9a8f;--a-cover:#bcb6d6;--a-feed:#f6c177}
html[data-theme="pine"]{--bg:#10191a;--bg2:#141f20;--pane:#192728;--pane2:#1e2f30;--rule:#27393a;--rule2:#354c4e;--txt:#cbdbd8;--txt2:#a2b8b5;--txt3:#7c908e;--ink:#0e1717;--hover:#213334;--sel:#27403f;--amber:#d8b87a;--green:#73c39a;--red:#d97f82;--cyan:#6cbcc0;--pos:#73c39a;--neg:#d97f82;--warn:#d8b87a;--gold:#d8b87a;--shadow:rgba(0,0,0,.62);--head:#1a2929;--thumb:#2e4344;--thumb2:#3c5556;--a-over:#7fa6c8;--a-map:#6cbcc0;--a-blot:#73c39a;--a-route:#d8b87a;--a-fleet:#94aacb;--a-driv:#d0b070;--a-assign:#a695c8;--a-load:#d8957c;--a-cover:#9eb4b2;--a-feed:#d8b87a}
html[data-theme="gruvbox"]{--bg:#282420;--bg2:#2e2a24;--pane:#352f28;--pane2:#3c352c;--rule:#453d34;--rule2:#564c40;--txt:#e3d6bf;--txt2:#bfb49e;--txt3:#948975;--ink:#1d1a16;--hover:#3d362d;--sel:#473f34;--amber:#d8a657;--green:#a9b665;--red:#e08a82;--cyan:#89b8a0;--pos:#a9b665;--neg:#e08a82;--warn:#e0a063;--gold:#d8a657;--shadow:rgba(0,0,0,.58);--head:#36302a;--thumb:#473f34;--thumb2:#564c40;--a-over:#7daea0;--a-map:#89b8a0;--a-blot:#a9b665;--a-route:#d8a657;--a-fleet:#a0a6c4;--a-driv:#e0b878;--a-assign:#c19acc;--a-load:#e08763;--a-cover:#bcb0a0;--a-feed:#d8a657}
html[data-theme="seaglass"]{--bg:#dde7e6;--bg2:#e4edec;--pane:#ecf3f2;--pane2:#f4f9f8;--rule:#c2d2d0;--rule2:#a4b8b6;--txt:#26343a;--txt2:#46565e;--txt3:#6c7f83;--ink:#f4f9f8;--hover:#d6e3e1;--sel:#cfe1de;--amber:#977a18;--green:#2f7d62;--red:#bc4848;--cyan:#1f7a86;--pos:#2f7d62;--neg:#bc4848;--warn:#9c7418;--gold:#977720;--shadow:rgba(36,52,56,.2);--head:#d6e2e1;--thumb:#bccecb;--thumb2:#a0b4b1;--a-over:#2f63a4;--a-map:#1f7a86;--a-blot:#2f7d62;--a-route:#977a18;--a-fleet:#5560a4;--a-driv:#8e6a18;--a-assign:#7a52a0;--a-load:#bc593b;--a-cover:#566066;--a-feed:#977a18}
html[data-theme="mist"]{--bg:#e0e4ea;--bg2:#e7ebf0;--pane:#eef1f6;--pane2:#f6f8fb;--rule:#c6cdda;--rule2:#a8b2c2;--txt:#28303c;--txt2:#485364;--txt3:#6c788c;--ink:#f6f8fb;--hover:#d8dfe9;--sel:#d2dcee;--amber:#8e6e22;--green:#2f7556;--red:#bc4452;--cyan:#1f6e8c;--pos:#2f7556;--neg:#bc4452;--warn:#946c1c;--gold:#8e7022;--shadow:rgba(36,42,56,.2);--head:#d8dde6;--thumb:#bcc4d2;--thumb2:#a0aabc;--a-over:#2f5fae;--a-map:#1f6e8c;--a-blot:#2f7556;--a-route:#8e6e22;--a-fleet:#525ea8;--a-driv:#8a6620;--a-assign:#7850a4;--a-load:#bc553f;--a-cover:#545e6c;--a-feed:#8e6e22}
html[data-theme="fog"]{--bg:#e6e8ec;--bg2:#eceef1;--pane:#f2f4f7;--pane2:#f9fafc;--rule:#ccd1d9;--rule2:#aeb5c0;--txt:#2a313a;--txt2:#4a545d;--txt3:#6f7884;--ink:#f9fafc;--hover:#dde1e8;--sel:#d6dde8;--amber:#8e7028;--green:#347a5a;--red:#b94a4a;--cyan:#216f84;--pos:#347a5a;--neg:#b94a4a;--warn:#947024;--gold:#8e7228;--shadow:rgba(40,46,56,.18);--head:#dee1e6;--thumb:#c2c8d0;--thumb2:#a6aeba;--a-over:#34619e;--a-map:#216f84;--a-blot:#347a5a;--a-route:#8e7028;--a-fleet:#5560a0;--a-driv:#8a6824;--a-assign:#7a54a0;--a-load:#ba573f;--a-cover:#586068;--a-feed:#8e7028}

/* ---- variety fix: most themes mapped BOTH --a-route and --a-feed to the same gold accent, so Orders /
   Route Lists / Billing / Customers headers all read yellow. Re-alias them (per theme) to that theme's
   purple & blue so heading fills span cyan·blue·green·purple·orange. --a-driv stays gold for some yellow. ---- */
html[data-theme]{--a-route:var(--a-assign);--a-feed:var(--a-over)}

/* ===================== Dispatch GRID: routes | stops | map ===================== */
.gridwrap{display:grid;grid-template-columns:232px 1fr;gap:10px;height:100%}
.gridwrap .pbody{overflow:auto}
.grow{padding:8px 10px;border-bottom:1px solid var(--rule);cursor:pointer;border-left:3px solid transparent}
.grow:hover{background:var(--hover)}
.grow.sel{background:var(--sel);border-left-color:var(--rc)}

/* ===================== Control Tower BOARD — scales to 10+ routes ===================== */
.dsplit.boardmode .board-col{order:1;flex:0 0 210px;min-width:0;overflow:hidden}
.dsplit.boardmode .board-col .bucket{width:100%;height:100%}
.dsplit.boardmode .dmap-pane{order:2;flex:1;min-width:0}                 /* big center map */
.dsplit.boardmode #dispRight{order:3;flex:0 0 244px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden}
.dsplit.gridmode .board-col{order:1;flex:1;overflow:hidden}
.dsplit.gridmode #dispRight{display:none}
#dispRight .opsh{flex:none}
.routerail-list{overflow:auto;flex:1}
.rrow{padding:8px 10px;border-bottom:1px solid var(--rule);cursor:pointer;border-left:3px solid transparent}
.rrow:hover{background:var(--hover)}
.rrow.sel{background:var(--sel);border-left-color:var(--rc)}
.rrow-drop{display:none;text-align:center;font-size:9px;color:var(--rc);margin-top:5px;font-weight:700}
.rrow.dragover{outline:2px dashed var(--rc);outline-offset:-3px;background:var(--hover)}
.rrow.dragover .rrow-drop{display:block}

/* ===================== custom theme picker with swatches ===================== */
.thpick{position:relative}
.thpick-btn{display:flex;align-items:center;gap:7px;background:var(--pane);border:1px solid var(--rule);color:var(--txt2);border-radius:5px;padding:4px 8px;font:inherit;font-size:10px;font-weight:600;letter-spacing:.04em}
.thpick-btn:hover{border-color:var(--a-map);color:var(--txt)}
.thsw{display:inline-flex;gap:2px}.thsw i{width:8px;height:13px;border-radius:2px;display:block}
.thpick-menu{position:absolute;top:calc(100% + 5px);right:0;width:206px;max-height:360px;overflow:auto;background:var(--pane);border:1px solid var(--rule2);border-radius:8px;box-shadow:0 18px 50px -16px #000;padding:5px;display:none;z-index:700}
.thpick.open .thpick-menu{display:block}
.thpick-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;color:var(--txt);font:inherit;font-size:11px;padding:6px 8px;border-radius:5px;cursor:pointer}
.thpick-menu button:hover{background:var(--hover)}
.thpick-menu button.on{background:var(--sel);font-weight:700}
.thpick-menu .thsw i{width:9px;height:15px}

/* ===================== Control Tower (grid-only): routes·stops·big map + trucks ===================== */
.ctsplit{display:flex;gap:10px;flex:1;min-height:0}
.ctleft{flex:0 0 214px;display:flex;flex-direction:column;gap:10px;min-height:0}
.unschpane{flex:0 0 40%;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.unschpane .strips{flex:1;overflow:auto}
.routespane{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.ctstops{flex:0 0 322px;display:flex;flex-direction:column;overflow:hidden}
.ctstops .pbody{overflow:auto}
.ctmap{flex:1;min-width:0}                               /* biggest — fills the gap */
.dtruck{width:22px;height:22px;display:grid;place-items:center;filter:drop-shadow(0 0 5px currentColor)}
.tab .tabopen{margin-left:6px;font-size:10px;color:var(--txt3);border:1px solid var(--rule);border-radius:3px;padding:0 3px;line-height:14px;cursor:pointer}
.tab .tabopen:hover{color:var(--a-map);border-color:var(--a-map)}

/* Loading — confirmed truck animation + buffer input */
.bufin{width:64px;background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:4px 6px;font:inherit;font-size:11px;text-align:right}
.loaded-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px}
.loaded-truck{animation:rollin 1s cubic-bezier(.2,.8,.25,1)}
.loaded-truck svg{width:92px;height:92px}
@keyframes rollin{from{transform:translateX(-130%);opacity:0}to{transform:translateX(0);opacity:1}}
.loaded-lock{font-size:26px;animation:lockpop .4s .85s both}
@keyframes lockpop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
.loaded-msg{text-align:center}

/* ===================== Route Lists bulk bar · Billing ===================== */
.rlbulk{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--head);font-size:10px;flex-wrap:wrap;position:sticky;top:0;z-index:3}
.rlbulk .rlchk,.rlbulk input{accent-color:var(--a-route)}
.rlwinsel{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:3px 6px;font:inherit;font-size:10px}
.rlchk{accent-color:var(--a-route)}

/* ===================== z-index: keep chrome/overlays above Leaflet map panes ===================== */
.topbar{z-index:1200}
.thpick-menu{z-index:1300}
.detailwin{z-index:1250}
#cmdk{z-index:1400}
#toasts{z-index:1500}
#boot{z-index:2000}

/* ===================== fixes: stop-list fit · contrasting truck ===================== */
.ctstops{flex:0 0 360px}
.ctstoptbl{width:100%;table-layout:fixed}
.ctstoptbl th,.ctstoptbl td{white-space:nowrap}
.ctstoptbl td.cust{max-width:0;width:99%;overflow:hidden;text-overflow:ellipsis}
.ctstoptbl th:first-child,.ctstoptbl td:first-child{width:26px}
.ctstoptbl td:nth-child(3),.ctstoptbl td:nth-child(4){width:54px}
/* truck stands out from its own route line: white truck on a route-colored disc */
.dtruck{width:24px;height:24px;display:grid;place-items:center;color:#fff;background:var(--rc);border:2px solid #fff;border-radius:50%;box-shadow:0 0 9px var(--rc),0 1px 4px rgba(0,0,0,.55);filter:none}
.dtruck svg{width:14px;height:14px}

/* ===================== undo button · staged trucks · stop-list drop ===================== */
.undobtn{background:var(--pane);border:1px solid var(--rule2);color:var(--txt2);border-radius:5px;padding:4px 10px;font:inherit;font-size:10px;font-weight:700;letter-spacing:.05em;cursor:pointer;display:flex;align-items:center;gap:5px}
.undobtn:hover:not(:disabled){border-color:var(--a-route);color:var(--a-route)}
.undobtn:disabled{opacity:.38;cursor:default}
.undon{background:var(--a-route);color:var(--ink);border-radius:7px;padding:0 4px;font-size:8px;font-weight:800}
.dtruck{position:relative}
.dtruck.staged{animation:bl 1.3s infinite}
.dtbadge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--rc);color:#06121e;font-size:6.5px;font-weight:800;padding:0 3px;border-radius:3px;letter-spacing:.03em;white-space:nowrap;border:1px solid #fff}
.ctstop-drop{display:none;text-align:center;font-size:9px;color:var(--a-blot);padding:9px;border-top:1px dashed var(--rule2);font-weight:700}
.droptarget.dragover .ctstop-drop{display:block}

/* ===================== Control Tower: horizontal unscheduled bucket at bottom ===================== */
.routespane{flex:0 0 216px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.ctbucket{flex:0 0 118px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:7px;background:var(--pane);overflow:hidden;margin-top:10px}
.ctbucket-hd{padding:6px 10px;border-bottom:1px solid var(--rule);background:var(--head);font-size:9.5px;letter-spacing:.06em;flex:none}
.ctbucket-hd .n{background:var(--neg);color:#fff;border-radius:8px;padding:0 5px;font-size:9px;font-weight:800}
.strips-h{flex:1;display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;padding:7px;align-items:center}
.strips-h .strip{min-width:244px;max-width:244px;flex:0 0 auto;align-self:stretch}
.ctbucket.dragover{background:var(--hover);outline:2px dashed var(--neg);outline-offset:-3px}

/* ===================== Warehouse marker (was depot ▦) ===================== */
.whmk{width:21px;height:21px;border-radius:5px;background:#06121e;border:2px solid var(--cyan);display:grid;place-items:center;color:var(--cyan);box-shadow:0 0 10px -2px var(--cyan)}

/* ===================== date/time navigator (center-top on Radar + Control Tower) ===================== */
.ctmap{position:relative}
.mapholder{position:relative;flex:1;min-height:0}
.datebar{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:8px;background:rgba(3,7,12,.82);backdrop-filter:blur(8px);border:1px solid var(--rule2);border-radius:9px;padding:5px 7px;box-shadow:0 8px 26px -12px #000}
.datebar-mid{text-align:center;min-width:140px}
.datebar-date{font-size:16px;font-weight:800;letter-spacing:.01em}
.datebar-time{font-size:12px;color:var(--a-map);font-weight:700;font-variant-numeric:tabular-nums}
.datebar-sub{font-size:9px;font-weight:800;letter-spacing:.14em}
.datebar-sub.past{color:var(--warn)}.datebar-sub.future{color:var(--a-assign)}
.dbnav{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:6px;width:26px;height:26px;font-size:12px;cursor:pointer}
.dbnav:hover{border-color:var(--a-map);color:var(--a-map)}
.dbtoday{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);border-radius:6px;padding:0 9px;font-size:9px;font-weight:800;height:26px;cursor:pointer}
.dbtoday.on{background:var(--a-map);color:var(--ink);border-color:transparent}
.dayveil{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:499;display:none;text-align:center;background:rgba(3,7,12,.86);border:1px solid var(--rule2);border-radius:8px;padding:8px 14px;backdrop-filter:blur(6px);max-width:80%;font-size:11px}
.dayveil.on{display:block}

/* ---- closed/past day: pale + italic so it reads clearly different from the live (active) day ---- */
body.day-past #fleetPanel .rcard,
body.day-past #ctRoutes .rrow{font-style:italic;opacity:.6;filter:saturate(.55)}
body.day-past #fleetPanel .rcard:hover,
body.day-past #ctRoutes .rrow:hover{opacity:.92}
body.day-past #fleetPanel .rcard{background:rgba(255,255,255,.015)}
/* fade the radar + tower map itself (tiles desaturated, route/area overlays dimmed) */
body.day-past #map .leaflet-tile-pane,
body.day-past .ctmap .leaflet-tile-pane{filter:grayscale(.5) brightness(.78)}
body.day-past #map .leaflet-overlay-pane,
body.day-past #map .leaflet-marker-pane,
body.day-past .ctmap .leaflet-overlay-pane,
body.day-past .ctmap .leaflet-marker-pane{opacity:.55}

/* ===================== nav restructure: top icons · More · theme groups ===================== */
.topicons{display:flex;gap:3px;align-items:center}
.topicon{width:28px;height:26px;border:1px solid var(--rule);background:var(--pane);color:var(--txt2);border-radius:5px;font-size:13px;cursor:pointer;display:grid;place-items:center}
.topicon:hover{border-color:var(--a-map);color:var(--a-map)}
.topicon.on{background:var(--a-map);color:var(--ink);border-color:transparent}
.morewrap{display:flex;flex-direction:column;height:100%}
.moretabs{display:flex;gap:6px;flex:none;margin-bottom:10px}
.moretabs button{padding:8px 16px;border:1px solid var(--rule2);background:var(--pane);color:var(--txt2);border-radius:7px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;cursor:pointer}
.moretabs button.on{background:var(--a-map);color:var(--ink);border-color:transparent}
#moreBody{flex:1;min-height:0;display:flex;flex-direction:column}
.themegroup-h{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--txt2);margin-bottom:7px;display:flex;gap:6px;align-items:center}

/* ===================== Billing: apply-check bar · statement modal ===================== */
.billbar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--head);font-size:10px;flex:none}
.billbar input[type=number],.billbar input[type=text],.billbar input:not([type]){background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:3px 6px;font:inherit;font-size:10px}
.billchk{accent-color:var(--pos)}
.stmtmodal{position:fixed;inset:0;z-index:1450;display:none;align-items:flex-start;justify-content:center;padding:4vh 0;background:rgba(2,5,9,.66);backdrop-filter:blur(3px)}
.stmtmodal.on{display:flex}
.stmt{width:860px;max-width:96vw;max-height:92vh;background:#1a1f27;border:1px solid var(--rule2);border-radius:11px;box-shadow:0 30px 90px -20px #000;display:flex;flex-direction:column;overflow:hidden}
.stmt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--head);border-bottom:1px solid var(--rule);color:var(--txt2);font-size:11px;font-weight:700;letter-spacing:.03em}
.stmt-tb-acts{display:flex;align-items:center;gap:7px}
.stmt-scroll{overflow:auto;padding:22px;background:#3a3f47}
/* ---------- the statement "paper" (light, print-faithful document) ---------- */
.stp{width:8.5in;max-width:100%;margin:0 auto;background:#fff;color:#1d2530;padding:0.6in 0.62in 0.45in;
  font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;line-height:1.45;box-shadow:0 8px 30px -8px rgba(0,0,0,.5)}
.stp *{box-sizing:border-box}
.sp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-bottom:3px solid #0d3b66;padding-bottom:14px}
.sp-co{display:flex;gap:12px;align-items:flex-start}
.sp-logo{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#1488d8,#0d3b66);color:#fff;font-size:24px;display:grid;place-items:center;flex:none;box-shadow:0 3px 8px -2px rgba(13,59,102,.5)}
.sp-co-name{font-size:19px;font-weight:800;letter-spacing:.04em;color:#0d3b66}
.sp-co-name span{color:#1488d8}
.sp-co-meta{font-size:9.5px;color:#5a6675;margin-top:3px;line-height:1.5}
.sp-doc{text-align:right;flex:none}
.sp-doc h1{margin:0 0 6px;font-size:26px;letter-spacing:.16em;color:#0d3b66;font-weight:800}
.sp-doc-meta{border-collapse:collapse;margin-left:auto;font-size:10px}
.sp-doc-meta td{padding:2px 0 2px 14px;text-align:right;color:#5a6675}
.sp-doc-meta td:last-child{color:#1d2530;font-weight:700;font-variant-numeric:tabular-nums}
.sp-doc-meta tr.sp-due td{padding-top:6px;font-size:12px}
.sp-doc-meta tr.sp-due td:first-child{color:#0d3b66;font-weight:800}
.sp-doc-meta tr.sp-due td:last-child{color:#b00d1e;font-weight:800;font-size:14px}
.sp-parties{display:flex;justify-content:space-between;gap:24px;margin:16px 0 6px}
.sp-lbl{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a96a5;font-weight:700;margin-bottom:4px}
.sp-billto-name{font-size:14px;font-weight:800;color:#1d2530}
.sp-billto-lines{font-size:10.5px;color:#43505f;margin-top:2px;line-height:1.55}
.sp-muted{color:#8a96a5}
.sp-sum{min-width:280px;border:1px solid #d7dee6;border-radius:8px;overflow:hidden;align-self:flex-start}
.sp-sum-row{display:flex;justify-content:space-between;gap:18px;padding:7px 12px;font-size:10.5px;color:#43505f;border-bottom:1px solid #eef2f6}
.sp-sum-row b{font-variant-numeric:tabular-nums;color:#1d2530}
.sp-sum .sp-cr{color:#127a3e}
.sp-sum-due{background:#0d3b66;color:#fff;border-bottom:none}
.sp-sum-due span{color:#cfe2f2}.sp-sum-due b{color:#fff;font-size:14px}
.sp-ledger{width:100%;border-collapse:collapse;margin-top:14px;font-size:10px}
.sp-ledger thead th{background:#0d3b66;color:#fff;text-align:left;padding:7px 10px;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.sp-ledger th.r,.sp-ledger td.r{text-align:right;font-variant-numeric:tabular-nums}
.sp-ledger td{padding:5px 10px;vertical-align:top;border-bottom:1px solid #eef2f6}
.sp-ledger tr.sp-inv td{border-top:1px solid #d7dee6;padding-top:8px;color:#1d2530}
.sp-ledger tr.sp-li td{padding-top:1px;padding-bottom:1px;color:#5a6675;font-size:9.5px}
.sp-li-q{display:inline-block;min-width:30px;font-weight:700;color:#1d2530}
.sp-ledger tr.sp-li-fee td{font-style:italic}
.sp-ledger tr.sp-pay td{color:#127a3e}
.sp-ledger tr.sp-pay .sp-cr{color:#127a3e;font-weight:700}
.sp-ledger tr.sp-open td{color:#8a96a5;font-style:italic}
.sp-ledger tr.sp-total td{border-top:2px solid #0d3b66;border-bottom:none;padding-top:8px;font-weight:800;color:#0d3b66;font-size:11px}
.sp-aging{margin-top:18px}
.sp-aging-t{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#8a96a5;font-weight:700;margin-bottom:6px}
.sp-aging-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sp-age{border:1px solid #d7dee6;border-radius:7px;padding:8px 10px;text-align:center}
.sp-age span{display:block;font-size:9px;color:#8a96a5;letter-spacing:.04em}
.sp-age b{display:block;font-size:14px;margin-top:3px;color:#1d2530;font-variant-numeric:tabular-nums}
.sp-age.over{border-color:#f0c2c2;background:#fdf3f3}
.sp-age.over b{color:#b00d1e}
.sp-remit{margin-top:22px;border:1px dashed #b9c4cf;border-radius:8px;overflow:hidden}
.sp-remit-cut{background:#f3f6f9;color:#8a96a5;font-size:9px;letter-spacing:.08em;padding:5px 12px;border-bottom:1px dashed #b9c4cf}
.sp-remit-body{display:flex;justify-content:space-between;gap:24px;padding:12px 14px}
.sp-remit-addr{font-size:10.5px;color:#43505f;line-height:1.5}
.sp-remit-meta{border-collapse:collapse;font-size:10.5px}
.sp-remit-meta td{padding:3px 0 3px 16px;text-align:right;color:#5a6675}
.sp-remit-meta td:last-child{color:#1d2530;font-weight:700;font-variant-numeric:tabular-nums;min-width:120px}
.sp-foot{margin-top:18px;padding-top:12px;border-top:1px solid #d7dee6;font-size:9px;color:#7a8593;line-height:1.6}
.sp-foot-thanks{margin-top:6px;color:#0d3b66;font-weight:700;font-size:10px}
.sp-foot-fine{margin-top:5px;font-size:8px;color:#9aa6b4}
@media print{
  body.printing-stmt *{visibility:hidden!important}
  body.printing-stmt .stmtmodal,body.printing-stmt .stmtmodal *{visibility:visible!important}
  body.printing-stmt .stmtmodal{position:absolute;inset:0;padding:0;background:#fff;display:block;overflow:visible}
  body.printing-stmt .stmt{width:auto;max-width:none;max-height:none;background:#fff;border:none;box-shadow:none;display:block}
  body.printing-stmt .stmt-toolbar{display:none!important}
  body.printing-stmt .stmt-scroll{overflow:visible;padding:0;background:#fff}
  body.printing-stmt .stp{width:auto;box-shadow:none;padding:0.3in 0.4in}
  @page{margin:0.5in}
}

/* ===================== date nav → bottom-right edge (less distraction) ===================== */
.datebar{top:auto;bottom:10px;left:auto;right:10px;transform:none;gap:6px;padding:4px 7px}
.datebar-mid{min-width:0}
.datebar-date{font-size:13px}
.datebar-time{font-size:11px}
.dayveil{top:auto;bottom:14px;left:50%;right:auto;transform:translateX(-50%);text-align:center;max-width:64%;font-size:10px}

/* ===================== compact Control Tower header strip → bigger map ===================== */
.dwrap .dstrip{margin-bottom:6px;gap:6px;flex:none}
.dwrap .dstrip .dpill{padding:3px 9px;font-size:9px}
.dwrap .dstrip .dpill b{font-size:12px;margin-right:4px}

/* ===================== undo confirmation modal ===================== */
.confirmmodal{position:fixed;inset:0;z-index:1460;display:none;align-items:center;justify-content:center;background:rgba(2,5,9,.6);backdrop-filter:blur(3px)}
.confirmmodal.on{display:flex}
.confirmbox{width:360px;max-width:92vw;background:var(--pane);border:1px solid var(--rule2);border-radius:11px;box-shadow:0 30px 80px -20px #000;overflow:hidden}
.confirmhd{padding:13px 16px;font-size:13px;font-weight:800;border-bottom:1px solid var(--rule);background:var(--head)}
.confirmbody{padding:16px;font-size:12px;line-height:1.6;color:var(--txt2)}
.confirmacts{display:flex;gap:8px;padding:0 16px 16px;justify-content:flex-end}

/* ===================== tabs moved into the header row (reclaim a row) ===================== */
.topbar .tabs{height:100%;flex:1;min-width:0;border-bottom:none;background:none;padding:0 6px;margin:0;overflow-x:auto}
.topbar{gap:0}

/* ===================== Overview 7-metric row (moved from header) ===================== */
.g7ov{grid-template-columns:repeat(7,1fr)}
.g7ov .kpi{padding:9px 11px}
.g7ov .kpi .v{font-size:22px}
.g7ov .kpi .spark{transform:scale(.82);transform-origin:top right}
/* ===== redesigned Overview command deck ===== */
.kpiclick{cursor:pointer;transition:border-color .12s,transform .08s}
.kpiclick:hover{border-color:var(--ac);transform:translateY(-1px)}
.kpi-go{float:right;color:var(--ac);opacity:.7;font-size:10px}
.ovgrid{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:10px;height:calc(100% - 104px)}
.ovstack{display:flex;flex-direction:column;gap:10px;min-height:0}
.ovstack>.pane{flex:1;min-height:0;display:flex;flex-direction:column}
.ovstack>.pane>.pbody,.ovstack>.pane .pbody{overflow:auto}
.ovfleet{min-height:0;display:flex;flex-direction:column}
.ovfleet>.pbody{overflow:auto}
.ovatt{display:flex;align-items:center;gap:9px;padding:8px 11px;border-bottom:1px solid var(--rule);cursor:pointer}
.ovatt:hover{background:var(--hover)}
.ovatt-ic{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:#06121e;font-size:13px;font-weight:800;flex:none}
.ovatt-b{flex:1;min-width:0}
.ovatt-t{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ovatt-s{font-size:9.5px;color:var(--txt3)}
.ovatt-more{padding:9px 11px;font-size:10px;font-weight:700;color:var(--a-blot);cursor:pointer}
.ovatt-more:hover{background:var(--hover)}
.ovhub{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule)}
.ovhub:last-child{border-bottom:none}
.ovhub-code{width:34px;height:34px;border-radius:8px;background:var(--ac,var(--a-cover));color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.ovhub-b{flex:1;min-width:0}.ovhub-name{font-size:11.5px;font-weight:700}
.ovrecap-top{font-size:11px;margin-bottom:6px}.ovrecap-wx{font-weight:800;color:var(--a-map)}
.ovrecap-big{font-size:13px;margin-bottom:10px}.ovrecap-big b{font-size:26px;color:var(--pos)}
.ovrecap-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ovrecap-grid>div{background:var(--head);border:1px solid var(--rule);border-radius:7px;padding:7px 9px;display:flex;flex-direction:column;gap:2px}
.ovrecap-grid span{font-size:9px;color:var(--txt3);letter-spacing:.04em}
.ovrecap-grid b{font-size:15px}
.ovar-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:11px;border-bottom:1px solid var(--rule)}
.ovar-row b{font-variant-numeric:tabular-nums}
.ovar-cust{display:flex;justify-content:space-between;padding:4px 0;font-size:10.5px;cursor:pointer;border-bottom:1px solid var(--rule)}
.ovar-cust:hover{color:var(--a-feed)}

/* ===================== stop pins: number always + ✓ badge when done ===================== */
.stopmk{position:relative}
.stopmk.done{background:#06121e;border-color:var(--rc);color:var(--rc)}
.stopmk.done::after{content:'✓';position:absolute;top:-6px;right:-6px;width:12px;height:12px;border-radius:50%;background:var(--rc);color:#06121e;font-size:7.5px;font-weight:900;display:grid;place-items:center;border:1px solid #06121e}
/* ---- past-day actual stop outcomes (radar replay): delivered-late / cancelled / rolled over ---- */
.stopmk.late{background:#06121e;border-color:var(--warn);color:var(--warn);box-shadow:0 0 0 2px color-mix(in srgb,var(--warn) 55%,transparent)}
.stopmk.late::after{content:'!';position:absolute;top:-6px;right:-6px;width:12px;height:12px;border-radius:50%;background:var(--warn);color:#06121e;font-size:8px;font-weight:900;display:grid;place-items:center;border:1px solid #06121e}
.stopmk.cancel{background:var(--neg);border-color:var(--neg);color:#fff;font-weight:900}
.stopmk.roll{background:#0a1622;border-style:dashed;border-color:var(--txt3);color:var(--txt3);opacity:.6}
/* clicked-stop highlight ring on the dispatch map */
.stop-hl{width:44px;height:44px;border-radius:50%;border:3px solid var(--rc,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--rc,#fff) 30%,transparent),0 0 16px color-mix(in srgb,var(--rc,#fff) 55%,transparent);animation:stophl 1.3s ease-out infinite}
@keyframes stophl{0%{transform:scale(.55);opacity:1}70%{transform:scale(1);opacity:.5}100%{transform:scale(1.05);opacity:0}}

/* ===================== important headings pop in the current theme color ===================== */
.ph h3{font-size:12px;color:var(--ac,var(--a-map));font-weight:800}
.ph h3 .acc{width:8px;height:8px}
.opsh{color:var(--ac,var(--a-map));font-size:10.5px}
.insp-sec{color:var(--ac,var(--a-map));font-size:10px}
.dw-kind,.stmt-hd .dw-kind{color:var(--ac,var(--a-feed))}
.ctbucket-hd,.billbar{font-size:10px}

/* ===================== Route Lists: 2-col default, map below stops ===================== */
.rlwrap{display:grid;grid-template-columns:288px 1fr;gap:10px;height:100%}
.rl-split{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rl-split .pbody{flex:0 1 auto;overflow:auto;min-height:80px;max-height:46%}   /* list sizes to content/caps → map fills the rest */
.rlmap{flex:1;min-height:260px;border-top:1px solid var(--rule);background:#06121e}
.rl3 .rlmap{min-height:200px}

/* ===================== Customers: search bar · accordion · global search ===================== */
.custbar{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--head);flex:none}
.custbar input,.custbar select{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt);border-radius:5px;padding:5px 8px;font:inherit;font-size:11px}
.custbar #custSearch{flex:1;max-width:340px}
tr.custrow{cursor:pointer}
tr.custexp>td{background:var(--bg2);padding:0}
.custexp-in{padding:11px 14px}
.locrow{display:flex;align-items:center;gap:10px;padding:4px 0;border-bottom:1px solid var(--rule);font-size:10.5px}
.locrow:last-child{border-bottom:none}
.gsearch{background:var(--pane);border:1px solid var(--rule2);color:var(--txt);border-radius:6px;padding:5px 9px;font:inherit;font-size:11px;width:170px}
.gsearch:focus{outline:none;border-color:var(--a-map);width:230px}

/* --- stop order-id tags (Control Tower stop list) --- */
.oidtag{display:inline-block;font:700 10px/1 ui-monospace,monospace;letter-spacing:.4px;
  color:var(--a-blot,#62d0ff);border:1px solid color-mix(in srgb,var(--a-blot,#62d0ff) 55%,transparent);
  background:color-mix(in srgb,var(--a-blot,#62d0ff) 14%,transparent);padding:3px 6px;border-radius:5px;white-space:nowrap}
.ctstoptbl .rtn{font:600 9.5px/1 ui-monospace,monospace;letter-spacing:.5px;color:var(--dim,#7790a0);
  text-transform:uppercase;opacity:.65}

/* ===== heading "pop" chips — filled theme-accent background, like the LIVE FEED label ===== */
.hpop{display:inline-flex;align-items:center;gap:6px;background:var(--ac,var(--a-map));color:var(--ink);
  padding:3px 9px;border-radius:5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;font-size:11px}
.hpop .n,.hpop small{background:rgba(0,0,0,.22);color:var(--ink);border-radius:7px;padding:0 6px;font-size:9px;font-weight:800}
.hpop .sub{background:none;color:var(--ink);opacity:.78;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:9.5px}
/* every panel header is fully filled with the SINGLE theme accent (consistent across all tabs/screens —
   the theme's signature color sticks everywhere instead of a different hue per pane) */
.pane>.ph,.ph{background:var(--a-map);border-bottom-color:rgba(0,0,0,.28)}
.pane>.ph h3,.ph h3{background:none;color:var(--ink);padding:0;border-radius:0;
  font-weight:800;letter-spacing:.1em;font-size:11px}
.ph .meta{color:var(--ink);opacity:.82}
.ph h3 .acc{display:none}
/* Control Tower "Routes" header (.opsh) + Unscheduled bucket header → same full-bar fill as every .ph */
.opsh{background:var(--a-map);border-bottom:1px solid rgba(0,0,0,.28);color:var(--ink)}
.opsh .hpop{background:transparent;color:var(--ink);padding:0;border-radius:0;box-shadow:none}
.opsh .hpop .sub{color:var(--ink);opacity:.82}
.opsh .n{background:rgba(0,0,0,.24);color:var(--ink)}
.ctbucket-hd{background:var(--a-map);border-bottom:1px solid rgba(0,0,0,.28);color:var(--ink)}
.ctbucket-hd .hpop{background:transparent;color:var(--ink);padding:0;border-radius:0;box-shadow:none}
.ctbucket-hd .dim{color:var(--ink);opacity:.78}
.ctbucket-hd .n{background:rgba(0,0,0,.24);color:var(--ink)}

/* ===== header: no-scroll tabs (fit to width), search icon + overlay ===== */
.topbar .tabs{overflow:visible;flex-wrap:nowrap;padding:0 6px;gap:0}
.topbar .tabs .tab{flex:0 1 auto;min-width:0;padding:0 10px;gap:5px;white-space:nowrap}
.topbar .tabs .tab .kc{display:none}            /* drop number keycaps to reclaim width */
.topbar .tabs .tab>span:not(.badge):not(.tabopen){overflow:hidden;text-overflow:ellipsis}
.searchbtn{background:var(--pane);border:1px solid var(--rule2);color:var(--txt2);border-radius:6px;
  height:26px;width:30px;display:grid;place-items:center;font-size:13px;cursor:pointer}
.searchbtn:hover{color:var(--ink);background:var(--a-map);border-color:transparent}
.searchov{position:fixed;inset:0;z-index:1450;background:rgba(2,8,12,.62);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;padding-top:11vh}
.searchov.on{display:flex}
.searchov-box{width:min(680px,92vw);background:var(--bg2,#0c151b);border:1px solid var(--rule2);border-radius:12px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden}
.searchov-top{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.searchov-ic{font-size:15px;opacity:.8}
#searchOvInput{flex:1;background:none;border:none;outline:none;color:var(--txt);font:inherit;font-size:15px}
.searchov-res{max-height:54vh;overflow:auto;padding:6px}
.searchov-res .sov-sec{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);padding:9px 10px 4px}
.searchov-res .sov-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;cursor:pointer}
.searchov-res .sov-row:hover{background:var(--hover)}
.searchov-res .sov-row b{font-size:12px}
.searchov-res .sov-row .sov-meta{color:var(--txt3);font-size:10.5px;margin-left:auto;font-family:ui-monospace,monospace}
.sov-empty{padding:22px;text-align:center;color:var(--txt3);font-size:11.5px}
.searchov-hint{display:flex;gap:16px;justify-content:flex-end;padding:8px 14px;border-top:1px solid var(--rule);color:var(--txt3);font-size:10px}

/* ===== Customers blotter split (list left · detail right, autoiq-style) ===== */
.custsplit{display:flex;gap:10px;height:100%}
.custsplit .custleft{flex:1;min-width:0;height:100%;display:flex;flex-direction:column}
.custright{flex:0 0 384px;width:384px;background:var(--pane);border:1px solid var(--rule);border-radius:8px;overflow:auto;display:flex;flex-direction:column}
.custrow{cursor:pointer}
.custrow.sel td{background:color-mix(in srgb,var(--a-over) 16%,transparent)}
.custrow.sel td:first-child{box-shadow:inset 3px 0 0 var(--a-over)}
.custempty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;color:var(--txt3);font-size:11.5px;line-height:1.6;padding:24px}
.cd-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 13px 11px;border-bottom:1px solid var(--rule)}
.cd-name{font-size:15px;font-weight:800;letter-spacing:.01em}
.cd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border-bottom:1px solid var(--rule)}
.cd-kpi{background:var(--pane);padding:8px 6px;display:flex;flex-direction:column;gap:3px;align-items:center}
.cd-kpi span{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.cd-kpi b{font-size:13px;font-family:ui-monospace,monospace}
.cd-acts{display:flex;gap:6px;padding:11px 13px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.cd-body{padding:6px 13px 16px}
.cd-none{font-size:10.5px;padding:3px 2px 6px}
.cd-actor{font-size:9px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:4px;min-width:46px;text-align:center}
.cd-actor.a-you{background:color-mix(in srgb,var(--a-map) 22%,transparent);color:var(--a-map)}
.cd-actor.a-copilot{background:color-mix(in srgb,var(--a-blot) 22%,transparent);color:var(--a-blot)}
.cd-actor.a-system{background:color-mix(in srgb,var(--txt3) 24%,transparent);color:var(--txt2)}
.custright .insp-sec{margin-top:13px}
/* customer / order detail tabs (replace stacked lists → tabbed, no long scroll) */
.cdtabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--pane);z-index:2;flex-wrap:wrap}
.cdtab{appearance:none;background:transparent;border:1px solid transparent;border-bottom:none;color:var(--txt3);font:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 9px;border-radius:6px 6px 0 0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;margin-bottom:-1px}
.cdtab:hover{color:var(--txt2);background:var(--hover)}
.cdtab.on{color:var(--ink);background:var(--a-map);border-color:transparent}
.cdtab-n{font-size:8.5px;font-weight:800;padding:0 5px;border-radius:7px;background:color-mix(in srgb,var(--txt3) 26%,transparent);color:var(--txt2)}
.cdtab.on .cdtab-n{background:rgba(0,0,0,.24);color:var(--ink)}
.custright .cd-body .insp-sec:first-child{margin-top:4px}
/* areas: custom color picker chip */
.afcustom{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:1px dashed var(--rule2);border-radius:5px;padding:3px 7px;font-size:9.5px;font-weight:700;color:var(--txt2);height:22px}
.afcustom:hover{border-color:var(--a-cover);color:var(--txt)}
.afcustom input[type=color]{width:18px;height:18px;padding:0;border:none;background:none;cursor:pointer}
.afcustom input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.afcustom input[type=color]::-webkit-color-swatch{border:1px solid var(--rule2);border-radius:4px}
/* prominent action button that sits inside a filled .ph header bar */
.ph-act{appearance:none;background:var(--ink);color:var(--pa,var(--ac,var(--a-route)));border:1px solid color-mix(in srgb,var(--ink) 50%,transparent);border-radius:6px;font:inherit;font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:4px 9px;cursor:pointer;white-space:nowrap;box-shadow:0 1px 4px -1px rgba(0,0,0,.4)}
.ph-act:hover{background:var(--pa,var(--ac,var(--a-route)));color:var(--ink);border-color:transparent}
/* ===== Equipment module (asset management) ===== */
.eqwrap{display:flex;flex-direction:column;height:100%}
.eqhdr{display:flex;align-items:center;gap:14px;padding:9px 13px;background:var(--head);border:1px solid var(--rule);border-radius:9px;flex:none}
.eq-brand{font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--a-feed);white-space:nowrap}
.eqnav{display:flex;gap:3px}
.eqtab{appearance:none;background:transparent;border:none;color:var(--txt3);font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:7px;cursor:pointer}
.eqtab:hover{color:var(--txt);background:var(--hover)}
.eqtab.on{background:var(--a-map);color:var(--ink)}
.eqmain{display:flex;gap:10px;flex:1;min-height:0;margin-top:10px}
.eqkpis{display:flex;flex-direction:column;gap:8px;width:208px;flex:none;overflow:auto}
.eqkpis .kpi{flex:none}
.eqbody{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.eqmapwrap{display:flex;flex-direction:column;height:100%;border:1px solid var(--rule);border-radius:9px;overflow:hidden}
#eqMap{flex:1;min-height:0;background:#06121e}
.eqlegend{display:flex;align-items:center;gap:14px;padding:7px 12px;background:var(--head);border-top:1px solid var(--rule);font-size:10px;color:var(--txt2);flex-wrap:wrap}
.eqlegend>span{display:flex;align-items:center;gap:5px}
.eqlegend i{width:10px;height:10px;border-radius:50%;display:inline-block}
html.app-equipment .topbar,html.app-driver .topbar,html.app-portal .topbar{display:none}
html.app-equipment #view,html.app-driver #view,html.app-portal #view{padding-top:12px}
html.app-driver #view,html.app-portal #view{padding:0}
/* ===== Driver app (mobile) ===== */
.drvbg{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(150% 90% at 50% -12%,#16344e,#060c12 72%);overflow:auto;padding:18px}
.phone{width:400px;max-width:96vw;height:100%;max-height:824px;background:#0b131c;border-radius:36px;box-shadow:0 44px 100px -34px #000,inset 0 0 0 6px #05090e,inset 0 0 0 7px #1b2a39;display:flex;flex-direction:column;overflow:hidden;position:relative}
.phone::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:116px;height:6px;border-radius:4px;background:#1b2734;z-index:6}
.drv-top{padding:26px 16px 12px;background:linear-gradient(165deg,#14293d,#0b131c);border-bottom:1px solid #1a2735}
.drv-top-row{display:flex;align-items:center;gap:8px}.drv-pick{flex:1;font-size:12px}
.drv-shift{font-size:9px;font-weight:800;padding:3px 7px;border-radius:6px;white-space:nowrap}
.drv-shift.day{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.drv-shift.night{background:color-mix(in srgb,var(--a-over) 22%,transparent);color:var(--a-over)}
.drv-top-row2{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:12px}
.drv-date{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--txt2)}
.drv-date button{background:var(--pane2);border:1px solid var(--rule2);color:var(--txt2);border-radius:5px;width:20px;height:20px;cursor:pointer}
.drv-steps{display:flex;gap:2px;padding:8px;background:var(--bg2);border-bottom:1px solid var(--rule)}
.drv-step{flex:1;appearance:none;background:transparent;border:none;color:var(--txt3);font:inherit;font-size:9px;font-weight:700;text-transform:uppercase;padding:6px 2px;border-radius:6px;cursor:pointer}
.drv-step.on{background:var(--a-map);color:var(--ink)}.drv-step.done:not(.on){color:var(--pos)}
.drv-body{flex:1;overflow:auto;padding:13px;display:flex;flex-direction:column;gap:11px}
.drv-card{background:linear-gradient(168deg,#16222e,#0f1822);border:1px solid #233340;border-radius:16px;padding:16px;box-shadow:0 12px 30px -16px #000}
.drv-h{font-size:15px;font-weight:800;margin-bottom:12px;letter-spacing:-.01em}
.drv-kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--rule);font-size:12px}
.drv-kv b{font-variant-numeric:tabular-nums}
.drv-btn{width:100%;margin-top:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--a-map) 92%,#fff),var(--a-map));color:#06121e;border:none;border-radius:13px;padding:14px;font:inherit;font-size:13px;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--a-map) 70%,transparent)}
.drv-btn:hover{filter:brightness(1.06)}
.drv-btn[disabled]{opacity:.35;cursor:not-allowed;box-shadow:none;filter:saturate(.4)}
.drv-tires{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.drv-tires label{font-size:8px;color:var(--txt3);display:block;margin-bottom:2px}.drv-tires input{width:100%;text-align:center;font-size:12px}
.drv-chk{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:12px}
.drv-chkb{width:27px;height:27px;border-radius:8px;border:1.5px solid var(--rule2);background:transparent;color:var(--txt3);font-weight:900;cursor:pointer;flex:none}
.drv-chk.on .drv-chkb{background:var(--pos);border-color:var(--pos);color:#06121e}.drv-chk span{flex:1}
.drv-cam{background:none;border:none;font-size:17px;cursor:pointer;opacity:.45}.drv-cam.shot{opacity:1}
.drv-q{font-weight:800;font-variant-numeric:tabular-nums;color:var(--a-load)}
.drv-prog{font-size:11px;font-weight:700;color:var(--txt2);text-align:center}
.drv-cur{border:1.5px solid var(--a-map)}
.drv-cur-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.drv-sn{width:31px;height:31px;border-radius:50%;background:var(--a-map);color:var(--ink);display:grid;place-items:center;font-weight:800;flex:none}
.drv-items{margin:8px 0;font-size:12px}
.drv-acts{display:flex;gap:6px;margin:11px 0}
.drv-a{flex:1;background:var(--head);border:1px solid var(--rule2);color:var(--txt);border-radius:9px;padding:9px 3px;font:inherit;font-size:10px;font-weight:700;cursor:pointer}
.drv-a.paid{background:color-mix(in srgb,var(--pos) 20%,transparent);color:var(--pos);border-color:transparent}
.drv-up{margin-top:2px}.drv-uprow{display:flex;gap:9px;padding:8px 4px;border-bottom:1px solid var(--rule);font-size:11px;color:var(--txt2)}
.drv-uprow span{color:var(--txt3);font-weight:700;min-width:16px}
/* ===== Customer portal ===== */
.portalbg{height:100%;overflow:auto;background:radial-gradient(160% 80% at 50% -8%,#12365a,#070d14 70%)}
.portal{max-width:840px;margin:0 auto;padding:30px 22px 40px}
.pt-hd{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #1a2937}
.pt-brand{font-size:22px;font-weight:800;color:#eaf4fb;letter-spacing:-.01em}
.pt-brand span{font-size:10px;color:var(--txt3);font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin-left:4px}
.pt-cust{margin-left:auto;font-size:12px;max-width:230px}
.pt-acct{text-align:right}.pt-acct .dim{font-size:9px;display:block}.pt-acct b{font-size:17px;font-variant-numeric:tabular-nums}
.pt-nav{display:flex;gap:3px;border-bottom:1px solid var(--rule);margin-bottom:16px;flex-wrap:wrap}
.pt-tab{appearance:none;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--txt3);font:inherit;font-size:12px;font-weight:700;padding:9px 13px;cursor:pointer}
.pt-tab.on{color:var(--a-map);border-bottom-color:var(--a-map)}
.pt-card{background:linear-gradient(168deg,#101a25,#0b131b);border:1px solid #1f2e3b;border-radius:16px;padding:20px;margin-bottom:14px;box-shadow:0 16px 40px -24px #000}
.pt-card-h{font-size:15px;font-weight:800;margin-bottom:15px;letter-spacing:-.01em}
.pt-track{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.pt-timeline{display:flex;flex-direction:column}
.pt-step{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--txt3);padding:9px 0;position:relative}
.pt-step .pt-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--rule2);background:var(--pane);flex:none;z-index:1}
.pt-step:not(:last-child)::after{content:'';position:absolute;left:6px;top:24px;height:18px;width:2px;background:var(--rule2)}
.pt-step.on{color:var(--txt);font-weight:600}
.pt-step.on .pt-dot{background:var(--pos);border-color:var(--pos);box-shadow:0 0 0 3px color-mix(in srgb,var(--pos) 22%,transparent)}
.pt-step.on:not(:last-child)::after{background:var(--pos)}
.pt-driver{display:flex;align-items:center;gap:11px;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.pt-driver .dtruck{width:30px;height:30px}
.pt-map{min-height:320px;height:100%;border-radius:13px;overflow:hidden;border:1px solid var(--rule);background:#06121e}
.pt-kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--rule);font-size:12px}
.pt-paybtn{background:var(--a-map);color:var(--ink);border:none;border-radius:6px;padding:4px 13px;font-weight:700;cursor:pointer}
.pt-btn{width:100%;margin-top:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--a-map) 92%,#fff),var(--a-map));color:#06121e;border:none;border-radius:12px;padding:14px;font:inherit;font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--a-map) 70%,transparent)}
.pt-btn:hover{filter:brightness(1.06)}
.pt-field{margin-bottom:12px}.pt-field label{display:block;font-size:10px;color:var(--txt3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.pt-field input,.pt-field select{width:100%}
@media(max-width:620px){.pt-track{grid-template-columns:1fr}.pt-map{min-height:240px}}
/* New Order modal */
.ordermodal{position:fixed;inset:0;z-index:1470;display:none;align-items:flex-start;justify-content:center;padding:5vh 0;background:rgba(2,5,9,.66);backdrop-filter:blur(3px)}
.ordermodal.on{display:flex}
.om{width:480px;max-width:94vw;max-height:90vh;background:var(--pane);border:1px solid var(--rule2);border-radius:11px;box-shadow:0 30px 80px -20px #000;display:flex;flex-direction:column;overflow:hidden}
.om-hd{display:flex;align-items:center;padding:13px 15px;background:var(--head);border-bottom:1px solid var(--rule);font-size:14px}
.om-body{padding:14px 15px;overflow:auto;display:flex;flex-direction:column;gap:11px}
.om-foot{padding:12px 15px;border-top:1px solid var(--rule);background:var(--head)}
.om-prod{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--rule);font-size:11.5px}
.om-prod input{width:74px;text-align:right}
.om-toggle{display:flex;gap:0;border:1px solid var(--rule2);border-radius:7px;overflow:hidden}
.omt{flex:1;appearance:none;background:transparent;border:none;color:var(--txt2);font:inherit;font-size:10.5px;font-weight:700;padding:7px 6px;cursor:pointer}
.omt.on{background:var(--a-route);color:var(--ink)}
.om-urg{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt2);cursor:pointer;padding:4px 0}
.om-urg input{width:16px;height:16px}
/* 'More' nav dropdown */
.moremenu{position:fixed;z-index:1460;min-width:196px;background:var(--pane2);border:1px solid var(--rule2);border-radius:9px;box-shadow:0 18px 50px -16px #000;padding:5px;display:none}
.moremenu.on{display:block}
.moremenu button{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:none;color:var(--txt);font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer}
.moremenu button:hover{background:var(--hover);color:var(--a-map)}
.moremenu .mm-ic{font-size:14px;width:18px;text-align:center}
.moremenu-soon{font-size:9px;color:var(--txt3);padding:7px 10px 4px;border-top:1px solid var(--rule);margin-top:4px;letter-spacing:.04em;font-style:italic}
/* ZIP overlay label + the ▦ ZIP map toggle button */
.ziplbl{display:inline-block;font:700 8.5px/1.2 var(--mono,monospace);color:#cdd8e4;background:rgba(8,14,20,.66);border:1px solid rgba(159,176,194,.35);border-radius:4px;padding:0 3px;white-space:nowrap;letter-spacing:.02em}
.zipbtn{background:rgba(8,14,20,.82);color:var(--txt2);border:1px solid var(--rule2);border-radius:6px;font:700 10px/1 var(--mono,monospace);padding:6px 8px;cursor:pointer;box-shadow:0 2px 8px -3px #000}
.zipbtn:hover{color:var(--txt);border-color:var(--a-map)}
.zipbtn.on{background:var(--a-map);color:var(--ink);border-color:transparent}
/* ===== New Service Route builder (draw-on-map / pick by area & ZIP) ===== */
.rlnewmodal{position:fixed;inset:0;z-index:1480;display:none;background:rgba(2,5,9,.72);backdrop-filter:blur(3px)}
.rlnewmodal.on{display:block}
.rln{position:absolute;inset:0;background:var(--pane);border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column;overflow:hidden}
.rln-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--head);border-bottom:1px solid var(--rule);font-size:13px}
.rln-body{flex:1;min-height:0;display:flex}
.rln-side{width:262px;flex:none;border-right:1px solid var(--rule);overflow:auto;padding:12px 13px;display:flex;flex-direction:column;gap:4px}
.rln-stopcol{width:380px;flex:none;border-right:1px solid var(--rule);overflow:auto;padding:12px 14px;display:flex;flex-direction:column}
.rln-map{flex:1;min-width:0}
.rln-sec{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);font-weight:800;margin:12px 0 6px}
.rln-fl-t{font-size:9.5px;color:var(--txt2);font-weight:700;margin:8px 0 5px}
.rln-chips{display:flex;flex-wrap:wrap;gap:5px;max-height:118px;overflow:auto}
.rln-zips{max-height:96px}
.rlnchip{appearance:none;display:inline-flex;align-items:center;gap:5px;background:var(--head);border:1px solid var(--rule2);color:var(--txt2);font:inherit;font-size:10px;font-weight:600;padding:3px 8px;border-radius:13px;cursor:pointer}
.rlnchip:hover{border-color:var(--a-route);color:var(--txt)}
.rlnchip.on{background:var(--a-route);border-color:transparent;color:var(--ink);font-weight:800}
.rlnchip-dot{width:9px;height:9px;border-radius:50%}
.rln-stoplist{flex:1;min-height:120px;overflow:auto;border:1px solid var(--rule);border-radius:7px}
.rln-pickwrap{border:1px solid var(--rule);border-radius:7px;padding:8px 9px}
/* loading/unloading: per-line scan & verify (barcode-ready) */
.loadgrp{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--txt3);padding:9px 10px 4px;text-transform:uppercase;position:sticky;top:0;background:var(--pane);z-index:1}
.loadtabs{display:flex;gap:2px;padding:7px 7px 0;position:sticky;top:0;background:var(--pane);z-index:2;border-bottom:1px solid var(--rule)}
.loadtab{flex:1;appearance:none;background:transparent;border:1px solid transparent;border-bottom:none;color:var(--txt3);font:inherit;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:6px 4px;border-radius:6px 6px 0 0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:-1px}
.loadtab:hover{color:var(--txt2);background:var(--hover)}
.loadtab.on{color:var(--ink);background:var(--a-map);border-color:transparent}
.lt-n{font-size:8.5px;font-weight:800;padding:0 5px;border-radius:7px;background:color-mix(in srgb,var(--txt3) 26%,transparent);color:var(--txt2)}
.loadtab.on .lt-n{background:rgba(0,0,0,.24);color:var(--ink)}
.scanbar{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--txt2);background:var(--head);border:1px solid var(--rule);border-radius:7px;padding:6px 9px;margin-bottom:9px}
.scanbar-n{font-weight:800;font-family:var(--mono,monospace);color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-radius:6px;padding:1px 7px}
.scanbar-n.ok{color:var(--pos);background:color-mix(in srgb,var(--pos) 16%,transparent)}
.lchk{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--rule2);background:transparent;color:var(--txt3);font-weight:900;font-size:12px;cursor:pointer;display:grid;place-items:center;line-height:1;transition:.12s}
.lchk:hover{border-color:var(--a-load);color:var(--a-load)}
.lchk.on{background:var(--pos);border-color:var(--pos);color:#06121e}
tr.lrow-on td{background:color-mix(in srgb,var(--pos) 7%,transparent)}
.btn.primary[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
/* ===== Load/Unload spatial dock — drag pallets into truck cargo zones ===== */
.lstage{padding:12px;height:100%;display:flex;flex-direction:column;min-height:0}
.lstage-bar{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--txt2);margin-bottom:10px}
.lstage-cols{display:flex;gap:12px;flex:1;min-height:0}
.ltray{flex:0 0 210px;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:9px;background:var(--head);min-height:0}
.ltray-hd{font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--txt3);padding:9px 10px;border-bottom:1px solid var(--rule);text-transform:uppercase}
.ltray-body{flex:1;overflow:auto;padding:10px;align-content:flex-start}
.ltray.dragover,.lzone.dragover{outline:2px dashed var(--a-load);outline-offset:-3px;background:color-mix(in srgb,var(--a-load) 8%,transparent)}
.ltray-empty{font-size:10px;color:var(--txt3);padding:8px;width:100%}
.lz-pals{display:flex;flex-wrap:wrap;gap:5px}
.pallet{width:50px;height:40px;border-radius:4px;background:linear-gradient(160deg,color-mix(in srgb,var(--pc,#888) 34%,#1a242e),#10181f);border:1px solid color-mix(in srgb,var(--pc,#888) 45%,#2a3744);border-top:4px solid var(--pc,var(--a-load));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:grab;user-select:none;box-shadow:0 3px 6px -2px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.pallet::after{content:'';position:absolute}
.pallet:hover{border-color:var(--pc);transform:translateY(-1px)}
.pallet:active{cursor:grabbing}
.pallet.dragging{opacity:.4}
.pal-ab{font-size:9px;font-weight:800;color:#fff;letter-spacing:.02em}
.pal-bags{font-size:8px;color:var(--txt2);font-variant-numeric:tabular-nums}
/* realistic truck rig backing into a loading dock */
.ltruck{flex:1;display:flex;flex-direction:column;min-height:0;border:1px solid var(--rule);border-radius:9px;background:radial-gradient(120% 100% at 80% 0%,#0c1822,#060e16);overflow:hidden;position:relative}
.rig{flex:1;display:flex;flex-direction:column;min-height:0;padding:16px 16px 0 22px;position:relative;animation:rigIn .8s cubic-bezier(.2,.85,.25,1)}
@keyframes rigIn{from{transform:translateX(46px);opacity:.2}60%{transform:translateX(-5px)}to{transform:none;opacity:1}}
.rig-dockwall{position:absolute;left:0;top:8px;bottom:34px;width:12px;background:repeating-linear-gradient(180deg,#1c2a36 0 13px,#0e1822 13px 17px);border-right:3px solid #2c4150;border-radius:2px}
.rig-body{flex:1;display:flex;align-items:stretch;min-height:0}
.rig-cab{width:60px;flex:none;align-self:stretch;margin-top:18%;background:linear-gradient(180deg,color-mix(in srgb,var(--rc,#6aa) 60%,#1c2c3a),#0f1e29);border-radius:11px 5px 0 11px;position:relative;box-shadow:inset 0 2px 7px rgba(255,255,255,.1),0 4px 10px -4px #000}
.rig-win{position:absolute;top:12px;left:9px;right:9px;height:22px;background:linear-gradient(180deg,#cdeafa,#6c9fbb);border-radius:4px;opacity:.9}
.rig-mirror{position:absolute;top:30px;left:-6px;width:6px;height:12px;background:#23323e;border-radius:2px}
.rig-box{flex:1;min-width:0;align-self:stretch;border:2px solid #38505f;border-left:1px solid #38505f;border-radius:0 9px 9px 0;background:repeating-linear-gradient(90deg,#13212c 0 9px,#172631 9px 11px);padding:9px;position:relative;box-shadow:inset 0 0 18px rgba(0,0,0,.5)}
.rig-doorlbl{position:absolute;left:0;right:8px;top:-13px;text-align:right;font-size:8px;color:var(--txt3);font-weight:800;letter-spacing:.08em}
.rig .lbed{height:100%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr;gap:7px}
.rig-axle{height:34px;display:flex;gap:8px;justify-content:flex-end;align-items:flex-start;padding:3px 64px 0 0}
.rig-wheel{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#39434e 0 34%,#0e151c 36%);border:3px solid #1b2630;box-shadow:0 3px 5px -2px #000}
.lzone{border:1.5px dashed #3a5161;border-radius:7px;padding:6px 7px;display:flex;flex-direction:column;gap:5px;min-height:0;background:rgba(8,16,24,.4);overflow:auto}
.lzone.dragover{outline:2px solid var(--a-load);outline-offset:-2px;background:color-mix(in srgb,var(--a-load) 12%,transparent)}
.lz-lbl{font-size:7.5px;font-weight:800;letter-spacing:.1em;color:#7d93a4;text-transform:uppercase}
.loaded-truck.dock-out{animation:dockOut 1.1s cubic-bezier(.4,0,.2,1)}
@keyframes dockOut{0%{transform:none}45%{transform:translateX(0) scale(1.03)}100%{transform:translateX(-12%) scale(.98);opacity:.9}}

/* ===== Loading screen: date-nav driven (load today/future · unload past) ===== */
.loadwrap{display:flex;flex-direction:column;height:100%;gap:10px}
.loaddatebar{position:static;transform:none;top:auto;left:auto;right:auto;bottom:auto;align-self:center;z-index:1}