/* ============================================================================
   POLISH PASS v68 — systemic, not per-page.
   Loaded LAST so it wins on specificity ties without !important where possible.

   Every block below fixes a class of problem that was showing up on many pages
   at once. Reported symptoms are named against each one so the next person can
   tell intent from taste.
   ========================================================================== */

/* ── 1. LINE WEIGHT AND DARKNESS ──────────────────────────────────────────
   Borders were mixed 1px/2px and, in dark mode, close enough to the surface to
   read as smudges while in light mode they read as hard rules. One hairline
   token per theme, defined by contrast against the surface rather than by eye. */
/* ── 0. LIGHT MODE ALIASES (the big one) ───────────────────────────────────
   design-system.css declares the legacy aliases on :root —
     :root{ --fg:var(--text); --line:var(--border-soft); --hover:var(--surface-2); … }
   — and its comment assumes var() re-resolves per element. It does not: a custom
   property is substituted at computed-value time on the element that DECLARES
   it, so --fg computes against :root's DARK --text once and then inherits that
   concrete colour everywhere. body.light redefines --text, but by then --fg has
   already been frozen dark.
   Result: every var(--fg) / --line / --hover / --panel read dark values in light
   mode. Re-declaring the same aliases ON body.light lets them resolve against
   the light tokens, because they now sit on the element that defines them.
   Verified: "Add labels" text was rgb(236,231,223) on a white page before this. */
body.light{
  /* Light mode had TWO border palettes: the warm brand one (#DCD5CA/#E8E2D8) and
     a later cool-grey override (#cdd1d6/#dde0e4) that won on order. Cool grey
     lines against a warm #F4F2EE page are the "lines don't look right in light
     mode" complaint - keep the brand palette. */
  --border:#DCD5CA; --border-soft:#E8E2D8;
  --fg:var(--text); --fg-2:var(--text-2); --line:var(--border-soft);
  --hover:var(--surface-2); --panel:var(--surface);
  --warning:var(--warn); --success:var(--ok);
}
/* These derive from --border, so they hit the very trap described above: declared
   only on :root they would freeze to the DARK border and light mode would keep
   dark outlines (measured: identical #39342F in both themes before this). They
   are declared on BOTH roots so each resolves against its own --border. */
:root,body.light{
  --hair:1px;
  --line-1:color-mix(in srgb, var(--border) 62%, transparent);   /* dividers inside a card  */
  --line-2:color-mix(in srgb, var(--border) 88%, transparent);   /* card + control outlines */
  --line-3:var(--border);                                        /* emphasis / focus base   */
}
.card,.dtable-wrap,.modal,.pop-menu,.set-card,.cfg-card9{
  border-width:var(--hair);border-color:var(--line-2)}
.card-head,.fc-top,.set-sec-head,.dthr,.dt-bar{border-color:var(--line-1)}
.dtable-body .dtr{border-bottom:var(--hair) solid var(--line-1)}
.dtable-body .dtr:last-child{border-bottom:0}
hr,.divider,.sep{border-color:var(--line-1);background:var(--line-1)}
/* Inputs sit one step stronger than dividers so a field reads as a field - but
   NOT in the text colour. Something upstream was giving them a --fg border, so a
   text box was outlined as heavily as its own content (measured: border
   rgb(23,21,18) on a light page). Scoped tightly enough to win that. */
body .input,body input[type=text],body input[type=number],body input[type=date],
body input[type=tel],body input[type=email],body input[type=search],
body input:not([type]),body select,body textarea,body .select{
  border:var(--hair) solid var(--line-2);border-radius:9px}
body .input:hover,body select:hover,body textarea:hover{border-color:var(--line-3)}

/* ── 2. FOCUS: the control, and only the control ───────────────────────────
   Reported on the help-centre search and again on list search: the ring was
   drawn around a WRAPPER, so it enclosed the icon, the placeholder area and
   whatever else shared the box. A focus ring's job is to say which control has
   the keyboard - it must hug that control and nothing else. */
*:focus{outline:none}
.input:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,[tabindex]:focus-visible,a:focus-visible,.switch:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-radius:inherit}
/* wrappers must never carry the ring, even when a child has focus */
.ac-wrap:focus-within,.list-search:focus-within,.field:focus-within,
.form-row:focus-within,.hc-search:focus-within,.dt-bar:focus-within,
.cfg-add9:focus-within,.cfg-row9:focus-within{outline:none;box-shadow:none}
/* REMOVED (was wrong about the markup): this block stripped the search
   wrapper's border and added 38px of left padding to an input that is laid out
   as a flex sibling of its glyph, producing a 46px gap. The search field is
   styled in polish-v80.css - the wrapper is the control. */
.ac-wrap{border:0;background:none;box-shadow:none}

/* ── 3. HOVER ONLY WHILE HOVERED ───────────────────────────────────────────
   Reported: things stayed highlighted, and more than one row looked active at
   once. Guarding on (hover:hover) stops touch devices latching a hover state,
   and :not(:disabled) stops a dead control lighting up. */
@media (hover:hover){
  .dtr.click:hover{background:var(--hover)}
  .btn:not(:disabled):hover,.icon-btn:not(:disabled):hover{background:var(--hover)}
}
.dtr.click:hover .dtd{background:none}          /* one surface change, not per-cell */

/* ── 4. HEADING RHYTHM ─────────────────────────────────────────────────────
   Page titles, card titles and section labels each had their own ad-hoc size
   and margin, so no two pages agreed and reports in particular looked loose.
   One scale, one set of margins. */
.page-head h1,.detail-title{font-size:22px;line-height:1.25;font-weight:680;letter-spacing:-.01em;margin:0}
.page-head p,.detail-sub{font-size:13px;line-height:1.45;margin:4px 0 0;color:var(--muted)}
.page-head{margin:0 0 18px}
.card-head,.fc-top{padding:14px 16px;min-height:0}
.card-head h3,.fc-top h3{font-size:14px;line-height:1.3;font-weight:660;letter-spacing:.005em;margin:0}
.set-sec-head{margin:0 0 16px}
.set-sec-head h2{font-size:18px;line-height:1.3;font-weight:670;margin:0}
.set-sec-head p{font-size:13px;line-height:1.45;margin:4px 0 0;color:var(--muted)}
.section-label{font-size:11px;font-weight:680;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 10px}
.section-label:first-child{margin-top:0}
.card>.section-label,.modal .section-label{margin-top:16px}

/* ── 5. CHECKBOX ROWS ──────────────────────────────────────────────────────
   Reported twice (Manage Sharing role list, Operator/Technician on the contact
   form): the box sat centred in its own column metres from the label it belongs
   to. A checkbox and its label are one object and must read as one. */
.check-lbl9,label.check-lbl9,.chk-row,.pref-row>label{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13px;line-height:1.4}
.check-lbl9>input[type=checkbox],.chk-row>input[type=checkbox]{
  flex:0 0 auto;width:16px;height:16px;margin:0;accent-color:var(--accent)}
/* forms that lay a checkbox out as a grid cell: collapse it back beside its text */
.form-row:has(>input[type=checkbox]),.field:has(>input[type=checkbox]){
  display:flex;align-items:center;gap:9px}
.form-row>input[type=checkbox],.field>input[type=checkbox]{
  margin:0;justify-self:start;width:16px;height:16px}
.form-row .field-label:has(+input[type=checkbox]){margin:0}
/* the share-roles list: one row per role, box then name, no dead column */
.share-roles-list,.role-check-list{display:grid;gap:8px}
.share-roles-list label,.role-check-list label{
  display:flex;align-items:center;gap:9px;justify-content:flex-start}

/* ── 6. TOGGLES ────────────────────────────────────────────────────────────
   Reported as looking bad wherever they appear: the knob was off-centre and the
   off state was barely distinguishable from the track it sat in. */
.switch{position:relative;flex:0 0 auto;width:40px;height:23px;padding:0;border-radius:999px;
  border:var(--hair) solid var(--line-2);background:var(--surface-2,var(--hover));
  cursor:pointer;transition:background .15s,border-color .15s}
.switch .switch-knob{position:absolute;top:50%;left:3px;transform:translateY(-50%);
  width:17px;height:17px;border-radius:50%;background:var(--fg);opacity:.55;
  transition:left .15s,opacity .15s,background .15s}
.switch.on{background:var(--accent);border-color:var(--accent)}
.switch.on .switch-knob{left:20px;background:#fff;opacity:1}
.switch:disabled{opacity:.45;cursor:not-allowed}

/* ── 7. CHIPS / LABEL PILLS ────────────────────────────────────────────────
   Reported: label chips rendered as near-white pills with unreadable text in
   dark mode, because the pill hard-coded a light background. Derive both the
   surface and the text from the theme instead. */
/* Explicit per-theme tokens rather than color-mix off --fg: the mixed value was
   losing to an existing rule and computing to fully transparent, and the old
   hard-coded light pill is what made dark-mode label text unreadable. */
:root{--chip-bg:rgba(255,255,255,.09);--chip-fg:#F4EFE7;--chip-line:rgba(255,255,255,.16)}
body.light,html.light,:root.light{--chip-bg:rgba(0,0,0,.055);--chip-fg:#2A2621;--chip-line:rgba(0,0,0,.11)}
span.badge,button.badge,div.badge,.badge,.badge-muted,.veh-labelpick9 .badge,.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;font-size:12px;line-height:1.5;font-weight:560;
  background:var(--chip-bg);color:var(--chip-fg);
  border:var(--hair) solid var(--chip-line)}
.veh-labelpick9{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.veh-labelpick9 .badge{cursor:pointer}
@media (hover:hover){.veh-labelpick9 .badge:hover{filter:brightness(1.25)}}
.veh-editlabels9{display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;
  border:var(--hair) dashed var(--line-2);background:none;color:var(--fg);cursor:pointer}
.veh-editlabels9:hover{border-style:solid;background:var(--hover)}

/* ── 8. CHARTS ─────────────────────────────────────────────────────────────
   Reported: the fuel-cost chart was squeezed into a few dozen pixels, which
   makes a bar chart unreadable. Give any chart a real floor. */
.chart,.chart-wrap,.dw-chart,.bar-chart,.line-chart,svg.chart{min-height:200px}
.dw-card .chart,.dw-card .dw-chart{min-height:180px}
.chart svg,.dw-chart svg{width:100%;height:100%;display:block;overflow:visible}
.dw-card{min-height:0}

/* ── 9. POPUPS AND MENUS ───────────────────────────────────────────────────
   Reported: the help centre had large dead space, "Add Filter" opened far from
   its trigger, and the dashboard-name dropdown landed on top of the field it
   was meant to sit under. */
.pop-menu{padding:6px;border-radius:12px;min-width:200px;max-width:min(92vw,360px);
  box-shadow:var(--sh-lg);border:var(--hair) solid var(--line-2)}
.pop-menu .pop-row{padding:8px 10px;border-radius:8px;font-size:13px;line-height:1.4}
.pop-menu .pop-row+.pop-row{margin-top:1px}
.pop-menu>.pop-sec{padding:8px 10px 4px;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
/* anchored menus must not be pushed out of place by a stale transform */
.top-pop{position:absolute;transform:none}
.sv-panel9{max-height:min(70vh,460px);overflow:auto}
.sv-panel9 input{margin:2px 2px 6px;width:calc(100% - 4px)}
/* help centre: the two columns were sized for a much wider viewport */
.hc-body,.help-body{gap:16px}
.hc-topics{padding:4px}
.hc-answer,.hc-list{padding:0}
.hc-list .hc-q{padding:12px 14px;font-size:14px;line-height:1.4}
.modal .pop-menu,.modal .top-pop{z-index:80}

/* ── 10. TABLE CELLS ──────────────────────────────────────────────────────
    Widths are measured in JS now (see autoSizeCols9) so content fits. These
    rules keep a header from ever painting over its neighbour, and leave the
    ellipsis in place only as a backstop past the runaway-cell cap. */
.dth,.dtd{min-width:0;overflow:hidden}
.dth{white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.dth .dth-l{overflow:hidden;text-overflow:ellipsis}
.dtd{white-space:nowrap;text-overflow:ellipsis}
.dthr{align-items:stretch}

/* ── 11. INTEGRATION LOGO TILES ────────────────────────────────────────────
    Reported: a black ring around each logo. The tile had a border AND the logo
    art carries its own edge, so the two stacked into a hard outline. */
.integ-logo,.integ-ic,.int-logo9,.integ-tile img,.integ-logo img{
  border:0;box-shadow:none;background:transparent;border-radius:8px}
.integ-tile,.int-tile9{border:var(--hair) solid var(--line-1);border-radius:10px;
  background:var(--surface);display:grid;place-items:center;overflow:hidden}
.integ-tile img,.int-tile9 img{width:auto;height:auto;max-width:76%;max-height:76%;object-fit:contain}

/* ── 12. SPACING LEAKS ─────────────────────────────────────────────────────
    Reported on the trip Route section and the fuel/alerts card: stacked
    wrappers each contributing their own margin produced gaps several times
    larger than intended. */
.trip-loc-tools{margin:6px 0 0}
.trip-loc-tools+.ms-block,.trip-loc-tools+*{margin-top:12px}
.dispatch-modal-form>*+*{margin-top:14px}
.dispatch-modal-form .form-grid{margin:0}
.ms-block .section-label{margin-top:0}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.form-grid>*{min-width:0}
/* NOT `.field+.field`: `.field` is also a class on the inputs themselves, so
   that selector dropped the second control of every inline group (the currency
   select next to a price) by a whole margin. Wrappers stack; controls do not. */
.field-wrap+.field-wrap,.form-row+.form-row{margin-top:12px}
.field-hint{margin:5px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
/* toolbar rows: one baseline, no stray vertical drift */
.dash-toolbar,.dw-toolbar,.list-toolbar,.dt-tools{display:flex;align-items:center;gap:8px}
.dash-toolbar>*,.dw-toolbar>*,.list-toolbar>*,.dt-tools>*{margin:0}

/* ── 13. VEHICLE FORM: continuous scroll, distinct boxes ───────────────────
   The form was already one scroll, but the six sections were bare <section>s
   running into each other so it read as a single very long form. Each is now its
   own card with a real heading, which also gives the scrollspy a visible landing
   point. Matches how the reference add-pages separate concerns. */
.veh-form-sec.vfs-card9{
  background:var(--panel);border:var(--hair) solid var(--line-2);border-radius:14px;
  padding:0;margin:0 0 16px;overflow:hidden}
.veh-form-sec.vfs-card9:last-child{margin-bottom:0}
.vfs-head9{padding:15px 18px 13px;border-bottom:var(--hair) solid var(--line-1);
  background:color-mix(in srgb, var(--fg) 3%, transparent)}
.vfs-head9 h3{margin:0;font-size:15px;line-height:1.3;font-weight:670;letter-spacing:-.005em}
.vfs-head9 p{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.vfs-body9{padding:18px}
/* the first label inside a box must not add a second gap under the header */
.vfs-body9>.section-label:first-child{margin-top:0}
/* scroll-margin so a rail click lands the heading clear of the sticky bar */
.veh-form-sec{scroll-margin-top:88px}
@media(max-width:640px){.vfs-head9{padding:13px 14px 11px}.vfs-body9{padding:14px}}

/* ── 14. PAGE HEADERS, ONE TREATMENT ──────────────────────────────────────
   Every list, detail and settings page had its own title size, weight and
   margin, so no two pages agreed and reports read as the loosest of them.
   One block, applied to all three head patterns. */
.page-head,.detail-head,.pageHead{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 18px}
.page-head-tx,.detail-head-tx{min-width:0}
.page-head h1,.detail-title,.page-head-tx h1{
  font-size:22px;line-height:1.25;font-weight:680;letter-spacing:-.012em;margin:0}
.page-head p,.detail-sub,.page-head-tx p{
  font-size:13px;line-height:1.45;font-weight:450;color:var(--muted);margin:4px 0 0}
.page-actions,.detail-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* a heading must never be the thing that makes a page scroll sideways */
.page-head h1,.detail-title{overflow-wrap:anywhere}

/* ── 15. REPORT PAGE RHYTHM ───────────────────────────────────────────────
   Report cards sat at mixed gaps with titles competing with their own metadata
   row. Even spacing, one title weight, metadata pushed right and muted. */
/* DIRECT children only. As `.page .card+.card` this also matched dashboard
   tiles - .card inside .page - giving every tile after the first a 16px top
   margin the first one lacked, which staggered the whole row. */
.page>.card+.card{margin-top:16px}
.card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:var(--hair) solid var(--line-1)}
.card-head h3{flex:1 1 auto;min-width:0}
.card-head .card-meta{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.card>.chart,.card>.chart-wrap,.card>.dw-chart{padding:14px 16px 16px}
.card-body,.card>.hist-list,.card>.activity{padding:14px 16px}
.card-head+.card-body{padding-top:14px}