/* ============================================================================
   services-enterprise.css — High-class UI polish for the Services Workspace
   ----------------------------------------------------------------------------
   @file    services-enterprise.css
   @module  MUMS / Services
   @loads   LAST — after services-theme.css (needs its --sc-* token ramp and
            must win the cascade to elevate the premium overlay).

   SCOPE (requested by MACE):
     1. Grid HEADER PANEL  → a genuine elevated "panel" (gradient band, accent
        hairline, depth shadow, refined type) with strong visibility in BOTH
        themes; and a permanent fix for the column FILTER INPUTS, which were
        painted a hard-coded dark navy inline (services-grid.js) and so never
        adapted to light mode.
     2. Left SHEETS SIDEBAR → premium CARD treatment for every sheet, a bold,
        unmistakable SELECTED state, and matching nested folder cards.

   HOW IT THEMES: every colour is a --sc-* token or a local --se-* token that
   flips under :root[data-svc-theme="light"] — so dark and light both look
   deliberate. Layout (sticky offsets, header height, widths) is never touched,
   only surfaces/borders/shadows/type. Additive: no guarded rule is edited.
   Design-token / elevation / state model per skills/development/design-system-starter.
   Blueprint: SERVICES_BLUEPRINT.md §2-K.
   ============================================================================ */

/* ── Local elevation + surface tokens (dark baseline) ─────────────────────── */
:root {
  --se-shadow-card:  0 1px 3px rgba(0,0,0,.32);
  --se-shadow-hover: 0 6px 18px -6px rgba(0,0,0,.55);
  --se-shadow-panel: 0 10px 22px -14px rgba(0,0,0,.7);
  --se-shadow-active: 0 3px 16px rgba(201,168,76,.20);

  /* header panel band */
  --se-head-top:  rgba(var(--sc-panel2-rgb), .98);
  --se-head-bot:  rgba(var(--sc-bg-rgb),     .98);
  --se-head-line: rgba(var(--sc-neutral-rgb), .20);

  /* filter inputs */
  --se-filter-bg:     rgba(var(--sc-bg-rgb), .55);
  --se-filter-border: rgba(var(--sc-neutral-rgb), .22);

  /* sidebar + sheet cards */
  --se-side-bg:    rgba(var(--sc-panel-rgb), .85);
  --se-card-bg:    rgba(var(--sc-panel2-rgb), .45);
  --se-card-line:  rgba(var(--sc-neutral-rgb), .12);
  --se-card-hover: rgba(var(--sc-panel2-rgb), .85);
}

/* ── Light theme re-point ─────────────────────────────────────────────────── */
:root[data-svc-theme="light"] {
  --se-shadow-card:  0 1px 2px rgba(40,52,74,.09);
  --se-shadow-hover: 0 8px 20px -8px rgba(40,52,74,.20);
  --se-shadow-panel: 0 10px 22px -14px rgba(40,52,74,.22);
  --se-shadow-active: 0 3px 14px rgba(201,168,76,.28);

  --se-head-top:  #ffffff;
  --se-head-bot:  #eaeef4;
  --se-head-line: rgba(100,116,139,.30);

  --se-filter-bg:     #ffffff;
  --se-filter-border: rgba(100,116,139,.32);

  --se-side-bg:    #eef1f6;   /* subtle canvas so white cards read as raised */
  --se-card-bg:    #ffffff;
  --se-card-line:  rgba(100,116,139,.16);
  --se-card-hover: #f4f6fb;
}

/* ══════════════════════════════════════════════════════════════════════════
   1 · GRID HEADER — HIGH-CLASS PANEL
   ══════════════════════════════════════════════════════════════════════════ */

/* Column header cells become a crisp gradient band with a firm baseline and a
   soft cast shadow so the whole header reads as one floating panel. Height is
   untouched (the filter row's sticky top:30px depends on it). */
.svc-grid thead th {
  background: linear-gradient(180deg, var(--se-head-top) 0%, var(--se-head-bot) 100%) !important;
  color: var(--sc-text-dim) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: .09em !important;
  border-right: 1px solid rgba(var(--sc-neutral-rgb), .10) !important;
  border-bottom: 1px solid var(--se-head-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
              inset 0 -1px 0 var(--se-head-line) !important;
}
/* Depth: a single soft shadow cast by the whole sticky header over the grid.
   Applied to the LAST header row's cells so it isn't doubled between rows. */
.svc-grid thead tr.filter-row th {
  background: linear-gradient(180deg, var(--se-head-bot), var(--se-head-bot)) !important;
  border-bottom: 1px solid var(--se-head-line) !important;
  box-shadow: 0 8px 14px -10px rgba(0,0,0,.5) !important;
}
:root[data-svc-theme="light"] .svc-grid thead tr.filter-row th {
  box-shadow: 0 8px 16px -12px rgba(40,52,74,.35) !important;
}
/* Premium hover / keyboard focus affordance on a sortable header */
.svc-grid thead th[data-key]:hover {
  color: var(--sc-text) !important;
  background: linear-gradient(180deg, var(--se-head-top), var(--se-head-top)) !important;
}

/* ── FILTER INPUTS — permanent fix + premium finish ──────────────────────────
   services-grid.js paints these inline (background:#020617; border:#334155),
   which overrides stylesheet colour in BOTH themes. A non-important inline
   declaration is beaten by an !important rule, so we reclaim them here — fully
   token-driven, adapts to light/dark, with a gold focus ring. */
.svc-grid .col-filter-input,
.col-filter-input {
  background: var(--se-filter-bg) !important;
  border: 1px solid var(--se-filter-border) !important;
  color: var(--sc-text) !important;
  border-radius: 6px !important;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
}
.col-filter-input::placeholder { color: var(--sc-text-faint) !important; font-style: italic; opacity: 1; }
.col-filter-input:hover { border-color: rgba(var(--sc-neutral-rgb), .42) !important; }
.col-filter-input:focus {
  background: var(--se-filter-bg) !important;
  border-color: var(--svc-accent) !important;
  color: var(--sc-text) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.20) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · SHEETS SIDEBAR — PREMIUM CARDS
   ══════════════════════════════════════════════════════════════════════════ */

/* Canvas: a hair darker/greyer than the cards so they float. */
.svc-left { background: var(--se-side-bg) !important; }

.svc-sheet-list { padding: 6px 10px 10px !important; }

/* Each sheet = a card: surface + hairline + micro-shadow, generous radius. */
.svc-sheet-item {
  background: var(--se-card-bg) !important;
  border: 1px solid var(--se-card-line) !important;
  border-radius: 11px !important;
  box-shadow: var(--se-shadow-card);
  padding: 10px 12px !important;
  margin-bottom: 6px !important;
  color: var(--sc-text-bright) !important;
  transition: transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s ease,
              background .14s ease, border-color .14s ease !important;
}
.svc-sheet-item:hover {
  background: var(--se-card-hover) !important;
  border-color: rgba(var(--sc-neutral-rgb), .22) !important;
  transform: translateY(-1px);
  box-shadow: var(--se-shadow-hover);
}

/* SELECTED — unmistakable: gold gradient wash, gold ring, glow, bold gold ink,
   and a luminous left accent rail. */
.svc-sheet-item.active {
  background: linear-gradient(135deg, rgba(201,168,76,.20) 0%, rgba(201,168,76,.055) 100%) !important;
  border-color: rgba(201,168,76,.55) !important;
  box-shadow: var(--se-shadow-active), inset 0 0 0 1px rgba(201,168,76,.10) !important;
  color: var(--sc-ink-gA) !important;
  transform: none;
}
.svc-sheet-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #E8C46A, #C9A84C);
  box-shadow: 0 0 10px rgba(201,168,76,.6);
}
.svc-sheet-item.active .title { font-weight: 700 !important; }

/* Icon becomes a tinted rounded chip so the row reads like a real card. */
.svc-sheet-item .icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(var(--sc-neutral-rgb), .12);
  color: var(--sc-text-dim) !important;
  font-size: 13px !important;
  transition: background .14s ease, color .14s ease;
}
.svc-sheet-item:hover .icon { background: rgba(var(--sc-neutral-rgb), .18); color: var(--sc-text) !important; }
.svc-sheet-item.active .icon {
  background: linear-gradient(135deg, rgba(232,196,106,.9), rgba(201,168,76,.9)) !important;
  color: #201704 !important;
  box-shadow: 0 2px 8px rgba(201,168,76,.4);
}

/* ── Nested folder rows (All Records / Completed) = quiet sub-cards ───────── */
.svc-tv-node {
  border-radius: 8px !important;
  margin: 3px 0 !important;
  transition: background .14s ease, color .14s ease, border-color .14s ease !important;
}
.svc-tv-node:hover { background: var(--se-card-hover) !important; }
.svc-tv-node.svc-tv-active {
  background: linear-gradient(90deg, rgba(201,168,76,.18) 0%, rgba(201,168,76,.03) 100%) !important;
  border-color: rgba(201,168,76,.32) !important;
  border-left: 2px solid var(--svc-accent) !important;
  color: var(--sc-ink-gA) !important;
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.07) !important;
}
.svc-tv-node.svc-tv-active .svc-tv-label { font-weight: 700; }

/* ── Section headers (PERSONAL / SHARED SHEETS) — refined label ───────────── */
.svc-tv-section-header {
  color: var(--sc-text-dimmer) !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
}

/* Count pills firmer on light so they don't wash out */
:root[data-svc-theme="light"] .svc-tv-count,
:root[data-svc-theme="light"] .svc-sheet-count {
  background: rgba(100,116,139,.12) !important;
  color: #566073 !important;
  border-color: rgba(100,116,139,.20) !important;
}
:root[data-svc-theme="light"] .svc-tv-node.svc-tv-active .svc-tv-count,
:root[data-svc-theme="light"] .svc-sheet-item.active .svc-tv-count {
  background: rgba(201,168,76,.16) !important;
  color: #806417 !important;
  border-color: rgba(201,168,76,.34) !important;
}

/* New-sheet button: keep the gold pill but lift it with the elevation system */
.svc-new-btn { box-shadow: var(--se-shadow-card) !important; }
.svc-new-btn:hover { box-shadow: var(--se-shadow-hover), 0 4px 12px rgba(201,168,76,.4) !important; }