/* ================================================================
   Incident Detail — Page-specific styles (DARK MODE)
   Loaded after ../shared.css, which is light-themed; this file
   re-themes the shared chrome for a dark surface and adds the
   TTR-by-segment chart styles. All overrides are scoped to
   `body.dt-dark` so nothing here leaks to the other pages.
   ================================================================ */

/* ── Dark palette tokens ───────────────────────────────────────
   Chart colors were validated with the dataviz palette validator
   against the dark panel surface (#16182B): worst adjacent CVD ΔE
   47 and all ≥ 3:1 contrast. Bars are a single magnitude hue; the
   reference lines (median/p90/worst) are always directly labeled,
   so identity is never carried by color alone. */
.dt-dark {
    --dt-page:        #0A0A14;
    --dt-surface-1:   #16182B;   /* cards, controls, summary, modal */
    --dt-surface-2:   #1E2138;   /* inputs, chips, plot lanes */
    --dt-surface-3:   #262A45;   /* hover */
    --dt-ink:         #F2F4FF;
    --dt-ink-2:       #AEB4D6;
    --dt-muted:       #7C82A6;
    --dt-border:      rgba(255,255,255,0.09);
    --dt-border-2:    rgba(255,255,255,0.14);
    --dt-grid:        #262A45;
    --dt-axis:        #3A3F63;

    --dt-series:      #7C8CFF;   /* bars & incident dots (magnitude) */
    --dt-series-soft: rgba(124,140,255,0.22);   /* n<5 transparent fill */
    --dt-median:      #34D399;   /* median reference line */
    --dt-p90:         #FBBF24;   /* p90 reference line */
    --dt-worst:       #F87171;   /* worst / max marker */

    --dt-label-w:     210px;
    --dt-st-w:        88px;
    --dt-n-w:         52px;
    --dt-up-w:        62px;

    background: var(--dt-page);
    color: var(--dt-ink-2);
}

/* Header keeps the brand royal→indigo gradient (reads well on the dark plane). */

/* ── Summary bar (dark) ────────────────────────────────────────── */
.dt-dark .summary-bar {
    display: none;
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border);
    box-shadow: none;
}
.dt-dark .summary-bar.visible { display: block; }
.dt-dark .summary-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 0; }
.dt-dark .summary-stat { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.dt-dark .summary-stat-value {
    font-size: 26px; font-weight: 600; color: var(--dt-ink); line-height: 1.1;
}
.dt-dark .summary-stat-value.accent { color: var(--dt-series); }
.dt-dark .summary-stat-value.worst  { color: var(--dt-worst); }
.dt-dark .summary-stat-label {
    font-size: 11px; color: var(--dt-muted); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.dt-dark .summary-stat-sub { font-size: 11px; color: var(--dt-muted); font-weight: 300; }

/* ── Controls (dark) ───────────────────────────────────────────── */
.dt-dark .controls {
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border);
    box-shadow: none;
}
.dt-dark .control-label { color: var(--dt-muted); }

.dt-dark .search-input {
    background: var(--dt-surface-2);
    border: 1px solid var(--dt-border-2);
    color: var(--dt-ink);
}
.dt-dark .search-input::placeholder { color: var(--dt-muted); }
.dt-dark .search-input:focus {
    border-color: var(--dt-series);
    box-shadow: 0 0 0 2px rgba(124,140,255,0.22);
}

/* View / window / sort buttons */
.dt-dark .sort-btn, .dt-dark .view-btn {
    background: var(--dt-surface-2);
    border: 1px solid var(--dt-border-2);
    color: var(--dt-ink-2);
}
.dt-dark .sort-btn:hover, .dt-dark .view-btn:hover { border-color: var(--dt-series); color: var(--dt-ink); }
.dt-dark .sort-btn.active, .dt-dark .view-btn.active {
    background: var(--dt-series); border-color: var(--dt-series); color: #0A0A14; font-weight: 600;
}

/* Low-sample toggle switch */
.dt-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 6px; border-radius: 20px;
    background: var(--dt-surface-2); border: 1px solid var(--dt-border-2);
    cursor: pointer; font-family: inherit; font-size: 12px; color: var(--dt-ink-2);
    transition: all 0.15s;
}
.dt-toggle:hover { border-color: var(--dt-series); }
.dt-toggle-track {
    width: 30px; height: 16px; border-radius: 10px; background: var(--dt-axis);
    position: relative; flex-shrink: 0; transition: background 0.15s;
}
.dt-toggle-knob {
    position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
    background: #cfd3f0; transition: transform 0.18s, background 0.15s;
}
.dt-toggle.active { color: var(--dt-ink); }
.dt-toggle.active .dt-toggle-track { background: var(--dt-series); }
.dt-toggle.active .dt-toggle-knob { transform: translateX(14px); background: #0A0A14; }
.dt-toggle-text { white-space: nowrap; }

/* Multi-select (dark) */
.dt-dark .multi-select-trigger {
    background: var(--dt-surface-2); border: 1px solid var(--dt-border-2); color: var(--dt-ink-2);
}
.dt-dark .multi-select-trigger:hover { border-color: var(--dt-series); }
.dt-dark .multi-select-trigger.open {
    border-color: var(--dt-series); box-shadow: 0 0 0 2px rgba(124,140,255,0.22);
}
.dt-dark .multi-select-trigger.has-selection {
    border-color: var(--dt-series); background: rgba(124,140,255,0.14); color: var(--dt-ink);
}
.dt-dark .multi-select-trigger .chevron { color: var(--dt-muted); }
.dt-dark .multi-select-dropdown {
    background: var(--dt-surface-1); border: 1px solid var(--dt-border-2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.dt-dark .multi-select-option { color: var(--dt-ink-2); }
.dt-dark .multi-select-option:hover { background: var(--dt-surface-3); }

/* Drag overlay + empty state + modal (dark) */
.dt-dark .drop-overlay { background: rgba(124,140,255,0.10); border-color: var(--dt-series); }
.dt-dark .drop-overlay-inner { background: var(--dt-surface-1); box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.dt-dark .drop-overlay-inner .drop-icon { color: var(--dt-series); }
.dt-dark .drop-overlay-inner strong { color: var(--dt-ink); }
.dt-dark .drop-overlay-inner span { color: var(--dt-muted); }

.dt-dark .no-data {
    background: var(--dt-surface-1); border: 1px solid var(--dt-border); color: var(--dt-muted); box-shadow: none;
}
.dt-dark .no-data strong { color: var(--dt-ink); }

.dt-dark .modal { background: var(--dt-surface-1); box-shadow: 0 8px 40px rgba(0,0,0,0.6); }
.dt-dark .modal-header { background: var(--dt-surface-1); border-bottom: 1px solid var(--dt-border); }
.dt-dark .modal-header h2 { color: var(--dt-ink); }
.dt-dark .modal-close { background: var(--dt-surface-2); color: var(--dt-ink-2); }
.dt-dark .modal-close:hover { background: var(--dt-surface-3); color: var(--dt-ink); }
.dt-dark .modal-section h3 { color: var(--dt-muted); }
.dt-dark .modal-section p, .dt-dark .modal-section li { color: var(--dt-ink-2); }
.dt-dark .modal-section code { background: rgba(124,140,255,0.16); color: var(--dt-series); }
.dt-dark .control-help-row { border-bottom: 1px solid var(--dt-border); }
.dt-dark .control-help-name { color: var(--dt-series); }
.dt-dark .control-help-desc { color: var(--dt-ink-2); }

/* ── Freshness status (Fresh / At Risk / Stale / Training) ──────────
   Reuse the already-validated dark tokens: median-green = Fresh,
   p90-amber = At Risk, worst-red = Stale, muted = Training (no MC
   threshold yet). Status always ships with a text label (and an ⚠
   glyph on At Risk) — identity is never carried by color alone. */
.dt-status {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    white-space: nowrap; letter-spacing: 0.2px; line-height: 1.5; display: inline-block;
}
.dt-status.badge-fresh    { background: rgba(52,211,153,0.16);  color: #6EE7B7; }
.dt-status.badge-atrisk   { background: rgba(251,191,36,0.16);  color: #FCD34D; }
.dt-status.badge-stale    { background: rgba(248,113,113,0.18); color: #FCA5A5; }
.dt-status.badge-training { background: rgba(255,255,255,0.06); color: var(--dt-ink-2); }
.dt-status.has-pop { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }

/* Per-segment status cell in the row grid */
.dt-seg-status { min-width: 0; }
.dt-seg-status .dt-status {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* Summary status tiles + stacked status bar */
.dt-dark .summary-stat-value.fresh    { color: #34D399; }
.dt-dark .summary-stat-value.atrisk   { color: #FBBF24; }
.dt-dark .summary-stat-value.stale    { color: #F87171; }
.dt-dark .summary-stat-value.training { color: var(--dt-muted); }
.dt-dark .summary-bar-visual {
    display: flex; gap: 2px; height: 8px; margin-top: 14px;
    border-radius: 5px; overflow: hidden; background: var(--dt-surface-2);
}
.dt-dark .summary-bar-seg { height: 100%; min-width: 2px; border-radius: 2px; transition: width 0.3s; }
.seg-fresh    { background: #34D399; }
.seg-atrisk   { background: #FBBF24; }
.seg-stale    { background: #F87171; }
.seg-training { background: var(--dt-muted); }

/* Status legend inside the help modal (dark text overrides) */
.dt-dark .status-label { color: var(--dt-ink); }
.dt-dark .status-desc  { color: var(--dt-ink-2); }

/* ── Group headers (Domain / Feed roll-up) ─────────────────────────
   A header band above a set of cards (Domain view) or atop a Feed
   card, carrying the group's status roll-up + summary chips. */
.dt-group { display: flex; flex-direction: column; gap: 12px; }
.dt-group + .dt-group { margin-top: 4px; }
.dt-group-head {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 10px;
    background: var(--dt-surface-1); border: 1px solid var(--dt-border);
}
.dt-group-icon {
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #0A0A14; text-transform: uppercase;
}
.dt-group-icon.si-fresh    { background: #34D399; }
.dt-group-icon.si-atrisk   { background: #FBBF24; }
.dt-group-icon.si-stale    { background: #F87171; }
.dt-group-icon.si-training { background: var(--dt-muted); }
.dt-group-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dt-group-name {
    font-size: 14px; font-weight: 600; color: var(--dt-ink);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-group-sub { font-size: 11px; color: var(--dt-muted); font-weight: 400; }
.dt-group-meta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.dt-group-body { display: flex; flex-direction: column; gap: 12px; padding-left: 14px; }

/* Mini stacked status bar (group heads + card heads) */
.dt-mini-bar {
    width: 54px; height: 6px; border-radius: 3px; flex-shrink: 0;
    overflow: hidden; display: flex; gap: 1px; background: var(--dt-surface-2);
}
.dt-mini-seg { height: 100%; min-width: 1px; }

/* ── Scale note (per-table shared x-scale explainer) ───────────── */
.dt-scale-note {
    font-size: 11.5px; color: var(--dt-muted); margin: 0 2px 12px;
    display: none;
}
.dt-scale-note.visible { display: block; }
.dt-scale-note strong { color: var(--dt-ink-2); font-weight: 500; }

/* ── Chart cards ───────────────────────────────────────────────── */
.chart-list { display: flex; flex-direction: column; gap: 12px; }

.dt-card {
    background: var(--dt-surface-1);
    border: 1px solid var(--dt-border);
    border-radius: 10px;
    overflow: hidden;
}

.dt-card-head {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--dt-border);
    background: linear-gradient(180deg, rgba(124,140,255,0.05), rgba(124,140,255,0));
}
.dt-card-title {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px; font-weight: 600; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-card-title .t-schema { color: var(--dt-muted); font-weight: 400; }
.dt-card-title .t-tbl    { color: var(--dt-ink); }
.dt-card-meta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.dt-chip {
    font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 10px;
    background: var(--dt-surface-2); color: var(--dt-ink-2); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dt-chip strong { color: var(--dt-ink); font-weight: 600; }
.dt-chip.worst strong { color: var(--dt-worst); }

.dt-chart { padding: 12px 18px 8px; }

/* ── Segment rows (label | n | plot) ───────────────────────────── */
.dt-seg-row {
    display: grid;
    grid-template-columns: var(--dt-label-w) var(--dt-st-w) var(--dt-n-w) var(--dt-up-w) 1fr;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}
.dt-seg-row + .dt-seg-row { border-top: 1px solid rgba(255,255,255,0.045); }

.dt-seg-label { min-width: 0; overflow: hidden; }
.dt-seg-id {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px; font-weight: 600; color: var(--dt-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.dt-seg-id.table-level { color: var(--dt-muted); font-style: italic; font-weight: 400; }
.dt-seg-client {
    font-size: 10.5px; color: var(--dt-muted); font-weight: 300;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.dt-seg-n {
    font-size: 11px; color: var(--dt-muted); text-align: right;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dt-seg-n .n-low { color: var(--dt-worst); }

/* Uptime % per segment (colored by health band) */
.dt-seg-up {
    font-size: 12px; text-align: right; font-variant-numeric: tabular-nums;
    white-space: nowrap; font-weight: 600;
}
.up-good  { color: var(--dt-median); }
.up-warn  { color: var(--dt-p90); }
.up-bad   { color: var(--dt-worst); }
.up-muted { color: var(--dt-muted); font-weight: 400; }

.dt-seg-plot { min-width: 0; }
.dt-seg-plot svg { display: block; width: 100%; }

/* Axis row (shares the grid so the plot column lines up) */
.dt-axis-row {
    display: grid;
    grid-template-columns: var(--dt-label-w) var(--dt-st-w) var(--dt-n-w) var(--dt-up-w) 1fr;
    gap: 10px; margin-top: 2px;
}
.dt-axis-label {
    grid-column: 1 / 5; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--dt-muted); align-self: center; text-align: right;
}

/* SVG text roles (used inside the plot SVGs) */
.dt-seg-plot text, .dt-axis-row text {
    font-family: 'Roboto', -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
}
.dt-val-label { fill: var(--dt-ink); font-size: 11px; font-weight: 500; }
.dt-axis-tick { fill: var(--dt-muted); font-size: 10px; }
.dt-ref-label { font-size: 9.5px; font-weight: 600; }
.dt-ref-label.median { fill: var(--dt-median); }
.dt-ref-label.p90    { fill: var(--dt-p90); }
.dt-ref-label.worst  { fill: var(--dt-worst); }

/* ── Hover tooltip ─────────────────────────────────────────────── */
.dt-tip {
    display: none; position: fixed; z-index: 3000; max-width: 320px;
    background: #0C0E1A; color: var(--dt-ink-2);
    border: 1px solid var(--dt-border-2); border-radius: 8px;
    padding: 9px 11px; box-shadow: 0 8px 28px rgba(0,0,0,0.6);
    font-size: 12px; line-height: 1.5; pointer-events: none;
}
.dt-tip.visible { display: block; }
.dt-tip .tip-head { font-weight: 600; color: var(--dt-ink); margin-bottom: 3px; }
.dt-tip .tip-row { display: flex; justify-content: space-between; gap: 16px; }
.dt-tip .tip-k { color: var(--dt-muted); }
.dt-tip .tip-v { color: var(--dt-ink); font-variant-numeric: tabular-nums; }

/* ── Debug footer (dark) ───────────────────────────────────────── */
.dt-dark .debug-footer { border-top: 1px solid var(--dt-border); color: var(--dt-muted); }
.dt-dark .debug-footer strong { color: var(--dt-ink-2); }
.dt-dark .debug-sep { color: var(--dt-axis); }

/* ── Expandable rows + incident breakdown ─────────────────────── */
.dt-seg-row { cursor: pointer; border-radius: 6px; transition: background 0.1s; }
.dt-seg-row:hover { background: rgba(255,255,255,0.028); }
.dt-seg-label { position: relative; padding-left: 15px; }
.dt-seg-label::before {
    content: '▸'; position: absolute; left: 1px; top: 50%; transform: translateY(-50%);
    font-size: 9px; color: var(--dt-muted); transition: color 0.12s;
}
.dt-seg-row:hover .dt-seg-label::before { color: var(--dt-series); }
.dt-seg-row.expanded { background: rgba(124,140,255,0.06); }
.dt-seg-row.expanded .dt-seg-label::before { content: '▾'; color: var(--dt-series); }

.dt-seg-detail {
    margin: 2px 0 10px 15px;
    background: var(--dt-surface-2);
    border: 1px solid var(--dt-border);
    border-radius: 8px;
    overflow: hidden;
}
.dt-bd-head {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-bottom: 1px solid var(--dt-border);
    background: rgba(255,255,255,0.02);
}
.dt-bd-title { font-size: 12px; font-weight: 600; color: var(--dt-ink); }
.dt-bd-count { font-size: 11px; color: var(--dt-muted); font-variant-numeric: tabular-nums; }
.dt-bd-sort { margin-left: auto; display: flex; gap: 4px; }
.dt-bd-sort-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--dt-muted); align-self: center; margin-right: 2px; }
.dt-bd-sort-btn {
    font-family: inherit; font-size: 11px; padding: 3px 9px; border-radius: 6px;
    background: var(--dt-surface-1); border: 1px solid var(--dt-border-2); color: var(--dt-ink-2); cursor: pointer;
    transition: all 0.12s;
}
.dt-bd-sort-btn:hover { border-color: var(--dt-series); color: var(--dt-ink); }
.dt-bd-sort-btn.active { background: var(--dt-series); border-color: var(--dt-series); color: #0A0A14; font-weight: 600; }

.dt-bd-table { max-height: 264px; overflow-y: auto; }
.dt-bd-row {
    display: grid; grid-template-columns: minmax(150px, 1fr) 160px 88px;
    gap: 12px; align-items: center; padding: 6px 12px;
    font-size: 12px; border-top: 1px solid rgba(255,255,255,0.045);
}
.dt-bd-hrow {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--dt-muted);
    border-top: none; position: sticky; top: 0; background: var(--dt-surface-2); z-index: 1; font-weight: 500;
}
.dt-bd-when { color: var(--dt-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-bd-dt { position: relative; height: 18px; display: flex; align-items: center; }
.dt-bd-bar { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 12px; background: var(--dt-series-soft); border-radius: 3px; z-index: 0; min-width: 2px; }
.dt-bd-dtval { position: relative; z-index: 1; color: var(--dt-ink); font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 6px; }
.dt-bd-thr { color: var(--dt-muted); text-align: right; font-variant-numeric: tabular-nums; }
.dt-bd-hrow .dt-bd-thr, .dt-bd-hrow .dt-bd-dtval { text-align: left; padding-left: 0; font-weight: 500; position: static; }
.dt-bd-hrow .dt-bd-thr { text-align: right; }

/* ── In-training section (segments with no MC threshold yet) ────────
   These have no incidents to plot, so they don't get a TTR card — they
   are listed compactly here with a Training tag. */
.training-list { margin-top: 12px; }
.dt-training-card {
    background: var(--dt-surface-1); border: 1px solid var(--dt-border);
    border-radius: 10px; overflow: hidden;
}
.dt-training-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 18px;
    border-bottom: 1px solid var(--dt-border);
    background: linear-gradient(180deg, rgba(124,130,166,0.10), rgba(124,130,166,0));
}
.dt-training-title { font-size: 13px; font-weight: 600; color: var(--dt-ink); flex: 1; min-width: 0; }
.dt-training-sub { font-size: 11.5px; color: var(--dt-muted); font-weight: 400; white-space: nowrap; }
.dt-training-body { padding: 4px 0; }
.dt-training-row {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(120px, 240px) 90px 150px;
    gap: 12px; align-items: center; padding: 7px 18px; font-size: 12px;
}
.dt-training-row + .dt-training-row { border-top: 1px solid rgba(255,255,255,0.045); }
.dt-training-tbl {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-weight: 600; color: var(--dt-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dt-training-tbl .t-schema { color: var(--dt-muted); font-weight: 400; }
.dt-training-who { color: var(--dt-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-training-feed { font-family: 'SF Mono','Fira Code','Consolas',monospace; color: var(--dt-ink); font-weight: 600; margin-right: 6px; }
.dt-training-who .table-level { color: var(--dt-muted); font-style: italic; }
.dt-training-when { color: var(--dt-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-training-row .dt-status { justify-self: start; }

/* ── At-Risk hover popover (structured pipeline detail, dark) ─────── */
.dt-pop {
    display: none; position: fixed; z-index: 3000; max-width: 420px;
    background: #0C0E1A; color: var(--dt-ink-2);
    border: 1px solid var(--dt-border-2); border-radius: 8px;
    padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.6);
    font-size: 12px; line-height: 1.5; pointer-events: none;
}
.dt-pop.visible { display: block; }
.dt-pop .pp-head { font-weight: 600; color: var(--dt-ink); margin-bottom: 6px; }
.dt-pop .pp-meta { color: var(--dt-muted); font-size: 11px; margin-bottom: 8px; }
.dt-pop .pp-row { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; border-top: 1px solid var(--dt-border); }
.dt-pop .pp-name { font-family: 'SF Mono','Fira Code','Consolas',monospace; color: var(--dt-ink); word-break: break-all; }
.dt-pop .pp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dt-pop .pp-chip {
    font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px;
    background: rgba(255,255,255,0.10); color: var(--dt-ink-2); white-space: nowrap;
}
.dt-pop .pp-chip.good { background: rgba(52,211,153,0.18);  color: #6EE7B7; }
.dt-pop .pp-chip.warn { background: rgba(251,191,36,0.18);  color: #FCD34D; }
.dt-pop .pp-chip.bad  { background: rgba(248,113,113,0.20); color: #FCA5A5; }
.dt-pop .pp-chip.run  { background: rgba(124,140,255,0.20); color: #C7CEFF; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .dt-dark { --dt-label-w: 118px; --dt-st-w: 70px; --dt-n-w: 42px; --dt-up-w: 50px; }
    .dt-card-head { flex-wrap: wrap; }
    .dt-seg-client { display: none; }
    .dt-training-row { grid-template-columns: minmax(0,1fr) 78px; }
    .dt-training-who, .dt-training-when { display: none; }
}

/* ================================================================
   LIGHT THEME  (html[data-theme="light"])
   This page is almost entirely --dt-* token driven — including the
   chart SVGs, which fill/stroke via var(--dt-series|median|p90|worst)
   — so light mode is mostly a re-map of the tokens and the charts
   recolour live on toggle. Below the token block we also fix the
   hardcoded dark status/tooltip colours and the white-alpha
   hovers/borders that only read on a dark surface. The .dt-dark class
   stays on <body> in both themes (it scopes every rule here); only the
   token *values* change with the theme.
   ================================================================ */
html[data-theme="light"] .dt-dark {
    --dt-page:        #F1F4F5;
    --dt-surface-1:   #FFFFFF;   /* cards, controls, summary, modal */
    --dt-surface-2:   #F1F4F9;   /* inputs, chips, plot lanes */
    --dt-surface-3:   #E7ECF3;   /* hover */
    --dt-ink:         #1B2233;
    --dt-ink-2:       #46506B;
    --dt-muted:       #6B7590;
    --dt-border:      rgba(0,0,0,0.10);
    --dt-border-2:    rgba(0,0,0,0.14);
    --dt-grid:        #E6EAF2;
    --dt-axis:        #C3CADB;
    /* series hue kept (validated); reference hues deepened for contrast on white */
    --dt-series-soft: rgba(124,140,255,0.30);
    --dt-median:      #059669;
    --dt-p90:         #B45309;
    --dt-worst:       #DC2626;
}

/* Card head / training head tints (rgba over surface) read fine on white — kept. */

/* Freshness status badges: dark tint+light text → light tint+dark text */
html[data-theme="light"] .dt-status.badge-fresh    { background: rgba(5,150,105,0.12);  color: #047857; }
html[data-theme="light"] .dt-status.badge-atrisk   { background: rgba(217,119,6,0.14);  color: #B45309; }
html[data-theme="light"] .dt-status.badge-stale    { background: rgba(220,38,38,0.10);  color: #B91C1C; }
html[data-theme="light"] .dt-status.badge-training { background: rgba(0,0,0,0.05); }

/* Summary status tiles (hardcoded vivid → deepened on white) */
html[data-theme="light"] .dt-dark .summary-stat-value.fresh  { color: #059669; }
html[data-theme="light"] .dt-dark .summary-stat-value.atrisk { color: #B45309; }
html[data-theme="light"] .dt-dark .summary-stat-value.stale  { color: #DC2626; }

/* Low-sample toggle: inactive knob needs contrast on the light track */
html[data-theme="light"] .dt-toggle-knob { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,0.28); }

/* White-alpha separators / hovers → dark-alpha on light */
html[data-theme="light"] .dt-seg-row + .dt-seg-row,
html[data-theme="light"] .dt-bd-row,
html[data-theme="light"] .dt-training-row + .dt-training-row { border-top-color: rgba(0,0,0,0.07); }
html[data-theme="light"] .dt-seg-row:hover { background: rgba(0,0,0,0.03); }
html[data-theme="light"] .dt-bd-head { background: rgba(0,0,0,0.02); }

/* Tooltip + popover: dark bubble → light bubble (token text flips to dark) */
html[data-theme="light"] .dt-tip,
html[data-theme="light"] .dt-pop {
    background: #FFFFFF; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
html[data-theme="light"] .dt-pop .pp-chip      { background: rgba(0,0,0,0.05); }
html[data-theme="light"] .dt-pop .pp-chip.good { background: rgba(5,150,105,0.12);  color: #047857; }
html[data-theme="light"] .dt-pop .pp-chip.warn { background: rgba(217,119,6,0.14);  color: #B45309; }
html[data-theme="light"] .dt-pop .pp-chip.bad  { background: rgba(220,38,38,0.10);  color: #B91C1C; }
html[data-theme="light"] .dt-pop .pp-chip.run  { background: rgba(124,140,255,0.16); color: #4F5BD5; }

/* ── Dark-mode header chrome ────────────────────────────────────────
   The brand royal→indigo gradient header is kept in both themes, so
   its text (and the active nav tab on its translucent-white pill) must
   stay white. shared.css normally does this, but its dark block is
   scoped body:not(.dt-dark) to leave this page's tuned theme alone —
   and the --white token flips dark here — so re-assert white header
   text, matching the other pages. Content sort/view buttons are NOT
   included: they keep this page's own dark-on-indigo active style. */
html[data-theme="dark"] .header,
html[data-theme="dark"] .page-nav-link.active,
html[data-theme="dark"] .help-btn:hover { color: #fff; }