/* ─────────────────────────────────────────────────────────────────────
   Clarity pass (owner, 21 Oct 2026: "the side colours are OK but the
   middle part is not like ALLDATA where it's clear — very hard to track
   when looking at the screen").

   The middle of every main screen as a classic shop-management screen:
   - a light grey page (#f4f6f9), white panels with one thin 1px line;
   - dark text (#1f2933), nothing smaller than 13px for anything read;
   - small grey labels over dark values;
   - lists as full-width rows with columns, a line between rows, a hover;
   - tabs joined and flat, the open one solid blue.

   Visual only. Loaded after alldata.css, before phone.css (the iPhone
   keeps its own layout); colours come from the theme variables so the
   Charcoal / Midnight looks stay readable.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --cl-line: var(--line);
  --cl-head: var(--panel-2);
  --cl-text: var(--text);
  --cl-sub: var(--muted);
  --cl-blue: #1f6bd1;
  --cl-hover: var(--ad-hover, #f3f7fd);
  --cl-orange: #e8711c;
}
:root[data-theme="light"] {
  --line: #d5dbe3;
  --text: #1f2933;
  --muted: #52606d;
  --panel-2: #f1f4f8;
  --ad-page: #f4f6f9;
  --cl-head: #eef2f7;
  --cl-sub: #3e4c59;
  --cl-hover: #f2f7fe;
}
:root[data-theme="light"] body { background: #f4f6f9 !important; color: #1f2933; }

/* Section titles: dark, not pale grey. */
:root[data-theme="light"] main h2 { color: #3e4c59; }

/* ══ Visit board ═════════════════════════════════════════════════════ */

/* One header row: the count, the team's one-line greeting, Check in. */
.boardpage .board-top {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  margin: 0 0 12px !important; padding: 10px 16px !important;
  background: var(--panel) !important; border: 1px solid var(--cl-line) !important; border-radius: 6px !important;
}
.boardpage .board-top .hero-count { margin: 0 !important; font-size: 17px !important; font-weight: 700; color: var(--cl-text); white-space: nowrap; }
.boardpage .board-top .hero-actions { margin-left: auto; display: flex !important; gap: 8px; }
.boardpage .board-top .hero-actions .big { min-height: 40px !important; padding: 0 16px !important; font-size: 15px !important; }
/* The team card, folded into the row: greeting · today's line · goal, one line. */
.boardpage .board-top .team-card {
  flex: 1 1 420px; min-width: 0; display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap;
  margin: 0 !important; padding: 0 0 0 20px !important;
  background: none !important; border: 0 !important; border-left: 1px solid var(--cl-line) !important; border-radius: 0 !important;
}
.boardpage .board-top .team-head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.boardpage .board-top .team-head strong { font-size: 15px; font-weight: 700; color: var(--cl-text); white-space: nowrap; }
.boardpage .board-top .team-head .tiny-btn { min-height: 30px !important; padding: 0 10px !important; font-size: 13px !important; }
.boardpage .board-top .team-line { margin: 0 !important; font-size: 14.5px !important; color: var(--cl-sub); min-width: 0; flex: 1 1 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boardpage .board-top .team-goal { display: flex; align-items: center; gap: 10px; }
.boardpage .board-top .team-goal-label { margin: 0 !important; font-size: 14px !important; white-space: nowrap; color: var(--cl-text); }
.boardpage .board-top .team-goal-track { width: 120px; height: 8px !important; border-radius: 4px !important; }
.boardpage .board-top .team-goal-fill { border-radius: 4px !important; }
.boardpage .board-top .team-shout { margin: 0 !important; padding: 2px 10px !important; font-size: 14px; flex: 1 1 100%; }
/* Writing a shout-out: the editor takes the whole row. */
.boardpage .board-top .team-card:has(.team-edit) { flex-basis: 100%; order: 5; padding: 10px 0 0 !important; border-left: 0 !important; border-top: 1px solid var(--cl-line) !important; }
.boardpage .board-top .team-edit { flex-basis: 100%; }

/* "1 scan to match →": one quiet line, not a panel. */
.board-scan-line { margin: -4px 0 10px; }
.board-scan-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px !important;
  border: 1px solid #f0b37e !important; border-radius: 4px !important; background: #fff6ee !important;
  color: #9a4a0b !important; font: inherit; font-size: 14px !important; font-weight: 700 !important; cursor: pointer;
}
.board-scan-link:hover { border-color: var(--cl-orange) !important; }
:root:not([data-theme="light"]) .board-scan-link { background: var(--panel) !important; color: var(--text) !important; border-color: var(--cl-orange) !important; }

/* ALLDATA documents to match: a compact panel (buttons their own size, not full-width bars). */
.boardpage .alldata-queue { margin: 0 0 14px !important; }
.boardpage .alldata-queue > h2 { margin: 0 0 6px !important; font-size: 13px !important; }
.boardpage .alldata-queue .card { padding: 12px 14px !important; gap: 6px !important; border: 1px solid var(--cl-line) !important; border-radius: 6px !important; background: var(--panel) !important; box-shadow: none !important; }
.boardpage .alldata-queue select { max-width: 560px; min-height: 38px !important; height: 38px; }
.boardpage .alldata-queue .send-choice, .boardpage .alldata-queue .ad-actions { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.boardpage .alldata-queue .send-choice > button, .boardpage .alldata-queue form button { flex: 0 0 auto !important; width: auto !important; min-width: 120px; min-height: 36px !important; }
.boardpage .alldata-queue input[type=search], .boardpage .alldata-queue input:not([type]) { max-width: 560px; }

/* Stage tabs: joined, flat, full size. */
.boardpage .board-stages { margin: 4px 0 0 !important; flex-wrap: wrap; }
.boardpage .board-stages .stage-tab { min-height: 42px; font-size: 14.5px !important; }

/* The cars of the open stage: a full-width table. */
.board-table {
  display: block; margin: 0 0 16px; background: var(--panel); border: 1px solid var(--cl-line); border-radius: 0 6px 6px 6px; overflow: hidden;
}
.board-table .bt-row {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 150px; column-gap: 16px;
  border-bottom: 1px solid var(--cl-line);
}
.board-table .bt-row:last-child { border-bottom: 0; }
.board-table .bt-open, .board-table .bt-head {
  display: grid; align-items: center; column-gap: 16px;
  grid-template-columns: minmax(180px, 1.15fr) minmax(200px, 1.4fr) 100px minmax(140px, .9fr) 150px;
}
.board-table .bt-head { grid-column: 1 / -1; grid-template-columns: minmax(180px, 1.15fr) minmax(200px, 1.4fr) 100px minmax(140px, .9fr) 150px 150px; padding: 0 0 0 16px; min-height: 40px; background: var(--cl-head); }
.board-table .bt-head span { font-size: 13px; font-weight: 700; color: var(--cl-sub); text-transform: none; letter-spacing: 0; }
.board-table .bt-open {
  min-height: 58px; padding: 9px 0 9px 16px; margin: 0; border: 0; border-radius: 0; background: none;
  font: inherit; text-align: left; color: var(--cl-text); cursor: pointer; min-width: 0;
}
.board-table .bt-row:not(.bt-head):hover { background: var(--cl-hover); }
.board-table .bt-open:focus-visible { outline: 2px solid var(--cl-blue); outline-offset: -2px; }
.board-table .bt-row.late { box-shadow: inset 4px 0 0 var(--late); }
.board-table .bt-customer { font-size: 16px; font-weight: 700; color: var(--cl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-table .bt-vehicle { font-size: 15px; color: var(--cl-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-table .bt-number { font-size: 15px; font-weight: 700; color: var(--cl-blue); }
:root:not([data-theme="light"]) .board-table .bt-number { color: var(--brand); }
.board-table .bt-tech { font-size: 15px; color: var(--cl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-table .bt-time { font-size: 15px; color: var(--cl-text); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.board-table .bt-flag { font-size: 13px; font-weight: 700; color: var(--late); }
.board-table .bt-dup { grid-column: 1 / -1; font-size: 13.5px; font-weight: 700; color: var(--warn-fg, #6b3d0a); }
.board-table .bt-action { display: flex; justify-content: flex-end; padding-right: 14px; }
.board-table .job-done { position: static !important; transform: none !important; min-height: 34px; padding: 0 12px !important; border-width: 1px !important; border-radius: 4px !important; font-size: 14px !important; white-space: nowrap; }

/* ══ Documents (list column + the document) ══════════════════════════ */
.docs-page { background: none; }
@media (min-width: 761px) {
  .docs-page { grid-template-columns: 300px minmax(0, 1fr) !important; gap: 14px !important; }
}
.docs-side { padding: 0 !important; overflow: hidden; border-color: var(--cl-line) !important; gap: 0 !important; }
.docs-side .docs-head { padding: 10px 12px 6px; }
.docs-side .docs-head h1 { font-size: 18px !important; margin: 0; }
.docs-side .docs-count { font-size: 13px; color: var(--cl-sub); }
.docs-side .docs-create { margin: 0 12px 8px; width: calc(100% - 24px); background: var(--cl-blue) !important; border-color: var(--cl-blue) !important; color: #ffffff !important; font-size: 15.5px !important; font-weight: 700; }
.docs-side .docs-create:hover { background: #1453a8 !important; }
:root:not([data-theme="light"]) .docs-side .docs-create { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; }
.docs-side input.docs-search { margin: 0 12px 8px; width: calc(100% - 24px); min-height: 38px !important; border-radius: 4px !important; font-size: 14px; }
.docs-side .docs-filters { margin: 0 12px 10px; }
.docs-side .docs-select { min-height: 34px; font-size: 13.5px; border-radius: 4px !important; }
.docs-side .docs-list { border: 0 !important; border-top: 1px solid var(--cl-line) !important; border-radius: 0 !important; }
.docs-side .docs-tools { padding: 8px 12px; border-top: 1px solid var(--cl-line); }
/* "Scans to match": one row at the top of the list. */
.docs-scans {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 12px 8px; width: calc(100% - 24px); min-height: 38px; padding: 0 12px;
  border: 1px solid #f0b37e; border-radius: 4px; background: #fff6ee; color: #9a4a0b;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left;
}
.docs-scans[hidden] { display: none; }
.docs-scans:hover, .docs-scans.on { border-color: var(--cl-orange); box-shadow: inset 4px 0 0 var(--cl-orange); }
.docs-scans-n { min-width: 24px; padding: 1px 8px; border-radius: 10px; background: var(--cl-orange); color: #ffffff; font-size: 13px; text-align: center; }
:root:not([data-theme="light"]) .docs-scans { background: var(--panel); color: var(--text); border-color: var(--cl-orange); }
.docs-pane .scans-to-match { margin: 0 !important; padding: 14px 16px; background: var(--panel); border: 1px solid var(--cl-line); border-radius: 6px; }
.docs-pane .scans-to-match .card { border: 1px solid var(--cl-line) !important; border-radius: 6px !important; box-shadow: none !important; padding: 12px 14px !important; }
.docs-pane .scans-to-match .card strong { font-size: 16px; color: var(--cl-text); }
.docs-pane .scans-to-match .card .muted.tiny { font-size: 14px !important; color: var(--cl-sub) !important; }
.docs-pane .scans-to-match .send-choice button { width: auto !important; flex: 0 0 auto !important; }

/* List rows: name dark and bold, vehicle grey, status a coloured word, number + date clear. */
.doc-row { padding: 11px 12px 11px 14px !important; border-bottom: 1px solid var(--cl-line) !important; gap: 3px !important; }
.doc-row .doc-name { font-size: 15px !important; font-weight: 700 !important; color: var(--cl-text) !important; }
.doc-row .doc-vehicle { font-size: 14px !important; color: var(--cl-sub) !important; }
.doc-row .doc-foot { font-size: 13.5px !important; gap: 8px; }
.doc-row .doc-num { font-size: 14px !important; color: var(--cl-blue) !important; font-weight: 700 !important; }
:root:not([data-theme="light"]) .doc-row .doc-num { color: var(--brand) !important; }
.doc-row .doc-vin { font-size: 12.5px !important; color: var(--cl-sub) !important; }
.doc-row .doc-date { font-size: 13.5px !important; color: var(--cl-text) !important; font-weight: 600; }
.doc-row .doc-badge { font-size: 13px !important; }
:root[data-theme="light"] .doc-row .doc-badge.t-paid, :root[data-theme="light"] .doc-row .doc-badge.t-invoice { color: #13803a !important; }
.doc-row .doc-pill { font-size: 12.5px !important; font-weight: 700; }
.doc-row.on { background: #e8f0fc !important; box-shadow: inset 4px 0 0 var(--cl-blue); }
:root:not([data-theme="light"]) .doc-row.on { background: var(--ad-hover-2) !important; box-shadow: inset 4px 0 0 var(--brand); }

/* The document: plain large title, joined flat tabs, "+ Inspection" in orange outline. */
.dc-top { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 16px !important; }
.dc-top .dc-kind { font-size: 24px !important; font-weight: 600 !important; color: var(--cl-text); }
.dc-stage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-stages { display: flex !important; }
.dc-stage { min-height: 36px !important; padding: 0 20px !important; font-size: 14px !important; }
.dc-stage.done { background: var(--ad-tab-bg) !important; }
.dc-stage.next { background: var(--panel) !important; color: #7b8794 !important; }
.dc-stage.current { background: var(--cl-blue) !important; border-color: var(--cl-blue) !important; color: #ffffff !important; }
:root:not([data-theme="light"]) .dc-stage.current { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; }
.dc-add-insp {
  min-height: 34px; padding: 0 12px; border: 1px solid var(--cl-orange) !important; border-radius: 4px !important;
  background: var(--panel) !important; color: #c85a0c !important; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.dc-add-insp:hover { background: #fff6ee !important; }
:root:not([data-theme="light"]) .dc-add-insp { color: var(--text) !important; }
.dc-top-actions { margin-left: auto; }

/* Customer / vehicle: small grey labels over larger dark values. */
.dc-summary { padding: 14px 16px !important; gap: 6px 28px !important; }
.dc-sum-label { font-size: 12.5px !important; letter-spacing: .04em !important; color: var(--cl-sub) !important; }
.dc-summary .dc-strong { font-size: 17px !important; color: var(--cl-text) !important; }
.dc-sum-line { font-size: 15px !important; }
.dc-summary .muted { font-size: 14px !important; color: var(--cl-sub) !important; }
.dc-sum-f { font-size: 13px !important; color: var(--cl-sub) !important; font-weight: 600; }
.dc-sum-f strong { font-size: 15px !important; color: var(--cl-text) !important; }
.dc-sum-in { min-height: 36px !important; font-size: 15px !important; border-color: #c5ced9 !important; }
.dc-sum-concern { font-size: 15px !important; }

/* The item table: a clear header row, dark 14px text, a line between rows. */
.dc-table-wrap { border-color: var(--cl-line) !important; }
.dc-table thead th { background: var(--cl-head) !important; color: var(--cl-sub) !important; font-size: 13px !important; font-weight: 700 !important; padding: 10px 8px !important; border-bottom: 1px solid var(--cl-line) !important; }
.dc-table td { font-size: 14px !important; color: var(--cl-text); border-bottom-color: var(--cl-line) !important; }
.dc-table td input, .dc-table td select, .dc-table td textarea { font-size: 14px !important; color: var(--cl-text) !important; }
.dc-table tbody tr:not(.dc-jobrow):hover td { background: var(--cl-hover); }
.dc-jobrow td { font-size: 15px !important; font-weight: 700; }

/* Right column: summary lines, the blue Total bar. */
.dc-side .dc-card-head h2 { font-size: 12.5px !important; color: var(--cl-sub) !important; letter-spacing: .05em; }
.dc-side .dc-card { border-color: var(--cl-line) !important; border-radius: 6px !important; }
.dc-side .dc-sum-row, .dc-side .dc-line { font-size: 14.5px; }
.dc-total-bar { background: var(--cl-blue) !important; font-size: 17px !important; }
:root:not([data-theme="light"]) .dc-total-bar { background: var(--brand) !important; }

/* ══ A visit: header as labels over values, full width ═══════════════ */
@media (min-width: 761px) {
  main.job { max-width: 1320px !important; }
}
.visit-head { margin-bottom: 12px; }
.visit-head .vh-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px; }
.visit-head .vh-title h1 { margin: 0 !important; font-size: 24px !important; font-weight: 600 !important; color: var(--cl-text); }
.visit-head .vh-number { font-size: 16px; font-weight: 700; color: var(--cl-blue); }
:root:not([data-theme="light"]) .visit-head .vh-number { color: var(--brand); }
.visit-head .vh-title .job-done, .visit-head .vh-title .filed-note { margin-left: auto; }
.visit-head .vh-title .job-done { min-height: 36px; padding: 0 14px !important; border-width: 1px !important; border-radius: 4px !important; font-size: 14px; }
.visit-head dl.vh-facts {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 24px;
  margin: 0 0 8px; padding: 14px 16px !important;
  background: var(--panel); border: 1px solid var(--cl-line) !important; border-radius: 6px !important;
}
.visit-head .vh-fact { min-width: 0; }
.visit-head .vh-fact dt { margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--cl-sub); }
.visit-head .vh-fact dd { margin: 0; font-size: 15.5px; color: var(--cl-text); overflow-wrap: break-word; }
/* Email (3rd) gets two columns so an address is never split mid-word. */
@media (min-width: 761px) { .visit-head .vh-fact:nth-child(3) { grid-column: span 2; } }
.visit-head .vh-fact dd strong { font-size: 16px; }
.visit-head .vh-fact dd a { color: var(--cl-blue); font-weight: 600; text-decoration: none; }
:root:not([data-theme="light"]) .visit-head .vh-fact dd a { color: var(--brand); }
.visit-head .vh-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; letter-spacing: .02em; }
.visit-head .vh-clock { margin: 4px 0 0; font-size: 14px; }
.job .job-panel > section, .job .job-panel section.wrench, .job section { border-color: var(--cl-line) !important; }
.job section h2 { font-size: 13px !important; color: var(--cl-sub) !important; letter-spacing: .04em; }
.job label, .job .field-label { color: var(--cl-text); }
.job .muted.tiny, .job .tiny { font-size: 13px !important; }

/* ══ Inspections list: full width, clear rows ════════════════════════ */
@media (min-width: 761px) {
  .insp-board, .ib-page, main.inspections { max-width: none !important; }
}
.ib-row { border-color: var(--cl-line) !important; }
.ib-head { font-size: 13px !important; color: var(--cl-sub) !important; }
.ib-row .ib-veh strong, .ib-row .ib-veh > :first-child { font-size: 16px !important; color: var(--cl-text) !important; }
.ib-row .ib-veh { font-size: 14px !important; color: var(--cl-sub); }
.ib-row .ib-veh a { font-size: 14.5px !important; }
.ib-row :is(.ib-tech, .ib-prog, .ib-status, .ib-when) { font-size: 14px !important; color: var(--cl-text) !important; }
.ib-row :is(.ib-tech, .ib-prog, .ib-status, .ib-when) :is(span, small, p, div) { font-size: 14px !important; }
.ib-row .ib-type { font-size: 14px !important; }
/* The status counts: one row of five on a desk screen, not four and a lonely fifth. */
@media (min-width: 1100px) {
  .ib-segs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; grid-auto-flow: column; }
  .ib-segs .insp-seg { min-height: 54px !important; }
}

/* ══ Customers: full-width table ═════════════════════════════════════ */
.cd-table { border-color: var(--cl-line) !important; }
.cd-row { border-bottom-color: var(--cl-line) !important; }
.cd-head { background: var(--cl-head) !important; color: var(--cl-sub) !important; font-size: 13px !important; }
.cd-name strong { color: var(--cl-text) !important; }
.cd-cars, .cd-phone, .cd-last { color: var(--cl-text) !important; }
.boardpage .alldata-queue .card :is(p, span, label, small) { font-size: 14px !important; }
.boardpage .alldata-queue .card > strong:first-child, .boardpage .alldata-queue .card h3 { font-size: 16px !important; color: var(--cl-text); }

/* Item table columns wide enough for their 13px headings ("Qty/Hrs", "Tax", "Total"). */
@media (min-width: 761px) {
  .dc-table th.c-qty { width: 76px !important; }
  .dc-table th.c-price { width: 92px !important; }
  .dc-table th.c-total { width: 100px !important; }
  .dc-table th.c-tax { width: 48px !important; }
  .dc-table th.c-code { width: 128px !important; }
}

/* iPhone: the board's header in three short lines (count, greeting + goal, Check in); the
   Copilot is already in the top bar, and the day's message is for the desk screen. */
@media (max-width: 760px) {
  .boardpage .board-top { gap: 6px 10px !important; padding: 10px 12px !important; }
  .boardpage .board-top .hero-count { font-size: 16px !important; }
  .boardpage .board-top .team-card { flex: 1 1 100% !important; padding: 0 !important; border-left: 0 !important; gap: 4px 10px !important; }
  .boardpage .board-top .team-head strong { font-size: 14.5px !important; }
  .boardpage .board-top .team-head .tiny-btn { min-height: 30px !important; font-size: 12.5px !important; white-space: nowrap; }
  .boardpage .board-top .team-line { display: none !important; }
  .boardpage .board-top .team-goal { flex: 1 1 100%; }
  .boardpage .board-top .team-goal-track { flex: 1 1 auto; width: auto; }
  .boardpage .board-top .hero-actions { margin: 0 !important; flex: 1 1 100%; }
  .boardpage .board-top .hero-actions .big.ghost { display: none !important; }
  .boardpage .board-top .hero-actions .big.primary { flex: 1 1 auto; min-height: 44px !important; }
  .board-scan-line { margin: 0 0 8px; }
}

/* iPhone: each car is one card-row — customer, vehicle, then visit # · technician · time —
   with "Mark job done" under it; no column headings. */
@media (max-width: 760px) {
  .boardpage .board-stages { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .boardpage .board-stages .stage-tab { flex: 0 0 auto; white-space: nowrap; }
  .board-table { border-radius: 6px; }
  .board-table .bt-head { display: none !important; }
  .board-table .bt-row { grid-template-columns: minmax(0, 1fr) !important; }
  .board-table .bt-open {
    display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) !important; column-gap: 10px; row-gap: 2px;
    padding: 12px 12px 4px !important; min-height: 0;
  }
  .board-table .bt-customer { grid-column: 1 / -1; font-size: 16px; }
  .board-table .bt-vehicle { grid-column: 1 / -1; font-size: 15px; color: var(--cl-text); }
  .board-table .bt-number, .board-table .bt-tech, .board-table .bt-time { font-size: 14px; }
  .board-table .bt-time { display: block; text-align: right; color: var(--cl-sub); }
  .board-table .bt-action { justify-content: flex-start; padding: 0 12px 12px; }
  .board-table .job-done { min-height: 40px; }
}

/* Charcoal / Midnight: no white buttons in the dark board table; the open tab's count reads;
   a status pill on the picked document row keeps its own background. */
:root:not([data-theme="light"]) .board-table .job-done { background: var(--panel-2) !important; color: var(--text) !important; border-color: var(--line) !important; }
:root:not([data-theme="light"]) .board-table .job-done:hover { border-color: var(--brand) !important; }
:root:not([data-theme="light"]) .stage-tab.on .stage-count { background: rgba(255, 255, 255, .92) !important; color: #10233f !important; }
:root:not([data-theme="light"]) .doc-row .doc-pill { background: var(--panel) !important; }
:root:not([data-theme="light"]) .visit-head .job-done { background: var(--panel-2) !important; color: var(--text) !important; border-color: var(--line) !important; }

/* Customers: the whole width (like the other lists), the A–Z row on one line. */
@media (min-width: 1024px) {
  main.customers-page { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  .customers-page .cd-name strong { font-size: 16px; }
  .customers-page :is(.cd-phone, .cd-cars, .cd-last) { font-size: 15px; }
}

/* Staff: a wider white panel, each person a row; the details line dark and readable. */
@media (min-width: 1024px) {
  main.staff { max-width: 1100px !important; margin: 4px 0 16px 20px !important; padding: 16px 20px !important; background: var(--panel); border: 1px solid var(--cl-line); border-radius: 6px; }
}
.staff .staffrow { border-bottom-color: var(--cl-line) !important; }
.staff .staff-name strong, .staff .staffrow strong { font-size: 16px; color: var(--cl-text); }
.staff .muted.tiny { font-size: 14px !important; color: var(--cl-sub) !important; }
.staff h2 { font-size: 13px !important; color: var(--cl-sub) !important; letter-spacing: .04em; }