/* cockpit-charts.css — CEO Cockpit 'company at a glance' charts (2026-09-12).
   Extends style.css's existing dark ops-console tokens (--bg/--card/--line/
   --tx/--mut/--green/--amber/--red/--blue) — no new palette, same look. */

.glance-title { margin-top:22px; }
.glance-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:14px; margin-bottom:18px; }
.chart-card { display:flex; flex-direction:column; }
.chart-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.chart-head h3 { margin:0; }
.chart-asof { color:var(--mut); font-size:10.5px; white-space:nowrap; }
.chart-empty { padding:26px 10px; text-align:center; color:var(--mut); border:1px dashed var(--line); border-radius:8px; font-size:12.5px; }
.chart-src { color:var(--mut); font-size:10.5px; margin-top:6px; }
.chart-note { color:var(--amber); font-size:11.5px; margin-top:6px; }

.chart-svg { width:100%; height:auto; display:block; }
.chart-grid { stroke:var(--line); stroke-width:1; }
.chart-axis-lbl { fill:var(--mut); font-size:8.5px; }

.chart-legend { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:6px; font-size:11px; color:var(--mut); }
.lg-item { display:inline-flex; align-items:center; gap:5px; }
.lg-swatch { width:9px; height:9px; border-radius:2px; display:inline-block; }

/* ── funnel ──────────────────────────────────────────────────────────── */
.funnel { display:flex; flex-direction:column; gap:7px; }
.funnel-row { display:grid; grid-template-columns:132px 1fr 40px; align-items:center; gap:8px; font-size:12px; }
.funnel-label { color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.funnel-track { height:16px; background:#0d1117; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.funnel-fill { display:block; height:100%; border-radius:3px; transition:width .2s; }
.funnel-val { text-align:right; color:var(--tx); font-variant-numeric:tabular-nums; }
.funnel-bd { grid-column:1 / -1; color:var(--mut); font-size:10.5px; margin-left:2px; }

/* ── donut ───────────────────────────────────────────────────────────── */
.donut-wrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.donut { width:120px; height:120px; flex:0 0 auto; }
.donut-total { fill:var(--tx); font-size:20px; font-weight:700; }
.donut-total-lbl { fill:var(--mut); font-size:8px; text-transform:uppercase; letter-spacing:.5px; }

/* ── fleet tiles (compact variant of the Fleet page's .fcard) ──────────── */
.glance-fleet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.glance-fcard { padding:8px 10px; }
.glance-fcard .fname { font-size:12px; }
.glance-fcard .fip { font-size:10.5px; }
.fbar-fallback { color:var(--mut); font-size:11px; }

@media (max-width:640px){
  .glance-grid { grid-template-columns:1fr; }
  .funnel-row { grid-template-columns:100px 1fr 34px; }
}