/* ============================================================
   WIP — worksheet (project) + schedule table (portfolio)
   .wip-* namespace. Reuses .cd-* KPI cards + .mod-seg from app.css.
   Theme-token based (--ink/--bd/--bg2/--accent/--ink-soft/--ink-faint).
   ============================================================ */

/* ── Worksheet: revenue + cost panels ─────────────────────── */
.wip-sheet { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.wip-panel { border:1px solid var(--bd); border-radius:12px; background:var(--white); overflow:hidden; }
.wip-panel-hd { display:flex; align-items:center; gap:7px; padding:11px 14px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--bd); background:var(--bg2); }
.wip-panel-hd i { color:var(--ink-faint); }
.wip-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 14px; font-size:13.5px; color:var(--ink); }
.wip-row + .wip-row { border-top:1px solid color-mix(in srgb, var(--bd) 55%, transparent); }
.wip-row-l { color:var(--ink-soft); }
.wip-row-v { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.wip-row.total { border-top:1.5px solid var(--bd); font-weight:700; }
.wip-row.total .wip-row-l { color:var(--ink); font-weight:700; }
.wip-row.mul .wip-row-l, .wip-row.mul .wip-row-v { color:var(--ink-faint); font-style:italic; font-weight:500; }
.wip-row.hi { background:var(--accent-bg); }
.wip-row.hi .wip-row-l, .wip-row.hi .wip-row-v { color:var(--accent); font-weight:700; }
.wip-row.oub { border-top:1.5px solid var(--bd); }
.wip-row.oub.over  { background:rgba(202,138,4,.10); }
.wip-row.oub.over  .wip-row-v { color:#B45309; }
.wip-row.oub.under { background:rgba(5,150,105,.10); }
.wip-row.oub.under .wip-row-v { color:#059669; }
.wip-soft { color:var(--ink-faint); font-weight:400; font-size:.92em; }
.wip-tag { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--accent); background:var(--accent-bg); border-radius:4px; padding:1px 5px; vertical-align:middle; }

/* ── Profit strip ─────────────────────────────────────────── */
.wip-profit { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.wip-metric { flex:1; min-width:140px; border:1px solid var(--bd); border-radius:10px; padding:12px 14px; background:var(--white); }
.wip-metric-v { font-size:19px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.wip-metric-l { font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.wip-metric.pos .wip-metric-v { color:#059669; }
.wip-metric.neg .wip-metric-v { color:#DC2626; }
.wip-notes { margin-top:10px; font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:7px; border:1px dashed var(--bd); border-radius:8px; padding:9px 12px; }
.wip-notes i { color:var(--ink-faint); }

/* ── Forecast editor ──────────────────────────────────────── */
.wip-forecast { margin-top:16px; border:1px solid var(--bd); border-radius:12px; background:var(--bg2); padding:14px 16px; }
.wip-fc-hd { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.wip-fc-hd i { color:var(--ink-faint); }
.wip-fc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px 16px; }
.wip-fc-field { display:flex; flex-direction:column; gap:6px; }
.wip-fc-field > label { font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); }
.wip-fc-field input { padding:8px 10px; border:1px solid var(--bd); border-radius:7px; background:var(--white); color:var(--ink); font-size:13px; }
.wip-fc-notes { grid-column:1 / -1; }
.wip-fc-cost { display:flex; gap:6px; align-items:center; }
.wip-fc-cost input { flex:1; }
.wip-fc-actions { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.wip-fc-actions .wip-soft { margin-right:auto; }

/* ── Portfolio table ──────────────────────────────────────── */
.wip-tablewrap { overflow-x:auto; border:1px solid var(--bd); border-radius:12px; background:var(--white); margin-top:6px; }
.wip-table { width:100%; border-collapse:collapse; font-size:13px; min-width:840px; }
.wip-table thead th { text-align:left; padding:10px 12px; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--bd); cursor:pointer; white-space:nowrap; user-select:none; }
.wip-table thead th:hover { color:var(--ink); }
.wip-table td { padding:10px 12px; border-bottom:1px solid var(--bd); vertical-align:middle; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wip-table .wip-r { text-align:right; }
.wip-table th.wip-r { text-align:right; }
.wip-trow { cursor:pointer; transition:background .1s; }
.wip-trow:hover { background:var(--bg2); }
.wip-name { font-weight:600; color:var(--ink); }
.wip-name i { color:var(--accent); font-size:13px; }
.wip-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#059669; margin-right:7px; vertical-align:middle; }
.wip-dot.warn { background:#B45309; } .wip-dot.neg { background:#DC2626; }
.wip-over  { color:#B45309; font-weight:600; }
.wip-under { color:#059669; font-weight:600; }
.wip-neg   { color:#DC2626; font-weight:600; }
.wip-warn  { color:#B45309; }
.wip-pcell { display:inline-flex; flex-direction:column; align-items:flex-end; gap:3px; min-width:64px; }
.wip-pbar { width:64px; height:4px; border-radius:2px; background:var(--bg2); overflow:hidden; }
.wip-pbar i { display:block; height:100%; background:var(--accent); border-radius:2px; }
.wip-table tfoot td { padding:11px 12px; border-top:2px solid var(--bd); border-bottom:none; font-weight:700; color:var(--ink); background:var(--bg2); }
.wip-legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:11.5px; color:var(--ink-soft); }
.wip-lg { display:inline-flex; align-items:center; gap:5px; }
.wip-lg.wip-soft { margin-left:auto; }
.wip-sw { width:14px; height:9px; border-radius:2px; display:inline-block; }
.wip-sw.over { background:#B45309; } .wip-sw.under { background:#059669; }

@media (max-width:720px){
  .wip-sheet { grid-template-columns:1fr; }
}