/* Shared look for every dispatcher page: colours, top navigation, page toolbar, buttons and inputs.
   Page-specific styles live in each page. */
:root {
  --bg:#f6f7f9; --card:#fff; --ink:#1c2230; --muted:#6b7385; --line:#e3e6ec; --accent:#2563eb;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  --nav-bg:#111827; --nav-ink:#e5e7eb; --nav-muted:#aeb5c2; --nav-on:#ffffff;
  color-scheme:light;
}
/* Dark: follows the device unless the Light/Dark switch is set (nav.js sets data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#161a22; --card:#1f2430; --ink:#f4f6fa; --muted:#b3bac8; --line:#394152; --accent:#3b82f6; --nav-bg:#0d1016; color-scheme:dark; }
}
:root[data-theme="dark"] { --bg:#161a22; --card:#1f2430; --ink:#f4f6fa; --muted:#b3bac8; --line:#394152; --accent:#3b82f6; --nav-bg:#0d1016; color-scheme:dark; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--ink); }

/* ---- top navigation (built by nav.js) ---- */
.topnav { display:flex; align-items:center; gap:4px; padding:0 16px; height:46px; background:var(--nav-bg); color:var(--nav-ink); overflow-x:auto; scrollbar-width:none; }
.topnav::-webkit-scrollbar { display:none; }
.topnav .brand { font-weight:700; letter-spacing:.01em; margin-right:14px; white-space:nowrap; color:var(--nav-on); text-decoration:none; display:flex; align-items:center; gap:8px; }
.topnav .brand i { width:10px; height:10px; border-radius:3px; background:var(--accent); display:inline-block; }
.topnav a.tab { color:var(--nav-muted); text-decoration:none; padding:0 12px; height:46px; display:flex; align-items:center; gap:6px; border-bottom:2px solid transparent; white-space:nowrap; font-size:13.5px; }
.topnav a.tab:hover { color:var(--nav-on); }
.topnav a.tab.on { color:var(--nav-on); border-bottom-color:var(--accent); font-weight:600; }
.topnav .group { color:var(--nav-muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:0 2px 0 12px; opacity:.7; white-space:nowrap; }
.topnav .count { font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:#374151; color:#fff; }
.topnav .count.bad { background:var(--bad); }
.topnav .count.warn { background:#b45309; }
.topnav .spacer { flex:1; }
.topnav button.more-btn { white-space:nowrap; display:flex; align-items:center; gap:6px; height:46px; padding:0 12px; color:var(--nav-muted); background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; cursor:pointer; font:inherit; font-size:13.5px; }
.topnav button.more-btn.on { color:var(--nav-on); border-bottom-color:var(--accent); font-weight:600; }
.more-menu { position:fixed; z-index:1000; min-width:220px; background:var(--nav-bg); border:1px solid #374151; border-top:0; border-radius:0 0 10px 10px; padding:6px 0; box-shadow:0 10px 24px rgba(0,0,0,.35); }
.more-menu a.tab { display:flex; align-items:center; gap:6px; padding:8px 16px; color:var(--nav-ink); text-decoration:none; font-size:13.5px; }
.more-menu a.tab:hover { background:rgba(255,255,255,.06); color:var(--nav-on); }
.more-menu a.tab.on { color:var(--nav-on); font-weight:600; box-shadow:inset 3px 0 0 var(--accent); }
.more-menu .group { color:var(--nav-muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:10px 16px 4px; opacity:.7; }
.more-menu .count { font-size:11px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:#374151; color:#fff; }
.more-menu .count.bad { background:var(--bad); } .more-menu .count.warn { background:#b45309; }
.topnav .mock { margin-left:8px; }
.topnav .theme { margin-left:8px; background:transparent; border:1px solid #374151; color:var(--nav-ink); font-size:12.5px; padding:4px 10px; border-radius:99px; white-space:nowrap; }
.topnav .theme:hover { border-color:var(--nav-muted); color:var(--nav-on); }

/* ---- page toolbar: title on the left, the page's controls on the right ---- */
header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
header h1 { font-size:17px; margin:0 auto 0 0; flex:1 1 260px; line-height:1.25; }
header .tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
header .sep { width:1px; height:22px; background:var(--line); }

.mock { background:#fef3c7; color:#92400e; padding:2px 8px; border-radius:99px; font-size:12px; white-space:nowrap; }
button, select, input, textarea { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:7px; }
button { padding:6px 11px; cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--muted); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover:not(:disabled) { filter:brightness(1.08); }
button:disabled { opacity:.5; cursor:default; }
input, select { padding:4px 7px; }
input[type=date] { padding:4px 6px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.muted { color:var(--muted); }

@media (max-width: 700px) {
  header { padding:10px 12px; }
  header h1 { font-size:15px; flex-basis:100%; }
  .topnav { padding:0 8px; }
  .topnav .brand span { display:none; }
  .topnav a.tab { padding:0 9px; }
}

/* ---- "what's in it" pop-up for sub-rentals (subitems.js) ---- */
dialog.subitems { border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); padding:16px 18px; width:min(640px, calc(100vw - 32px)); max-height:85vh; }
dialog.subitems::backdrop { background:rgba(0,0,0,.45); }
dialog.subitems h3 { margin:0 0 4px; font-size:16px; }
dialog.subitems a { color:var(--accent); }
.si-sub { color:var(--muted); font-size:13px; }
.si-warn { margin-top:8px; font-size:13px; color:var(--warn); font-weight:600; }
.si-job { margin-top:12px; border-top:1px solid var(--line); padding-top:8px; }
.si-jhead { font-size:13.5px; } .si-jhead span { display:block; color:var(--muted); font-size:12px; }
.si-job table { width:100%; border-collapse:collapse; margin-top:4px; font-size:13px; }
.si-job td { padding:3px 6px 3px 0; border-top:1px dashed var(--line); vertical-align:top; }
.si-job td.q { width:38px; font-weight:600; font-variant-numeric:tabular-nums; } .si-job td.w { width:60px; color:var(--muted); text-align:right; }
.si-job td.st { width:96px; text-align:right; font-size:12px; }
.si-in { color:var(--ok); } .si-out { color:var(--bad); font-weight:600; }
.si-acts { display:flex; justify-content:flex-end; margin-top:14px; }

/* signed-in person, and the view-only note */
.topnav .who { margin-left:10px; font-size:12.5px; color:var(--nav-muted); white-space:nowrap; }
.topnav .who small { background:#374151; color:#fff; padding:0 6px; border-radius:99px; margin:0 4px; }
.topnav .who a { color:var(--nav-ink); margin-left:6px; }
.viewonly { background:#fef3c7; color:#78350f; font-size:13px; padding:5px 16px; text-align:center; }
.viewonly.cover { background:#dbeafe; color:#1e3a8a; }
.viewonly.review { background:#ffedd5; color:#7c2d12; }
.viewonly button { font-size:12px; padding:2px 10px; margin-left:6px; }
.review-dlg { width:min(760px, calc(100vw - 24px)); max-height:90vh; box-sizing:border-box; }
.review-dlg table { width:100%; border-collapse:collapse; font-size:13.5px; }
.review-dlg td { padding:6px; border-top:1px solid var(--line); vertical-align:top; }

/* Viewers can't sync with OnRent – don't offer it (bookers can: it only pulls the latest in) */
:root[data-role="viewer"] #sync { display:none !important; }
/* Dispatch's own controls (e.g. sending the Moves) – not for bookers, viewers or out-of-hours cover. */
:root[data-role="viewer"] .dispatch-only, :root[data-role="booker"] .dispatch-only, :root[data-cover="ooh"] .dispatch-only { display:none !important; }
/* Viewers and bookers: see everything, change nothing (they raise requests on the Requests page). The client tracking
   link stays – Link on Today, the link box on the Board. */
:root:is([data-role="viewer"], [data-role="booker"]) :is(.edit-ctl, .dispatch-only,
  button.done, button.alloc-job, button.mark-done, button.publish, button.split-run, button.fl-offer, button.edit-stop,
  .job .actions, .job .trips, .job .addrun, .job .timeform, button.edit-time, button.set-load, button.miss-save, button.hire-save,
  input.m-start, input.m-end, input.h-start, input.h-end, input.link-job,
  #publishDay, #copyShifts, button.alloc, button.accept-dedicated, input.early-agreed, label:has(> input.early-agreed)) { display:none !important; }
:root[data-role="viewer"] .booker-ok { display:none !important; } /* things bookers may do too, e.g. 🛰 Check GPS */
:root:is([data-role="viewer"], [data-role="booker"]) .job:not(.inrun) :is(select.vehicle, select.driver) { display:none !important; } /* only a suggestion until it's on a run */
/* Who's driving and which van: shown as plain text, not something to change. */
:root:is([data-role="viewer"], [data-role="booker"]) :is(select.vehicle, select.driver, select.hire-van, select.hire-handover, select.d-van, select.d-driver, select.shift) { pointer-events:none; appearance:none; -webkit-appearance:none; background:transparent; border-color:transparent; color:inherit; opacity:1; }
:root:is([data-role="viewer"], [data-role="booker"]) :is(button.who-btn, button.van-btn, button.fob-btn) { pointer-events:none; border-bottom:0; }
:root:is([data-role="viewer"], [data-role="booker"]) [draggable="true"] { -webkit-user-drag:none; cursor:default; }

/* OnRent job numbers (linked automatically – nav.js) */
a.gv-link { color:inherit; text-decoration:underline dotted; text-underline-offset:2px; }
a.gv-link:hover { color:var(--accent); text-decoration-style:solid; }

/* electric vans' battery (nav.js batteryPill) */
.bat { display:inline-flex; align-items:center; gap:2px; font-size:11.5px; font-weight:600; padding:0 6px; border-radius:99px; margin-left:6px; white-space:nowrap; vertical-align:1px;
  background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); }
.bat.mid { background:color-mix(in srgb, #b45309 16%, transparent); color:#b45309; }
.bat.low { background:color-mix(in srgb, var(--bad) 16%, transparent); color:var(--bad); }
.bat.old { opacity:.65; }
.bat small { font-weight:400; }

/* long items (📏) */
.long { font-size:12.5px; color:#b45309; margin:2px 0; }
.long.bad, .long .bad { color:var(--bad); }
.tag-long { font-size:11px; font-weight:600; padding:0 6px; border-radius:99px; background:color-mix(in srgb, #b45309 16%, transparent); color:#b45309; white-space:nowrap; }
.tag-long.bad { background:color-mix(in srgb, var(--bad) 16%, transparent); color:var(--bad); }

/* Still a quotation in OnRent: planned, but not sent to Geotab / drivers until it's an order */
a.quote-tag { text-decoration:none; }
.quote-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; color:#92400e; background:#fef3c7; border:1px dashed #d97706; border-radius:4px; padding:0 5px; white-space:nowrap; vertical-align:1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .quote-tag { color:#fde68a; background:#422006; border-color:#b45309; } }
:root[data-theme="dark"] .quote-tag { color:#fde68a; background:#422006; border-color:#b45309; }

/* Touch screens (phones, tablets): controls big enough to hit with a thumb – 44px, as Apple and Google recommend.
   Desktops (mouse) keep the compact layout. Links inside text are left alone. */
@media (pointer: coarse) {
  /* (The top bar's tabs are 46px tall already – and a min-width would let them squash together.) */
  button:not(.topnav *), select, summary, input:not([type="checkbox"]):not([type="radio"]) { min-height:44px; }
  button:not(.topnav *) { min-width:44px; }
  input[type="checkbox"], input[type="radio"] { width:22px; height:22px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height:44px; display:inline-flex; align-items:center; gap:6px; }
}

/* Something's not working (nav.js, health.js): red for OnRent / Geotab, amber for the rest. Text says what, not just colour. */
#svcBar .svc { padding:8px 16px; font-size:13.5px; line-height:1.4; border-bottom:1px solid rgba(0,0,0,.15); }
#svcBar .svc.bad { background:#fee2e2; color:#7f1d1d; }
#svcBar .svc.warn { background:#fef3c7; color:#78350f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #svcBar .svc.bad { background:#450a0a; color:#fecaca; } :root:not([data-theme="light"]) #svcBar .svc.warn { background:#422006; color:#fde68a; } }
:root[data-theme="dark"] #svcBar .svc.bad { background:#450a0a; color:#fecaca; }
:root[data-theme="dark"] #svcBar .svc.warn { background:#422006; color:#fde68a; }