/* ============================================================
   ProjectTelemetry — Manpower Curves Portfolio dashboard
   assets/curves-dash.css   ·   PTCurvesDash
   Shares app tokens (--accent, --ink, --bd …); house style matches
   the Cost Codes / Production dashboards.
   ============================================================ */

.cd-load, .cd-empty { text-align:center; padding:48px 20px; color:var(--ink-faint); }
.cd-load i { animation:spin 1s linear infinite; margin-right:6px; }
.cd-empty i { font-size:40px; opacity:.5; }
.cd-empty h3 { margin:12px 0 4px; color:var(--ink-soft); font-size:16px; }
.cd-empty p { margin:0 auto 14px; font-size:13px; max-width:480px; line-height:1.5; }

/* ── Header ────────────────────────────────────────────────────── */
.cd-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.cd-title { font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.cd-sub { font-size:12.5px; color:var(--ink-faint); margin-top:2px; }

/* ── KPI tiles ─────────────────────────────────────────────────── */
.cd-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px; }
.cd-kpi { position:relative; border:1px solid var(--bd); border-radius:12px; background:var(--white); padding:14px 16px; overflow:hidden; box-shadow:var(--shadow); }
.cd-kpi-i { position:absolute; top:12px; right:12px; font-size:18px; color:var(--ink-faint); opacity:.55; }
.cd-kpi-v { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.05; }
.cd-kpi-l { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-top:5px; }
.cd-kpi-s { font-size:11px; color:var(--ink-faint); margin-top:3px; }
.cd-kpi.accent { border-color:color-mix(in srgb,var(--accent) 40%,var(--bd)); }
.cd-kpi.accent .cd-kpi-v, .cd-kpi.accent .cd-kpi-i { color:var(--accent); }
.cd-kpi.neg .cd-kpi-v, .cd-kpi.neg .cd-kpi-i { color:#DC2626; }
.cd-kpi.neg { border-color:color-mix(in srgb,#DC2626 32%,var(--bd)); }
.cd-kpi.pos .cd-kpi-v { color:#16A34A; }

/* ── Combined chart panel ──────────────────────────────────────── */
.cd-panel { border:1px solid var(--bd); border-radius:12px; background:var(--white); padding:14px 16px 10px; margin-bottom:18px; box-shadow:var(--shadow); }
.cd-panel-hd { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.cd-panel-t { font-size:13px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.cd-panel-t i { color:var(--accent); }
.cd-legend { display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; }
.cd-lg { font-size:11.5px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; }
/* Legend swatches: color = series (black planned / accent logged), shape = current render (bar/line). */
.cd-sw { display:inline-block; }
.cd-sw.bar { width:11px; height:11px; border-radius:3px; }
.cd-sw.line { width:15px; height:0; border-radius:0; border-top-width:2.5px; border-top-style:solid; }
.cd-sw.plan.bar { background:var(--ink); opacity:.5; }
.cd-sw.log.bar  { background:var(--accent); opacity:.55; }
.cd-sw.plan.line { border-top-color:var(--ink); }
.cd-sw.log.line  { border-top-color:var(--accent); }
.cd-flip { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--bd); background:var(--bg2); color:var(--ink-soft);
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:7px; cursor:pointer; font-family:inherit; }
.cd-flip:hover { color:var(--ink); border-color:color-mix(in srgb,var(--accent) 45%,var(--bd)); }
.cd-flip i { font-size:13px; }
.cd-panel-ft { font-size:11px; color:var(--ink-faint); margin-top:6px; line-height:1.5; }

.cd-chart { display:block; width:100%; height:auto; }
.cd-grid { stroke:var(--bd); stroke-width:1; opacity:.6; }
.cd-yl { fill:var(--ink-faint); font-size:10px; text-anchor:end; font-variant-numeric:tabular-nums; }
.cd-xl { fill:var(--ink-faint); font-size:10px; text-anchor:middle; }
.cd-bar.plan { fill:var(--ink); opacity:.42; }
.cd-bar.log  { fill:var(--accent); opacity:.5; }
.cd-line { fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.cd-line.plan { stroke:var(--ink); }
.cd-line.log  { stroke:var(--accent); }
.cd-dot.plan { fill:var(--ink); }
.cd-dot.log  { fill:var(--accent); }
.cd-today { stroke:#DC2626; stroke-width:1.4; stroke-dasharray:3 3; opacity:.7; }
.cd-today-l { fill:#DC2626; font-size:9px; text-anchor:middle; font-weight:700; }

/* ── Project cards ─────────────────────────────────────────────── */
.cd-list-hd { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin:0 2px 10px; }
.cd-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.cd-card { border:1px solid var(--bd); border-radius:12px; background:var(--white); padding:14px 15px; box-shadow:var(--shadow);
  cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .08s; }
.cd-card:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--bd)); box-shadow:var(--shadow-md,0 4px 14px rgba(0,0,0,.08)); }
.cd-card:active { transform:translateY(1px); }
.cd-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.cd-card-top { display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap; }
.cd-card-name { flex:1; min-width:0; font-size:14.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-pill { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.cd-pill.ok { background:color-mix(in srgb,#16A34A 14%,transparent); color:#15803D; }
.cd-pill.accent { background:var(--accent-bg); color:var(--accent); }
.cd-pill.warn { background:color-mix(in srgb,#F59E0B 16%,transparent); color:#B45309; }
.cd-pill.muted { background:var(--bg2); color:var(--ink-faint); }
.cd-chip { font-size:10px; font-weight:600; color:var(--ink-soft); background:var(--bg2); border-radius:20px; padding:2px 8px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.cd-chip.base { color:var(--accent); background:var(--accent-bg); }
.cd-chip.base i { font-size:12px; }
.cd-peak { margin-left:auto; font-size:11.5px; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cd-peak i { font-size:13px; color:var(--ink-faint); }
.cd-card-dates { font-size:11.5px; color:var(--ink-faint); margin-bottom:7px; font-variant-numeric:tabular-nums; }

.cd-elapsed { height:4px; background:var(--bg2); border-radius:3px; overflow:hidden; margin-bottom:10px; }
.cd-elapsed-fill { height:100%; background:color-mix(in srgb,var(--ink-faint) 55%,transparent); border-radius:3px; }

.cd-spark-wrap { margin:0 -2px 10px; }
.cd-spark { display:block; width:100%; height:46px; }
.cd-sbar.plan { fill:var(--ink); opacity:.4; }
.cd-sbar.log  { fill:var(--accent); opacity:.5; }
.cd-sline { fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.cd-sline.plan { stroke:var(--ink); }
.cd-sline.log  { stroke:var(--accent); }

.cd-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.cd-metric { text-align:center; background:var(--bg2); border-radius:8px; padding:7px 4px; }
.cd-metric-v { font-size:13.5px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.cd-metric-l { font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-top:2px; }
.cd-metric.neg .cd-metric-v { color:#DC2626; }
.cd-metric.pos .cd-metric-v { color:#16A34A; }

.cd-burn { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; }
.cd-burn-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.cd-burn-bar { height:8px; background:var(--bg2); border-radius:5px; overflow:hidden; }
.cd-burn-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent)); min-width:2px; transition:width .3s ease; }
.cd-burn-fill.over { background:linear-gradient(90deg,#F87171,#DC2626); }
.cd-burn-val { font-size:11.5px; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

@media (max-width:560px){
  .cd-metrics { grid-template-columns:repeat(2,1fr); }
  .cd-grid { grid-template-columns:1fr; }
}