/* Brutalist theme for Dispatch Desk.
   Loaded after app.css: overrides tokens and component shapes, keeps every screen's markup. */

html:root.dd-light{
  --bg:#ECEAE4; --surface:#F4F2EC; --surface-2:#E2DFD7; --ink:#0D0D0D; --muted:#4A4A4A; --line:rgba(13,13,13,.16);
  --edge:#0D0D0D; --panel-dark:#0D0D0D; --side:#0D0D0D; --lime:#D7F03B; --on-lime:#0D0D0D;
  --c-dash:#0D0D0D; --c-trips:#1F4FD1; --c-clients:#7A2FC4; --c-inv:#A85400; --c-fin:#0B7A54; --c-cal:#086F86; --c-fleet:#B42A62; --c-pay:#3F44AE;
  --ok:#0B7A54; --warn:#9A5F00; --bad:#C02626; --info:#1F4FD1; --neutral:#5C5C5C;
  --shadow:none;
  --f-display:"Anton",Impact,"Arial Narrow",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Archivo Narrow","Archivo",system-ui,sans-serif;
  --f-label:"Archivo Narrow","Archivo",system-ui,sans-serif;
  --f-brand:"Special Gothic Expanded One","Archivo",sans-serif;
  color-scheme:light}
html:root.dd-dark{
  --bg:#141414; --surface:#1A1A1A; --surface-2:#242424; --ink:#F4F2EC; --muted:#B5B2AA; --line:rgba(244,242,236,.16);
  --edge:#F4F2EC; --panel-dark:#000000; --side:#000000; --lime:#D7F03B; --on-lime:#0D0D0D;
  --c-dash:#F4F2EC; --c-trips:#7FA3FF; --c-clients:#C69BF5; --c-inv:#F2A541; --c-fin:#4FD39F; --c-cal:#4CC9E2; --c-fleet:#FF86B3; --c-pay:#9FA3FF;
  --ok:#4FD39F; --warn:#F2B441; --bad:#FF7272; --info:#7FA3FF; --neutral:#A3A09A;
  --shadow:none;
  --f-display:"Anton",Impact,"Arial Narrow",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Archivo Narrow","Archivo",system-ui,sans-serif;
  --f-label:"Archivo Narrow","Archivo",system-ui,sans-serif;
  --f-brand:"Special Gothic Expanded One","Archivo",sans-serif;
  color-scheme:dark}

/* Personal background choice (set by js/prefs.js) */
html:root[data-bg]{--bg:var(--bg-pick)}

body{background:var(--bg);font-family:var(--f-body)}
.num{font-family:var(--f-mono);font-weight:600;letter-spacing:.01em}

/* ---------- square corners everywhere ---------- */
.btn,.panel,.kpi,.seg,.seg button,.search input,.sheet,.chip,.pill,.banner,.toast,.nav a,.nav a .ic,.side-foot button,
.f input,.f select,.f textarea,.cal-cell,.cal-cell .cchip,.fcard,.avatar,.brand-logo,.brand-mark,.catbar .track,.catbar .fill,
.attn .bar,input,select,textarea,button{border-radius:0!important}

/* ---------- frame ---------- */
.app{border:2px solid var(--edge);margin:16px;min-height:calc(100% - 32px)}
@media (max-width:860px){.app{border:0;margin:0;min-height:100%}}

/* ---------- sidebar ---------- */
.side{background:var(--side);color:#F4F2EC;border-right:2px solid var(--edge);padding:22px 0 18px;gap:24px}
.brand{padding:0 20px}
.brand-logo{width:38px;height:38px}
.brand b{font-family:var(--f-brand);font-weight:400;font-size:16px;letter-spacing:.01em;text-transform:uppercase;color:#F4F2EC}
.brand small{color:#BDBAB2;font-family:var(--f-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav{gap:0}
.nav a{color:#F4F2EC;padding:0 20px;min-height:42px;font-family:var(--f-label);font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;gap:12px}
.nav a .ic{width:22px;height:22px;background:none;color:#F4F2EC}
.nav a .ic svg{width:16px;height:16px}
.nav a:hover{background:#1F1F1F;color:#FFFFFF}
.nav a[aria-current="page"]{background:var(--lime);color:var(--on-lime)}
.nav a[aria-current="page"] .ic{background:none;color:var(--on-lime)}
.nav a .count{font-family:var(--f-label);font-weight:700;font-size:11px;padding:2px 6px;border:1px solid #6A6A6A;color:#D8D5CC}
.nav a[aria-current="page"] .count{border-color:var(--on-lime);color:var(--on-lime)}
.side-foot{padding:0 12px;gap:4px}
.side-foot button{color:#D8D5CC;font-family:var(--f-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px;padding:9px 10px}
.side-foot button:hover{background:#1F1F1F;color:#FFFFFF}
.sync{color:#BDBAB2;padding:0 10px;font-family:var(--f-label);letter-spacing:.04em}
.sync i{border-radius:0}
.sync.on i{background:var(--lime)}
.langsw span.on{color:var(--lime)}

/* phone bottom bar */
@media (max-width:860px){
  .side{border-right:0;border-top:2px solid var(--edge);padding-top:4px}
  .nav a{padding:6px 2px;min-height:52px;font-size:10px;letter-spacing:.03em}
  .nav a[aria-current="page"]{background:var(--lime)}
}

/* ---------- headings ---------- */
.head h1{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(32px,4.2vw,48px);line-height:1}
.head h1 .sw{display:none}
.head p{color:var(--muted)}
.panel-h h2,th,.kpi .lbl,.daygrp,.cal-dow span,.f label,.legend,.cal-title{font-family:var(--f-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cal-title{font-family:var(--f-display);font-weight:400;letter-spacing:.01em}
.panel-h h2 .dot{border-radius:0;width:10px;height:10px}

/* ---------- buttons ---------- */
.btn{border:1.5px solid var(--edge);background:transparent;color:var(--ink);font-family:var(--f-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px;min-height:40px}
.btn:hover{border-color:var(--edge);background:var(--surface-2)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--lime)}
html:root.dd-dark .btn.primary{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.btn.primary:hover{filter:none;background:var(--ink);opacity:.9}
html:root.dd-dark .btn.primary:hover{background:var(--lime)}
.btn.ghost{border-color:transparent}
.btn.ghost:hover{border-color:var(--edge);background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.sm{min-height:32px;font-size:12px}

/* ---------- panels & tiles ---------- */
.panel{background:transparent;border:1.5px solid var(--edge)}
.panel-h{border-bottom:1.5px solid var(--edge)}
.kpis{gap:12px}
.kpi{background:transparent;border:1.5px solid var(--edge);position:relative}
a.kpi:hover{border-color:var(--edge);background:var(--surface-2)}
a.kpi::after{content:"↗";position:absolute;top:12px;right:14px;font-size:16px;line-height:1}
.kpi .lbl{color:var(--ink);padding-right:20px}
.kpi .lbl i{display:none}
.kpi .val{font-family:var(--f-display);font-weight:400;font-size:44px;letter-spacing:.01em;line-height:1}
.kpi .sub{font-family:var(--f-label);font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:12px}

/* dark panels: Needs attention + Drivers on duty */
.panel.dark-panel{background:var(--panel-dark);color:#F4F2EC;border-color:var(--edge)}
.panel.dark-panel .panel-h{border-bottom-color:rgba(244,242,236,.3)}
.panel.dark-panel .panel-h h2 .dot{background:var(--lime)}
.panel.dark-panel .btn{color:var(--lime);border-color:transparent}
.panel.dark-panel .btn:hover{border-color:var(--lime);background:transparent}
.panel.dark-panel .attn a{border-top-color:rgba(244,242,236,.16)}
.panel.dark-panel .attn a:hover{background:#1A1A1A}
.panel.dark-panel .attn .t span,.panel.dark-panel .muted,.panel.dark-panel .empty{color:#BDBAB2}
.panel.dark-panel .empty b{color:#F4F2EC}
.attn .bar{width:14px;height:14px;align-self:flex-start;margin-top:3px;border:1.5px solid currentColor;background:var(--c);flex:none}
.panel.dark-panel .attn .bar{border-color:#F4F2EC}
.duty{display:flex;flex-direction:column}
.duty-row{display:flex;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid rgba(244,242,236,.16)}
.duty-row:first-child{border-top:0}
.duty-ini{width:32px;height:32px;border:1.5px solid #F4F2EC;display:grid;place-items:center;font-family:var(--f-label);font-weight:700;font-size:12px;flex:none}
.duty-who{flex:1;min-width:0;display:flex;flex-direction:column}
.duty-who b{font-size:14px}
.duty-who span{font-size:12px;color:#BDBAB2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duty-n{padding:5px 9px;font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.04em;white-space:nowrap;background:var(--lime);color:var(--on-lime)}
.duty-n.idle{background:transparent;color:#F4F2EC;border:1.5px solid #F4F2EC}

/* ---------- lists, tables, tags ---------- */
.trip + .trip{border-top-color:var(--line)}
.trip:hover,tbody tr.click:hover{background:var(--surface-2)}
.trip .when{border-left-width:4px}
.trip .when b{font-family:var(--f-label);font-weight:700;font-size:15px}
.pill{font-family:var(--f-label);letter-spacing:.05em;text-transform:uppercase;font-size:11px;padding:4px 8px;background:transparent;border:1.5px solid var(--p);color:var(--p)}
.pill::before{border-radius:0;width:7px;height:7px}
.chip{border:1px solid var(--line);background:transparent;font-family:var(--f-label);letter-spacing:.03em}
th{color:var(--muted);border-bottom:1.5px solid var(--edge)}
td{border-bottom-color:var(--line)}
.avatar{border:1.5px solid var(--edge);background:transparent;color:var(--ink);font-family:var(--f-label)}

/* ---------- segmented controls & search ---------- */
.seg{background:transparent;border:1.5px solid var(--edge);padding:0;gap:0}
.seg button{font-family:var(--f-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px;color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.seg button .n{background:transparent;border:1px solid currentColor;color:inherit;border-radius:0}
.search input{border:1.5px solid var(--edge);background:transparent}

/* ---------- forms & sheets ---------- */
.f input,.f select,.f textarea{border:1.5px solid var(--edge)!important;background:var(--surface)!important}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--lime);outline-offset:0;box-shadow:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.sheet{border-left:2px solid var(--edge);background:var(--bg)}
.sheet-h{border-bottom:2px solid var(--edge)}
.sheet-h h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:24px}
.sheet-h .sw{border-radius:0;background:var(--lime)}
.sheet-f{border-top:2px solid var(--edge)}
.scrim{background:rgba(0,0,0,.55)}

/* ---------- calendar ---------- */
.cal-cell{border-color:var(--line)}
.cal-cell.today .dnum{background:var(--lime);color:var(--on-lime);border-radius:0}
.cal-cell.sel{outline:2px solid var(--edge);outline-offset:-2px}

/* ---------- banners, toasts, charts ---------- */
.banner{border:1.5px solid var(--edge);background:transparent;font-weight:500}
.banner.sample{background:transparent;border-style:dashed}
.toast{background:var(--ink);color:var(--bg);font-family:var(--f-label);letter-spacing:.04em;text-transform:uppercase}
.catbar .fill{background:var(--ink)}
html:root.dd-dark .catbar .fill{background:var(--lime)}

/* ---------- appearance controls (added by js/prefs.js) ---------- */
.prefs{display:flex;flex-direction:column;gap:8px;padding:6px 10px 2px}
.prefs .lbl{font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.06em;color:#BDBAB2;text-transform:uppercase}
.prefs .swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.prefs .swatches button{height:26px;cursor:pointer;border:2px solid #4A4A4A;padding:0}
.prefs .swatches button[aria-pressed="true"]{border-color:var(--lime)}
.who-me{display:flex;align-items:center;gap:10px;padding:8px 10px;color:#F4F2EC;font-size:13px}
.who-me b{display:block;font-family:var(--f-label);letter-spacing:.04em;text-transform:uppercase}
.who-me span{color:#BDBAB2;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:150px}
.who-me .ini{width:32px;height:32px;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;font-family:var(--f-label);font-weight:700;flex:none}

/* ---------- sign-in screen (js/auth.js) ---------- */
.auth{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:24px 16px;overflow:auto}
.auth-card{width:min(420px,100%);border:2px solid var(--edge);background:var(--surface);padding:28px 24px;display:flex;flex-direction:column;gap:18px;box-sizing:border-box}
.auth-brand{display:flex;align-items:center;gap:12px}
.auth-brand img{width:44px;height:44px;flex:none}
.auth-brand b{display:block;font-family:var(--f-brand);font-weight:400;font-size:18px;letter-spacing:.01em}
.auth-brand span{display:block;font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.auth h1{margin:6px 0 0;font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:40px;line-height:1;letter-spacing:.01em}
.auth-sub{margin:0;color:var(--muted);line-height:1.45}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-f{display:flex;flex-direction:column;gap:6px}
.auth-f span{font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.auth-f input{min-height:46px;padding:0 12px;border:1.5px solid var(--edge);background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
.auth-f input:focus{outline:2px solid var(--lime);outline-offset:0}
.auth-btn{min-height:48px;border:0;background:var(--ink);color:var(--lime);font-family:var(--f-label);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
html:root.dd-dark .auth-btn{background:var(--lime);color:var(--on-lime)}
.auth-btn[disabled]{opacity:.6;cursor:progress}
.auth-link{background:none;border:0;padding:6px 0;color:var(--ink);text-decoration:underline;cursor:pointer;font:inherit;font-size:14px;align-self:flex-start}
.auth-msg{margin:0;min-height:1em;color:var(--bad);font-weight:600;font-size:14px}
.auth-msg.ok{color:var(--ok)}
.auth-msg:empty{display:none}

/* ---------- fixes ---------- */
.langsw span.on{background:var(--lime)!important;color:var(--on-lime)!important}
@media (max-width:860px){
  .nav a{font-size:10px;letter-spacing:0;text-transform:none;padding:6px 0;gap:2px;font-weight:700}
  .nav a .ic{width:22px;height:22px}
}
/* phones: background picker, account and sign out at the bottom of the page */
.mobile-me{display:none}
@media (max-width:860px){
  .mobile-me{display:flex;flex-direction:column;gap:10px;max-width:1180px;margin:28px auto 0;padding:14px;background:var(--side);border:1.5px solid var(--edge)}
  .mobile-me .prefs{padding:0}
  .mobile-me .prefs .swatches button{height:36px}
  .mobile-me .who-me{padding:4px 0}
  .mobile-me > button{min-height:44px;background:transparent;border:1.5px solid #F4F2EC;color:#F4F2EC;font-family:var(--f-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
}