:root{
  --bg:#E9ECEF; --panel:#FFFFFF; --ink:#18212C; --muted:#5B6673; --line:#D3D8DE;
  --road:#2A3441; --amber:#E8A317; --amberInk:#3A2800; --blue:#1F5FA8; --sea:#3A86C8;
  --ok:#2E7D4F; --red:#B3261E; --field:#F5F7F9;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12171E; --panel:#1B222C; --ink:#E6EAEF; --muted:#9AA5B1; --line:#2E3845;
  --road:#0C1015; --field:#232B36; --blue:#6EA6E6; --sea:#5FA3E0; --ok:#5FBF86; --red:#F08A82;
}}
:root[data-theme="dark"]{
  --bg:#12171E; --panel:#1B222C; --ink:#E6EAEF; --muted:#9AA5B1; --line:#2E3845;
  --road:#0C1015; --field:#232B36; --blue:#6EA6E6; --sea:#5FA3E0; --ok:#5FBF86; --red:#F08A82;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 Barlow,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;margin:0;line-height:1.1}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--road);color:#fff}
.bar{max-width:980px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand h1{font-size:22px;letter-spacing:.3px}
.plate{display:inline-flex;border:2px solid #fff;border-radius:4px;overflow:hidden;font:700 13px/1 "Barlow Condensed",sans-serif}
.plate span{padding:4px 6px}
.plate .it{background:#fff;color:#18212C}
.plate .al{background:var(--amber);color:var(--amberInk)}
.roles{display:flex;background:#ffffff1a;border-radius:8px;padding:3px}
.roles button{border:0;background:none;color:#fff;padding:7px 14px;border-radius:6px;font-weight:600}
.roles button[aria-pressed="true"]{background:var(--amber);color:var(--amberInk)}
.tabs{max-width:980px;margin:0 auto;padding:0 8px;display:flex;gap:2px;overflow-x:auto}
.tabs button{border:0;background:none;color:#C7D0DA;padding:10px 12px;font-weight:600;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-current="page"]{color:#fff;border-color:var(--amber)}

main{max-width:980px;margin:0 auto;padding:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1 1 200px}
.muted{color:var(--muted)}
.small{font-size:14px}
label{display:block;font-weight:600;font-size:14px;margin:12px 0 4px}
input,select,textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
textarea{min-height:60px;resize:vertical}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:10px 14px;font-weight:600}
.btn.primary{background:var(--amber);border-color:var(--amber);color:var(--amberInk)}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.ghost{background:none}
.btn.danger{color:var(--red)}
.btn.block{width:100%;display:block;text-align:center}
.btn:disabled{opacity:.5;cursor:not-allowed}
a.btn{text-decoration:none;display:inline-block;color:inherit}
a.btn.blue{color:#fff}

.trip{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px}
.trip h3{font-size:20px}
.status{display:inline-block;font-size:13px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--field);border:1px solid var(--line)}
.status.s4{color:var(--ok);border-color:currentColor}
.status.s1,.status.s2,.status.s3{color:var(--blue);border-color:currentColor}

/* The route: a road with lettered sign markers, the sea crossing drawn dashed */
.route{list-style:none;margin:8px 0 0;padding:0}
.stop{position:relative;padding:0 0 18px 52px;min-height:44px}
.stop::before{content:"";position:absolute;left:17px;top:34px;bottom:-2px;width:6px;background:var(--road);border-radius:3px}
:root[data-theme="dark"] .stop::before{background:#4A5666}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stop::before{background:#4A5666}}
.stop:last-child::before{display:none}
.stop.sea::before{background:repeating-linear-gradient(to bottom,var(--sea) 0 8px,transparent 8px 14px)}
.mark{position:absolute;left:0;top:0;width:40px;height:34px;border-radius:6px;display:grid;place-items:center;
  font:700 20px/1 "Barlow Condensed",sans-serif;background:var(--blue);color:#fff;border:2px solid var(--panel);box-shadow:0 0 0 2px var(--blue)}
.stop.unload .mark{background:var(--amber);color:var(--amberInk);box-shadow:0 0 0 2px var(--amber)}
.stop.port .mark{background:var(--sea);box-shadow:0 0 0 2px var(--sea);font-size:18px}
.stop.done .mark{background:var(--ok);box-shadow:0 0 0 2px var(--ok);color:#fff}
.stop .kind{font-size:13px;font-weight:600;color:var(--muted)}
.stop .addr{font-weight:600}
.stop.done .addr{text-decoration:line-through;color:var(--muted)}
.stop .acts{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.stop .acts .btn{padding:6px 10px;font-size:14px}

.stopEdit{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:start;margin-bottom:8px}
.stopEdit .mark{position:static;width:34px;height:40px;font-size:18px;box-shadow:none;border:0}
.stopEdit.unload .mark{background:var(--amber);color:var(--amberInk)}
.stopEdit input{margin-bottom:4px}
.stopActs{display:flex;flex-direction:column;gap:4px}
.stopActs .btn{padding:4px 10px;font-size:14px}
.doneTag{font-size:13px;font-weight:600;color:var(--ok)}
.secHead{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.secHead h3{font-size:18px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--field);border-radius:999px;padding:8px 12px;font-weight:600}
.chip[aria-pressed="true"]{background:var(--road);color:#fff;border-color:var(--road)}
:root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--amber);color:var(--amberInk)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip[aria-pressed="true"]{background:var(--amber);color:var(--amberInk);border-color:var(--amber)}}

.tableWrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:13px;color:var(--muted);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.total{font:700 30px/1 "Barlow Condensed",sans-serif}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--field);border-radius:8px;padding:12px}
.empty{text-align:center;padding:28px 16px}
.note{border-left:4px solid var(--amber);padding:8px 12px;background:var(--field);border-radius:0 8px 8px 0;font-size:14px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--road);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;z-index:20}
.next{background:var(--road);color:#fff;border-radius:10px;padding:16px;margin:14px 0}
.next .small{color:#C7D0DA}
.nextAddr{font:700 26px/1.15 "Barlow Condensed","Arial Narrow",sans-serif;margin:4px 0 12px}
.sub{font:700 18px/1.2 "Barlow Condensed","Arial Narrow",sans-serif;margin:20px 0 6px}
.bal{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));margin-top:10px}
.kpi.neg b,td.neg{color:var(--red)}
.kpi.pos b{color:var(--ok)}
tr.tot td{font-weight:700;border-top:2px solid var(--ink)}
.linkBtn{border:0;background:none;padding:0;color:var(--blue);font-weight:600;text-decoration:underline}
details summary{list-style:none;display:inline-block;margin-top:8px}
details summary::-webkit-details-marker{display:none}
.badge{display:inline-block;background:var(--red);color:#fff;border-radius:999px;padding:1px 8px;font-size:13px;font-weight:600;margin-left:6px;vertical-align:middle}
.chatLog{max-height:380px;overflow-y:auto;background:var(--field);border-radius:8px;padding:10px;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:85%;align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px 12px 12px 4px;padding:8px 12px;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--amber);color:var(--amberInk);border-color:var(--amber);border-radius:12px 12px 4px 12px}
.msg .who{font-size:12px;font-weight:600;opacity:.75;margin-bottom:2px}
.chatIn{display:flex;gap:8px;margin-top:10px;align-items:flex-end}
.chatIn textarea{min-height:46px;flex:1}
.back{border:0;background:none;color:var(--blue);font-weight:600;padding:0;margin-bottom:10px}
@media (prefers-reduced-motion:no-preference){.toast{animation:pop .2s ease-out}@keyframes pop{from{opacity:0;transform:translate(-50%,8px)}}}
.who{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600}
.who .btn{color:#fff;border-color:#ffffff55;padding:6px 12px}
.login{max-width:420px;margin:40px auto}
.pill{display:inline-block;font-size:13px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid currentColor}
.pill.on{color:var(--ok)}.pill.off{color:var(--muted)}
.liveMap{height:62vh;min-height:320px;border-radius:8px;margin-top:10px;background:var(--field);z-index:0}
.truckPin{background:var(--road);color:#fff;font:700 13px/1 Barlow,Arial,sans-serif;padding:6px 8px;border-radius:6px;white-space:nowrap;border:2px solid var(--amber);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.truckPin.stale{background:#7A8591;border-color:#C7D0DA}
.drvRow{padding:12px 0;border-bottom:1px solid var(--line)}
.drvRow:last-child{border-bottom:0}
.geo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-radius:10px;padding:12px 14px;margin-bottom:14px;font-weight:600}
.geo .small{font-weight:400;opacity:.85}
.geo.on{background:var(--ok);color:#fff}
.geo.off{background:var(--panel);border:2px dashed var(--amber)}
.printOnly{display:none}
@media print{
  :root,:root:not([data-theme="light"]):not([data-print]){--bg:#fff;--panel:#fff;--ink:#000;--muted:#444;--line:#999;--field:#fff;--ok:#1d5e37;--red:#a11;padding:0}
  header,.toast,.noprint,.btn,details,.chatIn,.chatLog,.back,.stop .acts{display:none!important}
  .printOnly{display:block;margin:4px 0 8px;font-size:12px}
  body{background:#fff;color:#000;font-size:12px}
  main{max-width:none;padding:0}
  .panel{border:0;padding:0;margin:0 0 14px;break-inside:avoid-page}
  .tableWrap{overflow:visible}
  th,td{white-space:normal;padding:4px 6px}
  .kpi{border:1px solid #999}
  .linkBtn{text-decoration:none;color:#000}
  a{color:#000;text-decoration:none}
}