/* =============================================================================
   iDOT PIM — design system (plain CSS so it works with the Tailwind Play CDN,
   which does NOT process @apply in external stylesheets). Class names are kept
   identical to the markup so existing views render unchanged, just modernised.

   THEMING: every component reads var() tokens. Light is the default :root set;
   [data-theme="dark"] re-points the SAME semantic names to dark values, so the
   whole app reskins by flipping one attribute on <html> (see public/js/theme.js
   + the no-FOUC boot script in views/partials/head.ejs). Raw hex appears ONLY
   inside the token blocks below — never inside a component rule.
   ========================================================================== */

:root {
  /* --- brand ramp (indigo; mirrors apps/workspace/src/ui/tokens.css) ------ */
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe; --brand-500:#6366f1;
  --brand-600:#4f46e5; --brand-700:#4338ca; --brand-900:#312e81;
  --brand:#4f46e5;                 /* semantic brand = brand-600 */

  /* --- ink (text) -------------------------------------------------------- */
  /* --faint darkened from #94a3b8 (2.56:1 on white — fails AA) to ~AA for the
     small informational text it backs (.kpi-sub, placeholders, .sb-tag). */
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --faint:#6b7a90;
  /* --hint = the EXACT old faint hue (#94a3b8). Light-pixel-identical to the
     pre-redesign hardcoded slate-400, so any site mistakenly repointed from a
     wrongly-darkened var(--faint) back to var(--hint) renders unchanged in
     light — yet --hint still flips in dark (unlike a raw hex). Use for
     decorative/very-low-emphasis marks that don't need AA body contrast. */
  --hint:#94a3b8;

  /* --- lines / dividers -------------------------------------------------- */
  --line:#e2e8f0; --line-2:#f1f5f9;

  /* --- surfaces ---------------------------------------------------------- */
  --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9;

  /* --- sidebar (dark in BOTH themes) ------------------------------------- */
  /* --sidebar-muted lightened from #94a3b8 to clear ~4.5:1 on the near-black
     sidebar for the small uppercase section labels (.sb-section, .sb-tag). */
  --sidebar-bg:#0f172a; --sidebar-fg:#f1f5f9; --sidebar-muted:#8294ab;
  --sidebar-active:#2563eb; --sidebar-active-fg:#ffffff;
  --sidebar-hover:#1e293b; --sidebar-line:#1e293b; --sidebar-w:15rem;

  /* --- semantic status PAIRS (fg + soft bg) ------------------------------ */
  --success:#047857; --success-bg:#d1fae5;
  --warn:#b45309;    --warn-bg:#fef3c7;
  --danger:#b91c1c;  --danger-bg:#fee2e2;
  --info:#1d4ed8;    --info-bg:#dbeafe;
  --neutral:#475569; --neutral-bg:#f1f5f9;

  /* --- type scale -------------------------------------------------------- */
  --fs-xs:.72rem; --fs-sm:.8rem; --fs-base:.9rem; --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem;

  /* --- spacing scale ----------------------------------------------------- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem;

  /* --- radii ------------------------------------------------------------- */
  --radius:.6rem; --radius-sm:.4rem; --radius-lg:.85rem;

  /* --- shadows (4 tiers) ------------------------------------------------- */
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:0 10px 30px rgba(15,23,42,.12);

  /* --- misc surfaces referenced by components ---------------------------- */
  --input-bg:#ffffff; --input-border:#cbd5e1; --input-border-hover:#94a3b8;
  --thead-bg:#f8fafc; --row-hover:#f8fafc; --backdrop:rgba(15,23,42,.45);
  --focus-ring:rgba(37,99,235,.15);
}

/* ---------------------------------------------------------------- DARK ----- */
/* Re-point the SAME semantic names. Deep-slate palette; sidebar one shade
   deeper than the light sidebar so it still reads as the darkest surface. */
[data-theme="dark"] {
  --ink:#e2e8f0; --ink-2:#cbd5e1; --muted:#94a3b8; --faint:#64748b;
  --hint:#8294ab;   /* legible low-emphasis hint on dark surfaces (#94a3b8 also reads fine) */
  --line:#1e293b; --line-2:#172033;
  --bg:#0b1220; --surface:#111827; --surface-2:#1e293b;

  --sidebar-bg:#020617; --sidebar-fg:#e2e8f0; --sidebar-muted:#64748b;
  --sidebar-active:#2563eb; --sidebar-active-fg:#ffffff;
  --sidebar-hover:#0f172a; --sidebar-line:#1e293b;

  --success:#34d399; --success-bg:#064e3b;
  --warn:#fbbf24;    --warn-bg:#451a03;
  --danger:#f87171;  --danger-bg:#450a0a;
  --info:#60a5fa;    --info-bg:#172554;
  --neutral:#cbd5e1; --neutral-bg:#1e293b;

  --input-bg:#0f172a; --input-border:#334155; --input-border-hover:#475569;
  --thead-bg:#0f172a; --row-hover:#172033; --backdrop:rgba(2,6,23,.6);
  --focus-ring:rgba(96,165,250,.25);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:0 10px 30px rgba(0,0,0,.6);
}

* { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html { scroll-behavior:smooth; }
/* Body now follows the tokens in BOTH themes (head.ejs dropped its bg/text
   utility classes). transition keeps the theme flip from being jarring. */
body { background:var(--bg); color:var(--ink); transition:background .2s ease, color .2s ease; }

/* Accessible focus ring everywhere (keyboard users) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline:2px solid var(--brand-600); outline-offset:2px; border-radius:3px;
}

/* ---------------------------------------------------------------- Layout --- */
.main-content { margin-left:var(--sidebar-w); min-height:100vh; transition:margin-left .2s ease; }

/* Off-canvas sidebar on tablet/mobile, fixed rail on desktop */
.app-sidebar { will-change:transform; z-index:50; transition:transform .22s cubic-bezier(.4,0,.2,1);
               background:var(--sidebar-bg); color:var(--sidebar-fg);
               width:var(--sidebar-w); position:fixed; top:0; bottom:0; left:0;
               display:flex; flex-direction:column; }
.sidebar-backdrop { display:none; }
.nav-hamburger { display:none; }

@media (max-width:1023px) {
  .main-content { margin-left:0; }
  .app-sidebar { transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  body.sidebar-open .app-sidebar { transform:translateX(0); }
  body.sidebar-open .sidebar-backdrop {
    display:block; position:fixed; inset:0; background:var(--backdrop);
    backdrop-filter:blur(1px); z-index:40; animation:fade .15s ease;
  }
  .nav-hamburger { display:inline-flex; }
  body.sidebar-open { overflow:hidden; }
}
@keyframes fade { from{opacity:0} to{opacity:1} }

/* --------------------------------------------------------- Sidebar (nav) --- */
/* Token-driven sidebar chrome. nav.ejs uses these classes so it themes; it
   stays dark in BOTH light & dark mode (sidebar tokens are dark either way). */
.app-sidebar a { text-decoration:none; }
.sb-brand { padding:1.25rem 1.25rem; border-bottom:1px solid var(--sidebar-line); }
.sb-brand .sb-logo { width:2rem; height:2rem; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  display:grid; place-items:center; font-weight:700; color:#fff; }
.sb-brand .sb-name { font-weight:600; color:var(--sidebar-fg); line-height:1.15; }
.sb-brand .sb-tag { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--sidebar-muted); }
.sb-nav { flex:1 1 auto; padding:.75rem; overflow-y:auto; }
.sb-section { padding:.6rem .75rem .25rem; font-size:10px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--sidebar-muted); }
.sb-item { display:flex; align-items:center; gap:.55rem; padding:.5rem .75rem;
  border-radius:var(--radius-sm); color:var(--sidebar-fg); font-size:.875rem;
  transition:background .12s, color .12s; }
.sb-item:hover { background:var(--sidebar-hover); }
.sb-item.active { background:var(--sidebar-active); color:var(--sidebar-active-fg); }
.sb-item .sb-ico { width:1.25rem; text-align:center; opacity:.95; }
.sb-foot { border-top:1px solid var(--sidebar-line); padding:.75rem; }
.sb-avatar { width:2.25rem; height:2.25rem; border-radius:999px; background:var(--brand-600);
  display:grid; place-items:center; font-size:.7rem; font-weight:700; color:#fff; }
.sb-foot .sb-uname { font-size:.875rem; color:var(--sidebar-fg); }
.sb-foot .sb-urole { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--sidebar-muted); }
.sb-signout { color:var(--sidebar-muted); font-size:.75rem; background:none; border:none; cursor:pointer; }
.sb-signout:hover { color:var(--sidebar-fg); }

/* ------------------------------------------------------------- Topbar ------ */
.topbar { background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30; }
.topbar-inner { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; }
@media (min-width:640px){ .topbar-inner { padding:.75rem 1.5rem; } }
.topbar h1 { font-size:1rem; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (min-width:640px){ .topbar h1 { font-size:1.125rem; } }
.topbar .top-sub { font-size:.72rem; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:var(--radius-sm); color:var(--muted);
  background:none; border:none; cursor:pointer; transition:background .12s, color .12s; }
.icon-btn:hover { background:var(--surface-2); color:var(--ink); }
.top-search { padding:.4rem .75rem; border:1px solid var(--input-border);
  border-radius:var(--radius-sm); font-size:.875rem; background:var(--input-bg);
  color:var(--ink); width:14rem; transition:border-color .15s, box-shadow .15s; }
@media (min-width:1024px){ .top-search { width:16rem; } }
.top-search::placeholder { color:var(--faint); }
.top-search:focus { outline:none; border-color:var(--brand-600); box-shadow:0 0 0 3px var(--focus-ring); }
.top-bell { position:relative; }
.top-bell-badge { position:absolute; top:-.35rem; right:-.5rem; background:var(--danger);
  color:#fff; font-size:10px; line-height:1; font-weight:600; padding:.15rem .35rem; border-radius:999px; }

/* --------------------------------------------------------------- Cards ----- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
        box-shadow:var(--shadow-sm); }
.card-body { padding:1.25rem; }
.card-header { padding:.85rem 1.25rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.5rem; }
.card-header h3 { font-weight:600; color:var(--ink); }
.section { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
           box-shadow:var(--shadow-sm); padding:1.25rem; margin-bottom:1.25rem; }
.section h3 { font-size:.78rem; font-weight:700; color:var(--ink-2); text-transform:uppercase;
              letter-spacing:.05em; margin-bottom:1rem; }

/* ----------------------------------------------------- Surface helpers ----- */
.surface   { background:var(--surface);   color:var(--ink); }
.surface-2 { background:var(--surface-2); color:var(--ink); }
.muted     { color:var(--muted); }
.divider   { height:1px; background:var(--line); border:0; margin:1rem 0; }

/* --------------------------------------------------------------- Buttons --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
       padding:.55rem 1rem; border-radius:var(--radius-sm); font-weight:550; font-size:.875rem;
       line-height:1.1; transition:background .15s, box-shadow .15s, transform .05s, color .15s;
       cursor:pointer; border:1px solid transparent; text-decoration:none; white-space:nowrap; }
.btn:active { transform:translateY(.5px); }
.btn:disabled, .btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn-sm { padding:.35rem .65rem; font-size:.8rem; }
.btn-primary { background:var(--brand-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--brand-700); }
.btn-secondary { background:var(--surface-2); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover { background:var(--line); }
.btn-success { background:var(--success); color:#fff; } .btn-success:hover { filter:brightness(.92); }
.btn-danger  { background:var(--danger);  color:#fff; } .btn-danger:hover  { filter:brightness(.92); }
.btn-warn    { background:var(--warn);    color:#fff; } .btn-warn:hover    { filter:brightness(.92); }
.btn-ghost   { color:var(--ink-2); } .btn-ghost:hover { background:var(--surface-2); }
.btn-default { background:var(--surface); color:var(--ink-2); border-color:var(--line); }
.btn-default:hover { background:var(--surface-2); }

/* ---------------------------------------------------------------- Chips ---- */
.chip { display:inline-flex; align-items:center; padding:.18rem .6rem; border-radius:999px;
        font-size:.7rem; font-weight:650; letter-spacing:.02em; white-space:nowrap; }

/* --------------------------------------------------------------- Badges ---- */
/* Semantic status badge (NEW). Use .badge + a modifier; reads the status PAIRS
   so it auto-themes. Existing .chip remains for the old utility-coloured pills. */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .55rem;
  border-radius:999px; font-size:.7rem; font-weight:650; letter-spacing:.02em;
  white-space:nowrap; background:var(--neutral-bg); color:var(--neutral); }
.badge-success { background:var(--success-bg); color:var(--success); }
.badge-warn    { background:var(--warn-bg);    color:var(--warn); }
.badge-danger  { background:var(--danger-bg);  color:var(--danger); }
.badge-info    { background:var(--info-bg);    color:var(--info); }
.badge-neutral { background:var(--neutral-bg); color:var(--neutral); }

/* ----------------------------------------------------------------- KPIs ---- */
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:1rem 1.15rem; }
.kpi-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:650; }
.kpi-value { font-size:1.6rem; font-weight:800; color:var(--ink); line-height:1.1; margin-top:.25rem; }
.kpi-sub { font-size:.72rem; color:var(--faint); margin-top:.3rem; }
.kpi-accent-brand   { border-top:3px solid var(--brand-600); }
.kpi-accent-success { border-top:3px solid var(--success); }
.kpi-accent-warn    { border-top:3px solid var(--warn); }
.kpi-accent-danger  { border-top:3px solid var(--danger); }

/* ----------------------------------------------------------------- Tabs ---- */
.tabs { display:flex; gap:.5rem; border-bottom:2px solid var(--line); margin-bottom:1.25rem; }
.tab { position:relative; bottom:-2px; display:inline-flex; align-items:center; gap:.5rem;
  padding:.625rem 1.125rem; font-size:.875rem; font-weight:600; color:var(--muted);
  text-decoration:none; border-bottom:2px solid transparent;
  transition:color .12s, border-color .12s; cursor:pointer; }
.tab:hover { color:var(--brand-700); }
.tab.active { color:var(--brand-700); border-bottom-color:var(--brand-700); }

/* --------------------------------------------------------------- Forms ----- */
label.field { display:block; margin-bottom:1rem; }
label.field > span.label { display:block; font-size:.75rem; font-weight:650; text-transform:uppercase;
                            letter-spacing:.04em; color:var(--ink-2); margin-bottom:.3rem; }
label.field > span.label .req { color:var(--danger); margin-left:.2rem; }
input.input, select.input, textarea.input {
  width:100%; padding:.55rem .75rem; border:1px solid var(--input-border); border-radius:var(--radius-sm);
  background:var(--input-bg); font-size:.9rem; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
input.input:hover, select.input:hover, textarea.input:hover { border-color:var(--input-border-hover); }
input.input:focus, select.input:focus, textarea.input:focus {
  outline:none; border-color:var(--brand-600); box-shadow:0 0 0 3px var(--focus-ring);
}
input.input::placeholder, textarea.input::placeholder { color:var(--faint); }

/* Read-only form layout: 2 / 3-column field grids that stack on mobile. */
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.field-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
@media (max-width:768px){ .field-grid, .field-grid-3 { grid-template-columns:1fr; } }

/* ------------------------------------------------------ Key/value & stats -- */
.kv { display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; font-size:.85rem; }
.kv dt { color:var(--muted); }
.kv dd { color:var(--ink); margin:0; }
.stat-row { display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--line-2); }
.stat-row:last-child { border-bottom:0; }
.stat-row .sr-key { color:var(--muted); font-size:.8rem; }
.stat-row .sr-val { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------- Tables ---- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); }
table.data { width:100%; border-collapse:collapse; font-size:.875rem; }
table.data thead th { background:var(--thead-bg); text-align:left; padding:.6rem .8rem; font-size:.7rem;
                      text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:650;
                      border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1; }
table.data tbody td { padding:.7rem .8rem; border-bottom:1px solid var(--line-2); vertical-align:middle; color:var(--ink); }
table.data tbody tr { transition:background .12s; }
table.data tbody tr:hover { background:var(--row-hover); }
table.data tbody tr:last-child td { border-bottom:none; }

/* ------------------------------------------------------------ Pagination --- */
.pagination { display:flex; align-items:center; justify-content:space-between; gap:1rem;
              flex-wrap:wrap; padding:.85rem 1.1rem; border-top:1px solid var(--line); font-size:.8rem; color:var(--muted); }
.pagination .pg-info { font-variant-numeric:tabular-nums; }
.pagination .pg-controls { display:flex; align-items:center; gap:.4rem; }
.pagination a, .pagination span.pg-cur {
  display:inline-flex; align-items:center; min-width:2rem; height:2rem; padding:0 .6rem;
  justify-content:center; border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink-2); text-decoration:none; background:var(--surface); transition:background .12s, border-color .12s; }
.pagination a:hover { background:var(--surface-2); border-color:var(--input-border); }
.pagination span.pg-cur { background:var(--brand-600); border-color:var(--brand-600); color:#fff; font-weight:650; }
.pagination .pg-disabled { opacity:.4; pointer-events:none; }

/* ------------------------------------------------------- Dropdown menu ----- */
/* NEW reusable menu (e.g. maintenance dropdown). Toggle .open on the wrapper. */
.dropdown-menu { position:absolute; z-index:60; min-width:12rem; padding:.35rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); }
.dropdown-item { display:flex; align-items:center; gap:.5rem; padding:.5rem .65rem;
  border-radius:var(--radius-sm); font-size:.85rem; color:var(--ink); text-decoration:none; cursor:pointer; }
.dropdown-item:hover { background:var(--surface-2); }
.dropdown-item.danger { color:var(--danger); }

/* --------------------------------------------------------------- Modal ----- */
/* NEW. .modal is the fixed centring layer; toggle .open to show. */
.modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center;
  justify-content:center; padding:1rem; }
.modal.open { display:flex; }
.modal-backdrop { position:fixed; inset:0; background:var(--backdrop); backdrop-filter:blur(2px); }
.modal-card { position:relative; z-index:1; width:100%; max-width:32rem; max-height:90vh; overflow:auto;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:1.5rem;
  animation:modal-in .16s ease; }
@keyframes modal-in { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* --------------------------------------------------------------- Toast ----- */
/* NEW. Fixed bottom-right. Add .show to reveal, remove it to hide (CSS handles
   the transition). Default hidden + non-interactive until shown. */
.toast { position:fixed; right:1.25rem; bottom:1.25rem; z-index:1100; max-width:22rem;
  display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem;
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-left:3px solid var(--neutral); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); font-size:.85rem;
  opacity:0; transform:translateY(.5rem); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; }
.toast.show { opacity:1; transform:none; pointer-events:auto; }
.toast-success { border-left-color:var(--success); }
.toast-success .toast-ico { color:var(--success); }
.toast-error { border-left-color:var(--danger); }
.toast-error .toast-ico { color:var(--danger); }

/* ------------------------------------------------------- Grid helpers ------ */
/* 12-col span helpers that collapse to full width on mobile. Use inside a
   `display:grid; grid-template-columns:repeat(12,minmax(0,1fr))` container. */
.span-4  { grid-column:span 4; } .span-6 { grid-column:span 6; }
.span-8  { grid-column:span 8; } .span-12 { grid-column:span 12; }
@media (max-width:768px){
  .span-4, .span-6, .span-8, .span-12 { grid-column:1 / -1; }
}

/* -------------------------------------------------------------- Timeline --- */
.timeline { position:relative; padding-left:1.5rem; }
.timeline::before { content:''; position:absolute; left:.4rem; top:0; bottom:0; width:2px; background:var(--line); }
.timeline-item { position:relative; padding-bottom:1.25rem; }
.timeline-item::before { content:''; position:absolute; left:-1.2rem; top:.25rem; width:.7rem; height:.7rem;
                         border-radius:999px; background:var(--brand-500); box-shadow:0 0 0 3px rgba(59,130,246,.2); }
.timeline-item.done::before   { background:var(--success); box-shadow:0 0 0 3px var(--success-bg); }
.timeline-item.reject::before { background:var(--danger);  box-shadow:0 0 0 3px var(--danger-bg); }

/* ------------------------------------------------------- Misc / a11y ------- */
.skeleton { background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 37%,var(--surface-2) 63%); background-size:400% 100%;
            animation:shimmer 1.4s ease infinite; border-radius:var(--radius-sm); }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html { scroll-behavior:auto !important; } /* reset the html{scroll-behavior:smooth} above */
}

/* =============================================================================
   TAILWIND-UTILITY DARK BRIDGE
   -----------------------------------------------------------------------------
   ~30 legacy pages are still styled with baked Tailwind color UTILITIES
   (bg-white, text-slate-500, border-gray-200, bg-emerald-100 …) instead of the
   token-driven component classes. Those utilities hardcode a LIGHT palette, so
   on those pages dark mode would render white-on-white.

   This block remaps ONLY the neutral + status color utilities the app actually
   uses (enumerated by grepping views/**/*.ejs) onto the semantic tokens — so
   those pages become dark-correct without editing each one.

   SCOPED ENTIRELY UNDER [data-theme="dark"]: in light mode none of these rules
   match, the !important never applies, and the pages stay PIXEL-IDENTICAL.
   Brand utilities (bg-brand-*, text-brand-*) and solid action buttons
   (bg-blue-600/700, bg-red-600, bg-green-600 …) are intentionally left alone —
   they are accents that already read on both themes. text-white is NOT
   remapped (it sits on those colored buttons and must stay white).
   ========================================================================== */

/* --- surfaces: white / slate-50·100 / gray-50·100·200 → token surfaces ----- */
[data-theme="dark"] .bg-white   { background-color:var(--surface)   !important; }
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 { background-color:var(--surface-2) !important; }
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-slate-400 { background-color:var(--line)     !important; }

/* dark hero gradient stops (from-slate-900 via-slate-800) — keep them the
   darkest surfaces so the gradient still reads in dark mode */
[data-theme="dark"] .from-slate-900 { --tw-gradient-from:var(--sidebar-bg) !important; }
[data-theme="dark"] .via-slate-800  { --tw-gradient-via:var(--surface-2)   !important; }

/* --- ink (text) ------------------------------------------------------------ */
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-gray-900 { color:var(--ink)   !important; }
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 { color:var(--ink-2) !important; }
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 { color:var(--muted) !important; }
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-gray-400 { color:var(--faint) !important; }

/* --- borders / dividers ---------------------------------------------------- */
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300,
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 { border-color:var(--line) !important; }
[data-theme="dark"] .divide-gray-100 > * + *,
[data-theme="dark"] .divide-gray-200 > * + * { border-color:var(--line) !important; }

/* --- status chips: soft bg + paired fg → matching status token pair -------- */
/* success: emerald + green */
[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .bg-emerald-100,
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100   { background-color:var(--success-bg) !important; }
[data-theme="dark"] .text-emerald-900,
[data-theme="dark"] .text-emerald-800,
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-600,
[data-theme="dark"] .text-green-900,
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-700 { color:var(--success) !important; }
[data-theme="dark"] .border-emerald-200,
[data-theme="dark"] .border-green-200 { border-color:color-mix(in srgb, var(--success) 38%, var(--line)) !important; }

/* warn: amber + orange */
[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] .bg-amber-100,
[data-theme="dark"] .bg-orange-100  { background-color:var(--warn-bg) !important; }
[data-theme="dark"] .text-amber-900,
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-600,
[data-theme="dark"] .text-orange-700 { color:var(--warn) !important; }
[data-theme="dark"] .border-amber-100,
[data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-amber-300 { border-color:color-mix(in srgb, var(--warn) 38%, var(--line)) !important; }

/* danger: red (rose maps here too if introduced) */
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .bg-red-100,
[data-theme="dark"] .bg-red-200     { background-color:var(--danger-bg) !important; }
[data-theme="dark"] .text-red-900,
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-600   { color:var(--danger) !important; }
[data-theme="dark"] .border-red-200 { border-color:color-mix(in srgb, var(--danger) 38%, var(--line)) !important; }

/* info: blue (+ violet accent chip) */
[data-theme="dark"] .bg-blue-50,
[data-theme="dark"] .bg-blue-100    { background-color:var(--info-bg) !important; }
[data-theme="dark"] .text-blue-900,
[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-600  { color:var(--info) !important; }
[data-theme="dark"] .border-blue-200 { border-color:color-mix(in srgb, var(--info) 38%, var(--line)) !important; }

/* --- neutral hover variants: don't flash light-gray while hovered in dark ----
   Tailwind compiles hover:bg-* to escaped classes (.hover\:bg-gray-50:hover) that
   the bare .bg-gray-50 surface rules above don't cover. Remap only the neutral
   gray/slate hover backgrounds to the dark row-hover token; colored-action hovers
   (hover:bg-blue-700 / green-700 / red-700 / emerald-100 / amber-100 …) are left
   alone — they are accents that already read on dark. Dark-scoped → light is
   unaffected. The backslash before the colon is required in the selector. */
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-slate-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover,
[data-theme="dark"] .hover\:bg-slate-100:hover { background-color:var(--row-hover) !important; }

/* ---- Impersonation / test-mode banner (Governance R4) ---------------------
   Token-driven so it is legible in both themes. The exit button's text colour is
   --warn-bg (the PAIR of --warn), which is the opposite end of the ramp in each
   theme, so it always contrasts the --warn background. */
.imp-banner { display:flex; align-items:center; gap:10px; background:var(--warn-bg); color:var(--warn); border-bottom:1px solid var(--warn); padding:8px 16px; font-size:.82rem; font-weight:600; position:sticky; top:0; z-index:55; }
.imp-banner .imp-dot { color:var(--warn); font-size:.7rem; line-height:1; animation:imp-pulse 1.6s ease-in-out infinite; }
.imp-banner .imp-msg { flex:1; min-width:0; }
.imp-banner .imp-msg strong { font-weight:800; }
.imp-banner .imp-exit-form { margin:0; flex:none; }
.imp-banner .imp-exit { background:var(--warn); color:var(--warn-bg); border:none; border-radius:6px; padding:5px 13px; font-size:.78rem; font-weight:700; cursor:pointer; }
.imp-banner .imp-exit:hover { filter:brightness(1.08); }
@keyframes imp-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* ---- Live conformance checklist (field-validate.js) -----------------------
   Compact panel injected at the top of master-data create forms. Token-driven
   for light/dark. --brand for progress, --warn for the invalid marker. */
.fv-checklist { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 18px; }
.fv-checklist .fvc-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fv-checklist .fvc-title { font-size:.86rem; color:var(--ink-2); font-weight:600; flex:1; min-width:0; }
.fv-checklist .fvc-title strong { color:var(--ink); font-weight:800; }
.fv-checklist .fvc-ok { color:var(--success); font-weight:800; }
.fv-checklist .fvc-toggle { background:none; border:1px solid var(--line-2,var(--line)); color:var(--brand-600); font-size:.74rem; font-weight:700; border-radius:6px; padding:3px 9px; cursor:pointer; flex:none; }
.fv-checklist .fvc-toggle:hover { background:var(--surface); }
.fv-checklist .fvc-bar { height:6px; background:var(--surface); border:1px solid var(--line); border-radius:9999px; overflow:hidden; margin-top:8px; }
.fv-checklist .fvc-bar-fill { height:100%; background:var(--brand-600); border-radius:9999px; transition:width .25s ease; }
.fv-checklist .fvc-bar-fill.done { background:var(--success); }
.fv-checklist .fvc-list { list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:4px; }
.fv-checklist .fvc-item { display:flex; align-items:center; gap:7px; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:6px; font-size:.8rem; color:var(--ink-2); }
.fv-checklist .fvc-item:hover { background:var(--surface); color:var(--ink); }
.fv-checklist .fvc-ic { width:14px; height:14px; border-radius:9999px; flex:none; display:grid; place-items:center; font-size:.62rem; font-weight:800; line-height:1; }
.fv-checklist .fvc-o { border:1.5px solid var(--muted); }
.fv-checklist .fvc-x { background:var(--warn); color:var(--warn-bg); }
.fv-checklist .fvc-lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fv-checklist .fvc-note { font-size:.68rem; color:var(--warn); font-weight:700; flex:none; }

/* ---- Request templates bar (public/js/templates.js) -----------------------
   Injected at the top of create forms carrying data-template-scope. Tokenized. */
.tpl-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin:0 0 16px; }
.tpl-bar .tpl-label { font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.tpl-bar .tpl-select { max-width:260px; font-size:.82rem; }
.tpl-bar .tpl-name { max-width:200px; font-size:.82rem; margin-left:auto; }
.tpl-bar .btn { padding:.4rem .7rem; font-size:.8rem; }

/* ---- Workspace copilot slide-over (apps/workspace shell/CopilotPanel) ------
   A floating launcher bottom-right on every /app screen + a right-side drawer.
   Tokenized so it tracks light/dark. */
.copilot-fab { position:fixed; right:1.25rem; bottom:1.25rem; z-index:1090;
  width:3rem; height:3rem; border-radius:9999px; border:1px solid var(--line);
  background:var(--brand-600); color:#fff; font-size:1.15rem; cursor:pointer;
  box-shadow:var(--shadow-lg); display:grid; place-items:center;
  transition:transform .12s ease, background .15s ease; }
.copilot-fab:hover { transform:translateY(-1px); background:var(--brand-700, var(--brand-600)); }
.copilot-overlay { position:fixed; inset:0; z-index:1095; }
.copilot-backdrop { position:absolute; inset:0; background:var(--backdrop); backdrop-filter:blur(2px); }
.copilot-drawer { position:absolute; top:0; right:0; height:100%; width:min(26rem, 100vw);
  display:flex; flex-direction:column; background:var(--surface); color:var(--ink);
  border-left:1px solid var(--line); box-shadow:var(--shadow-lg);
  animation:copilot-in .18s ease; }
@keyframes copilot-in { from{transform:translateX(16px); opacity:.7} to{transform:none; opacity:1} }
.copilot-head { display:flex; align-items:center; gap:.5rem; padding:.85rem 1rem;
  border-bottom:1px solid var(--line); }
.copilot-head > .min-w-0 { flex:1; min-width:0; }
.copilot-body { flex:1; min-height:0; overflow-y:auto; padding:1rem; }
.copilot-foot { border-top:1px solid var(--line); padding:.75rem 1rem; display:flex;
  flex-direction:column; gap:.5rem; background:var(--surface); }

/* ---- AI degradation banner (apps/workspace shell/AiDegradedBanner) ---------
   Spans the top of the main content when AI features are degraded (over budget
   or breaker open). Advisory: the core workflow keeps working regardless. */
.ai-banner { display:flex; align-items:flex-start; gap:.6rem; padding:.6rem .9rem;
  background:var(--warn-bg, #fef3c7); color:var(--warn, #92400e);
  border-bottom:1px solid var(--line); font-size:.82rem; }
.ai-banner .ai-banner-ic { flex:none; font-weight:800; }
.ai-banner .ai-banner-msg { flex:1; min-width:0; }
.ai-banner a { text-decoration:underline; text-underline-offset:2px; }