/* ============================================================
   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-pf { font-size:10px; font-weight:800; letter-spacing:.02em; padding:2px 8px; border-radius:20px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.cc-pf.ok { background:color-mix(in srgb,#16A34A 14%,transparent); color:#15803D; }
.cc-pf.accent { background:var(--accent-bg); color:var(--accent); }
.cc-pf.neg { background:color-mix(in srgb,#DC2626 13%,transparent); color:#B91C1C; }
.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-x:auto; 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 — fast day grid ─────────────────────────────────── */
.cc-lg-head { display:flex; align-items:flex-end; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
.cc-lg-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-lg-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-lg-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; user-select:none; }
.cc-lg-filter { padding:7px 10px; border:1px solid var(--bd); border-radius:7px; background:var(--white); color:var(--ink); font-size:13px; min-width:160px; }
.cc-lg-daytot { margin-left:auto; font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.cc-lg-daytot b { font-size:15px; color:var(--ink); }
.cc-lg-hint { font-size:12px; color:var(--ink-faint); line-height:1.5; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.cc-lg-hint .ti { font-size:15px; }

.cc-lg-wrap { border:1px solid var(--bd); border-radius:11px; overflow:auto; box-shadow:var(--shadow); max-height:60vh; }
.cc-lg-table { width:100%; border-collapse:collapse; font-size:13px; }
.cc-lg-table th { position:sticky; top:0; z-index:1; background:var(--bg2); text-align:left; padding:8px 12px; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); border-bottom:1.5px solid var(--bd); }
.cc-lg-table td { padding:4px 12px; border-bottom:1px solid color-mix(in srgb,var(--bd) 55%,transparent); }
.cc-lg-table tbody tr:hover { background:color-mix(in srgb,var(--accent) 5%,transparent); }
.cc-lg-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; white-space:nowrap; }
.cc-lg-desc { color:var(--ink-soft); }
.cc-lg-num { text-align:right; width:88px; font-variant-numeric:tabular-nums; }
.cc-lg-rt { text-align:right; width:70px; font-variant-numeric:tabular-nums; color:var(--ink-soft); font-weight:600; }
.cc-lg-in { width:74px; padding:6px 8px; border:1px solid var(--bd); border-radius:6px; background:var(--white); color:var(--ink); font-size:13px; text-align:right; font-variant-numeric:tabular-nums; box-sizing:border-box; box-shadow:inset 0 1px 1px color-mix(in srgb,var(--ink) 6%,transparent); }
.cc-lg-in:hover { border-color:var(--ink-faint); }
.cc-lg-in:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.cc-lg-in::placeholder { color:var(--ink-faint); }
.cc-lg-off { color:var(--ink-faint); text-align:center; opacity:.35; }
/* Per-column reveal toggles, sitting in the OT / DT headers over their columns. */
.cc-lg-colh { padding-top:5px; padding-bottom:5px; }
.cc-lg-coltog { display:inline-flex; align-items:center; gap:5px; width:100%; justify-content:flex-end; cursor:pointer; user-select:none;
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.cc-lg-coltog input { margin:0; cursor:pointer; accent-color:var(--accent); }
.cc-lg-coltog:hover { color:var(--ink-soft); }
.cc-lg-coltog.on { color:var(--accent); }
.cc-lg-table th.cc-lg-num { text-align:right; }
.cc-lg-in::-webkit-outer-spin-button, .cc-lg-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cc-lg-msg { text-align:center; color:var(--ink-faint); padding:24px 12px; }
.cc-lg-table tfoot td { position:sticky; bottom:0; background:var(--bg2); border-top:1.5px solid var(--bd); font-weight:700; font-variant-numeric:tabular-nums; }
.cc-lg-tlabel { text-transform:uppercase; font-size:10.5px; letter-spacing:.04em; color:var(--ink-faint); }

.cc-lg-actions { display:flex; align-items:center; gap:12px; margin-top:12px; }
.cc-lg-status { margin-left:auto; font-size:12.5px; font-variant-numeric:tabular-nums; }
.cc-lg-status.ok { color:#16A34A; }
.cc-lg-status.err { color:#DC2626; }

/* Day / Week mode toggle — segmented, sits first in the toolbar. */
.cc-lg-mode { display:inline-flex; border:1px solid var(--bd); border-radius:8px; overflow:hidden; background:var(--bg2); align-self:flex-end; }
.cc-lg-modeb { display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border:none; background:transparent; color:var(--ink-soft); font-size:12.5px; font-weight:600; cursor:pointer; }
.cc-lg-modeb .ti { font-size:15px; }
.cc-lg-modeb + .cc-lg-modeb { border-left:1px solid var(--bd); }
.cc-lg-modeb:hover { color:var(--ink); }
.cc-lg-modeb.active { background:var(--accent); color:#fff; }

/* Budget-context column: logged-of-budget with remaining underneath. */
.cc-lg-budh { white-space:nowrap; }
.cc-lg-bud { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; line-height:1.25; }
.cc-lg-bud-u { font-weight:700; }
.cc-lg-bud-s { color:var(--ink-faint); margin-left:2px; }
.cc-lg-bud-l { display:block; font-size:10.5px; color:var(--ink-faint); }
.cc-lg-bud.near .cc-lg-bud-l { color:#B45309; }
.cc-lg-bud.over .cc-lg-bud-u { color:#DC2626; }
.cc-lg-bud.over .cc-lg-bud-l { color:#DC2626; font-weight:600; }

/* Per-line note column (Day view). */
.cc-lg-noteh { width:auto; }
.cc-lg-notec { min-width:150px; }
.cc-lg-note { width:100%; min-width:130px; padding:5px 8px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); font-size:12.5px; box-sizing:border-box; }
.cc-lg-note:hover { border-color:var(--bd); }
.cc-lg-note:focus { outline:none; border-color:var(--accent); background:var(--white); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.cc-lg-note::placeholder { color:var(--ink-faint); }

/* Week view — 7 day columns. */
.cc-wk-nav { display:inline-flex; align-items:center; gap:6px; align-self:flex-end; }
.cc-wk-nav .btn-icon { width:30px; height:30px; }
.cc-wk-label { font-size:13px; font-weight:600; color:var(--ink); min-width:132px; text-align:center; font-variant-numeric:tabular-nums; }
.cc-wk-table th.cc-wk-dh { text-align:center; white-space:nowrap; }
.cc-wk-dh .cc-wk-dt { display:block; font-size:9.5px; font-weight:600; color:var(--ink-faint); letter-spacing:0; }
.cc-wk-dh.today { color:var(--accent); }
.cc-wk-dh.today .cc-wk-dt { color:var(--accent); }
.cc-wk-cell { position:relative; width:78px; }
.cc-wk-in { width:60px; padding:6px 7px; border:1px solid var(--bd); border-radius:6px; background:var(--white); color:var(--ink); font-size:13px; text-align:right; font-variant-numeric:tabular-nums; box-sizing:border-box; box-shadow:inset 0 1px 1px color-mix(in srgb,var(--ink) 6%,transparent); }
.cc-wk-in:hover { border-color:var(--ink-faint); }
.cc-wk-in:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.cc-wk-in::placeholder { color:var(--ink-faint); }
.cc-wk-in::-webkit-outer-spin-button, .cc-wk-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cc-wk-dtot { color:var(--ink-soft); }

@media (max-width:700px){
  .cc-lg-desc { display:none; }
  .cc-lg-head { gap:10px; }
  .cc-lg-filter { min-width:120px; }
}

@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; }
  /* Hide Trade (4) and Budget cost (6) on narrow screens; a designation
     column was inserted at position 2 so these shifted from 3/5. */
  .cc-table thead th:nth-child(4), .cc-table tbody td:nth-child(4),
  .cc-table thead th:nth-child(6), .cc-table tbody td:nth-child(6) { display:none; }
}

/* ── Classification: designation chip + cost-type tag + budget strip ── */
.cc-dchip { display:inline-block; font-size:10px; font-weight:700; line-height:1.4;
  padding:1px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
  letter-spacing:.02em; vertical-align:middle; }
.cc-card-top .cc-dchip { margin-left:6px; }
.cc-type { display:inline-block; font-size:10px; font-weight:600; color:var(--ink-faint);
  border:1px solid var(--bd,#E5E7EB); border-radius:5px; padding:0 5px; margin-left:6px; }
.cc-opt { color:var(--ink-faint); font-weight:400; font-size:10px; }

.cc-classbar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.cc-classseg { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft);
  background:var(--surface,#fff); border:1px solid var(--bd,#E5E7EB); border-radius:8px; padding:6px 11px; }
.cc-classseg b { color:var(--ink); font-variant-numeric:tabular-nums; }
.cc-classdot { width:9px; height:9px; border-radius:50%; flex:none; }
.cc-classlbl { font-weight:600; }

/* Idle / indirect bucket designation (auto-timecard idle target) */
.cc-idle-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:rgba(217,119,6,.14);color:var(--warn,#D97706);border-radius:20px;padding:1px 7px;margin-left:6px;vertical-align:middle;}
.cc-idle-row{background:rgba(217,119,6,.05);}
.btn-icon.cc-idle.on{color:var(--warn,#D97706);}
.btn-icon.cc-idle:hover{color:var(--warn,#D97706);}

/* ── Cost-code templates: guided empty state + management modal ── */
.cc-empty-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-bottom:8px;}
.cc-tpl-apply{display:flex;gap:6px;align-items:center;}
.cc-tpl-pick{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface,var(--white));color:var(--ink);font-size:13px;max-width:280px;}
.cc-empty-note{font-size:12px;color:var(--ink-faint);max-width:520px;margin:6px auto 0;line-height:1.5;}
.cc-empty-note i{font-size:13px;opacity:.7;}
.cc-tpl-list{display:flex;flex-direction:column;gap:6px;}
.cc-tpl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;}
.cc-tpl-main{min-width:0;}
.cc-tpl-main b{font-size:13.5px;}
.cc-tpl-acts{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.cc-te-items{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface,var(--white));color:var(--ink);resize:vertical;}

/* ── Areas (sub-code / area-phase dimension) ─────────────────── */
.cc-area-intro{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border:1px solid var(--bd);border-radius:11px;background:var(--bg2);font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin-bottom:14px;}
.cc-area-intro i{font-size:18px;color:var(--accent);flex-shrink:0;margin-top:1px;}
.cc-area-intro .cc-mono{color:var(--ink);}
.cc-area-off td{opacity:.55;}
.cc-area-actlbl{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);margin:8px 0 2px;cursor:pointer;}

.cc-mtx-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--ink);margin:20px 0 8px;}
.cc-mtx-hd i{font-size:16px;color:var(--ink-faint);}
.cc-mtx-table th.cc-mtx-code,.cc-mtx-table td.cc-mtx-code{text-align:left;white-space:nowrap;position:sticky;left:0;background:var(--white);z-index:1;}
.cc-mtx-table td.cc-mtx-code .cc-soft{font-family:inherit;font-weight:400;margin-left:6px;}
.cc-mtx-in{width:62px;text-align:right;padding:4px 6px;border:1px solid var(--bd);border-radius:6px;background:var(--surface,var(--white));color:var(--ink);font-size:12.5px;font-variant-numeric:tabular-nums;}
.cc-mtx-in:focus{outline:none;border-color:var(--accent);}
.cc-mtx-base{color:var(--ink-faint);}
.cc-mtx-tot td{font-weight:700;border-top:2px solid var(--bd);color:var(--ink);}

.cc-wt{margin-top:8px;}
.cc-wt-list{display:flex;flex-direction:column;gap:4px;}
.cc-wt-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--bd);border-radius:9px;font-size:13px;color:var(--ink);}
.cc-wt-row .cc-mono{min-width:44px;}
.cc-wt-acts{margin-left:auto;display:flex;gap:2px;}

/* Week grid: ST / OT / DT as sub-columns under each day, so entry runs left to
   right and Tab walks the row. The type row is the second header line. */
.cc-wk-th { font-size:9.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-faint);
  text-transform:uppercase; padding-top:2px; padding-bottom:4px; }
.cc-wk-th.t-ot { color:#B45309; }
.cc-wk-th.t-dt { color:#B91C1C; }
/* The OT/DT reveal toggles live in the toolbar — seven day columns means there
   is no single header cell they could sit in. */
.cc-wk-togs { display:inline-flex; align-items:center; gap:10px; }

/* ── Day banding ──────────────────────────────────────────────
   With three inputs per day, "which day am I in" has to be answerable at a
   glance rather than by counting columns. Two cues, because either alone is
   weak: a solid divider at each day boundary, and alternating day bands. */
.cc-wk-table .dstart { border-left:2px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.cc-wk-table .dodd  { background:color-mix(in srgb, var(--ink) 4%, transparent); }
.cc-wk-table .deven { background:transparent; }
/* The weekend keeps its own stronger tint — it means something different from
   the alternating band, so it has to win. */
.cc-wk-table .wknd  { background:color-mix(in srgb, var(--bd) 16%, transparent); }
.cc-wk-table th.cc-wk-dh.wknd { color:var(--ink-faint); }
/* Day totals sit centred under the day they total, not hard right against the
   next day's divider. */
.cc-wk-dtot { text-align:center; font-variant-numeric:tabular-nums; }

/* ── Week grid sizing ─────────────────────────────────────────
   The base table is width:100%, which was fine at 7 columns and crushes
   everything at 21: the code and description get squeezed to a few characters
   and wrap into ragged blocks that no longer line up with their inputs.
   Week mode takes its natural width and lets the wrapper scroll instead. */
.cc-wk-table { width:max-content; min-width:100%; }
.cc-wk-table td, .cc-wk-table th { vertical-align:middle; }

/* Text columns get room and a floor, and stop wrapping. A description that
   can't fit is cut with an ellipsis and kept in full on the title, which reads
   as one tidy line instead of a three-line lump in a narrow box. */
.cc-wk-table .cc-lg-code { min-width:92px; padding-right:8px; }
.cc-wk-table .cc-lg-desc { min-width:170px; max-width:290px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.cc-wk-table .cc-lg-bud  { min-width:104px; }

/* The 21 entry cells give back the wide padding they don't need — that alone
   is ~500px of horizontal space at the old 12px each side. */
.cc-wk-table .cc-wk-cell { padding:3px 5px; }
.cc-wk-table .cc-wk-th   { padding-left:5px; padding-right:5px; }
.cc-wk-table .cc-wk-dh   { padding-left:6px; padding-right:6px; }
.cc-wk-table .cc-wk-in   { width:60px; }

/* Two header rows both declared sticky at top:0 would sit on top of each
   other the moment the body scrolled. Pin the day row, then park the hour-type
   row directly beneath it at a fixed height so the offset can't drift. */
.cc-wk-table thead tr:first-child th  { top:0; height:34px; }
.cc-wk-table thead tr:nth-child(2) th { top:34px; z-index:1; }

/* Day view: the budget cell is two lines while everything beside it is one
   input, so baseline alignment left the row looking staggered. Centre them,
   and give the description a floor so it stops collapsing to two words per
   line once OT and DT columns are showing. */
.cc-lg-table td, .cc-lg-table th { vertical-align:middle; }
.cc-lg-table .cc-lg-desc { min-width:180px; }