/**
 * @file services-command.css
 * @description Services PREMIUM SHELL — the WORKSPACE NAVIGATOR design system:
 *              the SHEETS ⇄ KPI mode rail, the KPI MONITORING CONSOLE (`.svcx-*`),
 *              the matching Sheets menu, the grid "linings" pass, plus the QB
 *              Sync Report modal and Export menu. Additive — loads LAST.
 * @module MUMS/Services
 * @version UAT
 *
 * DESIGN SOURCE
 * -------------
 * 2026-08-03, MACE supplied a premium reference design and asked for its
 * structure AND its colour implementation to become the Services default:
 * the KPI section follows it directly, the Sheets menu is built in the same
 * language, and the grid linings are re-cut to match.
 *
 * THEMING CONTRACT
 * ----------------
 * Every surface, border and text colour is a `--sc-*` primitive from
 * services-theme.css, whose DARK baseline is now the reference's neutral
 * graphite ramp and which re-points wholesale under
 * `:root[data-svc-theme="light"]`. So this file themes itself in BOTH modes
 * with no duplicated light block. Only three things are stated literally:
 *   • the categorical data palette (--vc, c0..c7) — data colour is identity, it
 *     must not shift with the surface;
 *   • the semantic risk colours (overdue red / not-in-QB amber / tracked green);
 *   • brand gold, and ONLY as an action/brand accent — never as a data series
 *     (repo rule: data gets a balanced categorical palette, not mono-gold).
 * Where a literal reads wrong on a light canvas it gets one targeted override in
 * §9, and nowhere else.
 *
 * CONTRAST INVARIANT
 * ------------------
 * Every label is ≥ 4.5:1 in BOTH themes. `--sc-text-dim` is the FLOOR for real
 * copy; `--sc-text-dimmer` is placeholder/decoration only and `--sc-text-faint`
 * is hairlines only — `npm run test:services` fails if faint ink reappears.
 */

/* ══════════════════════════════════════════════════════════════════════════
   1 · LOCAL TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --svcx-nav-w:    330px;      /* navigator width — reference is 340, trimmed
                                  so the grid keeps a full extra column */
  --svcx-pad:      12px;
  --svcx-radius:   16px;       /* cards        */
  --svcx-radius-m: 12px;       /* alerts       */
  --svcx-radius-s: 10px;       /* controls     */
  --svcx-radius-x: 7px;        /* inner chips  */

  --svcx-line:     rgba(var(--sc-neutral-rgb), .10);
  --svcx-line-2:   rgba(var(--sc-neutral-rgb), .17);
  --svcx-hair:     var(--sc-border2);          /* #232326 */
  --svcx-card:     var(--sc-bg-top);           /* #141416 hero            */
  --svcx-card-line:rgba(var(--sc-neutral-rgb), .13);
  --svcx-panel:    var(--sc-panel);            /* #111113 group card      */
  --svcx-ctl:      var(--sc-panel2);           /* #1A1A1D controls        */
  --svcx-ctl-hi:   var(--sc-panel3);           /* #1E1E21 control hover   */
  --svcx-ctl-line: var(--sc-elev);             /* #2A2A2E control border  */
  --svcx-well:     var(--sc-bg2);              /* #0F0F10 rails/footers   */

  --svcx-gold:     #C9A84C;
  --svcx-gold-hi:  #E8C46A;
  --svcx-risk:     #ef4444;
  --svcx-risk-ink: #FCA5A5;
  --svcx-warn:     #f59e0b;
  --svcx-ok:       #22C55E;
  --svcx-shadow:   0 10px 26px -14px rgba(var(--sc-shadow-color), .9);

  /* Sheet grid rules. MACE: "lagyan mo din ng konting visibility ang grid line,
     mga konti lang at hindi masyadong halata, enough lang makita ang mga
     division." So: the ROW hairline stays the dominant rhythm and the COLUMN
     rule sits at roughly HALF its strength — present when you look for it,
     silent when you read across. Measured on the real canvas: row +18 levels,
     column +10 (46% of the row). Tune here, never per-rule. */
  --svcx-rule-row:  var(--sc-panel3);
  --svcx-rule-col:  rgba(var(--sc-neutral-rgb), .07);
  --svcx-rule-head: rgba(var(--sc-neutral-rgb), .11);
}
:root[data-svc-theme="light"] {
  --svcx-line:     rgba(var(--sc-neutral-rgb), .20);
  --svcx-line-2:   rgba(var(--sc-neutral-rgb), .30);
  --svcx-hair:     rgba(var(--sc-neutral-rgb), .22);
  --svcx-card:     #ffffff;
  --svcx-card-line:rgba(var(--sc-neutral-rgb), .22);
  --svcx-panel:    #ffffff;
  --svcx-ctl:      var(--sc-tertiary);
  --svcx-ctl-hi:   #ffffff;
  --svcx-ctl-line: rgba(var(--sc-neutral-rgb), .30);
  --svcx-well:     var(--sc-bg2);
  --svcx-risk:     #b42318;
  --svcx-risk-ink: #b42318;
  --svcx-warn:     #b54708;
  --svcx-ok:       #047857;
  /* LIGHT NEEDS ITS OWN NUMBERS, not a re-used dark token. `--sc-panel3` is the
     row rule in dark (+18 levels), but on the light canvas it lands within ONE
     level of the background — the row hairline all but vanished while the
     column rule read at +23, inverting the hierarchy the design depends on.
     `--sc-neutral-rgb` is also re-pointed for light (92,101,118), so the same
     alpha buys far more contrast here. These values reproduce the dark
     relationship on white: row -20 levels, column -10 (50% of the row). */
  --svcx-rule-row:  rgba(var(--sc-neutral-rgb), .14);
  --svcx-rule-col:  rgba(var(--sc-neutral-rgb), .07);
  --svcx-rule-head: rgba(var(--sc-neutral-rgb), .12);
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · LEFT PANEL — dual-mode host
   The sheets navigator keeps its own markup; only VISIBILITY is swapped, so
   nothing the sheet manager renders is moved, re-parented or restyled away.
   ══════════════════════════════════════════════════════════════════════════ */
#svcLeft.svcx-on {
  overflow: hidden;                    /* the active mode owns its own scroller */
  min-height: 0;
  background: var(--svcx-well) !important;
  border-right: 1px solid var(--svcx-line) !important;
  backdrop-filter: none;               /* the reference panel is opaque */
  -webkit-backdrop-filter: none;
}
/* The navigator earns a little more width than the old sheet list needed —
   the hero, the ring and the share bars all live here now.

   ⚠ `:not(.right-expanded)` IS LOAD-BEARING — do not "simplify" it away.
   `:has()` takes the specificity of its most specific argument, so
   `.svc-main:has(#svcLeft.svcx-on)` scores (1,2,0) and silently OUTRANKED the
   Reporting Studio's `.svc-main.right-expanded` (0,2,0) in services-report.css.
   The studio's own `display:none` on .svc-center still applied, so expanding
   the Dashboard blanked the middle of the workspace and left the studio
   trapped in the 320px rail. See §8b for the full reconciliation. */
.svc-main:not(.right-expanded):has(#svcLeft.svcx-on) { grid-template-columns: var(--svcx-nav-w) 1fr 320px !important; }
.svc-main.right-collapsed:not(.right-expanded):has(#svcLeft.svcx-on) { grid-template-columns: var(--svcx-nav-w) 1fr 0 !important; }

/* KPI mode — every non-console child of the panel steps aside. The
   :not() form is deliberate: it stays correct if another module later adds a
   node to #svcLeft without knowing this file exists. */
#svcLeft.svcx-mode-kpi > *:not(.svcx-rail):not(.svcx-kpi) { display: none !important; }
#svcLeft.svcx-mode-kpi .svcx-kpi { display: flex; }
#svcLeft.svcx-mode-sheets .svcx-kpi { display: none; }

/* Scrollbars — thin, neutral, and the same everywhere in the shell. */
#svcLeft.svcx-on *::-webkit-scrollbar { width: 6px; height: 6px; }
#svcLeft.svcx-on *::-webkit-scrollbar-track { background: transparent; }
#svcLeft.svcx-on *::-webkit-scrollbar-thumb { background: var(--sc-elev); border-radius: 10px; }
#svcLeft.svcx-on *::-webkit-scrollbar-thumb:hover { background: var(--sc-elev2); }
#svcLeft.svcx-on { scrollbar-width: thin; scrollbar-color: var(--sc-elev) transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   3 · MODE RAIL — SHEETS ⇄ KPI
   ══════════════════════════════════════════════════════════════════════════ */
.svcx-rail {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 12px var(--svcx-pad) 0;
  padding: 3px;
  border: 1px solid var(--svcx-line);
  border-radius: var(--svcx-radius-s);
  background: var(--sc-bg);
  isolation: isolate;
}
/* Sliding indicator — one transform, GPU-composited, no layout work. */
.svcx-rail-glide {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--svcx-radius-x);
  background: var(--sc-text-strong2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}
.svcx-rail[data-mode="kpi"] .svcx-rail-glide { transform: translateX(100%); }

.svcx-rail-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px;
  border: none;
  border-radius: var(--svcx-radius-x);
  background: transparent;
  color: var(--sc-text-dim);
  font-weight: 700; font-size: 11px; line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.svcx-rail-btn:hover { color: var(--sc-text); }
/* The glide pill is near-white, so the ACTIVE label must go dark — this is the
   one place in the console where ink inverts. */
.svcx-rail-btn.is-on { color: var(--sc-bg); }
.svcx-rail-btn.is-on .svcx-rail-ico { color: var(--sc-bg); opacity: .75; }
.svcx-rail-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--svcx-gold); }
.svcx-rail-ico { display: inline-flex; color: currentColor; transition: color .2s ease; }
.svcx-rail-ico svg { display: block; }
.svcx-rail-txt { display: inline-block; }

/* Risk badge — the overdue count stays visible while the console is hidden, so
   a problem can never be one click away from being invisible. */
.svcx-rail-badge {
  position: absolute;
  top: -5px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--svcx-risk);
  color: #fff;
  font-weight: 800; font-size: 9.5px; line-height: 16px;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--svcx-well);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · KPI CONSOLE
   ══════════════════════════════════════════════════════════════════════════ */
.svcx-kpi {
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* ── 4.1 Head ───────────────────────────────────────────────────────────── */
.svcx-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px var(--svcx-pad) 9px;
  border-bottom: 1px solid var(--svcx-line);
}
.svcx-head-id { min-width: 0; }
.svcx-brandrow { display: flex; align-items: center; gap: 7px; }
/* Brand mark — a solid tile with a punched-out square, straight from the
   reference. It is the only pure-white block in the head. */
.svcx-mark {
  width: 15px; height: 15px;
  flex: none;
  border-radius: 4px;
  background: var(--sc-text-strong2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.svcx-mark-dot {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--sc-bg);
  display: block;
}
.svcx-eyebrow {
  font-weight: 700; font-size: 10px; line-height: 1;
  letter-spacing: .16em;
  color: var(--sc-text-dim);
}
.svcx-titlerow {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 5px;
  min-width: 0;
}
.svcx-sheetname {
  margin: 0;
  font-weight: 700; font-size: 13.5px; line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--sc-text-strong2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svcx-live {
  flex: none;
  font-weight: 500; font-size: 10px; line-height: 1;
  color: var(--sc-text-dim);
}
.svcx-scope {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--svcx-line-2);
  border-radius: 999px;
  background: var(--svcx-ctl);
  color: var(--sc-text);
  font-weight: 700; font-size: 9px; line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}
.svcx-scope::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--svcx-ok);
  flex: none;
}
/* Filtered = the amber state from the reference: solid fill, dark ink, pulse. */
.svcx-scope.is-scoped {
  background: #FACC15;
  border-color: #FACC15;
  color: #1a1500;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .2);
}
.svcx-scope.is-scoped::before { background: #1a1500; animation: svcx-pulse 2s ease-in-out infinite; }
@keyframes svcx-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── 4.2 Body scroller ──────────────────────────────────────────────────── */
.svcx-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 9px var(--svcx-pad) 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── 4.3 Hero card ──────────────────────────────────────────────────────── */
.svcx-hero {
  position: relative;
  flex: none;
  overflow: hidden;
  padding: 10px 11px;
  border: 1px solid var(--svcx-card-line);
  border-radius: var(--svcx-radius);
  background: var(--svcx-card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}
.svcx-hero-sheen {
  position: absolute;
  inset: 0;
  border-radius: var(--svcx-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 62%);
  pointer-events: none;
}
.svcx-hero-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.svcx-hero-main { flex: 1; min-width: 0; }
.svcx-hero-numrow { display: flex; align-items: baseline; gap: 6px; }
.svcx-hero-num {
  font-weight: 800; font-size: 26px; line-height: 1;
  letter-spacing: -.035em;
  color: var(--sc-text-strong2);
}
.svcx-hero-unit {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border: 1px solid var(--svcx-line-2);
  border-radius: 999px;
  background: rgba(var(--sc-neutral-rgb), .07);
  color: var(--sc-text);
  font-weight: 600; font-size: 9px; line-height: 1;
  letter-spacing: .06em;
}
.svcx-hero-cap {
  margin-top: 4px;
  font-weight: 500; font-size: 9px; line-height: 1.3;
  letter-spacing: .13em;
  color: var(--sc-text-dim);
}
.svcx-hero-sub {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-weight: 500; font-size: 10px; line-height: 1;
  overflow: hidden;
}
.svcx-hero-sub > * { flex: none; }
.svcx-hero-fact { color: var(--sc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svcx-hero-fact.is-quiet { color: var(--sc-text-dim); font-weight: 400; }
.svcx-hero-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--sc-elev);
  flex: none;
}

/* Coverage ring */
.svcx-ringwrap {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.svcx-ring {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.svcx-ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.svcx-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.svcx-ring-bg { stroke: var(--sc-border2); }
.svcx-ring-fg {
  stroke: var(--svcx-ok);
  transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1), stroke .25s ease;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, .4));
}
.svcx-ring-fg[data-band="mid"]  { stroke: #FACC15; filter: drop-shadow(0 0 6px rgba(250, 204, 21, .35)); }
.svcx-ring-fg[data-band="low"]  { stroke: #F87171; filter: drop-shadow(0 0 6px rgba(248, 113, 113, .35)); }
.svcx-ring-val {
  position: absolute;
  font-weight: 700; font-size: 11px; line-height: 1;
  letter-spacing: -.02em;
  color: var(--sc-text-strong2);
}
.svcx-ring-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}
.svcx-ring-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--svcx-ok);
  flex: none;
}
.svcx-ring-cap {
  font-weight: 700; font-size: 8px; line-height: 1;
  letter-spacing: .12em;
  color: var(--sc-text-dim);
}

/* Hero footer + details toggle */
.svcx-hero-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--svcx-hair);
}
.svcx-hero-cov {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500; font-size: 10px; line-height: 1;
  color: var(--sc-text-dim);
  min-width: 0;
}
.svcx-hero-covico { display: inline-flex; }
.svcx-hero-covico svg { display: block; width: 11px; height: 11px; }
.svcx-hero-more {
  flex: none;
  border: none;
  background: transparent;
  padding: 2px 0;
  color: var(--sc-text-bright);
  font-weight: 500; font-size: 10px; line-height: 1;
  cursor: pointer;
  transition: color .14s ease;
}
.svcx-hero-more:hover { color: var(--sc-text-strong2); }
.svcx-hero-more:focus-visible { outline: none; color: var(--sc-text-strong2); text-decoration: underline; }

.svcx-detail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--svcx-hair);
  animation: svcx-drop .18s ease-out;
}
.svcx-detail-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  min-width: 0;
}
.svcx-detail-k {
  font-weight: 500; font-size: 11px; line-height: 1.4;
  color: var(--sc-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svcx-detail-v { font-weight: 700; font-size: 12px; line-height: 1.4; color: var(--sc-text-strong); }
.svcx-detail-note {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-weight: 400; font-size: 10px; line-height: 1.5;
  color: var(--sc-text-dim);
}

/* ── 4.4 Risk lane — full-width alert cards ─────────────────────────────── */
.svcx-risk { flex: none; display: flex; flex-direction: column; gap: 8px; }
.svcx-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--alert-line);
  border-radius: var(--svcx-radius-m);
  background: var(--alert-bg);
  color: var(--alert-ink);
  font-weight: 500; font-size: 13px; line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.svcx-alert:hover { background: var(--alert-bg-hi); }
.svcx-alert:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--alert-key); }
.svcx-alert-left { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.svcx-alert-ico {
  width: 20px; height: 20px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--alert-chip);
  border: 1px solid var(--alert-line);
  color: var(--alert-key);
}
.svcx-alert-ico svg { display: block; width: 11px; height: 11px; }
.svcx-alert-num { font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: -.01em; }
.svcx-alert-lbl { font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: -.01em; }
.svcx-alert-tag {
  display: inline-flex;
  align-items: center;
  height: 14px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--alert-chip);
  color: var(--alert-key);
  font-weight: 700; font-size: 9px; line-height: 1;
  letter-spacing: .04em;
}
.svcx-alert-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  color: var(--alert-key);
}
.svcx-alert-act { font-weight: 500; font-size: 10px; line-height: 1; }
.svcx-alert-chev { display: inline-flex; transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
.svcx-alert-chev svg { display: block; }
.svcx-alert.is-open .svcx-alert-chev { transform: rotate(180deg); }
.svcx-alert-od {
  --alert-key:   #F87171;
  --alert-ink:   var(--svcx-risk-ink);
  --alert-bg:    rgba(239, 68, 68, .08);
  --alert-bg-hi: rgba(239, 68, 68, .13);
  --alert-line:  rgba(239, 68, 68, .16);
  --alert-chip:  rgba(239, 68, 68, .16);
}
/* Severity is proportional, so the card gets louder as the share grows. */
.svcx-alert-od[data-sev="HIGH"] {
  --alert-bg:    rgba(239, 68, 68, .13);
  --alert-line:  rgba(239, 68, 68, .28);
}
.svcx-alert-qb {
  --alert-key:   #FBBF24;
  --alert-ink:   #FCD34D;
  --alert-bg:    rgba(245, 158, 11, .08);
  --alert-bg-hi: rgba(245, 158, 11, .13);
  --alert-line:  rgba(245, 158, 11, .18);
  --alert-chip:  rgba(245, 158, 11, .16);
}

/* ── 4.5 Overdue drill-down ─────────────────────────────────────────────── */
.svcx-odlist {
  flex: none;
  max-height: 150px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid rgba(239, 68, 68, .16);
  border-radius: var(--svcx-radius-m);
  background: var(--sc-bg);
  animation: svcx-drop .18s ease-out;
}
@keyframes svcx-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.svcx-odrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 7px;
  border: none;
  border-radius: var(--svcx-radius-x);
  background: transparent;
  color: var(--sc-text-dim);
  font-weight: 500; font-size: 10.5px; line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.svcx-odrow:hover:not(:disabled) { background: rgba(239, 68, 68, .1); }
.svcx-odrow:disabled { cursor: default; opacity: .6; }
.svcx-odcase {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--sc-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svcx-oddue { color: var(--sc-text-dim); font-size: 10.5px; white-space: nowrap; }
.svcx-odlate {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(239, 68, 68, .16);
  color: #F87171;
  font-weight: 700;
  font-size: 9.5px;
  white-space: nowrap;
}
.svcx-odempty { padding: 8px; font-weight: 500; font-size: 11px; line-height: 1.5; color: var(--sc-text-dim); text-align: center; }

/* ── 4.6 GROUP BY card ──────────────────────────────────────────────────── */
.svcx-group {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--sc-panel3);
  border-radius: var(--svcx-radius);
  background: var(--svcx-panel);
}
.svcx-group-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.svcx-iconbtn {
  width: 22px; height: 22px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--sc-text-dim);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.svcx-iconbtn:hover { background: rgba(var(--sc-neutral-rgb), .10); color: var(--sc-text-strong); }
.svcx-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--svcx-gold); }
.svcx-iconbtn svg { display: block; }
.svcx-iconbtn-lg {
  width: 34px; height: 34px;
  border-radius: var(--svcx-radius-s);
  border: 1px solid var(--svcx-ctl-line);
  background: var(--svcx-ctl);
}
.svcx-iconbtn-lg:hover { background: var(--svcx-ctl-hi); border-color: var(--sc-elev2); color: var(--sc-text-strong2); }

/* Dimension control — icon chip + label + chevron, with the REAL <select>
   stretched invisibly over the whole thing (see services-command.js). */
.svcx-dimbtn {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--svcx-ctl-line);
  border-radius: var(--svcx-radius-s);
  background: var(--svcx-ctl);
  transition: background .16s ease, border-color .16s ease;
}
.svcx-dimbtn:hover { background: var(--svcx-ctl-hi); border-color: var(--sc-elev2); }
.svcx-dimbtn:focus-within { border-color: var(--svcx-gold); box-shadow: 0 0 0 2px rgba(201, 168, 76, .18); }
.svcx-dimchip {
  width: 18px; height: 18px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--svcx-ctl-line);
  border-radius: 5px;
  background: var(--sc-border2);
  color: var(--sc-text-dim);
}
.svcx-dimchip svg { display: block; }
.svcx-dimtext {
  flex: 1;
  min-width: 0;
  font-weight: 500; font-size: 12px; line-height: 1;
  color: var(--sc-text-strong2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svcx-dimchev { flex: none; display: inline-flex; color: var(--sc-text-dim); }
.svcx-dimchev svg { display: block; }
/* The native select carries all the behaviour and none of the appearance. */
.svcx-dim-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}
.svcx-dim-select option { background: var(--sc-panel); color: var(--sc-text); }

/* ── 4.7 Tools ──────────────────────────────────────────────────────────── */
.svcx-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}
.svcx-searchwrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.svcx-searchico {
  position: absolute;
  left: 9px;
  display: inline-flex;
  color: var(--sc-text-dim);
  pointer-events: none;
  transition: color .14s ease;
}
.svcx-searchwrap:focus-within .svcx-searchico { color: var(--sc-text-strong); }
.svcx-searchico svg { display: block; }
.svcx-valsearch {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 10px 0 27px;
  border: 1px solid var(--sc-border2);
  border-radius: var(--svcx-radius-s);
  background: var(--svcx-ctl);
  color: var(--sc-text-strong2);
  font-weight: 500; font-size: 12px; line-height: 1;
  outline: none;
  transition: border-color .16s ease, background .16s ease;
}
.svcx-valsearch::placeholder { color: var(--sc-text-dimmer); }
.svcx-valsearch:focus { border-color: var(--sc-elev); background: var(--svcx-ctl-hi); }
/* Segmented control shell — the reference's inset track. */
.svcx-seg {
  flex: none;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 3px;
  border: 1px solid var(--sc-border2);
  border-radius: var(--svcx-radius-s);
  background: var(--svcx-ctl);
}
.svcx-sortbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 8px;
  border: none;
  border-radius: var(--svcx-radius-x);
  background: var(--sc-text-strong2);
  color: var(--sc-bg);
  font-weight: 600; font-size: 11px; line-height: 1;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.svcx-sortbtn:hover { background: var(--sc-text-strong); }
.svcx-sortbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--svcx-gold); }
.svcx-sortico { display: inline-flex; }
.svcx-sortico svg { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   5 · DISTRIBUTION — every value, with its share of the view
   The old build showed six chips and hid the rest behind a "+N more" popover
   because a horizontal bar has no room. A vertical rail does: every value is
   listed, ranked, measured and one click from filtering the grid.
   ══════════════════════════════════════════════════════════════════════════ */
.svcx-distwrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.svcx-distmeta {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 5px;
  font-weight: 400; font-size: 10px; line-height: 1;
  color: var(--sc-text-dim);
}
.svcx-dist {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -4px;
  padding: 0 4px;
}
.svcx-vrow {
  display: grid;
  /* DENSITY: the share % used to sit on its own line beside the bar, which
     cost ~10px of row height for one small number. Moving it up next to the
     count leaves row 2 as a pure 2px hairline, so a row is ~30px instead of
     ~53px — nearly double the values visible without scrolling. */
  grid-template-columns: 0 18px minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "od av lab warn cnt pct"
    "od av bar bar bar bar";
  align-items: center;
  gap: 3px 6px;
  width: 100%;
  padding: 4px 7px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-weight: 500; font-size: 12px; line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.svcx-vrow:hover { background: var(--sc-panel3); border-color: var(--sc-border2); }
.svcx-vrow:focus-visible { outline: none; border-color: var(--vc); }
.svcx-vrow.is-static { cursor: default; }
.svcx-vrow.is-active {
  background: var(--sc-panel3);
  border-color: color-mix(in srgb, var(--vc) 42%, transparent);
}
/* Avatar: the value's initial, with its series colour as a status dot. */
.svcx-vav {
  grid-area: av;
  position: relative;
  width: 18px; height: 18px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sc-border2);
  border: 1px solid var(--sc-elev);
  align-self: center;
}
.svcx-vav-txt {
  font-weight: 700; font-size: 9px; line-height: 1;
  color: var(--sc-text);
}
.svcx-vdot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vc);
  border: 1.5px solid var(--svcx-panel);
}
.svcx-vlabel {
  grid-area: lab;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sc-text);
  letter-spacing: -.01em;
}
.svcx-vrow:hover .svcx-vlabel,
.svcx-vrow.is-active .svcx-vlabel { color: var(--sc-text-strong2); }
/* "contains"-match disclosure — see broadValues() in services-command.js */
.svcx-vwarn { grid-area: warn; display: inline-flex; color: var(--svcx-warn); }
.svcx-vwarn svg { display: block; width: 10px; height: 10px; }
.svcx-vcount {
  grid-area: cnt;
  font-weight: 700; font-size: 12.5px; line-height: 1;
  letter-spacing: -.02em;
  color: var(--sc-text-strong2);
}
.svcx-vbar {
  grid-area: bar;
  height: 2px;
  border-radius: 999px;
  background: var(--sc-panel3);
  overflow: hidden;
}
.svcx-vrow:hover .svcx-vbar { background: var(--sc-border2); }
.svcx-vfill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--vc);
  box-shadow: 0 0 8px color-mix(in srgb, var(--vc) 40%, transparent);
  transition: width .7s cubic-bezier(.4, 0, .2, 1);
}
.svcx-vpct {
  grid-area: pct;
  font-weight: 500; font-size: 9.5px; line-height: 1;
  color: var(--sc-text-dim);
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Per-value OVERDUE attribution (MACE) ────────────────────────────────────
   "sa sorted result mag i-indent mo ang mga result para mag kasya sa left side
    yung overdue count na tatapat sa name ng user kung nakanino ang mga overdue
    na iyon at kung ilan ang hawak nila."
   A bare "7 Overdue" says a problem exists; this says WHOSE it is. The slot is
   a real grid column so every name below it lands on the same vertical line —
   that alignment is the point of the indent, not the badge itself. The column
   only opens when the view actually HAS overdue rows (`.has-od`); on a clean
   sheet the space belongs to the labels. */
.svcx-dist.has-od .svcx-vrow { grid-template-columns: 22px 18px minmax(0, 1fr) auto auto auto; }
.svcx-vod {
  grid-area: od;
  align-self: center;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  overflow: hidden;
  font-weight: 700;
  font-size: 9.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.svcx-vod.is-on {
  background: rgba(239, 68, 68, .13);
  border-color: rgba(239, 68, 68, .26);
  color: #F87171;
  cursor: pointer;
}
.svcx-vod.is-on:hover { background: rgba(239, 68, 68, .22); border-color: rgba(239, 68, 68, .45); }
.svcx-vod.is-drilled {
  background: #F87171;
  border-color: #F87171;
  color: var(--sc-bg);
}
.svcx-vod:focus-visible { outline: none; box-shadow: 0 0 0 2px #F87171; }
/* A row that owns overdue work earns a hair more presence than one that does
   not — the eye should find the problem rows without reading every number. */
.svcx-dist.has-od .svcx-vrow:has(.svcx-vod.is-on) .svcx-vlabel { color: var(--sc-text-strong); }

/* Drill-down scope banner — a narrowed list must announce that it is narrowed,
   otherwise the shorter count reads as a wrong count. */
.svcx-odscope {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 4px 4px 4px 8px;
  border-radius: var(--svcx-radius-x);
  background: rgba(239, 68, 68, .12);
  min-width: 0;
}
.svcx-odscope-cap {
  flex: none;
  font-weight: 700;
  font-size: 8.5px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F87171;
}
.svcx-odscope-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--sc-text-strong2);
}
.svcx-odscope-x {
  flex: none;
  display: inline-flex;
  padding: 3px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #F87171;
  cursor: pointer;
}
.svcx-odscope-x:hover { background: rgba(239, 68, 68, .2); }
.svcx-odscope-x svg { display: block; }

/* Categorical data palette — colour BY SERIES, sticky per value, never gold.
   ORDER IS DELIBERATE. Slots are handed out by rank, so the first few decide
   how a typical 3–5 status sheet reads. Greens sit at the END because the
   semantic "settled" colour (.svcx-cok) is already green: putting emerald at
   slot 1 made "O - Investigating" and "C - Resolved" two adjacent greens.
   Red also sits late — it is the risk lane's colour and must not be spent on
   an ordinary category. Hues alternate warm/cool so neighbours never blend. */
.svcx-c0 { --vc: #3B82F6; }  /* blue    */
.svcx-c1 { --vc: #8B5CF6; }  /* violet  */
.svcx-c2 { --vc: #06B6D4; }  /* cyan    */
.svcx-c3 { --vc: #EC4899; }  /* pink    */
.svcx-c4 { --vc: #EAB308; }  /* yellow  */
.svcx-c5 { --vc: #14B8A6; }  /* teal    */
.svcx-c6 { --vc: #6366F1; }  /* indigo  */
.svcx-c7 { --vc: #F97316; }  /* orange  */
.svcx-cok    { --vc: #22C55E; }               /* semantic: resolved / closed */
.svcx-cblank { --vc: #6A6A70; }               /* absence is not a category   */

/* Empty state */
.svcx-empty {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 12px;
  text-align: center;
}
.svcx-empty-txt { font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--sc-text-dim); max-width: 210px; }
.svcx-empty-btn {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--sc-text-strong2);
  font-weight: 500; font-size: 12px; line-height: 1;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--sc-neutral-rgb), .35);
  text-underline-offset: 4px;
}
.svcx-empty-btn:hover { text-decoration-color: currentColor; }

/* ══════════════════════════════════════════════════════════════════════════
   6 · CONSOLE FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.svcx-foot {
  flex: none;
  padding: 9px var(--svcx-pad) 10px;
  border-top: 1px solid var(--sc-panel2);
  background: var(--svcx-well);
}
.svcx-active {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  padding: 5px 5px 5px 9px;
  border: 1px solid rgba(201, 168, 76, .30);
  border-radius: var(--svcx-radius-s);
  background: rgba(201, 168, 76, .10);
  min-width: 0;
}
.svcx-active-cap {
  flex: none;
  font-weight: 700; font-size: 9px; line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sc-ink-gA);
}
.svcx-active-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600; font-size: 11.5px; line-height: 1.3;
  color: var(--sc-text-strong2);
}
.svcx-active-x {
  flex: none;
  display: inline-flex;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--sc-text-dim);
  cursor: pointer;
  transition: color .13s ease, background .13s ease;
}
.svcx-active-x:hover { color: #F87171; background: rgba(239, 68, 68, .14); }
.svcx-active-x svg { display: block; }

.svcx-footacts { display: flex; align-items: center; gap: 8px; }
/* Primary action — the reference's solid white button. This is the ONE
   high-emphasis control in the navigator; nothing else may compete with it. */
.svcx-primary {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  border: none;
  border-radius: var(--svcx-radius-s);
  background: var(--sc-text-strong2);
  color: var(--sc-bg);
  font-weight: 600; font-size: 13px; line-height: 1;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: background .14s ease, opacity .14s ease;
}
.svcx-primary:hover:not(:disabled) { background: #EDEDEE; }
.svcx-primary:active:not(:disabled) { background: #E5E5E6; }
.svcx-primary:disabled { opacity: .45; cursor: default; }
.svcx-primary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--svcx-gold); }
.svcx-primary svg { display: block; flex: none; }
.svcx-primary-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svcx-primary-count {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .1);
  font-weight: 700; font-size: 9.5px; line-height: 1;
}
.svcx-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 7px;
  font-weight: 400; font-size: 9.5px; line-height: 1;
  color: var(--sc-text-dim);
}
.svcx-footdot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--svcx-ok);
  animation: svcx-pulse 2.4s ease-in-out infinite;
}
.svcx-footnote.is-warn .svcx-footdot { background: #FBBF24; }
.svcx-footnote.is-idle .svcx-footdot { background: var(--sc-elev2); animation: none; }

/* ── Console popup menu (both "⋯" buttons) ──────────────────────────────── */
.svcx-menu {
  position: fixed;
  z-index: 10046;
  min-width: 190px;
  padding: 4px;
  border: 1px solid var(--svcx-ctl-line);
  border-radius: var(--svcx-radius-m);
  background: var(--sc-panel2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.svcx-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sc-text);
  font-weight: 500; font-size: 12.5px; line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.svcx-menu-item:hover { background: rgba(var(--sc-neutral-rgb), .10); color: var(--sc-text-strong2); }
.svcx-menu-item.is-danger:hover { background: rgba(239, 68, 68, .14); color: #F87171; }
.svcx-menu-ico { display: inline-flex; color: var(--sc-text-dim); flex: none; }
.svcx-menu-item:hover .svcx-menu-ico { color: inherit; }
.svcx-menu-ico svg { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   7 · SHEETS MENU — same design language as the console
   The markup belongs to services-sheet-manager.js and is NOT touched; this is
   a pure re-skin so both modes read as one product.
   ══════════════════════════════════════════════════════════════════════════ */
#svcLeft.svcx-on .svc-left-header {
  padding: 14px var(--svcx-pad) 12px !important;
  border-bottom: 1px solid var(--svcx-line) !important;
  align-items: center;
}
#svcLeft.svcx-on .svc-left-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  font-weight: 700 !important;
  color: var(--sc-text-dim) !important;
}
/* Matching brand mark, drawn in CSS so the sheet-manager markup stays untouched. */
#svcLeft.svcx-on .svc-left-label::before {
  content: '';
  width: 18px; height: 18px;
  flex: none;
  border-radius: 5px;
  background: var(--sc-text-strong2);
  box-shadow: inset 0 0 0 5px var(--sc-bg), inset 0 0 0 9px var(--sc-text-strong2);
}
#svcLeft.svcx-on .svc-left-label i { display: none !important; }
/* "+ New" adopts the primary-action language (solid, high-emphasis). */
#svcLeft.svcx-on .svc-new-btn {
  background: var(--sc-text-strong2) !important;
  color: var(--sc-bg) !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4) !important;
  transition: background .14s ease !important;
}
#svcLeft.svcx-on .svc-new-btn:hover {
  background: #EDEDEE !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}
#svcLeft.svcx-on .svc-sheet-search {
  margin: 12px var(--svcx-pad) 4px !important;
  width: calc(100% - (var(--svcx-pad) * 2)) !important;
  height: 36px;
  border-radius: var(--svcx-radius-s) !important;
  border: 1px solid var(--sc-border2) !important;
  background-color: var(--svcx-ctl) !important;
  color: var(--sc-text-strong2) !important;
  font-size: 13px !important;
  font-weight: 500;
  transition: border-color .16s ease, background .16s ease;
}
#svcLeft.svcx-on .svc-sheet-search::placeholder { color: var(--sc-text-dimmer) !important; }
#svcLeft.svcx-on .svc-sheet-search:focus {
  border-color: var(--sc-elev) !important;
  background-color: var(--svcx-ctl-hi) !important;
  box-shadow: none;
}
#svcLeft.svcx-on .svc-sheet-list { padding: 6px var(--svcx-pad) 10px !important; }

/* Sheet rows become distribution-row twins: quiet by default, lit on hover,
   with a solid state for the open sheet. No card shadows, no gold wash — the
   reference gets its hierarchy from ink and one accent, not from chrome. */
#svcLeft.svcx-on .svc-sheet-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--svcx-radius-s) !important;
  box-shadow: none !important;
  padding: 9px 10px !important;
  margin-bottom: 2px !important;
  color: var(--sc-text) !important;
  transform: none !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease !important;
}
#svcLeft.svcx-on .svc-sheet-item:hover {
  background: var(--sc-panel3) !important;
  border-color: var(--sc-border2) !important;
  color: var(--sc-text-strong2) !important;
  transform: none !important;
  box-shadow: none !important;
}
#svcLeft.svcx-on .svc-sheet-item.active {
  background: var(--sc-panel3) !important;
  border-color: rgba(201, 168, 76, .40) !important;
  box-shadow: none !important;
  color: var(--sc-text-strong2) !important;
}
#svcLeft.svcx-on .svc-sheet-item.active::before {
  left: 0; top: 9px; bottom: 9px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--svcx-gold-hi);
  box-shadow: none;
}
#svcLeft.svcx-on .svc-sheet-item .icon {
  width: 22px; height: 22px;
  border-radius: 50% !important;
  background: var(--sc-border2) !important;
  border: 1px solid var(--sc-elev);
  color: var(--sc-text-dim) !important;
  font-size: 10px !important;
}
#svcLeft.svcx-on .svc-sheet-item:hover .icon { background: var(--sc-elev) !important; color: var(--sc-text) !important; }
#svcLeft.svcx-on .svc-sheet-item.active .icon {
  background: var(--svcx-gold-hi) !important;
  border-color: var(--svcx-gold) !important;
  color: #1a1500 !important;
  box-shadow: none;
}
#svcLeft.svcx-on .svc-sheet-item .title { font-size: 13px; letter-spacing: -.01em; }
#svcLeft.svcx-on .svc-sheet-item.active .title { font-weight: 600 !important; }
/* Nested folder rows follow the same quiet-then-lit rule. */
#svcLeft.svcx-on .svc-tv-node { border-radius: 8px !important; margin: 2px 0 !important; }
#svcLeft.svcx-on .svc-tv-node:hover { background: var(--sc-panel3) !important; }
#svcLeft.svcx-on .svc-tv-node.svc-tv-active {
  background: var(--sc-panel3) !important;
  border-color: transparent !important;
  border-left: 2px solid var(--svcx-gold-hi) !important;
  box-shadow: none !important;
}
#svcLeft.svcx-on .svc-tv-section-header {
  color: var(--sc-text-dim) !important;
  letter-spacing: .16em !important;
  font-weight: 700 !important;
  font-size: 10px !important;
}
#svcLeft.svcx-on .svc-left-footer {
  padding: 10px var(--svcx-pad) 12px !important;
  border-top: 1px solid var(--sc-panel2) !important;
  background: var(--svcx-well);
  color: var(--sc-text-dim) !important;
  font-size: 10px !important;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   8 · LEFT DRAWER — collapse mechanics (permanent layout fix, keep verbatim)
   ══════════════════════════════════════════════════════════════════════════ */
.svc-sidebar-toggle.svc-left-toggle {
  left: 8px;
  right: auto;
}

/* CRITICAL LAYOUT FIX (2026-07-16, Mace: "nawawala yung sheets pag hide"):
   services.css collapses the left panel with `display: none` — that REMOVES
   .svc-left from the grid flow, so auto-placement shoved .svc-center into
   the 0px first track and the ENTIRE workspace vanished. Keep the panel IN
   FLOW at zero width instead — the exact mechanics the right sidebar uses
   (.svc-main.right-collapsed .svc-right). This file loads LAST, so these
   overrides win the cascade. */
.svc-main.left-collapsed .svc-left {
  display: flex !important;      /* stays a grid item occupying column 1 */
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-right: none !important;
}
.svc-main.left-collapsed:not(.right-expanded):has(#svcLeft.svcx-on) { grid-template-columns: 0 1fr 320px !important; }
/* Both drawers hidden → grid gets the full width. Without this, premium's
   later .left-collapsed rule (0 1fr 320px) re-opened a dead 320px right
   track while the right panel itself was 0-wide. */
.svc-main.left-collapsed.right-collapsed:not(.right-expanded),
.svc-main.left-collapsed.right-collapsed:not(.right-expanded):has(#svcLeft.svcx-on) {
  grid-template-columns: 0 1fr 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   8b · REPORTING STUDIO — "right-expanded" CASCADE RECONCILIATION
   (2026-08-04, MACE: "Dashboard stuck sa right sidebar, hindi nag-fu-fullscreen")
   ──────────────────────────────────────────────────────────────────────────
   `services-report.js` puts the workspace into `.svc-main.right-expanded`: the
   center grid closes and the Dashboard sweeps LEFT across it as a full-stage
   drawer. That state is declared in services-report.css, which loads BEFORE
   this file and scores only (0,2,0) — every `:has(#svcLeft.svcx-on)` rule in
   the premium shell carries an id in its argument and therefore outranked it.
   Result: the studio painted its full-stage chrome while the grid still handed
   it 320px, and the emptied center track stayed on screen as a dead black band.

   THE CONTRACT — read before touching any track above:
     · `right-expanded` is a MODE, and it SUPERSEDES `right-collapsed`. Both
       classes may legally coexist: the topbar chevron's own state machine
       lives in services.js (a guarded file) and must never be desynced by the
       studio, so the studio leaves `right-collapsed` exactly as it found it
       and CSS resolves the precedence here instead.
     · Track 2 (the center) is always 0 while expanded — .svc-center is
       `display:none`, and a 1fr track under a hidden item is the dead band.
     · Track 1 follows the navigator: --svcx-nav-w normally, 0 when the left
       drawer is collapsed (that is the literal-fullscreen state).
     · Every selector here must be reachable with AND without the premium
       navigator mounted, hence the paired `:has()` variants.
   ══════════════════════════════════════════════════════════════════════════ */
.svc-main.right-expanded,
.svc-main.right-expanded.right-collapsed,
.svc-main.right-expanded:has(#svcLeft.svcx-on),
.svc-main.right-expanded.right-collapsed:has(#svcLeft.svcx-on) {
  grid-template-columns: var(--svcx-nav-w) 0 1fr !important;
}
/* Navigator collapsed → the studio owns the entire stage, edge to edge. */
.svc-main.right-expanded.left-collapsed,
.svc-main.right-expanded.left-collapsed.right-collapsed,
.svc-main.right-expanded.left-collapsed:has(#svcLeft.svcx-on),
.svc-main.right-expanded.left-collapsed.right-collapsed:has(#svcLeft.svcx-on) {
  grid-template-columns: 0 0 1fr !important;
}
/* The panel itself: `right-collapsed` may still be present (see the contract
   above), and services.css zeroes .svc-right under it. Expanded wins. */
.svc-main.right-expanded .svc-right,
.svc-main.right-expanded.right-collapsed .svc-right {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-left: 1px solid var(--svcx-line) !important;
}
/* …and the navigator keeps its edge unless it is the one collapsed. */
.svc-main.right-expanded:not(.left-collapsed) .svc-left {
  border-right: 1px solid var(--svcx-line) !important;
}
/* The center is out of flow-relevance while expanded; make sure no later
   author re-opens it via a min-width on the grid item. */
.svc-main.right-expanded .svc-center { display: none !important; }

/* Print safety net (services-report.css §"@media print"): the navigator is
   hidden on paper, so its track must close too — otherwise the sheet prints
   with a 330px blank gutter. Same specificity trap as above. */
@media print {
  body.services-body .svc-main.right-expanded,
  body.services-body .svc-main.right-expanded.right-collapsed,
  body.services-body .svc-main.right-expanded:has(#svcLeft.svcx-on),
  body.services-body .svc-main.right-expanded.right-collapsed:has(#svcLeft.svcx-on) {
    grid-template-columns: 0 0 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   9 · LIGHT-MODE TARGETED OVERRIDES
   Everything above rides --sc-* and themes itself. Only literals that read
   wrong on a light canvas are restated here.
   ══════════════════════════════════════════════════════════════════════════ */
/* The near-white surfaces invert: on light, "solid ink" means near-black. */
:root[data-svc-theme="light"] .svcx-rail { background: var(--sc-panel2); }
:root[data-svc-theme="light"] .svcx-rail-glide { background: #ffffff; box-shadow: 0 2px 6px rgba(40, 52, 74, .14); }
:root[data-svc-theme="light"] .svcx-rail-btn.is-on,
:root[data-svc-theme="light"] .svcx-rail-btn.is-on .svcx-rail-ico { color: var(--sc-text-strong); opacity: 1; }
:root[data-svc-theme="light"] .svcx-mark { background: var(--sc-text-strong); }
:root[data-svc-theme="light"] .svcx-mark-dot { background: #ffffff; }
:root[data-svc-theme="light"] .svcx-hero-sheen { background: linear-gradient(180deg, rgba(40, 52, 74, .04), transparent 62%); }
:root[data-svc-theme="light"] .svcx-rail-badge { box-shadow: 0 0 0 2px var(--sc-bg2); }
:root[data-svc-theme="light"] .svcx-scope.is-scoped { background: #B45309; border-color: #B45309; color: #ffffff; }
:root[data-svc-theme="light"] .svcx-scope.is-scoped::before { background: #ffffff; }
:root[data-svc-theme="light"] .svcx-ring-fg { stroke: #047857; filter: none; }
:root[data-svc-theme="light"] .svcx-ring-fg[data-band="mid"] { stroke: #B45309; filter: none; }
:root[data-svc-theme="light"] .svcx-ring-fg[data-band="low"] { stroke: #B42318; filter: none; }
:root[data-svc-theme="light"] .svcx-ring-dot,
:root[data-svc-theme="light"] .svcx-footdot { background: #047857; }
:root[data-svc-theme="light"] .svcx-alert-od {
  --alert-key: #B42318; --alert-ink: #7A1710;
  --alert-bg: #FEF3F2; --alert-bg-hi: #FEE4E2;
  --alert-line: rgba(180, 35, 24, .26); --alert-chip: #FEE4E2;
}
:root[data-svc-theme="light"] .svcx-alert-od[data-sev="HIGH"] {
  --alert-bg: #FEE4E2; --alert-line: rgba(180, 35, 24, .40);
}
:root[data-svc-theme="light"] .svcx-alert-qb {
  --alert-key: #B54708; --alert-ink: #7A3D05;
  --alert-bg: #FFFAEB; --alert-bg-hi: #FEF0C7;
  --alert-line: rgba(181, 71, 8, .26); --alert-chip: #FEF0C7;
}
:root[data-svc-theme="light"] .svcx-odlist { border-color: rgba(180, 35, 24, .22); background: var(--sc-tertiary); }
:root[data-svc-theme="light"] .svcx-odlate { background: #FEE4E2; color: #B42318; }
:root[data-svc-theme="light"] .svcx-vod.is-on { background: #FEE4E2; border-color: rgba(180,35,24,.30); color: #B42318; }
:root[data-svc-theme="light"] .svcx-vod.is-on:hover { background: #FECDCA; border-color: rgba(180,35,24,.5); }
:root[data-svc-theme="light"] .svcx-vod.is-drilled { background: #B42318; border-color: #B42318; color: #ffffff; }
:root[data-svc-theme="light"] .svcx-odscope { background: #FEE4E2; }
:root[data-svc-theme="light"] .svcx-odscope-cap,
:root[data-svc-theme="light"] .svcx-odscope-x { color: #B42318; }
:root[data-svc-theme="light"] .svcx-odscope-x:hover { background: #FECDCA; }
:root[data-svc-theme="light"] .svcx-odrow:hover:not(:disabled) { background: #FEF3F2; }
:root[data-svc-theme="light"] .svcx-sortbtn { background: var(--sc-text-strong); color: #ffffff; }
:root[data-svc-theme="light"] .svcx-sortbtn:hover { background: #000000; }
:root[data-svc-theme="light"] .svcx-primary { background: var(--sc-text-strong); color: #ffffff; box-shadow: none; }
:root[data-svc-theme="light"] .svcx-primary:hover:not(:disabled) { background: #000000; }
:root[data-svc-theme="light"] .svcx-primary-count { background: rgba(255, 255, 255, .18); }
:root[data-svc-theme="light"] .svcx-menu { background: #ffffff; }
:root[data-svc-theme="light"] .svcx-vav { background: var(--sc-elev); border-color: var(--sc-elev2); }
:root[data-svc-theme="light"] .svcx-vbar { background: var(--sc-elev); }
:root[data-svc-theme="light"] .svcx-vrow:hover,
:root[data-svc-theme="light"] .svcx-vrow.is-active { background: var(--sc-panel2); }
:root[data-svc-theme="light"] .svcx-vdot { border-color: #ffffff; }
:root[data-svc-theme="light"] .svcx-hero-unit { background: rgba(var(--sc-neutral-rgb), .10); }
/* Sheets menu, light */
:root[data-svc-theme="light"] #svcLeft.svcx-on .svc-left-label::before {
  background: var(--sc-text-strong);
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 9px var(--sc-text-strong);
}
:root[data-svc-theme="light"] #svcLeft.svcx-on .svc-new-btn { background: var(--sc-text-strong) !important; color: #ffffff !important; box-shadow: none !important; }
:root[data-svc-theme="light"] #svcLeft.svcx-on .svc-new-btn:hover { background: #000000 !important; box-shadow: none !important; }
:root[data-svc-theme="light"] #svcLeft.svcx-on .svc-sheet-item:hover,
:root[data-svc-theme="light"] #svcLeft.svcx-on .svc-sheet-item.active,
:root[data-svc-theme="light"] #svcLeft.svcx-on .svc-tv-node:hover,
:root[data-svc-theme="light"] #svcLeft.svcx-on .svc-tv-node.svc-tv-active { background: var(--sc-panel2) !important; }
:root[data-svc-theme="light"] #svcLeft.svcx-on .svc-sheet-item .icon { background: var(--sc-elev) !important; border-color: var(--sc-elev2); }
/* Categorical palette on a light canvas — same hues, one step deeper so the
   dot, the bar and the active tint all keep AA contrast. */
:root[data-svc-theme="light"] .svcx-c0 { --vc: #1D4ED8; }
:root[data-svc-theme="light"] .svcx-c1 { --vc: #6D28D9; }
:root[data-svc-theme="light"] .svcx-c2 { --vc: #0E7490; }
:root[data-svc-theme="light"] .svcx-c3 { --vc: #BE185D; }
:root[data-svc-theme="light"] .svcx-c4 { --vc: #A16207; }
:root[data-svc-theme="light"] .svcx-c5 { --vc: #0F766E; }
:root[data-svc-theme="light"] .svcx-c6 { --vc: #4338CA; }
:root[data-svc-theme="light"] .svcx-c7 { --vc: #C2410C; }
:root[data-svc-theme="light"] .svcx-cok    { --vc: #047857; }
:root[data-svc-theme="light"] .svcx-cblank { --vc: #5B6676; }

/* ══════════════════════════════════════════════════════════════════════════
   9b · SHEET GRID — PREMIUM LININGS
   ──────────────────────────────────────────────────────────────────────────
   MACE: "maging premium na ng tuluyan ang mga linings layout sa sheets."

   The grid's structure logic is untouched. services-grid.js paints several
   cells with INLINE styles carrying hard-coded slate values (#0f172a header
   band, #020617 filter fields, #334155 borders, #cbd5e1 ink) — leftovers from
   a palette the workspace no longer uses. An inline declaration without
   !important loses to an !important rule, so this last-loaded layer reclaims
   them token-side. Nothing here changes a width, a sticky offset or a z-index:
   only surface, hairline and ink.

   Reference table language:
     canvas #0C0C0E · sticky head #121214 · 40px rows · #1E1E21 row hairlines
     · a ~1/3-weight column rule · #141417 hover
     · tiered ink (white key, #B4B4B8 body, #8B8B90 meta)
   ══════════════════════════════════════════════════════════════════════════ */

/* Canvas + card: the grid sits directly on the page well, no drop shadow —
   depth now comes from the hairline ramp, not from a floating panel. */
.svc-center { background: var(--sc-bg) !important; }
.svc-grid-wrap { padding: 0 !important; background: var(--sc-bg); }
.svc-grid {
  background: var(--sc-bg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
}

/* ── Header band ────────────────────────────────────────────────────────── */
.svc-grid thead th {
  background: var(--sc-tertiary) !important;
  color: var(--sc-text-dim) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  padding: 0 12px !important;
  height: 36px !important;
  border-right: 1px solid var(--svcx-rule-head) !important;
  border-bottom: 1px solid var(--sc-elev) !important;
  box-shadow: none !important;
}
.svc-grid thead th[data-key]:hover {
  background: var(--sc-panel2) !important;
  color: var(--sc-text-strong) !important;
}
.svc-grid thead th:focus {
  background: var(--sc-panel2) !important;
  color: var(--sc-text-strong2) !important;
}
/* Filter row: a quieter band under the labels, and REAL inputs. */
.svc-grid thead tr.filter-row th,
.svc-grid thead th[style*="0f172a"] {
  background: var(--sc-tertiary) !important;
  border-bottom: 1px solid var(--sc-elev) !important;
  box-shadow: none !important;
}
.svc-grid .col-filter-input,
.col-filter-input {
  height: 24px !important;
  background: var(--sc-panel2) !important;
  border: 1px solid var(--sc-elev) !important;
  border-radius: 7px !important;
  color: var(--sc-text-strong2) !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  transition: border-color .14s ease, background .14s ease !important;
}
.col-filter-input::placeholder { color: var(--sc-text-dimmer) !important; font-style: normal !important; }
.col-filter-input:hover { border-color: var(--sc-elev2) !important; }
.col-filter-input:focus {
  background: var(--sc-panel3) !important;
  border-color: var(--sc-elev2) !important;
  box-shadow: none !important;
}
/* A filtered column announces itself on the header, not just in the field. */
.svc-grid thead th.has-filter { box-shadow: inset 0 -2px 0 var(--svcx-gold-hi) !important; }

/* ── Row-number gutter ──────────────────────────────────────────────────── */
/* services.css pins this to a hard-coded near-black (#060708 !important) that
   predates the ramp; on graphite it read as a black stripe. */
.svc-grid thead th.row-num,
.svc-grid tbody td.row-num,
#svcGrid thead th.row-num,
#svcGrid tbody td.row-num {
  background: var(--sc-bg) !important;
  border-right: 1px solid var(--sc-panel3) !important;
  color: var(--sc-text-dim) !important;
}
.svc-grid thead th.row-num { background: var(--sc-tertiary) !important; }
.svc-grid tbody tr.grid-row:hover td.row-num { background: var(--sc-bg-top) !important; }
.row-num { font-size: 11px !important; font-weight: 500 !important; }

/* ── Body rows ──────────────────────────────────────────────────────────── */
/* One hairline per row plus a MUCH quieter column rule, and no zebra. The eye
   tracks the horizontal rhythm first, so the row line is the strong one; the
   column rule is about a third of its weight — enough to see where a value ends
   (MACE asked for the divisions back), not enough to turn the sheet into a
   cage. Alternating fills stay out entirely: they fight both rhythms. */
.svc-grid tbody td {
  background: var(--sc-bg) !important;
  border-right: 1px solid var(--svcx-rule-col) !important;
  border-bottom: 1px solid var(--svcx-rule-row) !important;
}
/* The last column has nothing to divide it from, so its rule would just draw a
   line down the empty right edge of the sheet. */
.svc-grid tbody td:last-child,
.svc-grid thead th:last-child { border-right: none !important; }
.svc-grid tbody tr.grid-row td:not(.row-num),
.svc-grid tbody tr.grid-row:nth-child(even) td:not(.row-num) {
  background-color: var(--sc-bg) !important;
}
.svc-grid tbody tr.grid-row:hover td:not(.row-num) {
  background-color: var(--sc-bg-top) !important;
}
.svc-grid tbody td input.cell {
  min-height: 40px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  color: var(--sc-text-bright) !important;
  letter-spacing: -.005em;
}
/* Ink tiers: the first data column is the key and reads brightest, everything
   else steps back so a row scans left-to-right instead of shouting at once. */
.svc-grid tbody td:nth-child(2) input.cell {
  color: var(--sc-text-strong2) !important;
  font-weight: 600 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: -.02em;
}
.svc-grid tbody td input.cell::placeholder { color: var(--sc-text-dimmer) !important; }

/* ── Selected cell: EXACTLY ONE border ──────────────────────────────────────
   MACE: "yung mga field o cell sa sheets dala dalawa ang border pag nag
   seselect — tanggalin mo, dapat isa lang, i-tira mo ang outer borderline."
   Two rules were drawing a ring at once:
     1. the CELL's own focus ring (services.css `td:focus-within`), and
     2. the INPUT's ring (services-premium.css `input.cell:focus` sets
        border-color + a 2px box-shadow on a `border-radius: 4px` input),
   so a rounded rectangle sat inside a square one. The cell ring is the honest
   one — it marks the whole editable area — so the input's ring is muted here.
   This file loads LAST, so these beat premium's !important declarations. */
.svc-grid tbody td:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--svcx-gold) !important;
}
/* The row-surface rule above is `tr.grid-row td:not(.row-num)` and outranks a
   bare `td:focus-within`, so the focused cell's lift has to match its weight. */
.svc-grid tbody tr.grid-row td:not(.row-num):focus-within {
  background-color: var(--sc-panel2) !important;
}
.svc-grid tbody td input.cell:focus,
.svc-grid tbody td input.cell:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;   /* let the cell's own fill show */
  outline: none !important;
}
.svc-grid tbody tr.selected td { background: var(--sc-panel3) !important; }
.row-header:hover { background: var(--sc-panel2) !important; color: var(--sc-text-strong) !important; }

/* ── Status bar ─────────────────────────────────────────────────────────── */
.svc-statusbar {
  height: 36px !important;
  background: var(--sc-tertiary) !important;
  border-top: 1px solid var(--sc-elev) !important;
  color: var(--sc-text-dim) !important;
  font-size: 11px !important;
}

/* ── Grid scrollbars ────────────────────────────────────────────────────── */
.svc-grid-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.svc-grid-wrap::-webkit-scrollbar-track { background: var(--sc-bg); }
.svc-grid-wrap::-webkit-scrollbar-thumb {
  background: var(--sc-border2);
  border: 1px solid var(--sc-panel2);
  border-radius: 10px;
}
.svc-grid-wrap::-webkit-scrollbar-thumb:hover { background: var(--sc-elev); }

/* ── Sheet header + toolbar chrome ──────────────────────────────────────── */
.svc-active-header {
  background: var(--sc-bg2) !important;
  border-bottom: 1px solid var(--svcx-line) !important;
}
.svc-active-title { letter-spacing: -.015em; }
.svc-topbar {
  background: var(--sc-bg2) !important;
  border-bottom: 1px solid var(--svcx-line) !important;
}
/* Toolbar buttons follow the console's control language. */
.svc-active-actions .svc-btn {
  background: var(--sc-panel2) !important;
  border: 1px solid var(--sc-elev) !important;
  color: var(--sc-text-bright) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease !important;
}
.svc-active-actions .svc-btn:hover {
  background: var(--sc-panel3) !important;
  border-color: var(--sc-elev2) !important;
  color: var(--sc-text-strong2) !important;
}
/* The two semantic actions keep their meaning: Save = commit, Refresh = re-read. */
.svc-active-actions .svc-save-btn {
  background: rgba(34, 197, 94, .12) !important;
  border-color: rgba(34, 197, 94, .30) !important;
  color: #22C55E !important;
}
.svc-active-actions .svc-save-btn:hover {
  background: rgba(34, 197, 94, .18) !important;
  border-color: rgba(34, 197, 94, .48) !important;
  color: #4ADE80 !important;
}
.svc-active-actions .svc-refresh-btn {
  background: rgba(250, 204, 21, .08) !important;
  border-color: rgba(250, 204, 21, .34) !important;
  color: #FACC15 !important;
}
.svc-active-actions .svc-refresh-btn:hover {
  background: rgba(250, 204, 21, .14) !important;
  border-color: rgba(250, 204, 21, .55) !important;
  color: #FDE047 !important;
}
.svc-search-all-input {
  background: var(--sc-panel2) !important;
  border: 1px solid var(--sc-elev) !important;
  border-radius: 8px !important;
  color: var(--sc-text-strong2) !important;
}
.svc-search-all-input::placeholder { color: var(--sc-text-dimmer) !important; }
.svc-search-all-input:focus { border-color: var(--sc-elev2) !important; background: var(--sc-panel3) !important; }

/* ── Right dashboard rail — same shell language ─────────────────────────── */
.svc-right {
  background: var(--sc-bg2) !important;
  border-left: 1px solid var(--svcx-line) !important;
}
.svc-widget {
  background: var(--sc-panel) !important;
  border: 1px solid var(--sc-panel3) !important;
  border-radius: var(--svcx-radius) !important;
}

/* Light mode: the grid inverts through the ramp, so only the two literal
   accent bands need restating. */
:root[data-svc-theme="light"] .svc-active-actions .svc-save-btn {
  background: #ECFDF5 !important; border-color: rgba(4, 120, 87, .34) !important; color: #047857 !important;
}
:root[data-svc-theme="light"] .svc-active-actions .svc-save-btn:hover { background: #D1FAE5 !important; color: #065F46 !important; }
:root[data-svc-theme="light"] .svc-active-actions .svc-refresh-btn {
  background: #FFFAEB !important; border-color: rgba(181, 71, 8, .34) !important; color: #B45309 !important;
}
:root[data-svc-theme="light"] .svc-active-actions .svc-refresh-btn:hover { background: #FEF0C7 !important; color: #92400E !important; }
:root[data-svc-theme="light"] .svc-grid tbody td:focus-within { box-shadow: inset 0 0 0 1.5px var(--svcx-gold) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   10 · QB SYNC REPORT MODAL
   ══════════════════════════════════════════════════════════════════════════ */
.svc-sync-overlay {
  position: fixed; inset: 0;
  z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 23, .62);
  backdrop-filter: blur(3px);
}
.svc-sync-panel {
  width: min(560px, 92vw);
  max-height: 82vh;
  overflow: auto;
  border: 1px solid var(--sc-border2, #263449);
  border-radius: 12px;
  background: var(--sc-panel, #0f172a);
  color: var(--sc-text, #cbd5e1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
  padding: 16px 18px 18px;
}
.svc-sync-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.svc-sync-title  { font-size: 14px; font-weight: 800; color: var(--sc-text-strong2, #f1f5f9); }
.svc-sync-close  {
  border: none; background: transparent; color: inherit;
  font-size: 14px; cursor: pointer; opacity: .7; padding: 4px 6px;
}
.svc-sync-close:hover { opacity: 1; }

.svc-sync-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.svc-sync-tile {
  border: 1px solid var(--sc-border2, #263449);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--sc-panel2, #0b1220);
}
.svc-sync-tile-num   { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.svc-sync-tile-label { font-size: 10.5px; opacity: .75; margin-top: 2px; }
.svc-sync-tile.t-updated  .svc-sync-tile-num { color: #34d399; }
.svc-sync-tile.t-unchanged .svc-sync-tile-num { color: #94a3b8; }
.svc-sync-tile.t-missing  .svc-sync-tile-num { color: #fbbf24; }

.svc-sync-sub { font-size: 11.5px; opacity: .85; margin: 4px 0 8px; }
.svc-sync-allgood { color: #34d399; font-weight: 600; }
.svc-sync-list {
  display: flex; flex-wrap: wrap; gap: 5px;
  max-height: 200px; overflow: auto;
  padding: 8px;
  border: 1px dashed var(--sc-border2, #263449);
  border-radius: 8px;
  margin-bottom: 10px;
}
.svc-sync-case {
  font: 600 11px/1.6 ui-monospace, monospace;
  padding: 1px 8px;
  border-radius: 6px;
  background: rgba(245, 158, 11, .12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, .3);
}
.svc-sync-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════════════════
   11 · EXPORT MENU
   ══════════════════════════════════════════════════════════════════════════ */
.svc-export-menu {
  position: fixed;
  z-index: 10040;
  min-width: 190px;
  border: 1px solid var(--sc-border2, #263449);
  border-radius: 10px;
  background: var(--sc-panel, #0f172a);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  padding: 5px;
}
.svc-export-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--sc-text, #cbd5e1);
  font-weight: 600; font-size: 12px; line-height: 2;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.svc-export-item:hover { background: var(--sc-panel2, #1e293b); }

:root[data-svc-theme="light"] .svc-sync-panel,
:root[data-svc-theme="light"] .svc-export-menu {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}
:root[data-svc-theme="light"] .svc-sync-title { color: #0f172a; }
:root[data-svc-theme="light"] .svc-sync-tile { background: #f8fafc; border-color: #e2e8f0; }
:root[data-svc-theme="light"] .svc-sync-tile.t-missing .svc-sync-tile-num { color: #b45309; }
:root[data-svc-theme="light"] .svc-sync-case { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
:root[data-svc-theme="light"] .svc-export-item { color: #334155; }
:root[data-svc-theme="light"] .svc-export-item:hover { background: #f1f5f9; }

/* ══════════════════════════════════════════════════════════════════════════
   12 · MOTION / DENSITY
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .svcx-rail-glide,
  .svcx-ring-fg,
  .svcx-vfill,
  .svcx-alert-chev { transition: none !important; }
  .svcx-odlist,
  .svcx-detail { animation: none !important; }
  .svcx-scope.is-scoped::before,
  .svcx-footdot { animation: none !important; }
}
/* Short viewports — the console must never push its own footer off-screen. */
@media (max-height: 760px) {
  .svcx-hero { padding: 11px; }
  .svcx-hero-num { font-size: 30px; }
  .svcx-hero-sub { margin-top: 8px; }
  .svcx-hero-foot { margin-top: 9px; padding-top: 9px; }
  .svcx-odlist { max-height: 132px; }
  .svcx-body { gap: 8px; padding-top: 9px; }
}
@media (max-height: 640px) {
  .svcx-hero-num { font-size: 26px; }
  .svcx-ring, .svcx-ring svg { width: 44px; height: 44px; }
  .svcx-head { padding-top: 11px; padding-bottom: 9px; }
  .svcx-footnote { display: none; }
}