/* RoadCoda — shared look and feel.
   Load this AFTER each page's own <style> block: it redefines the tokens the
   pages already use, so every existing rule re-colours itself, and it restyles
   the shared furniture (header, buttons, cards, tables) into the new console.
   Page-specific rules that this file does not name keep working as they are.

   shell.js stamps the theme on <html data-rc-theme>: Auto (the default)
   follows the device, or the user's Light / Dark pick.                     */

:root,
html[data-rc-theme="dark"]{
  /* tokens the existing pages already reference */
  --ground:#070c14;
  --surface:#0e1823;
  --ink:#e8eff6;
  --muted:#9fb2c2;
  --line:#21323f;
  --accent:#a274ee;
  --late:#f4685f;
  --ok:#3fbf87;
  --ok-bg:rgba(63,191,135,.14);
  --info:#7fb2e8;   --info-bg:rgba(127,178,232,.14);
  --risk:#e9a23b;   --risk-bg:rgba(233,162,59,.14);

  /* new tokens */
  --panel-2:#13202d;
  --raise:#1a2938;
  --raise-hi:#243648;
  --line-soft:#182634;
  --ink-3:#6a8093;
  --accent-hi:#d9bcff;
  --accent-deep:#2f1a63;
  --brand:#a274ee;          /* identity violet */
  --rim:#a274ee;            /* the mark's outline */
  --hexfill:#0a0a0a;
  --glyph:#b8b8bc;
  --row-hover:rgba(162,116,238,.09);
  --row-line:#182634;
  --well:#13202d;
  --lift:0 1px 0 rgba(255,255,255,.055) inset, 0 -1px 0 rgba(0,0,0,.45) inset, 0 2px 4px rgba(0,0,0,.5);
  --press:0 2px 5px rgba(0,0,0,.55) inset, 0 -1px 0 rgba(255,255,255,.05) inset;
  --card-sh:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 22px rgba(0,0,0,.42);
  --rail:232px;
  --ui:Archivo,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}

html[data-rc-theme="light"]{
  --ground:#e9edf4;
  --surface:#ffffff;
  --ink:#121a26;
  --muted:#53627a;
  --line:#d7dfea;
  --accent:#6d3fc4;
  --late:#c6362c;
  --ok:#157a4b;     --ok-bg:#e3f1e6;
  --info:#1d4e89;   --info-bg:#e3edf6;
  --risk:#9a6208;   --risk-bg:#fbeed8;

  --panel-2:#f4f7fb;
  --raise:#ffffff;
  --raise-hi:#f0f3f9;
  --line-soft:#e6ebf3;
  --ink-3:#7d8ca3;
  --accent-hi:#8b5fd6;
  --accent-deep:#ece2ff;
  --brand:#4c2a91;          /* deep — 10.3:1 on white, holds on a printed page */
  --rim:#4c2a91;
  --hexfill:#0a0a0a;
  --glyph:#f2f2f4;
  --row-hover:rgba(109,63,196,.07);
  --row-line:#e6ebf3;
  --well:#f4f7fb;
  --lift:0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(18,26,38,.07) inset, 0 1px 2px rgba(18,26,38,.12);
  --press:0 2px 4px rgba(18,26,38,.16) inset;
  --card-sh:0 1px 2px rgba(18,26,38,.07), 0 10px 24px rgba(18,26,38,.07);
}
/* shell.js stamps data-rc-theme on every page: Auto (the default) follows the
   device's light / dark setting live; Light or Dark, once picked, sticks. */

body{background:var(--ground);color:var(--ink);font-size:14px}

/* ── The header becomes a sidebar ─────────────────────────────────────
   Same markup the pages already ship; only the layout changes, so
   access.js keeps finding the links exactly where it expects them.      */
body{padding-left:var(--rail);transition:padding-left .16s ease}
html.rc-rail-in body{--rail:62px}

header{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;
  background:var(--surface);color:var(--ink);
  border-right:1px solid var(--line);border-bottom:0;
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  /* The old top-bar rule set flex-wrap:wrap. In a fixed-height column that
     wraps overflowing items into a SECOND column, which spills over the page.
     The rail scrolls instead. */
  flex-wrap:nowrap;
  padding:14px 12px 14px;overflow:hidden;
  transition:width .16s ease;
}
header .brand{
  flex:none;
  display:flex;align-items:center;gap:9px;padding:2px 4px 14px;min-height:34px;
  font-family:var(--ui);font-weight:700;font-size:17px;letter-spacing:-.3px;color:var(--ink);white-space:nowrap;
}
header .brand span{color:var(--brand)}
.rc-mark{width:28px;height:28px;flex:none;display:grid;place-items:center}
.rc-mark svg{display:block;width:100%;height:100%;overflow:visible}

/* Only the menu scrolls. Collapse and Dark/Light are controls you reach for,
   so they stay pinned to the bottom instead of sliding below the fold. */
header nav{
  display:flex!important;flex-direction:column;gap:2px!important;align-items:stretch;font-size:14px;
  flex-wrap:nowrap!important;          /* belt and braces if an inline style survives */
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;
}
/* In a height-constrained flex column every child shrinks by default, which
   squashed the menu to hairlines. They keep their height; the nav scrolls. */
header nav > *, .rc-sub > *{flex:none}
header nav a{
  display:flex;align-items:center;gap:10px;overflow:hidden;flex:none;
  padding:0 11px;height:36px;border-radius:9px;
  font-family:var(--ui);font-size:13.5px;font-weight:500;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,var(--raise),var(--panel-2));
  border:1px solid var(--line);box-shadow:var(--lift);
  transition:transform .09s ease,box-shadow .12s ease,color .12s ease,background .12s ease;
}
header nav a:hover{background:linear-gradient(180deg,var(--raise-hi),var(--raise));color:var(--ink);transform:translateY(-1px)}
header nav a:active{transform:translateY(1px);box-shadow:var(--press)}
header nav a.on{
  color:var(--ink);
  background:linear-gradient(180deg,var(--accent) -35%,var(--accent-deep) 62%,var(--panel-2));
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -1px 0 rgba(0,0,0,.4) inset;
}
header nav a .rc-ic{width:17px;flex:none;text-align:center;color:var(--accent-hi);font-size:13px;line-height:1}
header nav a.on .rc-ic{color:#fff}

.rc-sec{
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:15px 8px 6px;
}
.rc-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 0 12px;padding-left:10px;border-left:1px solid var(--line-soft)}
.rc-sub a{height:31px;font-size:13px;background:none!important;border-color:transparent!important;box-shadow:none!important}
.rc-sub a:hover{background:var(--panel-2)!important;border-color:var(--line)!important;box-shadow:var(--lift)!important}
.rc-sub a.on{background:linear-gradient(180deg,var(--accent-deep),var(--panel-2))!important;
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line))!important;box-shadow:var(--lift)!important}

header .who{margin-left:0;font-size:12px;color:var(--ink-3);padding:4px 6px;line-height:1.45;white-space:normal}
.rc-foot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:6px}
.rc-railbtn{
  display:flex;align-items:center;gap:10px;height:34px;padding:0 11px;border-radius:9px;
  font-family:var(--ui);font-size:13px;font-weight:500;color:var(--muted);
  background:linear-gradient(180deg,var(--raise),var(--panel-2));
  border:1px solid var(--line);box-shadow:var(--lift);cursor:pointer;text-align:left;
}
.rc-railbtn:hover{color:var(--ink);background:linear-gradient(180deg,var(--raise-hi),var(--raise))}
header #signout{width:100%}
/* Links that end up in the foot (Driver app, My account) are buttons too —
   they sit outside <nav>, so the nav rules above don't reach them. */
.rc-foot a{
  display:flex;align-items:center;gap:10px;height:34px;padding:0 11px;border-radius:9px;
  font-family:var(--ui);font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,var(--raise),var(--panel-2));
  border:1px solid var(--line);box-shadow:var(--lift);
  transition:transform .09s ease,box-shadow .12s ease,color .12s ease,background .12s ease;
}
.rc-foot a:hover{color:var(--ink);background:linear-gradient(180deg,var(--raise-hi),var(--raise));transform:translateY(-1px)}
.rc-foot a:active{transform:translateY(1px);box-shadow:var(--press)}
.rc-foot a .rc-ic{width:17px;flex:none;text-align:center;color:var(--accent-hi);font-size:13px;line-height:1}
html.rc-rail-in .rc-foot a{justify-content:center;padding:0}
/* who-am-I sits just above the controls, quietly */
header .who{flex:none;padding-top:12px;border-top:1px solid var(--line-soft)}
.rc-foot{flex:none;margin-top:0;padding-top:10px}

/* collapsed rail */
html.rc-rail-in header nav a,
html.rc-rail-in .rc-foot a{justify-content:center;padding:0;overflow:hidden}
html.rc-rail-in header{padding-left:8px;padding-right:8px}
html.rc-rail-in header .brand{justify-content:center;padding-left:0;padding-right:0}
html.rc-rail-in header .brand b,          /* the wordmark; the mark is a span, leave it alone */
html.rc-rail-in header .who,
html.rc-rail-in .rc-sec,
html.rc-rail-in .rc-sub,
html.rc-rail-in .rc-lbl,
html.rc-rail-in #signout{display:none}
html.rc-rail-in .rc-railbtn{justify-content:center;padding:0}

/* ── Content ──────────────────────────────────────────────────────── */
main{max-width:none;padding:20px 22px 40px;gap:16px}
h1{font-family:var(--ui);font-size:22px;font-weight:600;letter-spacing:-.2px}
h2{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--muted)}
main a{color:var(--accent-hi)}
html[data-rc-theme="light"] main a{color:var(--accent)}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--card-sh);padding:16px 18px;
}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--card-sh);color:var(--ink)}
.kpi b{font-family:var(--mono);font-weight:600;font-size:27px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi span{color:var(--ink-3)}
.kpi small{color:var(--muted)}
.kpi.warn b{color:var(--late)}

/* buttons keep their depth */
.btn{
  height:34px;padding:0 14px;border-radius:8px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--raise),var(--panel-2));
  color:var(--ink);font-family:var(--ui);font-size:13px;font-weight:500;
  box-shadow:var(--lift);
  transition:transform .09s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{background:linear-gradient(180deg,var(--raise-hi),var(--raise));transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:var(--press)}
.btn.primary{
  color:#fff;border-color:color-mix(in srgb,var(--accent) 60%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff) -10%,var(--accent) 45%,color-mix(in srgb,var(--accent) 70%,#000) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 -1px 0 rgba(0,0,0,.3) inset;
}
.btn.danger{color:var(--late)}
.btn.small{height:28px;padding:0 11px;font-size:12px;border-radius:7px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* form controls */
label{color:var(--muted);font-size:12.5px}
input,select,textarea{
  height:34px;border:1px solid var(--line);border-radius:8px;padding:0 10px;
  font-size:14px;font-family:inherit;color:var(--ink);background:var(--panel-2);
}
textarea{height:auto;padding:8px 10px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--surface)}
input[type=checkbox],input[type=radio]{height:auto;accent-color:var(--accent)}

/* tables — denser, and the numbers line up */
table{min-width:680px}
th{
  font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:7px 8px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
td{padding:6px 8px;border-bottom:1px solid var(--row-line);vertical-align:middle}
tr.click:hover{background:var(--row-hover)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.pill{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 9px}
.s-delivered{background:var(--accent-deep);color:var(--accent-hi)}
html[data-rc-theme="light"] .s-delivered{color:var(--accent)}
.s-cancelled{background:rgba(244,104,95,.16);color:var(--late)}

/* everything the pages hardcoded to a light colour */
.note{background:var(--well);color:var(--muted)}
.att li,.detail-stop{border-bottom-color:var(--row-line)}
.bar{background:var(--panel-2)}
.bar i{background:var(--accent)}
.thumbs img{background:var(--panel-2);border-color:var(--line)}
.stop{border-color:var(--line);background:var(--panel-2);border-radius:10px}
.s-hint{color:var(--ink-3)}
.s-hint.new{color:var(--risk)}
.tag-new{background:var(--risk-bg);color:var(--risk)}
.tag-old{background:var(--ok-bg);color:var(--ok)}
.dot{background:var(--risk)}
.dot.red{background:var(--late)}
.dot.blue{background:var(--info)}
.error{color:var(--late)}
.ok{color:var(--ok)}

/* access.js's notices, in the new language */
.rc-note div{background:var(--risk-bg)!important;border-color:color-mix(in srgb,var(--risk) 45%,var(--line))!important;color:var(--ink)!important}
.rc-forgot{color:var(--accent-hi)!important}

.login{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--card-sh);padding:20px;margin-top:48px}

/* ── Narrow screens: a slim top bar; the menu folds behind ☰ ───────── */
.rc-menubtn{display:none}
@media (max-width:900px){
  body{padding-left:0!important}
  body > header{position:sticky!important;top:0;z-index:40;width:auto!important;height:auto!important;flex-direction:row!important;flex-wrap:wrap!important;
         align-items:center;gap:8px;border-right:0!important;border-bottom:1px solid var(--line);
         padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px!important;overflow:visible!important}
  .rc-menubtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);
              background:var(--raise);color:var(--ink);font-family:var(--ui);font-weight:600;font-size:15px;order:0}
  body > header .brand{order:1;margin:0 0 0 auto!important;padding:0!important}
  body > header .brand b{display:none}
  /* the menu, the who-am-I line and the footer controls only when ☰ is open */
  body > header nav, body > header .who, body > header .rc-foot{display:none!important}
  html.rc-menu-open body > header nav{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;order:2;width:100%;
         max-height:calc(100vh - 70px);overflow:auto;gap:2px;padding:8px 0}
  html.rc-menu-open body > header .who{display:block!important;order:3;width:100%;font-size:13px;padding:4px 2px}
  html.rc-menu-open body > header .rc-foot{display:flex!important;order:4;width:100%;flex-direction:row!important;flex-wrap:wrap;gap:6px;padding:4px 0 6px}
  body > header nav a{height:44px!important;font-size:15px}
  .rc-sec{display:block}
  .rc-sub{margin:0 0 4px 10px}
  html.rc-rail-in body > header nav a .rc-lbl{display:inline!important}
  main{padding:12px 10px 32px!important}
  /* wide tables scroll sideways inside their card instead of pushing the page */
  main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  main table table{display:table}
  .tablewrap,.wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 16px stops phones zooming in on every box you tap; bigger targets for thumbs */
  input,select,textarea{font-size:16px!important}
  .btn{min-height:40px}
  .btn.small{min-height:36px}
  h1{font-size:20px}
  .card > body > header{padding:10px 12px!important}
  .modal .box{width:calc(100vw - 20px)!important;max-width:none!important;max-height:calc(100vh - 20px);overflow:auto}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){ html.rc-menu-open body > header nav{animation:rc-drop .14s ease-out} }
@keyframes rc-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}

/* ── Status fills the pages hardcoded to pale colours ────────────────
   Generated from the pages' own stylesheets and grouped by what each
   colour meant. Keeping the meaning, swapping the paper for glass.
   QR codes are deliberately left white so they still scan.        */
/* late / error */
.alert.over,
.b-exception,
.banner.over,
.p-acc,
.p-bad,
.p-error,
.p-late,
.p-miss,
.s-cancelled,
.st-disputed,
.st-issue {
  background:color-mix(in srgb, var(--late) 15%, transparent);
  border-color:var(--line);
}
/* warning */
.alert,
.banner,
.edit.need input,
.ios-first,
.p-warn,
.st-unmatched,
.tag-new {
  background:color-mix(in srgb, var(--risk) 15%, transparent);
  border-color:var(--line);
}
/* good */
.b-arrived,
.chip.e,
.current,
.p-connected,
.p-ok,
.st-matched,
.tag-old {
  background:color-mix(in srgb, var(--ok) 15%, transparent);
  border-color:var(--line);
}
/* information */
.b-pending,
.p-pu,
.tag-pu {
  background:color-mix(in srgb, var(--info) 18%, transparent);
  border-color:var(--line);
}
/* quiet panels and wells */
#dl-edit,
#list tr:hover,
.access,
.b-delivered,
.bar,
.chip,
.cpi,
.instr summary,
.issue,
.keybox,
.kpi,
.loginbox,
.note,
.p-done,
.p-none,
.s-delivered,
.st-non_billable,
.st-paid,
.stop.pu,
.thumbs img,
tr.click:hover,
tr.click:hover td,
tr.sel {
  background:var(--panel-2);
  border-color:var(--line);
}
/* plain white surfaces */
.codelist,
.modal .box,
.seg button,
.x,
fieldset.acc,
input,select,
input,select,textarea {
  background:var(--surface);
}

/* tokens some pages declare for themselves and app.css did not cover */
:root, html[data-rc-theme="dark"]{ --late-bg:color-mix(in srgb,#f4685f 14%,transparent); --late-line:color-mix(in srgb,#f4685f 42%,#21323f); --warn:#e9a23b; }
html[data-rc-theme="light"]{ --late-bg:#fdf1ef; --late-line:#f0c9c2; --warn:#9a6208; }
/* pale text colours that were chosen for a light card */
.banner, .alert, .issue{ color:var(--ink); }

/* ── Dispatch: the one-line summary for issues that can wait ───────── */
.rc-later{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:8px 12px;margin-bottom:10px;border-radius:9px;font-size:13px;
  border:1px solid color-mix(in srgb,var(--risk) 40%,var(--line));
  background:color-mix(in srgb,var(--risk) 10%,transparent);
}
.rc-later b{font-family:var(--ui);font-weight:600;color:var(--risk)}
.rc-later .muted{color:var(--ink-3)}
.rc-later .rc-more{margin-left:auto}
#later-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
#later-list .banner{margin-bottom:0;cursor:pointer}
/* these already happened — amber, not the red reserved for a truck in trouble */
.banner.soft{
  border-color:color-mix(in srgb,var(--risk) 35%,var(--line));
  background:color-mix(in srgb,var(--risk) 9%,transparent);
}


/* ── Headings inside cards are not the sidebar ─────────────────────────
   The sidebar rules above style <header>; a card's own <header> must stay a
   plain row, on every screen size. */
main header, .card > header, section > header{
  position:static!important;width:auto!important;height:auto!important;min-height:0!important;
  flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;
  border-right:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;z-index:auto!important;
  inset:auto!important;text-align:left!important;
}

/* 93: the browser's little calendar icon is nearly invisible on dark; lift it (and make the whole box clickable) */
input[type="date"], input[type="month"], input[type="datetime-local"], input[type="time"] { cursor: pointer; }
html[data-rc-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-rc-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-rc-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-rc-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  opacity: .85;
  cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
