/* Dashboard tiles and charts — the layout only.
   Colour comes from the theme tokens in shared/css/app.css: flat fills, a
   1px border, and the validated series palette. Nothing here glows, blurs
   or fades into a gradient. */

/* ── KPI tiles ────────────────────────────────────────────────────────────── */
.kpi { overflow: hidden; }
.kpi-icon { border-radius: 8px; }
.kpi-value { font-size: 26px; font-weight: 700; }
.kpi .viz-spark { margin: 8px -4px -6px; height: 40px; }
/* six tiles fit on one row on a wide screen, three on a laptop */
@media (min-width: 1680px) { .kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1000px) and (max-width: 1679px) { .kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpis.five { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.kpis .kpi-value { white-space: nowrap; font-size: clamp(19px, 1.6vw, 26px); }

/* ── Charts ───────────────────────────────────────────────────────────────── */
.viz { width: 100%; min-width: 0; }
.viz svg { display: block; overflow: visible; }
.viz-axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.viz-grid { stroke: var(--viz-grid); stroke-dasharray: 3 5; }
.viz-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz-cross { stroke: var(--border-2); stroke-dasharray: 3 3; opacity: 0; }
/* the dot sits on a 2px ring of the card behind it, so two series that cross
   stay two series */
.viz-dot { opacity: 0; stroke: var(--card); stroke-width: 2; }
.viz-col:hover .viz-cross { opacity: 1; }
.viz-col:hover .viz-dot { opacity: 1; }
.viz-col:hover rect[fill="transparent"] { fill: var(--card-alt); }
.viz-bar { transition: opacity .15s; }
.viz-col:hover .viz-bar { opacity: .82; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-size: 12px; color: var(--text-2); }
.viz-legend i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 7px; vertical-align: 3px; }
.viz-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.viz-seg { transition: stroke-width .15s; cursor: default; }
.viz-seg:hover { stroke-width: 22; }
.viz-center { fill: var(--text); font-size: 17px; font-weight: 700; font-family: var(--font); }
.viz-center-sub { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.viz-dlegend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 140px; flex: 1; font-size: 13px; }
.viz-dlegend li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; }
.viz-dlegend i { width: 10px; height: 10px; border-radius: 3px; }
.viz-dlegend b { color: var(--text); }
.viz-gauge-val { fill: var(--text); font-size: 34px; font-weight: 700; font-family: var(--font); letter-spacing: -.02em; }
.viz-tick { stroke: var(--viz-track); stroke-width: 2; stroke-linecap: round; }
.viz-tick.on { stroke: var(--accent); }
.viz-hbars { display: grid; gap: 14px; }
.viz-hlabel { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 5px; }
.viz-hlabel span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-htrack { position: relative; height: 8px; border-radius: 99px; background: var(--viz-track); }
.viz-htrack span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.viz-htrack span.of { background: var(--border-2); }
.viz-tip {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; max-width: 260px;
  padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  background: var(--card); color: var(--text-2);
  border: 1px solid var(--border-2); box-shadow: var(--shadow-lg);
}
.viz-tip strong { display: block; color: var(--text); margin-bottom: 2px; }

/* ── Dashboard grids ──────────────────────────────────────────────────────── */
.dash-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.dash-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.dash-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-3eq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1250px) { .dash-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-3eq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dash-3, .dash-2, .dash-3eq, .dash-4 { grid-template-columns: 1fr; } }
.gauge-card .card-body { display: flex; flex-direction: column; align-items: center; }
.gauge-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 4px; text-align: center; }
.gauge-foot b { display: block; font-size: 15px; }
.gauge-foot small { color: var(--muted); font-size: 11.5px; }
.card-head .sub { color: var(--muted); font-size: 12px; font-weight: 600; }
.pill-chip {
  padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--border);
}

/* a dropdown's own list is drawn by the OS: give it the panel's colours */
select.input option { background: var(--card); color: var(--text); }