/* ============================================================
   ProjectTelemetry — Cost Codes module
   assets/costcodes.css   ·   Dashboard + Manage
   Themed via the shared app tokens (--accent, --ink, --bd …).
   ============================================================ */

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

/* ── Header ───────────────────────────────────────────────────── */
.cc-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.cc-title { font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.cc-sub { font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.cc-head-r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cc-seg { display:inline-flex; background:var(--bg2); border:1px solid var(--bd); border-radius:9px; padding:3px; gap:2px; }
.cc-seg-b { display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; color:var(--ink-soft);
  font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:7px; cursor:pointer; white-space:nowrap; }
.cc-seg-b:hover { color:var(--ink); }
.cc-seg-b.active { background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.10); }
.cc-seg-b i { font-size:15px; }

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

/* ── Banner ───────────────────────────────────────────────────── */
.cc-banner { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:9px 14px; border-radius:9px; margin-bottom:14px; }
.cc-banner i { font-size:16px; }
.cc-banner.neg { background:color-mix(in srgb,#DC2626 10%,transparent); color:#B91C1C; }
.cc-banner.pos { background:color-mix(in srgb,#16A34A 11%,transparent); color:#15803D; }
.cc-banner.warn { background:color-mix(in srgb,#F59E0B 14%,transparent); color:#B45309; }

/* ── Trend sparkline ──────────────────────────────────────────── */
.cc-trend { border:1px solid var(--bd); border-radius:12px; background:var(--white); padding:12px 14px 6px; margin-bottom:14px; box-shadow:var(--shadow); }
.cc-trend-hd { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.cc-trend-t { font-size:12.5px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.cc-trend-t i { color:var(--accent); }
.cc-trend-meta { font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.cc-trend-seg { margin-left:auto; display:inline-flex; gap:2px; background:var(--bg2); border:1px solid var(--bd); border-radius:7px; padding:2px; }
.cc-tp { border:none; background:transparent; color:var(--ink-soft); font-size:11px; font-weight:600; padding:3px 9px; border-radius:5px; cursor:pointer; }
.cc-tp:hover { color:var(--ink); }
.cc-tp.active { background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.10); }
.cc-spark { display:block; width:100%; height:90px; overflow:visible; }
.cc-spark-area { fill:color-mix(in srgb,var(--accent) 12%,transparent); stroke:none; }
.cc-spark-line { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }

/* ── Code cards (dashboard) ───────────────────────────────────── */
.cc-list { display:flex; flex-direction:column; gap:9px; }
.cc-card { border:1px solid var(--bd); border-radius:11px; background:var(--white); padding:12px 15px; box-shadow:var(--shadow); }
.cc-card.over { border-color:color-mix(in srgb,#DC2626 45%,var(--bd)); }
.cc-card-top { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.cc-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; font-weight:700; color:var(--ink);
  background:var(--bg2); border-radius:6px; padding:3px 8px; white-space:nowrap; }
.cc-desc { flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-trade { font-size:11px; font-weight:600; color:var(--ink-faint); background:var(--bg2); border-radius:20px; padding:2px 8px; margin-left:6px; }
.cc-chip { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.cc-chip.ok { background:color-mix(in srgb,#16A34A 14%,transparent); color:#15803D; }
.cc-chip.accent { background:var(--accent-bg); color:var(--accent); }
.cc-chip.neg { background:color-mix(in srgb,#DC2626 13%,transparent); color:#B91C1C; }
.cc-chip.muted { background:var(--bg2); color:var(--ink-faint); }

.cc-pace { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#B45309;
  background:color-mix(in srgb,#F59E0B 18%,transparent); padding:2px 7px; border-radius:20px; white-space:nowrap; }
.cc-bars { display:flex; flex-direction:column; gap:7px; }
.cc-barrow { display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:10px; }
.cc-barlbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.cc-bar { height:9px; background:var(--bg2); border-radius:6px; overflow:hidden; position:relative; }
.cc-bar-fill { height:100%; border-radius:6px; background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 78%,#fff),var(--accent));
  transition:width .3s ease; min-width:2px; }
.cc-bar-fill.over { background:linear-gradient(90deg,#F87171,#DC2626); }
.cc-bar-fill.prog { background:linear-gradient(90deg,#5EEAD4,#0D9488); }
.cc-barval { font-size:12px; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
.cc-barval b { color:var(--ink); font-weight:700; }
.cc-var { margin-left:6px; font-weight:700; }
.cc-var.neg { color:#DC2626; } .cc-var.pos { color:#16A34A; }
.cc-card-foot { margin-top:9px; padding-top:8px; border-top:1px dashed var(--bd); }
.cc-otdt { font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

.cc-foot { margin-top:14px; font-size:11.5px; color:var(--ink-faint); text-align:center; }

/* ── Manage table ─────────────────────────────────────────────── */
.cc-manage { border:1px solid var(--bd); border-radius:11px; overflow:hidden; box-shadow:var(--shadow); }
.cc-table { width:100%; border-collapse:collapse; font-size:13px; }
.cc-table thead th { text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); background:var(--bg2); padding:9px 14px; border-bottom:1px solid var(--bd); }
.cc-table tbody td { padding:11px 14px; border-bottom:1px solid var(--bd); color:var(--ink); vertical-align:middle; }
.cc-table tbody tr:last-child td { border-bottom:none; }
.cc-table tbody tr:hover { background:var(--bg2); }
.cc-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; }
.cc-soft { color:var(--ink-soft); }
.cc-r { text-align:right; font-variant-numeric:tabular-nums; }
.cc-actions { text-align:right; white-space:nowrap; }
.cc-actions .btn-icon { width:28px; height:28px; font-size:14px; }
.cc-del[data-locked] { opacity:.4; }

/* ── Log hours ────────────────────────────────────────────────── */
.cc-log-head { display:flex; align-items:flex-end; gap:18px; margin-bottom:14px; flex-wrap:wrap; }
.cc-log-head .field label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:4px; }
.cc-log-head input[type=date] { padding:7px 10px; border:1px solid var(--bd); border-radius:7px; background:var(--white); color:var(--ink); font-size:13px; }
.cc-log-hint { flex:1; min-width:220px; font-size:12px; color:var(--ink-faint); line-height:1.5; }

.cc-log-grid { border:1px solid var(--bd); border-radius:11px; overflow:hidden; box-shadow:var(--shadow); }
.cc-log-ghead, .cc-log-row { display:grid; grid-template-columns:1.5fr 1.2fr 78px 74px 1.6fr 34px; gap:8px; align-items:center; padding:8px 12px; }
.cc-log-ghead { background:var(--bg2); border-bottom:1px solid var(--bd); }
.cc-log-ghead span { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.cc-log-row { border-bottom:1px solid var(--bd); }
.cc-log-row:last-child { border-bottom:none; }
.cc-log-row select, .cc-log-row input { width:100%; padding:7px 8px; border:1px solid var(--bd); border-radius:6px; background:var(--white); color:var(--ink); font-size:12.5px; box-sizing:border-box; }
.cc-log-row input[type=number] { text-align:right; }
.cc-lr-rm { width:28px; height:28px; font-size:14px; }
.cc-lr-rm:hover { color:#DC2626; background:color-mix(in srgb,#DC2626 12%,transparent); }

.cc-log-actions { display:flex; align-items:center; gap:12px; margin-top:12px; }
.cc-log-sum { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

@media (max-width:700px){
  .cc-log-ghead { display:none; }
  .cc-log-row { grid-template-columns:1fr 1fr; gap:6px; padding:12px; position:relative; }
  .cc-lr-rm { position:absolute; top:8px; right:8px; }
}

@media (max-width:640px){
  .cc-barrow { grid-template-columns:52px 1fr; grid-template-areas:'lbl bar' '. val'; row-gap:3px; }
  .cc-barrow .cc-barlbl { grid-area:lbl; } .cc-barrow .cc-bar { grid-area:bar; } .cc-barrow .cc-barval { grid-area:val; }
  .cc-table thead th:nth-child(3), .cc-table tbody td:nth-child(3),
  .cc-table thead th:nth-child(5), .cc-table tbody td:nth-child(5) { display:none; }
}