/* Dashboard (dashboard.html) — loaded after css/style.css so the shared
   theme variables (--bg / --surface / --line / --text …) apply here too. */

:root{
  --chart-1:#2563eb;--chart-2:#16a34a;--chart-3:#d97706;--chart-4:#dc2626;
  --chart-5:#7c3aed;--chart-6:#0891b2;--chart-7:#db2777;--chart-8:#65a30d;
  --track:#eef1f6;
  --ramp-1:#16a34a;--ramp-2:#65a30d;--ramp-3:#d97706;--ramp-4:#ea580c;--ramp-5:#dc2626;
}
html[data-theme="dark"]{
  --chart-1:#60a5fa;--chart-2:#4ade80;--chart-3:#fbbf24;--chart-4:#f87171;
  --chart-5:#a78bfa;--chart-6:#22d3ee;--chart-7:#f472b6;--chart-8:#a3e635;
  --track:#1e293b;
  --ramp-1:#4ade80;--ramp-2:#a3e635;--ramp-3:#fbbf24;--ramp-4:#fb923c;--ramp-5:#f87171;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme]){
    --chart-1:#60a5fa;--chart-2:#4ade80;--chart-3:#fbbf24;--chart-4:#f87171;
    --chart-5:#a78bfa;--chart-6:#22d3ee;--chart-7:#f472b6;--chart-8:#a3e635;
    --track:#1e293b;
    --ramp-1:#4ade80;--ramp-2:#a3e635;--ramp-3:#fbbf24;--ramp-4:#fb923c;--ramp-5:#f87171;
  }
}

/* KPI row — one capsule, thin dividers, same convention as the table page. */
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-bottom:18px;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.kpi-card{padding:20px;background:transparent;min-width:0}
.kpi-card + .kpi-card{border-left:1px solid var(--line)}
.kpi-card strong{font-size:30px;display:block;line-height:1;letter-spacing:-.01em}
.kpi-card .stat-label{font-size:13px;margin-bottom:8px}
.kpi-card .stat-note{font-size:12px;margin-top:10px}
.kpi-card .stat-note.alert{color:var(--warn);font-weight:600}
.kpi-card .stat-note.good{color:var(--good);font-weight:600}

/* Chart cards */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px 20px;min-width:0}
.chart-card-wide{grid-column:span 2}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.chart-head h2{margin:0;font-size:16px;font-weight:700}
.chart-note{color:var(--muted);font-size:12px;white-space:nowrap}
.chart-body{min-height:212px;display:flex;align-items:center;justify-content:center}
.chart-placeholder{color:var(--muted);font-size:13px;margin:0}

/* Donut (SVG) + legend */
.donut-wrap{display:flex;align-items:center;gap:20px;width:100%;flex-wrap:wrap}
.donut{width:172px;height:172px;flex:0 0 auto}
.donut-seg{cursor:pointer;transition:opacity .12s ease}
.donut-seg[data-query=""]{cursor:default}
.donut:hover .donut-seg{opacity:.55}
.donut:hover .donut-seg:hover{opacity:1}
.donut-center-value{font-size:26px;font-weight:700;fill:var(--text)}
.donut-center-label{font-size:11px;fill:var(--muted)}
.donut-legend{flex:1 1 150px;min-width:150px;display:flex;flex-direction:column;gap:9px}
.legend-row{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer}
.legend-row.static{cursor:default}
.legend-dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto}
.legend-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-value{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.legend-pct{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:44px;text-align:right}

/* Horizontal bars */
.bar-list{width:100%;display:flex;flex-direction:column;gap:12px}
.bar-summary{font-size:12px;color:var(--muted);padding-bottom:10px;border-bottom:1px dashed var(--line);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bar-summary strong{color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;cursor:pointer}
.bar-row.static{cursor:default}
.bar-label{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-value{font-size:12px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar-track{grid-column:1 / -1;height:11px;border-radius:999px;background:var(--track);overflow:hidden;display:block}
.bar-fill{display:block;height:100%;border-radius:999px;transition:width .35s ease}
.bar-row:hover .bar-label{color:var(--accent)}

/* Tooltip */
.chart-tip{position:fixed;z-index:50;pointer-events:none;opacity:0;transform:translate(-50%,-100%);background:var(--text);color:var(--surface);font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;transition:opacity .1s ease;box-shadow:0 6px 18px rgba(15,23,42,.18)}
.chart-tip.visible{opacity:1}

.dash-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:12px;color:var(--muted)}

@media (max-width:1400px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.kpi-card:nth-child(3n+1){border-left:0}.kpi-card:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:1000px){.chart-card-wide{grid-column:span 1}.kpi-card strong{font-size:26px}}
@media (max-width:760px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-card:nth-child(odd){border-left:0}.kpi-card:nth-child(n+3){border-top:1px solid var(--line)}.chart-grid{grid-template-columns:1fr}.donut-wrap{justify-content:center}}