/* Quarter Tracker — Dashboard view (6.8.0). Power BI-style report page: slicer pane, KPI cards,
   2×2 visuals, dealer matrix. The sheet view uses the shared .ds-grid styles in styles.css.
   Rules: --v6-* tokens with the legacy variable of the same role as fallback (v5 shell), no px font
   sizes. The only colour literals are the chart palette below, validated with the dataviz
   validator (passenger/commercial: CVD ΔE 24.7, normal-vision ΔE 33.6, both ≥3:1 on the surface)
   and the reserved status steps, which always ship with an icon + label. */
#tab-quartertracker {
  --qt-pass: #2a78d6;          /* categorical slot 1 — passenger */
  --qt-comm: #eb6834;          /* categorical slot 2 — commercial */
  --qt-good: #0ca30c;          /* status: on track (▲) */
  --qt-warn: #fab219;          /* status: close (●) */
  --qt-bad:  #d03b3b;          /* status: behind (▼) */
  --qt-surface: var(--v6-surface, var(--card));
  --qt-ink: var(--v6-t1, var(--text));
  --qt-ink2: var(--v6-t2, var(--textM));
  --qt-line: var(--v6-stroke, var(--border));
  --qt-canvas: var(--v6-canvas, var(--bg));
}
#tab-quartertracker [hidden] { display: none !important; }

/* View switch (Sheet | Dashboard) */
.qt-views { display: inline-flex; border: 1px solid var(--qt-line); border-radius: 4px; overflow: hidden; align-self: flex-end; }
.qt-views button { font: inherit; border: 0; background: var(--qt-surface); color: var(--qt-ink2); padding: 6px 14px; cursor: pointer; }
.qt-views button + button { border-left: 1px solid var(--qt-line); }
.qt-views button.on { background: var(--v6-brand, var(--navy)); color: var(--v6-surface, var(--card)); font-weight: 600; }

/* Page: slicer pane + canvas */
.qtd { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: start; }
.qtd-slicers { background: var(--qt-surface); border: 1px solid var(--qt-line); border-radius: 6px; padding: 10px; position: sticky; top: 8px; }
.qtd-sl + .qtd-sl { margin-top: 12px; }
.qtd-sl h4 { margin: 0 0 6px; font-size: var(--v6-fs-cap, 0.75rem); text-transform: uppercase; letter-spacing: .04em; color: var(--qt-ink2); font-weight: 600; }
.qtd-sl button { display: flex; justify-content: space-between; gap: 6px; width: 100%; font: inherit; text-align: left; border: 1px solid transparent; background: transparent; color: var(--qt-ink); padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.qtd-sl button:hover { background: var(--v6-hover, var(--goldBg)); }
.qtd-sl button.on { border-color: var(--v6-action, var(--navy)); background: var(--v6-sel, var(--goldBg)); font-weight: 600; }
.qtd-sl button .n { color: var(--qt-ink2); font-variant-numeric: tabular-nums; }
.qtd-seg { display: flex; gap: 4px; flex-wrap: wrap; }
.qtd-seg button { width: auto; flex: 1 1 auto; justify-content: center; border-color: var(--qt-line); }
.qtd-clear { margin-top: 12px; width: 100%; }
.qtd-filters { font-size: var(--v6-fs-cap, 0.75rem); color: var(--qt-ink2); margin: 0 0 8px; min-height: 1em; }

.qtd-canvas { min-width: 0; }
.qtd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 12px; }
.qtd-card { background: var(--qt-surface); border: 1px solid var(--qt-line); border-radius: 6px; padding: 12px 14px; min-width: 0; }
.qtd-kpi .k { font-size: var(--v6-fs-cap, 0.75rem); color: var(--qt-ink2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.qtd-kpi .v { font-size: var(--v6-fs-title3, 1.6rem); font-weight: 700; color: var(--qt-ink); font-variant-numeric: tabular-nums; line-height: 1.2; margin: 4px 0 2px; }
.qtd-kpi .s { font-size: var(--v6-fs-cap, 0.75rem); color: var(--qt-ink2); }
.qtd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.qtd-card h3 { margin: 0 0 2px; font-size: var(--v6-fs-body, 0.9rem); font-weight: 600; color: var(--qt-ink); }
.qtd-card .sub { margin: 0 0 8px; font-size: var(--v6-fs-cap, 0.75rem); color: var(--qt-ink2); }
.qtd-empty { color: var(--qt-ink2); padding: 24px 0; text-align: center; }

/* Status: colour + icon + label, never colour alone */
.qt-st { font-weight: 600; white-space: nowrap; }
.qt-st.good { color: var(--v6-ok, var(--green)); }
.qt-st.warn { color: var(--v6-warn, var(--amber)); }
.qt-st.bad  { color: var(--v6-bad, var(--red)); }

/* SVG visuals */
.qtd-svg { width: 100%; height: auto; display: block; overflow: visible; }
.qtd-svg text { fill: var(--qt-ink2); font-size: var(--v6-fs-cap, 0.72rem); font-family: inherit; }
.qtd-svg text.lbl { fill: var(--qt-ink); }
.qtd-svg text.val { fill: var(--qt-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.qtd-svg .axis { stroke: var(--qt-line); stroke-width: 1; }
.qtd-svg .grid { stroke: var(--qt-line); stroke-width: 1; stroke-dasharray: 2 4; }
.qtd-svg .ref { stroke: var(--qt-ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.qtd-svg .track { fill: var(--qt-canvas); }
.qtd-svg .pass { fill: var(--qt-pass); }
.qtd-svg .comm { fill: var(--qt-comm); }
.qtd-svg .tgt { stroke: var(--qt-ink); stroke-width: 2.5; stroke-linecap: round; }
.qtd-svg .pace { stroke: var(--qt-ink2); stroke-width: 2; stroke-dasharray: 3 3; }
.qtd-svg .b-good { fill: var(--qt-good); }
.qtd-svg .b-warn { fill: var(--qt-warn); }
.qtd-svg .b-bad  { fill: var(--qt-bad); }
.qtd-svg .b-none { fill: var(--qt-line); }
.qtd-svg .gap { fill: var(--qt-bad); }
.qtd-svg [data-tip] { cursor: default; }
.qtd-svg [data-f] { cursor: pointer; }
.qtd-svg [data-f]:hover rect, .qtd-svg [data-f]:focus rect { opacity: .82; }
.qtd-svg [data-f]:focus { outline: none; }
.qtd-svg [data-f]:focus-visible rect.hit { stroke: var(--v6-action, var(--navy)); stroke-width: 2; }
.qtd-svg .dim rect:not(.hit):not(.track) { opacity: .3; }
.qtd-svg rect.hit { fill: transparent; }

.qtd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--v6-fs-cap, 0.75rem); color: var(--qt-ink2); margin: 6px 0 0; }
.qtd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.qtd-legend i.pass { background: var(--qt-pass); }
.qtd-legend i.comm { background: var(--qt-comm); }
.qtd-legend i.tgt { height: 0; border-top: 2.5px solid var(--qt-ink); border-radius: 0; vertical-align: 3px; width: 14px; }
.qtd-legend i.pace { height: 0; border-top: 2px dashed var(--qt-ink2); border-radius: 0; vertical-align: 3px; width: 14px; }

/* Dealer matrix */
.qtd-tw { overflow: auto; max-height: 520px; }
.qtd-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.qtd-t th { position: sticky; top: 0; background: var(--qt-surface); text-align: right; font-size: var(--v6-fs-cap, 0.75rem); color: var(--qt-ink2); text-transform: uppercase; letter-spacing: .03em; padding: 6px 8px; border-bottom: 2px solid var(--qt-line); white-space: nowrap; }
.qtd-t th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
.qtd-t td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--qt-line); white-space: nowrap; }
.qtd-t th.t, .qtd-t td.t { text-align: left; }
.qtd-t tbody tr:hover { background: var(--v6-hover-soft, var(--goldBg)); }
.qtd-t tr.hl { background: var(--v6-sel, var(--goldBg)); }
.qtd-t .qt-code { color: var(--qt-ink2); font-size: var(--v6-fs-cap, 0.72rem); }
.qtd-t tfoot td, .qtd-t tfoot td strong { color: var(--qt-ink); }
.qtd-t tfoot td { font-weight: 700; border-top: 2px solid var(--qt-line); border-bottom: 0; position: sticky; bottom: 0; background: var(--qt-surface); }

/* Tooltip */
.qtd-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--v6-brand-ink, var(--navy)); color: var(--v6-surface, var(--card));
  padding: 6px 9px; border-radius: 4px; font-size: var(--v6-fs-cap, 0.75rem); line-height: 1.45; white-space: pre; box-shadow: 0 4px 14px rgba(0,0,0,.18); max-width: 320px; }

@media (max-width: 900px) {
  .qtd { grid-template-columns: 1fr; }
  .qtd-slicers { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .qtd-sl + .qtd-sl { margin-top: 0; }
  .qtd-sl-list { max-height: 9.5em; overflow-y: auto; }
  .qtd-grid { grid-template-columns: 1fr; }
}
@media print {
  .qtd { grid-template-columns: 1fr; }
  .qtd-slicers, .qtd-tip { display: none; }
  .qtd-card { break-inside: avoid; }
}