/* Dispatch Board — dispatcher board styles (moved verbatim from index.html's two <style> blocks). */
:root {
  /* Bright default look (v10.4.0): cool page, navy ink, violet accent. A company's Branding accent still replaces --accent. */
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-2: #F9FAFC;
  --surface-3: #EEF0F6;
  --border: #E4E7EF;
  --border-strong: #CDD2DE;
  --ink: #1B1F3B;
  --ink-muted: #5F6680;
  --ink-faint: #697087;
  --on-status: #FFFFFF; --hot-mark: #FFD9A0; /* text on a solid status colour; the hot-load mark on a load block */
  --accent: #5A4FD8;
  --accent-ink: #FFFFFF;
  --accent-soft: #ECEAFC;

  --status-available: #067A52;
  --status-available-soft: #DCF5EA;
  --status-transit: #1D66DD;
  --status-transit-soft: #E2ECFF;
  --status-risk: #995C00;
  --status-risk-soft: #FFF0D6;
  --status-critical: #CF2E45;
  --status-critical-soft: #FFE4E7;
  --status-offduty: #687089;
  --status-offduty-soft: #ECEEF4;

  --font-head: "Onest", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 1px 2px rgba(22, 26, 56, 0.05), 0 8px 24px -12px rgba(22, 26, 56, 0.16);
  --radius: 12px;

  /* Type scale. The half-pixel sizes the board grew over time (10.5, 11.5, 12.5 …) are folded onto these five steps:
     xs tags, pills and tiny labels · sm hints and sub-lines · md table and form text · lg names and card titles · xl section heads.
     The same in light, dark and every look, so this is the only copy (every page that loads a css/ file loads this one first). */
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 16px;

  /* Stacking order, lowest to highest, so the next module does not pick a number. Values are the ones already in use.
     Above these sit the help panel, the toast and the top loading bar (2147482000 and up), which must beat anything a
     browser extension or an embedded map can put on the page. */
  --z-badge: 5; --z-fullpage: 9; --z-scrim: 10; --z-drawer: 11; --z-page: 12; --z-pop: 60; --z-tip: 400; --z-screen: 500;
  --z-toast: 2147483500; --z-netbar: 2147483600;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1220; --surface: #171A2C; --surface-2: #1C2034; --surface-3: #242944;
    --border: #2A3050; --border-strong: #3A4166;
    --ink: #E9EBF5; --ink-muted: #A4AAC3; --ink-faint: #8890AE; --on-status: #14102E; --hot-mark: #3A2C12;
    --accent: #9C94FF; --accent-ink: #14102E; --accent-soft: #2A2650;
    --status-available: #3FC98D; --status-available-soft: #12362A;
    --status-transit: #6FA3FF; --status-transit-soft: #16294D;
    --status-risk: #F1B24A; --status-risk-soft: #3A2C12;
    --status-critical: #FF7A8C; --status-critical-soft: #40202A;
    --status-offduty: #9098B3; --status-offduty-soft: #232843;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0F1220; --surface: #171A2C; --surface-2: #1C2034; --surface-3: #242944;
  --border: #2A3050; --border-strong: #3A4166;
  --ink: #E9EBF5; --ink-muted: #A4AAC3; --ink-faint: #8890AE; --on-status: #14102E; --hot-mark: #3A2C12;
  --accent: #9C94FF; --accent-ink: #14102E; --accent-soft: #2A2650;
  --status-available: #3FC98D; --status-available-soft: #12362A;
  --status-transit: #6FA3FF; --status-transit-soft: #16294D;
  --status-risk: #F1B24A; --status-risk-soft: #3A2C12;
  --status-critical: #FF7A8C; --status-critical-soft: #40202A;
  --status-offduty: #9098B3; --status-offduty-soft: #232843;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
}
/* A picked accent (a theme's or the company's, js/theme.js setAccentVars) is chosen against a white page. In dark mode it is
   lightened so accent-coloured text (selected tab, links, KPI values) stays readable, with dark text on accent buttons.
   !important because the pick is written inline on <html> for light mode. A look's own accent never sets
   data-accent-user, so its dark tokens still apply. Browsers without color-mix() skip this and keep the picked colour. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  @media (prefers-color-scheme: dark) {
    :root[data-accent-user]:not([data-theme="light"]) { --accent: color-mix(in srgb, var(--accent-user) 50%, #fff) !important; --accent-ink: #14102E !important; }
  }
  :root[data-accent-user][data-theme="dark"] { --accent: color-mix(in srgb, var(--accent-user) 50%, #fff) !important; --accent-ink: #14102E !important; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
/* The board's pages now have a doctype (standards mode). Without one, browsers reset line-height, text-align and
   white-space at every table; the whole board was laid out with that, so its tables keep it (the phone board and the live
   window always had a doctype, so they are left as they are). */
html[data-app="board"] table { line-height: normal; text-align: start; white-space: normal; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }
h1, h2, h3 { font-family: var(--font-head); font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.app { max-width: 1400px; margin: 0 auto; padding: 18px 22px 64px; }

/* ---------- Pills and tags ----------
   Two shapes for every small label on the board, at one size. A PILL (fully rounded) says what state something is in; a TAG
   (4px corners) marks a kind or a flag. Size, weight, padding, line height and case are set here once; each class below and
   in the module files keeps only its colours, its display and where it sits. Deliberately different, and why:
   .status-pill keeps room for its dot · .tab .count-pill and .load-block .inline-badge are tighter because they sit inside a
   tab label and a timeline block · .ifta-counts .ifta-chip is larger because those are the summary counts over an import.
   To back out: restore the per-class sizes from git and delete this block. */
.status-pill, .conflict-pill, .count-pill, .lfd, .req-chip, .rep-badge, .rep-period, .sc-low, .os-tag, .ifta-chip, .tx-chip, .imp-status, .start-tag, .pw-first {
  padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none;
}
.move-tag, .flag-tag, .bill-flag, .pf-flag, .auto-tag, .broker-issue, .inline-badge, .credit-badge {
  padding: 1px 6px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; letter-spacing: 0.03em; text-transform: none;
}
/* These four were capitals; their words are written in lower case ("auto", "shared"), so the first letter is raised here. */
.auto-tag::first-letter, .rep-badge::first-letter, .imp-status::first-letter, .start-tag::first-letter { text-transform: uppercase; }

/* ---------- Topbar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow); }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand h1 { font-size: 21px; text-transform: uppercase; letter-spacing: 0.04em; }
.brand-sub { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; }
.date-nav { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--ctl-radius); padding: 3px; }
.date-nav button { border: none; background: transparent; color: var(--ink-muted); cursor: pointer; min-height: 28px; padding: 5px 8px; border-radius: clamp(0px, calc(var(--ctl-radius) - 4px), 999px); font: inherit; font-size: 14px; line-height: 1; }
.date-nav button:hover { background: var(--surface-3); color: var(--ink); }
.date-nav .cur { font-weight: 700; color: var(--ink); min-width: 108px; text-align: center; font-size: 13px; }
.date-nav .cur small { display: block; font-weight: 400; color: var(--ink-faint); font-size: var(--fs-xs); letter-spacing: 0.02em; }

.fleet-strip { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.fleet-chip { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--ink-muted); box-shadow: var(--shadow); cursor: pointer; transition: transform .12s ease, border-color .12s ease; }
.fleet-chip:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.fleet-chip.active-filter { outline: 2px solid var(--accent); outline-offset: 1px; }
.fleet-chip strong { color: var(--ink); font-size: 14px; font-family: "IBM Plex Mono", monospace; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.available { background: var(--status-available); }
.dot.transit { background: var(--status-transit); }
.dot.risk { background: var(--status-risk); }
.dot.offduty { background: var(--status-offduty); }
.icon-btn { border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.icon-btn:hover { color: var(--ink); border-color: var(--border-strong); }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--ctl-radius); padding: 8px 12px; min-width: 230px; color: var(--ink-faint); }
.search input { border: none; background: transparent; outline: none; color: var(--ink); font: inherit; width: 100%; }
.search input::placeholder { color: var(--ink-faint); }
.search kbd { border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 10px; color: var(--ink-faint); font-family: "IBM Plex Mono", monospace; }
select.filter { background: var(--surface); border: 1px solid var(--border); border-radius: var(--ctl-radius); padding: 8px 10px; color: var(--ink); font: inherit; font-size: 13px; }
.tabs { display: flex; background: var(--surface-3); border-radius: var(--radius); padding: 3px; gap: 2px; }
.tab { border: none; background: transparent; color: var(--ink-muted); padding: 7px 14px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.spacer { flex: 1; }
.btn { border: var(--btn-border-w) solid var(--btn-border); background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); padding: 8px 13px; border-radius: var(--btn-radius); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, transform .06s ease; }
.btn:hover:not(:disabled) { border-color: var(--btn-hover-border); background: var(--btn-hover-bg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, select.filter:focus-visible, .search:focus-within, .tab:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn.primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-ink); box-shadow: var(--btn-primary-shadow); }
.btn.primary:hover:not(:disabled) { background: var(--btn-primary-hover-bg); color: var(--btn-primary-hover-ink); filter: brightness(1.06); box-shadow: 0 0 0 3px var(--accent-soft); }
/* color-mix() only where supported (Safari 16.2+): a var() inside it can't fall back, so the plain value above stays for older browsers. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .btn.primary:hover:not(:disabled) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
}
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn.danger { color: var(--status-critical); border-color: var(--status-critical); background: transparent; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn { transition: color .12s ease, border-color .12s ease; }

/* ---------- Attention panel ---------- */
.attention { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
.attention-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.attention-head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.attention-head .counts { display: flex; gap: 6px; margin-left: auto; }
.count-pill { font-family: "IBM Plex Mono", monospace; }
.count-pill.critical { background: var(--status-critical-soft); color: var(--status-critical); }
.count-pill.warn { background: var(--status-risk-soft); color: var(--status-risk); }
.count-pill.info { background: var(--status-transit-soft); color: var(--status-transit); }
.attention-head .caret { color: var(--ink-faint); font-size: 11px; }
.alert-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.alert-item { display: flex; align-items: center; gap: 11px; padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.alert-item:last-child { border-bottom: none; }
.alert-bar { width: 3px; align-self: stretch; border-radius: 2px; flex: none; }
.alert-item.critical .alert-bar { background: var(--status-critical); }
.alert-item.warn .alert-bar { background: var(--status-risk); }
.alert-item.info .alert-bar { background: var(--status-transit); }
.alert-item .who { font-weight: 600; flex: none; }
.alert-item .what { color: var(--ink-muted); overflow-wrap: anywhere; min-width: 0; }
.alert-item .go { margin-left: auto; flex: none; }
.attention.all-clear .attention-head { background: var(--status-available-soft); border-bottom: none; }
.attention.all-clear h3 { color: var(--status-available); }

/* ---------- Unassigned ---------- */
.banner-unassigned { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; background: var(--status-risk-soft); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; }
.banner-unassigned.drop-target { outline: 2px dashed var(--accent); outline-offset: -3px; }
.banner-unassigned .label { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--status-risk); }
.chip-unassigned { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: var(--fs-md); cursor: grab; }
.chip-unassigned select { border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 8px; font: inherit; font-size: 12px; background: var(--surface-2); color: var(--ink); }
.banner-recurring { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; background: var(--status-transit-soft); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; }
.banner-recurring .label { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--status-transit); }
.banner-recurring .spacer2 { flex: 1; }

/* ---------- Board ---------- */
.board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 16px; }
.timeline-head { display: grid; grid-template-columns: 246px minmax(0, 1fr); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.timeline-head .corner { padding: 10px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; }
.hour-axis { position: relative; padding: 10px 16px; font-size: 11px; color: var(--ink-faint); font-family: "IBM Plex Mono", monospace; }
.hour-axis span { position: absolute; transform: translateX(-50%); }

.driver-row { display: grid; grid-template-columns: 246px minmax(0, 1fr); border-bottom: 1px solid var(--border); }
.driver-row:last-child { border-bottom: none; }
.driver-id { padding: 13px 16px; display: flex; flex-direction: column; gap: 4px; justify-content: center; border-right: 1px solid var(--border); cursor: pointer; }
.driver-id:hover { background: var(--surface-2); }
.driver-id .name { font-weight: 700; font-size: var(--fs-lg); }
.driver-id .truck { color: var(--ink-muted); font-size: var(--fs-sm); font-family: "IBM Plex Mono", monospace; }
.driver-id .daysum { color: var(--ink-faint); font-size: 11px; font-family: "IBM Plex Mono", monospace; }
.driver-id .daysum.over { color: var(--status-risk); font-weight: 600; }
.pill-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding-left: 7px; }
.status-pill .dot { width: 6px; height: 6px; }
.status-pill.available { background: var(--status-available-soft); color: var(--status-available); }
.status-pill.transit { background: var(--status-transit-soft); color: var(--status-transit); }
.status-pill.risk { background: var(--status-risk-soft); color: var(--status-risk); }
.status-pill.offduty { background: var(--status-offduty-soft); color: var(--status-offduty); }
.conflict-pill { background: var(--status-critical-soft); color: var(--status-critical); }

.track-wrap { position: relative; padding: 13px 16px 22px; min-height: 74px; }
.track-wrap.drop-target { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -4px; }
.track { position: relative; height: 40px; background: repeating-linear-gradient(to right, transparent, transparent calc(6.25% - 1px), var(--surface-2) calc(6.25% - 1px), var(--surface-2) 6.25%); border-radius: 6px; }
.now-line { position: absolute; top: -13px; bottom: -13px; width: 2px; background: var(--accent); opacity: 0.55; z-index: 3; }
.now-line::before { content: "NOW"; position: absolute; top: -13px; left: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); font-family: "IBM Plex Mono", monospace; }
.load-block { position: absolute; top: 4px; height: 32px; border-radius: 7px; display: flex; align-items: center; gap: 6px; padding: 0 9px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; color: var(--on-status); z-index: 2; cursor: grab; }
.load-block:active { cursor: grabbing; }
.load-block.dragging { opacity: 0.4; }
.load-block .route { overflow: hidden; text-overflow: ellipsis; }
.load-block.transit { background: var(--status-transit); }
.load-block.risk { background: var(--status-risk); }
.load-block.done { background: var(--status-offduty-soft); color: var(--ink-muted); }
.load-block .inline-badge { background: rgba(255,255,255,0.24); padding-left: 5px; padding-right: 5px; flex: none; }
.load-block.done .inline-badge { background: var(--surface-3); }
.load-block .hot { color: var(--hot-mark); flex: none; }

.stop-tick { position: absolute; top: -3px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface); z-index: 4; transform: translateX(-50%); }
.stop-tick.future { background: var(--ink-faint); }
.stop-tick.ontime { background: var(--status-available); }
.stop-tick.late { background: var(--status-critical); }
.stop-tick.done { background: var(--status-offduty); }
.appt-window { position: absolute; top: 0; height: 3px; background: var(--ink-faint); opacity: 0.5; border-radius: 2px; z-index: 3; }
.detention-badge { position: absolute; top: 41px; transform: translateX(-50%); background: var(--status-critical-soft); color: var(--status-critical); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap; z-index: 5; }
.free-tag { position: absolute; bottom: 0px; transform: translateX(-2px); font-size: var(--fs-xs); color: var(--ink-muted); font-family: "IBM Plex Mono", monospace; white-space: nowrap; }
.free-tag strong { color: var(--ink); }
.empty-track { display: flex; align-items: center; height: 40px; padding-left: 4px; color: var(--ink-faint); font-size: var(--fs-sm); font-style: italic; }
.offduty-track { height: 40px; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--surface-3), var(--surface-3) 8px, var(--surface-2) 8px, var(--surface-2) 16px); display: flex; align-items: center; padding-left: 12px; color: var(--ink-faint); font-size: 12px; font-style: italic; }

.legend { display: flex; flex-wrap: wrap; gap: 15px; padding: 11px 16px; color: var(--ink-muted); font-size: var(--fs-sm); border-top: 1px solid var(--border); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- LFD badges ---------- */
.lfd { display: inline-flex; align-items: center; gap: 4px; font-family: "IBM Plex Mono", monospace; white-space: nowrap; }
.lfd.over { background: var(--status-critical-soft); color: var(--status-critical); }
.lfd.today { background: var(--status-risk-soft); color: var(--status-risk); }
.lfd.soon { background: var(--status-risk-soft); color: var(--status-risk); }
.lfd.ok { background: var(--surface-3); color: var(--ink-muted); }

.move-tag { display: inline-block; background: var(--surface-3); color: var(--ink-muted); }

/* ---------- KPI strip ---------- */
/* The Collections tiles (.credit-kpis / .credit-kpi, markup in js/billing-collections.js: a <span> label and a <strong> value)
   share every KPI tile declaration here, in css/polish.css and in css/looks.css, so they are the same tile. */
.kpi-strip, .credit-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi-card, .credit-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.kpi-card .kpi-label, .credit-kpi span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; }
.kpi-card .kpi-value, .credit-kpi strong { font-size: 21px; font-weight: 700; font-family: "IBM Plex Mono", monospace; color: var(--ink); }
.kpi-card .kpi-value.accent { color: var(--accent); }
.kpi-card .kpi-value.warn { color: var(--status-risk); }
.kpi-card .kpi-value.critical, .credit-kpi.bad strong { color: var(--status-critical); }
.kpi-card .kpi-value.good { color: var(--status-available); }

/* ---------- Table ---------- */
table.loads { width: 100%; border-collapse: collapse; font-size: 13px; }
table.loads th[data-key] { cursor: pointer; -webkit-user-select: none; user-select: none; }
table.loads th[data-key]:hover { color: var(--ink); }
table.loads th .arrow { display: inline-block; width: 9px; opacity: 0.7; }
table.loads th.checkbox-cell, table.loads td.checkbox-cell { width: 30px; padding-right: 0; }
.bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.bulk-bar strong { font-family: "IBM Plex Mono", monospace; }
.bulk-bar .spacer2 { flex: 1; }
table.loads th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); background: var(--surface-2); padding: 10px 13px; border-bottom: 1px solid var(--border); font-weight: 600; }
table.loads td { padding: 11px 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.loads tr:last-child td { border-bottom: none; }
table.loads .load-id { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
table.loads .sub { display: block; color: var(--ink-faint); font-size: 11px; font-family: "IBM Plex Mono", monospace; margin-top: 2px; }
.route-cell { display: flex; flex-direction: column; gap: 2px; max-width: 250px; }
.route-cell .leg { color: var(--ink-muted); font-size: 12px; }
.note-flag { color: var(--status-risk); font-size: var(--fs-sm); display: flex; gap: 5px; align-items: flex-start; margin-top: 4px; }
.table-wrap { overflow-x: auto; }
.row-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.driver-select-inline { border: 1px solid var(--border-strong); border-radius: min(var(--ctl-radius), 10px); padding: 5px 7px; font: inherit; font-size: 12px; background: var(--surface-2); color: var(--ink); }

/* ---------- Settings controls ---------- */
.swatch-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); flex: none; padding: 0; }
.swatch.active { border-color: var(--ink); }
.swatch.custom { display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--ink-muted); font-size: 13px; overflow: hidden; }
.swatch.custom input[type=color] { width: 42px; height: 42px; border: none; padding: 0; margin: -7px; cursor: pointer; background: none; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.switch-row:last-child { border-bottom: none; }
.switch-row .txt { display: flex; flex-direction: column; gap: 2px; }
.switch-row .txt strong { font-size: 13px; }
.switch-row .txt span { font-size: var(--fs-sm); color: var(--ink-muted); overflow-wrap: anywhere; min-width: 0; }
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; width: auto; height: auto; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 999px; transition: background .15s ease; pointer-events: none; }
.switch .track::before { content: ""; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; background: var(--surface); border-radius: 50%; box-shadow: var(--shadow); transition: transform .15s ease; }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::before { transform: translateX(16px); }

/* ---------- Drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10, 14, 18, 0.4); z-index: var(--z-scrim); opacity: 0; transition: opacity .18s ease; }
.scrim.open { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(470px, 94vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 32px -12px rgba(0,0,0,0.35); z-index: var(--z-drawer); padding: 22px; overflow-y: auto; transform: translateX(16px); opacity: 0; transition: transform .2s cubic-bezier(.22,.8,.28,1), opacity .16s ease; }
.drawer.open { transform: translateX(0); opacity: 1; }
.drawer h2 { font-size: 18px; text-transform: uppercase; margin-bottom: 4px; }
.drawer .sub { color: var(--ink-muted); font-size: var(--fs-sm); margin-bottom: 18px; }
.field { margin-bottom: 13px; display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
/* Fields follow the button style and the look (--ctl-radius: Square 2px, Outline 6px, Standard and Rounded capped) so a form
   matches the buttons beside it. The cap keeps a Rounded style from turning a field into a lozenge that clips its text; a text
   area gets a little more. Same formula on .driver-select-inline, .gps-map select, .io-textarea, .login-card input,
   table.ord-table fields, .rep-side fields and .totp-confirm input. To back out: put the fixed 8px / 7px / 6px back. */
.field input, .field select, .field textarea { border: 1px solid var(--border-strong); border-radius: min(var(--ctl-radius), 10px); padding: 9px 10px; font: inherit; background: var(--surface-2); color: var(--ink); width: 100%; }
.field textarea { resize: vertical; min-height: 56px; font-family: inherit; border-radius: min(var(--ctl-radius), 12px); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
/* A locked field has to look locked: the colours above would otherwise hide the browser's own grey. */
.field input:disabled, .field select:disabled, .field textarea:disabled, select.filter:disabled { background: var(--surface-3); color: var(--ink-muted); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--ink-muted); }
.field .hint { font-size: 11px; color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; min-width: 0; }
.drawer:focus { outline: none; }
.drawer-actions { display: flex; gap: 10px; margin-top: 20px; }
/* The save bar stays in view while a long form scrolls (Settings pages have their own, css/settings-page.css). Only a
   drawer with one button bar: where each section has its own (Backup & import), a pinned one would belong to a section out of view. */
.drawer:not(.sp-hosted) > .drawer-actions:last-child:not(.drawer-actions ~ .drawer-actions) { position: sticky; bottom: 0; z-index: 2; margin: 20px -22px -22px; padding: 12px 22px 16px; background: var(--surface); border-top: 1px solid var(--border); }
.drawer-close { position: absolute; top: 18px; right: 18px; background: none; border: none; color: var(--ink-faint); font-size: 20px; cursor: pointer; line-height: 1; }
.section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin: 20px 0 10px; padding-top: 15px; border-top: 1px solid var(--border); }
.section-title:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }

.stop-row { border: 1px solid var(--border); border-radius: 8px; padding: 11px; margin-bottom: 9px; background: var(--surface-2); }
.stop-row .stop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.stop-row .stop-head .tag { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; color: var(--ink-faint); letter-spacing: 0.04em; }
.stop-row .stop-head .ctrls { display: flex; gap: 4px; }
/* Small row buttons (↑ ↓ ✕ Remove) wherever they sit. The ::after widens what a finger or a shaky mouse can hit without
   changing how dense the rows look. */
.mini { position: relative; min-width: 24px; min-height: 24px; background: none; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--ink-muted); cursor: pointer; font: inherit; font-size: 11px; padding: 1px 6px; line-height: 1.5; }
button.mini::after { content: ""; position: absolute; inset: -5px; }
.mini:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-muted); }
.mini:disabled { opacity: 0.35; cursor: default; }
.mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mini.rm { color: var(--status-critical); border-color: var(--status-critical); }
.stop-row .mini { background: none; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--ink-muted); cursor: pointer; font-size: 11px; padding: 1px 6px; line-height: 1.5; }
.stop-row .mini:hover { color: var(--ink); }
.stop-row .mini.rm { color: var(--status-critical); border-color: var(--status-critical); }

.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.history-list li { font-size: 12px; color: var(--ink-muted); display: flex; gap: 8px; overflow-wrap: anywhere; min-width: 0; }
.history-list li .ts { font-family: "IBM Plex Mono", monospace; color: var(--ink-faint); flex: none; white-space: nowrap; }
.empty-hint { color: var(--ink-faint); font-size: var(--fs-sm); font-style: italic; }

.template-chip { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2); }
.template-chip .t-name { font-weight: 600; font-size: 13px; }
.template-chip .t-sub { color: var(--ink-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; min-width: 0; }
.gps-line { color: var(--ink-muted); font-size: 11px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.gps-line:hover { color: var(--accent); text-decoration: underline; }
.gps-line.stale, .gps-line.muted { color: var(--ink-faint); font-style: italic; }
.gps-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: center; margin-top: 8px; font-size: var(--fs-md); }
.gps-map select { min-width: 0; width: 100%; }
.gps-map select { border: 1px solid var(--border-strong); border-radius: min(var(--ctl-radius), 10px); padding: 5px 6px; font: inherit; background: var(--surface-2); color: var(--ink); }

.io-textarea { width: 100%; min-height: 130px; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-sm); border: 1px solid var(--border-strong); border-radius: min(var(--ctl-radius), 12px); padding: 10px; background: var(--surface-2); color: var(--ink); }

.shortcut-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shortcut-table td { padding: 7px 0; border-bottom: 1px solid var(--border); }
.shortcut-table td:last-child { text-align: right; }
.shortcut-table kbd { background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 5px; padding: 2px 7px; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-sm); }

/* ---------- Storage warning ---------- */
.storage-warning { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--radius); background: var(--status-critical-soft); border: 1px solid var(--status-critical); color: var(--status-critical); font-size: var(--fs-md); }
.storage-warning strong { font-size: 13px; }
.storage-warning span { color: var(--ink-muted); }
.storage-warning em { font-style: normal; font-weight: 700; color: var(--ink); }

/* ---------- Toast ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

.version-badge { position: fixed; right: 10px; bottom: 8px; z-index: var(--z-badge); padding: 3px 9px; font: 600 11px "IBM Plex Mono", ui-monospace, monospace; color: var(--accent-ink); background: var(--accent); border: 1px solid var(--accent); border-radius: 999px; box-shadow: 0 4px 12px -4px var(--accent); cursor: pointer; user-select: none; }
.version-badge:hover { filter: brightness(1.08); }
.version-badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.version-badge.has-new::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--status-critical); border: 2px solid var(--bg); }
/* What's new + Send feedback (js/whatsnew.js) */
.wn-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.wn-rel { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.wn-rel.is-new { border-color: var(--accent); }
.wn-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); }
.wn-ver { font: 600 11px "IBM Plex Mono", ui-monospace, monospace; }
.wn-title { font-weight: 600; margin: 3px 0 2px; }
.wn-rel ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
.fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fb-list li { padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; }
.fb-list li.is-done { opacity: .6; }
.fb-meta { font-size: 12px; color: var(--ink-muted); }
.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; margin: 4px 0 8px; }
@media print { .version-badge { display: none !important; } }
.toast { position: fixed; bottom: 22px; left: 16px; right: 16px; margin: 0 auto; width: -moz-fit-content; width: fit-content; max-width: min(640px, calc(100vw - 32px)); transform: none; text-align: left; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 14px; font-size: 13px; font-weight: 600; z-index: var(--z-toast); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.toast.error { background: var(--status-critical); color: var(--on-status); }
.toast.warn { background: var(--status-risk); color: var(--on-status); } /* something didn't work: stays up longer (js/undo.js) */
.toast.warn, .toast.error { pointer-events: auto; cursor: pointer; } /* click to dismiss */

/* ---------- Print ---------- */
#printSheet { display: none; }
@media print {
  .topbar, .tabbar, .toolbar, .attention, .banner-recurring, .kpi-strip, .banner-unassigned, .board, .drawer, .scrim, .toast,
  .plan-banner, .sample-banner, .storage-warning, .sp, .login-screen, #waOpenBar, .hlp-panel, .hlp-pop, .col-picker { display: none !important; }
  #printSheet { display: block; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .app { padding: 0; max-width: none; }
  .p-head { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
  .p-head h2 { font-size: 16pt; }
  .p-driver { margin-bottom: 16px; page-break-inside: avoid; border: 1px solid #999; border-radius: 6px; padding: 10px; }
  .p-driver h3 { font-size: 12pt; margin-bottom: 2px; }
  .p-driver .p-meta { font-size: 9pt; color: #444; margin-bottom: 8px; }
  .p-load { border-top: 1px solid #ccc; padding-top: 7px; margin-top: 7px; }
  .p-load .p-num { font-weight: 700; font-family: monospace; }
  .p-stop { font-size: 10pt; margin-left: 12px; }
  .p-sign { margin-top: 10px; font-size: 9pt; color: #444; }
}

/* ---------- Print this tab: body[data-print="view"] ----------
   Without the flag, printing gives the dispatch sheet above. With it (set by script just before window.print() on any tab
   other than the timeline, cleared on afterprint) the paper gets the open tab's own table or list instead: full width,
   column headings repeated on every page, no navigation, filters, buttons, sticky headers or shadows. The colour tokens are
   put back to ink-on-white for everything inside, so dark mode and the dark looks still print black on white. */
@media print {
  body[data-print="view"] {
    --bg: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #f1f1f1; --border: #c8c8c8; --border-strong: #8a8a8a;
    --ink: #000; --ink-muted: #333; --ink-faint: #555; --accent: #000; --accent-soft: #f1f1f1; --accent-ink: #fff; --on-status: #fff;
    --status-available: #05603F; --status-available-soft: #fff; --status-transit: #144FB0; --status-transit-soft: #fff;
    --status-risk: #7A4A00; --status-risk-soft: #fff; --status-critical: #A8182D; --status-critical-soft: #fff;
    --status-offduty: #4A5168; --status-offduty-soft: #fff;
  }
  body[data-print="view"] #printSheet { display: none !important; }
  body[data-print="view"] .board:not([hidden]) { display: block !important; margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; animation: none !important; }
  body[data-print="view"] .board, body[data-print="view"] .board * { box-shadow: none !important; text-shadow: none !important; }
  /* Everything that is a control rather than content. */
  body[data-print="view"] .board :is(.bill-nav, .bill-sub, .int-nav, .view-bar, .bulk-bar, .row-actions, .checkbox-cell, .rep-side, .rep-actions,
    .rep-toolbar, .rep-row-actions, .pf-head-actions, .ibx-side, .credit-kpis, .btn, .mini, .mini-link, .linklike, .icon-btn, .hlp-q, .search, select.filter, .pf-caret) { display: none !important; }
  body[data-print="view"] .board :is(.rep-builder, .ibx-layout, .rep-grid) { display: block; min-height: 0; }
  body[data-print="view"] .board :is(.rep-card, .bill-section, .rep-main) { padding: 0; border: 0; margin: 0 0 12pt; }
  body[data-print="view"] .board .table-wrap { overflow: visible !important; margin: 0; border: 0; border-radius: 0; }
  body[data-print="view"] .board table { width: 100% !important; border-collapse: collapse; font-size: 9pt; }
  body[data-print="view"] .board thead { display: table-header-group; }
  body[data-print="view"] .board tfoot { display: table-footer-group; }
  body[data-print="view"] .board tr { break-inside: avoid; page-break-inside: avoid; }
  body[data-print="view"] .board :is(thead, th, td) { position: static !important; }
  body[data-print="view"] .board th { padding: 4pt 5pt; background: none; color: #000; border-bottom: 1.5pt solid #000; }
  body[data-print="view"] .board td { padding: 4pt 5pt; border-bottom: 0.5pt solid #bbb; white-space: normal; max-width: none; overflow: visible; }
}

.login-screen { position: fixed; inset: 0; z-index: var(--z-screen); display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 24px; }
.login-card h1 { font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.login-card .sub { color: var(--ink-faint); font-size: var(--fs-sm); margin-bottom: 18px; }
.login-card .field { margin-bottom: 12px; }
.login-card label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-muted); margin-bottom: 4px; }
.login-card input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: min(var(--ctl-radius), 10px); background: var(--surface-2); color: var(--ink); font: inherit; }
.login-card button { width: 100%; margin-top: 6px; }
.login-error { color: var(--status-critical); font-size: var(--fs-md); margin-top: 10px; min-height: 1em; }

/* ---------- Phase 1: container data, equipment, problems, saved views ---------- */
/* The red flag is one rule: .flag-tag on loads, .bill-flag on billing lines, .pf-flag on Profit. */
.flag-tag, .bill-flag, .pf-flag { display: inline-block; background: var(--status-critical-soft); color: var(--status-critical); }
.flag-tag { vertical-align: 1px; }
.bill-flag, .pf-flag { white-space: nowrap; }
.bill-flag { font-family: "Public Sans", sans-serif; } /* it also sits in monospace money cells */
.check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 2px 0 12px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); text-transform: none; font-weight: 500; letter-spacing: 0; cursor: pointer; }
.check-inline input { width: auto; margin: 0; }
.login-remember { margin: 2px 0 12px; color: var(--ink-muted); }
.hint.hint-ok { color: var(--status-available); }
.hint.hint-bad { color: var(--status-critical); }
.view-bar { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.view-bar .fleet-chip { font: inherit; font-size: 12px; cursor: pointer; }
.col-picker { position: absolute; z-index: var(--z-pop); width: 220px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.col-picker label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; cursor: pointer; }
.col-picker input { width: auto; margin: 0; }
.tab .count-pill { margin-left: 4px; padding: 1px 6px; }

/* ---------- Moves ---------- */
.move-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px 12px; margin-bottom: 12px; background: var(--surface-2); }
.move-card.done { opacity: 0.8; }
.move-card .stop-row { background: var(--surface); }
.move-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.move-head .tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.move-head .ctrls { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.stop-head select.mini { width: auto; padding: 1px 4px; font-size: 11px; height: auto; }
#opportunityBanner { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#opportunityBanner[hidden] { display: none; }

/* ---------- Icons ----------
   One drawn set, defined once as #ic-* symbols at the top of index.html and used as <svg class="ico"><use href="#ic-…"></use></svg>
   (ico() in shared.js writes that from script). They inherit the current text colour, so every theme, top bar wallpaper and dark
   mode works on them without a second file. A few places still use a <span class="ico"> with a character in it; that keeps working. */
.ico-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.ico { flex: none; width: 17px; height: 17px; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.btn svg.ico, .tab svg.ico { width: 16px; height: 16px; }
.btn.small svg.ico { width: 14px; height: 14px; }
.date-nav button svg.ico { display: block; width: 15px; height: 15px; }
.tools-pop svg.ico { width: 20px; height: 20px; margin-top: 2px; }

/* Each icon carries its own hue in --ic, set on the button so the tint behind it can use the same colour. At rest the hue is
   mixed with the text colour around it, so a row of buttons stays calm and keeps its contrast on any theme, wallpaper or in
   dark mode; on hover (css/polish.css) the full hue comes through. No --ic at all falls back to plain currentColor. */
:root {
  --ic-red: #DD564A; --ic-orange: #D97F2E; --ic-amber: #BE8C12; --ic-green: #12A067; --ic-teal: #0F9E9E;
  --ic-blue: #2C83DE; --ic-indigo: #5A63DC; --ic-violet: #8757EE; --ic-pink: #D6549A; --ic-slate: #67718C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ic-red: #FF8478; --ic-orange: #F0A05F; --ic-amber: #E6B950; --ic-green: #45D097; --ic-teal: #3FCDCB;
    --ic-blue: #6DAEFF; --ic-indigo: #8C95FF; --ic-violet: #B389FF; --ic-pink: #FF8CBE; --ic-slate: #99A3C0;
  }
}
:root[data-theme="dark"] {
  --ic-red: #FF8478; --ic-orange: #F0A05F; --ic-amber: #E6B950; --ic-green: #45D097; --ic-teal: #3FCDCB;
  --ic-blue: #6DAEFF; --ic-indigo: #8C95FF; --ic-violet: #B389FF; --ic-pink: #FF8CBE; --ic-slate: #99A3C0;
}
svg.ico { stroke: color-mix(in srgb, var(--ic, currentColor) 58%, currentColor); }

/* The top bar, left to right. */
#btnGps { --ic: var(--ic-red); }
#btnLive { --ic: var(--ic-green); }
#btnPlan { --ic: var(--ic-amber); }
#btnSettings { --ic: var(--ic-indigo); }
#btnTheme { --ic: var(--ic-violet); }
#btnTools { --ic: var(--ic-orange); }
#btnHelp { --ic: var(--ic-blue); }
#btnLogout { --ic: var(--ic-slate); }

/* The few toolbar buttons and tabs that stand for something; Undo, Redo, Columns and Print stay the colour of their text. */
#tabMap { --ic: var(--ic-teal); }
#btnPlanDay { --ic: var(--ic-violet); }
#btnBrokerage { --ic: var(--ic-indigo); }
.tools-pop a:nth-child(1) { --ic: var(--ic-blue); }
.tools-pop a:nth-child(2) { --ic: var(--ic-teal); }
.tools-pop a:nth-child(3) { --ic: var(--ic-amber); }

/* ---------- Header, navigation and toolbar ---------- */
.topbar { flex-wrap: wrap; gap: 12px 16px; }
.top-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.top-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--top-btn-radius); background: transparent; color: var(--ink-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.top-btn:hover { background: var(--surface); border-color: var(--border); color: var(--ink); }
.top-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.top-btn .ico { font-size: 15px; line-height: 1; }
.top-divider { width: 1px; height: 22px; background: var(--border); margin: 0 8px; }
.top-btn[data-user-off] { display: none !important; } /* hidden by this person in Settings › You › My top bar */
/* Hosted service: the trial chip in the top bar (js/subscription.js). Quiet while there is time left, warmer in the
   last week, red once the trial is over — the same three colours the plan banner uses, so light and dark both work. */
.plan-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.plan-cap-btns { display: inline-flex; gap: 6px; }
.plan-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--status-transit); border-radius: 999px; background: var(--status-transit-soft); color: var(--status-transit); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; margin-right: 6px; cursor: pointer; }
.plan-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.plan-chip:hover { filter: brightness(0.97); }
.plan-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-chip[data-tone="soon"] { border-color: var(--status-risk); background: var(--status-risk-soft); color: var(--status-risk); }
.plan-chip[data-tone="over"] { border-color: var(--status-critical); background: var(--status-critical-soft); color: var(--status-critical); }
.user-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: var(--fs-md); color: var(--ink); margin-right: 4px; }
.user-chip strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a long name mustn't wrap the top bar */
.user-chip .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.date-nav button.today { font-size: 11px; font-weight: 600; }
.date-nav .cur { cursor: pointer; }

/* Date picker calendar (#dPop), opened from the date in the top bar; placed by openDatePop() */
.date-pop { position: fixed; z-index: var(--z-pop); width: 252px; padding: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: var(--fs-md); }
.date-pop button { font: inherit; color: inherit; background: transparent; border: none; cursor: pointer; border-radius: clamp(0px, calc(var(--ctl-radius) - 4px), 999px); }
.date-pop button:hover { background: var(--surface-3); }
.date-pop button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.date-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.date-pop-head strong { font-size: 13px; }
.date-pop-head button { width: 28px; height: 28px; font-size: 16px; line-height: 1; color: var(--ink-muted); }
.date-pop-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.date-pop-grid .wd { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-faint); padding: 4px 0; }
.date-pop .day { height: 30px; font-variant-numeric: tabular-nums; }
.date-pop .day.out { color: var(--ink-faint); }
.date-pop .day.today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
.date-pop .day.sel, .date-pop .day.sel:hover { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.date-pop-foot { display: flex; justify-content: flex-end; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.date-pop-foot button { padding: 5px 10px; font-weight: 600; color: var(--accent); }
@media print { .date-pop { display: none !important; } }

/* Tools menu (🧰 Tools in the top bar), placed by js/tools-menu.js */
.tools-pop { position: fixed; z-index: var(--z-pop); width: min(320px, calc(100vw - 16px)); padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.tools-pop a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: clamp(0px, calc(var(--ctl-radius) - 2px), 12px); color: inherit; text-decoration: none; }
.tools-pop a:hover, .tools-pop a:focus-visible { background: var(--surface-3); outline: none; }
.tools-pop a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tools-pop .ico { font-size: 18px; line-height: 1.2; }
.tools-pop b { display: block; font-size: 13px; }
.tools-pop small { display: block; font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.35; margin-top: 1px; }
.tools-pop-help { border-top: 1px solid var(--border); margin-top: 4px; padding: 6px 10px 2px; }
@media print { .tools-pop { display: none !important; } }

.tabbar { margin: -2px 0 14px; border-bottom: 1px solid var(--border); }
.tabbar .tabs { background: transparent; padding: 0; gap: 0; border-radius: 0; flex-wrap: wrap; }
.tabbar .tab { border-radius: var(--tab-radius); padding: 10px 14px 9px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover:not([aria-selected="true"]) { color: var(--ink); }
.tabbar .tab:hover { color: var(--ink); }
.tabbar .tab[aria-selected="true"] { background: var(--tab-sel-bg); box-shadow: none; color: var(--tab-sel-ink); border-bottom-color: var(--tab-sel-line); }
/* "? About this tab" (js/help-tips.js) at the right end of the tab bar; just the "?" on phones. */
.tabbar { display: flex; align-items: center; gap: 8px; }
.tabbar .tabs { flex: 1; min-width: 0; }
.tabbar .tabbar-help { flex: none; margin-bottom: 2px; }
@media (max-width: 760px) { .tabbar .hlp-q.tabbar-help { font-size: 0; gap: 0; padding: 6px; } }

.toolbar .fleet-chip { cursor: pointer; }
.tool-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tool-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }

/* Hover tooltips for header and toolbar controls: data-tip="…", data-tip-align="left|right" near screen edges. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: var(--z-tip);
  width: max-content; max-width: 280px; padding: 7px 10px; border-radius: 7px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow);
  font: 500 12px/1.4 "Public Sans", -apple-system, sans-serif; text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s ease, visibility 0s linear .12s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transition: opacity .12s ease .4s, visibility 0s linear .4s; }
[data-tip-align="right"]::after { left: auto; right: 0; transform: none; }
[data-tip-align="left"]::after { left: 0; transform: none; }

@media (max-width: 760px) { .top-btn .lbl { display: none; } .top-divider { display: none; } .tool-sep { display: none; } }

/* Toolbar in two deliberate rows instead of one wrapping line. */
.toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
.toolbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-row .spacer { min-width: 8px; }

/* Focused tabs: the day's panels belong to the dispatch tabs (Timeline, Map, Loads table, Problems). Every other tab opens
   straight onto its own content; render.js sets body[data-tab-kind]. Undo / Redo move up beside the create buttons. */
body[data-tab-kind="office"] :is(#fleetStrip, #kpiStrip, #attentionPanel, #portStatusPanel, #unassignedBanner, #recurringBanner, #opportunityBanner) { display: none !important; }
body[data-tab-kind="office"] .toolbar-row:nth-child(2) > :is(.tool-sep, .tool-group:last-child) { display: none; }
body[data-tab-kind="office"] .toolbar { flex-direction: row; align-items: center; }
body[data-tab-kind="office"] .toolbar-row:first-child { flex: 1 1 320px; }
body[data-tab-kind="office"] .toolbar-row:nth-child(2) { flex: none; }
body[data-tab-kind="office"] .toolbar-row:nth-child(2) > .spacer { display: none; }

/* Top bar on laptop screens: the less-used buttons drop their words (the tooltip and screen-reader name stay) so the bar
   keeps to one row instead of wrapping under the date. */
@media (min-width: 761px) and (max-width: 1540px) {
  :is(#btnTheme, #btnTools, #btnHelp, #btnLogout) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :is(#btnTheme, #btnTools, #btnHelp, #btnLogout) { width: 34px; padding: 0; justify-content: center; position: relative; }
}

/* ---------- driver app (dispatcher side) ---------- */
.gps-line.clock { color: var(--status-available); }
.gps-line.ready { color: var(--status-risk); font-weight: 700; white-space: normal; }
.load-block .inline-badge.ack-wait, .load-block .inline-badge.ack-no { background: #FFF3D6; color: #7A4B00; }
.load-block .inline-badge.ack-ok { background: rgba(255,255,255,0.34); }
.rules-grid { margin: 10px 0 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.rules-head { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--ink-muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.rules-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); align-items: start; }
.rules-grid details > summary { padding: 8px 10px; font-size: var(--fs-sm); color: var(--ink-muted); cursor: pointer; }
.rules-grid details[open] > summary { border-bottom: 1px solid var(--border); }
.rules-stop { font-size: var(--fs-md); font-weight: 600; padding-top: 4px; }
.chipbox { display: flex; flex-wrap: wrap; gap: 5px; }
.chipbox label { position: relative; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 12px; cursor: pointer; -webkit-user-select: none; user-select: none; color: var(--ink-muted); background: var(--surface); }
.chipbox label.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chipbox label:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.chipbox input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.req-box { display: grid; gap: 6px; margin: 2px 0 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.req-stop { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: var(--fs-md); }
.req-stop-name { font-weight: 600; margin-right: 3px; }
.req-chip { display: inline-block; white-space: nowrap; }
.req-chip.ok { background: var(--status-available-soft); color: var(--status-available); }
.req-chip.miss { background: var(--status-risk-soft); color: var(--status-risk); }
.doc-meta-row { margin-top: 5px; }
.doc-meta-row select { width: auto; max-width: 100%; padding: 3px 6px; font-size: 12px; }
.msg-att { display: inline-block; margin-top: 4px; font-size: var(--fs-md); font-weight: 600; color: var(--accent); text-decoration: none; }
.place-row { padding: 9px 0; border-bottom: 1px dashed var(--border); }
.place-row .t-name { font-weight: 600; font-size: 13px; }
.place-row .t-sub { font-size: 12px; color: var(--ink-muted); }
.place-edit { margin-top: 6px; align-items: center; gap: 6px; }
.place-edit input { min-width: 0; padding: 5px 7px; font-size: var(--fs-md); }
.tr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); margin-bottom: 4px; }
.tr-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); border-bottom: 1px solid var(--border); padding: 4px; }
.tr-table td { padding: 5px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tr-table .tr-note td { color: var(--ink-muted); font-size: var(--fs-sm); border-bottom-style: dashed; padding-top: 0; }
.tr-table .row-actions { justify-content: flex-end; }

/* ---------- Phase 3: billing ---------- */
/* One shape for sub-navigation: underline tabs. .bill-nav is the pattern (Billing, Settlements, Orders, Equipment, Reports,
   and Security as .bill-nav.sec-nav). .int-nav (Integrations, Texting, Accounting) is built from .fleet-chip buttons, with
   .active-filter marking the open section in Accounting; here they take the same declarations so they read as the same control.
   The grow-in underline is in css/polish.css. To back out: drop the .int-nav selectors from these lists and delete the reset rule. */
.bill-nav, .int-nav { display: flex; flex-wrap: wrap; padding: 0 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.bill-nav .tab, .int-nav .fleet-chip { border-radius: 0; padding: 11px 12px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bill-nav .tab:hover, .int-nav .fleet-chip:hover { color: var(--ink); }
.bill-nav .tab[aria-selected="true"], .int-nav .fleet-chip.active-filter { background: transparent; box-shadow: none; color: var(--accent); border-bottom-color: var(--accent); }
/* What a .fleet-chip brings that a .tab does not: its pill border, fill, shadow, lift on hover and the selected ring. */
.int-nav .fleet-chip, .int-nav .fleet-chip:hover, .int-nav .fleet-chip.active-filter { border-top: 0; border-left: 0; border-right: 0; background: transparent; box-shadow: none; transform: none; font: inherit; font-size: var(--fs-md); font-weight: 600; }
.int-nav .fleet-chip strong { font-size: var(--fs-sm); }
.field.bill-inline { margin: 0; }
.field.bill-inline input, .field.bill-inline select { padding: 6px 8px; }
.bill-kpis { padding: 16px; margin: 0; }
.kpi-card .kpi-sub { font-size: 11px; color: var(--ink-faint); }
.bill-sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.bill-section { padding: 16px; }
.bill-neg { color: var(--status-critical); }
.bill-warn { color: var(--status-risk); }
table.loads td.bill-empty, .bill-empty { text-align: center; color: var(--ink-muted); padding: 26px; }
.bill-note { padding: 9px 11px; border-radius: 8px; font-size: var(--fs-sm); margin-bottom: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-muted); }
.bill-note.warn { background: var(--status-risk-soft); border-color: transparent; color: var(--ink); }
.bill-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 4px 0 14px; }
.bill-kv div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bill-kv span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; }
.bill-kv strong { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-lg); font-weight: 600; }
.bill-lines { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.bill-lines td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: top; }
.bill-lines td.amt { text-align: right; font-family: "IBM Plex Mono", monospace; white-space: nowrap; padding-left: 12px; }
.bill-lines tr.grp td { background: var(--surface-2); font-weight: 600; }
.ci-load { padding: 8px 0 4px; border-top: 1px dashed var(--border); }
.ci-load-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.ci-load-head .load-id { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.ci-load-head .sub { color: var(--ink-faint); font-size: var(--fs-sm); }
.ci-load-head .mono { margin-left: auto; }
.move-head .ctrls strong { margin-right: 6px; }
.auto-tag { display: inline-block; background: var(--status-transit-soft); color: var(--status-transit); vertical-align: 1px; }
.margin-line { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 11px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-sm); margin: 8px 0 12px; color: var(--ink-muted); }
.margin-line strong { font-family: "IBM Plex Mono", monospace; color: var(--ink); }
.evidence-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-md); }
.evidence-row a { color: var(--accent); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-row .row-actions { margin-left: auto; }
table.loads tr.clickable { cursor: pointer; }
table.loads tr.clickable:hover td { background: var(--surface-2); }
table.loads tr.rule-off td { color: var(--ink-faint); }
table.loads tr.aging-inv td { background: var(--surface-2); font-size: 12px; padding-top: 7px; padding-bottom: 7px; }
.req-chip:not(.ok):not(.miss) { background: var(--surface-3); color: var(--ink-muted); }
.mini-link { border: none; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.mini-link:hover, .linklike:hover { text-decoration-thickness: 2px; }
.mini-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.drawer .mini { background: none; border: 1px solid var(--border-strong); border-radius: 5px; color: var(--ink-muted); cursor: pointer; font-size: 11px; padding: 1px 6px; line-height: 1.5; }
.drawer .mini:hover { color: var(--ink); }
.drawer .mini.rm { color: var(--status-critical); border-color: var(--status-critical); }

/* ---------- Phase 4: settlements ---------- */
.pay-note { margin: -4px 0 10px; padding: 7px 10px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--border); font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
.pay-note strong { font-family: "IBM Plex Mono", monospace; color: var(--ink); }
.pay-note .mono { font-family: "IBM Plex Mono", monospace; color: var(--ink); }
.pay-note .move-tag { margin-right: 4px; }
.pay-lines { margin-top: 4px; display: grid; gap: 1px; }
.pay-lines div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); color: var(--ink-muted); }
.pay-lines .mono { font-family: "IBM Plex Mono", monospace; white-space: nowrap; }
table.loads td select.pa-method { padding: 4px 6px; font-size: 12px; }
table.loads td input.pa-rate, table.loads td input.pa-free, table.loads td input.pa-min, table.loads td input.pa-max { padding: 4px 6px; font-size: 12px; }
.bill-lines .sub { display: block; font-size: var(--fs-sm); color: var(--ink-faint); margin-top: 1px; }
.bill-lines .bill-flag { margin-top: 3px; }

/* ---------- Orders tab and customer portal admin (Phase 5) ---------- */
.drawer.wide { width: min(1180px, 97vw); }
.status-pill.critical { background: var(--status-critical-soft); color: var(--status-critical); }
.flag-tag.rtr { background: var(--status-available-soft); color: var(--status-available); border-color: transparent; }
table.ord-table td { padding: 5px 5px; vertical-align: middle; }
table.ord-table th { padding: 8px 5px; white-space: nowrap; }
table.ord-table input:not([type=checkbox]), table.ord-table select { width: 100%; min-width: 60px; border: 1px solid var(--border); border-radius: min(var(--ctl-radius), 10px); padding: 5px 6px; font: inherit; font-size: 12px; background: var(--surface-2); color: var(--ink); }
table.ord-table tr.created td { opacity: .55; }
.ord-warn { font-size: 11px; color: var(--status-risk); min-width: 130px; line-height: 1.3; }
.ord-warn.okay { color: var(--status-available); }
tr.unseen td { background: var(--accent-soft); }
@supports (color: color-mix(in srgb, red 50%, blue)) { tr.unseen td { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); } }
.link-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; background: var(--surface-2); }
.link-row.off { opacity: .55; }
.link-row .url { font-family: "IBM Plex Mono", monospace; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.tpl-preview { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); white-space: pre-wrap; font-size: 13px; margin-bottom: 12px; }
.field label.check-inline, .field .check-row label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--ink); }

/* ---------- Phase 6: reports ---------- */
.rep-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rep-toolbar .empty-hint { margin: 0; flex: 1; }
.rep-dash-head { padding: 14px 16px 0; }
.rep-dash-head h2, .rep-main-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.rep-dash-head p { margin: 3px 0 0; color: var(--ink-muted); font-size: var(--fs-sm); }
.rep-period { display: inline-block; margin-left: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-muted); white-space: nowrap; }
.rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px 16px 18px; }
.rep-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; min-width: 0; }
.rep-card.wide { grid-column: 1 / -1; }
.rep-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rep-card h3 { margin: 0; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); }
.rep-card .table-wrap { margin: 0 -14px -12px; border-top: 1px solid var(--border); }
.rep-card .rep-more { padding: 8px 0 0; }
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.rep-kpis .kpi-card { box-shadow: none; background: var(--surface-2); }
.rep-bars { display: grid; gap: 6px; }
.rep-bar { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--fs-md); padding: 1px 0; }
.rep-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rep-bar-track { display: block; height: 12px; }
.rep-bar-fill { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: 0 4px 4px 0; }
.rep-bar-fill.neg { background: var(--status-critical); }
.rep-bar:hover .rep-bar-fill, .rep-col:hover .rep-col-fill { filter: brightness(1.15); }
.rep-bar:hover .rep-bar-label { text-decoration: underline; text-underline-offset: 2px; }
.rep-bar-value { min-width: 64px; text-align: right; white-space: nowrap; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--ink); }
.rep-cols { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.rep-cols-scale { display: flex; flex-direction: column; justify-content: space-between; height: 150px; text-align: right; font: 500 var(--fs-xs) "IBM Plex Mono", monospace; color: var(--ink-faint); }
.rep-cols-plot { display: flex; gap: 2px; min-width: 0; }
.rep-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; cursor: default; }
.rep-col-area { display: flex; align-items: flex-end; height: 150px; border-bottom: 1px solid var(--border-strong); }
.rep-col-fill { display: block; width: 100%; max-width: 34px; margin: 0 auto; background: var(--accent); border-radius: 4px 4px 0 0; }
.rep-col-fill.neg { background: var(--status-critical); }
.rep-col-x { height: 13px; font-size: 11px; color: var(--ink-faint); white-space: nowrap; text-align: center; }
.rep-builder { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 540px; }
.rep-side { padding: 2px 14px 16px; background: var(--surface-2); border-right: 1px solid var(--border); }
.rep-side select, .rep-side input { width: 100%; box-sizing: border-box; padding: 6px 8px; font: inherit; font-size: var(--fs-md); color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: min(var(--ctl-radius), 10px); }
.rep-side select:disabled { opacity: 0.55; }
.rep-step { padding: 12px 0; border-bottom: 1px solid var(--border); }
.rep-step:last-child { border-bottom: none; }
.rep-label { display: block; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.rep-label .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rep-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-muted); }
.rep-period-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-period-row .field { flex: 1 1 120px; margin: 0; }
.rep-seg { display: flex; }
.rep-seg .tab { flex: 1; }
.rep-list { display: grid; gap: 4px; margin-bottom: 6px; }
.rep-list:empty { display: none; }
.rep-item { display: flex; align-items: center; gap: 4px; padding: 4px 6px; font-size: var(--fs-md); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.rep-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-item-controls { display: flex; align-items: center; gap: 4px; }
.rep-item-controls select, .rep-item-controls input { flex: 1; min-width: 0; width: auto; }
.rep-filter { display: grid; gap: 4px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.rep-and { font-size: var(--fs-sm); color: var(--ink-faint); }
.rep-links { margin-top: 6px; font-size: 12px; color: var(--ink-faint); }
.rep-side .mini { flex: none; padding: 1px 6px; line-height: 1.5; font-size: 11px; color: var(--ink-muted); background: none; border: 1px solid var(--border-strong); border-radius: 5px; cursor: pointer; }
.rep-side .mini:hover:not(:disabled) { color: var(--ink); }
.rep-side .mini:disabled { opacity: 0.35; cursor: default; }
.rep-side .mini.rm { color: var(--status-critical); border-color: var(--status-critical); }
.rep-main { min-width: 0; padding: 14px 16px 18px; }
.rep-main-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rep-status { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.rep-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rep-badge { display: inline-block; vertical-align: 3px; background: var(--status-transit-soft); color: var(--status-transit); }
.rep-result { transition: opacity 0.15s ease; }
.rep-result.busy { opacity: 0.55; }
.rep-chart { margin-bottom: 12px; }
.rep-result > .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.rep-table th.num, table.rep-table td.num, table.loads td.num, table.loads th.num { text-align: right; }
table.rep-table td { padding-top: 8px; padding-bottom: 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
table.rep-table th { white-space: nowrap; }
table.rep-table td.num { white-space: nowrap; font-family: "IBM Plex Mono", monospace; }
table.rep-table tr.rep-total td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--border-strong); }
.rep-more { padding: 8px 2px; font-size: 12px; color: var(--ink-faint); }
.rep-wrap { max-width: 240px; word-break: break-word; }
.rep-row-actions { white-space: nowrap; }
.rep-row-actions .btn + .btn { margin-left: 4px; }
.rep-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.rep-starter { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; }
.rep-starter:hover { border-color: var(--accent); }
.rep-starter strong { font-size: 13px; }
.rep-starter span { font-size: var(--fs-sm); color: var(--ink-faint); }
@media (max-width: 900px) {
  .rep-builder { grid-template-columns: 1fr; }
  .rep-side { border-right: none; border-bottom: 1px solid var(--border); }
  .rep-grid { grid-template-columns: 1fr; }
}

/* ---------- Phase 7: integrations & AI ---------- */
.track-kv strong { font-family: inherit; font-size: 13px; }
.track-events { max-height: 220px; overflow: auto; }
.ibx-cell { max-width: 460px; }
.ibx-subject { font-weight: 600; }
table.loads td .sub.ibx-snippet, .ibx-snippet { font-family: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.ibx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.ibx-side { display: grid; gap: 10px; position: sticky; top: 0; }
.ibx-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-2); }
.ibx-card-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 6px; }
.ibx-card select, .ibx-card input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
.ibx-summary { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.ibx-actions { margin: 0 0 8px; padding-left: 18px; font-size: var(--fs-md); line-height: 1.45; }
.ibx-load { position: relative; padding: 5px 24px 5px 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-md); }
.ibx-load:last-of-type { border-bottom: none; }
.ibx-load .mini { position: absolute; right: 0; top: 5px; }
.ibx-tags, .ibx-docs { display: flex; flex-direction: column; gap: 3px; }
.ibx-msg { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
.ibx-msg.out { background: var(--surface-2); margin-left: 28px; }
.ibx-msg-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ibx-msg-head span { font-size: var(--fs-sm); color: var(--ink-faint); }
.ibx-msg-to { font-size: var(--fs-sm); color: var(--ink-faint); margin: 2px 0 8px; word-break: break-all; }
.ibx-msg-body { white-space: pre-wrap; font-size: 13px; line-height: 1.5; word-break: break-word; }
.ibx-msg-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 8px; }
.assist-box { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 8px 10px; margin: -2px 0 10px; }
.assist-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; font-size: var(--fs-md); }
.assist-head .mini { margin-left: auto; }
.assist-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--border); }
.assist-score { min-width: 34px; text-align: center; font: 700 13px "IBM Plex Mono", monospace; color: var(--accent); }
.assist-row.busy .assist-score { color: var(--status-risk); }
.assist-body { flex: 1; min-width: 0; font-size: var(--fs-md); }
.assist-body .req-chip { margin-left: 4px; }
.int-nav { margin: 0 0 14px; border-radius: 8px 8px 0 0; } /* same place in a drawer as .sec-nav; the tab look is with .bill-nav above */
.int-secret { font-family: "IBM Plex Mono", monospace; font-size: 12px; word-break: break-all; padding: 8px 10px; border-radius: 6px; background: var(--surface); border: 1px dashed var(--border-strong); color: var(--ink); }
.int-row { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface-2); }
.int-row.off { opacity: 0.6; }
.int-deliveries { font-size: 12px; }
.int-deliveries div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px dashed var(--border); }
.banner-recurring > span + .btn + span { margin-left: 14px; }
@media (max-width: 900px) {
  .ibx-layout { grid-template-columns: 1fr; }
  .ibx-side { position: static; }
}

/* ---------- brokerage (js/brokerage.js) ---------- */
.lane-head { padding: 7px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lane-head .hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.driver-row.carrier-row .driver-id { background: var(--surface-2); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .driver-row.carrier-row .driver-id { background: color-mix(in srgb, var(--surface-2) 70%, transparent); } }
.load-block.brokered { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.13) 0 6px, transparent 6px 12px); }
.broker-move { margin: 2px 0 8px; }
.broker-panel { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 6px 0 10px; background: var(--surface-2); overflow-x: auto; }
.broker-panel table:not(.loads) { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.broker-panel table:not(.loads) td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.broker-panel .sub { display: block; color: var(--ink-muted); font-size: var(--fs-sm); }
.broker-issue { display: inline-block; margin: 2px 4px 0 0; background: var(--status-risk-soft); color: var(--status-risk); }
.broker-issue.block { background: var(--status-critical-soft); color: var(--status-critical); }
.link-box { display: flex; gap: 6px; margin-top: 8px; }
.link-box input { flex: 1; font-family: "IBM Plex Mono", monospace; font-size: var(--fs-sm); }

/* ---------- Phase 9: sign-in codes, two-factor setup, My account, Security & audit, Plan & billing ---------- */
.linklike, .login-card .linklike { width: auto; margin: 0; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-md); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.login-help { font-size: 13px; color: var(--ink-muted); margin: 0 0 12px; }
.login-links { display: flex; justify-content: space-between; gap: 10px; margin: -2px 0 12px; }
.login-notice { background: var(--status-critical-soft); color: var(--status-critical); border-radius: 8px; padding: 9px 11px; font-size: 13px; margin-bottom: 14px; line-height: 1.45; }
.login-card #loginCode { font-family: "IBM Plex Mono", monospace; font-size: 22px; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.enroll-card { max-width: 440px; max-height: calc(100vh - 32px); overflow-y: auto; }
.totp-steps { margin: 0 0 8px; padding-left: 20px; font-size: 13px; color: var(--ink); line-height: 1.5; }
.totp-steps li { margin-bottom: 16px; padding-left: 2px; }
.totp-steps li::marker { font-weight: 700; color: var(--accent); }
.totp-qr { background: #fff; border-radius: 10px; padding: 6px; width: fit-content; margin: 10px 0 8px; border: 1px solid var(--border); }
.totp-qr svg { display: block; width: 180px; height: 180px; }
.totp-manual summary { font-size: 12px; color: var(--ink-muted); cursor: pointer; }
.totp-secret { font-size: 14px; letter-spacing: 0.08em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; margin: 6px 0 4px; word-break: break-all; -webkit-user-select: all; user-select: all; }
.totp-confirm { display: flex; gap: 8px; margin-top: 8px; }
.totp-confirm input { flex: 1; min-width: 0; font-family: "IBM Plex Mono", monospace; font-size: 18px; letter-spacing: 0.25em; text-align: center; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: min(var(--ctl-radius), 10px); background: var(--surface-2); color: var(--ink); }
.login-card .totp-confirm button, .login-card .totp-foot button, .login-card .row-actions button { width: auto; margin-top: 0; }
.login-card .recovery-check + button { width: 100%; }
.totp-foot { margin-top: 2px; }
.recovery-title { font-size: 16px; margin: 0 0 6px; }
.recovery-help { font-size: 13px; color: var(--ink-muted); margin: 0 0 12px; line-height: 1.5; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 12px 14px; font-size: 14px; margin-bottom: 10px; }
.recovery-check { display: flex; margin: 12px 0 10px; }
.acct-card { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink); margin-bottom: 10px; line-height: 1.5; }
.acct-card .status-pill { flex: none; margin-top: 2px; }
.acct-flow:not(:empty) { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 10px 0 4px; background: var(--surface-2); }
.acct-flow .totp-steps { margin-top: 2px; }
.acct-hint { margin: 0 0 8px; }
button.user-chip { cursor: pointer; font: inherit; font-size: var(--fs-md); }
button.user-chip:hover { border-color: var(--ink-faint); }
button.user-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.plan-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 9px 14px; border-radius: var(--radius); font-size: 13px; border: 1px solid; }
.plan-banner strong { text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-sm); }
.plan-banner span { flex: 1; min-width: 220px; color: var(--ink); }
.plan-banner.info { background: var(--status-transit-soft); color: var(--status-transit); border-color: var(--status-transit); }
.plan-banner.risk { background: var(--status-risk-soft); color: var(--status-risk); border-color: var(--status-risk); }
.plan-banner.critical { background: var(--status-critical-soft); color: var(--status-critical); border-color: var(--status-critical); }

.sec-nav { margin: 0 0 14px; border-radius: 8px 8px 0 0; }
.sec-foot { margin-top: 10px; }
.sec-others summary { cursor: pointer; margin: 4px 0 8px; }
.audit-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.audit-filters .audit-search { grid-column: 1 / -1; }
.audit-actions { align-items: center; margin: 0 0 12px; }
.audit-actions .spacer { flex: 1; }
.audit-table td { font-size: var(--fs-md); vertical-align: top; }
.audit-table .linklike { font-size: var(--fs-md); }
.nowrap { white-space: nowrap; }
.text-critical { color: var(--status-critical); }
.restore-log { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; margin-top: 12px; }

.plan-current { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); margin-bottom: 10px; }
.plan-name { font-family: var(--font-head); font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.plan-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.plan-meter { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; }
.plan-meter-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-muted); margin-bottom: 6px; }
.plan-meter-bar { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.plan-meter-bar span { display: block; height: 100%; background: var(--status-available); }
.plan-meter-bar span.near { background: var(--status-risk); }
.plan-meter-bar span.full { background: var(--status-critical); }
.plan-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.plan-module { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-md); padding: 6px 8px; border-radius: 6px; line-height: 1.35; }
.plan-module.on { background: var(--status-available-soft); }
.plan-module.off { color: var(--ink-faint); }
.plan-module small { display: block; font-size: 11px; color: var(--ink-muted); }
.plan-check { font-weight: 700; width: 14px; flex: none; }
.plan-module.on .plan-check { color: var(--status-available); }
.plan-interval { display: inline-flex; gap: 4px; background: var(--surface-3); padding: 3px; border-radius: 999px; margin-bottom: 10px; }
.plan-interval .tab small { font-size: var(--fs-xs); color: var(--status-available); margin-left: 4px; font-weight: 600; }
.plan-cards { display: grid; gap: 8px; margin-bottom: 12px; }
.plan-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 11px 13px; cursor: pointer; background: var(--surface); }
.plan-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.plan-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-card-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.plan-price { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-size: 18px; font-weight: 700; white-space: nowrap; }
.plan-price small { font-size: 11px; font-weight: 500; color: var(--ink-muted); }
.plan-desc { grid-column: 1; font-size: var(--fs-sm); color: var(--ink-muted); }
.plan-limits { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--ink-faint); }
.plan-addons { display: grid; gap: 8px; }
.plan-addon { align-items: flex-start; }
.plan-addon input { margin-top: 3px; }
.plan-addon small { display: block; color: var(--ink-muted); font-size: var(--fs-sm); }
.plan-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 16px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; }
.plan-total small { font-size: 11px; font-weight: 500; color: var(--ink-muted); }
@media (max-width: 560px) {
  .plan-meters, .plan-modules, .audit-filters { grid-template-columns: 1fr; }
}

/* ---------- Themes (js/theme.js, js/themes.js) ---------- */
/* Button styles are sets of variables on data-buttons, so a preview card carrying its own data-buttons shows that style. */
:root, [data-buttons="standard"] {
  --btn-radius: var(--radius); --btn-border-w: 1px; --btn-border: var(--border-strong); --btn-bg: var(--surface); --btn-ink: var(--ink); --btn-shadow: none;
  --btn-hover-bg: var(--surface); --btn-hover-border: var(--ink-faint);
  --btn-primary-bg: var(--accent); --btn-primary-border: var(--accent); --btn-primary-ink: var(--accent-ink); --btn-primary-shadow: none;
  --btn-primary-hover-bg: var(--accent); --btn-primary-hover-ink: var(--accent-ink);
  --ctl-radius: var(--radius); --top-btn-radius: 8px;
  --tab-radius: 0; --tab-sel-bg: transparent; --tab-sel-ink: var(--accent); --tab-sel-line: var(--accent);
}
[data-buttons="rounded"] {
  --btn-radius: 999px; --ctl-radius: 999px; --top-btn-radius: 999px;
  --tab-radius: 999px; --tab-sel-bg: var(--accent-soft); --tab-sel-line: transparent;
}
[data-buttons="square"] { --btn-radius: 2px; --ctl-radius: 2px; --top-btn-radius: 2px; --tab-radius: 0; }
[data-buttons="soft"] {
  --btn-radius: 8px; --btn-border: transparent; --btn-bg: var(--surface-3); --btn-hover-bg: var(--border); --btn-hover-border: transparent;
  --top-btn-radius: 8px; --tab-radius: 8px 8px 0 0; --tab-sel-bg: var(--accent-soft);
}
[data-buttons="outline"] {
  --btn-radius: 6px; --btn-border-w: 1.5px; --btn-bg: transparent; --btn-hover-bg: var(--accent-soft); --btn-hover-border: var(--accent);
  --btn-primary-bg: transparent; --btn-primary-ink: var(--accent); --btn-primary-hover-bg: var(--accent); --btn-primary-hover-ink: var(--accent-ink);
  --ctl-radius: 6px; --top-btn-radius: 6px;
}
[data-buttons="raised"] {
  --btn-radius: 7px; --btn-bg: linear-gradient(180deg, var(--surface), var(--surface-3)); --btn-hover-bg: linear-gradient(180deg, var(--surface), var(--border));
  --btn-shadow: 0 1px 0 var(--border-strong), inset 0 1px 0 rgba(255,255,255,0.35);
  --btn-primary-bg: var(--accent); --btn-primary-hover-bg: var(--accent);
  --btn-primary-shadow: 0 1px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
  --tab-radius: 7px 7px 0 0; --tab-sel-bg: var(--surface);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  [data-buttons="raised"] {
    --btn-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent));
    --btn-primary-hover-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
    --btn-primary-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, #000), inset 0 1px 0 rgba(255,255,255,0.3);
  }
}

/* Top bar wallpaper: data-wall / data-wall-tone on <html>, the picture in --wall-bg (applyThemeLook). Inside the top bar the
   colour tokens are redefined for the picture — white text on dark pictures, dark text on light ones — in both light and dark mode. */
:root[data-wall]:not([data-wall="none"]) .topbar {
  background: var(--wall-overlay), var(--wall-bg); color: var(--ink);
  border-bottom: none; border-radius: var(--radius); padding: 12px 14px 12px 16px; box-shadow: var(--shadow);
}
:root[data-wall]:not([data-wall="none"])[data-wall-tone="dark"] .topbar {
  --wall-overlay: linear-gradient(90deg, rgba(6,10,16,0.55), rgba(6,10,16,0.12) 48%, rgba(6,10,16,0.45));
  --ink: #FFFFFF; --ink-muted: rgba(255,255,255,0.88); --ink-faint: rgba(255,255,255,0.7);
  --surface: rgba(8,12,18,0.36); --surface-3: rgba(255,255,255,0.18); --border: rgba(255,255,255,0.26);
}
:root[data-wall]:not([data-wall="none"])[data-wall-tone="dark"] .topbar .brand h1,
:root[data-wall]:not([data-wall="none"])[data-wall-tone="dark"] .topbar .brand-sub,
:root[data-wall]:not([data-wall="none"])[data-wall-tone="dark"] .topbar .top-btn { text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
:root[data-wall]:not([data-wall="none"])[data-wall-tone="dark"] .topbar .top-btn:not(:hover) { background: rgba(8,12,18,0.18); }
:root[data-wall]:not([data-wall="none"])[data-wall-tone="light"] .topbar {
  --wall-overlay: linear-gradient(90deg, rgba(255,255,255,0.62), rgba(255,255,255,0.1) 48%, rgba(255,255,255,0.52));
  --ink: #16202B; --ink-muted: #36434F; --ink-faint: #56636F;
  --surface: rgba(255,255,255,0.74); --surface-3: rgba(255,255,255,0.6); --border: rgba(22,32,43,0.16);
}
:root[data-wall]:not([data-wall="none"]) .topbar .date-nav,
:root[data-wall]:not([data-wall="none"]) .topbar .user-chip { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-wall]:not([data-wall="none"]) .topbar .plan-chip { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-wall]:not([data-wall="none"]) .topbar .brand-mark { box-shadow: 0 0 0 1px rgba(255,255,255,0.35), var(--shadow); }
:root[data-wall]:not([data-wall="none"]) .topbar [data-tip]::after { background: #16202B; color: #F4F6F8; }

/* Themes drawer */
.theme-scope { margin: 0 0 12px; width: fit-content; }
.theme-note { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5; margin-bottom: 4px; }
.theme-note .btn { margin-top: 8px; }
.theme-hint { margin: 6px 0 0; }
.theme-seg { width: fit-content; max-width: 100%; flex-wrap: wrap; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-card, .btn-style-card, .wall-tile { font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.theme-card { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.theme-card:hover, .btn-style-card:hover, .wall-tile:hover { border-color: var(--ink-faint); }
.theme-card.active, .btn-style-card.active, .wall-tile.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-card:focus-visible, .btn-style-card:focus-visible, .wall-tile:focus-visible, .wall-tile.upload:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-thumb { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 10px; background: var(--wall-bg, var(--surface-3)); border-bottom: 1px solid var(--border); }
.theme-thumb .mark { width: 16px; height: 16px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 0 1px rgba(255,255,255,0.45); flex: none; }
.theme-thumb .bar { width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.8); }
.theme-thumb .bar.short { width: 18px; margin-left: auto; }
.theme-thumb[data-tone="light"] .bar, .theme-thumb[data-tone="plain"] .bar { background: rgba(22,32,43,0.4); }
.theme-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 9px; font-size: var(--fs-md); font-weight: 600; }
.theme-card-foot .btn, .btn-style-card .samples .btn { pointer-events: none; }
.theme-card-foot .btn { padding: 3px 8px; font-size: 11px; }
.wall-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wall-tile { position: relative; display: block; height: 48px; padding: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--wall-bg, var(--surface-3)); overflow: hidden; }
.wall-tile span { position: absolute; left: 7px; bottom: 5px; font-size: var(--fs-xs); font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.65); }
.wall-tile[data-tone="light"] span { color: #16202B; text-shadow: 0 1px 1px rgba(255,255,255,0.7); }
.wall-tile.plain span { color: var(--ink-muted); text-shadow: none; }
.wall-tile.upload { display: flex; align-items: center; justify-content: center; border-style: dashed; background: var(--surface-2); }
.wall-tile.upload span { position: static; font-size: 12px; color: var(--ink-muted); text-shadow: none; }
.wall-tile.upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.btn-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btn-style-card { display: flex; flex-direction: column; gap: 9px; padding: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.btn-style-card strong { display: block; font-size: var(--fs-md); }
.btn-style-card small { display: block; font-size: var(--fs-sm); color: var(--ink-muted); }
.btn-style-card .samples { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 420px) {
  .theme-grid, .btn-style-grid { grid-template-columns: 1fr; }
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Insights: Reports › Profit and Scorecards, evening owner summary (backlog #15, #22, #21) ---------- */
.pf-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pf-head-actions .check-inline { font-size: 12px; margin: 0; }
.pf-split { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.pf-seg { display: block; height: 100%; min-width: 2px; }
.pf-seg-0 { background: var(--accent); }
.pf-seg-1 { background: var(--status-transit); }
.pf-seg-2 { background: var(--status-risk); }
.pf-seg-3 { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.pf-seg-4 { background: color-mix(in srgb, var(--status-transit) 45%, var(--surface)); }
.pf-seg-5 { background: var(--ink-faint); }
.pf-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 16px; margin-top: 12px; font-size: var(--fs-md); }
.pf-legend-item { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); }
.pf-legend-item.none { opacity: 0.5; }
.pf-legend-item .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-legend-item .v { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.pf-legend-item .p { min-width: 34px; text-align: right; font-size: 11px; color: var(--ink-faint); }
.pf-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pf-table tr.clickable, .sc-table tr.clickable, .pf-drill-table tr.clickable { cursor: pointer; }
.pf-table tr.clickable:hover td, .sc-table tr.clickable:hover td, .pf-drill-table tr.clickable:hover td { background: var(--surface-2); }
.pf-table tr.pf-open td, .sc-table tr.pf-open td { background: var(--accent-soft); }
.pf-caret { display: inline-block; width: 12px; color: var(--ink-faint); }
.pf-good { color: var(--status-available); }
.pf-warn { color: var(--status-risk); }
.pf-critical { color: var(--status-critical); }
.pf-table tr.pf-drill > td { padding: 0; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pf-drill-inner { padding: 10px 12px 12px 26px; }
.pf-drill-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: var(--fs-md); }
.pf-drill-inner .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 0; }
.rep-card .bill-note { margin: 0 0 10px; }
.sc-score { display: inline-flex; align-items: baseline; justify-content: center; min-width: 30px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--ink); font: 700 var(--fs-sm) "IBM Plex Mono", monospace; }
.sc-score.good { background: var(--status-available-soft); color: var(--status-available); border-color: transparent; }
.sc-score.warn { background: var(--status-risk-soft); color: var(--status-risk); border-color: transparent; }
.sc-score.critical { background: var(--status-critical-soft); color: var(--status-critical); border-color: transparent; }
.sc-score.big { font-size: 34px; padding: 6px 16px; border-radius: 14px; }
.sc-score.big small { font-size: 13px; font-weight: 500; margin-left: 2px; opacity: 0.8; }
.sc-pts { display: inline-block; min-width: 28px; font: 700 12px "IBM Plex Mono", monospace; color: var(--ink); }
.sc-pts.good { color: var(--status-available); }
.sc-pts.warn { color: var(--status-risk); }
.sc-pts.critical { color: var(--status-critical); }
.sc-pts.na { color: var(--ink-faint); font-weight: 500; }
.sc-trend { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.sc-trend.up { color: var(--status-available); font-weight: 600; }
.sc-trend.down { color: var(--status-critical); font-weight: 600; }
.sc-low { display: inline-block; background: var(--status-offduty-soft); color: var(--ink-muted); vertical-align: 1px; }
.sc-table th .sub, .sc-table td .sub { display: block; font-weight: 400; }
.sc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.sc-card-head h3 { margin: 0 0 4px; font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.sc-card-head p { margin: 0 0 2px; font-size: var(--fs-sm); color: var(--ink-muted); }
.sc-metrics td { vertical-align: top; }
.sc-metrics td .sub { display: block; max-width: 420px; }
.sc-metrics tr.sc-na td { color: var(--ink-faint); }
.sc-pts-cell { white-space: nowrap; }
.sc-bar { display: inline-block; width: 90px; height: 8px; margin-right: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); vertical-align: middle; overflow: hidden; }
.sc-bar-fill { display: block; height: 100%; background: var(--ink-faint); }
.sc-bar-fill.good { background: var(--status-available); }
.sc-bar-fill.warn { background: var(--status-risk); }
.sc-bar-fill.critical { background: var(--status-critical); }
.sc-card .rep-card .table-wrap, .sc-card .table-wrap { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.sc-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.sc-money .kpi-card { box-shadow: none; background: var(--surface-2); }
.sc-w-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.sc-w-txt .sub { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-muted); }
.sc-w-fields { margin-top: 6px; }
.sc-w-fields .field { margin-bottom: 0; }
.os-days { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.os-days .check-inline { margin: 0; }
.os-people { display: grid; gap: 6px; }
.os-person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--ctl-radius, 8px); background: var(--surface); }
.os-person.on { border-color: var(--accent); background: var(--accent-soft); }
.os-person-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.os-person-main input { margin-top: 3px; }
.os-person-txt .sub { display: block; font-size: 12px; color: var(--ink-muted); }
.os-tag { display: inline-block; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-muted); vertical-align: 1px; }
.os-channels { display: flex; gap: 10px; }
.os-try { display: flex; flex-wrap: wrap; gap: 8px; }
.os-preview { display: block; width: 100%; height: 520px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
@media (max-width: 760px) {
  .rep-grid { grid-template-columns: minmax(0, 1fr); padding: 12px 10px 16px; }
  .sc-card-head { flex-direction: column-reverse; }
  .pf-drill-inner { padding-left: 12px; }
}
@media print { .pf-split, .os-preview { display: none !important; } }

/* ---------- Save a trip: street turn & dual transaction cards (js/moves.js) ---------- */
.template-chip.trip-card { flex-wrap: wrap; align-items: flex-start; }
.trip-card > div:first-child { flex: 1 1 240px; min-width: 0; }
.trip-card .t-sub, .trip-card .t-name { overflow-wrap: anywhere; }
.trip-card .hint { display: block; font-size: var(--fs-sm); color: var(--ink-muted); margin-top: 2px; }
.trip-card .req-chip { display: inline-block; white-space: normal; margin: 4px 4px 0 0; }
.trip-card .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.trip-status { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.trip-status select, .trip-status input { font: inherit; font-size: var(--fs-md); color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong, var(--border)); border-radius: var(--ctl-radius, 8px); padding: 5px 8px; }
.trip-status input { flex: 1 1 140px; min-width: 0; }
.flag-tag.trip { background: var(--status-available-soft); color: var(--status-available, #1F8A5F); }

/* ---------- IFTA & fuel: Reports › IFTA & fuel, and the full page from Tools on plans without Reports (backlog #14) ---------- */
.ifta-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ifta-subs { flex-wrap: wrap; }
.ifta-warn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ifta-warn li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-md); color: var(--ink); }
.ifta-warn li.warn { background: var(--status-risk-soft); border-color: transparent; }
.ifta-warn li .ico { flex: none; width: 16px; text-align: center; }
.ifta-warn li > span:nth-child(2) { flex: 1; min-width: 0; }
.ifta-warn li .mini-link { flex: none; }
.ifta-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-muted); white-space: nowrap; }
.ifta-chip.warn { background: var(--status-risk-soft); color: var(--status-risk); border-color: transparent; }
.ifta-chip.ok { background: var(--status-available-soft, var(--surface-2)); color: var(--status-available); border-color: transparent; }
.ifta-est { font-size: var(--fs-xs); color: var(--status-risk); font-weight: 600; }
.ifta-table td.good { color: var(--status-available); }
.ifta-table td.warn { color: var(--status-risk); }
.ifta-nonmember td { color: var(--ink-muted); }
.ifta-undone td { opacity: 0.6; }
.ifta-bad td { background: var(--status-critical-soft); }
.ifta-dup td { color: var(--ink-muted); }
.ifta-jlist { display: flex; flex-wrap: wrap; gap: 6px; }
.ifta-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ifta-counts .ifta-chip { font-size: 12px; padding: 3px 9px; }
.ifta-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; align-items: end; }
.ifta-form .field.wide { grid-column: 1 / -1; }
.ifta-cardform { margin-top: 10px; }
.ifta-map { margin: 10px 0; border: 1px solid var(--border); border-radius: var(--ctl-radius, 8px); padding: 8px 10px; background: var(--surface-2); }
.ifta-map summary { cursor: pointer; font-weight: 600; font-size: var(--fs-md); }
.ifta-mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; margin: 8px 0; align-items: end; }
.ifta-mapgrid select { width: 100%; }
.ifta-preview { max-height: 46vh; overflow: auto; }
.ifta-rates input { width: 90px; text-align: right; }
.ifta-rates td:last-child input { width: 100%; min-width: 140px; text-align: left; }
.ifta-note { width: 100%; min-width: 110px; margin-top: 4px; font-size: 12px; }
.ifta-drivers { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 12px; }
.ifta-adj input { width: 110px; }
.ifta-batches { margin-top: 14px; }
.ifta-page { position: fixed; inset: 0; z-index: var(--z-fullpage); background: var(--bg); display: flex; flex-direction: column; }
.ifta-page-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.ifta-page-bar .spacer { flex: 1; }
.ifta-page-body { flex: 1; overflow: auto; padding: 0 12px 24px; }
@media (max-width: 720px) {
  .ifta-actions { justify-content: flex-start; }
  .ifta-form, .ifta-mapgrid { grid-template-columns: minmax(0, 1fr); }
  .ifta-warn li { flex-wrap: wrap; }
}
@media print { .ifta-actions, .ifta-subs, .ifta-page-bar { display: none !important; } }

/* Where a sign-in or change came from (js/security.js ipWithCountryHtml): flag and country code before the IP address.
   .fi / .fi-xx come from the flag-icons stylesheet, loaded on first use. */
.ip-where { display: inline-flex; align-items: center; gap: 5px; margin-right: 1px; white-space: nowrap; vertical-align: -2px; }
.ip-where .ip-flag { width: 16px; height: 12px; line-height: 12px; border-radius: 2px; background-size: cover; box-shadow: 0 0 0 1px var(--border); flex: none; }
.ip-where .ip-cc { font: 600 var(--fs-xs)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; padding: 2px 4px 2px; border-radius: 4px; background: var(--surface-3); color: var(--ink-muted); }

/* ---------- QA pass 10.18: in-app dialogs, keyboard focus on clickable rows, closing drawer ---------- */
/* askConfirm / askText / tell (shared.js): a native <dialog> in the browser's top layer, so it sits above drawers, the
   Settings page and the sign-in screen without a z-index of its own. */
.ask-dialog { width: min(420px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5); font: inherit; font-size: 14px; line-height: 1.45; }
.ask-dialog::backdrop { background: rgba(10, 14, 18, 0.45); }
.ask-dialog form { margin: 0; }
.ask-dialog .ask-msg { margin: 0 0 16px; white-space: pre-line; overflow-wrap: anywhere; }
.ask-dialog .field { margin-bottom: 16px; }
.ask-dialog .ask-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
/* A drawer that is sliding shut can't be clicked again (a double click on Save made two records). */
.drawer[inert] { pointer-events: none; }
/* Rows and blocks that open on a click can be reached with Tab and show where the keyboard is. */
tr.clickable:focus-visible, [data-clickable]:focus-visible, .driver-id:focus-visible, .load-block:focus-visible, #attHead:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.loads tr.clickable:focus-visible td { background: var(--accent-soft); }
.load-block:focus-visible { outline-color: var(--ink); } /* the block itself is often the accent colour */
/* The version badge sat on the drawer's Save bar and on the Settings page: hidden while either is open. */
.drawer.open ~ .version-badge, html.sp-on .version-badge { display: none; }
