/*
 * _shared.css — Aegis Continuity Steward Portal
 * Complete design system: tokens, reset, typography, layout, all components
 * Strictly follows Aegis / KALINK Brand Guidelines (Support Steward-PORTAL-BRAND-GUIDELINES.md)
 * ─────────────────────────────────────────────────────────────────────────────
 * ABSOLUTE RULES (never break):
 *   1. Zero hardcoded colors — every color uses var(--token, fallback)
 *   2. No gradients except progress bar fill (intentional exception noted)
 *   3. Never invent new color values — use only tokens defined here
 *   4. Spectral for: headings, card titles, modal titles, stat values, hero title, sidebar brand
 *   5. Inter for: all UI text, labels, buttons, badges, nav, inputs, body
 *   6. Banner/hero backgrounds always var(--gold-dark, #a0813e)
 *   7. Primary (black) buttons → white text + white SVG icons
 *   8. Gold buttons → color: var(--gold-dark) text, NOT white
 *   9. -webkit-appearance: none on checkboxes (NOT appearance: none)
 *  10. Toggle: var(--border-dark) off track, var(--gold) on track, white thumb
 *  11. Active filter/skill tags → var(--text) black bg + white text
 *  12. Upload zone icons → white SVG on var(--gold-dark) background
 *  13. All SVG: fill="none", stroke="currentColor", stroke-linecap="round"
 * ─────────────────────────────────────────────────────────────────────────────
 * Do NOT re-import fonts in individual page files — fonts loaded here only.
 */

/* ═══════════════════════════════════════════════════════════════
   GOOGLE FONTS — load once here, never repeat in page files
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — ALL COLORS & VARIABLES
   All values must be referenced by variable name in every file.
   ═══════════════════════════════════════════════════════════════ */
:root {

  /* ── Brand: Near-Black ── */
  --primary:                  #2c2c2c;   /* Support Steward dark — neutral charcoal */
  --primary-mid:              #3d3d3d;
  --primary-light:            #555555;

  /* ── Brand: Gold Accent ── */
  --gold:                     #c4a96a;   /* Warm amber — the brand gold */
  --gold-light:               #d4be90;   /* Light gold — hover backgrounds, subtle tints */
  --gold-dark:                #a0813e;   /* Dark gold — text on gold, pressed states, hero/banner bg */

  /* ── Status: Green ── */
  --green:                    #4caf7d;   /* Support Steward green */
  --green-light:              #eaf7f1;
  --green-dark:               #2e8a57;

  /* ── Status: Red (darkened — red and red-dark now properly distinct) ── */
  --red:                      #a02d22;   /* Darker firebrick (was #c0392b) */
  --red-light:                #fdf0f0;
  --red-dark:                 #7d211a;   /* New deep crimson for hover/pressed */

  /* ── Status: Orange ── */
  --orange:                   #e8a94a;   /* Support Steward orange */
  --orange-light:             #fdf6e8;
  --orange-dark:              #b5630a;

  /* ── Status: Blue ── */
  --blue:                     #4a90c4;   /* Support Steward blue */
  --blue-light:               #eaf3fb;
  --blue-dark:                #2a6a9a;

  /* ── Status: Purple ── */
  --purple:                   #9b72cf;   /* Support Steward purple */
  --purple-light:             #f3eeff;
  --purple-dark:              #6a3fa6;

  /* ── Status: Teal ── */
  --teal:                     #2bb5a0;   /* Support Steward teal */
  --teal-light:               #e0f5f2;
  --teal-dark:                #1a8c7a;

  /* ── Emergency / Alert Special (matched to new red palette) ── */
  --emergency:         #a02d22;
  --emergency-light:   #fdf0f0;
  --emergency-dark:    #7d211a;

  /* ── Surfaces ── */
  --surface:                  #ffffff;   /* Support Steward white surface */
  --surface-2:                #faf7f1;   /* Lighter cream — sidebar/topbar plane */
  --surface-3:                #f0ece2;   /* Light warm grey — chips, hover bg */
  --surface-4:                #e2ddd5;   /* Support Steward warm separator */
  --bg:                       #f4f1ea;   /* Page-body background — warmer than --surface-2 */
  --bg-2:                     #efeae0;   /* Deeper page bg — used where extra contrast is needed */

  /* ── Borders ── */
  --border:                   #e4dfd7;   /* Support Steward warm sand border */
  --border-dark:              #cec8be;

  /* ── Soft Borders (50% opacity of the matching status color) ──
     Used for SELECTED / FOCUS states where the border is a feedback
     signal (option chips, focus rings, selected pills). */
  --soft-gold:                rgba(160,129,62,0.5);   /* --gold-dark @ 50% */
  --soft-green:               rgba(76,175,125,0.5);   /* --green     @ 50% */
  --soft-blue:                rgba(74,144,196,0.5);   /* --blue      @ 50% */
  --soft-red:                 rgba(160,45,34,0.5);    /* --red       @ 50% */
  --soft-orange:              rgba(232,169,74,0.5);   /* --orange    @ 50% */

  /* ── Fade Borders (40% opacity) ──
     Used for RESTING borders on status chips, badges, tiles, banners.
     One step lighter than --soft-* — visible enough to outline the
     element without competing with content. */
  --fade-gold:                rgba(160,129,62,0.4);   /* --gold-dark @ 40% */
  --fade-green:               rgba(76,175,125,0.4);   /* --green     @ 40% */
  --fade-blue:                rgba(74,144,196,0.4);   /* --blue      @ 40% */
  --fade-red:                 rgba(160,45,34,0.4);    /* --red       @ 40% */
  --fade-orange:              rgba(232,169,74,0.4);   /* --orange    @ 40% */

  /* ── Text ── */
  --text:                     #1e1c1a;   /* Support Steward near-black */
  --text-2:                   #3d3a36;
  --text-3:                   #22201d;
  --text-4:                   #a89f94;   /* Support Steward muted text */
  --text-inverted:            #ffffff;

  /* ── Typography ── */
  --font-serif:               'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:                'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:                'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── Shadows ── */
  --shadow-xs:                0 1px 3px rgba(44,34,24,0.06);
  --shadow-sm:                0 2px 8px rgba(44,34,24,0.08);
  --shadow:                   0 4px 16px rgba(44,34,24,0.10);
  --shadow-lg:                0 8px 32px rgba(44,34,24,0.12);
  --shadow-xl:                0 16px 48px rgba(44,34,24,0.15);
  --shadow-gold:              0 4px 20px rgba(192,154,82,0.28);
  --shadow-red:               0 4px 20px rgba(224,92,92,0.25);
  --shadow-green:             0 4px 20px rgba(76,175,125,0.25);
  --shadow-emergency:         0 4px 20px rgba(200,92,66,0.30);

  /* ── Avatar / identity gradients (earth-tone palette) ──
     Used by .nw-avatar and similar identity tiles where a single
     gradient fill represents a person's brand color. Swap-in with
     background: var(--avatar-gradient-warm) etc. */
  --avatar-gradient-warm:     linear-gradient(140deg, #a07d6e, #6e4f3f);
  --avatar-gradient-teal:     linear-gradient(140deg, #7da0a0, #4a6e6e);
  --avatar-gradient-slate:    linear-gradient(140deg, #5d7ea8, #34537a);
  --avatar-gradient-plum:     linear-gradient(140deg, #8b6e9a, #5b4769);
  --avatar-gradient-sage:     linear-gradient(140deg, #7a9d8e, #4a6b5e);

  /* ── Border Radius ── */
  --radius-xs:                4px;
  --radius-sm:                8px;
  --radius:                   12px;
  --radius-lg:                16px;
  --radius-xl:                22px;
  --radius-full:              9999px;

  /* ── Layout ── */
  --sidebar-width:            260px;
  --sidebar-collapsed-width:  72px;
  --topbar-height:            64px;

  /* ── Transitions ── */
  --transition:               0.18s ease;
  --transition-slow:          0.32s ease;
  --transition-fast:          0.10s ease;

  /* ── Icon Box Backgrounds (computed from brand spec) ── */
  --icon-bg-gold:             rgba(192,154,82,0.12);
  --icon-bg-gold-active:      rgba(192,154,82,0.15);
  --icon-bg-blue:             rgba(74,122,138,0.10);
  --icon-bg-green:            rgba(74,140,92,0.10);
  --icon-bg-purple:           rgba(122,104,152,0.10);
  --icon-bg-orange:           rgba(212,136,58,0.10);
  --icon-bg-red:              rgba(200,92,66,0.08);
  --icon-bg-teal:             rgba(58,140,122,0.10);
  --icon-bg-default:          var(--surface-3);

  /* ── Badge Backgrounds ── */
  --badge-bg-gold:            rgba(192,154,82,0.10);
  --badge-border-gold:        rgba(192,154,82,0.30);

  /* ── Focus Rings ── */
  --focus-ring:               0 0 0 3px rgba(192,154,82,0.14);
  --focus-ring-red:           0 0 0 3px rgba(200,92,66,0.12);
  --focus-ring-checkbox:      0 0 0 3px rgba(192,154,82,0.20);

  /* ── Modal Overlay ── */
  --modal-overlay-bg:         rgba(30,22,14,0.52);   /* warm dark wood overlay */
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.6;
  margin: 0;
}

#app { width: 100%; min-height: 100vh; }

a             { color: inherit; text-decoration: none; }
button        { cursor: pointer; font-family: var(--font-sans); }
img, svg      { display: block; max-width: 100%; }
ul, ol        { list-style: none; }
input, textarea, select { font-family: var(--font-sans); }

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   RULE: Spectral → headings / card titles / modal titles / stat values
         Inter   → everything else (body, labels, buttons, nav, badges)
   ═══════════════════════════════════════════════════════════════ */

/* Font utilities */
.font-serif { font-family: var(--font-serif) !important; }
.font-sans  { font-family: var(--font-sans) !important; }
.font-mono  { font-family: var(--font-mono) !important; }

/* H1–H3: always Spectral per brand spec */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

/* H4–H6: Inter */
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }

p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.65;
}

/* Text size utilities */
.text-xs   { font-size: 11px; }
.text-sm   { font-size: 12px; }
.text-base { font-size: 14px; }
.text-md   { font-size: 15px; }
.text-lg   { font-size: 16px; }
.text-xl   { font-size: 18px; }
.text-2xl  { font-size: 22px; }
.text-3xl  { font-size: 28px; }

/* Font weight utilities */
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Text color utilities */
.text-gold      { color: var(--gold); }
.text-gold-dark { color: var(--gold-dark); }
.text-muted     { color: var(--text-3); }
.text-light     { color: var(--text-4); }
.text-green     { color: var(--green-dark); }
.text-red       { color: var(--red); }
.text-blue      { color: var(--blue-dark); }
.text-orange    { color: var(--orange); }
.text-white     { color: var(--text-inverted); }
.text-primary   { color: var(--primary); }
.text-teal      { color: var(--teal); }
.text-purple    { color: var(--purple); }
.text-emergency { color: var(--emergency-dark); }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Truncate */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Section label (nav section labels, table headers, eyebrows) */
.label-upper {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-4);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT SHELL
   ═══════════════════════════════════════════════════════════════ */
.layout,
.app-shell { display: flex; min-height: 100vh; }

.main-content {
  flex: 1;
  min-height: 100vh;
}

.page-body { padding: 28px 32px; flex: 1; background: var(--bg); }

/* ─── Page Header ─────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

/* Page title — Spectral per brand spec */
.page-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 4px;
}

.page-subtitle {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-3);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ─── Hero Banner ─────────────────────────────────────────── */
/* RULE: background always var(--gold-dark) — never light gold, never primary */
/* RULE: stat tiles NEVER go inside hero — they belong in stat-chips row below */
.hero-banner {
  background: var(--gold-dark, #a0813e);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  color: var(--text-inverted);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

/* Dot-grid texture — CSS-only, no blob divs */
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  border-radius: inherit;
}

/* Guarantee all direct children sit above the dot-grid */
.hero-banner > * {
  position: relative;
  z-index: 1;
}

/* NO blob circles — dots only */
.hero-banner::after { display: none; }

.page-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.page-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex: 1;
  min-width: 0;
}

/* When an icon block is present alongside text, mark the parent with
   .page-hero-left.has-icon and wrap the text content in .page-hero-text:
     <div class="page-hero-left has-icon">
       <div class="page-hero-icon">…</div>
       <div class="page-hero-text">…eyebrow + title + sub…</div>
     </div>
*/
.page-hero-left.has-icon {
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.page-hero-text { flex: 1; min-width: 0; }

/* 52×52 icon box — translucent white bg, white border */
.page-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 10px;
}

/* Hero title — Spectral per brand spec */
.page-hero-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-inverted);
  line-height: 1.1;
  margin-bottom: 10px;
}

.page-hero-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.82);
}

.page-hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

/* Stat meta-row inside hero — icon + value pairs.
   Markup: <div class="hero-meta"><span class="hero-meta-item">…icon… 4.9 rating</span></div> */
.hero-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 10px;
  position: relative; z-index: 1;
}
.hero-meta-item {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.hero-meta-item svg { color: rgba(255,255,255,0.72); flex-shrink: 0; }

/* Hero buttons — brand spec */
/* Ghost: white outline, transparent bg, white text */
.hero-btn,
.btn-hero-ghost,
.btn-hero-solid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
  text-decoration: none;
  white-space: nowrap;
  border: none;
  line-height: 1;
}

.btn-hero-ghost {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--text-inverted);
}
.btn-hero-ghost:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.45); }

/* Solid: white bg, gold-dark text */
.btn-hero-solid {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--gold-dark);
}
.btn-hero-solid:hover { background: var(--text-inverted); }

/* ─── Hero banner — quiet variant ─────────────────────────────
   Brand-safe LIGHT surface variant of .hero-banner with a vertical
   gold accent. Use on dense form/edit pages where the gold-dark
   hero would compete with the form below (e.g. edit-profile.php,
   profile.php settings panes, important-documents.php editors).
   Default hero stays unchanged; opt in by adding `.is-quiet` to
   the .hero-banner element, plus `.is-on-light` on hero buttons. */
.hero-banner.is-quiet {
  background: var(--surface);
  border: none;
  color: var(--text);
  padding: 32px 36px 32px 38px;
}

/* Vertical gold accent rule on the left edge of the card.
   Centered vertically and ~70% of the card's total height. Same
   pattern is reused on .pp-svc-section for consistent editorial
   language across the page. */
.hero-banner.is-quiet::before {
  background-image: none;
  background: var(--gold-dark);
  inset: auto;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 2px;
  border-radius: 0;
}

/* Recolor + resize inherited hero text for light surface.
   Title is bumped to 36px (vs 26px on the gold-dark hero) so the
   editorial weight matches the screenshot reference. Eyebrow margin
   tightened so it sits close to the title. Gap between avatar and
   text column widened for editorial breathing room. Inner row aligns
   to flex-start so actions sit at the top of the card (matches
   screenshot — buttons next to the eyebrow). */
.hero-banner.is-quiet .page-hero-inner { align-items: flex-start; }
.hero-banner.is-quiet .page-hero-actions { align-self: flex-start; }
.hero-banner.is-quiet .page-hero-left.has-icon { gap: 28px; }
.hero-banner.is-quiet .page-hero-eyebrow { color: var(--gold-dark); margin-bottom: 8px; }
.hero-banner.is-quiet .page-hero-title   { color: var(--text); font-size: 36px; line-height: 1.05; margin-bottom: 8px; }
.hero-banner.is-quiet .page-hero-sub     { color: var(--text-3); }

/* Hero-meta items inherit body text on light surface */
.hero-banner.is-quiet .hero-meta-item     { color: var(--text-2); }
.hero-banner.is-quiet .hero-meta-item svg { color: var(--text-3); }

/* When .hero-meta is placed as a direct child of .hero-banner.is-quiet
   (sibling of .page-hero-inner), it spans the full card width with a
   top border separator from the title/badges block above. Padding-left
   aligns the meta items under the title column (avatar 80px + .has-icon
   gap 28px = 108px) so meta sits visually under the title, not the avatar. */
.hero-banner.is-quiet > .hero-meta {
  margin-top: 18px;
  padding-top: 16px;
  padding-left: 108px;
  border-top: 1px solid var(--border);
  gap: 12px 22px;
}
@media (max-width: 640px) {
  .hero-banner.is-quiet > .hero-meta { padding-left: 0; }
}

/* Gold-icon accent option for completion-style meta items */
.hero-banner.is-quiet .hero-meta-item.is-positive svg { color: var(--gold-dark); }

/* Light-surface variants of hero buttons.
   Add .is-on-light alongside .btn-hero-ghost / .btn-hero-solid.
   Default gold-bg buttons are untouched. */
.hero-banner.is-quiet .btn-hero-ghost.is-on-light {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
}
.hero-banner.is-quiet .btn-hero-ghost.is-on-light:hover {
  background: var(--bg);
  border-color: var(--text-3);
  color: var(--text);
}
.hero-banner.is-quiet .btn-hero-solid.is-on-light {
  background: var(--text);
  border: 1px solid var(--text);
  color: var(--text-inverted);
}
.hero-banner.is-quiet .btn-hero-solid.is-on-light:hover {
  background: var(--text-deep, var(--text));
  filter: brightness(0.85);
}

/* ── Hero modifiers for person/profile heroes (extends .is-quiet) ──
   Used on profile.php, public/provider.php (when migrating), and any
   future page where the hero shows a single person's identity. */

/* 1) Round avatar slot — opt-in modifier on .page-hero-icon. Replaces
      the default 52×52 translucent square with an 80×80 round tile in
      pale cream surface; serif initials in gold-dark. */
.page-hero-icon.is-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  border: none;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gold-dark);
}

/* 2) Slim badge row inside the hero, sits between title block and meta.
      Reuses the canonical .badge family with hero-scoped soft surfaces. */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Quiet-hero–scoped badge surfaces (light-bg variants).
   Slimmer + sentence-case than the global status .badge — appropriate
   for hero context where a screaming uppercase pill would overpower
   the title. Only applies inside .hero-banner.is-quiet. */
.hero-banner.is-quiet .badge-green,
.hero-banner.is-quiet .badge-gold {
  text-transform: none;
  letter-spacing: 0.1px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}
.hero-banner.is-quiet .badge-green {
  background: var(--green-light);
  border: 1px solid var(--fade-green);
  color: var(--green-dark);
}
.hero-banner.is-quiet .badge-gold {
  background: var(--badge-bg-gold);
  border: 1px solid var(--fade-gold);
  color: var(--gold-dark);
}

/* Status dot used inside hero-scoped badges (e.g. "Accepting Referrals").
   Picks up currentColor so it follows the badge's tone token. */
.hero-banner.is-quiet .badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* 3) Rating meta-item — gold filled star + bold value + muted count.
      Used in hero-meta when the page surfaces a numeric rating. */
.hero-meta-item.is-rating { color: var(--gold-dark); font-weight: 700; }
.hero-meta-item.is-rating svg { color: var(--gold-dark); }
.hero-meta-item.is-rating .rating-count {
  color: var(--text-4);
  font-weight: 500;
  margin-left: 2px;
}

/* ─── Stat Chips Row (below hero — never inside) ───────────── */
.stat-chips-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.stat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  flex: 1;
  min-width: 160px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.stat-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--surface-4);
}

.stat-chip-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Stat chip value — Spectral */
.stat-chip-value {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.stat-chip-label {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE COMPLETION STRIP — "Finish your profile" pattern
   Used on dashboard.php, edit-profile.php, and the public profile
   when the viewer is the owner. Single-row banner: gold-tinted
   gradient surface · icon tile · title + sub · slim progress bar ·
   percent · primary CTA. Always sits above the page's main content.
   ═══════════════════════════════════════════════════════════════ */
.profile-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(95deg, var(--badge-bg-gold) 0%, var(--surface) 80%);
  border: 1px solid var(--border);
  margin-bottom: 22px;
  box-shadow: var(--shadow-xs);
}
.profile-strip-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--gold-dark);
  color: var(--text-inverted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-strip-text { flex: 1; min-width: 0; }
.profile-strip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.profile-strip-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 1px;
}
.profile-strip-bar {
  width: 120px;
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}
.profile-strip-bar-fill {
  height: 100%;
  background: var(--gold-dark);
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}
.profile-strip-pct {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-dark);
  min-width: 42px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .profile-strip { flex-wrap: wrap; gap: 12px; }
  .profile-strip-bar { width: 100%; order: 4; }
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
   — background var(--surface-2), same as sidebar (seamless, no shadow)
   ═══════════════════════════════════════════════════════════════ */
.topbar {
  height: var(--topbar-height);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px 0 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 20px;
  /* No shadow — seamless with sidebar per brand spec */
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.topbar-menu-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: var(--gold-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  flex-shrink: 0;
}

.topbar-menu-btn:hover { background: var(--primary); color: #fff; }

/* Topbar title — Spectral per brand spec */
.topbar-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}

.topbar-breadcrumb {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-4);
  margin-top: 2px;
}

/* Topbar search */
.topbar-search {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.topbar-search input {
  width: 100%;
  height: 36px;
  border: none;
  border-radius: var(--radius-full);
  padding: 0 16px 0 38px;
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--surface-3);
  color: var(--text);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  outline: none;
}

.topbar-search input::placeholder { color: var(--text-4); }

.topbar-search input:focus {
  background: var(--surface-4);
  box-shadow: var(--focus-ring);
}

.topbar-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-4);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Icon buttons — gold bg, white icon per brand spec */
.topbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  position: relative;
  text-decoration: none;
  flex-shrink: 0;
}

.topbar-icon-btn:hover { background: var(--gold-dark); }

/* Notification dot */
.notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 1px solid var(--surface-2);
}

.notif-dot.emergency {
  background: var(--emergency);
  animation: dot-pulse 1.5s ease infinite;
}

/* Profile pill */
.topbar-profile {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  text-decoration: none;
  margin-left: 4px;
  background: transparent;
}

.topbar-profile:hover { background: rgba(196,169,106,0.08); }

/* Profile avatar initials — Spectral per brand spec */
.topbar-profile-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 12px;
  color: var(--gold-dark);
  overflow: hidden;
  flex-shrink: 0;
}

.topbar-profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.topbar-profile-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.topbar-profile-role {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   — background: var(--surface-2), no shadow, no border (brand spec)
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-width);
  background: var(--surface-2);
  min-height: 100vh;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  /* Refined collapse easing — cubic-bezier(0.65, 0, 0.35, 1) is a smooth
     inOutQuart that decelerates gracefully into both endpoints. The 380ms
     duration is long enough to feel deliberate without being sluggish.
     Width transitions with this curve animate the rail's contraction
     fluidly; transform handles the mobile slide-in/out. */
  transition:
    width 380ms cubic-bezier(0.65, 0, 0.35, 1),
    transform 380ms cubic-bezier(0.65, 0, 0.35, 1);
  /* overflow: visible so collapsed-rail tooltips and the toggle-button
     tooltip can extend horizontally past the right edge without being
     clipped by this stacking context. */
  overflow: visible;
}

/* Brand-name + meta labels fade out smoothly as the rail contracts.
   The opacity transition is timed to align with the width animation
   above so they fade in unison instead of popping. */
.sidebar-brand-name,
.sidebar-brand-meta,
.nav-label,
.nav-section-label,
.nav-badge,
.sidebar-version {
  transition:
    opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* When collapsed, fade out + slight slide-left to feel motion-coupled
   with the rail contracting. The display:none happens after the fade
   so the disappearance doesn't feel abrupt. */
.sidebar.collapsed .sidebar-brand-name,
.sidebar.collapsed .sidebar-brand-meta,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .sidebar-version {
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
}

/* Main content margin animates with the same curve so the page body
   reflows in lockstep with the sidebar's contraction. */

.sidebar::-webkit-scrollbar { display: none; }

/* ─── Sidebar Brand ───────────────────────────────────────── */
.sidebar-brand { padding: 22px 20px 18px; flex-shrink: 0; }

.sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

/* Brand name — Spectral per brand spec */
.sidebar-brand-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
}

.sidebar-brand-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-bottom: 2px;
}

.sidebar-brand-meta {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Portal type badge — neutral gray pill */
.sidebar-portal-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-3);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 5px;
  padding: 3px 7px;
  line-height: 1.4;
}

/* Role badge — gold tint pill */
.sidebar-role-badge {
  display: inline-flex !important;
  align-items: center  !important;
  width: fit-content  !important;
  font-family: var(--font-sans)  !important;
  font-size: 9px  !important;
  font-weight: 700  !important;
  letter-spacing: 0.8px  !important;
  text-transform: uppercase  !important;
  color: var(--gold-dark)  !important;
  background: var(--badge-bg-gold)  !important;
  border: 1px solid var(--badge-border-gold)  !important;
  border-radius: 5px  !important;
  padding: 3px 7px  !important;
  line-height: 1.4  !important;
}

/* Emergency badge — red, visible in sidebar brand area */
.sidebar-emergency-badge {
  display: inline-flex   !important;
  align-items: center   !important;
  gap: 5px   !important;
  width: fit-content   !important;
  font-family: var(--font-sans)   !important;
  font-size: 9px   !important;
  font-weight: 700   !important;
  letter-spacing: 0.8px   !important;
  text-transform: uppercase   !important;
  color: var(--emergency-dark)   !important;
  background: var(--emergency-light)   !important;
  border: 1px solid rgba(220,38,38,0.25)   !important;
  border-radius: 5px   !important;
  padding: 3px 7px   !important;
  line-height: 1.4   !important;
  /* Do NOT animate the whole badge — only the inner dot pulses */
  max-width: 100%   !important;
  box-sizing: border-box   !important;
  overflow: hidden   !important;
  white-space: nowrap   !important;
  text-overflow: ellipsis   !important;
}

/* ─── Navigation ──────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  padding: 6px 0;
  /* Scrolls when nav grows tall. The collapsed-rail tooltips that escape
     this clipping context use position: fixed (see _shared.css) so they
     are not affected by this overflow. */
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-section-label {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 14px 20px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--transition);
  text-decoration: none;
  position: relative;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.nav-item:hover  { background: none; color: var(--text); }
.nav-item.active { background: none; color: var(--text); font-weight: 600; }

/* Icon box — 42×42, 12px radius */
.nav-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-bg-default);
  border-radius: 12px;
  color: var(--text-3);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.nav-item:hover  .nav-icon { color: var(--text-2); }
/* Active: gold bg + white icon per brand spec */
.nav-item.active .nav-icon { background: var(--gold-dark); color: var(--text-inverted); }

/* Emergency nav item special states */
.nav-item.nav-emergency .nav-icon {
  background: var(--icon-bg-red);
  color: var(--emergency);
}
.nav-item.nav-emergency:hover .nav-icon,
.nav-item.nav-emergency.active .nav-icon {
  background: var(--emergency);
  color: var(--text-inverted);
}

.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav badge */
.nav-badge {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-4);
  color: var(--text-3);
  flex-shrink: 0;
  line-height: 1.6;
}

.nav-badge.danger    { background: var(--red-light);      color: var(--red); }
.nav-badge.warning   { background: var(--orange-light);   color: var(--orange); }
.nav-badge.blue      { background: var(--blue-light);     color: var(--blue-dark); }
.nav-badge.green     { background: var(--green-light);    color: var(--green-dark); }
.nav-badge.emergency { background: var(--emergency-light); color: var(--emergency-dark); }

/* ─── Sidebar Footer ────────────────────────────────────────── */
.sidebar-footer { padding: 8px 0 16px; flex-shrink: 0; }

/* Logout — red on hover */
.nav-item--logout { color: var(--text-3); font-weight: 400; }
.nav-item--logout:hover { background: none; color: var(--red); }
.nav-item--logout:hover .nav-icon { color: var(--red); }

.sidebar-version {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-4);
  text-align: center;
  letter-spacing: 0.5px;
  padding: 0 !important;
}

/* Mobile overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30,28,26,0.4);
  z-index: 999;
  backdrop-filter: blur(2px);
}

/* ─── Sidebar Toggle Button (exact Support Steward) ─────────────────────── */
.sidebar-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  flex-shrink: 0;
  padding: 0;
}
.sidebar-toggle-btn:hover {
  color: var(--text);
  background: var(--surface-3);
}
.sidebar-toggle-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Sidebar Scroll Indicator ─────────────────────────────────────
   Canonical styling lives HERE and intentionally uses !important so it
   overrides the per-portal local <style> copies of these classes
   (those render later in <body>, so equal-weight rules would otherwise
   win on source order). The box treatment is explicitly reset because
   the local copies declare width/background/border without !important —
   they must be neutralised, not merely omitted. The svg/.aegis-icon
   selector is .sidebar-scoped to outrank the local stroke-width rule,
   which is itself !important. */

.sidebar-scroll-indicator-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold-dark) !important;
  animation: sidebar-bounce 1.8s ease-in-out infinite !important;
  /* box removed — neutralise the local non-important box declarations */
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sidebar .sidebar-scroll-indicator-inner svg,
.sidebar .sidebar-scroll-indicator-inner .aegis-icon {
  stroke-width: 4 !important;
}
@keyframes sidebar-bounce {
  0%, 100% { transform: translateY(0);   opacity: 0.7; }
  50%       { transform: translateY(2px); opacity: 1; }
}
/* Scroll indicator stays visible in collapsed mode too — same icon, centered.
   The collapsed-specific compact sizing is below. */

/* ─── Sidebar Collapsed (desktop icon rail) ─────────────────── */

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  overflow: visible;
}

.sidebar.collapsed .sidebar-brand-meta,
.sidebar.collapsed .sidebar-brand-name,
.sidebar.collapsed .sidebar-brand-dot,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .sidebar-version { display: none; }

.sidebar.collapsed .sidebar-brand { padding: 18px 0; display: flex; justify-content: center; }
.sidebar.collapsed .sidebar-brand-link { justify-content: center; }
/* When collapsed, the brand-link (logo) is hidden so the toggle becomes
   the sole visible child of brand-top — center it inside the rail. */
.sidebar.collapsed .sidebar-brand-top { justify-content: center; }

.sidebar.collapsed .nav-item { justify-content: center; padding: 5px 0; gap: 0; }
.sidebar.collapsed .nav-icon { width: 44px; height: 44px; border-radius: var(--radius); }

/* Tooltip on hover (collapsed rail).
   The actual tooltip element is created by sidebar.php's JS and appended
   to <body> so it escapes ALL parent overflow/stacking contexts. The CSS
   here only styles that floating element. */
.sidebar.collapsed .nav-item { position: relative; }

.sidebar-floating-tooltip {
  position: fixed;
  transform: translateY(-50%);
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(30,28,26,0.20), 0 1px 3px rgba(30,28,26,0.10);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease;
  z-index: 2147483647;  /* maximum signed 32-bit — above everything */
  visibility: hidden;
}
.sidebar-floating-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.sidebar.collapsed .sidebar-footer { padding: 8px 0 12px; }
.sidebar.collapsed .nav-item--logout { justify-content: center; padding: 5px 0; }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.card:hover { box-shadow: var(--shadow); }

.card-header {
  padding: 18px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Card title — Spectral per brand spec */
.card-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card-subtitle {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.card-body   { padding: 20px 22px; }

.card-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ─── Agreement / Document Card ────────────────────────────────
   Used to list signed documents, agreements, plans on:
     • provider-portal/important-documents.php
     • continuity-steward-portal/important-documents.php
     • support-steward-portal/important-documents.php
     • biz-portal/contracts.php

   Layout: extends .card with a 3px left status rule, then a single
   grid row [icon | main | aside]. Use status modifier classes for
   the left rule color (no internal status badges or progress bars —
   those go in .badge inside .ag-aside).

   Markup:
     <div class="ag-list">
       <article class="card ag-card is-active">
         <div class="ag-row">
           <div class="ag-icon">{aegis_icon}</div>
           <div class="ag-main">
             <div class="ag-eyebrow">MSA</div>
             <div class="ag-title">Master Service Agreement…</div>
             <div class="ag-ref">Provider & CS · MSA-2025-001</div>
             <div class="ag-line">
               <span class="ag-people">
                 <span class="avatar avatar-xs avatar-gold">DR</span>
                 <span class="avatar avatar-xs avatar-dark">MT</span>
                 <span class="ag-name">Holloway & Williams</span>
               </span>
               <span class="sep"></span>
               <span class="ag-when is-ok">{check} Fully executed</span>
             </div>
           </div>
           <div class="ag-aside">
             <span class="badge badge-green">Active</span>
             <div class="ag-actions">…</div>
           </div>
         </div>
       </article>
     </div>

   Status modifiers (left rule color only):
     .is-active      → green-dark
     .is-await       → purple-dark
     .is-expiring    → orange-dark
     .is-expired     → red-dark
     .is-terminated  → red-dark
     .is-draft       → text-4
*/
.ag-list  { display: flex; flex-direction: column; gap: 10px; }
.ag-list .ag-card { margin: 0; }

.ag-card  { position: relative; }
.ag-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--border-dark);
}
.ag-card.is-active::before     { background: var(--green-dark); }
.ag-card.is-await::before      { background: var(--purple-dark); }
.ag-card.is-expiring::before   { background: var(--orange-dark); }
.ag-card.is-expired::before    { background: var(--red-dark); }
.ag-card.is-terminated::before { background: var(--red-dark); }
.ag-card.is-draft::before      { background: var(--text-4); }

.ag-row {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 16px;
  padding: 18px 20px 18px 22px;
  align-items: start;
}

.ag-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--icon-bg-gold);
  color: var(--gold-dark);
}
.ag-icon.is-muted { background: var(--surface-3); color: var(--text-4); }

.ag-main    { min-width: 0; }
.ag-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--gold-dark);
}
.ag-eyebrow .sep  { width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--text-4); }
.ag-eyebrow .pair { color: var(--text-4); }
.ag-title {
  font-family: var(--font-serif);
  font-size: 15.5px; font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 7px 0 2px;
}
.ag-ref { font-size: 12px; color: var(--text-3); }

.ag-line {
  display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap;
  margin-top: 13px;
  font-size: 12px; color: var(--text-3);
}
.ag-people { display: inline-flex; align-items: center; gap: 6px; }
.ag-people .avatar { box-shadow: 0 0 0 1px var(--surface); }
.ag-people .avatar:not(:first-child) { margin-left: -8px; }
.ag-name   { font-weight: 600; color: var(--text-2); margin-left: 2px; }

.ag-line .sep {
  width: 3px; height: 3px;
  border-radius: var(--radius-full);
  background: var(--text-4);
  flex-shrink: 0;
}
.ag-when {
  font-weight: 600;
  color: var(--text-4);
  display: inline-flex; align-items: center; gap: 5px;
}
.ag-when svg            { color: var(--text-4); }
.ag-when.is-ok          { color: var(--green-dark); }
.ag-when.is-ok svg      { color: var(--green-dark); }
.ag-when.is-warn        { color: var(--orange-dark); }
.ag-when.is-warn svg    { color: var(--orange-dark); }
.ag-when.is-danger      { color: var(--red-dark); }
.ag-when.is-danger svg  { color: var(--red-dark); }

.ag-aside {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 12px;
  flex-shrink: 0;
}
.ag-actions { display: flex; gap: 6px; }

@media (max-width: 720px) {
  .ag-row   { grid-template-columns: 40px minmax(0,1fr); }
  .ag-aside { grid-column: 1 / -1; flex-direction: row-reverse; align-items: center; justify-content: flex-end; }
  .ag-line  { row-gap: 6px; }
}

/* ─── Section Header ─────────────────────────────────────────
   Used at the top of a page section (above a list, grid, or table)
   to label the section with a title and optional count/status badge.

   Markup:
     <div class="section-header">
       <div class="section-title">Booking Requests <span class="section-badge">3 New</span></div>
       <button class="btn btn-outline btn-sm">View all</button>
     </div>
*/
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.section-title {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 10px;
}
.section-badge {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  background: var(--red-light); color: var(--red-dark);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

/* ─── Stat Cards ────────────────────────────────────────────── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--transition);
}

.stat-card:hover { box-shadow: var(--shadow); }

.stat-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Stat value — Spectral per brand spec */
.stat-value {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.stat-label { font-family: var(--font-sans); font-size: 12px; color: var(--text-3); }
.stat-sub   { font-family: var(--font-sans); font-size: 11px; color: var(--text-4); }

.stat-trend { font-family: var(--font-sans); font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.stat-trend.up   { color: var(--green-dark); }
.stat-trend.down { color: var(--red); }

/* ─── Emergency Banner ──────────────────────────────────────── */
/* RULE: background var(--red) — NOT var(--emergency) per brand spec */
.emergency-banner {
  /* Matches sidebar + header: var(--surface-2) background */
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  color: var(--text);
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.emergency-banner-icon {
  width: 38px;
  height: 38px;
  background: rgba(200,92,66,0.10);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--red);
}

.emergency-banner-text { flex: 1; min-width: 0; }

.emergency-banner-title {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--red-dark);
  margin-bottom: 3px;
}

.emergency-banner-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-2);
}

@keyframes pulse-emergency {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50%       { box-shadow: 0 0 0 4px rgba(200,92,66,0.12); }
}

/* ─── Assignment Card (Executor-specific) ────────────────────── */
.assignment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
  cursor: pointer;
}

.assignment-card:hover { box-shadow: var(--shadow); }
.assignment-card.emergency { border-left: 4px solid var(--red); }
.assignment-card.standby   { border-left: 4px solid var(--gold); }

.assignment-card-name { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--text); }
.assignment-card-specialty { font-family: var(--font-sans); font-size: 12px; color: var(--text-3); }

/* ─── Task Check Item ────────────────────────────────────────── */
.task-check-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.task-check-item.done { opacity: 0.5; }
.task-check-item.done .task-check-text { text-decoration: line-through; }

/* ─── Item Row (certs, docs, providers in cards) ─────────────── */
.ep-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: border-color var(--transition);
}

.ep-item-row:last-of-type { margin-bottom: 0; }
.ep-item-row:hover { border-color: var(--border-dark); }

.ep-item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ep-item-info { flex: 1; min-width: 0; }
.ep-item-name { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text); }
.ep-item-sub  { font-family: var(--font-sans); font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ep-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ─── Tags & Chips ──────────────────────────────────────────── */
/* RULE: active = var(--text) black bg + white text, inactive hover = gold border + gold-dark text */
.ep-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.ep-tag {
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  background: var(--surface);
  user-select: none;
}

/* Inactive hover: gold border + gold-dark text */
.ep-tag:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
/* Active: solid black bg + white text */
.ep-tag.active { background: var(--text); color: var(--text-inverted); border-color: var(--text); }
.ep-tag.active:hover { background: var(--text-2); border-color: var(--text-2); }

/* Removable tags */
.ep-tag-removable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
}

.ep-tag-remove {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-3);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: background var(--transition), color var(--transition);
  padding: 0;
}

.ep-tag-remove:hover { background: rgba(220,38,38,0.12); color: var(--red); }

/* ─── Escrow / Financial Card ───────────────────────────────── */
.escrow-card {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  color: var(--text-inverted);
  box-shadow: var(--shadow-lg);
}

.escrow-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}

/* Escrow amount — Spectral */
.escrow-amount {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}

.escrow-meta { font-family: var(--font-sans); font-size: 12px; color: rgba(255,255,255,0.5); }

/* ─── Toggle Row (settings page) ────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  gap: 20px;
}

.toggle-row:last-child { border-bottom: none; }
.toggle-row-info strong { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text); display: block; margin-bottom: 2px; }
.toggle-row-info span   { font-family: var(--font-sans); font-size: 12px; color: var(--text-3); }

/* Locked toggle (Emergency Alerts — cannot disable) */
.toggle-row.locked { opacity: 0.75; }
.toggle-row.locked .toggle-row-info::after {
  content: 'Required — cannot be disabled';
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--emergency-dark);
  font-weight: 600;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   CONTRAST RULE (always enforce):
   – btn-primary  → dark/black bg   + WHITE text + WHITE icons
   – btn-gold     → gold bg         + WHITE text
   – btn-danger   → red bg          + WHITE text + WHITE icons
   – btn-green    → green bg        + WHITE text + WHITE icons
   – btn-blue     → blue bg         + WHITE text + WHITE icons
   – btn-outline  → transparent bg  + dark text
   – btn-ghost    → transparent bg  + muted text
   Intent guide:
     Save / Submit / Confirm / Mark Complete / Send → btn-primary
     Secondary save / Draft / gold CTA              → btn-gold
     Cancel / Back / neutral                        → btn-outline
     Destructive                                    → btn-danger
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Sizes */
.btn-xs    { padding: 4px 10px;  font-size: 11px; border-radius: var(--radius-sm); }
/* btn-sm is intentionally identical to .btn — use .btn-small as the canonical alias.
   Both are kept so existing markup keeps working without any template changes. */
.btn-sm,
.btn-small { padding: 8px 16px; font-size: 13px; border-radius: var(--radius); }
.btn-lg    { padding: 11px 22px; font-size: 15px; border-radius: var(--radius-lg); }
.btn-xl    { padding: 14px 28px; font-size: 16px; border-radius: var(--radius-xl); }

/* Icon-only — fully-formed component (no need for paired .btn-outline).
   Rest: transparent bg, inherit color, 1px neutral border.
   Hover: surface-3 bg, dark-gold border, dark-gold icon. */
/* Icon-only — fully-formed component (no need for paired .btn-outline).
   Spec ported 1:1 from .pcard-edit-btn (BP portal profile page). */
.btn-icon,
.btn-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-3);
  cursor: pointer;
  /* Explicit property list (not `all`) — fixes laggy hover. The `all` keyword
     forces the browser to compute transitions for every changeable property,
     producing a perceptible drag even when only paint properties change. */
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  text-decoration: none;
  flex-shrink: 0;
}
.btn-icon    { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.btn-icon-sm { width: 26px; height: 26px; border-radius: var(--radius-sm); }
.btn-icon svg,
.btn-icon-sm svg { pointer-events: none; } /* let mouse events hit the button, not the SVG, so data-tooltip fires on the button */
.btn-icon svg    { width: 14px; height: 14px; }
.btn-icon-sm svg { width: 12px; height: 12px; }

.btn-icon:hover,
.btn-icon-sm:hover {
  background: var(--surface-3);
  border-color: var(--soft-gold);
  color: var(--gold-dark);
}

/* Destructive icon-button variant */
.btn-icon-danger { color: var(--red-dark); }
.btn-icon-danger:hover { background: var(--red-light); border-color: var(--soft-red); color: var(--red-dark); }

/* Primary icon-button variant — gold-dark filled, white icon. Use sparingly:
   only when a row's primary action needs visual emphasis among other icon buttons.
   Common case: "approve" / "preview" / "go" in a row of mostly secondary actions. */
.btn-icon-primary { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }
.btn-icon-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; opacity: 0.92; }

/* Primary (black bg) — white text + white icons */
.btn-primary { background: var(--gold-dark); color: #fff; }
.btn-primary:hover { background: var(--gold-dark); }

/* Gold — WHITE text. Uses dark gold for stronger contrast and richer brand presence. */
.btn-gold { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }
.btn-gold:hover { background: #7a6230; border-color: #7a6230; }

/* Gold outline */
.btn-gold-outline { background: transparent; color: var(--gold-dark); border: 1px solid var(--gold-dark); }
.btn-gold-outline:hover { background: rgba(196,169,106,0.08); border-color: var(--gold-dark); }

/* Outline */
.btn-outline { background: transparent; color: var(--text-2); border: 1px solid var(--border-dark); }
.btn-outline:hover { color: var(--gold-dark); background: var(--surface-2); }

/* Ghost */
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border-dark); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-dark); }

/* Danger */
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: var(--red-dark); }

.btn-success { background: var(--green-dark); color: #fff; }
.btn-success:hover { background: var(--green); box-shadow: var(--shadow-green); transform: translateY(-1px); }

/* Green */
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); box-shadow: var(--shadow-green); transform: translateY(-1px); }

/* Blue */
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); transform: translateY(-1px); }

/* Emergency — pulsing red CTA */
.btn-emergency {
  background: var(--emergency);
  color: #fff;
  border-radius: var(--radius-sm);
  animation: pulse-emergency-btn 2.5s ease infinite;
}
.btn-emergency:hover { background: var(--emergency-dark); transform: translateY(-1px); }

@keyframes pulse-emergency-btn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* White (for dark bg contexts — hero buttons, emergency banners) */
.btn-white { background: var(--text-inverted); color: var(--primary); }
.btn-white:hover { background: rgba(255,255,255,0.88); }

.btn-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   BADGES / PILLS
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0px 7px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-green     { background: var(--green-light);       color: var(--green-dark);     border: 1px solid var(--green); }
.badge-red       { background: var(--red-light);         color: var(--red-dark);       border: 1px solid var(--red); }
.badge-gold      { background: rgba(196,169,106,0.15);   color: var(--gold-dark);      border: 1px solid var(--gold); }
.badge-blue      { background: var(--blue-light);        color: var(--blue-dark);      border: 1px solid var(--blue); }
.badge-orange    { background: var(--orange-light);      color: var(--orange-dark);    border: 1px solid var(--orange); }
.badge-purple    { background: var(--purple-light);      color: var(--purple-dark);    border: 1px solid var(--purple); }
.badge-gray      { background: var(--surface-3);         color: var(--text-3);         border: 1px solid var(--border-dark); }
.badge-dark      { background: var(--primary);           color: var(--text-inverted);  border: 1px solid var(--primary-dark, var(--primary)); }
.badge-emergency { background: var(--emergency-light);   color: var(--emergency-dark); border: 1px solid var(--emergency); }
.badge-teal      { background: var(--teal-light);        color: var(--teal-dark);      border: 1px solid var(--teal); }

/* ─── AegisBadge component variants (badge--{variant}) ─────────────────────────
   These map 1:1 to the AegisBadge.vue variantClass computed.
   Always 1px bordered for visual consistency across all badge surfaces.
   ─────────────────────────────────────────────────────────────────────────── */
.badge--neutral  { background: var(--surface-3);         color: var(--text-3);         border: 1px solid var(--border-dark); }
.badge--green    { background: var(--green-light);       color: var(--green-dark);     border: 1px solid var(--green); }
.badge--red      { background: var(--red-light);         color: var(--red-dark);       border: 1px solid var(--red); }
.badge--gold     { background: rgba(196,169,106,0.15);   color: var(--gold-dark);      border: 1px solid var(--gold); }
.badge--blue     { background: var(--blue-light);        color: var(--blue-dark);      border: 1px solid var(--blue); }
.badge--orange   { background: var(--orange-light);      color: var(--orange-dark);    border: 1px solid var(--orange); }
.badge--purple   { background: var(--purple-light);      color: var(--purple-dark);    border: 1px solid var(--purple); }
.badge--teal     { background: var(--teal-light);        color: var(--teal-dark);      border: 1px solid var(--teal); }
.badge--soft     { background: var(--surface-2);         color: var(--text-2);         border: 1px solid var(--border); }

/* ─── Aegis Verified Badge (LinkedIn-style blue check) ─────────
   Three variants:
   .aegis-verified-badge           default pill (dot + label)
   .aegis-verified-badge-sm        compact pill for dense UI
   .aegis-verified-badge-icon-only standalone tick (no label)
   ──────────────────────────────────────────────────────────── */
.aegis-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(74,144,196,0.12);
  color: var(--blue-dark, #2a6a9a);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
}
.aegis-verified-badge::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--blue, #4a90c4);
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><polyline points='3 8 6.5 11.5 13 4.5' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}

/* Small variant — for dense lists, contact items, inline-with-name */
.aegis-verified-badge-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: rgba(74,144,196,0.12);
  color: var(--blue-dark, #2a6a9a);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
}
.aegis-verified-badge-sm::before {
  content: '';
  display: inline-flex;
  width: 12px;
  height: 12px;
  background: var(--blue, #4a90c4);
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><polyline points='3 8 6.5 11.5 13 4.5' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
}

/* Icon-only variant — just the blue tick, no label, no pill bg.
   Use inline next to a name where a label would be redundant. */
.aegis-verified-badge-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--blue, #4a90c4);
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><polyline points='3 8 6.5 11.5 13 4.5' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}
.aegis-verified-badge-icon-only.sm { width: 12px; height: 12px; background-size: 7.5px 7.5px; margin-left: 3px; }
.aegis-verified-badge-icon-only.on-dark { background: #ffffff; }
.aegis-verified-badge-icon-only.on-dark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><polyline points='3 8 6.5 11.5 13 4.5' stroke='%234a90c4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* Badge-dot (inline status indicator) */
.badge-dot { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; }
.badge-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.badge-dot.active::before   { background: var(--green); }
.badge-dot.inactive::before { background: var(--text-4); }
.badge-dot.pending::before  { background: var(--orange); }
.badge-dot.danger::before   { background: var(--red); }
.badge-dot.emergency::before { background: var(--emergency); }

/* Status dot standalone */
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-dot.green     { background: var(--green); }
.status-dot.red       { background: var(--red); }
.status-dot.orange    { background: var(--orange); }
.status-dot.gold      { background: var(--gold); }
.status-dot.blue      { background: var(--blue); }
.status-dot.gray      { background: var(--text-4); }
.status-dot.emergency { background: var(--emergency); }
.status-dot.pulse     { animation: dot-pulse 2s ease infinite; }

@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */

/* Underline tabs */
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  text-decoration: none;
}

.tab:hover  { color: var(--primary); background: var(--surface-2); }
.tab.active { color: var(--primary); border-bottom-color: var(--gold-dark); font-weight: 700; background: none; }

.tab-panel  { display: none; }
.tab-panel.active { display: block; }

/* Pill tabs */
/* RULE: active = var(--gold) bg + white text. Never override this. */
.tabs-pill { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }

/* Segmented-track variant — pills sit inside a single rounded track,
   no individual borders, active pill gets gold-dark fill. Used as a
   third canonical tab pattern alongside .tabs (underline) and
   .tabs-pill (standalone outline pills). */
/* ═══════════════════════════════════════════════════════════════
   SEGMENTED TABS — pill-shaped container with pill-shaped tabs.
   Used wherever .tabs-segmented is rendered. Active tab fills with
   --gold-dark and inverts text. Standalone .tab-pill (outside the
   container) follows the same pill shape but with its own
   surface-bg + bordered resting state for use as standalone chips.
   ═══════════════════════════════════════════════════════════════ */
.tabs-segmented {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  margin-bottom: 22px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-segmented::-webkit-scrollbar { display: none; }
.tabs-segmented .tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color .22s cubic-bezier(0.4, 0, 0.2, 1),
    color .22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1);
}
.tabs-segmented .tab-pill:hover {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  color: var(--text);
}
.tabs-segmented .tab-pill.active {
  background: var(--gold-dark);
  border: none;
  color: #fff;
  box-shadow: 0 1px 4px rgba(160,129,62,0.28);
}
.tabs-segmented .tab-pill.active:hover {
  background: var(--gold-dark);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(160,129,62,0.38);
}

/* Standalone .tab-pill (outside .tabs-segmented) — used as a single
   chip with its own bordered resting state */
.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition:
    background-color .22s cubic-bezier(0.4, 0, 0.2, 1),
    border-color .22s cubic-bezier(0.4, 0, 0.2, 1),
    color .22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--surface);
  text-decoration: none;
  white-space: nowrap;
}

.tab-pill:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--gold-dark);
  color: var(--gold-dark);
  box-shadow: var(--shadow-xs);
}
.tab-pill.active {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--text-inverted);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}
.tab-pill.active:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  color: var(--text-inverted);
}

.tab-pane        { display: none; }
.tab-pane.active { display: block; }

/* Count chip embedded in .tab-pill — small numeric badge (e.g. "3 pending") */
.tab-pill .badge-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--text-2);
  line-height: 1.4;
}
.tab-pill.active .badge-pill { background: rgba(255,255,255,0.22); color: #fff; }

/* ─── Chips (input tags / specialties) ──────────────────────────
   Small inline tag with optional × remove button. Used for entered
   tags (specialties, keywords, selected items in a multi-select).

   Markup:
     <div class="chip-list">
       <span class="chip">Behavioral Health</span>
       <span class="chip gold">Featured <button class="chip-remove">×</button></span>
     </div>
*/
.chip-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px; align-items: center;
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
}
.chip.gold { background: var(--badge-bg-gold); border-color: transparent; color: var(--gold-dark); }
.chip-remove {
  background: none; border: none; padding: 0 0 0 4px;
  color: var(--text-4); cursor: pointer;
  line-height: 1;
  display: inline-flex; align-items: center;
}
.chip-remove:hover { color: var(--red-dark); }
/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 5px;
}

.form-label .required { color: var(--red); margin-left: 3px; }
.form-hint  { font-family: var(--font-sans); font-size: 11px; color: var(--text-3); margin-top: 4px; line-height: 1.5; display: block; width: 100%; flex-basis: 100%; }
.form-error { font-family: var(--font-sans); font-size: 11px; color: var(--red); margin-top: 2px; display: block; width: 100%; flex-basis: 100%; }

/* Input / Textarea / Select */
.form-input,
.form-control,
.form-select,
.form-textarea {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  outline: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-control::placeholder,
.form-textarea::placeholder { color: var(--text-4); }

/* Focus: gold border only — no box-shadow */
.form-input:focus,
.form-control:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--gold-dark);
  box-shadow: none;
}

.form-input:disabled,
.form-control:disabled,
.form-select:disabled,
.form-textarea:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }

.form-input.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
.form-input.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
.form-input.is-error,
.form-control.is-error,
.form-select.is-error,
.form-textarea.is-error,
.form-input.is-error:focus,
.form-control.is-error:focus,
.form-select.is-error:focus,
.form-textarea.is-error:focus,
.form-input.is-error:hover,
.form-control.is-error:hover,
.form-select.is-error:hover,
.form-textarea.is-error:hover {
  border-color: var(--red) !important;
  box-shadow: none !important;
}

/* Select custom chevron */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237a746c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Small variants for compact rows (e.g. setting-row pickers) */
.form-control-sm,
.form-select-sm,
.form-input-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}
.form-select-sm {
  background-position: right 10px center;
  padding-right: 30px;
  width: auto;
  min-width: 120px;
}
/* If used inside a .form-group (full-form context), restore full width. */
.form-group .form-select-sm,
.form-row .form-select-sm { width: 100%; }

.form-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }

/* Input group */
.input-group { position: relative; }
.input-group .form-input,
.input-group .form-control { padding-left: 38px; }

/* Number input with a trailing unit label ( /hr  /mo  total )
   The wrapper is self-sizing so it never conflicts with adjacent TomSelect wrappers. */
.input-suffix-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
}
.input-suffix-wrap .form-input {
  width: 130px;
  min-width: 80px;
  flex: 0 0 auto;
}
.input-suffix {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.input-group-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-4);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.input-group-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* ─── Section Header ────────────────────────────────────────────
   Standard pattern: title on the left, action button(s) on the right.
   Used across portals for cards / list sections / dashboards. */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.section-title-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.section-title-h .aegis-icon,
.section-title-h svg { color: var(--gold-dark); flex-shrink: 0; }

/* ─── Card Edit Button ──────────────────────────────────────────
   Compact icon-only edit/action button used on profile cards,
   hero corners, and any card that supports inline editing.
   Same shape works on light card backgrounds and on the gold hero. */
.pcard-edit-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pcard-edit-btn:hover {
  background: rgba(255,255,255,0.28);
  text-decoration: none;
  transform: translateY(-1px);
}
.pcard-edit-btn:focus { outline: none; box-shadow: none; }

/* On light surfaces (e.g. inside a regular card body) — clean white square with soft shadow */
.card .pcard-edit-btn,
.surface .pcard-edit-btn,
.pcard-edit-btn.is-light {
  background: #ffffff;
  border: 1px solid var(--border, #e5e1d8);
  color: var(--text-2, #5a5a5a);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card .pcard-edit-btn:hover,
.surface .pcard-edit-btn:hover,
.pcard-edit-btn.is-light:hover {
  background: #fafaf8;
  border-color: var(--gold-dark);
  color: var(--gold-dark);
  box-shadow: 0 2px 4px rgba(160,129,62,0.10), 0 1px 2px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

/* Form row grids */
.form-row   { display: grid; gap: 14px; }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* ─── Checkbox & Radio ────────────────────────────────────────── */
/* GLOBAL: every input[type=checkbox] and input[type=radio] on the site
   gets gold-branded checked styling unless explicitly overridden.
   Scoped overrides like .form-check below still apply for layout-specific tweaks. */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--border-dark, #cec8be);
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  vertical-align: middle;
  position: relative;
}

input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:checked {
  background: var(--gold-dark);
border-color: var(--gold-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpolyline points='2 6 5 9 10 3' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

input[type="radio"]:checked {
  background: var(--gold-dark);
border-color: var(--gold-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

input[type="checkbox"]:hover:not(:checked),
input[type="radio"]:hover:not(:checked) { border-color: var(--gold, #c4a96a); }

input[type="checkbox"]:focus,
input[type="radio"]:focus { outline: none; box-shadow: none; }

/* Item-row helper (used in review modals etc.) — inherits global checkbox styling. */
.review-check {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  accent-color: var(--gold-dark);
}

/* RULE: -webkit-appearance: none (NOT appearance: none)
         Gold fill + white SVG checkmark on checked
         NO background: var(--surface) on base state */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 8px;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--border-dark, #cec8be);
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.form-check input[type="checkbox"]:checked {
  background: var(--gold-dark);
border-color: var(--gold-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpolyline points='2 6 5 9 10 3' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

.form-check input[type="radio"] { border-radius: 50%; }

.form-check input[type="radio"]:checked {
  background: var(--gold);
  border-color: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.form-check input[type="checkbox"]:hover:not(:checked),
.form-check input[type="radio"]:hover:not(:checked) { border-color: var(--gold-dark); }

.form-check input[type="checkbox"]:focus,
.form-check input[type="radio"]:focus { outline: none; box-shadow: none; }

.form-check-label { font-family: var(--font-sans); font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ep-check-item: item-row style checkbox */
.ep-check-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.ep-check-item:hover { background: var(--surface-2); }

.ep-check-item input[type="checkbox"] {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--border-dark, #cec8be);
  border-radius: 4px;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ep-check-item input[type="checkbox"]:checked {
  background: var(--gold-dark);
border-color: var(--gold-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpolyline points='2 6 5 9 10 3' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}

.ep-check-item input[type="checkbox"]:hover:not(:checked) { border-color: var(--gold-dark); }
.ep-check-item input[type="checkbox"]:focus { outline: none; box-shadow: none; }
.ep-check-grid { display: flex; flex-direction: column; gap: 2px; }

/* ─── Toggle / Switch ────────────────────────────────────────── */
/* RULE: OFF track = var(--border-dark), ON track = var(--gold-dark), thumb always white.

   PRIMARY pattern (button-only — verified smooth, no DOM mutation, no input scanning):
     <button type="button" class="toggle" onclick="toggleSwitch(this)" aria-pressed="false"></button>
     <button type="button" class="toggle on" onclick="toggleSwitch(this)" aria-pressed="true"></button>

   Driven by global toggleSwitch() in _shared.js. Used by services.php, network.php, etc.

   LEGACY pattern (label + hidden input — kept for back-compat only; do not use in new code):
     <label class="toggle"><input type="checkbox"><div class="toggle-track"></div><div class="toggle-thumb"></div></label>
*/
.toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* PRIMARY — button-only toggle */
button.toggle {
  width: 42px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--border-dark);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background var(--transition);
  flex-shrink: 0;
  outline: none;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}
button.toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 18px; height: 18px;
  background: var(--surface);
  border-radius: var(--radius-full);
  transform: translateY(-50%);
  transition: transform var(--transition);
  box-shadow: 0 1px 4px rgba(44,34,24,0.22), 0 0 1px rgba(44,34,24,0.10);
}
button.toggle.on::after { transform: translate(18px, -50%); }
button.toggle.on { background: var(--gold-dark); }
button.toggle:focus-visible { box-shadow: none; }

/* LEGACY — label + hidden input (kept for back-compat only) */
/* LEGACY — label + hidden input (visually identical to button.toggle) */
label.toggle {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
label.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

label.toggle .toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-dark);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition);
}
label.toggle .toggle-slider::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 3px;
  background: var(--surface);
  border-radius: var(--radius-full);
  transform: translateY(-50%);
  transition: transform var(--transition);
  box-shadow: 0 1px 4px rgba(44,34,24,0.22), 0 0 1px rgba(44,34,24,0.10);
}
label.toggle input:checked + .toggle-slider { background: var(--gold-dark); }
label.toggle input:checked + .toggle-slider::after { transform: translate(18px, -50%); }

label.toggle .toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border-dark);
  border-radius: var(--radius-full);
  transition: background var(--transition);
}
label.toggle .toggle-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: var(--radius-full);
  transform: translateY(-50%);
  transition: transform var(--transition);
  box-shadow: 0 1px 4px rgba(44,34,24,0.22), 0 0 1px rgba(44,34,24,0.10);
}
label.toggle input:checked ~ .toggle-track { background: var(--gold-dark); }
label.toggle input:checked ~ .toggle-thumb { transform: translate(18px, -50%); }

.toggle-label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; }

/* ─── Setting Row ─────────────────────────────────────────────
   Canonical toggle-row pattern. Use this anywhere you have a list of
   labelled toggles (services, settings, annual review checklists, etc).
   Bottom-border separator — never card chrome. Card chrome on stacked
   rows inside a modal causes paint glitches on toggle interaction.

   Markup:
     <div class="setting-row">
       <div class="setting-info">
         <div class="setting-label">Title</div>
         <div class="setting-desc">Optional description.</div>
       </div>
       <button type="button" class="toggle on" onclick="toggleSwitch(this)" aria-pressed="true"></button>
     </div>
*/
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.setting-info  { flex: 1; }
.setting-label { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.setting-desc  { font-family: var(--font-sans); font-size: 12px; color: var(--text-3); font-weight: 600; line-height: 1.5; }

/* ─── Upload Zone ────────────────────────────────────────────── */
/* RULE: icon = white SVG on var(--gold-dark) background */
.upload-zone {
  border: 1px dashed var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
  text-align: center;
  background: var(--surface-2);
}

.upload-zone:hover { border-color: var(--gold); background: rgba(196,169,106,0.04); }

/* Upload icon box: gold-dark bg, white SVG icon */
.upload-zone-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverted); /* stroke="#fff" in SVG */
}

.upload-zone-title { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text); }
.upload-zone-sub   { font-family: var(--font-sans); font-size: 12px; color: var(--text-4); }

/* ─── Accordion (collapsible Q/A and disclosures) ────────────
   Used for FAQs, help articles, expandable lists of items.

   Markup:
     <div class="accordion-item open">                  // .open shows .accordion-content
       <div class="accordion-trigger" onclick="…">
         <span>Question or label</span>
         <span class="accordion-caret">…chevron icon…</span>
       </div>
       <div class="accordion-content">Answer body.</div>
     </div>
*/
.accordion-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.accordion-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer; user-select: none;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--text);
  background: var(--surface);
  transition: background var(--transition);
}
.accordion-trigger:hover { background: var(--surface-2); }
.accordion-caret {
  flex-shrink: 0;
  color: var(--text-4);
  transition: transform var(--transition);
}
.accordion-item.open .accordion-caret { transform: rotate(180deg); }
.accordion-content {
  display: none;
  padding: 14px 20px 16px;
  font-family: var(--font-sans);
  font-size: 13px; color: var(--text-2);
  line-height: 1.7;
  border-top: 1px solid var(--border);
}
.accordion-item.open .accordion-content { display: block; }

/* Search input standalone */
.search-input-wrap { position: relative; }
.search-input-wrap .form-input,
.search-input-wrap .form-control { padding-left: 38px; }

.search-input-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-4);
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* Filter bar */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-bar .form-input,
.filter-bar .form-control,
.filter-bar .form-select { max-width: 220px; width: auto; }

/* Filter tag (identical rules to ep-tag) */
.filter-tag {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  background: var(--surface);
  white-space: nowrap;
  user-select: none;
}

.filter-tag:hover { border-color: var(--gold); color: var(--gold-dark); }
.filter-tag.active { background: var(--text); border-color: var(--text); color: var(--text-inverted); }

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13px; }

.table thead tr { background: var(--surface-2); }

.table thead th {
  padding: 11px 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--surface-2); }
.table-actions { display: flex; gap: 6px; align-items: center; }

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */
.alert {
     padding: 10px 10px;
    border-radius: var(--radius);
    border-left: 0px solid;
    font-family: var(--font-sans);
    font-size: 13px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.alert-icon    { flex-shrink: 0; margin-top: 1px; }
.alert-content { flex: 1; }
.alert-title   { font-weight: 700; margin-bottom: 3px; }

.alert-info      { background: var(--blue-light);   border-color: var(--blue);      color: var(--blue-dark); }
.alert-success   { background: var(--green-light);  border-color: var(--green);     color: var(--green-dark); }
.alert-warning   { background: var(--orange-light); border-color: var(--orange);    color: var(--orange-dark); }
.alert-danger    { background: var(--red-light);    border-color: var(--red);       color: var(--red-dark); }
.alert-gold      { background: rgba(196,169,106,0.10); border-color: var(--gold);   color: var(--gold-dark); }
.alert-emergency { background: var(--emergency-light); border-color: var(--emergency); color: var(--emergency-dark); }

/* Buttons inside an .alert keep the alert's on-tone surface on hover — using
   var(--surface-2)/(-3) reads as a cool grey against warm alert tints, which
   looks like an unintended blueish shade. Hover darkens via a translucent
   dark overlay so the button stays integrated with the alert color. */
.alert .btn-outline:hover,
.alert .btn-ghost:hover {
  background: rgba(0,0,0,0.05);
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   TOASTS
   ═══════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--primary);
  color: var(--text-inverted);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  max-width: 380px;
  min-width: 280px;
  animation: toastIn 0.25s ease;
  border-left: 4px solid var(--gold-dark);
}

.toast.success   { border-left-color: var(--green); }
.toast.error     { border-left-color: var(--red); }
.toast.warning   { border-left-color: var(--orange); }
.toast.info      { border-left-color: var(--blue); }
.toast.emergency { border-left-color: var(--emergency); }

.toast-close { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 16px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; }
.toast-close:hover { color: var(--text-inverted); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 20px 60px;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  /* Custom thin scrollbar on overlay */
  scrollbar-width: thin;
  scrollbar-color: var(--border-dark) transparent;
}

.modal-overlay::-webkit-scrollbar { width: 6px; }
.modal-overlay::-webkit-scrollbar-track { background: transparent; }
.modal-overlay::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Lock body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-xl);
  /* NO max-height, NO overflow — modal grows naturally, overlay scrolls */
  overflow: visible;
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(12px);
  transition: transform var(--transition);
  /* Stays within overlay padding — margin auto for centering on short content */
  margin: auto;
  align-self: flex-start;
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}

.modal-sm { max-width: 400px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 900px; }

.modal-header {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  /* No sticky needed — overlay scrolls, not the modal */
}

/* Modal title — Spectral per brand spec */
.modal-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.modal-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  line-height: 1.45;
  margin-top: 3px;
}

/* Modal close — canonical icon-only button, matches .btn-icon */
.modal-close {
  width: 29px; height: 29px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px solid var(--border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  flex-shrink: 0;
}
.modal-close svg { width: 13px; height: 13px; }

.modal-close:hover {
  background: var(--surface-3);
  border-color: rgba(196,169,106,0.4);
  color: var(--gold-dark);
}

.modal-body   { padding: 22px 24px; flex: 1; }

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  /* No sticky needed — overlay scrolls, not the modal */
}

/* Multi-step modal progress.
   Sits inside .modal-body (which already supplies its own padding),
   so we add only a small bottom gap to the next element. */
.modal-steps {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 0 22px;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* When .modal-steps sits BETWEEN .modal-header and .modal-body
   (canonical brand-guide placement), give it the same 24px horizontal
   inset as the header/body so it aligns. When it sits INSIDE
   .modal-body, the body's own 24px horizontal padding wraps it
   already — no extra inset needed. */
.modal-header + .modal-steps { padding-left: 24px; padding-right: 24px; padding-top: 18px; }

.modal-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-4);
  white-space: nowrap;
  flex-shrink: 0;
}

.modal-step.active { color: var(--text); }
.modal-step.done   { color: var(--green-dark); }

.modal-step-num {
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-4);
  flex-shrink: 0;
  line-height: 1;
}

.modal-step.active .modal-step-num { background: var(--gold-dark); color: var(--text-inverted); }
.modal-step.done .modal-step-num   { background: var(--green); color: var(--text-inverted); }

.modal-step-divider {
  flex: 1 1 16px;
  min-width: 12px;
  height: 1px;
  background: var(--border);
  align-self: center;
  flex-shrink: 1;
  margin: 0 6px;
}

/* Mini-label inside a modal body to label a sub-section (e.g. "Pricing", "Schedule").
   Use as the first child of a logical group inside .modal-body. */
.modal-section-label {
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-4);
  margin-bottom: 12px; margin-top: 20px;
}
.modal-section-label:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   DROPDOWNS
   ═══════════════════════════════════════════════════════════════ */
.dropdown { position: relative; display: inline-block; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 500;
  overflow: hidden;
  display: none;
  animation: dropIn 0.14s ease;
}

.dropdown-menu.left { right: auto; left: 0; }

.dropdown.open .dropdown-menu,
.dropdown-menu.open { display: block; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover { background: var(--surface-2); color: var(--text); }
.dropdown-item.danger { color: var(--red); }
.dropdown-item.danger:hover { background: var(--red-light); }

.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ═══════════════════════════════════════════════════════════════
   AVATARS
   Initials font: Spectral per brand spec
   ═══════════════════════════════════════════════════════════════ */
.avatar {
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--gold-dark);
  font-family: var(--font-serif);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-xs  { width: 24px;  height: 24px;  font-size: 10px; }
.avatar-sm  { width: 32px;  height: 32px;  font-size: 12px; }
.avatar-md  { width: 35px;  height: 35px;  font-size: 15px; }
.avatar-lg  { width: 56px;  height: 56px;  font-size: 20px; }
.avatar-xl  { width: 80px;  height: 80px;  font-size: 28px; }
.avatar-2xl { width: 112px; height: 112px; font-size: 38px; }

.avatar-gold { background: var(--gold-dark); color: var(--text-inverted); }
.avatar-dark { background: var(--primary);   color: var(--text-inverted); }
.avatar-red  { background: var(--red-dark);  color: var(--text-inverted); }

.avatar-stack { display: flex; }
.avatar-stack .avatar { border: 1px solid var(--surface); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BARS
   INTENTIONAL EXCEPTION: fill uses gradient (gold-dark → gold)
   ═══════════════════════════════════════════════════════════════ */
.progress { height: 6px; background: var(--surface-3); border-radius: var(--radius-full); overflow: hidden; }
.progress-lg { height: 10px; }
.progress-sm { height: 4px; }

.progress-bar {
  height: 100%;
  background: var(--gold-dark);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.progress-bar.green  { background: var(--green); }
.progress-bar.red    { background: var(--red); }
.progress-bar.blue   { background: var(--blue); }
.progress-bar.orange { background: var(--orange); }

/* ═══════════════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════════════ */
.timeline { position: relative; padding-left: 24px; }

.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--border);
}

.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item:last-child { margin-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: -21px; top: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  border: 1px solid var(--surface-2);
}

.timeline-dot.green     { background: var(--green); }
.timeline-dot.red       { background: var(--red); }
.timeline-dot.blue      { background: var(--blue); }
.timeline-dot.gray      { background: var(--text-4); }
.timeline-dot.emergency { background: var(--emergency); }

.timeline-title { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.timeline-time  { font-family: var(--font-sans); font-size: 11px; color: var(--text-4); margin-bottom: 4px; }
.timeline-desc  { font-family: var(--font-sans); font-size: 12px; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.pagination { display: flex; align-items: center; gap: 4px; margin-top: 20px; justify-content: space-between; }
.card .pagination { margin-top: 0; padding: 12px 16px; border-top: 1px solid var(--border); }

/* AegisPagination.vue classes */
.pagination-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 12px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pagination-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-dark); background: var(--surface-2); }
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pagination-pages { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; justify-content: center; }
.pagination-page  { display: flex; }
.pagination-gap   { width: 34px; text-align: center; font-size: 13px; color: var(--text-4); line-height: 34px; }

.pagination-page-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pagination-page-btn:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--surface-2); }
.pagination-page-btn.is-active { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--text-inverted); cursor: default; }

.pagination-meta { font-size: 12px; color: var(--text-4); font-weight: 500; white-space: nowrap; }

.page-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:hover  { border-color: var(--gold); color: var(--gold-dark); background: var(--surface-2); }
.page-btn.active { background: var(--gold); border-color: var(--gold); color: var(--text-inverted); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════
   DIVIDERS
   ═══════════════════════════════════════════════════════════════ */
.divider { height: 1px; background: var(--border); margin: 20px 0; }

.divider-text { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider-text span { font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   LIST GROUPS
   ═══════════════════════════════════════════════════════════════ */
.list-group { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.list-group-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  transition: background var(--transition);
}

.list-group-item:last-child { border-bottom: none; }
.list-group-item:hover { background: var(--surface-2); }
.list-group-item.clickable { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }

.empty-state-icon { width: 56px; height: 56px; background: var(--surface-3); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--text-4); }

/* Empty state title — Spectral */
.empty-state-title { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.empty-state-text  { font-family: var(--font-sans);  font-size: 13px; color: var(--text-3); max-width: 320px; margin-bottom: 20px; }

/* ═══════════════════════════════════════════════════════════════
   SAVE / STATUS BAR
   ═══════════════════════════════════════════════════════════════ */
.save-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 90;
  box-shadow: 0 -2px 12px rgba(30,28,26,0.06);
  transition: left var(--transition-slow);
}

html.sidebar-collapsed .save-bar { left: var(--sidebar-collapsed-width); }

.save-bar-status { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; color: var(--text-3); }

.save-dot          { width: 7px; height: 7px; border-radius: 50%; }
.save-dot.unsaved  { background: var(--orange); }
.save-dot.saved    { background: var(--gold); }
.save-dot.draft    { background: var(--blue); }

/* ═══════════════════════════════════════════════════════════════
   TOOLTIPS  —  JS-portal implementation
   All [data-tooltip] triggers are handled by resources/js/plugins/tooltip.js
   which appends a single #aegis-tooltip div to <body>, bypassing every
   stacking context, overflow:hidden ancestor, and modal backdrop.
   The ::after pseudo-element approach is intentionally removed — it cannot
   escape ancestor overflow or stacking contexts regardless of z-index.
   ═══════════════════════════════════════════════════════════════ */

/* The singleton tooltip bubble, positioned by JS via fixed coords */
#aegis-tooltip {
  position: fixed;
  z-index: 2147483647;
  background: var(--primary);
  color: var(--text-inverted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(30,28,26,0.18);
  opacity: 0;
  transition: opacity 0.12s ease;
  /* Prevent tooltip from itself triggering mouseenter/leave flicker */
  user-select: none;
}
#aegis-tooltip.is-visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   AEGIS DROPZONE  —  used by resources/js/components/ui/AegisDropzone.vue
   File-upload drop area used in every modal that accepts a file
   (license/insurance/CEU certificate/document upload).
   ═══════════════════════════════════════════════════════════════ */
.aegis-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 18px 16px;
  border: 1px dashed var(--border-dark, var(--border));
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-3);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  text-align: center;
  outline: none;
}
.aegis-dropzone:hover,
.aegis-dropzone:focus-visible {
  border-color: var(--gold-dark);
  background: var(--surface);
  color: var(--text-2);
}
.aegis-dropzone.is-dragging {
  border-color: var(--gold-dark);
  background: var(--badge-bg-gold);
  color: var(--gold-dark);
}
.aegis-dropzone.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.aegis-dropzone-input {
  /* Hidden but focusable native input — clicks on the dropzone delegate to it */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.aegis-dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.aegis-dropzone-content .aegis-icon {
  color: var(--gold-dark);
  margin-bottom: 2px;
}
.aegis-dropzone-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  line-height: 1.4;
}
.aegis-dropzone-pick {
  color: var(--gold-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aegis-dropzone-hint {
  font-size: 11px;
  color: var(--text-4);
  font-weight: 500;
}
.aegis-dropzone.is-compact {
  min-height: 78px;
  padding: 12px 14px;
}

/* ═══════════════════════════════════════════════════════════════
   DATE INPUTS — clicking anywhere in the field opens the picker
   (browser default only triggers on the calendar icon).
   This stretches the native indicator across the entire input so
   the whole control becomes the click target.
   ═══════════════════════════════════════════════════════════════ */
input[type="date"].form-input,
input[type="datetime-local"].form-input,
input[type="time"].form-input,
input[type="month"].form-input,
input[type="week"].form-input {
  cursor: pointer;
  position: relative;
}
input[type="date"].form-input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].form-input::-webkit-calendar-picker-indicator,
input[type="time"].form-input::-webkit-calendar-picker-indicator,
input[type="month"].form-input::-webkit-calendar-picker-indicator,
input[type="week"].form-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL DETAIL ROWS — used in all detail / executor / continuity-plan
   modals (License Details, Insurance Policy Details, Referral Details,
   Executor Panel "Continuity Plan Details", etc.)
   ═══════════════════════════════════════════════════════════════ */
.cc-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.cc-detail-row:last-child { border-bottom: none; }
.cc-detail-label {
  color: var(--text-4);
  font-weight: 500;
  flex-shrink: 0;
}
.cc-detail-value {
  font-weight: 600;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}

/* Section labels above grouped detail rows */
.section-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 8px;
}

/* Executor / steward avatar tile inside Continuity Plan Details modal */
.exec-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--gold-dark);
  color: var(--text-inverted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.exec-role-chip {
  background: var(--badge-bg-gold);
  color: var(--gold-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Inline required-field asterisk used across every form modal */
.req { color: var(--red); font-weight: 700; margin-left: 2px; }

/* ═══════════════════════════════════════════════════════════════
   LOADING STATES
   ═══════════════════════════════════════════════════════════════ */
.skeleton { background: var(--surface-3); border-radius: var(--radius-sm); animation: skeleton-pulse 1.6s ease infinite; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ─── Spinner — global loading indicator ────────────────────────────────────
 * Usage: <span class="spinner spinner-sm" />
 * Sizes: spinner-xs (12px) · spinner-sm (16px) · spinner (20px, default) · spinner-lg (28px)
 * Always pair with :disabled on the button and v-if/v-else on the icon.
 * NEVER use btn-spin or ob-spin — those are the old pattern.
 * ─────────────────────────────────────────────────────────────────────────── */
.spinner    { display: inline-block; width: 20px; height: 20px; border: 2.5px solid rgba(var(--border-rgb, 0,0,0), 0.2); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.65s linear infinite; flex-shrink: 0; vertical-align: middle; }
.spinner-xs { width: 12px; height: 12px; border-width: 1.5px; }
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
/* Onboarding flows use a lighter border to show on dark/gold backgrounds */
.spinner-ob { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Legacy — kept for one-cycle BC, do not use in new code */
.btn-spin { animation: spin 0.7s linear infinite; display: inline-block; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════
   GRID & FLEX UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.grid   { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-5 { grid-template-columns: repeat(5, 1fr); gap: 20px; }

/* Standalone 2-column grid for pairing form fields side-by-side.
   Self-contained — does NOT need an extra .grid class alongside it.
   Use this inside modals when two short form-groups should share a row. */
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.row-2 > .form-group { margin-bottom: 0; }

.gap-4  { gap: 4px; }  .gap-8  { gap: 8px; }  .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }

.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1          { flex: 1; }
.flex-wrap       { flex-wrap: wrap; }
.flex-shrink-0   { flex-shrink: 0; }

.mb-4  { margin-bottom: 4px; }  .mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mt-4  { margin-top: 4px; }     .mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }    .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }    .mt-24 { margin-top: 24px; }

.hidden  { display: none !important; }
.visible { display: block !important; }
.w-full  { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }

  .page-body    { padding: 20px 16px; }

  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .form-row-2, .form-row-3, .form-row-4 { grid-template-columns: 1fr; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header-actions { width: 100%; }

  .topbar { padding: 0 16px; }
  .topbar-search { display: none; }

  .save-bar { left: 0; padding: 12px 16px; }
  .emergency-banner { flex-direction: column; }
}

@media (max-width: 768px) {
  .page-body { padding: 16px; }
  .modal { margin: 0; border-radius: var(--radius-lg); }
  .toast-container { right: 16px; bottom: 16px; left: 16px; }
  .toast { max-width: 100%; min-width: unset; }
  .page-hero-inner { flex-direction: column; }
  .page-hero-actions { margin-top: 14px; }
  .stat-chips-row { flex-direction: column; }
  .stat-chip { min-width: unset; }
}

@media (max-width: 600px) {
  .tabs { overflow-x: auto; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-input,
  .filter-bar .form-select { max-width: 100%; }
  .btn-group { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .btn, .modal-overlay,
  .toast-container, .save-bar { display: none !important; }

  .page-body { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION BLOCK — quiet editorial frame for grouped content.
   Used for "Pending Requests", "Recent Activity", "Saved Searches",
   etc. Different from .card (no shadow, larger radius, more padding,
   and a built-in .section-head divider).
   ═══════════════════════════════════════════════════════════════ */
.section-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px 26px;
  margin-bottom: 24px;
}

.section-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.section-head-text { min-width: 0; }
.section-head-eyebrow {
  font-family: var(--font-sans);
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--gold-dark);
}
.section-head-title {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 4px 0;
  line-height: 1.2;
}
.section-head-sub {
  font-family: var(--font-sans);
  font-size: 12.5px; color: var(--text-3);
  line-height: 1.5;
}
.section-head-sub strong { color: var(--text-2); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   LIST GRID — responsive auto-fill (3-up desktop, 2-up tablet,
   1-up mobile). Used inside .section-block for card listings.
   ═══════════════════════════════════════════════════════════════ */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   PERSON CARD — quiet card variant for people / org listings.
   Opt-in via .card.is-person. Slimmer, no shadow at rest, hover
   lifts only via border-color (no transform — calmer interaction).
   ═══════════════════════════════════════════════════════════════ */
.card.is-person {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card.is-person:hover {
  border-color: var(--text-4);
  box-shadow: 0 1px 3px rgba(30,28,26,0.04);
}
.card.is-person .card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.card.is-person .card-time {
  font-family: var(--font-sans);
  font-size: 11px; color: var(--text-4); font-weight: 500;
  white-space: nowrap;
}

.person-row     { display: flex; align-items: center; gap: 12px; }
.person-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(160,129,62,0.10);
  border: 1px solid rgba(160,129,62,0.24);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 13px; font-weight: 600;
  color: var(--gold-dark);
  letter-spacing: -0.005em;
  flex-shrink: 0;
}
.person-text { min-width: 0; flex: 1; }
.person-name {
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-meta {
  font-family: var(--font-sans);
  font-size: 12px; color: var(--text-3);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.card-actions {
  display: flex; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.card-actions .btn { flex: 1; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   PERSON-CARD ACCEPT BUTTON — scoped black override.
   Inside .card.is-person (used in .section-block listings AND in
   the matching "Review all" modal), .btn-primary is a calm black
   pill (matches the editorial Pending Requests design), NOT the
   brand-gold .btn-primary used elsewhere. Scoped to the card so
   no other primary button on the page is affected.
   ═══════════════════════════════════════════════════════════════ */
.card.is-person .card-actions .btn-primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--text-inverted);
  box-shadow: none;
}
.card.is-person .card-actions .btn-primary:hover {
  background: #000;
  border-color: #000;
  color: var(--text-inverted);
  transform: none;
  box-shadow: none;
}
.card.is-person .card-actions .btn-primary svg {
  color: var(--text-inverted);
  stroke: currentColor;
}

/* Outline (Decline / View Profile) — calmer resting border + neutral hover, no gold tint */
.card.is-person .card-actions .btn-outline {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.card.is-person .card-actions .btn-outline:hover {
  background: var(--bg);
  border-color: var(--text-4);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   BADGE — quiet variants used by person/org cards.
   .is-quiet softens the default badge (lower-case, less padding,
   pill shape). .is-clinical / .is-business are color modifiers.
   ═══════════════════════════════════════════════════════════════ */
.badge.is-quiet {
  font-size: 10px; padding: 3px 8px;
  text-transform: none; letter-spacing: 0.1px;
  font-weight: 600; line-height: 1;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; gap: 5px;
}
.badge.is-clinical {
  background: rgba(46,125,50,0.06);
  border: 1px solid rgba(46,125,50,0.20);
  color: #2e7d32;
}
.badge.is-business {
  background: rgba(160,129,62,0.06);
  border: 1px solid rgba(160,129,62,0.22);
  color: var(--gold-dark);
}

/* ═══════════════════════════════════════════════════════════════
   TWO-TIER TABS — primary scope row + secondary action chips.
   Used on the network page where a master scope (Clinical / Business
   / Tools) decides which secondary actions are relevant.

   Markup:
     <div class="tabs-twotier">
       <div class="tabs-primary">
         <button class="tab-primary [active]" data-scope="...">…</button>
       </div>
       <div class="tabs-secondary">
         <button class="chip [active]" data-scope="..." data-tab="..." [hidden]>…</button>
       </div>
     </div>

   The .chip in .tabs-secondary is a SCOPED variant of the global
   .chip — bigger, transparent at rest, dark fill when active. Global
   .chip (input tags / specialties) is unchanged.
   ═══════════════════════════════════════════════════════════════ */
.tabs-twotier {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

/* Primary row — master scopes */
.tabs-primary {
  display: flex;
  border-bottom: 1px solid var(--border);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-primary::-webkit-scrollbar { display: none; }
.tab-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color var(--transition), border-color var(--transition);
}
.tab-primary:hover { color: var(--text); }
.tab-primary.active {
  color: var(--text);
  border-bottom-color: var(--gold-dark);
}
.tab-primary .aegis-icon { color: currentColor; opacity: 0.7; }
.tab-primary.active .aegis-icon { color: var(--gold-dark); opacity: 1; }

.tabs-primary .tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 700;
  background: var(--badge-bg-gold);
  color: var(--gold-dark);
  border-radius: var(--radius-full);
  margin-left: 4px;
  letter-spacing: 0;
}
.tab-primary.active .tab-count {
  background: var(--gold-dark);
  color: var(--text-inverted);
}

/* Secondary row — scoped action chips */
.tabs-secondary {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  padding-left: 4px;
}
.tabs-secondary .chip[hidden] { display: none; }
.tabs-secondary .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.tabs-secondary .chip:hover {
  background: var(--bg);
  border-color: var(--text-4);
  color: var(--text);
}
.tabs-secondary .chip.active {
  background: var(--text);
  color: var(--text-inverted);
  border-color: var(--text);
  font-weight: 600;
}
.tabs-secondary .chip .aegis-icon { width: 12px; height: 12px; }
.tabs-secondary .chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px;
  font-size: 10px; font-weight: 700;
  background: var(--badge-bg-gold);
  color: var(--gold-dark);
  border-radius: var(--radius-full);
  margin-left: 2px;
}
.tabs-secondary .chip.active .chip-count {
  background: var(--surface-3);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   RECOMMENDATION CARD (.rnp-card) — compact card for AI-suggested
   network partners. Extends .card; opt in by adding .rnp-card plus
   one tier modifier: .is-high (clinical, green), .is-medium
   (clinical, gold), or .is-biz (business, blue).

   Compact layout:
     <article class="card rnp-card is-{tier}">
       <div class="rnp-head">
         <div class="rnp-icon">…</div>          ← 30×30 tile
         <div class="rnp-title-block">
           <div class="rnp-name">…</div>        ← single-line, ellipsis
           <div class="rnp-meta">…</div>        ← single-line, ellipsis
         </div>
         <span class="badge priority-{tier}"></span>   ← 8×8 dot only
       </div>
       <div class="rnp-foot">
         <span class="rnp-stat">
           <span class="rnp-stat-num">N</span> nearby
         </span>
         <span class="rnp-stat-context">…</span>   ← hidden on narrow
         <button class="btn rnp-cta">→</button>    ← 26×26 round arrow
       </div>
     </article>

   Vertical color rail on left, soft tinted glow behind icon, all
   tokenized. Designed for a 4-up grid (≥200px tracks) or a horizontal
   slider with ~220px snap items.
   ═══════════════════════════════════════════════════════════════ */
.rnp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}
.rnp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-dark);
}

/* Vertical priority rail — 4px on the left edge, full card height */
.rnp-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--border-dark);
}
.rnp-card.is-high::before   { background: var(--green); }
.rnp-card.is-medium::before { background: var(--gold-dark); }
.rnp-card.is-biz::before    { background: var(--blue); }

/* Soft tinted glow behind the icon — small to suit the compact card */
.rnp-card::after {
  content: "";
  position: absolute;
  top: -30px; left: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--badge-bg-gold);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--transition);
}
.rnp-card.is-high::after   { background: rgba(76,175,125,0.12); }
.rnp-card.is-medium::after { background: var(--badge-bg-gold); }
.rnp-card.is-biz::after    { background: rgba(74,144,196,0.12); }
.rnp-card:hover::after { opacity: 0.7; }
.rnp-card > * { position: relative; z-index: 1; }

/* Head row — icon · title block · status dot */
.rnp-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rnp-icon {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--fade-gold);
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}
.rnp-card.is-high   .rnp-icon { border-color: var(--fade-green); color: var(--green-dark); }
.rnp-card.is-biz    .rnp-icon { border-color: var(--fade-blue);  color: var(--blue-dark); }

.rnp-title-block { flex: 1; min-width: 0; }
.rnp-name {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rnp-meta {
  margin-top: 1px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Priority badge — collapses to an 8×8 dot. Label text is hidden via
   font-size 0 so it remains in the DOM for screen readers. */
.rnp-card .badge {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  background: currentColor;
}
.rnp-card .badge.priority-high   { background: var(--green-light);  color: var(--green-dark); border: 1px solid var(--fade-green); }
.rnp-card .badge.priority-medium { background: var(--badge-bg-gold); color: var(--gold-dark);  border: 1px solid var(--fade-gold); }
.rnp-card .badge.priority-biz    { background: var(--blue-light);   color: var(--blue-dark);  border: 1px solid var(--fade-blue); }

/* Foot row — compact stat · context · circular arrow CTA */
.rnp-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.rnp-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--text-3);
}
.rnp-stat-num {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.rnp-card.is-high   .rnp-stat-num { color: var(--green-dark); }
.rnp-card.is-medium .rnp-stat-num { color: var(--gold-dark); }
.rnp-card.is-biz    .rnp-stat-num { color: var(--blue-dark); }
/* Right-aligned context label — hidden on narrow tracks. The meta line
   under the name carries the context instead. Override with .is-wide
   on the grid if you want it back. */
.rnp-stat-context { display: none; }

/* Circular icon-only CTA — 26×26, neutral surface, tier-tinted on hover */
.rnp-cta {
  margin-left: auto;
  width: 26px; height: 26px;
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition);
}
.rnp-cta svg { transition: transform var(--transition); }
.rnp-cta:hover svg { transform: translateX(2px); }
.rnp-card.is-high   .rnp-cta:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--text-inverted); }
.rnp-card.is-medium .rnp-cta:hover { background: var(--gold-dark);  border-color: var(--gold-dark);  color: var(--text-inverted); }
.rnp-card.is-biz    .rnp-cta:hover { background: var(--blue-dark);  border-color: var(--blue-dark);  color: var(--text-inverted); }

/* AI Suggested pill — gold-tinted, info-icon trailing (no leading dot) */
.badge-ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--fade-gold);
  border-radius: var(--radius-full);
  background: var(--badge-bg-gold);
  color: var(--gold-dark);
  cursor: default;
}
.badge-ai svg { color: var(--gold-dark); }

/* ═══════════════════════════════════════════════════════════════
   SHADOW-PROVIDER CARD (.rsp-card) — compact left-aligned card for
   AI-matched shadow providers. Extends .card; opt in by adding
   .rsp-card. Designed for a horizontal slider track (~260px snap)
   or a 4-up auto-fill grid (≥240px tracks).

   Anatomy:
     <article class="card rsp-card">
       <header class="rsp-head">
         <span class="rsp-match">94%</span>        ← gold pill, match score
         <span class="rsp-rating">★ 4.9</span>     ← star + number
       </header>
       <div class="rsp-body">
         <div class="rsp-avatar">RM</div>          ← 38px gradient circle
         <div class="rsp-info">
           <div class="rsp-name">…</div>
           <div class="rsp-role">…</div>
           <div class="rsp-loc">📍 …</div>
         </div>
       </div>
       <ul class="rsp-tags">
         <li class="rsp-tag">…</li> · 3 tags
       </ul>
       <footer class="rsp-foot">
         <button class="rsp-act">✉</button>       ← message
         <button class="rsp-act">👁</button>      ← view profile
         <button class="rsp-connect">+ Connect</button>  ← gold pill, right
       </footer>
     </article>
   ═══════════════════════════════════════════════════════════════ */
.rsp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}
.rsp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-dark);
}

/* Head — match% pill on the left, star rating on the right */
.rsp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rsp-match {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 7px 2px 6px;
  border-radius: var(--radius-full);
  background: var(--badge-bg-gold);
  color: var(--gold-dark);
  border: 1px solid var(--fade-gold);
}
.rsp-match svg { color: var(--gold-dark); }
.rsp-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.rsp-rating svg { color: var(--gold-dark); }

/* Body — avatar + identity stack */
.rsp-body { display: flex; align-items: center; gap: 10px; }
.rsp-avatar {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(140deg, var(--gold), var(--gold-dark));
  color: var(--text-inverted);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--surface), 0 0 0 3px var(--soft-gold);
}
.rsp-info { flex: 1; min-width: 0; }
.rsp-name {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rsp-role {
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rsp-loc {
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--text-4);
}
.rsp-loc svg { color: var(--text-4); flex-shrink: 0; }

/* Specialty / focus-area chips */
.rsp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rsp-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  padding: 2px 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Foot — two icon buttons + Connect pill (right-aligned).
   margin-top: auto pins it to the bottom of the card so footers stay
   aligned across the slider row even when card bodies vary in height. */
.rsp-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.rsp-act {
  width: 26px; height: 26px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.rsp-act:hover {
  background: var(--surface-2);
  border-color: var(--soft-gold);
  color: var(--gold-dark);
}
.rsp-connect {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  background: var(--text);
  color: var(--text-inverted);
  border: 1px solid var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), opacity var(--transition);
}
.rsp-connect:hover { background: #000; border-color: #000; }
.rsp-connect.is-connected {
  background: var(--surface-2);
  color: var(--green-dark);
  border-color: var(--fade-green);
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   REFERRAL CARD (.rfc-card) — compact card for referral lists on
   referrals.php. Extends .card; opt in by adding .rfc-card plus
   one tier modifier:
     .is-urgent       red rail (urgent / overdue / unanswered)
     .is-soon         orange rail (soon / awaiting / pending)
     .is-routine      green rail (routine / accepted / treated)
     .is-sent         blue rail (sent / received default)
     .is-declined     grey rail (declined / cancelled / archived)

   Anatomy:
     <article class="card rfc-card is-{tier}">
       <header class="rfc-head">
         <div class="rfc-head-tags">
           <span class="badge ...">Received</span>
           <span class="badge ...">Urgent</span>
         </div>
         <span class="rfc-time">2 hours ago</span>
       </header>
       <div class="rfc-body">
         <div class="rfc-avatar">JD</div>
         <div class="rfc-info">
           <div class="rfc-patient">John D. <span class="rfc-meta">· 35 · M</span></div>
           <div class="rfc-context">
             <span><strong>From:</strong> Dr. Robert Miller, MD</span>
             <span>· Anxiety Disorder (GAD)</span>
           </div>
         </div>
       </div>
       <footer class="rfc-foot">
         <button class="rfc-act">✉</button>
         <button class="rfc-act">👁</button>
         <button class="rfc-cta">Accept</button>
       </footer>
     </article>
   ═══════════════════════════════════════════════════════════════ */
.rfc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 12px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}
.rfc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-dark);
}

/* Vertical priority rail — 4px on the left edge, full card height */
.rfc-card::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--border-dark);
}
.rfc-card.is-urgent::before   { background: var(--red); }
.rfc-card.is-soon::before     { background: var(--orange); }
.rfc-card.is-routine::before  { background: var(--green); }
.rfc-card.is-sent::before     { background: var(--blue); }
.rfc-card.is-declined::before { background: var(--text-4); }

/* Soft tinted glow — tucked into the top-left corner */
.rfc-card::after {
  content: "";
  position: absolute;
  top: -30px; left: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.4;
  transition: opacity var(--transition);
  background: var(--badge-bg-gold);
}
.rfc-card.is-urgent::after   { background: var(--red-light); }
.rfc-card.is-soon::after     { background: var(--orange-light); }
.rfc-card.is-routine::after  { background: var(--green-light); }
.rfc-card.is-sent::after     { background: var(--blue-light); }
.rfc-card.is-declined::after { background: var(--surface-3); opacity: 0.5; }
.rfc-card:hover::after { opacity: 0.7; }
.rfc-card > * { position: relative; z-index: 1; }

/* Head row — status/urgency badges on left, timestamp on right */
.rfc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rfc-head-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.rfc-time {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-4);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Body — avatar + patient identity + context line */
.rfc-body {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rfc-avatar {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(140deg, var(--gold), var(--gold-dark));
  color: var(--text-inverted);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--surface), 0 0 0 3px var(--soft-gold);
}
.rfc-info { flex: 1; min-width: 0; }
.rfc-patient {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rfc-patient .rfc-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--text-3);
  margin-left: 4px;
}
.rfc-context {
  margin-top: 3px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--text-2);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.45;
}
.rfc-context strong { color: var(--text-3); font-weight: 600; }
.rfc-context svg { color: var(--text-4); flex-shrink: 0; }

/* Foot — icon ghost buttons + a single labelled CTA (max 3 actions) */
.rfc-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.rfc-act {
  width: 28px; height: 28px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.rfc-act:hover {
  background: var(--surface-2);
  border-color: var(--soft-gold);
  color: var(--gold-dark);
}
.rfc-act.is-danger:hover {
  border-color: var(--soft-red);
  color: var(--red-dark);
  background: var(--red-light);
}
.rfc-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--text);
  color: var(--text-inverted);
  border: 1px solid var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.rfc-cta:hover { background: #000; border-color: #000; }
.rfc-cta.is-muted {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border);
}
.rfc-cta.is-muted:hover {
  background: var(--surface-3);
  border-color: var(--border-dark);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   PAGER (.pager) — canonical pagination control for tables and
   card lists. Used at the bottom of any list-style pane.

   Markup:
     <div class="pager">
       <div class="pager-info">Showing <strong>5</strong> of 32</div>
       <nav class="pager-nav" aria-label="Pagination">
         <button class="pager-btn" disabled>‹</button>
         <button class="pager-btn is-active">1</button>
         <button class="pager-btn">2</button>
         <button class="pager-btn">3</button>
         <button class="pager-btn">›</button>
       </nav>
     </div>

   Use .is-active for the current page, [disabled] for unreachable
   directional buttons (e.g. Prev on page 1). Both states style
   differently from the resting pager-btn.
   ═══════════════════════════════════════════════════════════════ */
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 4px 0;
}
.pager-info {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-3);
}
.pager-info strong {
  color: var(--text);
  font-weight: 600;
}
.pager-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pager-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.pager-btn:hover:not([disabled]):not(.is-active) {
  background: var(--surface-2);
  border-color: var(--border-dark);
  color: var(--text);
}
.pager-btn.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--text-inverted);
  cursor: default;
}
.pager-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.pager-ellipsis {
  padding: 0 4px;
  color: var(--text-4);
  font-size: 12px;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   THEME OVERRIDES
   Applied via <body class="theme-X"> set by theme_loader.php.
   Each block overrides only the tokens that differ from Aegis Gold (default).
   All other tokens remain unchanged so components stay consistent.
   ═══════════════════════════════════════════════════════════════ */

/* ── btn-primary spec override (gold CTA palette) ─────────────────────────── */
.btn-primary {
  background:   var(--gold-dark);
  color:        #fff;
  border-color: var(--gold-dark);
}
.btn-primary:hover {
  background:   var(--gold-dark);
  filter:       brightness(1.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   THEME: Aegis Gold (default — no override class needed, these are :root values)
   Documented here for reference.
   #c4a96a gold · #a0813e gold-dark · #f4f1ea bg · #ffffff surface
───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   THEME: Dark Mode
───────────────────────────────────────────────────────────────────────────── */
body.theme-dark {
  --primary:          #e8e0d6;
  --primary-mid:      #bdb5aa;
  --primary-light:    #9e9589;
  --gold:             #c4a96a;
  --gold-light:       #d4be90;
  --gold-dark:        #c4a96a;
  --surface:          #1c1a18;
  --surface-2:        #242220;
  --surface-3:        #2e2c29;
  --surface-4:        #3a3835;
  --bg:               #141210;
  --bg-2:             #0e0d0b;
  --border:           #3a3835;
  --border-dark:      #4a4845;
  --text:             #f0ece5;
  --text-2:           #c8c2ba;
  --text-3:           #9a9590;
  --text-4:           #6a6560;
  --text-inverted:    #1c1a18;
  --icon-bg-gold:     rgba(196,169,106,0.15);
  --badge-bg-gold:    rgba(196,169,106,0.12);
  --badge-border-gold:rgba(196,169,106,0.28);
  --modal-overlay-bg: rgba(10,8,6,0.70);
  --shadow-xs:        0 1px 3px rgba(0,0,0,0.30);
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.40);
  --shadow:           0 4px 16px rgba(0,0,0,0.50);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.55);
  --shadow-xl:        0 16px 48px rgba(0,0,0,0.60);
  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────────────────────
   THEME: Gold Deep  (refined deep gold — provided token set)
───────────────────────────────────────────────────────────────────────────── */
body.theme-gold-deep {
  --gold:             #a0813e;
  --gold-light:       #c4a96a;
  --gold-dark:        #7a6230;
  --badge-bg-gold:    rgba(160,129,62,0.10);
  --badge-border-gold:rgba(160,129,62,0.40);
  --soft-gold:        rgba(160,129,62,0.18);
  --icon-bg-gold:     rgba(160,129,62,0.12);
  --shadow-gold:      0 4px 20px rgba(160,129,62,0.30);
  --focus-ring:       0 0 0 3px rgba(160,129,62,0.18);
  --text:             #1e1c1a;
  --text-2:           #3d3a36;
  --text-3:           #6b6660;
  --text-4:           #a89f94;
  --surface:          #ffffff;
  --surface-2:        #f7f5f1;
  --surface-3:        #eeebe5;
  --surface-4:        #e6e2db;
  --border:           #e4dfd7;
  --border-dark:      #d4cfc7;
  --green-dark:       #2e7d55;
  --green-light:      #edf7f2;
  --orange-dark:      #b45309;
  --orange-light:     #fff7ed;
  --red-dark:         #7d211a;
  --blue-dark:        #1d4ed8;
  --blue-light:       #eff6ff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   THEME: Gold Dark  (high-contrast gold — Aegis Gold deepened)
   Requested as additional palette alongside default
───────────────────────────────────────────────────────────────────────────── */
body.theme-gold-dark {
  --gold:             #b8922e;
  --gold-light:       #cda84a;
  --gold-dark:        #8c6a1e;
  --surface:          #fdfaf4;
  --surface-2:        #f7f2e8;
  --surface-3:        #ede5d4;
  --surface-4:        #e0d6c0;
  --bg:               #f2ead8;
  --bg-2:             #e8dfc8;
  --border:           #ddd2b8;
  --border-dark:      #c8bfa0;
  --icon-bg-gold:     rgba(184,146,46,0.15);
  --badge-bg-gold:    rgba(184,146,46,0.10);
  --badge-border-gold:rgba(184,146,46,0.30);
  --shadow-gold:      0 4px 20px rgba(140,106,30,0.35);
  --focus-ring:       0 0 0 3px rgba(184,146,46,0.22);
}

/* ─────────────────────────────────────────────────────────────────────────────
   THEME: Slate Blue  (cool professional slate — Aegis branding variation)
   Gold accent is replaced with slate blue; layout/surface tokens stay neutral.
───────────────────────────────────────────────────────────────────────────── */
body.theme-slate,
html.theme-slate body {
  --gold:              #4a90c4;
  --gold-light:        #6baed6;
  --gold-dark:         #2a6a9a;
  --icon-bg-gold:      rgba(74,144,196,0.12);
  --badge-bg-gold:     rgba(74,144,196,0.10);
  --badge-border-gold: rgba(74,144,196,0.28);
  --soft-gold:         rgba(74,144,196,0.15);
  --fade-gold:         rgba(74,144,196,0.12);
  --shadow-gold:       0 4px 20px rgba(42,106,154,0.25);
  --focus-ring:        0 0 0 3px rgba(74,144,196,0.20);
  --surface:           #ffffff;
  --surface-2:         #f4f7fb;
  --surface-3:         #e8eff8;
  --surface-4:         #dde7f4;
  --bg:                #f0f4fa;
  --bg-2:              #e6edf7;
  --border:            #d8e4f0;
  --border-dark:       #c4d4e8;
  --text:              #1a2a3a;
  --text-2:            #2e4a66;
  --text-3:            #5a7a9a;
  --text-4:            #8aaac8;
}

/* ── Missing from PHP prototype sync ─────────────────── */
.sidebar-toggle-btn[data-tooltip]::after { display: none; }
.topbar [data-tooltip]::after { z-index: 100001; }
.form-input.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid { border-color: var(--red); box-shadow: var(--focus-ring-red); }


/* ══════════════════════════════════════════════════════════════════
   NETWORK PAGE — inline styles ported from network.php
   All rules below are page-specific to provider/network and were
   previously inlined in network.php. Moved here for consistency.
   ═══════════════════════════════════════════════════════════════ */
/* ── Aegis: Missing design-token aliases (bridge shared.css → page) ── */
  :root {
    /* Semantic aliases — alias to brand tokens (no hardcoded hex) */
    --success:          var(--green-dark);
    --danger:           var(--red-dark);
    --warning:          var(--orange-dark);
    --info:             var(--blue-dark);
    --accent:           var(--gold-dark);
    /* Gold palette (mirrors _shared.css --gold vars) */
    --gold-primary:     var(--gold-dark);
    --gold-hover-bg:    var(--badge-bg-gold);
    --gold-light-bg:    var(--badge-bg-gold);
    /* Blue palette */
    --blue-primary:     var(--blue-dark);

    /* Background shorthand */
    --bg:               var(--surface-2);

    /* Text aliases */
    --text-muted:       var(--text-4);      /* #a89f94 */
    --text-secondary:   var(--text-2);      /* #3d3a36 */
    --text-primary:     var(--text);        /* #1e1c1a */

    /* Font aliases */
    --font-heading:     var(--font-serif);
    --font-body:        var(--font-sans);
    /* Inverted shadow for bottom-fixed bars (brand-aligned, mirrors --shadow-sm orientation) */
    --shadow-up:        0 -4px 12px rgba(30, 28, 26, 0.08);
  }

  /* ── Badge variants used on this page ── */
  .badge-active  { background: var(--green-light);   color: var(--green-dark);  border: 1px solid var(--green); }
  .badge-pending { background: var(--orange-light);  color: var(--orange);      border: 1px solid var(--orange); }
  .badge-draft   { background: var(--surface-3);     color: var(--text-3);      border: 1px solid var(--border-dark); }
  .badge-gold    { background: var(--badge-bg-gold); color: var(--gold-dark);   border: 1px solid var(--gold); }
  .badge-danger  { background: var(--red-light);     color: var(--red-dark);    border: 1px solid var(--red); }
  .badge-info    { background: var(--blue-light);    color: var(--blue-dark);   border: 1px solid var(--blue); }
  .badge-sm      { font-size: 10px; padding: 1px 7px; }
  .badge-xs      { font-size: 9px;  padding: 1px 5px; }

  /* ── Button size variants ── */
  /* btn-sm intentionally inherits base .btn size — no mobile override */
  body { display: flex; }

  /* ── NETWORK STATS ROW ── */
  .network-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
  .stat-card         { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
  .stat-card:hover   { transform: translateY(-2px); box-shadow: var(--shadow); }
  .stat-value        { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--primary); line-height: 1; }
  .stat-label        { font-size: 12px; color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

  /* Hero uses canonical .hero-banner.is-quiet + .page-hero-* family from _shared.css.
     .is-quiet defaults to flex-start (correct when an avatar makes the left
     column tall, e.g. profile pages). On network the left column is only
     eyebrow + title + sub (no avatar), so flex-start leaves the button looking
     awkwardly high. Center it — same fix used in referrals.php. */
  .hero-banner.is-quiet .page-hero-inner   { align-items: center; }
  .hero-banner.is-quiet .page-hero-actions { align-self: flex-start; }


  /* Stat chips (canonical Aegis ph-stat pattern, mirrored from profile.php) */
  .ph-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
  }
  .ph-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
  }
  .ph-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--border-dark);
  }
  .ph-stat-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px;
    background: var(--badge-bg-gold);
    color: var(--gold-dark);
  }
  .ph-stat-val {
    font-family: var(--font-serif);
    font-size: 24px; font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 4px;
  }
  .ph-stat-lbl {
    font-size: 11px; font-weight: 600;
    color: var(--text-3);
  }
  .ph-stat-sub {
    font-size: 10.5px;
    color: var(--green-dark);
    margin-top: 3px;
  }
  @media (max-width: 900px) {
    .ph-stats { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 600px) {
    .ph-stats { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── TABS ── */
  .tabs              { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; margin-bottom: 20px; box-shadow: var(--shadow-sm); flex-wrap: wrap; }
  /* Two-tier nav: .tabs-twotier + .tab-primary (primary scope row)
     + .tabs-segmented + .tab-pill (secondary tab row) from _shared.css.
     .tab-btn is a JS-only hook and carries no visual styles. */
  .tab-content       { display: none; }
  .tab-content.active { display: block; }
  /* Override tabs-segmented margin so it sits flush under the primary row — handled per .net-sub-tabs above */

  /* ── PROVIDER NETWORK TOOLBAR ── */
  .pn-toolbar        { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; margin-top:20px; }
  .pn-search-wrap    { position: relative; flex: 1; min-width: 200px; }
  .pn-search-wrap .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; color: var(--text-3); pointer-events: none; }
  .pn-search-wrap .form-input { padding-left: 36px; }
  .pn-filter-chip    { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); cursor: pointer; transition: all var(--transition); flex-shrink: 0; }
  .pn-filter-chip:hover, .pn-filter-chip.active { border-color: var(--gold-dark); color: var(--gold-dark); background: var(--badge-bg-gold); }
  .pn-results-bar    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 12px; color: var(--text-3); }

  /* ── PROVIDER GRID / LIST ── */
  .provider-grid           { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  .provider-grid.list-view { grid-template-columns: 1fr; gap: 10px; }

  /* ── GRID CARD ── */
  .pn-grid-card          { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all var(--transition); position: relative; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
  .pn-grid-card:hover    { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-dark); }
  .pn-grid-card-top      { display: flex; gap: 12px; align-items: flex-start; }
  .pn-avatar-wrap        { position: relative; flex-shrink: 0; }
  .pn-status-dot         { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--surface); }
  .pn-status-dot.active  { background: var(--green); }
  .pn-status-dot.away    { background: var(--orange); }
  .pn-status-dot.inactive { background: var(--text-3); }
  .pn-grid-name          { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 1px; }
  .pn-grid-role          { font-size: 11px; color: var(--text-2); margin-bottom: 4px; }
  .pn-grid-meta          { font-size: 11px; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }
  .pn-grid-meta span     { display: flex; align-items: center; gap: 3px; }
  .pn-grid-badge         { position: absolute; top: 14px; right: 14px; }
  .pn-tags               { display: flex; gap: 5px; flex-wrap: wrap; }
  .pn-tag                { font-size: 10px; font-weight: 600; padding: 2px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-2); }
  .pn-grid-stats         { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; }
  .pn-grid-stat          { text-align: center; padding: 8px 4px; border-right: 1px solid var(--border); }
  .pn-grid-stat:last-child { border-right: none; }
  .pn-grid-stat-val      { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--primary); }
  .pn-grid-stat-lbl      { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); margin-top: 1px; }
  .pn-grid-actions       { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; }

  /* ════════════════════════════════════════════════════════
     CARD DESIGN SYSTEM v2 — Portrait-centered, clean & clear
     ════════════════════════════════════════════════════════ */

  /* ── SHARED CARD CHROME ── */
  .card-v2 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
  }
  .card-v2:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
  .card-v2-band { height: 5px; background: var(--gold-primary); flex-shrink: 0; }
  .card-v2-body { padding: 18px 16px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; gap: 0; }
  .card-v2-avt-wrap { position: relative; margin-bottom: 12px; }
  .card-v2-avt { width: 66px; height: 66px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; color: #fff; flex-shrink: 0; box-shadow: var(--shadow); }
  .card-v2-status { position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--surface); }
  .card-v2-status.active   { background: var(--green-dark); }
  .card-v2-status.away     { background: var(--orange-dark); }
  .card-v2-status.inactive { background: var(--text-3); }
  .card-v2-badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
  .card-v2-rating { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 11px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 2px; }
  .card-v2-name { font-family: var(--font-serif, serif); font-size: 15px; font-weight: 700; color: var(--gold-primary); line-height: 1.25; margin-bottom: 2px; }
  .card-v2-role { font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; }
  .card-v2-loc  { font-size: 11px; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 10px; }
  .card-v2-hr   { width: 100%; height: 1px; background: var(--border); margin: 8px 0; }
  .card-v2-kv   { width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; margin-bottom: 10px; }
  .card-v2-kv-row { display: flex; gap: 5px; font-size: 12px; line-height: 1.4; }
  .card-v2-kv-lbl { font-weight: 700; color: var(--gold-primary); white-space: nowrap; flex-shrink: 0; }
  .card-v2-kv-val { color: var(--text-2); }
  .card-v2-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
  .card-v2-tag  { font-size: 10px; font-weight: 600; padding: 3px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-2); }
  .card-v2-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); border-top: 1px solid var(--border); flex-shrink: 0; }
  .card-v2-stat  { text-align: center; padding: 9px 4px; border-right: 1px solid var(--border); }
  .card-v2-stat:last-child { border-right: none; }
  .card-v2-stat-val { font-family: var(--font-serif, serif); font-size: 17px; font-weight: 700; color: var(--primary); line-height: 1.1; }
  .card-v2-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-top: 2px; }
  .card-v2-actions { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
  .card-v2-actions .btn { flex: 1; justify-content: center; font-size: 11.5px; padding: 7px 6px; }

  /* ── LIST VIEW CARD ── */
  .card-v2-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; align-items: stretch; cursor: pointer; transition: all 0.18s ease; box-shadow: var(--shadow-sm); }
  .card-v2-list:hover { box-shadow: var(--shadow); border-color: var(--gold-dark); transform: translateX(2px); }
  .card-v2-list-band { width: 5px; background: var(--gold-primary); flex-shrink: 0; }
  .card-v2-list-inner { flex: 1; display: flex; align-items: center; gap: 14px; padding: 13px 16px; min-width: 0; }
  .card-v2-list-avt { width: 46px; height: 46px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; }
  .card-v2-list-info { flex: 1; min-width: 0; display: grid; grid-template-columns: 210px 1fr auto auto; align-items: center; gap: 14px; }
  .card-v2-list-name { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-v2-list-role { font-size: 11px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-v2-list-loc  { font-size: 10px; color: var(--text-3); margin-top: 2px; }
  .card-v2-list-tags { display: flex; gap: 4px; flex-wrap: wrap; }
  .card-v2-list-stats { display: flex; gap: 20px; }
  .card-v2-list-stat-val { font-family: var(--font-serif, serif); font-size: 16px; font-weight: 700; color: var(--primary); }
  .card-v2-list-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-3); margin-top: 1px; }
  .card-v2-list-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .search-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }


  /* ══════════════════════════════════════════════
     SEARCH PROVIDER — LIST ROW  (pure flex, no grid)
     ══════════════════════════════════════════════ */

  /* outer card */

  /* left photo strip */

  /* middle body — all rows stacked vertically */

  /* row 1: name + network badge */
  .slb-in   { background: var(--green-light);  color: var(--success);      border-color: var(--green-dark); }
  .slb-out  { background: var(--surface-2); color: var(--text-3);       border-color: var(--border); }
  .slb-pend { background: var(--orange-light);  color: var(--warning);      border-color: var(--orange-dark); }

  /* row 2: role · location · response time */

  /* row 3: insurance + rate — key/value pairs inline */

  /* row 4: tags + availability pills */
  .pill-tele { background: var(--blue-light);    color: var(--blue-primary); border-color: var(--blue-dark); }
  .pill-acpt { background: var(--green-light);   color: var(--success);      border-color: var(--green-light); }
  .pill-off  { background: var(--surface-2); color: var(--text-3);       border-color: var(--border); }

  /* stats strip — sits between body and actions */
  .sv-green { color: var(--success); }
  .sv-blue  { color: var(--blue-primary); }
  .sv-muted { color: var(--text-2); }

  /* actions strip — far right */
  .sla-msg  { background: var(--blue-light);   color: var(--blue-dark);    border-color: var(--blue-light); }
  .sla-ref  { background: var(--badge-bg-gold);  color: var(--gold-primary); border-color: var(--badge-bg-gold); }
  .sla-hist { background: var(--surface-2); color: var(--text-2);       border-color: var(--border); }
  .sla-prof { background: var(--surface-2); color: var(--text-2);       border-color: var(--border); }

  /* ── BIZ CARD V2 ── */
  .biz-card-v2 { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: all 0.18s ease; box-shadow: var(--shadow-sm); position: relative; }
  .biz-card-v2:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--gold-dark); }

  /* ── SHADOW CARD V2 ── */
  .shadow-card-v2 { background: var(--blue-light); border: 1px solid var(--blue-light); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: all 0.18s ease; box-shadow: var(--shadow-sm); position: relative; }
  .shadow-card-v2:hover { border-color: var(--blue-dark); box-shadow: 0 6px 20px var(--blue-light); transform: translateY(-3px); }
  .shadow-card-v2 .card-v2-band { background: var(--blue-primary); }
  .shadow-card-v2 .card-v2-name { color: var(--blue-primary); }
  .shadow-card-v2 .card-v2-kv-lbl { color: var(--blue-primary); }


  /* ── LIST CARD ── */
  .pn-list-card          { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); }
  .pn-list-card:hover    { box-shadow: var(--shadow); border-color: var(--border-dark); }
  .pn-list-info          { flex: 1; min-width: 0; display: grid; grid-template-columns: 220px 1fr 1fr auto; align-items: center; gap: 16px; }
  .pn-list-identity      { min-width: 0; }
  .pn-list-name          { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pn-list-role          { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pn-list-tags          { display: flex; gap: 4px; flex-wrap: wrap; }
  .pn-list-stats         { display: flex; gap: 16px; }
  .pn-list-stat          { text-align: center; }
  .pn-list-stat-val      { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--primary); }
  .pn-list-stat-lbl      { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-3); }
  .pn-list-actions       { display: flex; gap: 6px; flex-shrink: 0; }
  @media (max-width: 900px) { .pn-list-info { grid-template-columns: 1fr auto; } .pn-list-tags, .pn-list-stats { display: none; } }

  /* ── PROVIDER PROFILE (full-screen overlay) ── */

  @media (max-width: 768px) {
  }


  @keyframes slideInRight        { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }


  /* ── PROVIDER CARD (generic) ── */
  .provider-card          { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; align-items: flex-start; gap: 14px; transition: all var(--transition); cursor: pointer; position: relative; }
  .provider-card:hover    { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--primary); }
  .provider-name          { font-size: 15px; font-weight: 700; color: var(--text); }
  .provider-role          { font-size: 12px; color: var(--text-2); margin-top: 2px; }
  .provider-meta          { font-size: 11px; color: var(--text-3); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
  .provider-meta span     { display: flex; align-items: center; gap: 4px; }
  .provider-tags          { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
  .provider-card-actions  { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

  /* ── MODAL PROVIDER VIEW ── */
  .pvm-hero       { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
  .pvm-avatar     { width: 72px; height: 72px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 24px; color: #fff; flex-shrink: 0; box-shadow: var(--shadow); }
  .pvm-name       { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--primary); }
  .pvm-role       { font-size: 13px; color: var(--text-2); margin: 2px 0 8px; }
  .pvm-badges     { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
  .pvm-meta-row   { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
  .pvm-meta-row span { display: flex; align-items: center; gap: 4px; }
  .pvm-tabs       { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
  .pvm-tab        { padding: 9px 18px; font-size: 12px; font-weight: 700; color: var(--text-3); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition); }
  .pvm-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
  .pvm-panel      { display: none; }
  .pvm-panel.active { display: block; }
  .pvm-info-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .pvm-label      { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-bottom: 6px; }
  .pvm-stat-row   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
  .pvm-stat-box   { text-align: center; padding: 12px 6px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
  .pvm-stat-val   { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--primary); }
  .pvm-stat-lbl   { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); margin-top: 2px; }
  .pvm-ref-item   { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); margin-bottom: 7px; font-size: 12px; }
  .pvm-ref-badge  { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-full); flex-shrink: 0; }
  .pvm-ref-badge.sent { background: var(--blue-light); color: var(--blue); }
  .pvm-ref-badge.recv { background: var(--green-light); color: var(--green); }
  .pvm-note-area  { width: 100%; min-height: 90px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 13px; resize: vertical; outline: none; }
  .pvm-note-area:focus { border-color: var(--primary); }
  .pvm-avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .pvm-avail-day  { text-align: center; padding: 7px 3px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; border: 1px solid var(--border); }
  .pvm-avail-day.open   { background: var(--green-light); border-color: var(--green); color: var(--green); }
  .pvm-avail-day.closed { background: var(--surface-2); color: var(--text-3); }
  .pvm-avail-time { font-size: 8px; font-weight: 600; margin-top: 2px; }

  /* ── SHADOW CARDS ── */
  .shadow-card        { background: var(--blue-light); border: 1px solid var(--blue-light); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; transition: all var(--transition); }
  .shadow-card:hover  { border-color: var(--blue-dark); box-shadow: var(--shadow); transform: translateY(-2px); }
  .shadow-card::before { content: ''; position: absolute; top: 14px; right: 14px; font-size: 22px; opacity: 0.35; }
  .shadow-name        { font-size: 15px; font-weight: 700; color: var(--primary); }
  .shadow-desc        { font-size: 12px; color: var(--text-2); margin-top: 3px; }
  .shadow-stat        { font-size: 11px; color: var(--text-3); display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
  .shadow-match-bar   { margin-top: 12px; }
  .shadow-match-bar .bar-wrap  { background: var(--border); height: 6px; border-radius: var(--radius-full); overflow: hidden; }
  .shadow-match-bar .bar-fill  { height: 100%; border-radius: var(--radius-full); transition: width 0.8s ease; }
  .shadow-match-bar .bar-fill.green  { background: var(--green); }
  .shadow-match-bar .bar-fill.orange { background: var(--orange); }
  .shadow-match-bar .bar-fill.blue   { background: var(--blue); }
  .shadow-match-bar .bar-label { font-size: 11px; color: var(--text-3); margin-top: 3px; }
  .shadow-connected-card       { background: var(--green-light); border: 1px solid var(--green-light); border-radius: var(--radius); padding: 18px; transition: all var(--transition); }
  .shadow-connected-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .shadow-status-dot           { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 5px; }

  /* ── CONFIG LAYOUT ── */
  .config-layout     { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: flex-start; }
  .config-nav        { position: sticky; top: 80px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .config-nav::-webkit-scrollbar { width: 4px; }
  .config-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
  .config-nav::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }
  .config-nav-header { padding: 11px 16px 9px; border-bottom: 1px solid var(--border); font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--primary); }
  .config-nav-item   { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; border-left: 3px solid transparent; transition: all var(--transition); text-decoration: none; user-select: none; }
  .config-nav-item:hover  { background: var(--surface-2); color: var(--primary); }
  .config-nav-item.active { background: var(--badge-bg-gold); color: var(--gold-dark); border-left-color: var(--gold-dark); font-weight: 700; }
  .config-nav-badge  { margin-left: auto; background: var(--primary); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: var(--radius-full); }

  /* Pending Connection Requests uses canonical .section-block + .card.is-person
     + .person-row + .badge.is-quiet.is-clinical / .is-business from _shared.css. */

  .config-content    { min-width: 0; }

  /* ── CONFIG PANEL (collapsible) ── */
  .cfg-panel           { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden; scroll-margin-top: 88px; }
  .cfg-panel-header    { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; user-select: none; cursor: pointer; transition: background var(--transition); }
  .cfg-panel-header:hover { background: var(--surface-2); }
  .cfg-panel-header-left { display: flex; align-items: center; gap: 12px; }
  .cfg-panel-icon      { width: 36px; height: 36px; border-radius: var(--radius); background: var(--badge-bg-gold); color: var(--gold-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .cfg-panel-icon svg  { color: var(--gold-dark); }
  .cfg-panel-title     { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--primary); }
  .cfg-panel-subtitle  { font-size: 11px; color: var(--text-3); margin-top: 1px; }
  .cfg-panel-meta      { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .cfg-chevron         { display: flex; align-items: center; color: var(--text-4); transition: transform 0.22s ease; flex-shrink: 0; }
  .cfg-panel.open .cfg-chevron { transform: rotate(180deg); }
  .cfg-selected-count  { font-size: 11px; font-weight: 700; background: var(--gold-dark); color: #fff; padding: 2px 9px; border-radius: var(--radius-full); display: none; }
  .cfg-selected-count.show { display: inline-flex; align-items: center; }
  .cfg-panel-body      { padding: 18px 20px 20px; border-top: 1px solid var(--border); }

  /* ── CONFIG INTERNALS ── */
  .cfg-alert       { display: flex; gap: 12px; background: var(--badge-bg-gold); border: 1px solid var(--gold-dark); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; }
  .cfg-alert-icon  { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
  .cfg-alert-title { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 3px; }
  .cfg-alert-text  { font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 0; }
  .cfg-search      { width: 100%; padding: 8px 12px 8px 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 13px; color: var(--text); background: var(--surface-2); outline: none; transition: border-color var(--transition); margin-bottom: 14px; 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='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center; }
  .cfg-search:focus { border-color: var(--primary); background-color: var(--surface); }
  .cfg-subcat      { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-3); padding: 12px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px; margin-top: 4px; }
  .cfg-subcat:first-child { margin-top: 16px; padding-top: 0; }
  .cfg-field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
  .cfg-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-2); margin-bottom: 5px; display: block; }
  .cfg-add-btn     { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--primary); background: none; border: 1px dashed var(--border); padding: 5px 12px; border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition); margin-top: 10px; }
  .cfg-add-btn:hover { border-color: var(--primary); background: var(--surface-2); }
  /* cfg-save-bar — fixed at bottom of viewport when tab-config is active (mirrors ep-save-bar pattern) */
  .cfg-save-bar {
    position: fixed; bottom: 0;
    left: var(--sidebar-width, 260px); right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 8px 24px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    z-index: 90;
    box-shadow: var(--shadow-up);
    /* Hidden by default — shown only when the Configuration tab is active */
    display: none;
  }
  #tab-config.active ~ .cfg-save-bar,
  body.cfg-tab-active .cfg-save-bar { display: flex; }
  .cfg-save-hint   { font-size: 12px; color: var(--text-3); }
  .cfg-save-hint strong { color: var(--primary); }
  /* Bottom padding so last items aren't hidden behind the fixed save bar */
  #tab-config .config-content { padding-bottom: 70px; }

  /* ── CONFIG SELECTABLE ITEMS ── */
  .ctag            { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); cursor: pointer; transition: all var(--transition); margin: 3px 3px 3px 0; user-select: none; }
  .ctag:hover      { border-color: var(--primary); color: var(--primary); background: var(--surface-2); }
  .ctag.selected   { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); font-weight: 700; }
  .ctag.hidden     { display: none; }
  .cfg-provider-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
  .cfg-provider-item  { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none !important; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); background: var(--surface-2); }
  .cfg-provider-item:hover    { background: var(--surface-3); }
  .cfg-provider-item.selected { background: var(--badge-bg-gold); border: 1px solid var(--gold-dark) !important; }
  .cfg-provider-item.selected .cfg-check,
  .cfg-insurance-item.selected .cfg-check {
    background-color: var(--gold-dark);
    border-color: var(--gold-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpolyline points='2 6 5 9 10 3' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .cfg-provider-item.hidden { display: none; }
  .cfg-prov-icon  { display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-3); }
  .cfg-prov-name  { font-size: 12px; font-weight: 600; color: var(--text-2); flex: 1; line-height: 1.3; }
  .cfg-provider-item.selected .cfg-prov-name { color: var(--gold-dark); font-weight: 700; }
  /* .cfg-check — pixel-exact mirror of the global input[type=checkbox] brand style */
  .cfg-check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex-shrink: 0;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    background: var(--surface);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 11px 11px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .cfg-provider-item:hover .cfg-check,
  .cfg-insurance-item:hover .cfg-check {
    border-color: var(--gold-dark);
    box-shadow: var(--focus-ring-checkbox);
  }
  .cfg-provider-item.selected .cfg-check,
  .cfg-insurance-item.selected .cfg-check {
    box-shadow: var(--focus-ring-checkbox);
  }
  .cfg-insurance-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 7px; margin-top: 6px; }
  .cfg-insurance-item  { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); }
  .cfg-insurance-item:hover    { background: var(--surface-3); color: var(--text); }
  .cfg-insurance-item.selected { background: var(--badge-bg-gold); color: var(--gold-dark); }

  .cfg-insurance-item.hidden { display: none; }
  .cfg-state-grid  { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-height: 220px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
  .cfg-state-item  { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); transition: all var(--transition); user-select: none; }
  .cfg-state-item:hover    { border-color: var(--primary); color: var(--primary); }
  .cfg-state-item.selected { border-color: var(--gold-dark); background: var(--gold-dark); color: #fff; }

  /* ── SEARCH LAYOUT ── */
  .search-layout        { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: flex-start; }
  .qtoggle             { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2); cursor: pointer; transition: all var(--transition); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
  .qtoggle svg         { flex-shrink: 0; }
  .qtoggle:hover       { border-color: var(--primary); color: var(--primary); }
  .qtoggle.on          { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }

  /* ── FILTER SIDEBAR ── */
  /* ── Filter sidebar — ep-nav-styled (mirrors edit-profile.php pattern) ── */
  .filter-sidebar        { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 10px 0; box-shadow: var(--shadow-sm); position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .filter-sidebar::-webkit-scrollbar { width: 4px; }
  .filter-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
  .filter-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 12px; }
  .filter-sidebar-title  { font-family: var(--font-sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-4); display: inline-flex; align-items: center; gap: 6px; }
  .filter-sidebar-title svg { color: var(--text-3); }
  .filter-clear-btn      { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); background: none; border: none; cursor: pointer; font-family: var(--font-sans); padding: 4px 8px; border-radius: var(--radius-sm); transition: all var(--transition); }
  .filter-clear-btn:hover { background: var(--red-light); color: var(--red-dark); }
  .active-filters-row    { padding: 8px 4px 12px; display: flex; flex-wrap: wrap; gap: 5px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
  .active-filters-row:empty { display: none; padding: 0; border: none; margin: 0; }
  .active-filter-pill    { background: var(--surface-3); color: var(--primary); font-size: 11px; font-weight: 700; padding: 3px 8px 3px 9px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: background var(--transition); }
  .active-filter-pill:hover { background: var(--red-light); color: var(--red); }
  .active-filter-pill .pill-x { font-size: 13px; line-height: 1; }
  .filter-subcat         { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); margin: 10px 0 6px; }
  .filter-subcat:first-child { margin-top: 4px; }
  .filter-inner-search   { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 12px; color: var(--text); background: var(--surface-2); outline: none; margin-bottom: 8px; transition: border-color var(--transition); }
  .filter-inner-search:focus { border-color: var(--primary); background: var(--surface); }
  .ftag            { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); cursor: pointer; transition: all var(--transition); margin: 2px 2px 2px 0; user-select: none; white-space: nowrap; }
  .ftag:hover      { border-color: var(--primary); color: var(--primary); background: var(--surface-2); }
  .ftag.selected   { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }
  .ftag.hidden     { display: none; }
  .range-row       { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .range-input     { width: 100%; accent-color: var(--gold-dark); cursor: pointer; }
  .range-label     { font-size: 12px; color: var(--text-3); white-space: nowrap; }

  /* ── RESULTS PANEL ── */
  .results-panel    { min-width: 0; }
  .results-topbar   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
  .results-count    { font-size: 13px; color: var(--text-2); }
  .results-count strong { color: var(--primary); }
  .results-sort     { display: flex; align-items: center; gap: 8px; }
  /* search-results-grid mobile: stack naturally */

  /* ── RECOMMENDED SECTION ── */
  .rec-section        { margin-bottom: 24px; }
  .rec-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
  .rec-section-title  { display: flex; align-items: center; gap: 10px; }
  .rec-section-title h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--primary); margin: 0; }
  .rec-ai-badge       { display: inline-flex; align-items: center; gap: 4px; background: var(--badge-bg-gold); border: 1px solid var(--gold-dark); color: var(--gold-primary); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); letter-spacing: 0.4px; text-transform: uppercase; }
  .rec-section-subtitle { font-size: 12px; color: var(--text-3); margin-top: 2px; }
  .rec-partner-grid   { display: flex; gap: 14px; margin-bottom: 6px; overflow-x: auto; overflow-y: hidden; padding: 8px 0; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .rec-partner-grid::-webkit-scrollbar { height: 4px; }
  .rec-partner-grid::-webkit-scrollbar-track { background: transparent; }
  .rec-partner-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); transition: background var(--transition); }
  .rec-partner-grid:hover::-webkit-scrollbar-thumb { background: var(--border-dark); }
  .rec-partner-grid > .rec-partner-card { flex: 0 0 280px; scroll-snap-align: start; }
  /* New compact .rnp-card variant lives in the same horizontal slider track. */
  .rec-partner-grid > .rnp-card { flex: 0 0 220px; scroll-snap-align: start; }
  .rec-partner-card   { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; transition: all var(--transition); cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
  .rec-partner-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-dark); }
  .rec-partner-card.priority-high   { border-top: 3px solid var(--green); }
  .rec-partner-card.priority-medium { border-top: 3px solid var(--gold-dark); }
  .rec-partner-card.priority-biz    { border-top: 3px solid var(--blue); }
  .rec-partner-icon   { width: 36px; height: 36px; border-radius: var(--radius); background: var(--badge-bg-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .rec-partner-name        { font-size: 13px; font-weight: 700; color: var(--primary); }
  .rec-partner-priority    { font-size: 10px; font-weight: 700; margin-top: 1px; }
  .rec-partner-priority.high   { color: var(--green); }
  .rec-partner-priority.medium { color: var(--gold-dark); }
  .rec-partner-priority.biz    { color: var(--blue); }
  .rec-partner-reason  { font-size: 11px; color: var(--text-3); line-height: 1.5; flex: 1; }
  .rec-partner-cta     { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; transition: all var(--transition); text-align: center; margin-top: auto; }
  .rec-partner-cta:hover { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }
  .rec-shadow-grid     { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 8px 0; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
  .rec-shadow-grid::-webkit-scrollbar { height: 4px; }
  .rec-shadow-grid::-webkit-scrollbar-track { background: transparent; }
  .rec-shadow-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); transition: background var(--transition); }
  .rec-shadow-grid:hover::-webkit-scrollbar-thumb { background: var(--border-dark); }
  .rec-shadow-grid > .rec-shadow-card { flex: 0 0 240px; scroll-snap-align: start; }
  /* New compact .rsp-card variant lives in the same horizontal slider track. */
  .rec-shadow-grid > .rsp-card { flex: 0 0 260px; scroll-snap-align: start; }

  /* ── Minimalist Shadow Card (.rsc-*) — compact, symmetric ── */
  .rsc-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 38px 14px 12px;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
  }
  .rsc-card:hover {
    border-color: var(--gold-dark);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
  }
  .rsc-ai-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--badge-bg-gold);
    border: 1px solid var(--gold-dark);
    color: var(--gold-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    padding: 0;
    transition: all var(--transition);
    flex-shrink: 0;
  }
  /* When inside a .spc-top-pills row, drop absolute positioning so it flows inline */
  .spc-top-pills .rsc-ai-icon {
    position: static;
  }
  .rsc-ai-icon:hover {
    background: var(--gold-dark);
    color: #fff;
  }
  .rsc-rating {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: help;
  }
  .rsc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    margin-bottom: 12px;
  }
  .rsc-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--gold-dark);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
  }
  .rsc-name {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
  }
  .rsc-role {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2);
    line-height: 1.3;
  }
  .rsc-loc {
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 8px;
  }
  .rsc-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
  }
  .rsc-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-2);
  }
  .rsc-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-top: auto;
  }
  /* ── Minimalist Search-Provider Card (.spc-*) — for #searchResultsGrid ── */
  .spc-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 14px 12px;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
  }
  .spc-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
  }
  .spc-top-pills {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    z-index: 2;
  }
  .spc-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    white-space: nowrap;
    line-height: 1;
  }
  .spc-pill.ok    { background: var(--green-light); color: var(--green-dark); border: 1px solid var(--green-dark); }
  /* Services indicator — compact circular icon badge (replaces 'Services' text pill) */
  .spc-svc-icon {
    width: 22px; height: 22px;
    border-radius: var(--radius-full);
    background: var(--badge-bg-gold);
    border: 1px solid var(--gold-dark);
    color: var(--gold-dark);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: help;
    transition: all var(--transition);
    flex-shrink: 0;
  }
  .spc-svc-icon:hover {
    background: var(--gold-dark);
    color: #fff;
  }
  /* Status indicator — compact circular icon badge for In Network / Pending / Not Connected */
  .spc-status-icon {
    width: 22px; height: 22px;
    border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: help;
    transition: all var(--transition);
    flex-shrink: 0;
    border: 1px solid;
  }
  .spc-status-icon.ok    { background: var(--green-light); color: var(--green-dark); border-color: var(--green-dark); }
  .spc-status-icon.warn  { background: var(--orange-light); color: var(--orange-dark); border-color: var(--orange-dark); }
  .spc-status-icon.mute  { background: var(--surface-2); color: var(--text-3); border-color: var(--border-dark); }
  .spc-status-icon:hover { transform: scale(1.08); }
  .spc-pill.warn  { background: var(--orange-light); color: var(--orange-dark); border: 1px solid var(--orange-dark); }
  .spc-pill.mute  { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
  .spc-pill.gold  { background: var(--badge-bg-gold); color: var(--gold-dark); border: 1px solid var(--gold-dark); cursor: help; }
  .spc-rating {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: help;
  }
  .spc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    margin-bottom: 12px;
  }
  .spc-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--gold-dark);
    color: #fff;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
  }
  .spc-name {
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
  }
  .spc-role {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2);
    line-height: 1.3;
  }
  .spc-loc {
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 8px;
  }
  .spc-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2px;
  }
  .spc-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-2);
  }
  .spc-tag-more {
    background: var(--surface);
    color: var(--text-3);
  }
  .spc-stats {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-3);
    text-align: center;
    padding: 8px 0 10px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
  }
  .spc-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
  }

  /* SBP — info icon next to filter labels (small help-cursor pill) */
  .sbp-info-tip {
    display: inline-flex;
    align-items: center;
    color: var(--text-3);
    cursor: help;
    margin-left: 2px;
  }
  .sbp-info-tip:hover { color: var(--gold-dark); }

  /* AI info pill — compact label+icon for 'AI Suggested' / 'AI Matched' in section headers */
  .rec-ai-info {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--radius-full);
    background: var(--badge-bg-gold);
    border: 1px solid var(--gold-dark);
    color: var(--gold-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: help;
    transition: all var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .rec-ai-info:hover {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: #fff;
  }
  .rec-ai-info span { line-height: 1; }
  /* rec-shadow-card::before handled by unified band CSS */
  .rec-shadow-avatar   { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 8px; }
  .rec-shadow-name     { font-size: 13px; font-weight: 700; color: var(--primary); padding-right: 22px; }
  .rec-shadow-role     { font-size: 10px; color: var(--text-2); margin-top: 2px; }
  .rec-shadow-insurance { font-size: 10px; color: var(--text-3); margin-top: 3px; }
  .rec-shadow-match    { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
  .rec-shadow-match .match-pct { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--green); flex-shrink: 0; }
  .rec-shadow-match .match-bar-wrap { flex: 1; height: 4px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; }
  .rec-shadow-match .match-bar-fill { height: 100%; background: var(--green); border-radius: var(--radius-full); }
  .rec-shadow-reason   { font-size: 10px; color: var(--text-2); margin-top: 6px; line-height: 1.4; }
  .rec-shadow-actions  { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
  .rec-divider         { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; }
  .rec-divider-line    { flex: 1; height: 1px; background: var(--border); }
  .rec-divider-label   { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-3); white-space: nowrap; }

  /* ── NETWORK MAP PREVIEW ── */
  .network-map-preview    { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; position: relative; overflow: hidden; min-height: 160px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
  .network-map-preview::before { display: none; }
  .network-map-text       { position: relative; z-index: 1; text-align: center; color: var(--text); }
  .network-map-text h3    { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--gold-dark); margin-bottom: 6px; }
  .network-map-text p     { font-size: 13px; color: var(--text-3); }
  .network-nodes          { position: absolute; inset: 0; z-index: 0; }
  .node-dot               { position: absolute; border-radius: 50%; animation: nodePulse 3s infinite; }
  .node-dot.n1 { width: 10px; height: 10px; background: var(--gold-dark);   top: 25%; left: 20%; animation-delay: 0s; }
  .node-dot.n2 { width: 8px;  height: 8px;  background: var(--blue);   top: 60%; left: 35%; animation-delay: 0.7s; }
  .node-dot.n3 { width: 12px; height: 12px; background: var(--green);  top: 35%; left: 75%; animation-delay: 1.4s; }
  .node-dot.n4 { width: 7px;  height: 7px;  background: var(--text-3);          top: 70%; left: 80%; animation-delay: 2.1s; }
  .node-dot.n5 { width: 9px;  height: 9px;  background: var(--orange); top: 20%; left: 55%; animation-delay: 0.3s; }
  @keyframes nodePulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.6); opacity: 0.3; } }

  /* ── PENDING REQUESTS ── */

  /* ── INSIGHT BOX ── */
  .insight-box       { background: var(--badge-bg-gold); border: 1px solid var(--gold-dark); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
  .insight-box-title { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 6px; }

  /* ── PROFILE STAT GRID ── */
  .profile-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .profile-stat-box  { text-align: center; padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
  .profile-stat-val  { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--primary); line-height: 1; }
  .profile-stat-lbl  { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-top: 3px; }

  /* ── BUSINESS TAB ── */
  .biz-grid-card     { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all var(--transition); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); }
  .biz-grid-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
  .biz-card-top      { display: flex; gap: 12px; align-items: flex-start; }
  .biz-avatar        { width: 52px; height: 52px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; color: #fff; flex-shrink: 0; }
  .biz-card-name     { font-size: 15px; font-weight: 700; color: var(--text); }
  .biz-card-role     { font-size: 11px; color: var(--text-2); margin-top: 2px; }
  .biz-card-meta     { font-size: 11px; color: var(--text-3); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
  .biz-card-services { display: flex; gap: 5px; flex-wrap: wrap; }
  .biz-card-stats    { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; }
  .biz-stat          { text-align: center; padding: 8px 4px; border-right: 1px solid var(--border); }
  .biz-stat:last-child { border-right: none; }
  .biz-stat-val      { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--primary); }
  .biz-stat-lbl      { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); margin-top: 1px; }
  .biz-card-actions  { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; }
  .biz-type-badge    { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap; align-self: flex-start; flex-shrink: 0; }
  .biz-type-badge.accounting   { background: var(--surface-2);     color: var(--text-2); border: 1px solid var(--border-dark); }
  .biz-type-badge.legal        { background: var(--purple-light);   color: var(--purple); border: 1px solid var(--purple); }
  .biz-type-badge.billing      { background: var(--blue-light);     color: var(--blue);   border: 1px solid var(--blue-dark); }
  .biz-type-badge.technology   { background: var(--green-light);    color: var(--green);  border: 1px solid var(--green-dark); }
  .biz-type-badge.marketing    { background: var(--purple-light);  color: var(--purple); border: 1px solid var(--purple); }
  .biz-type-badge.credentialing { background: var(--orange-light);  color: var(--orange); border: 1px solid var(--orange-dark); }
  .biz-type-badge.hr           { background: var(--blue-light);    color: var(--blue);  border: 1px solid var(--blue); }
  .biz-type-badge.insurance    { background: var(--blue-light);    color: var(--blue-dark); border: 1px solid var(--blue-dark); }
  .biz-list-info     { flex: 1; min-width: 0; display: grid; grid-template-columns: 200px 1fr 1fr auto; align-items: center; gap: 16px; }
  .biz-list-name     { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .biz-list-role     { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .biz-list-tags     { display: flex; gap: 4px; flex-wrap: wrap; }
  .biz-list-stats    { display: flex; gap: 16px; }
  .biz-list-actions  { display: flex; gap: 6px; flex-shrink: 0; }

  /* ── BUSINESS PROFILE PAGE ── */

  /* aegis-icon color modifiers — referenced by dashboard.php modal markup */
  .aegis-icon-filled    { fill: currentColor; stroke: none; }
  .aegis-icon-gold-dark { color: var(--gold-dark); }

  /* ════════════════════════════════════════════════════════════════
     PROVIDER DETAIL MODAL + BUSINESS PROFILE FULLSCREEN CSS — REMOVED.
     These ~525 lines of .pp-* + #businessProfilePage rules previously
     styled #providerDetailModal and #businessProfilePage. Both markup
     blocks were deleted in favor of the centralized public profile
     pages (/public/provider.php, /public/steward.php, /public/business.php
     — see PUBLIC-PAGES-README.md). The .bp-avatar class below (used by
     bpHireModal) is the only bp-* style still in use.
  ════════════════════════════════════════════════════════════════ */
  /* .bp-avatar — used by bpHireModal hire-avatar (only remaining bp-* class) */
  .bp-avatar        { width: 80px; height: 80px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 26px; color: #fff; flex-shrink: 0; box-shadow: var(--shadow); }
  #bpHireModal, #bpProposeContractModal, #bpRequestQuoteModal, #bpScheduleModal { z-index: 9100; }

  /* Modals that open from inside full-screen profile pages must sit above them */
  #svcRequestModal,
  #newReferralModal,
  #referralHistoryModal,
  #scheduleCallModal,
  #confirmRemoveModal,
  #inviteProviderModal,
  #networkAnalyticsModal { z-index: 9500; }

  /* ── BUSINESS ENGAGEMENT MODAL ── */
  .bpe-label        { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); margin-bottom: 6px; }
  .bpe-option-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
  .bpe-option       { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; transition: all var(--transition); font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
  .bpe-option:hover    { border-color: var(--primary); color: var(--primary); background: var(--surface-2); }
  .bpe-option.selected { border-color: var(--primary); color: var(--primary); background: var(--surface-3); }
  .bpe-option-icon  { font-size: 18px; }
  .bpe-step-indicator { display: flex !important; gap: 6px; align-items: center; margin-bottom: 20px; }
  .bpe-step         { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
  .bpe-step.active  { color: var(--primary); }
  .bpe-step.done    { color: var(--gold-dark); }
  .bpe-step-dot     { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; font-size: 10px; font-weight: 700; flex-shrink: 0; line-height: 1; }
  .bpe-step-dot svg { width: 11px !important; height: 11px !important; display: inline-block !important; }
  .bpe-step.active .bpe-step-dot { border-color: var(--primary); color: var(--primary); background: var(--surface-3); }
  .bpe-step.done   .bpe-step-dot { border-color: var(--gold-dark); background: var(--gold-dark); color: #fff; }
  .bpe-step-line    { flex: 1; height: 2px; background: var(--border); max-width: 30px; }

  /* ── SHADOW AI TAB ── */
  .sai-grid-card    { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); transition: all var(--transition); }
  .sai-grid-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
  .sai-list-card    { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); transition: all var(--transition); }
  .sai-list-card:hover { box-shadow: var(--shadow); border-color: var(--border-dark); }
  .sai-avatar       { width: 50px; height: 50px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; }
  .sai-card-header  { display: flex; gap: 12px; align-items: flex-start; }
  .sai-card-name    { font-size: 14px; font-weight: 700; color: var(--text); }
  .sai-card-role    { font-size: 11px; color: var(--text-2); margin-top: 2px; }
  .sai-card-meta    { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); margin-top: 4px; }
  .sai-match-badge  { font-family: var(--font-serif); font-size: 18px; font-weight: 700; padding: 6px 10px; border-radius: var(--radius); flex-shrink: 0; line-height: 1; }
  .sai-bar-wrap     { display: flex; flex-direction: column; gap: 4px; }
  .sai-bar-track    { background: var(--border); border-radius: var(--radius-sm); height: 6px; overflow: hidden; }
  .sai-bar-fill     { height: 100%; border-radius: var(--radius-sm); transition: width 0.6s ease; }
  .sai-bar-label    { font-size: 10px; color: var(--text-3); }
  .sai-tags         { display: flex; gap: 5px; flex-wrap: wrap; }
  .sai-card-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
  .sai-list-main    { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
  .sai-list-bar     { min-width: 160px; }
  .sai-list-actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }

  /* ── MY SHADOWS ── */
  .ms-grid-card     { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; display: flex; flex-direction: column; gap: 0; box-shadow: var(--shadow-sm); transition: all var(--transition); }
  .ms-grid-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
  /* Cards using BOTH .ms-grid-card AND .spc-card — let spc-card's padding/radius/hover wins */
  .ms-grid-card.spc-card { padding: 36px 14px 12px; gap: 0; border-radius: var(--radius-lg); }
  .ms-grid-card.spc-card:hover { transform: translateY(-2px); }
  /* AI icon top-left + Services icon stacked below to prevent overlap */
  /* AI + svc icons now flow inline inside .spc-top-pills at default top: 10px */
  .ms-list-card     { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); transition: all var(--transition); cursor: pointer; }
  .ms-list-identity .ms-meta { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); margin-top: 3px; flex-wrap: wrap; }
  .ms-list-identity .ms-meta svg { flex-shrink: 0; }
  .ms-list-view-container { flex-direction: column; gap: 10px; }
  .ms-status-dot    { position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--surface); }
  .ms-card-header   { display: flex; gap: 12px; align-items: flex-start; }
  .ms-card-name     { font-size: 14px; font-weight: 700; color: var(--text); }
  .ms-card-role     { font-size: 11px; color: var(--text-2); margin-top: 2px; }
  .ms-card-since    { font-size: 10px; color: var(--text-3); margin-top: 3px; }
  .ms-match-pill    { font-family: var(--font-serif); font-size: 16px; font-weight: 700; padding: 5px 9px; border-radius: var(--radius); flex-shrink: 0; line-height: 1; }
  .ms-stats-row     { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
  .ms-stat          { text-align: center; padding: 7px 4px; border-right: 1px solid var(--border); }
  .ms-stat:last-child { border-right: none; }
  .ms-stat-val      { font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: var(--primary); }
  .ms-stat-lbl      { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); }
  .ms-card-actions  { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }
  .ms-list-info     { flex: 1; min-width: 0; display: grid; grid-template-columns: 240px 1fr 180px; gap: 16px; align-items: center; }
  .ms-list-stats    { display: flex; gap: 16px; }
  .ms-list-stat     { text-align: center; }
  .ms-list-bar      { min-width: 140px; }
  .ms-list-actions  { display: flex; gap: 6px; flex-shrink: 0; }

  /* ── SEARCH BUSINESS PARTNERS ── */
  .sbp-layout       { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: flex-start; }
  .sbp-filters      { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; position: sticky; top: 76px; max-height: calc(100vh - 120px); overflow-y: auto; }
  .sbp-filter-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; z-index: 2; }
  .sbp-clear-btn    { font-size: 11px; font-weight: 700; color: var(--red); background: none; border: none; cursor: pointer; padding: 3px 8px; border-radius: var(--radius-sm); transition: background var(--transition); }
  .sbp-clear-btn:hover { background: var(--red-light); }
  .sbp-filter-group  { padding: 13px 14px; border-bottom: 1px solid var(--border); }
  .sbp-filter-group:last-child { border-bottom: none; }
  .sbp-filter-label  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-3); margin-bottom: 8px; }
  .sbp-chip-group    { display: flex; flex-wrap: wrap; gap: 5px; }
  .sbp-chip          { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 11px; font-weight: 600; color: var(--text-2); background: var(--surface-2); cursor: pointer; transition: all var(--transition); white-space: nowrap; user-select: none; }
  .sbp-chip:hover    { border-color: var(--primary); color: var(--primary); }
  .sbp-chip.active   { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }
  .sbp-range-row     { display: flex; align-items: flex-end; gap: 8px; }
  .sbp-toggle-row    { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; padding: 5px 0; }
  .sbp-toggle-label  { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1; flex: 1; }
  .sbp-toggle        { width: 38px; height: 22px; background: var(--border); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background 0.2s ease; flex-shrink: 0; }
  .sbp-toggle::after { content: ''; position: absolute; width: 16px; height: 16px; background: var(--surface); border-radius: 50%; top: 3px; left: 3px; transition: transform 0.2s ease; box-shadow: var(--shadow-sm); }
  .sbp-toggle.on     { background: var(--gold-dark); }
  .sbp-toggle.on::after { transform: translateX(16px); }
  .sbp-results-pane  { min-width: 0; }
  .sbp-results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
  .sbp-result-count  { font-size: 12px; color: var(--text-3); font-weight: 600; }
  .sbp-pill          { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: var(--surface-3); border: 1px solid var(--border-dark); border-radius: var(--radius-full); font-size: 11px; font-weight: 600; color: var(--primary); }
  .sbp-pill-x        { cursor: pointer; font-size: 14px; line-height: 1; color: var(--text-3); margin-left: 2px; }
  .sbp-pill-x:hover  { color: var(--red); }
  .sbp-grid          { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .sbp-card          { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); transition: all var(--transition); cursor: pointer; display: flex; flex-direction: column; gap: 12px; position: relative; }
  .sbp-card:hover    { box-shadow: var(--shadow); transform: translateY(-3px); }
  .sbp-card-top      { display: flex; gap: 12px; align-items: flex-start; }
  .sbp-card-avatar   { width: 54px; height: 54px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; flex-shrink: 0; box-shadow: var(--shadow); }
  .sbp-card-name     { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
  .sbp-card-type     { font-size: 11px; color: var(--text-2); margin-bottom: 5px; }
  .sbp-card-meta     { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); }
  .sbp-card-meta span { display: flex; align-items: center; gap: 3px; }
  .sbp-card-corner   { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .sbp-rate-badge    { background: var(--green-light); color: var(--green-dark); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); border: 1px solid var(--green-light); white-space: nowrap; }
  .sbp-avail-dot     { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
  .sbp-avail-dot.green  { background: var(--green); }
  .sbp-avail-dot.yellow { background: var(--orange); }
  .sbp-avail-dot.gray   { background: var(--text-3); }
  .sbp-card-tags     { display: flex; gap: 5px; flex-wrap: wrap; }
  .sbp-tag           { font-size: 10px; font-weight: 600; padding: 2px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); }
  .sbp-card-stats    { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden; }
  .sbp-card-stat     { text-align: center; padding: 8px 4px; border-right: 1px solid var(--border); }
  .sbp-card-stat:last-child { border-right: none; }
  .sbp-card-stat-val { font-family: var(--font-serif); font-size: 15px; font-weight: 700; color: var(--primary); }
  .sbp-card-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-3); margin-top: 1px; }
  .sbp-card-actions  { display: flex; gap: 6px; border-top: 1px solid var(--border); padding-top: 12px; flex-wrap: wrap; }
  .sbp-card.list-card { flex-direction: row; align-items: center; gap: 14px; padding: 13px 16px; }
  .sbp-card.list-card .sbp-list-body { flex: 1; min-width: 0; display: grid; grid-template-columns: 200px 1fr 1fr auto; align-items: center; gap: 14px; }
  .sbp-card.list-card .sbp-card-corner { position: static; }
  .sbp-card.list-card .sbp-card-stats { display: flex; gap: 16px; background: none; border: none; }
  .sbp-card.list-card .sbp-card-stat  { border: none; padding: 0; }
  .sbp-badge         { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 3px; }
  .sbp-badge.verified { background: var(--blue-light);  color: var(--blue);   border: 1px solid var(--blue-light); }
  .sbp-badge.hipaa    { background: var(--green-light); color: var(--green);  border: 1px solid var(--green-light); }
  .sbp-badge.top      { background: var(--badge-bg-gold); color: var(--gold-primary);   border: 1px solid var(--gold-dark); }
  .sbp-hire-section  { background: var(--green-light); border: 1px solid var(--green-light); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px; }
  .sbp-hire-title    { font-size: 12px; font-weight: 700; color: var(--green-dark); margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
  .sbp-radio-row     { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); transition: background var(--transition); }
  .sbp-radio-row:hover { background: var(--surface-2); }
  .sbp-radio         { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); flex-shrink: 0; transition: all var(--transition); position: relative; }
  .sbp-radio.active  { border-color: var(--gold-dark); background: var(--gold-dark); }
  .sbp-radio.active::after { content: ''; position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; top: 3px; left: 3px; }
  .sbp-check-row     { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 6px; border-radius: var(--radius-sm); transition: background var(--transition); }
  .sbp-check-row:hover { background: var(--surface-2); }

  /* ── TOGGLE (network-specific inline variant) ── */
  .toggle-wrap      { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .toggle-wrap:last-child { border-bottom: none; }
  .toggle-info-label { font-size: 14px; font-weight: 600; color: var(--text); }
  .toggle-info-sub  { font-size: 12px; color: var(--text-3); margin-top: 2px; }
  .net-toggle       { width: 44px; height: 24px; border-radius: var(--radius-full); background: var(--border); border: none; cursor: pointer; position: relative; transition: background var(--transition); flex-shrink: 0; }
  .net-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--surface); border-radius: 50%; transition: transform var(--transition); box-shadow: var(--shadow-sm); }
  .net-toggle.on    { background: var(--green); }
  .net-toggle.on::after { transform: translateX(20px); }

  /* ── SEARCH FILTER ROW ── */
  .search-filter-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
  .search-wrap       { position: relative; flex: 1; min-width: 200px; }
  .search-wrap .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; color: var(--text-3); pointer-events: none; }
  .search-wrap .form-control { padding-left: 36px; }
  .search-input{padding:9px 30px !important;}
  /* ── RESPONSIVE ── */
  @media (max-width: 1200px) { .search-layout { grid-template-columns: 240px 1fr; } }
  @media (max-width: 1024px) {
    .network-stats-row { grid-template-columns: repeat(2, 1fr); }
    .search-layout { grid-template-columns: 1fr; }
    .filter-sidebar { position: static; max-height: none; }
    .rec-partner-grid > .rec-partner-card { flex: 0 0 240px; }
    .rec-partner-grid > .rnp-card { flex: 0 0 200px; }
    .rec-shadow-grid > .rec-shadow-card { flex: 0 0 220px; }
    .rec-shadow-grid > .rsp-card { flex: 0 0 240px; }
    .config-layout { grid-template-columns: 1fr; }
    .config-nav { position: static; }
    .cfg-state-grid { grid-template-columns: repeat(4, 1fr); }
    .sbp-layout { grid-template-columns: 1fr; }
  }
  @media (max-width: 900px) {
    .pn-list-info { grid-template-columns: 1fr auto; }
    .pn-list-tags, .pn-list-stats { display: none; }
        /* Force 6-up override down to 3 then 2 on narrow */
    }
  @media (max-width: 800px) {
    .sbp-card.list-card .sbp-list-body { grid-template-columns: 1fr auto; }
    .sbp-card.list-card .sbp-card-tags,
    .sbp-card.list-card .sbp-card-stats { display: none; }
    .sai-list-main { grid-template-columns: 1fr; }
    .ms-list-info  { grid-template-columns: 1fr auto; }
  }

  /* ═══════════════════════════════════════════
     COMPREHENSIVE SVG ALIGNMENT SYSTEM
  ═══════════════════════════════════════════ */
  svg { flex-shrink: 0; }

  /* Buttons */
  .btn, .b2, .btn-sm, .btn-xs,
  .btn-primary, .btn-outline, .btn-danger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Badges & status indicators */
  .badge, [class*="badge-"], [class*="biz-type-badge"],
  .sbp-badge, .rec-ai-badge, .sbp-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Modal & panel titles */
  .modal-title, .cfg-panel-title,
  .pp-section-title,
  .config-nav-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Nav items */
  .config-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  /* Filter sidebar & groups */
  .filter-sidebar-title,
  .filter-group-label,
  .filter-group-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Modal view tabs */
  .pvm-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* Info value cells */
  .pp-info-val {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* Meta spans throughout */
  .biz-card-meta span, .provider-meta span,
  .pn-grid-meta span, .spc-meta span,
  .pvm-meta-row span, .pp-hero-meta span,
  .shadow-stat span, .sai-card-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Since / date labels */
  .ms-card-since, .pp-note-meta,
  .rec-partner-priority {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* Icon containers */
  .stat-icon-wrap, .nss-icon, .cfg-panel-icon,
  .cfg-alert-icon, .cfg-prov-icon,
  .rec-partner-icon,
  .bpe-option-icon,
  .pp-avatar, .bp-avatar, .pvm-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* View toggle & search icons */

  /* Rec section titles */
  .rec-section-title h3 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Back buttons */
  .pp-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Insight / alert rows */
  .alert, .cfg-alert {
    display: flex !important;
    align-items: flex-start !important;
  }

  /* Secondary tab pills now use .tabs-segmented + .tab-pill from _shared.css. */
  /* Each scope gets its own container — align-self: flex-start keeps it content-width only.
     tabs-twotier is a flex column, so children stretch full-width by default.
     align-self: flex-start overrides that so the track hugs its pill content. */
  #networkTabs .net-sub-tabs {
    display: inline-flex;
    align-self: flex-start;  /* don't stretch to full row width */
    margin-bottom: 0;
    margin-top: 6px;
  }
  #networkTabs .net-sub-tabs[hidden] { display: none; }

  /* Quick toggles (reinforce) */
  .qtoggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* pn-filter-chip (already inline-flex, reinforce svg) */
  .pn-filter-chip svg, .pn-results-bar svg { flex-shrink: 0; }

  /* ── Services Mode: new CSS additions ── */

  /* Services badge on provider cards */
  .pn-services-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    background: var(--badge-bg-gold);
    color: var(--gold-dark);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }

  /* Services badge inside modal badges row */
  .pvm-services-badge {
    background: var(--badge-bg-gold) !important;
    color: var(--gold-dark) !important;
    border: 1px solid var(--gold-dark) !important;
  }

  /* SBP cross-listed: service chip row */
  .sbp-services-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
  }
  .sbp-svc-chip {
    padding: 3px 9px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
  }
  .sbp-svc-chip.gold {
    background: var(--badge-bg-gold);
    color: var(--gold-dark);
    border-color: var(--badge-bg-gold);
  }

  /* Provider-as-service-provider card (in Business Partner section) */
  .sbp-card-footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px;
  }
  /* Use existing sbp-card-name / sbp-card-type / sbp-card-avatar for consistency */
  /* .sbp-name/.sbp-role/.sbp-avatar are aliases defined here: */
  .sbp-name   { font-size: 14px; font-weight: 700; color: var(--text);   margin-bottom: 2px; }
  .sbp-role   { font-size: 11px; color: var(--text-2);                    margin-bottom: 2px; }
  .sbp-avatar {
    width: 44px; height: 44px; border-radius: var(--radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: #fff;
  }

  /* ── Provider Profile: credential pills ── */

  /* ── Provider Profile: external link buttons ── */

  /* ── Services Panel (inside provider profile) ── */
  @media (max-width: 768px) { .pp-svc-grid { grid-template-columns: 1fr; } }


  /* ══ PATIENTS.PHP MODAL DESIGN SYSTEM ══ */
  /* Modal Steps */
  .modal-steps { display:flex !important; align-items:center !important; margin-bottom:22px; padding:0 4px; border-bottom: none !important; flex-wrap:nowrap !important; overflow:hidden; justify-content: center; }
  .modal-step  { display:flex !important; flex-direction:row !important; align-items:center !important; gap:6px; flex-shrink:0; position:relative; }
  .modal-step-divider { flex:1 1 8px !important; min-width:6px !important; margin:0 4px !important; }
  .modal-step-num { width:22px; height:22px; border-radius:50%; border:1px solid var(--border); background:white; display:flex !important; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--text-3); z-index:1; flex-shrink:0; }
  .modal-step.active .modal-step-num { border-color:var(--gold-dark); background:var(--gold-dark); color:white; }
  .modal-step.done   .modal-step-num { border-color:var(--green); background:var(--green); color:white; }
  .modal-step { font-size:11px; color:var(--text-3); white-space:nowrap; }
  .modal-step.active { color:var(--gold-dark); font-weight:700; }
  .modal-step.done   { color:var(--green-dark); }

  .info-row         { display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:13px; border-bottom:1px solid var(--border); }
  .info-row:last-child { border-bottom:none; }
  .info-label       { color:var(--text-3); flex-shrink:0; width:130px; font-size:12px; }
  .info-value       { font-weight:600; color:var(--text); text-align:right; }

  /* Profile section title */
  .profile-section-title { font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }

  /* Alert chips */
  .alert-chip        { display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--radius-sm,6px); font-size:12px; font-weight:600; margin-bottom:6px; }
  .alert-chip.red    { background:var(--red-light);    color:var(--red); }
  .alert-chip.orange { background:var(--orange-light); color:var(--orange); }
  .alert-chip.blue   { background:var(--blue-light);   color:var(--blue-dark); }
  .alert-chip.green  { background:var(--green-light);  color:var(--green-dark); }

  /* System client search results */
  .sys-pt-row          { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius,8px); cursor:pointer; transition:all var(--transition,.15s); margin-bottom:8px; background:white; }
  .sys-pt-row:hover    { border-color:var(--gold-dark); background:var(--badge-bg-gold); }
  .sys-pt-row.selected { border-color:var(--gold-dark); background:var(--badge-bg-gold); }
  .spr-avatar { width:38px; height:38px; border-radius:var(--radius-sm,6px); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:white; flex-shrink:0; }
  .spr-name   { font-size:13px; font-weight:700; color:var(--text); }
  .spr-meta   { font-size:11px; color:var(--text-3); margin-top:2px; }
  .spr-match  { margin-left:auto; flex-shrink:0; font-size:10px; font-weight:700; padding:2px 8px; border-radius:var(--radius-full,999px); }

  /* Source chooser */
  .source-chooser         { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
  .source-option          { border:1px solid var(--border); border-radius:var(--radius-lg,12px); padding:18px 16px; text-align:center; cursor:pointer; transition:all var(--transition,.15s); background:var(--surface,white); }
  .source-option:hover    { border-color:var(--gold-dark); background:var(--badge-bg-gold); }
  .source-option.selected { border-color:var(--gold-dark); background:var(--badge-bg-gold); }
  .source-option-icon     { margin-bottom:8px; display:flex; justify-content:center; }
  .source-option-title    { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
  .source-option-sub      { font-size:11px; color:var(--text-3); line-height:1.4; }

  /* Modal avatar header */
  .modal-avt-hdr { display:flex; align-items:center; gap:14px; }
  .modal-avt-hdr .mah-avt { width:46px; height:46px; border-radius:var(--radius,8px); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:white; flex-shrink:0; }
  .modal-avt-hdr .mah-title { font-size:15px; font-weight:700; color:var(--primary); margin-bottom:2px; }
  .modal-avt-hdr .mah-sub { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

  /* ═════════════════════════════════════════════════════════════════
     MODAL FORM GRID — pair related fields side-by-side to halve the
     modal height without changing field sizing. Two patterns:

       <div class="form-row">          → two equal columns (1fr 1fr)
         <div class="form-group">…</div>
         <div class="form-group">…</div>
       </div>

       <div class="form-row is-3col">  → three equal columns
         …
       </div>

     The .form-group margin-bottom is suppressed inside .form-row so
     spacing comes from the row's own bottom margin (matches a single
     .form-group's 16px). Stacks on narrow viewports.
     ═════════════════════════════════════════════════════════════════ */
  .modal-overlay .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
  }
  .modal-overlay .form-row.is-3col { grid-template-columns: 1fr 1fr 1fr; }
  .modal-overlay .form-row > .form-group { margin-bottom: 0; min-width: 0; }
  @media (max-width: 560px) {
    .modal-overlay .form-row,
    .modal-overlay .form-row.is-3col { grid-template-columns: 1fr; gap: 0; }
    .modal-overlay .form-row > .form-group { margin-bottom: 16px; }
  }

  /* ════ ICON ACTION BAR ════ */
  .icon-action-bar { display: flex; align-items: center; justify-content: space-around; padding: 10px 8px; border-top: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
  .icon-action-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; background: none; border: none; padding: 4px 8px; font-family: var(--font-sans); transition: all 0.15s ease; flex: 1; border-radius: var(--radius); }
  .icon-action-btn:hover { background: var(--surface-2); }
  .icon-action-btn:hover .icon-action-circle { transform: translateY(-2px); }
  .icon-action-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; flex-shrink: 0; }
  .icon-action-circle.c-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow); }
  .icon-action-circle.c-outline  { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
  .icon-action-circle.c-gold     { background: var(--gold-primary); color: #fff; box-shadow: var(--shadow); }
  .icon-action-circle.c-green    { background: var(--green-light); color: var(--green-dark); }
  .icon-action-circle.c-amber    { background: var(--orange-light); color: var(--orange-dark); }
  .icon-action-lbl { font-size: 9.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
  .icon-action-btn:hover .icon-action-lbl { color: var(--primary); }
  /* ════ FILTER GROUP — ep-nav-item style (mirrors edit-profile.php pattern) ════ */
  .filter-group          { margin-bottom: 2px; }
  .filter-group:last-child { margin-bottom: 0; }
  .filter-group-header   { display: flex; align-items: center; gap: 12px; padding: 11px 12px; cursor: pointer; user-select: none; border-radius: var(--radius); font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-2); transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
  .filter-group-header:hover { color: var(--text); background: var(--surface-2); }
  .filter-group.open .filter-group-header { background: var(--badge-bg-gold); color: var(--gold-dark); font-weight: 700; }
  .filter-group-label    { flex: 1; line-height: 1.3; display: inline-flex; align-items: center; gap: 8px; }
  .filter-group-label svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
  .filter-group-header:hover .filter-group-label svg,
  .filter-group.open .filter-group-label svg { color: var(--gold-dark); }
  .filter-group-count    { background: var(--gold-dark); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); display: none; line-height: 1.4; }
  .filter-group-count.visible { display: inline; }
  .filter-chevron        { color: var(--text-3); transition: transform 0.2s ease, color 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; flex-shrink: 0; }
  .filter-group-header:hover .filter-chevron,
  .filter-group.open .filter-chevron { color: var(--gold-dark); }
  .filter-group.open .filter-chevron { transform: rotate(180deg); }
  .filter-group-body     { display: none; padding: 8px 12px 14px; }
  .filter-group.open .filter-group-body { display: block; }

  /* ════ CFG CHEVRON (modal filter panels) ════ */



  /* ════ GOLD TOP BAND for all card types ════ */

  /* Toggle switches — canonical button.toggle in _shared.css.
     Local override removed: it drifted from canonical (44×24 vs 42×22,
     squarish radius instead of pill, missing padding:0 which let browser
     default button padding leak in and offset the thumb). */

  /* ════ UNIFIED CARD CHROME — all card types ════ */
  .card-unified {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
  }
  .card-unified:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
  /* apply to all card types via CSS override */
  .biz-grid-card, .sai-grid-card, .ms-grid-card, .sbp-card, .rec-shadow-card {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    transition: box-shadow 0.18s ease, transform 0.18s ease !important;
  }
  /* Default hover for cards NOT paired with .spc-card */
  .biz-grid-card:not(.spc-card):hover,
  .sai-grid-card:not(.spc-card):hover,
  .ms-grid-card:not(.spc-card):hover,
  .sbp-card:not(.spc-card):hover,
  .rec-shadow-card:hover,
  .card-v2:not(.spc-card):hover,
  .search-provider-card:not(.spc-card):hover {
    box-shadow: var(--shadow) !important;
    border-color: var(--border) !important;
    transform: translateY(-3px) !important;
  }
  /* Cards paired with .spc-card — uniform lift hover (no border change, brand shadow + -2px translate) */
  .biz-grid-card.spc-card:hover,
  .sai-grid-card.spc-card:hover,
  .ms-grid-card.spc-card:hover,
  .sbp-card.spc-card:hover,
  .card-v2.spc-card:hover,
  .search-provider-card.spc-card:hover {
    box-shadow: var(--shadow) !important;
    transform: translateY(-2px) !important;
  }
  /* ════ ICON ACTION BAR centering fix ════ */
  .icon-action-bar { justify-content: center !important; gap: 16px !important; }

  /* ════════════════════════════════════════════
     UNIFIED CARD SYSTEM  (.uc-*)
     One layout, consistent chrome, variable data
  ════════════════════════════════════════════ */
  .uc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
  }
  .uc-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

  /* top badge */
  .uc-badge-tl { position: absolute; top: 13px; left: 12px; z-index: 3; }
  .uc-rating    { position: absolute; top: 13px; right: 12px; z-index: 3; font-size: 11px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 2px; }
  .uc-rating svg, .uc-rating polygon { fill: var(--gold-primary); }
  .uc-stat-val, .ms-stat-val { color: var(--primary); }

  /* body */
  .uc-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 16px 14px; flex: 1; gap: 0; width: 100%; }
  .uc-avt-wrap { position: relative; margin-bottom: 11px; }
  .uc-avt  { width: 64px; height: 64px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: #fff; box-shadow: var(--shadow); overflow: hidden; flex-shrink: 0; }
  .uc-status { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--surface); }
  .uc-name { font-family: var(--font-serif, serif); font-size: 14.5px; font-weight: 700; color: var(--gold-primary); line-height: 1.25; margin-bottom: 2px; }
  .uc-role { font-size: 11px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; }
  .uc-loc  { font-size: 11px; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 6px; }
  .uc-extra-badge { margin-bottom: 6px; }
  .uc-divider { width: 100%; height: 1px; background: var(--border); margin: 8px 0; }
  .uc-kv   { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; max-width: 210px; }
  .uc-kv-row { display: flex; gap: 5px; font-size: 11.5px; line-height: 1.4; }
  .uc-kv-lbl { font-weight: 700; color: var(--gold-primary); white-space: nowrap; flex-shrink: 0; }
  .uc-kv-val { color: var(--text-2); }
  .uc-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
  .uc-tag  { font-size: 10px; font-weight: 600; padding: 3px 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-2); }
  /* stats footer */
  .uc-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); border-top: 1px solid var(--border); flex-shrink: 0; width: 100%; }
  .uc-stat  { text-align: center; padding: 8px 4px; border-right: 1px solid var(--border); }
  .uc-stat:last-child { border-right: none; }
  .uc-stat-val { font-family: var(--font-serif, serif); font-size: 15px; font-weight: 700; color: var(--primary); line-height: 1.1; }
  .uc-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); margin-top: 2px; }
  /* 4-col stats variant */
  .uc-stats.uc-stats-4 { grid-template-columns: repeat(4, 1fr); }
  /* action bar */
  .uc-action-bar { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 12px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--surface); width: 100%; }
  .search-provider-card .uc-action-bar { border-top: none; }
  .uc-act-btn { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; }
  .uc-act-circle { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
  .uc-act-btn:hover .uc-act-circle { transform: translateY(-2px); box-shadow: var(--shadow); }
  .uc-ac-primary { background: var(--primary); color: #fff; }
  .uc-ac-gold    { background: var(--gold-primary); color: #fff; }
  .uc-ac-green   { background: var(--green-light); color: var(--green-dark); border: 1px solid var(--green-dark); }
  .uc-ac-amber   { background: var(--orange-light); color: var(--orange-dark); border: 1px solid var(--orange-dark); }
  .uc-ac-outline { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
  .uc-ac-red     { background: var(--red-light); color: var(--danger); border: 1px solid var(--red-light); }
  .uc-ac-blue    { background: var(--blue-light); color: var(--blue-primary); border: 1px solid var(--blue-dark); }
  /* Hide elements that don't fit in the row layout */
  /* Move pills inline */
  /* Move rating into the body row */
  /* Body becomes a horizontal flex strip */
  /* Name — fixed-width column */
  /* Role + location — flex columns */
  /* Stats — compact one-liner stays visible */
  /* Actions — right-aligned strip */

  /* ═════════════════════════════════════════════════════════════════
     CONNECTION REQUESTS — inline copy of canonical .section-block /
     .card.is-person / .person-* / .badge.is-{quiet|clinical|business}
     rules. Mirrors what's in _shared.css; inlined here because
     browser cache on /_shared.css can be stale and this section
     must render correctly on first paint.
     ═════════════════════════════════════════════════════════════════ */
  .section-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;          /* mock spec — tighter than --radius-lg (16px) */
    padding: 22px 26px 26px;
    margin-bottom: 24px;
  }
  .section-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
  }
  .section-head-text { min-width: 0; }
  .section-head-eyebrow {
    font-family: var(--font-sans);
    font-size: 9.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.6px;
    color: var(--gold-dark);
  }
  .section-head-title {
    font-family: var(--font-serif);
    font-size: 18px; font-weight: 600;
    color: var(--text);
    letter-spacing: -0.005em;
    margin: 4px 0;
    line-height: 1.2;
  }
  .section-head-sub {
    font-family: var(--font-sans);
    font-size: 12.5px; color: #6b665d;   /* mock warm grey — global --text-3 is bugged darker than --text-2 */
    line-height: 1.5;
  }
  .section-head-sub strong { color: var(--text-2); font-weight: 600; }

  .list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
  }

  .card.is-person {
    display: flex; flex-direction: column; gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;           /* mock spec — tighter than --radius (12px) */
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .card.is-person:hover {
    border-color: var(--text-4);
    box-shadow: 0 1px 3px rgba(30,28,26,0.04);
  }
  .card.is-person .card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
  }
  .card.is-person .card-time {
    font-family: var(--font-sans);
    font-size: 11px; color: var(--text-4); font-weight: 500;
    white-space: nowrap;
  }

  .person-row     { display: flex; align-items: center; gap: 12px; }
  .person-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(160,129,62,0.10);
    border: 1px solid rgba(160,129,62,0.24);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-size: 13px; font-weight: 600;
    color: var(--gold-dark);
    letter-spacing: -0.005em;
    flex-shrink: 0;
  }
  .person-text { min-width: 0; flex: 1; }
  .person-name {
    font-family: var(--font-sans);
    font-size: 13.5px; font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .person-meta {
    font-family: var(--font-sans);
    font-size: 12px; color: #6b665d;   /* mock warm grey — global --text-3 is bugged darker than --text-2 */
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .card-actions {
    display: flex; gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .card-actions .btn { flex: 1; justify-content: center; }

  .badge.is-quiet {
    font-size: 10px; padding: 3px 8px;
    text-transform: none; letter-spacing: 0.1px;
    font-weight: 600; line-height: 1;
    border-radius: var(--radius-full);
    display: inline-flex; align-items: center; gap: 5px;
  }
  .badge.is-clinical {
    background: rgba(46,125,50,0.06);
    border: 1px solid rgba(46,125,50,0.20);
    color: #2e7d32;
  }
  .badge.is-business {
    background: rgba(160,129,62,0.06);
    border: 1px solid rgba(160,129,62,0.22);
    color: var(--gold-dark);
  }

  /* ── Buttons inside person-card actions — mock spec ──
     Accept: solid black pill, white icon. NOT brand-gold .btn-primary.
     Decline: thin neutral outline, no gold tint on hover.
     Scoped so no other primary/outline button on the page is affected. */
  .card.is-person .card-actions .btn-primary {
    background: var(--text);
    border: 1px solid var(--text);
    color: #fff;
    box-shadow: none;
  }
  .card.is-person .card-actions .btn-primary:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    transform: none;
    box-shadow: none;
  }
  .card.is-person .card-actions .btn-primary svg { color: #fff; stroke: currentColor; }

  .card.is-person .card-actions .btn-outline {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
  }
  .card.is-person .card-actions .btn-outline:hover {
    background: var(--bg);
    border-color: var(--text-4);
    color: var(--text);
  }

  /* ── Compact variant of .card.is-person — single-row layout for
        dense lists (modals, sidebars, sticky panels). */
  .card.is-person.is-compact {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 6px;
  }
  .card.is-person.is-compact .person-row    { gap: 10px; min-width: 0; }
  .card.is-person.is-compact .person-avatar { width: 32px; height: 32px; font-size: 11.5px; }
  .card.is-person.is-compact .person-name   { font-size: 13px; }
  .card.is-person.is-compact .person-meta   { font-size: 11.5px; margin-top: 1px; }
  .card.is-person.is-compact .card-actions  {
    display: inline-flex;
    border: none; padding: 0;
    gap: 6px;
  }
  .card.is-person.is-compact .card-actions .btn { flex: 0 0 auto; }
  .card.is-person.is-compact .card-meta-col {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 3px; min-width: 0;
  }
  .card.is-person.is-compact .card-time { font-size: 10.5px; }

  /* Icon-only button modifier — for tertiary actions in tight rows.
     Compound selector (.btn.btn-icon) so it ONLY fires when paired with
     .btn — distinct from the standalone .btn-icon component in
     _shared.css (which has a gold hover we don't want here). */
  .btn.btn-icon {
    width: 30px; height: 30px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
  }
  .btn.btn-icon svg { margin: 0; }
  /* Neutralize the standalone .btn-icon:hover gold from _shared.css when
     the button also carries .btn .btn-outline. The outline hover wins. */
  .btn.btn-outline.btn-icon:hover {
    background: var(--bg);
    border-color: var(--text-4);
    color: var(--text);
  }

  /* Collapse the meta column on small viewports */
  @media (max-width: 720px) {
    .card.is-person.is-compact { grid-template-columns: auto 1fr auto; }
    .card.is-person.is-compact .card-meta-col { display: none; }
  }

/* ── RSP Card (.rsp-card) — Recommended Shadow Provider compact card ─── */
.rec-shadow-grid > .rsp-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}
.rsp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}
.rsp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border-dark);
}
.rsp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rsp-body {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rsp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rsp-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* ══════════════════════════════════════════════════════════════════
   PAGE-SIDEBAR NAV — canonical in-page left sidebar navigation.
   Used by Finances, Settings, EditProfile and any future page
   with a left-sidebar tab/section selector.

   Component inventory:
     .page-sidebar          — sticky card wrapper
     .page-sidebar-group    — section block with bottom divider
     .page-sidebar-label    — uppercase group heading
     .page-sidebar-item     — nav row (button or anchor)
     .page-sidebar-icon     — 18×18 icon slot
     .page-sidebar-badge    — numeric badge (right-edge)

   Active-state design (keep as-is, do NOT override):
     background: var(--badge-bg-gold)
     font-weight: 600
     box-shadow: var(--shadow-xs)
     ::before  → 3px gold left bar (position: absolute, left: 0)
   ══════════════════════════════════════════════════════════════════ */

.page-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 80px;
}

.page-sidebar-group {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.page-sidebar-group:last-child { border-bottom: none; }

.page-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 8px 14px 4px;
}

.page-sidebar-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  cursor: pointer;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  text-align: left;
  text-decoration: none;
  position: relative;
  transition: background var(--transition), color var(--transition);
}
.page-sidebar-item:hover { background: var(--surface-2); color: var(--text); }
.page-sidebar-item.active {
  background: var(--badge-bg-gold);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
  border-left-color: transparent;
}
.page-sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold-dark);
}

.page-sidebar-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-3);
  transition: color var(--transition);
}
.page-sidebar-item:hover  .page-sidebar-icon { color: var(--gold-dark); }
.page-sidebar-item.active .page-sidebar-icon { color: var(--gold-dark); }

.page-sidebar-badge {
  margin-left: auto;
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  line-height: 1.5;
}
.page-sidebar-badge--warn {
  background: var(--red-light);
  color: var(--red-dark);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PEER SERVICES — Explore Browse, Requests, Bookings
   Shared between Services.vue and SupportServices.vue
   ═══════════════════════════════════════════════════════════════════════════════ */

.explore-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

/* Each row gets a bottom divider except the last */
.explore-filter-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 8px;
}
.explore-filter-row--search   { border-bottom: 1px solid var(--border); }
.explore-filter-row--dropdowns { border-bottom: 1px solid var(--border); gap: 8px; flex-wrap: wrap; padding: 10px 14px; }
.explore-filter-row--meta     { padding: 7px 14px; background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Row 1 — search full width */
.explore-filter-search {
  position: relative;
  flex: 1;
  width: 100%;
}
.explore-filter-search .aegis-icon {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--text-4); pointer-events: none;
}
.explore-filter-search .form-control { padding-left: 34px; width: 100%; }

/* Row 2 — dropdowns, each takes equal share */
.explore-filter-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 130px;
}
.explore-filter-select-wrap .aegis-icon {
  position: absolute; left: 9px; top: 50%;
  transform: translateY(-50%); color: var(--text-4); pointer-events: none; z-index: 1;
}
.explore-filter-select {
  width: 100%;
  padding-left: 28px;
  padding-right: 10px;
  font-size: 12px;
  height: 34px;
  border-radius: var(--radius);
  cursor: pointer;
}
.explore-filter-select-wrap.has-value .explore-filter-select {
  border-color: var(--gold);
  background: var(--badge-bg-gold);
  color: var(--gold-dark);
  font-weight: 600;
}
.explore-filter-select-wrap.has-value .aegis-icon { color: var(--gold-dark); }

/* Row 3 — meta: count left, clear right */
.explore-filter-row--meta { justify-content: space-between; }
.explore-count { font-size: 12px; font-weight: 600; color: var(--text-4); }
.explore-clear-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; padding: 2px 9px; cursor: pointer;
  transition: all var(--transition);
}
.explore-clear-btn:hover { border-color: var(--gold); color: var(--gold-dark); }

.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.explore-loading {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  padding: 20px; color: var(--text-3); font-size: 13px; font-weight: 600;
}
.explore-sentinel { height: 1px; }
.explore-end-note {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  padding: 12px; font-size: 12px; font-weight: 600; color: var(--text-4);
}

/* ─── Session/Request table shared styles ─────────────────────────────────── */
.sic-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 12px; }
.sic-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sic-th { padding: 9px 12px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-4); background: var(--surface-2); border-bottom: 1px solid var(--border); }

/* ── INCOMING PENDING REQUESTS TABLE ── */
.req-row { cursor: pointer; transition: background var(--transition); background: var(--surface, #fff); border-left: 3px solid var(--gold-dark); }
.req-row:hover { background: var(--surface-2); }
.req-td--requester { width: 58%; }
.req-td--meta      { width: 34%; }
.req-td--actions   { width: 8%; text-align: right; }

/* ── HOW IT WORKS MODAL ── */
.hiw-intro {
  font-size: 13px; color: var(--text-2); line-height: 1.6;
  padding: 10px 14px; background: var(--badge-bg-gold);
  border: 1px solid var(--gold); border-radius: var(--radius);
  margin-bottom: 18px;
}
.hiw-steps { display: flex; flex-direction: column; gap: 0; }
.hiw-step {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.hiw-step:last-child { border-bottom: none; }
.hiw-step-icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--badge-bg-gold); color: var(--gold-dark);
}
.hiw-step-icon--1,
.hiw-step-icon--2,
.hiw-step-icon--3,
.hiw-step-icon--4,
.hiw-step-icon--5,
.hiw-step-icon--6 { background: var(--badge-bg-gold); color: var(--gold-dark); }
.hiw-step-body { min-width: 0; }
.hiw-step-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.hiw-step-desc  { font-size: 12px; color: var(--text-3); line-height: 1.6; }
.hiw-step-desc strong { color: var(--text-2); font-weight: 700; }
.hiw-step-desc em { color: var(--gold-dark); font-style: normal; font-weight: 600; }

/* ── SERVICE REQUESTS TABLE ── */
.orq-row { cursor: pointer; transition: background var(--transition); background: var(--surface, #fff); }
.orq-row:hover { background: var(--surface-2); }
.orq-row--new       { border-left: 3px solid var(--gold-dark); }
.orq-row--accepted  { border-left: 3px solid var(--green); }
.orq-row--declined  { border-left: 3px solid var(--red, #ef4444); }
.orq-row--countered { border-left: 3px solid var(--blue, #3b82f6); }
.orq-row--withdrawn { border-left: 3px solid var(--border-dark); opacity: .7; }
.orq-td--provider { width: 36%; }
.orq-td--service  { width: 30%; }
.orq-td--status   { width: 24%; }
.orq-td--actions  { width: 10%; text-align: right; }
.orq-service-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.orq-modal-party-info { flex: 1; min-width: 0; }
.orq-modal-name { font-size: 15px; font-weight: 700; color: var(--gold-dark); text-decoration: none; }
a.orq-modal-name:hover { text-decoration: underline; }
/* Party cell shared styles (scoped — not inherited from SessionInvoiceCard) */
.sic-party { display: flex; align-items: center; gap: 9px; }
.sic-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--badge-bg-gold); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; overflow: hidden;
}
.sic-avatar-initials { line-height: 1; letter-spacing: .3px; }
.sic-party-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sic-party-name { font-size: 13px; font-weight: 700; color: var(--gold-dark); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.sic-party-name:hover { text-decoration: underline; color: var(--gold); }
.sic-date-sub { font-size: 11px; color: var(--text-4); margin-top: 1px; }

/* ─── Outgoing request card/modal styles ──────────────────────────────────── */
.orq-row { cursor: pointer; transition: background var(--transition); background: var(--surface, #fff); }
.orq-row:hover { background: var(--surface-2); }
.orq-row--new       { border-left: 3px solid var(--gold-dark); }
.orq-row--accepted  { border-left: 3px solid var(--green); }
.orq-row--declined  { border-left: 3px solid var(--red, #ef4444); }
.orq-row--countered { border-left: 3px solid var(--blue, #3b82f6); }
.orq-row--withdrawn { border-left: 3px solid var(--border-dark); opacity: .7; }
.orq-td--provider { width: 36%; }
.orq-td--service  { width: 30%; }
.orq-td--status   { width: 24%; }
.orq-td--actions  { width: 10%; text-align: right; }
.orq-service-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.orq-modal-party-info { flex: 1; min-width: 0; }
.orq-modal-name { font-size: 15px; font-weight: 700; color: var(--gold-dark); text-decoration: none; }
a.orq-modal-name:hover { text-decoration: underline; }
/* Party cell shared styles (scoped — not inherited from SessionInvoiceCard) */
.sic-party { display: flex; align-items: center; gap: 9px; }
.sic-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--badge-bg-gold); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; overflow: hidden;
}
.sic-avatar-initials { line-height: 1; letter-spacing: .3px; }
.sic-party-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sic-party-name { font-size: 13px; font-weight: 700; color: var(--gold-dark); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.sic-party-name:hover { text-decoration: underline; color: var(--gold); }
.sic-date-sub { font-size: 11px; color: var(--text-4); margin-top: 1px; }argin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sic-td { padding: 10px 12px; vertical-align: middle; font-size: 13px; border-bottom: 1px solid var(--border); }

/* ── OUTGOING REQUESTS — card list ── */
.orq-list { display: flex; flex-direction: column; gap: 8px; }

.orq-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-dark);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition);
  flex-wrap: wrap;
}
.orq-card:hover { box-shadow: var(--shadow-md); }
.orq-card--new        { border-left-color: var(--gold-dark); }
.orq-card--accepted   { border-left-color: var(--green); }
.orq-card--declined   { border-left-color: var(--red, #ef4444); }
.orq-card--withdrawn  { border-left-color: var(--border-dark); opacity: .7; }

.orq-provider { display: flex; align-items: center; gap: 10px; min-width: 180px; flex: 0 0 auto; }
.orq-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--badge-bg-gold); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.orq-avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.orq-provider-name { font-size: 13px; font-weight: 700; color: var(--text); }
.orq-provider-cred { font-size: 11px; color: var(--text-4); font-weight: 600; margin-top: 1px; }

.orq-service { flex: 1; min-width: 140px; }
.orq-service-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.orq-service-type  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-4); }

.orq-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.orq-date   { font-size: 11px; color: var(--text-4); font-weight: 600; }

.orq-action { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Modal styles */
.orq-modal-provider {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
  flex-wrap: nowrap;
}
.orq-modal-name { font-size: 15px; font-weight: 700; color: var(--text); }
.orq-modal-cred { font-size: 12px; color: var(--text-3); font-weight: 600; margin-top: 2px; }

.orq-modal-grid { margin-bottom: 14px; }
.orq-modal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.orq-modal-row:last-child { border-bottom: none; }
.orq-modal-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-weight: 600; flex-shrink: 0; width: 110px; }
.orq-modal-value { font-weight: 600; color: var(--text); text-align: right; }

.orq-modal-block {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px;
}
.orq-modal-block--response {
  background: rgba(34,197,94,.05); border-color: var(--green);
}
.orq-modal-block-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-4); margin-bottom: 6px;
}
.orq-modal-block--response .orq-modal-block-label { color: var(--green-dark, #2e7d32); }
.orq-modal-block-body { font-size: 13px; color: var(--text-2); line-height: 1.6; }

.orq-modal-pending {
  display: flex; align-items: center; gap: 8px;
  background: var(--badge-bg-gold); border: 1px solid var(--gold);
  border-radius: var(--radius); padding: 10px 14px;
  font-size: 13px; font-weight: 600; color: var(--gold-dark);
}
.page-note { display: flex; align-items: flex-start; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 10px 14px; color: var(--text-2); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.page-note .aegis-icon { flex-shrink: 0; margin-top: 1px; color: var(--gold); }