/* ============================================================
   ELD Tracker — Truck Hub DISPATCH TERMINAL tokens + shared chrome.
   Tokens mirror truckhub-standalone public/css/app.css (canonical there).
   Skins switch via <html data-theme="hazard|dark|midnight|crt|amber|light">.
   ============================================================ */
:root {
  --bg:#0b0d0e; --surface:#101315; --surface-2:#14181b; --surface-3:#191e22;
  --text:#e7e9ea; --text-2:#9aa3a9; --text-3:#5b656c;
  --accent:#f5f5f4; --accent-2:#ffffff;
  --spark:#ff5b1e;
  --success:#4ade80; --warning:#f7b955; --danger:#ff4d4d; --info:#c891f5;
  --pu:#7dd3fc; --del:#c891f5; --risk:#ff8a3d;
  --tint-rgb:255,255,255;
  --line:rgba(var(--tint-rgb),0.07); --line-2:rgba(var(--tint-rgb),0.13);
  --pop-bg:#f5f5f4; --pop-fg:#0b0d0e;
  --radius:0; --shadow-sm:none; --shadow-md:none;
  /* map tiles are OSM's light raster — dark skins invert them into the ledger */
  --tile-filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.25);
  color-scheme:dark;
}
:root[data-theme="midnight"] {
  --bg:#04070e; --surface:#0a101c; --surface-2:#0e1524; --surface-3:#131c30;
  --text:#dce5f3; --text-2:#92a3c0; --text-3:#526182;
  --accent:#eaf1ff; --accent-2:#ffffff; --spark:#4da3ff;
  --tint-rgb:170,195,255; --pop-bg:#eaf1ff; --pop-fg:#04070e;
  --tile-filter:invert(1) hue-rotate(200deg) brightness(.78) contrast(.95) saturate(.45);
}
:root[data-theme="crt"] {
  --bg:#020604; --surface:#061109; --surface-2:#08160d; --surface-3:#0b1e12;
  --text:#c2f5cd; --text-2:#79c98d; --text-3:#41805a;
  --accent:#e8ffee; --accent-2:#ffffff; --spark:#3dff6e;
  --tint-rgb:120,255,160; --pop-bg:#c2f5cd; --pop-fg:#020604;
  --tile-filter:invert(1) grayscale(1) brightness(.7) sepia(1) hue-rotate(75deg) saturate(2.2) contrast(.95);
}
:root[data-theme="amber"] {
  --bg:#0a0500; --surface:#150d03; --surface-2:#1b1105; --surface-3:#231708;
  --text:#ffd9a0; --text-2:#c79e62; --text-3:#7d6136;
  --accent:#ffedd2; --accent-2:#fff7ea; --spark:#ffa62b;
  --tint-rgb:255,200,130; --pop-bg:#ffd9a0; --pop-fg:#0a0500;
  --tile-filter:invert(1) grayscale(1) brightness(.72) sepia(1) hue-rotate(-12deg) saturate(1.6) contrast(.95);
}
:root[data-theme="hazard"] {
  --bg:#0c0c0b; --surface:#141412; --surface-2:#1a1a17; --surface-3:#201f1b;
  --text:#f4f2ea; --text-2:#a6a399; --text-3:#5f5d55;
  --accent:#ffd400; --accent-2:#ffe14d; --spark:#ff3d00;
  --tint-rgb:244,242,234; --pop-bg:#ffd400; --pop-fg:#0c0c0b;
}
:root[data-theme="light"] {
  --bg:#f6f1e6; --surface:#fbf8f0; --surface-2:#efe9da; --surface-3:#e9e2cf;
  --text:#1c1710; --text-2:#57503e; --text-3:#968c74;
  --accent:#1c1710; --accent-2:#000000; --spark:#b03a12;
  --success:#1e6b3a; --warning:#8a6d00; --danger:#9e1b1b; --info:#5b3d8e;
  --pu:#0f6a80; --del:#5b3d8e; --risk:#b45309;
  --tint-rgb:28,23,16; --pop-bg:#1c1710; --pop-fg:#fbf8f0;
  --tile-filter:sepia(.35) saturate(.7) contrast(.95);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html,body{background:var(--bg);color:var(--text)}
body{font:400 13px/1.45 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
button,input,select{font-family:inherit}
:focus-visible{outline:1px solid var(--spark);outline-offset:1px}

/* scanlines + vignette — dark-skin atmosphere only */
.scan{position:fixed;inset:0;pointer-events:none;z-index:2000;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 100%)}
[data-theme="light"] .scan{display:none}

/* ── brand ─────────────────────────────────────────────────────────── */
.brand{font-weight:800;font-size:13px;letter-spacing:.06em;white-space:nowrap;color:var(--text)}
.brand .zap{color:var(--spark);margin:0 1px}
.brand .sub{margin-left:9px;font-size:10px;font-weight:700;letter-spacing:.24em;color:var(--text-3)}

/* ── term-top chrome ───────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:14px;
  padding:0 16px;height:52px;background:var(--bg);border-bottom:1px solid var(--line-2)}
.top .clock{font-variant-numeric:tabular-nums;font-size:12px;color:var(--text-2);white-space:nowrap}
.top select{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);
  font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 9px;cursor:pointer;outline:none}
.top select:focus{border-color:var(--accent)}
.top form{display:contents}
.navlink{font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  border:1px solid var(--line);padding:8px 12px;background:none;cursor:pointer;white-space:nowrap;
  transition:color .14s,border-color .14s,background .14s}
.navlink:hover{background:var(--pop-bg);color:var(--pop-fg);border-color:var(--pop-bg)}

/* signed-in chip: address + role */
.me{display:flex;align-items:center;gap:7px;min-width:0;font-size:10.5px;color:var(--text-3);white-space:nowrap}
.me .who{max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.me .role{font-size:9px;font-weight:800;letter-spacing:.14em;border:1px solid var(--text-3);padding:1px 5px;color:var(--text-3)}
.me .role.r-admin{border-color:var(--pu);color:var(--pu)}
.me .role.r-superadmin{border-color:var(--spark);color:var(--spark)}
@media (max-width:1180px){ .me .who{display:none} }

/* ── buttons / chips / inputs ──────────────────────────────────────── */
.btn{font:700 10.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px;cursor:pointer;border:1px solid var(--line-2);background:none;color:var(--text-2);
  transition:background .14s,color .14s,border-color .14s;white-space:nowrap}
.btn:hover{color:var(--text);border-color:var(--text-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--pop-bg);color:var(--pop-fg);border-color:var(--pop-bg)}
.btn.primary:hover{background:var(--spark);border-color:var(--spark);color:#fff}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:var(--danger);color:var(--bg)}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--text-3);color:var(--text-3);padding:2px 8px;white-space:nowrap;background:transparent}
.chip.ok{border-color:var(--success);color:var(--success)}
.chip.bad{border-color:var(--danger);color:var(--danger)}
.chip.warn{border-color:var(--warning);color:var(--warning)}
.chip.spark{border-color:var(--spark);color:var(--spark)}
input[type=text],input[type=password],input[type=search]{width:100%;background:var(--surface-2);color:var(--text);
  border:1px solid var(--line-2);padding:10px 12px;font:400 13px 'JetBrains Mono',monospace;outline:none;
  transition:border-color .14s}
input:focus{border-color:var(--accent)}
input:focus-visible,select:focus-visible{outline:none}
input::placeholder{color:var(--text-3)}
kbd{font:700 9.5px 'JetBrains Mono',monospace;border:1px solid var(--line-2);padding:0 4px;color:var(--text-3)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}