/* ─────────────────────────────────────────────────────────────────────
   Shop-manager look, everywhere (owner, 21 Oct 2026: "make our system like
   All Data — simple, the same colours that are not hard on the eyes, easier
   to see; all the tabs are very clear, all the menu items are very clear,
   the customers are very clear").

   The layout and colours of a classic shop-management screen, with the DAS
   name and logo:
   - a dark navy strip across the top: the DAS logo, the page name, search;
   - a blue menu rail down the left: white icons with the name under each,
     the page you're on darker with a white edge, "+ Check in" first;
   - a light grey page with white panels, black text, thin grey lines;
   - tabs as one row of joined, flat tabs: the open one solid blue;
   - lists as clear rows: the customer's name bold, the vehicle in grey,
     the status as a coloured word, the number in blue.

   Visual only: no page, button or route changes. Loaded after
   shop-manager.css and inspections.css, before phone.css (the iPhone
   layout keeps the last word; alldata-phone.css follows it with colours).
   ───────────────────────────────────────────────────────────────────── */

:root {
  --ad-navy: #1c2733;
  --ad-navy-2: #2a3644;
  --ad-blue: #1f6bd1;
  --ad-blue-dark: #1453a8;
  --ad-blue-deep: #0f4389;
  --ad-tab-bg: #eef3fa;
  --ad-tab-line: #a9bcd6;
  --ad-tab-text: #1d4f91;
  --ad-page: #f4f6f9;
  --ad-rail: 84px;
  --ad-top: 60px;
  --ad-hover: #f3f7fd;
  --ad-hover-2: #dfe9f7;
  --ad-btn-line: #b9c5d6;
  /* Where things that stick while scrolling stop: just under the top strip. */
  --ad-sticky-top: var(--ad-top);
}

/* Dark and other colour choices (Colours button): the same shapes, their own colours. */
:root:not([data-theme="light"]) {
  --ad-page: var(--bg);
  --ad-hover: color-mix(in srgb, var(--brand) 10%, var(--panel));
  --ad-hover-2: color-mix(in srgb, var(--brand) 16%, var(--panel));
  --ad-btn-line: var(--line);
  --ad-tab-bg: var(--panel-2);
  --ad-tab-line: var(--line);
  --ad-tab-text: var(--text);
}
:root:not([data-theme="light"]) body { background: var(--bg); }

/* ── Colours (Light, the default for everyone) ── */
:root[data-theme="light"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f3f6fa;
  --line: #d5dce6;
  --text: #1a2230;
  --muted: #566170;
  --brand: #1f6bd1;
  --brand-2: #1453a8;
  --on-brand: #ffffff;
  --brand-soft: #e8f0fc;
  --accent: #1f6bd1;
  --safety: #c0281b; --late: #c0281b; --ok: #1d7a3e;
  --ok-bg: #e4f4e9; --ok-fg: #14532d; --ok-line: #23843f;
  --warn-bg: #fdf3d8; --warn-fg: #6b3d0a; --warn-line: #c27a0e;
  --bad-bg: #fde8e6; --bad-fg: #8a1c12; --bad-line: #c8321f;
  --info-bg: #e8f0fc; --info-fg: #173f7a; --info-line: #1f6bd1;
  --radius: 6px;
  --shadow: none;
}
:root[data-theme="light"] body { background: var(--ad-page); color: var(--text); }
:root[data-theme="light"] h2 { color: var(--muted); }
:root[data-theme="light"] .muted { color: var(--muted); }

/* ── Top strip: navy, the DAS logo in white, the page name, search ── */
:root[data-theme] .appbar {
  background: var(--ad-navy) !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25) !important;
  color: #ffffff;
  backdrop-filter: none !important;
}
:root[data-theme] .appbar::after { content: none !important; }
:root[data-theme] .appbar .titles h1, :root[data-theme] .appbar h1 { color: #ffffff !important; font-weight: 600 !important; letter-spacing: 0 !important; }
:root[data-theme] .appbar .titles p.muted { color: #c9d3df !important; }
:root[data-theme] .appbar .titles { border-left-color: rgba(255, 255, 255, .22) !important; }
:root[data-theme] .appbar .bb-auto { color: #ffffff !important; }
:root[data-theme] .appbar .bb-tag { color: #c2ccd8 !important; }
:root[data-theme] .appbar .bb-word { border-left-color: rgba(255, 255, 255, .35) !important; }
:root[data-theme] .appbar .bb-das { filter: none !important; }
:root[data-theme] .appbar .search .icon { color: #5d6877; z-index: 1; }
:root[data-theme] .appbar .search input {
  background: #ffffff !important; color: #1a2230 !important;
  border: 1px solid transparent !important; border-radius: 4px !important;
}
:root[data-theme] .appbar .search input::placeholder { color: #6b7685; }
:root[data-theme] .appbar .search input:focus-visible { outline: 2px solid #8ab8ff !important; outline-offset: 0 !important; }
:root[data-theme] .appbar .askbtn, :root[data-theme] .appbar a.askbtn {
  background: transparent !important; color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .4) !important; border-radius: 4px !important; font-weight: 600;
}
:root[data-theme] .appbar .askbtn:hover { background: rgba(255, 255, 255, .1) !important; }
:root[data-theme] .appbar .askbtn .icon { color: #ffffff !important; }
:root[data-theme] .appbar .ph-back { color: #ffffff !important; }

/* Things that stick while scrolling stop under the top strip, never under it or the
   iPhone's clock (owner's iPhone, Oct 2026: the visit's tabs slid over the header). */
:root[data-theme] .appbar { z-index: 6 !important; }
.job-tabs, .to-bar { top: var(--ad-sticky-top) !important; z-index: 4 !important; }
.job-tabs { background: var(--ad-page) !important; }

/* ── The page: light grey, white panels, thin lines, square-ish corners ── */
.page { min-width: 0; }
main h1, .page > main > h1, .list-page > h1, .docs-head h1 { color: var(--text); font-weight: 600 !important; letter-spacing: -0.01em; }
:root[data-theme="light"] .job section,
:root[data-theme="light"] .column,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .visit-head .who,
:root[data-theme="light"] .cd-table,
:root[data-theme="light"] .docs-list,
:root[data-theme="light"] .dc-top,
:root[data-theme="light"] .dc-summary,
:root[data-theme="light"] .dc-table-wrap,
:root[data-theme="light"] .dc-side .dc-card,
:root[data-theme="light"] .ib-row,
:root[data-theme="light"] .ib-more,
:root[data-theme="light"] .appt-card,
:root[data-theme="light"] .appt-lane,
:root[data-theme="light"] .threads,
:root[data-theme="light"] .messages,
:root[data-theme="light"] .sale-head,
:root[data-theme="light"] .cars section,
:root[data-theme="light"] .afg-card,
:root[data-theme="light"] .afg-bos-row,
:root[data-theme="light"] .registry .reg-item,
:root[data-theme="light"] .settings-page .mailbox-status,
:root[data-theme="light"] .settings-page section,
:root[data-theme="light"] .id-docs {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}
.job section, .column, .hero, .visit-head .who, .cd-table, .docs-list, .dc-top, .dc-summary, .dc-table-wrap,
.dc-side .dc-card, .ib-row, .ib-more, .appt-card, .appt-lane, .threads, .messages, .sale-head, .cars section,
.afg-card, .afg-bos-row, .registry .reg-item, .settings-page .mailbox-status, .id-docs, .appt-requests,
.doc-addjob, .dc-library-box, .ib-menu, .photo-send, .afg-step, .afg-doc-tile, .afg-style, .afg-totals, .quote-box,
.print-box, aside.command, .more-sheet, .notice, .sale-row, .veh-pick, .appt-daybtn, .appt-tile, .ib-segs .insp-seg {
  border-radius: 6px !important;
}

/* Small grey labels over values; values dark. */
.dc-sum-label, .doc-card-title, .dc-side .dc-card-head h2, .ib-head, .cd-head, .afg-facts dt, .sale-field {
  color: var(--muted) !important;
}

/* ── Buttons: flat, light outline; the main action solid blue ── */
.page :is(button, a.button-link, .big, .askbtn, .tiny-btn, select, input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea):not(.chip):not(.afg-chip):not(.ibx-chip):not(.dc-row-more):not(.dc-del):not(.linkish):not(.ph-back) {
  border-radius: 4px !important;
}
:where(.page) :where(button:not([class])) {
  min-height: 38px; padding: 0 14px; border: 1px solid var(--ad-btn-line); border-radius: 4px;
  background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
:where(.page) :where(button:not([class])):hover { border-color: var(--brand); color: var(--brand); }
.ghost {
  background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--ad-btn-line) !important;
}
.ghost:hover { border-color: var(--brand) !important; color: var(--brand) !important; }
:root[data-theme="light"] .big.ghost { border-color: var(--ad-btn-line); }
.big.primary, button.primary, .docs-create, .dc .dc-btn.primary, .scanvin, .print-go {
  background: var(--brand) !important; border-color: var(--brand) !important; color: #ffffff !important; box-shadow: none !important;
}
.big.primary:hover, button.primary:hover, .docs-create:hover { background: var(--brand-2) !important; }
.big { font-weight: 700; }
:root[data-theme="light"] .page a:not(.askbtn):not(.button-link):not(.dc-chip):not(.big) { color: var(--brand); }
.linkish, .dc .dc-link { color: var(--brand) !important; }

/* Inputs: white, grey outline, blue when typing in it. */
:root[data-theme="light"] .page input:not([type=checkbox]):not([type=radio]):not([type=range]),
:root[data-theme="light"] .page select,
:root[data-theme="light"] .page textarea {
  background-color: var(--panel); color: var(--text); border-color: var(--ad-btn-line);
}
:root[data-theme="light"] .page input:focus, :root[data-theme="light"] .page select:focus, :root[data-theme="light"] .page textarea:focus {
  border-color: var(--brand); outline: 1px solid var(--brand); outline-offset: 0;
}
:root[data-theme="light"] .page input::placeholder, :root[data-theme="light"] .page textarea::placeholder { color: var(--muted); }

/* ── Tabs everywhere: one row of joined flat tabs, the open one solid blue ── */
.page-tabs, .stage-tabs, .afg-tabs, .afg-top-tabs, .rm-tabs, .reminders-page .rm-tabs, .ibx-tabs, .cd-sorts, .job-tabs, .cf-tabs, .dc-stages {
  gap: 0 !important;
}
.page-tabs { padding: 12px 20px 0; max-width: none; }
.stage-tabs, .afg-tabs, .rm-tabs, .reminders-page .rm-tabs { margin: 12px 0; }
.job-tabs { padding: 10px 0 0 !important; background: var(--ad-page) !important; border-bottom: 2px solid var(--brand) !important; }
.cf-tabs { padding: 8px 8px 0 !important; background: var(--panel) !important; border-bottom: 2px solid var(--brand) !important; }
.page-tabs .page-tab, .stage-tab, .reminders-page .rm-tab, .rm-tab, .ibx-tab, .cd-sort, .job-tabs button, .cf-tab, .dc-stage {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px !important; margin: 0 0 0 -1px !important;
  border: 1px solid var(--ad-tab-line) !important; border-radius: 0 !important;
  background: var(--ad-tab-bg) !important; color: var(--ad-tab-text) !important;
  font: inherit; font-size: 14.5px !important; font-weight: 600 !important; white-space: nowrap;
  box-shadow: none !important; opacity: 1 !important; cursor: pointer;
}
.page-tabs .page-tab:first-child, .stage-tab:first-child, .rm-tab:first-child, .ibx-tab:first-child, .cd-sort:first-child, .job-tabs button:first-child, .cf-tab:first-child, .dc-stage:first-child {
  margin-left: 0 !important; border-radius: 4px 0 0 4px !important;
}
.page-tabs .page-tab:last-child, .stage-tab:last-child, .rm-tab:last-child, .ibx-tab:last-child, .cd-sort:last-child, .job-tabs button:last-child, .cf-tab:last-child, .dc-stage:last-child {
  border-radius: 0 4px 4px 0 !important;
}
.page-tabs .page-tab:only-child, .stage-tab:only-child, .rm-tab:only-child, .cd-sort:only-child, .job-tabs button:only-child { border-radius: 4px !important; }
/* Tabs that sit on a line (the visit's tabs, a customer's folders): square at the bottom. */
.job-tabs button, .cf-tab { border-bottom: 0 !important; border-radius: 4px 4px 0 0 !important; margin-left: 2px !important; }
.job-tabs button:first-child, .cf-tab:first-child { margin-left: 0 !important; }
.page-tabs .page-tab:hover, .stage-tab:hover, .rm-tab:hover, .ibx-tab:hover, .cd-sort:hover, .job-tabs button:hover, .cf-tab:hover, .dc-stage.next:hover {
  background: var(--ad-hover-2) !important; color: var(--ad-blue-deep) !important;
}
.page-tabs .page-tab.on, .stage-tab.on, .reminders-page .rm-tab.on, .rm-tab.on, .ibx-tab.on, .cd-sort.on, .job-tabs button.on, .cf-tab.on, .dc-stage.current {
  z-index: 1; background: var(--ad-blue) !important; border-color: var(--ad-blue) !important; color: #ffffff !important;
}
.dc-stages { border: 0 !important; background: none !important; overflow: visible !important; border-radius: 0 !important; }
.dc-stage.done { color: var(--ad-tab-text) !important; }
.dc-stage:not(.current):not(.done):not(.next) { color: #8a96a6 !important; background: var(--panel-2) !important; border-color: var(--line) !important; }
.stage-count, .afg-tab-count {
  min-width: 24px; padding: 1px 7px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
  background: var(--panel) !important; color: var(--ad-tab-text) !important; border: 1px solid var(--ad-tab-line);
}
.stage-tab.on .stage-count { background: var(--panel) !important; color: var(--ad-blue) !important; border-color: #ffffff; }
.ibx-tab.on .ibx-count { background: var(--panel); color: var(--ad-blue); }

/* The inspections page's four counts: flat tiles, the chosen one blue. */
.ib-segs .insp-seg { border-width: 1px !important; opacity: 1 !important; background: var(--panel) !important; color: var(--text) !important; border-color: var(--line) !important; min-height: 58px !important; }
.ib-segs .insp-seg.t-bad { color: var(--bad-fg) !important; border-color: #e7b3ac !important; }
.ib-segs .insp-seg.on { background: var(--brand-soft) !important; border-color: var(--ad-blue) !important; box-shadow: inset 0 -4px 0 var(--ad-blue) !important; color: var(--ad-blue-deep) !important; }
.ib-segs .insp-seg.on.t-bad { background: var(--bad-bg) !important; border-color: var(--bad-line) !important; box-shadow: inset 0 -4px 0 var(--bad-line) !important; color: var(--bad-fg) !important; }

/* ── Visit board: a header row, the stage tabs, the cars as clear rows ── */
:root[data-theme="light"] .hero { background: var(--panel) !important; border: 1px solid var(--line) !important; }
.hero-count { font-weight: 700; }
.board.single .column { max-width: 980px; padding: 0 !important; overflow: hidden; }
.board.single .column > h2 { margin: 0; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.board .card, .board.single .card {
  margin: 0 !important; padding: 12px 150px 12px 16px !important; gap: 3px !important;
  border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: var(--panel) !important; box-shadow: none !important;
}
.board .card-wrap:last-child .card { border-bottom: 0 !important; }
.board .card:hover { background: var(--ad-hover) !important; }
.board .card.late { box-shadow: inset 4px 0 0 var(--late) !important; }
.card .card-customer { order: -1; font-size: 16px; font-weight: 700; color: var(--text); }
.card .card-vehicle { font-size: 14.5px; font-weight: 400; color: var(--muted); }
.card > .muted { font-size: 14px; font-weight: 600; color: var(--brand) !important; }
.card .flag { font-size: 13.5px; font-weight: 700; color: var(--late); }
.card-wrap .job-done { top: 50% !important; transform: translateY(-50%); right: 14px !important; border-width: 1px !important; border-radius: 4px !important; font-size: 14px; padding: 7px 12px; }
.card-wrap .job-done.is-done { transform: translateY(-50%); }
/* The team box: light, not a dark banner. */
.team-card { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 6px !important; }
.team-goal-track { background: var(--panel-2) !important; }
.team-shout { background: var(--panel-2) !important; border-left-color: #ef7d22 !important; color: var(--text); }
.team-edit { background: var(--panel-2) !important; }
.team-edit textarea, .team-edit input, .team-edit select { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--ad-btn-line) !important; }
.team-suggest .chip { color: var(--text) !important; border-color: var(--line) !important; }
.team-card .ghost { color: var(--text) !important; }

/* ── Lists of customers / documents / vehicles: name bold, vehicle grey, status a coloured word ── */
.cd-table { border-radius: 6px !important; }
.cd-row { min-height: 60px; padding: 10px 16px !important; font-size: 15px; }
.cd-row:not(.cd-head):hover { background: var(--ad-hover) !important; }
.cd-head { min-height: 40px; background: var(--panel-2) !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--muted) !important; }
.cd-name strong { font-size: 16px; font-weight: 700 !important; color: var(--text); }
.cd-name small { font-size: 13px !important; color: var(--brand) !important; font-weight: 600; }
.cd-cars { color: var(--muted); font-size: 14.5px; font-variant-numeric: normal !important; }
.cd-phone { font-size: 15px; }
.cd-last { font-size: 14.5px; }
.cd-last small { font-size: 13px !important; }
.cd-letter, .cd-page { border-radius: 4px !important; min-height: 38px; background: var(--panel) !important; border-color: var(--ad-btn-line) !important; color: var(--ad-tab-text) !important; font-weight: 600; }
.cd-letter.on { background: var(--ad-blue) !important; border-color: var(--ad-blue) !important; color: #ffffff !important; }
.cd-letters { gap: 3px !important; }

/* Documents list (the ALLDATA-style column on the left). */
.docs-side { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.docs-create { border-radius: 4px !important; min-height: 46px !important; font-size: 15.5px !important; }
.docs-list { border-radius: 4px !important; }
.doc-row { flex-shrink: 0 !important; padding: 10px 12px 10px 14px !important; }
.doc-row > * { flex-shrink: 0; }
.doc-row:hover { background: var(--ad-hover) !important; }
.doc-row.on { background: var(--brand-soft) !important; border-left-color: var(--ad-blue) !important; }
.doc-top { flex-wrap: wrap; row-gap: 2px; }
.doc-name { white-space: normal !important; overflow: visible !important; font-size: 15.5px !important; font-weight: 700 !important; color: var(--text) !important; }
.doc-vehicle { font-size: 14px !important; color: var(--muted) !important; }
.doc-vin { font-size: 12.5px !important; color: var(--muted) !important; }
.doc-foot, .doc-num, .doc-date { font-size: 13.5px !important; }
.doc-num { color: var(--ad-blue) !important; font-weight: 700 !important; }
/* The status: a coloured capital word, like PAID in green, not a box. */
.doc-badge { padding: 0 !important; border: 0 !important; background: none !important; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase; }
.doc-badge.t-paid { color: #1d7a3e !important; }
.doc-badge.t-invoice { color: #1d7a3e !important; }
.doc-badge.t-ro { color: var(--ad-blue) !important; }
.doc-badge.t-estimate { color: #6a5acd !important; }
.doc-badge.t-draft { color: var(--muted) !important; }
.doc-badge.t-owing { color: var(--bad-line) !important; }
.doc-pill { border-radius: 4px !important; }

/* ── The open document (estimate · repair order · invoice) ── */
.dc-top { padding: 12px 16px !important; }
.dc-kind { font-size: 1.45rem !important; font-weight: 600 !important; }
.dc-stage { min-height: 38px; }
.dc .dc-btn { border-radius: 4px !important; border-color: var(--ad-btn-line) !important; }
.dc .dc-btn:not(.primary):not(.danger) { color: var(--ad-tab-text) !important; }
.dc-table thead th { background: var(--panel-2) !important; color: var(--muted) !important; font-size: 13px !important; }
.dc-jobrow td { background: var(--panel-2) !important; }
.dc-toolbar-grid button { border-radius: 4px !important; color: var(--ad-tab-text) !important; font-size: 14px !important; }
.dc-total-bar { border-radius: 4px !important; background: var(--ad-blue) !important; }
.dc-paid-bar { border-radius: 4px !important; }

/* ── Inspections list ── */
.ib-row { border-left-width: 5px !important; }
.ib-typepill { border-radius: 4px !important; background: var(--panel-2) !important; }
.ib-actions { border-top-style: solid !important; }
.ib-actions .tiny-btn:not(.primary), .ib-unsigned .tiny-btn:not(.primary) { background: var(--panel) !important; border-color: var(--ad-btn-line) !important; }
.ib-search, .cd-search { border-radius: 4px !important; }

/* ── Status pills: flat, square-ish, readable ── */
.pill, .sale-pill, .afg-badge, .doc-job-status, .dc-chip { border-radius: 4px !important; }
:root[data-theme="light"] .doc-job-status.ok { background: var(--ok-bg); color: var(--ok-fg); }
:root[data-theme="light"] .doc-job-status.todo { background: var(--warn-bg); color: var(--warn-fg); }
:root[data-theme="light"] .doc-job-status.wait { background: var(--info-bg); color: var(--info-fg); }
:root[data-theme="light"] .doc-pending { color: var(--warn-fg); }

/* ── Settings: each block a white panel ── */
.settings-page > section { padding: 16px 18px !important; border: 1px solid var(--line) !important; border-radius: 6px !important; margin-bottom: 16px; }

/* ── Messages ── */
.ibx-tab { padding: 0 12px !important; font-size: 14px !important; }
:root[data-theme="light"] .ibx-tab.on { border-color: var(--ad-blue) !important; }
:root[data-theme="light"] .sender.cust strong { color: #a85d00; }
:root[data-theme="light"] .sender.cust .sender-badge { background: #f5a524; color: #1b1300; }

/* ── Pop-ups and menus: white, a thin line, a soft shadow ── */
:root[data-theme="light"] .notice { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--brand) !important; box-shadow: 0 6px 20px rgba(16, 24, 40, .14) !important; }
:root[data-theme="light"] .print-box, :root[data-theme="light"] aside.command { background: var(--panel); color: var(--text); }

/* ── Desk and tablet (761 px and wider): the blue menu rail on the left ── */
@media (min-width: 761px) {
  .bottombar, .more-sheet, .more-backdrop { display: none !important; }
  .app { padding: 0 0 0 var(--ad-rail) !important; }
  .notice { left: calc(var(--ad-rail) + 20px) !important; right: 24px !important; bottom: 24px !important; }

  /* The top strip runs the full width, over the rail, one row high. */
  :root[data-theme] .appbar {
    position: sticky !important; top: 0; z-index: 6 !important;
    margin-left: calc(-1 * var(--ad-rail));
    min-height: var(--ad-top); height: var(--ad-top);
    display: grid !important; grid-template-columns: auto auto minmax(160px, 1fr) auto !important; align-items: center !important;
    gap: 0 16px !important; padding: 0 16px 0 18px !important;
  }
  :root[data-theme] .appbar .brand-title { grid-column: auto !important; grid-row: auto !important; order: 0; }
  :root[data-theme] .appbar .titles { grid-column: auto !important; grid-row: auto !important; order: 1; padding-left: 16px !important; margin-left: 0 !important; border-left: 1px solid rgba(255,255,255,.22) !important; }
  :root[data-theme] .appbar .titles .eyebrow, :root[data-theme] .appbar .titles p.muted { display: none !important; }
  :root[data-theme] .appbar .titles h1 { font-size: 1.2rem !important; white-space: nowrap; margin: 0 !important; }
  :root[data-theme] .appbar form.search { grid-column: auto !important; grid-row: auto !important; order: 2; max-width: 560px; }
  :root[data-theme] .appbar .search input { min-height: 38px !important; height: 38px; }
  :root[data-theme] .appbar .appbar-actions { grid-column: auto !important; grid-row: auto !important; order: 3; flex-wrap: nowrap !important; }
  :root[data-theme] .appbar .appbar-actions .askbtn { min-height: 38px !important; padding: 0 12px !important; white-space: nowrap; }
  :root[data-theme] .appbar .bb-das { font-size: 38px !important; }
  :root[data-theme] .appbar .bb-auto { font-size: 15px !important; letter-spacing: .28em !important; }
  :root[data-theme] .appbar .bb-tag { font-size: 11.5px !important; }
  :root[data-theme] .appbar .bb-word { gap: 3px !important; padding-left: 12px !important; }
  :root[data-theme] .appbar .ph-hback { display: none !important; }
  :root[data-theme] .appbar.has-back .brand-title { display: flex !important; }

  :root[data-theme] .sidebar {
    display: flex !important; flex-direction: column; gap: 0 !important;
    position: fixed !important; top: var(--ad-top) !important; bottom: 0 !important; left: 0 !important; z-index: 5;
    width: var(--ad-rail) !important; padding: 0 0 6px !important;
    background: var(--ad-blue) !important; border-right: 0 !important; box-shadow: none !important;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  :root[data-theme] .sidebar::-webkit-scrollbar { display: none; }
  :root[data-theme] .sidebar .brandblock, :root[data-theme] .sidebar .rail-logo { display: none !important; }
  :root[data-theme] .sidebar nav { display: flex; flex-direction: column; gap: 0 !important; flex: 1 0 auto; }
  :root[data-theme] .sidebar .side {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 100%; min-height: 64px; padding: 8px 2px 7px !important; margin: 0;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important; color: #ffffff !important;
    font-size: 12px !important; font-weight: 600 !important; line-height: 1.1; text-align: center; letter-spacing: 0;
  }
  :root[data-theme] .sidebar .side .rail-ico { display: grid; place-items: center; width: 26px; height: 26px; color: #ffffff; }
  :root[data-theme] .sidebar .side .rail-ico svg { width: 25px; height: 25px; stroke-width: 2; }
  :root[data-theme] .sidebar .side .rail-name { display: block; max-width: calc(var(--ad-rail) - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffffff; }
  :root[data-theme] .sidebar .side:hover { background: rgba(255, 255, 255, .14) !important; }
  :root[data-theme] .sidebar .side:focus-visible { outline: 2px solid #ffffff !important; outline-offset: -3px !important; }
  :root[data-theme] .sidebar .side.on { background: var(--ad-blue-deep) !important; box-shadow: inset 4px 0 0 #ffffff !important; }
  :root[data-theme] .sidebar .side.on::before { content: none !important; }
  :root[data-theme] .sidebar .rail-badge {
    position: absolute; top: 6px; right: 14px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
    background: #e11d48; color: #ffffff; font-size: 11px; font-weight: 700; line-height: 19px; box-shadow: 0 0 0 2px var(--ad-blue) !important;
  }
  :root[data-theme] .sidebar .side.on .rail-badge { box-shadow: 0 0 0 2px var(--ad-blue-deep) !important; }
  /* "+ Check in" first, as the big plus at the top of the rail. */
  :root[data-theme] .sidebar nav .side[data-nav="check-in"] { order: -1; min-height: 66px; background: var(--ad-blue-dark) !important; border-bottom: 1px solid rgba(255,255,255,.18) !important; }
  :root[data-theme] .sidebar nav .side[data-nav="check-in"] .rail-ico { width: 30px; height: 30px; }
  :root[data-theme] .sidebar nav .side[data-nav="check-in"] .rail-ico svg { width: 30px; height: 30px; stroke-width: 2.2; }
  :root[data-theme] .sidebar nav .side[data-nav="check-in"]:hover { background: var(--ad-blue-deep) !important; }
  :root[data-theme] .sidebar nav .side[data-nav="check-in"].on { background: var(--ad-blue-deep) !important; }
  :root[data-theme] .sidebar .rail-small { min-height: 54px !important; border-top: 1px solid rgba(255,255,255,.16) !important; font-size: 11.5px !important; }

  main, .page > main { padding: 18px 22px !important; }
  /* Every visit tab visible on a tablet too (they wrap rather than hide off the edge). */
  .job-tabs { flex-wrap: wrap !important; overflow: visible !important; row-gap: 4px !important; }
  .page-tabs + main, .page-tabs + * { padding-top: 14px; }
}
/* Dark looks: the picked count tile keeps light text (dark blue on dark was unreadable). */
:root[data-theme="charcoal"] .ib-segs .insp-seg.on:not(.t-bad), :root[data-theme="midnight"] .ib-segs .insp-seg.on:not(.t-bad) { color: var(--text) !important; }