/* ============================================================
   ProjectTelemetry — Scope Tasking (bid SOV + planning gantt)
   assets/sov.css   —  .sv-* namespace
   Uses theme tokens only, so light/dark both work.
   ============================================================ */

.sv-load, .sv-empty { text-align:center; padding:44px 20px; color:var(--ink-faint); }
.sv-empty i { font-size:38px; opacity:.5; }
.sv-empty h3 { margin:12px 0 4px; color:var(--ink-soft); font-size:16px; }
.sv-empty p { margin:0 auto; font-size:13px; max-width:560px; line-height:1.55; }
.sv-load i { animation:spin 1s linear infinite; }

.sv-head { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.sv-head-l { flex:1; min-width:220px; }
.sv-title { font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.sv-sub { font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
.sv-head-r { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sv-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); }
.sv-select { font-size:12.5px; padding:5px 8px; border:1px solid var(--bd); border-radius:7px;
  background:var(--bg); color:var(--ink); font-family:inherit; max-width:320px; }

/* ── verdict ─────────────────────────────────────────────── */
.sv-verdict { border:1px solid var(--bd); border-left-width:4px; border-radius:12px;
  background:var(--white); padding:13px 15px; margin-bottom:16px; box-shadow:var(--shadow); }
.sv-verdict.ok  { border-left-color:#16A34A; }
.sv-verdict.bad { border-left-color:#DC2626; }
.sv-verdict.mut { border-left-color:var(--bd); }
.sv-verdict-hd { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.sv-verdict-badge { font-size:14.5px; font-weight:800; color:var(--ink); }
.sv-verdict.bad .sv-verdict-badge { color:#DC2626; }
.sv-verdict.ok  .sv-verdict-badge { color:#16A34A; }
.sv-verdict-win { font-size:12px; color:var(--ink-faint); }
.sv-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px; }
.sv-stat { background:var(--bg2); border-radius:8px; padding:8px 10px; text-align:center; }
.sv-stat-v { font-size:16px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.sv-stat-l { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-top:3px; }
.sv-stat-s { font-size:9.5px; color:var(--ink-faint); margin-top:1px; }
.sv-warns { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.sv-warn { font-size:11.5px; color:#B45309; display:inline-flex; align-items:center; gap:5px; }

/* ── panels + table ──────────────────────────────────────── */
.sv-panel { border:1px solid var(--bd); border-radius:12px; background:var(--white);
  margin-bottom:16px; box-shadow:var(--shadow); overflow:hidden; }
.sv-panel-hd { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 14px; background:var(--bg2); border-bottom:1px solid var(--bd); }
.sv-panel-t { font-size:13px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:6px; }
.sv-panel-hint { font-size:11.5px; color:var(--ink-faint); flex:1; min-width:160px; }
.sv-panel-tools { display:inline-flex; gap:5px; }
.sv-pad { padding:16px; }

.sv-tblwrap { overflow-x:auto; }
.sv-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.sv-tbl th { text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-faint); padding:8px 10px; border-bottom:1px solid var(--bd); white-space:nowrap; }
.sv-tbl td { padding:5px 8px; border-bottom:1px solid var(--bd); vertical-align:middle; }
.sv-tbl tr:last-child td { border-bottom:0; }
.sv-tbl th.sv-num, .sv-tbl td.sv-num { text-align:right; font-variant-numeric:tabular-nums; }
.sv-c { text-align:center; }
.sv-none { text-align:center; color:var(--ink-faint); font-size:12.5px; padding:18px; }
.sv-mut { color:var(--ink-faint); }
.sv-ok   { color:#16A34A; }
.sv-warn { color:#B45309; }
.sv-bad  { color:#DC2626; }
.sv-solved { font-variant-numeric:tabular-nums; font-weight:600; text-align:right; white-space:nowrap; }

.sv-in { width:100%; font-size:12.5px; padding:4px 6px; border:1px solid transparent; border-radius:5px;
  background:transparent; color:var(--ink); font-family:inherit; }
.sv-in:hover:not(:disabled) { border-color:var(--bd); }
.sv-in:focus { outline:none; border-color:var(--accent); background:var(--bg); }
.sv-in:disabled { color:var(--ink-soft); }
.sv-in.sv-num { text-align:right; font-variant-numeric:tabular-nums; }
select.sv-in { min-width:88px; }
.sv-ta { width:100%; font-family:JetBrains Mono,ui-monospace,monospace; font-size:11.5px; padding:8px;
  border:1px solid var(--bd); border-radius:8px; background:var(--bg); color:var(--ink); resize:vertical; }
.sv-x { border:0; background:none; color:var(--ink-faint); cursor:pointer; padding:2px 4px; border-radius:4px; }
.sv-x:hover { color:#DC2626; background:#FEF2F2; }
.sv-tgl { font-size:11px; font-weight:600; padding:3px 9px; border-radius:7px; cursor:pointer;
  border:1px solid var(--bd); background:var(--bg); color:var(--ink-soft); font-family:inherit; }
.sv-tgl.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── planning gantt ──────────────────────────────────────── */
/* Pixel timeline: .sv-gantt scrolls, .sv-gantt-in grows to the timeline width.
   Labels stick to the left edge, the crew column to the right, so both stay
   readable while the bars scroll underneath. */
.sv-gantt { position:relative; padding:0 0 14px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.sv-gantt-in { position:relative; width:max-content; min-width:100%; padding-top:26px; }
.sv-ticks { position:absolute; top:0; bottom:0; left:214px; pointer-events:none; }
.sv-tick { position:absolute; top:0; bottom:0; border-left:1px solid var(--bd); opacity:.4; }
.sv-tick.we { background:var(--bg2); opacity:.7; }
.sv-tick span { position:absolute; top:2px; left:2px; font-size:8.5px; color:var(--ink-faint); white-space:nowrap; }

.sv-window { position:absolute; top:18px; height:18px; border-radius:5px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px dashed var(--accent); z-index:1; }
.sv-window span { position:absolute; left:6px; top:1px; font-size:9.5px; font-weight:700; color:var(--accent); white-space:nowrap; }

.sv-row { display:flex; align-items:center; gap:10px; margin-top:8px; position:relative; z-index:2; }
.sv-row:first-of-type { margin-top:24px; }
.sv-row-lbl { width:204px; flex:0 0 204px; padding-left:14px; display:flex; align-items:center; gap:6px; min-width:0;
  position:sticky; left:0; z-index:6; background:var(--white); }
.sv-row-n { font-size:9.5px; font-weight:800; color:var(--ink-faint); background:var(--bg2);
  border-radius:4px; padding:1px 5px; flex:0 0 auto; }
.sv-row-t { font-size:12px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sv-row-m { font-size:10px; color:var(--ink-faint); white-space:nowrap; margin-left:auto; }
.sv-row-track { position:relative; height:24px; }
.sv-bar { position:absolute; top:2px; height:20px; border-radius:5px; background:var(--accent);
  cursor:grab; display:flex; align-items:center; justify-content:center; min-width:8px;
  box-shadow:0 1px 3px rgba(2,6,23,.18); }
.sv-bar.over { background:#DC2626; }
.sv-bar.dragging { cursor:grabbing; opacity:.85; box-shadow:0 4px 12px rgba(2,6,23,.3); }
.sv-bar-txt { font-size:9.5px; font-weight:700; color:#fff; white-space:nowrap; padding:0 4px; position:relative; z-index:2; }
/* Dead time inside a bar — see the shared .pt-hatch/.sv-hatch in the design
   system. Sits above the bar fill, below its label. */
.sv-hatch { z-index:1; border-radius:0; }
.sv-bar { overflow:hidden; }
.sv-row-crew { width:190px; flex:0 0 190px; font-size:10.5px; color:var(--ink-soft);
  display:flex; align-items:center; gap:6px;
  position:sticky; right:0; z-index:6; background:var(--white); padding-right:14px; }
.sv-crew-names { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A real button, not a 12px glyph — sized off the control tokens so it is a
   legitimate touch target (28px+ on the Comfortable scale). */
.sv-crewadd { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto;
  min-height:var(--ctl-h-xs,26px); padding:0 var(--ctl-px-xs,9px);
  font-size:var(--ctl-fs-xs,11.5px); font-weight:600; font-family:inherit;
  border:1px solid var(--bd); border-radius:var(--ctl-radius,7px);
  background:var(--bg); color:var(--ink-soft); cursor:pointer; }
.sv-crewadd:hover { border-color:var(--accent); color:var(--accent); }
.sv-crewadd i { font-size:13px; }

/* ── crew plan modal ─────────────────────────────────────── */
.sv-cp-list { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.sv-cp-row { display:flex; align-items:center; gap:8px; font-size:12.5px;
  background:var(--bg2); border-radius:6px; padding:5px 9px; }
.sv-cp-row > span:first-child { flex:1; }
.sv-cp-add { display:flex; gap:6px; align-items:center; }
.sv-cp-add .sv-in { border-color:var(--bd); background:var(--bg); }

@media (max-width:760px) {
  .sv-row-lbl { width:144px; flex-basis:144px; }
  .sv-row-crew { width:130px; flex-basis:130px; }
  .sv-ticks { left:154px; }
  .sv-stats { grid-template-columns:repeat(3,1fr); }
}

/* ── Master Schedule: macro activities are clickable into Scope Tasking ── */
.ms-clickable { cursor:pointer; }
.ms-clickable:hover { filter:brightness(1.08); outline:2px solid var(--accent); outline-offset:1px; }
.ms-bar-ic { font-size:10px; opacity:.85; margin-left:4px; flex:0 0 auto; }
.ms-linked { box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
.ms-diamond[data-act] { cursor:pointer; }

/* ── man loading chart ───────────────────────────────────── */
/* No HORIZONTAL padding: the chart has to start at exactly the same x as the
   gantt's rows or the two rulers sit 14px apart. The stats line pads itself. */
.sv-loadbox { padding:12px 0 6px; }
.sv-loadstats { display:flex; flex-wrap:wrap; gap:16px; font-size:11.5px; color:var(--ink-faint); margin-bottom:8px; padding:0 14px; }
.sv-loadstats b { color:var(--ink); font-size:13px; font-variant-numeric:tabular-nums; }
/* Scroll container + inner layer: bars keep a readable minimum width and the
   whole chart pans horizontally when the span outgrows the card (same as the
   planning gantt). Gridlines/ceiling live INSIDE the layer so they span the
   full scrolled width, not just the visible part. */
.sv-chart { position:relative; height:146px; background:var(--bg2); border-radius:8px;
  padding:4px 0; overflow-x:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
/* Columns are absolutely positioned by DATE on the shared ruler — never laid
   out in sequence, which is what let this chart drift out of step with the
   gantt. Same rail width as a gantt row, so scrollLeft maps 1:1 between them. */
.sv-chart-in { position:relative; height:100%; flex:0 0 auto; }
.sv-lbar { position:absolute; bottom:0; background:var(--accent); border-radius:2px 2px 0 0; opacity:.85; }
.sv-lbar:hover { opacity:1; }
.sv-lbar.over { background:#DC2626; }
.sv-ceilline { position:absolute; left:0; right:0; border-top:2px dashed #B45309; z-index:2; pointer-events:none; }
.sv-ceilline span { position:absolute; right:4px; top:-14px; font-size:9.5px; font-weight:700; color:#B45309; }

/* ── leveling proposal ───────────────────────────────────── */
.sv-prop { border-top:1px solid var(--bd); padding:12px 14px; background:var(--bg2); }
.sv-prop-hd { font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.sv-prop-row { display:flex; align-items:center; gap:8px; font-size:11.5px; padding:3px 0; flex-wrap:wrap; }
.sv-prop-t { font-weight:600; color:var(--ink); min-width:150px; }
.sv-prop-shift { font-weight:700; color:#B45309; font-variant-numeric:tabular-nums; }
.sv-prop-act { display:flex; gap:8px; margin-top:10px; }

/* ── crew flow ───────────────────────────────────────────── */
.sv-flow { padding:10px 14px 14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.sv-flow-p { border:1px solid var(--bd); border-radius:9px; padding:9px 11px; background:var(--bg2); }
.sv-flow-n { font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:5px; }
.sv-leg { display:flex; align-items:center; gap:7px; font-size:11px; padding:2px 0; }
.sv-leg-d { font-variant-numeric:tabular-nums; color:var(--ink-faint); flex:0 0 auto; }
.sv-leg-t { color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── row drag + task status on bars ──────────────────────── */
.sv-grip { color:var(--ink-faint); cursor:grab; font-size:13px; flex:0 0 auto; }
.sv-row-lbl[data-rowdrag] { cursor:grab; touch-action:none; }
.sv-row-drag { z-index:20; opacity:.9; }
.sv-row-drag .sv-grip { cursor:grabbing; }
.sv-bar.st-complete { background:#16A34A; }
.sv-bar.st-in_progress { background:#2563EB; }
.sv-bar.st-blocked { background:#B45309; }
.sv-bar.over { background:#DC2626; }
.sv-chipmap { display:inline-block; background:var(--bg2); border:1px solid var(--bd); border-radius:20px;
  padding:1px 8px; font-size:10.5px; color:var(--ink-soft); margin-right:4px; }

/* ── labor-unit cell: rate + basis inline (NECA-style quoting) ── */
.sv-lu-cell { white-space:nowrap; }
.sv-lu-cell .sv-lu { width:64px; display:inline-block; }
.sv-lu-cell .sv-lub { width:auto; min-width:44px; display:inline-block; margin-left:2px; }

/* ── scope headline: the macro task IS the page title ───────── */
.sv-eyebrow { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); margin-bottom:2px; }
.sv-title { font-size:22px; font-weight:800; letter-spacing:-.015em; color:var(--ink); line-height:1.15; }

/* ── man-loading chart: y-axis ticker + on-bar value labels ── */
.sv-chart-row { display:flex; gap:10px; align-items:stretch; height:130px; }
.sv-chart-rail { position:sticky; left:0; z-index:6; flex:0 0 204px; width:204px; background:var(--white); display:flex; justify-content:flex-end; }
.sv-chart-yaxis { position:relative; width:30px; flex:0 0 30px; height:130px; }
.sv-ylab { position:absolute; right:2px; transform:translateY(-50%); font-size:9px;
  color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.sv-yunit { position:absolute; top:-16px; right:0; font-size:8.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }

.sv-gline { position:absolute; left:0; right:0; border-top:1px dashed var(--bd);
  opacity:.55; pointer-events:none; z-index:1; }
/* NB: position stays ABSOLUTE (declared above) — columns are placed by date on
   the shared ruler. Re-declaring position here silently un-positioned every
   column and emptied the chart. */
.sv-lbar { z-index:2; overflow:visible; }
.sv-lbar-v { position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  margin-bottom:1px; font-size:9px; font-weight:700; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.sv-lbar-v.over { color:#DC2626; }

/* zero-demand days: a faint stub so a schedule GAP reads as a gap */
.sv-lbar.zero { background:var(--bd); opacity:.6; }
.sv-lbar-v.zero { color:var(--ink-faint); font-weight:600; }

/* weekend / holiday columns on the loading chart — same light-grey language
   as the planning gantt's weekend shading, full height, no bar, no label.
   NB: the chart's own background is --bg2, so the shading uses --bd (border
   grey) at partial strength to actually be visible in both themes. */
.sv-lbar.we { height:100%; border-radius:0;
  background: var(--day-off); }
/* A project HOLIDAY is not just "a weekend" — it's a calendar decision someone
   made, so it reads distinctly (warm tint) and its tooltip names it. */
.sv-lbar.we.hol { background: var(--day-holiday); }
.sv-tick.we.hol { background: var(--day-holiday); opacity:1; }

/* ── working-schedule editor (ported input pattern from the curve editor) ── */
.sv-sched { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:10px 0 4px; }
.sv-sched-day { display:flex; flex-direction:column; align-items:center; gap:4px;
  border:1.5px solid var(--bd); border-radius:8px; padding:8px 4px; cursor:pointer; background:var(--bg); }
.sv-sched-day.on { border-color:var(--accent); background:var(--accent-bg); }
.sv-sched-day input[type=checkbox] { accent-color:var(--accent); }
.sv-sched-nm { font-size:10.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }
.sv-sched-h { max-width:46px; text-align:center; border-color:var(--bd) !important; }
.sv-sched-h:disabled { opacity:.4; }
.sv-sched-out { font-size:12.5px; color:var(--ink); background:var(--bg2); border-radius:8px; padding:9px 11px; margin-top:8px; }
/* Per-row schedule button in the gantt label rail. */
.sv-schedbtn { flex:0 0 auto; border:0; background:none; color:var(--ink-faint); cursor:pointer;
  padding:2px 3px; border-radius:5px; line-height:1; }
.sv-schedbtn:hover { color:var(--accent); background:var(--accent-bg); }
.sv-row-t { cursor:pointer; }
/* A stat that's telling you something is wrong (planned days exceed the
   production days you actually have inside the GC window). */
.sv-stat-bad { background:#FEF2F2; box-shadow:inset 0 0 0 1px #FCA5A5; }
.sv-stat-bad .sv-stat-v { color:#DC2626; }
.sv-stat-bad .sv-stat-s { color:#B91C1C; }