/* ============================================================
   TRINITY — Enterprise UI System  (Phase 43C)
   Additive layer loaded AFTER design-tokens.css in both shells.
   Goal: Linear / Stripe / Salesforce-Health-Cloud-grade surfaces
   without rewriting the two single-file shells.

   It does three things:
     1. Adds design tokens that were missing (elevation, modal
        widths, field sizing, spacing + type scale).
     2. Defines components that the shells already USE but never
        styled (.modal-head/.modal-body/.modal-foot/.modal-close).
     3. Upgrades existing components (.modal, .form-input,
        .form-label, footers) in a theme-safe, additive way.

   Theme-safety: light-mode overrides in design-tokens.css use
   !important for modal bg/border, so nothing here can break light
   mode. Everything below is token-driven and adapts to both themes.
   ============================================================ */

:root {
  /* ── Elevation scale ─────────────────────────────────────── */
  --elev-1: 0 1px 2px rgba(2, 6, 23, .25);
  --elev-2: 0 2px 6px rgba(2, 6, 23, .30), 0 1px 2px rgba(2, 6, 23, .20);
  --elev-3: 0 8px 24px rgba(2, 6, 23, .42), 0 2px 6px rgba(2, 6, 23, .28);
  --elev-4: 0 24px 64px rgba(2, 6, 23, .55), 0 8px 20px rgba(2, 6, 23, .35);

  /* ── Modal width scale ───────────────────────────────────── */
  --modal-w-sm:   400px;
  --modal-w-md:   560px;
  --modal-w-lg:   720px;
  --modal-w-xl:   920px;

  /* ── Field sizing ────────────────────────────────────────── */
  --field-h:        38px;
  --field-radius:   8px;
  --field-pad-x:    12px;
  --field-font:     13px;
  --field-ring:     0 0 0 3px rgba(37, 99, 235, .28);
  --field-ring-err: 0 0 0 3px rgba(239, 68, 68, .26);

  /* ── Surface radii (enterprise-soft) ─────────────────────── */
  --radius-modal:  16px;
  --radius-field:  8px;
  --radius-pill:   999px;

  /* ── 8pt spacing scale ───────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── Type scale (single source of truth) ─────────────────── */
  --t-display:       28px;
  --t-page-title:    20px;
  --t-section-title: 15px;
  --t-card-title:    13px;
  --t-body:          13px;
  --t-label:         12px;
  --t-helper:        11.5px;
  --lh-tight:  1.25;
  --lh-body:   1.5;

  /* ── Phase 51A Section B — ONE source of truth ───────────────
     Collapse the legacy duplicate scales (design-tokens.css) onto the
     canonical ones above. Values are IDENTICAL to before, so this is a
     pure de-duplication with zero visual change; future scale edits now
     propagate from a single place. New code should use the canonical
     names (--t-*, --radius-*, --elev-*, --z-*). See
     docs/design/phase-51a-design-standard.md. */
  --font-table: var(--t-body);     /* was 13px   */
  --font-pill:  var(--t-helper);   /* was 11.5px */
  --font-sub:   var(--t-label);    /* was 12px   */
  --font-small: var(--t-helper);   /* was 11.5px */

  /* z-index scale (was scattered magic numbers: dropdown 500, drawer
     520/540, backdrop 600, toast 700, hipaa 9000). Canonical for new code. */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 500;
  --z-drawer:   540;
  --z-backdrop: 600;
  --z-modal:    650;
  --z-toast:    700;
  --z-hipaa:    9000;
}

/* ============================================================
   TYPOGRAPHY  (Part G) — utilities; opt-in, no global reflow
   ============================================================ */
.t-display       { font-size: var(--t-display);       font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.01em; color: var(--text-primary); }
.t-page-title    { font-size: var(--t-page-title);    font-weight: 650; line-height: var(--lh-tight); letter-spacing: -.005em; color: var(--text-primary); }
.t-section-title { font-size: var(--t-section-title); font-weight: 600; line-height: var(--lh-tight); color: var(--text-primary); }
.t-card-title    { font-size: var(--t-card-title);    font-weight: 600; line-height: var(--lh-tight); color: var(--text-primary); }
.t-body          { font-size: var(--t-body);          font-weight: 400; line-height: var(--lh-body);  color: var(--text-body); }
.t-label         { font-size: var(--t-label);         font-weight: 600; line-height: var(--lh-tight); color: var(--text-body); letter-spacing: .005em; }
.t-helper        { font-size: var(--t-helper);        font-weight: 400; line-height: var(--lh-body);  color: var(--text-muted); }
.t-eyebrow       { font-size: 10.5px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* ============================================================
   MODAL SYSTEM  (Part B) — sizing, layered surface, sticky
   header + footer, scrollable body, mobile sheet.
   ============================================================ */

/* Richer backdrop: dim + blur for depth. (Safe: additive.) */
.modal-backdrop {
  background: rgba(3, 7, 18, .62);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
          backdrop-filter: blur(6px) saturate(115%);
  padding: max(40px, env(safe-area-inset-top)) 16px
           max(40px, env(safe-area-inset-bottom)) 16px;
}

/* Base modal upgrade — radius + elevation only. Safe for every modal:
   does NOT touch padding/layout, so legacy modals keep their look. */
.modal {
  border-radius: var(--radius-modal);
  box-shadow: var(--elev-4);
}

/* Size modifiers (Small / Medium / Large / XL). Width only. */
.modal.modal--sm   { width: var(--modal-w-sm); }
.modal.modal--md   { width: var(--modal-w-md); }
.modal.modal--lg   { width: var(--modal-w-lg); }
.modal.modal--xl   { width: var(--modal-w-xl); }
.modal.wide        { width: var(--modal-w-lg); }   /* legacy alias → large */

/* Structured layout: ONLY modals that opt in by using a .modal-head get
   the sticky-header/scroll-body/sticky-footer treatment (padding owned by
   the regions). Legacy modals without a head are untouched. :has() is
   supported in all evergreen Safari/Chrome — the device matrix here. */
.modal:has(> .modal-head) {
  padding: 0;
  overflow: hidden;                 /* clip regions to rounded corners */
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 860px);
}

/* ── Structured header / body / footer (used by dynamic modals
   AND newly available to static ones). These classes were
   referenced in JS but never styled — defining them is a big win. */
.modal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border-mid);
  background: inherit;
}
.modal-head .modal-head-text { flex: 1; min-width: 0; }
.modal-head h3,
.modal-head .modal-head-title {
  margin: 0;
  font-size: var(--t-page-title);
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--text-primary);
  line-height: 1.3;
}
.modal-head .modal-head-desc {
  margin: 4px 0 0;
  font-size: var(--t-helper);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.modal-close {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-mid); }

.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--t-body);
  color: var(--text-body);
  line-height: var(--lh-body);
}

.modal-foot {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-mid);
  background: inherit;
}

/* Footer button sizing — kill the old flex:1 full-width buttons.
   Right-aligned, auto width, comfortable hit target. (Part E) */
.modal-foot .btn,
.modal-footer .btn {
  flex: 0 0 auto;
  min-width: 104px;
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-field);
}
.modal-footer {
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
/* A footer with a single button (e.g. Close) keeps it right-aligned. */

/* ── Mobile: modals become bottom-anchored full-width sheets
   with safe-area padding. (Parts B + F) ─────────────────────── */
@media (max-width: 640px) {
  .modal-backdrop { padding: 0; align-items: flex-end !important; }
  .modal,
  .modal.modal--sm, .modal.modal--md, .modal.modal--lg,
  .modal.modal--xl, .modal.wide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
  }
  .modal-head  { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .modal-body  { padding: var(--sp-4); }
  .modal-foot  { padding: var(--sp-3) var(--sp-4) max(var(--sp-3), env(safe-area-inset-bottom)); }
  /* Stack footer actions full-width on the smallest screens, primary on top. */
  .modal-foot, .modal-footer { flex-direction: column-reverse; align-items: stretch; }
  .modal-foot .btn, .modal-footer .btn { width: 100%; min-width: 0; padding: 12px; font-size: 14px; }
}

/* ============================================================
   FORM SYSTEM  (Parts C + H) — uniform, high-contrast, accessible.
   Upgrades the existing .form-* classes; adds .ui-* for new forms.
   ============================================================ */

/* Always-visible, high-contrast labels (was 10px muted). */
.form-label,
.ui-field-label {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--text-body);
  letter-spacing: .005em;
  margin-bottom: 6px;
  line-height: 1.3;
}

/* Required marker — persistent, accessible, never disappears. */
.req,
.ui-field-label .req {
  color: var(--red-text, #fca5a5);
  font-weight: 700;
  margin-left: 3px;
}
html.theme-light .req { color: #dc2626; }
.optional {
  color: var(--text-dim);
  font-weight: 400;
  font-size: .92em;
  margin-left: 4px;
}

/* Uniform inputs with modern focus ring + validation states. */
.form-input,
.form-select,
.ui-input {
  width: 100%;
  min-height: var(--field-h);
  padding: 9px var(--field-pad-x);
  font-size: var(--field-font);
  font-family: var(--font-sans);
  line-height: 1.4;
  color: var(--text-body);
  background: var(--bg-input);
  border: 1px solid var(--border-blue);
  border-radius: var(--field-radius);
  box-sizing: border-box;
  transition: border-color .14s, box-shadow .14s, background .14s;
  appearance: none;
}
textarea.form-input,
textarea.ui-input {
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
}
.form-input::placeholder,
.ui-input::placeholder { color: var(--text-dim); }

.form-input:focus,
.form-select:focus,
.ui-input:focus,
.form-input:focus-visible,
.ui-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--field-ring);
  background: var(--bg-card);
}

/* Validation states. */
.form-input.is-invalid,
.ui-input.is-invalid,
.form-input[aria-invalid="true"] {
  border-color: var(--red);
}
.form-input.is-invalid:focus,
.ui-input.is-invalid:focus { box-shadow: var(--field-ring-err); }
.form-input.is-valid,
.ui-input.is-valid { border-color: var(--green-border, #16a34a); }

/* Native select chevron. */
.form-select,
select.ui-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 34px;
}

.form-error,
.ui-field-error {
  color: var(--red-text, #fca5a5);
  font-size: var(--t-helper);
  margin-top: 5px;
  line-height: 1.4;
}
.ui-field-help,
.fld-help {
  color: var(--text-muted);
  font-size: var(--t-helper);
  margin-top: 5px;
  line-height: 1.45;
}

/* ── New field + section primitives for redesigned forms ────── */
.ui-field { margin-bottom: var(--sp-4); }
.ui-field:last-child { margin-bottom: 0; }
.ui-field-row { display: flex; gap: var(--sp-3); }
.ui-field-row > .ui-field { flex: 1; min-width: 0; }

.ui-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.ui-section:last-child { margin-bottom: 0; }
.ui-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.ui-section-title .ui-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--bg-active); color: var(--accent-light);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0;
}

/* ── Inline alert / callout (warnings inside forms) ─────────── */
.ui-callout {
  display: flex; gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px; line-height: 1.5;
  margin-bottom: var(--sp-4);
}
/* Phase 51A: #fbbf24 on the faint brown fill failed contrast. Deeper fill +
   brighter text raises it to a readable ratio in dark mode. */
.ui-callout-amber {
  background: rgba(180, 83, 9, .22);
  border: 1px solid var(--amber-border, #f59e0b);
  color: #fde68a;
}
.ui-callout-amber strong { color: #fef3c7; }
/* Light theme: bright-amber text is unreadable on a pale fill — darken it. */
html.theme-light .ui-callout-amber {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}
html.theme-light .ui-callout-amber strong { color: #78350f; }

/* ============================================================
   WORKFLOW DIALOGS  (Part E) — clinical-context summary card
   ============================================================ */
.wf-summary {
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.wf-summary-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.wf-summary-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--sp-4);
  font-size: 12px;
}
.wf-summary-grid dt { color: var(--text-muted); }
.wf-summary-grid dd { margin: 0; color: var(--text-body); font-weight: 500; }
@media (max-width: 480px) {
  .wf-summary-grid { grid-template-columns: 1fr; gap: 2px; }
  .wf-summary-grid dd { margin-bottom: 6px; }
}

/* ============================================================
   LOADING / EMPTY STATE distinction  (Part A finding #7)
   ============================================================ */
.loading-state {
  padding: 28px; text-align: center;
  color: var(--text-muted); font-size: 12px;
}
.loading-state::before {
  content: ""; display: inline-block;
  width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid var(--border-blue);
  border-top-color: var(--accent-light);
  border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading-state::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   PHASE 45F — ENTERPRISE UI COMPLETION
   Additive layer 2 (loaded after the 43C layer above). Targets the
   surfaces 43C deferred: TABLES (sticky header/column, visible sort
   indicators, row actions, density), VISUAL LANGUAGE (elevation,
   severity, workflow), DASHBOARD primitives (KPI tiles), the shared
   platform modal, and the previously-unstyled HIPAA modal.
   Everything is token-driven and opt-in by class, so legacy surfaces
   are untouched unless they adopt a class.
   ════════════════════════════════════════════════════════════ */

:root {
  --tbl-max-h:       560px;   /* sticky-table viewport height */
  --tbl-head-bg:     #0d1c33; /* opaque header band (dark) */
  --tbl-col-bg:      var(--bg-card);
  --sev-critical:    #ef4444;
  --sev-urgent:      #f59e0b;
  --sev-routine:     #22c55e;
  --sev-info:        #60a5fa;
}

/* ──────────────────────────────────────────────────────────────
   TABLES (Part 4) — Enterprise data grid.
   The shells render every table inside `.tbl-wrap > table`. These
   rules upgrade that pair without changing any markup; the sticky /
   density behaviours activate only when a wrapper opts in by class.
   ────────────────────────────────────────────────────────────── */

/* Sortable header affordance — was a bare ↑/↓ that only appeared once
   sorted, giving NO hint a column is sortable. Now: pointer + hover
   highlight + a persistent neutral chevron pair, brightening to a
   single directional caret when active. Driven by aria-sort for a11y. */
.tbl-wrap table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
  padding-right: 22px !important;
  transition: background .12s, color .12s;
}
.tbl-wrap table th.sortable .th-label { pointer-events: none; }
.tbl-wrap table th.sortable::after {
  content: "";
  position: absolute; right: 7px; top: 50%;
  width: 9px; height: 13px;
  transform: translateY(-50%);
  background-repeat: no-repeat; background-position: center;
  /* neutral up+down chevrons */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='13' viewBox='0 0 9 13' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 5 4.5 2.5 7 5'/%3E%3Cpolyline points='2 8 4.5 10.5 7 8'/%3E%3C/svg%3E");
  opacity: .4;
  transition: opacity .12s;
}
.tbl-wrap table th.sortable:hover { color: var(--accent-light); background: var(--bg-hover); }
.tbl-wrap table th.sortable:hover::after { opacity: .8; }
.tbl-wrap table th.sortable.is-sorted { color: var(--accent-light); }
.tbl-wrap table th.sort-asc::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='13' viewBox='0 0 9 13' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 8 4.5 4 7 8'/%3E%3C/svg%3E");
}
.tbl-wrap table th.sort-desc::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='13' viewBox='0 0 9 13' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 5 4.5 9 7 5'/%3E%3C/svg%3E");
}
html.theme-light .tbl-wrap table th.sort-asc::after,
html.theme-light .tbl-wrap table th.sort-desc::after {
  filter: brightness(.7);
}

/* Sticky header — opt-in via `.tbl-sticky`. Makes the wrapper its own
   scroll region so the header band stays pinned over long datasets
   (audit log, user roster, case lists). */
.tbl-wrap.tbl-sticky {
  max-height: var(--tbl-max-h);
  overflow: auto;
  border-radius: 12px;
}
.tbl-wrap.tbl-sticky thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--tbl-head-bg) !important;
}
html.theme-light .tbl-wrap.tbl-sticky thead th {
  background: #eef2f8 !important;
}

/* Sticky first column — opt-in via `.tbl-sticky-1`, for wide tables that
   scroll horizontally on tablet/desktop. Keeps the identifier column
   in view. */
.tbl-wrap.tbl-sticky-1 thead th:first-child,
.tbl-wrap.tbl-sticky-1 tbody td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--tbl-col-bg);
}
.tbl-wrap.tbl-sticky-1 thead th:first-child { z-index: 5; }
html.theme-light .tbl-wrap.tbl-sticky-1 thead th:first-child,
html.theme-light .tbl-wrap.tbl-sticky-1 tbody td:first-child { background: #ffffff; }

/* Per-table density override (the shell already has a global density
   switch; this lets a single dense surface go compact independently). */
.tbl-wrap.density-compact table td,
.tbl-wrap.density-compact table th { padding: 4px 10px !important; font-size: 12px; }
.tbl-wrap.density-comfortable table td,
.tbl-wrap.density-comfortable table th { padding: 12px 14px !important; }

/* Row actions — reveal on row hover/focus (always visible on touch). */
.row-actions {
  display: inline-flex; align-items: center; gap: 6px;
  opacity: 0; transition: opacity .12s;
}
tr:hover > td .row-actions,
tr:focus-within > td .row-actions { opacity: 1; }
@media (hover: none) { .row-actions { opacity: 1; } }
.row-actions .row-act {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 9px;
  font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border-mid); border-radius: 7px;
  background: var(--bg-card); color: var(--text-body); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.row-actions .row-act:hover { border-color: var(--accent); color: var(--accent-light); }

/* ──────────────────────────────────────────────────────────────
   VISUAL LANGUAGE (Part 6) — elevation, severity, workflow.
   ────────────────────────────────────────────────────────────── */

/* Subtle global card depth (Epic/ServiceNow-grade surfaces). Kept light
   so dense layouts don't get muddy; inline-styled cards are unaffected. */
.card, .card-btn, .metric-card { box-shadow: var(--elev-1); }
.card.elevated, .card-btn.elevated, .metric-card.elevated { box-shadow: var(--elev-2); }
.card-btn:hover { box-shadow: var(--elev-2); }
html.theme-light .card,
html.theme-light .card-btn,
html.theme-light .metric-card { box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.10); }

/* Severity language — one consistent palette across dashboards/tables. */
.sev-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; flex: 0 0 auto;
}
.sev-critical { color: var(--sev-critical); }
.sev-urgent   { color: var(--sev-urgent); }
.sev-routine  { color: var(--sev-routine); }
.sev-critical .sev-dot, .sev-dot.sev-critical { background: var(--sev-critical); }
.sev-urgent   .sev-dot, .sev-dot.sev-urgent   { background: var(--sev-urgent); }
.sev-routine  .sev-dot, .sev-dot.sev-routine  { background: var(--sev-routine); }
.sev-info     .sev-dot, .sev-dot.sev-info     { background: var(--sev-info); }
/* Severity-tinted left rail for list rows / cards. */
.sev-rail-critical { box-shadow: inset 3px 0 0 var(--sev-critical); }
.sev-rail-urgent   { box-shadow: inset 3px 0 0 var(--sev-urgent); }
.sev-rail-routine  { box-shadow: inset 3px 0 0 var(--sev-routine); }

/* Workflow step indicator — the case lifecycle the shells already model
   (ingest → assign → ack → action → verify → close). */
.wf-track { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wf-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--bg-surface); border: 1px solid var(--border-mid);
  color: var(--text-muted);
}
.wf-chip.is-done    { background: rgba(34,197,94,.14);  border-color: var(--green-border, #16a34a); color: var(--green-text, #4ade80); }
.wf-chip.is-current { background: rgba(37,99,235,.16);  border-color: var(--accent);  color: var(--accent-light); }
.wf-chip .wf-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ──────────────────────────────────────────────────────────────
   DASHBOARD PRIMITIVES (Part 5) — KPI tile grid usable by the
   executive / supervisor / provider / operational views.
   ────────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
}
.kpi-tile {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border-mid);
  border-radius: 14px; padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--elev-1);
}
.kpi-tile.kpi-clickable { cursor: pointer; transition: border-color .14s, box-shadow .14s; }
.kpi-tile.kpi-clickable:hover { border-color: var(--accent); box-shadow: var(--elev-2); }
.kpi-tile .kpi-label { font-size: var(--t-label); font-weight: 600; color: var(--text-muted); letter-spacing: .01em; }
.kpi-tile .kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--text-primary); }
.kpi-tile .kpi-sub   { font-size: var(--t-helper); color: var(--text-muted); }
.kpi-tile .kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; }
.kpi-tile .kpi-trend.up   { color: var(--green-text, #4ade80); }
.kpi-tile .kpi-trend.down { color: var(--red-text, #fca5a5); }
@media (max-width: 480px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ──────────────────────────────────────────────────────────────
   HIPAA MODAL (clinical) — was fully custom + entirely unstyled.
   ────────────────────────────────────────────────────────────── */
.hipaa-modal-backdrop {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: center; justify-content: center;
  padding: max(40px, env(safe-area-inset-top)) 16px max(40px, env(safe-area-inset-bottom));
  background: rgba(3, 7, 18, .62);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
          backdrop-filter: blur(6px) saturate(115%);
}
.hipaa-modal-backdrop.on { display: flex; }
.hipaa-modal {
  position: relative;
  width: var(--modal-w-md); max-width: 100%;
  max-height: min(86vh, 820px);
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-modal);
  box-shadow: var(--elev-4);
  overflow: hidden;
}
.hipaa-modal-head {
  position: sticky; top: 0;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--border-mid);
  background: inherit;
}
.hipaa-modal-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-active); color: var(--accent-light); font-size: 18px;
}
.hipaa-modal-title { margin: 0; font-size: var(--t-page-title); font-weight: 650; color: var(--text-primary); line-height: 1.3; }
.hipaa-modal-tag { display: inline-block; margin-top: 4px; font-size: var(--t-helper); color: var(--text-muted); }
.hipaa-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.hipaa-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-mid); }
.hipaa-modal-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--t-body); color: var(--text-body); line-height: var(--lh-body);
}
.hipaa-modal-body h4 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--t-card-title); color: var(--text-primary); }
.hipaa-modal-body h4:first-child { margin-top: 0; }
.hipaa-modal-body ul { margin: 0 0 var(--sp-3); padding-left: 18px; }
.hipaa-modal-body li { margin-bottom: 5px; }
.hipaa-modal-foot {
  position: sticky; bottom: 0;
  padding: var(--sp-3) var(--sp-6) max(var(--sp-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-mid);
  background: inherit;
  font-size: var(--t-helper); line-height: 1.55; color: var(--text-muted);
}
.hipaa-modal-foot a { color: var(--accent-light); }
@media (max-width: 640px) {
  .hipaa-modal-backdrop { padding: 0; align-items: flex-end; }
  .hipaa-modal { width: 100%; max-width: 100%; max-height: 94dvh; border-radius: 18px 18px 0 0; }
}

/* ════════════════════════════════════════════════════════════
   PHASE 46C SLICE 3 — UI completion debt
   (A) utilities  (C) filter toolbar  (D) loading  (E) empty state
   ════════════════════════════════════════════════════════════ */

/* ── (A) Inline-style → utility classes ────────────────────────
   These replace high-frequency, single-property, theme-agnostic
   inline styles migrated out of the two shells. Each carries the
   EXACT declaration the inline style had and uses !important so the
   cascade behaviour is identical to the inline rule it replaced
   (inline always won; an !important single-purpose utility wins the
   same way) — guaranteeing zero visual regression. Loaded last. */
.u-mono { font-family: var(--font-mono) !important; }
.u-tr   { text-align: right !important; }
.u-clk  { cursor: pointer !important; }
.u-f1   { flex: 1 !important; }
.u-nb   { border-bottom: none !important; }
.u-w100 { width: 100% !important; }
.u-c1   { color: #cbd5e1 !important; }
.u-c2   { color: #94a3b8 !important; }
.u-c3   { color: #e2e8f0 !important; }
.u-c4   { color: #64748b !important; }
.u-c5   { color: #60a5fa !important; }
.u-c6   { color: #ef4444 !important; }

/* ── (C) Generic table filter toolbar ──────────────────────────
   Injected by ui-enhance.js above qualifying data grids. Search +
   derived dropdown filters (status/role/severity) + a clear button.
   Token-driven; collapses cleanly on mobile. */
.tbl-filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.tbl-filterbar .tf-search {
  flex: 1 1 200px; min-width: 150px;
  height: 34px; padding: 6px 11px;
  font-size: 12.5px; font-family: var(--font-sans);
  color: var(--text-body); background: var(--bg-input);
  border: 1px solid var(--border-blue); border-radius: var(--radius-field);
  box-sizing: border-box;
}
.tbl-filterbar .tf-search:focus { outline: none; border-color: var(--accent); box-shadow: var(--field-ring); }
.tbl-filterbar .tf-sel {
  height: 34px; padding: 6px 28px 6px 10px;
  font-size: 12px; font-family: var(--font-sans);
  color: var(--text-body); background: var(--bg-input);
  border: 1px solid var(--border-blue); border-radius: var(--radius-field);
  box-sizing: border-box; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.tbl-filterbar .tf-sel:focus { outline: none; border-color: var(--accent); }
.tbl-filterbar .tf-clear {
  height: 34px; padding: 0 12px;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--border-mid); border-radius: var(--radius-field);
  cursor: pointer; transition: color .12s, border-color .12s;
}
.tbl-filterbar .tf-clear:hover { color: var(--text-primary); border-color: var(--accent); }
.tbl-filterbar .tf-count { font-size: 11.5px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.tbl-filterbar .tf-count.tf-filtered { color: var(--accent-light); }
@media (max-width: 560px) {
  .tbl-filterbar .tf-count { margin-left: 0; width: 100%; order: 5; }
}

/* ── (D) Loading / skeleton states ─────────────────────────────
   Standardised so a table mid-hydration never looks broken/blank. */
.skeleton-row td { padding: 10px 12px !important; }
.skeleton-bar {
  display: block; height: 11px; border-radius: 6px;
  background: linear-gradient(90deg,
    var(--bg-surface) 0%, var(--bg-hover) 40%,
    var(--bg-surface) 80%);
  background-size: 280% 100%;
  animation: ui-shimmer 1.2s ease-in-out infinite;
}
@keyframes ui-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; } }
.is-loading-block {
  position: relative; min-height: 80px;
  pointer-events: none;
}
.is-loading-block [data-action], .is-loading-block button { opacity: .5; pointer-events: none; }

/* ── (E) Empty states ──────────────────────────────────────────
   Upgrades a plain "No results" colspan row into a titled,
   explained, optionally-actionable block. Class-only; the enhancer
   wraps the existing placeholder text, never inventing fake rows. */
.empty-state {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-muted);
}
.empty-state .es-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 10px;
  border-radius: 10px; background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  color: var(--text-dim); font-size: 20px;
}
.empty-state .es-title { font-size: 13.5px; font-weight: 600; color: var(--text-body); margin-bottom: 4px; }
.empty-state .es-desc  { font-size: 12px; line-height: 1.5; color: var(--text-muted); max-width: 360px; margin: 0 auto; }
.empty-state .es-action { margin-top: 12px; }

/* ============================================================
   Phase 51A · Section J — global accessibility primitives.
   Before this, the product had no app-wide keyboard focus ring and
   many controls fell below a usable touch target. Additive only:
   :focus-visible suppresses the ring for pointer/mouse interaction,
   so mouse users see no change; the touch-target floor is gated to
   coarse pointers, so desktop density is untouched. Low :where()
   specificity keeps per-component overrides trivial.
   ============================================================ */
:where(button, a[href], [role="button"], [role="tab"], summary,
       .btn, .card-btn, .si, .tab-btn, .row-act, .chip, .chip-x,
       .tc-btn, .modal-close):focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}
/* Form fields already restyle the border on focus; add the visible ring
   too (these win over the earlier `outline:none` rule by source order). */
.form-input:focus-visible,
.ui-input:focus-visible,
.form-select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 1px;
}
/* Touch devices: lift small/dense controls to a usable target.
   Desktop (fine pointer) keeps its compact density. */
@media (pointer: coarse) {
  .btn, .tc-btn, .row-act, .modal-close, .chip-x { min-height: 44px; }
  .row-actions .row-act { min-width: 44px; }
}

/* ============================================================
   Phase 51B — VISUAL REFRESH (dark theme)
   A genuine restyle of the highest-traffic surfaces: search/filter
   bars, table chrome, and cards. Loads last and uses !important on
   purpose, to win over the ~4 legacy .tc-search overrides that
   accumulated in design-tokens.css. Light theme keeps its own
   higher-specificity overrides, so this targets the default dark UI.
   ============================================================ */

/* — Table toolbar — more breathing room — */
.tc-bar {
  padding: 12px 16px !important;
  gap: 10px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border-faint) !important;
}

/* — Search field — taller, soft-rounded, real focus ring — */
.tc-search {
  height: 38px !important;
  min-width: 200px !important;
  max-width: 340px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tc-search:hover { background: rgba(255,255,255,.06) !important; border-color: var(--border-blue) !important; }
.tc-search:focus-within {
  background: rgba(37,99,235,.10) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.20) !important;
}
.tc-search svg { width: 15px !important; height: 15px !important; stroke: var(--text-muted) !important; flex-shrink: 0; }
.tc-search:focus-within svg { stroke: var(--accent-light) !important; }
.tc-search input { font-size: 13px !important; color: var(--text-body) !important; }
.tc-search input::placeholder { color: var(--text-dim) !important; }

/* — Filter buttons / selects — same height + radius as the search — */
.tc-btn {
  height: 38px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tc-btn:hover { background: rgba(255,255,255,.07) !important; border-color: var(--accent) !important; color: var(--text-body) !important; }
select.tc-btn { padding-right: 30px !important; }

/* — Filter chips — pill-shaped — */
.chip-bar { padding: 8px 16px !important; gap: 7px !important; }
.chip {
  border-radius: 999px !important;
  padding: 4px 11px !important;
  background: rgba(37,99,235,.16) !important;
  border: 1px solid rgba(37,99,235,.40) !important;
  color: var(--accent-light) !important;
  font-size: 11.5px !important;
}

/* — Tables — airier rows, quieter uppercase headers, clear hover — */
.tbl-wrap table th {
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  padding: 11px 16px !important;
  background: rgba(255,255,255,.022) !important;
  border-bottom: 1px solid var(--border-mid) !important;
}
.tbl-wrap table td {
  padding: 12px 16px !important;
  font-size: 12.5px !important;
  border-bottom: 1px solid var(--border-faint) !important;
  vertical-align: middle !important;
}
.tbl-wrap table tbody tr { transition: background .12s ease; }
.tbl-wrap table tbody tr:hover { background: rgba(255,255,255,.03) !important; }

/* — Cards — softer corners + subtle depth — */
.card {
  border-radius: 14px !important;
  border: 1px solid var(--border-faint) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 10px 28px rgba(0,0,0,.14) !important;
}

/* — Buttons — softer corners, more presence, tactile press — */
.btn {
  border-radius: 9px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  transition: background .14s ease, box-shadow .14s ease, transform .05s ease, border-color .14s ease, color .14s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary:hover { box-shadow: 0 4px 16px rgba(37,99,235,.38) !important; }
.row-act { border-radius: 8px !important; }

/* — Badges & status pills — fully rounded — */
.badge { border-radius: 999px !important; padding: 3px 9px !important; font-size: 10.5px !important; font-weight: 600 !important; }
.pill  { border-radius: 999px !important; padding: 3px 10px !important; }

/* — KPI / metric tiles — match the new card language — */
.kpi-tile {
  border-radius: 14px !important;
  border: 1px solid var(--border-faint) !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 28px rgba(0,0,0,.12) !important;
}
.kpi-tile .kpi-value { letter-spacing: -.02em !important; }

/* — Page headers — tighter, more deliberate — */
.page-title { font-weight: 600 !important; letter-spacing: -.01em !important; }

/* — Sidebar nav — smooth state transitions — */
.si { transition: background .12s ease, color .12s ease, border-color .12s ease; }

/* ============================================================
   Phase 51B — LIGHT / EMERALD refresh
   The authenticated shell runs the Emerald theme (html.theme-light +
   html.theme-emerald): mint canvas, emerald accent. Its search/filter
   controls had a flat white-box override that won over the dark refresh
   above, so they still read "basic". These rules restyle them using the
   SEMANTIC theme tokens (--bg-surface/--accent/--border-mid/--bg-active),
   which resolve to emerald values under Emerald and slate/blue under plain
   Light — so one block modernises both. Higher source-order than the legacy
   light overrides, so these win.
   ============================================================ */
html.theme-light .tc-bar {
  background: transparent !important;
  border-bottom: 1px solid var(--border-mid) !important;
}
html.theme-light .tc-search {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.04) !important;
}
html.theme-light .tc-search:hover {
  background: var(--bg-card) !important;
  border-color: var(--border-blue) !important;
}
html.theme-light .tc-search:focus-within {
  background: var(--bg-card) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--bg-active) !important;
}
html.theme-light .tc-search svg { stroke: var(--accent) !important; opacity: .9; }
html.theme-light .tc-search input { color: var(--text-body) !important; }
html.theme-light .tc-search input::placeholder { color: var(--text-muted) !important; }
html.theme-light .tc-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 10px !important;
  color: var(--text-muted) !important;
}
html.theme-light .tc-btn:hover {
  background: var(--bg-active) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
html.theme-light .tbl-wrap table th {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-mid) !important;
}
html.theme-light .tbl-wrap table tbody tr:hover { background: var(--bg-hover) !important; }
/* cards/tiles get a soft tinted shadow that suits the mint canvas */
html.theme-light .card,
html.theme-light .kpi-tile {
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06) !important;
  border: 1px solid var(--border-mid) !important;
}

/* ============================================================
   Phase 51B — PREMIUM PASS (search depth + page headers + sign-in)
   ============================================================ */

/* Search field — taller, more confident, refined fill + depth (both themes) */
.tc-search { height: 40px !important; }
.tc-search input { font-size: 13.5px !important; }
html.theme-light .tc-search {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-surface)) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.05), 0 1px 0 rgba(255,255,255,.5) !important;
}
html.theme-light .tc-search:focus-within {
  box-shadow: 0 0 0 3px var(--bg-active), 0 2px 8px rgba(15,23,42,.06) !important;
}
.tc-btn { height: 40px !important; }

/* Page header — a more deliberate, premium title block */
.page-title { font-size: 19px !important; font-weight: 650 !important; }
.page-sub { font-size: 12.5px !important; margin-top: 3px !important; }

/* ── Sign-in card — premium. Wins over the shells' inline #login styles
   via !important. Solid, layered, with a refined input + button set. ── */
#login-form-area, #login-form-col {
  /* Radius + padding match the clinical login card so the two read as the
     same product at the same size. (Clinical re-skins its own card white via
     its inline #login-form-area override loaded after this sheet.) */
  border-radius: 18px !important;
  border: 1px solid rgba(125,211,252,.16) !important;
  background: linear-gradient(180deg, rgba(16,30,52,.94), rgba(10,20,38,.96)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  box-shadow:
    0 40px 100px rgba(2,6,23,.5),
    0 10px 30px rgba(2,6,23,.32) !important;
  padding: 24px 32px 16px !important;
}
#login-form-area .form-input, #login-form-col .form-input {
  height: 46px !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(125,211,252,.16) !important;
  font-size: 14px !important;
  color: #eaf2ff !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
#login-form-area .form-input::placeholder, #login-form-col .form-input::placeholder { color: #6b8bb0 !important; }
#login-form-area .form-input:focus, #login-form-col .form-input:focus {
  border-color: var(--accent-light) !important;
  background: rgba(37,99,235,.08) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.24) !important;
  outline: none !important;
}
#login-cred-submit {
  height: 50px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.42) !important;
  transition: box-shadow .15s ease, transform .05s ease, filter .15s ease !important;
}
#login-cred-submit:hover { box-shadow: 0 10px 30px rgba(37,99,235,.55) !important; filter: brightness(1.06); }
#login-cred-submit:active { transform: translateY(1px); }
/* SSO provider links → premium cards */
#oidc-providers-container a, #login-sso-section a {
  border-radius: 11px !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}

/* ============================================================
   Phase 51B — ROLLOUT across the rest of the shared surfaces:
   form fields, tabs, header search, toasts, console tiles, detail
   rows. Semantic tokens → adapts to dark / light / emerald.
   ============================================================ */

/* Form fields everywhere (modals, detail, settings) — match the search field.
   Login inputs keep their own (more specific) premium styling. */
.form-input, .form-select, .ui-input, .settings-input, .settings-select,
.inp, input.inp, select.inp, textarea.inp, .nm-search-input {
  border-radius: 10px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  padding: 0 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.form-input:focus, .form-select:focus, .ui-input:focus,
.settings-input:focus, .settings-select:focus,
.inp:focus, .nm-search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--bg-active) !important;
  outline: none !important;
}
/* The legacy `.inp` fields shipped with no real box — give them one. */
.inp, input.inp, select.inp, textarea.inp {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--text-body) !important;
}
html.theme-light .form-input, html.theme-light .form-select, html.theme-light .ui-input,
html.theme-light .settings-input, html.theme-light .settings-select,
html.theme-light .inp, html.theme-light .nm-search-input {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-mid) !important;
  color: var(--text-body) !important;
}
textarea.form-input, textarea.ui-input { min-height: 72px !important; padding-top: 9px !important; }

/* Tabs — clearer active state, smooth */
.tab-btn {
  font-weight: 600 !important;
  border-bottom-width: 2px !important;
  transition: color .14s ease, border-color .14s ease, background .14s ease !important;
}
.tab-btn.on, .tab-btn.active { color: var(--accent-light) !important; border-bottom-color: var(--accent) !important; }
html.theme-light .tab-btn.on, html.theme-light .tab-btn.active { color: var(--accent) !important; }

/* Header search — match the new field language */
.hdr-search { border-radius: 10px !important; height: 38px !important; }
.hdr-search:focus-within { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--bg-active) !important; }

/* Toast — premium rounded with real depth */
.toast {
  border-radius: 12px !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.26) !important;
}
html.theme-light .toast { box-shadow: 0 14px 40px rgba(15,23,42,.18), 0 2px 8px rgba(15,23,42,.10) !important; }

/* Console metric tiles (.ops-tile) — match the card language */
.ops-tile {
  border-radius: 14px !important;
  border: 1px solid var(--border-faint) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.10) !important;
}
html.theme-light .ops-tile { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.06) !important; border-color: var(--border-mid) !important; }

/* Entity detail rows — a touch airier */
.kv-row { padding: 9px 0 !important; }

/* ============================================================
   Phase 51B — UNIFY all content search fields in light/emerald.
   (.tc-search table, .msg-search conversations, .nm-search-input
   new-message) had 5 inconsistent styles. The header search lives on
   the dark header (subtle-on-dark); these live on the light/mint
   content, so the matching clean look is a white field with accent
   focus. Loads last → wins over the scattered earlier rules. */
html.theme-light .tc-search,
html.theme-light .msg-search,
html.theme-light .nm-search-input {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-mid) !important;
  border-radius: 10px !important;
  color: var(--text-body) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03) !important;
}
html.theme-light .tc-search input,
html.theme-light .msg-search,
html.theme-light .nm-search-input { color: var(--text-body) !important; }
html.theme-light .tc-search input::placeholder,
html.theme-light .msg-search::placeholder,
html.theme-light .nm-search-input::placeholder { color: var(--text-muted) !important; }
html.theme-light .tc-search:focus-within,
html.theme-light .msg-search:focus,
html.theme-light .nm-search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--bg-active) !important;
  outline: none !important;
}
html.theme-light .tc-search svg { stroke: var(--text-muted) !important; }
html.theme-light .tc-search:focus-within svg { stroke: var(--accent) !important; }

/* ============================================================
   Phase 78A — LOGIN SURFACES: fixed Trinity brand identity.
   The login "Sign In" CTA and the Organization-SSO entry must NEVER follow the
   selected accent theme (violet / emerald / rose / amber / cyan). They are
   pinned to the Trinity brand blue (#2563eb) in every theme. Shared by the
   clinical + platform shells (both load this stylesheet) so the two login
   cards are byte-identical. Accent may still tint minor focus rings only.
   ============================================================ */
#login-cred-submit,
#login-cred-submit.btn-primary {
  background:#2563eb !important;
  border:1px solid #2563eb !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(37,99,235,.28) !important;
  transition:background .14s ease, box-shadow .14s ease, transform .05s ease !important;
}
#login-cred-submit:hover,
#login-cred-submit.btn-primary:hover {
  background:#1d4ed8 !important; border-color:#1d4ed8 !important;
  box-shadow:0 8px 22px rgba(37,99,235,.40) !important;
}
#login-cred-submit:active { transform:translateY(1px) !important; }
#login-cred-submit:focus-visible {
  outline:3px solid rgba(37,99,235,.5) !important; outline-offset:2px !important;
}
#login-cred-submit:disabled,
#login-cred-submit[aria-busy="true"] {
  background:#94a3b8 !important; border-color:#94a3b8 !important;
  box-shadow:none !important; opacity:.9 !important; cursor:not-allowed !important;
}

/* Single scalable Organization-SSO entry button — replaces the old one-per-org
   buttons. Pinned brand blue, identical in both shells. */
.org-sso-entry {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; box-sizing:border-box; cursor:pointer;
  background:#2563eb; color:#fff; border:1px solid #2563eb; border-radius:9px;
  padding:11px 14px; font-size:13px; font-weight:650; letter-spacing:.01em;
  text-decoration:none; font-family:inherit;
  box-shadow:0 6px 16px rgba(37,99,235,.28);
  transition:background .14s ease, box-shadow .14s ease, transform .05s ease;
}
.org-sso-entry:hover { background:#1d4ed8; border-color:#1d4ed8; box-shadow:0 8px 22px rgba(37,99,235,.40); }
.org-sso-entry:active { transform:translateY(1px); }
.org-sso-entry:focus-visible { outline:3px solid rgba(37,99,235,.5); outline-offset:2px; }
.org-sso-entry svg { width:16px; height:16px; flex-shrink:0; }
.org-sso-entry-sub { color:#64748b; font-size:11px; text-align:center; margin-top:7px; }
.org-sso-empty { color:#94a3b8; font-size:11px; font-style:italic; text-align:center; padding:6px; }

/* Organization selector modal — theme-neutral white surface so it reads
   identically over the white clinical card and the dark platform card. */
.org-sso-overlay {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  padding:16px;
}
.org-sso-overlay[hidden] { display:none; }
.org-sso-modal {
  width:min(420px,100%); max-height:min(560px,90vh);
  display:flex; flex-direction:column;
  background:#ffffff; color:#0f172a;
  border:1px solid rgba(15,23,42,.10); border-radius:16px;
  box-shadow:0 40px 100px rgba(2,6,23,.55), 0 10px 30px rgba(2,6,23,.34);
  overflow:hidden;
}
.org-sso-head { padding:18px 20px 4px; }
.org-sso-title { font-size:17px; font-weight:700; color:#0f172a; }
.org-sso-subtitle { font-size:12px; color:#64748b; margin-top:3px; }
.org-sso-search-wrap { position:relative; margin:12px 20px 4px; }
.org-sso-search-wrap > svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8; width:16px; height:16px; }
.org-sso-search {
  width:100%; box-sizing:border-box; height:40px;
  padding:0 12px 0 36px; border:1px solid #cbd5e1; border-radius:9px;
  font-size:13px; color:#0f172a; background:#fff; outline:none; font-family:inherit;
}
.org-sso-search:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.org-sso-search::placeholder { color:#94a3b8; }
.org-sso-list { list-style:none; margin:6px 0 0; padding:4px 12px 14px; overflow-y:auto; flex:1; }
.org-sso-option {
  display:flex; align-items:center; gap:11px; width:100%; box-sizing:border-box;
  padding:11px 12px; margin:4px 0; border:1px solid #e2e8f0; border-radius:10px;
  background:#f8fafc; color:#0f172a; font-size:13.5px; font-weight:600;
  text-decoration:none; cursor:pointer; text-align:left;
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.org-sso-option:hover, .org-sso-option.is-active {
  border-color:#2563eb; background:#eff6ff; box-shadow:0 2px 10px rgba(37,99,235,.12);
}
.org-sso-option:focus-visible { outline:2px solid #2563eb; outline-offset:1px; }
.org-sso-option-ico { color:#2563eb; display:inline-flex; flex-shrink:0; }
.org-sso-option-ico svg { width:18px; height:18px; }
.org-sso-option-arrow { margin-left:auto; color:#94a3b8; display:inline-flex; }
.org-sso-option-arrow svg { width:16px; height:16px; }
.org-sso-modal-empty { padding:26px 20px; text-align:center; color:#64748b; font-size:12.5px; }
.org-sso-foot { display:flex; justify-content:flex-end; gap:8px; padding:10px 20px 16px; border-top:1px solid #eef2f7; }
.org-sso-cancel {
  background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; border-radius:8px;
  padding:8px 16px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;
}
.org-sso-cancel:hover { background:#e2e8f0; }
.org-sso-cancel:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
@media (max-width:560px){
  .org-sso-modal { width:100%; max-height:92vh; border-radius:14px; }
}

/* ============================================================
   PHASE 91 — WORKSPACE UNIFICATION
   One shared design language for every Trinity workspace.
   - Centralized semantic tokens (category / severity / status /
     dark-rail) so the ~70 previously-hardcoded hex values across
     messaging, notifications and platform-ops resolve to ONE
     source of truth and retint uniformly per theme.
   - .ws-shell: the canonical LEFT context / CENTER work-surface /
     RIGHT supporting-context grid.
   - .ws-head: the canonical workspace header (title + sub + acts).
   - .ws-* panels/sections: reusable surfaces so detail + queue
     workspaces stop rolling their own bespoke layout CSS.
   Additive only — loaded after design-tokens.css in both shells.
   ============================================================ */
:root {
  /* Workspace shell column widths */
  --ws-left:  236px;
  --ws-right: 304px;

  /* Mail-client dark rail (intentionally dark in every theme) */
  --ws-rail-bg:        #1f2937;
  --ws-rail-bg-2:      #111827;
  --ws-rail-text:      #e5e7eb;
  --ws-rail-text-mute: #cbd5e1;
  --ws-rail-text-dim:  #9ca3af;
  --ws-rail-hover:     rgba(255,255,255,.08);
  --ws-rail-active:    var(--accent, #2563eb);

  /* Category palette (folders, conversation/notification types) */
  --cat-case:         #3b82f6;
  --cat-org:          #10b981;
  --cat-support:      #f59e0b;
  --cat-message:      #0891b2;
  --cat-escalation:   #f97316;
  --cat-verification: #16a34a;
  --cat-governance:   #7c3aed;
  --cat-policy:       #0ea5e9;
  --cat-coverage:     #0d9488;
  --cat-event:        #64748b;
  --cat-archived:     #94a3b8;
  --cat-deleted:      #ef4444;

  /* Severity palette (notifications, alarms) */
  --sev-critical: #dc2626;
  --sev-high:     #ea580c;
  --sev-urgent:   #f59e0b;
  --sev-routine:  #16a34a;

  /* Operational status palette (platform ops tiles, health) */
  --status-critical: #ef4444;
  --status-warning:  #f59e0b;
  --status-healthy:  #22c55e;
  --status-info:     #7dd3fc;
  --status-muted:    #475569;
}

/* ── Workspace shell: LEFT / CENTER / RIGHT ─────────────────── */
.ws-shell {
  display: grid;
  grid-template-columns: var(--ws-left) minmax(0, 1fr) var(--ws-right);
  gap: var(--sp-4, 16px);
  align-items: start;
}
.ws-shell.ws-2col { grid-template-columns: minmax(0, 1fr) var(--ws-right); }
/* LEFT context rail + CENTER, no right aside (queue workspaces) */
.ws-shell.ws-lc { grid-template-columns: var(--ws-left) minmax(0, 1fr); }
/* Rail jump-link counts + scope line (Phase 91B) */
.ws-jump a .ws-jump-l { flex: 1; min-width: 0; }
.ws-rail-count {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  background: var(--bg-hover); border-radius: 999px; padding: 1px 8px; flex-shrink: 0;
}
.ws-rail-scope { font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.ws-rail-scope strong { color: var(--text-body); }
/* Governance metric cards demoted into the RIGHT aside — stack 2-up, compact */
.tw1-counts.tw1-counts-aside { grid-template-columns: 1fr 1fr; gap: 8px; }
.ws-rail, .ws-aside {
  position: sticky;
  top: var(--sp-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  align-self: start;
}
.ws-main { display: flex; flex-direction: column; gap: var(--sp-4, 16px); min-width: 0; }

/* Context rail (LEFT) — neutral surface, NOT the dark messaging rail */
.ws-rail-card {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
}
.ws-rail-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 10px;
}
.ws-jump { display: flex; flex-direction: column; gap: 2px; }
.ws-jump a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 7px; cursor: pointer;
  color: var(--text-body); font-size: 12px; text-decoration: none;
  border: 1px solid transparent;
}
.ws-jump a:hover { background: var(--bg-hover); }
.ws-jump a .ws-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Workspace header ───────────────────────────────────────── */
.ws-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: var(--sp-4, 16px);
}
.ws-head-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ws-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-title {
  font-size: var(--t-page-title, 20px); font-weight: 650;
  letter-spacing: -.01em; color: var(--text-primary); margin: 0;
}
.ws-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 72ch; }
.ws-head-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Workspace section card (CENTER + RIGHT building block) ──── */
.ws-section {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
}
.ws-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.ws-kv { width: 100%; font-size: 11.5px; border-collapse: collapse; }
.ws-kv td { padding: 5px 0; vertical-align: top; }
.ws-kv td.ws-kv-k { color: var(--text-dim); font-weight: 600; width: 44%; }
.ws-kv td.ws-kv-v { color: var(--text-body); }
.ws-actions { display: flex; flex-direction: column; gap: 7px; }

/* ── Responsive collapse ────────────────────────────────────── */
@media (max-width: 1180px) {
  .ws-shell, .ws-shell.ws-2col { grid-template-columns: minmax(0, 1fr); }
  .ws-rail, .ws-aside { position: static; }
  .ws-rail { order: 1; }
  .ws-main { order: 2; }
  .ws-aside { order: 3; }
}