/**
 * Added Health Design System
 * Source: Figma file EsAwXzAeey95B2SUzyWimK · node 3212:1226 (UI Styles)
 *         Figma file Bcajx8ZezUYZLh3d4Y7eqv (Brand Colors)
 * Last updated from Figma: 2026-03-10
 *
 * ALL colours on the site must come from this file.
 * Do NOT hardcode hex values in templates or component styles.
 * Update these tokens when Figma designs change — all pages update automatically.
 */

/* ========================================================================
   DESIGN TOKENS — full Figma palette
   ======================================================================== */

:root {

  /* ── BRAND ──────────────────────────────────────────────────────────── */
  --color-hero-orange:    #A5723E;   /* Figma: Brand colors/Accent 1 — primary CTA (app UI) */
  --color-hero-hover:     #9A5625;   /* darker brown — hover state for primary CTA */
  --color-hero-landing:   #B2672E;   /* Figma: Brand colors/Hero — reserved for landing/login pages only */
  --color-hero-accent-2:  #D99551;   /* Figma: Brand colors/Accent 2 */
  --color-hero-accent-3:  #DCBB83;   /* Figma: Brand colors/Accent 3 — gold highlight */
  --color-hero-accent-4:  #F4EEE3;   /* Figma: Brand colors/Accent 4 — warm cream */
  --color-hero-accent-5:  #6A8299;   /* Figma: Brand colors/Accent 5 — muted blue-grey */
  --color-gold-cta:       #DCBB83;   /* alias → --color-hero-accent-3 */

  /* ── SURFACES & NEUTRALS ────────────────────────────────────────────── */
  --color-bg-splash:    #FDF9F0;   /* Figma: Brand colors/UI colors/Neutral 1 — cream page bg */
  --color-neutral-2:    #D0C9C0;   /* Figma: Brand colors/UI colors/Neutral 2 */
  --color-card-bg:      #FAFAFA;   /* Figma: Brand colors/Light neutral — card/panel bg */
  --color-surface:      #F5F5F5;   /* Figma: Brand colors/UI colors/Surface — page bg */
  --color-card-border:  #DFE4EA;   /* Figma: Brand colors/UI colors/Stroke — borders & dividers */
  --color-white:        #FFFFFF;   /* Figma: White/White */

  /* Gray scale */
  --color-neutral:      #F3F4F6;   /* Figma: Gray/Gray 2 */
  --color-gray-1:       #F9FAFB;   /* Figma: Gray/Gray */
  --color-gray-2:       #F3F4F6;   /* Figma: Gray/Gray 2 */
  --color-gray-3:       #E5E7EB;   /* Figma: Gray/Gray 3 */
  --color-gray-4:       #DEE2E6;   /* Figma: Gray/Gray 4 */
  --color-gray-5:       #CED4DA;   /* Figma: Gray/Gray 5 */
  --color-gray-6:       #9CA3AF;   /* Figma: Dark/Dark 6 */
  --color-gray-7:       #6B7280;   /* Figma: Dark/Dark 5 */
  --color-gray-8:       #4B5563;   /* Figma: Dark/Dark 4 */
  --color-gray-9:       #374151;   /* Figma: Dark/Dark 3 */
  --color-gray-10:      #1F2A37;   /* Figma: Dark/Dark 2 */

  /* ── TEXT ───────────────────────────────────────────────────────────── */
  --color-text-dark:          #111928;   /* Figma: Dark/Dark — darkest text, page headings */
  --color-headings-black:     #1E1B39;   /* Figma: Neutral Colors/Headings Black — alternate heading colour */
  --color-text-primary:       #2F3A44;   /* Figma: Brand colors/UI colors/Primary text — body text */
  --color-text-secondary:     #6A8299;   /* Figma: Brand colors/Accent 5 — secondary labels, metadata */
  --color-text-secondary-ui:  #8899A8;   /* Figma: Secondary Text Color — lighter secondary text */
  --color-text-muted:         #637381;   /* Figma: Primary Text Color — hints, timestamps, captions */
  --color-text-tertiary:      #C3CED9;   /* Figma: Brand colors/UI colors/Tertiary text — disabled/placeholder */
  --color-disabled:           #C3CED9;   /* alias → --color-text-tertiary */

  /* ── PRIMARY BLUE ───────────────────────────────────────────────────── */
  --color-primary-blue:   #0062BF;   /* Figma: Brand colors/UI colors/Primary — secondary action buttons */
  --color-blue:           #2D68F8;   /* Figma: Blue/Blue */
  --color-blue-dark:      #1C3FB7;   /* Figma: Blue/Blue dark */
  --color-blue-light-1:   #5475E5;   /* Figma: Blue/Blue light 1 */
  --color-blue-light-2:   #8099EC;   /* Figma: Blue/Blue light 2 */
  --color-blue-light-3:   #ADBCF2;   /* Figma: Blue/Blue light 3 */
  --color-blue-light-4:   #C3CEF6;   /* Figma: Blue/Blue light 4 */
  --color-blue-light:     #E1E8FF;   /* Figma: Blue/Blue light 5 — pale tint, badge backgrounds */
  --color-blue-tint:      #EEF1FC;   /* Figma: Brand colors/UI colors/Primary neutral */

  /* ── CONVERSATION DETAIL — chat bubble accents ─────────────────────── */
  --color-agent-bubble:   #ECFDF5;   /* Mint green for AI/agent speech bubbles */
  --color-user-bubble:    var(--color-blue-tint);   /* Blue tint for human/user speech bubbles */
  --color-agent-accent:   var(--color-secondary-teal);
  --color-user-accent:    var(--color-primary-blue);

  /* ── SECONDARY TEAL (brand) ─────────────────────────────────────────── */
  --color-secondary-teal: #3FAE9A;   /* Figma: Brand colors/UI colors/Secondary brand — Reviewed/active badges */
  --color-teal-light:     #F0F7F7;   /* Figma: Brand colors/Medium neutral — subtle teal bg */
  --color-teal:           #02AAA4;   /* Figma: Teal/Teal */
  --color-teal-dark:      #06A09B;   /* Figma: Teal/Teal dark */
  --color-teal-light-2:   #20D9D2;   /* Figma: Teal/Teal light */
  --color-teal-light-3:   #72DDC3;   /* Figma: Teal/Teal light 2 */
  --color-teal-light-4:   #C2F5E9;   /* Figma: Teal/Teal light 3 */

  /* ── CYAN ───────────────────────────────────────────────────────────── */
  --color-cyan:           #01A9DB;   /* Figma: Cyan/Cyan */
  --color-cyan-dark:      #0B76B7;   /* Figma: Cyan/Cyan dark */
  --color-cyan-light:     #18BFFF;   /* Figma: Cyan/Cyan light */
  --color-cyan-light-2:   #77D1F3;   /* Figma: Cyan/Cyan light 2 */
  --color-cyan-light-3:   #D0F0FD;   /* Figma: Cyan/Cyan light 3 */

  /* ── GREEN (positive / success states) ─────────────────────────────── */
  --color-green:          #22AD5C;   /* Figma: Green/Green — positive % changes, pass states */
  --color-green-dark:     #1A8245;   /* Figma: Green/Green dark */
  --color-green-light:    #2CD673;   /* Figma: Green/Green light */
  --color-green-light-2:  #57DE8F;   /* Figma: Green/Green light 2 */
  --color-green-light-3:  #82E6AC;   /* Figma: Green/Green light 3 */
  --color-green-light-4:  #ACEFC8;   /* Figma: Green/Green light 4 */
  --color-green-light-5:  #C2F3D6;   /* Figma: Green/Green light 5 */
  --color-green-light-6:  #DAF8E6;   /* Figma: Green/Green light 6 — success badge bg */

  /* ── YELLOW / WARNING ───────────────────────────────────────────────── */
  --color-yellow:         #FBBF24;   /* Figma: Yellow/Yellow */
  --color-yellow-dark:    #F59E0B;   /* Figma: Yellow/Yellow dark */
  --color-yellow-light:   #FCD34D;   /* Figma: Yellow/Yellow light */
  --color-yellow-light-2: #FDE68A;   /* Figma: Yellow/Yellow light 2 */
  --color-yellow-light-3: #FEF3C7;   /* Figma: Yellow/Yellow light 3 */
  --color-yellow-light-4: #FFFBEB;   /* Figma: Yellow/Yellow light 4 */
  --color-warning:        #D97706;   /* Figma: Yellow/Yellow dark 2 — warning text & icons */
  --color-warning-bg:     #FFFBEB;   /* Figma: Yellow/Yellow light 4 — warning badge/banner bg */

  /* ── ORANGE ─────────────────────────────────────────────────────────── */
  --color-orange:         #F27430;   /* Figma: Orange/Orange */
  --color-orange-dark:    #E1580E;   /* Figma: Orange/Orange dark */
  --color-orange-light:   #F59460;   /* Figma: Orange/Orange light */
  --color-orange-light-2: #F8B490;   /* Figma: Orange/Orange light 2 */
  --color-orange-light-3: #FBD5C0;   /* Figma: Orange/Orange light 3 */
  --color-orange-light-4: #FDE5D8;   /* Figma: Orange/Orange light 4 */
  --color-orange-light-5: #FFF0E9;   /* Figma: Orange/Orange light 5 */

  /* ── RED / ERROR ────────────────────────────────────────────────────── */
  --color-red:            #F23030;   /* Figma: Red/Red */
  --color-red-dark:       #E10E0E;   /* Figma: Red/Red dark */
  --color-red-light:      #F56060;   /* Figma: Red/Red light */
  --color-red-light-2:    #F89090;   /* Figma: Red/Red light 2 */
  --color-red-light-3:    #FBC0C0;   /* Figma: Red/Red light 3 */
  --color-red-light-4:    #FDD8D8;   /* Figma: Red/Red light 4 */
  --color-red-light-5:    #FEEBEB;   /* Figma: Red/Red light 5 */
  --color-red-light-6:    #FEF3F3;   /* Figma: Red/Red light 6 */
  --color-error:          #F23030;   /* semantic alias → --color-red — error text & icons */
  --color-error-bg:       #FEF3F3;   /* semantic alias → --color-red-light-6 — error badge/banner bg */

  /* ── PINK ───────────────────────────────────────────────────────────── */
  --color-pink:           #D345F8;   /* Figma: Pink/Pink */
  --color-pink-dark:      #C814F6;   /* Figma: Pink/Pink dark */
  --color-pink-light:     #DF76FA;   /* Figma: Pink/Pink light */
  --color-pink-light-2:   #EAA7FC;   /* Figma: Pink/Pink light 2 */
  --color-pink-light-3:   #F6D8FE;   /* Figma: Pink/Pink light 3 */
  --color-pink-light-4:   #FCF1FE;   /* Figma: Pink/Pink light 4 */

  /* ── PURPLE ─────────────────────────────────────────────────────────── */
  --color-purple:         #8646F4;   /* Figma: Purple/Purple */
  --color-purple-dark:    #6D28D9;   /* Figma: Purple/Purple dark */
  --color-purple-dark-2:  #5B21B6;   /* Figma: Purple/Purple dark 2 */
  --color-purple-light:   #A78BFA;   /* Figma: Purple/Purple light */
  --color-purple-light-2: #C4B5FD;   /* Figma: Purple/Purple light 2 */
  --color-purple-light-3: #DDD6FE;   /* Figma: Purple/Purple light 3 */
  --color-purple-light-4: #EDE9FE;   /* Figma: Purple/Purple light 4 */
  --color-purple-light-5: #F5F3FF;   /* Figma: Purple/Purple light 5 */

  /* ── SEMANTIC ALIASES ───────────────────────────────────────────────── */
  /*
   * These tokens are NOT in Figma — they map a UI purpose to a colour.
   * To retheme a feature, update the value here and all pages update automatically.
   */

  /* success = teal — "Reviewed" badge, verified states, positive outcomes */
  --color-success:        #3FAE9A;   /* → --color-secondary-teal */
  --color-success-bg:     #DAF8E6;   /* → --color-green-light-6 — success badge/banner bg */
  --color-success-dark:   #22AD5C;   /* → --color-green — text on success bg */

  /* consultation = brand accent — specialist request flow buttons & panels */
  --color-consultation:        var(--color-hero-orange);     /* #A5723E — Figma: Brand colors/Accent 1 — buttons & accents */
  --color-consultation-dark:   var(--color-hero-landing);    /* #B2672E — Figma: Brand colors/Hero — hover/heading */
  --color-consultation-bg:     var(--color-hero-accent-4);   /* #F4EEE3 — Figma: Brand colors/Accent 4 — panel background */
  --color-consultation-border: var(--color-hero-accent-3);   /* #DCBB83 — Figma: Brand colors/Accent 3 — panel border */
  --color-consultation-select: var(--color-hero-accent-3);   /* #DCBB83 — Figma: Brand colors/Accent 3 — selected specialist bg */

  /* ── SPACING (8px grid) ─────────────────────────────────────────────── */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* Typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  --font-size-8xl: 96px;
  --font-size-9xl: 128px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-nav: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Shadows — Tailwind scale, sourced from Figma UI Styles */
  --shadow-sm:         0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-focus-brand: 0 0 0 3px rgba(165, 114, 62, 0.1);  /* form focus ring */
  --shadow-brand:       0 1px 6px rgba(165, 114, 62, 0.2);  /* active/hover on brand elements */
  --shadow:       0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* Overlays */
  --overlay-modal:  rgba(0, 0, 0, 0.5);
  --overlay-subtle: rgba(0, 0, 0, 0.06);

  /* RGB channels — for rgba(var(--x-rgb), alpha) usage */
  --color-yellow-rgb: 251, 191, 36;   /* matches --color-yellow #FBBF24 */
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ========================================================================
   BASE STYLES
   ======================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: linear-gradient(180deg, rgba(208, 201, 192, 0) 0%, rgba(165, 114, 62, 0.1) 100%), 
              linear-gradient(90deg, var(--color-bg-splash) 0%, var(--color-bg-splash) 100%);
  min-height: 100vh;
}

/* ========================================================================
   BUTTON COMPONENTS (Figma button specs)
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 12px 24px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
}

.btn-primary {
  background-color: var(--color-hero-orange);
  color: white;
}

.btn-primary:hover {
  background-color: var(--color-hero-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-dark);
  border: 1px solid var(--color-card-border);
}

.btn-secondary:hover {
  background-color: var(--color-surface);
}

.btn-blue {
  background-color: var(--color-primary-blue);
  color: white;
}

.btn-blue:hover {
  background-color: var(--color-primary-blue);
}

.btn-danger {
  background: transparent;
  color: var(--color-text-dark);
  border: 1px solid var(--color-card-border);
}

.btn-danger:hover {
  background: var(--color-error);
  color: white;
  border-color: var(--color-error);
}

.btn-sm {
  padding: 8px 16px;
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: 16px 32px;
  font-size: var(--font-size-lg);
}

/* Neutral button — low visual weight, for secondary actions like Preview, Download, Rewind, Review.
   Also used as .cd-btn--ghost in conversation_detail.html. */
.btn-neutral {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-card-border);
}

.btn-neutral:hover {
  background: var(--color-card-border);
  color: var(--color-text-primary);
}

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

/* ========================================================================
   CARD COMPONENTS
   ======================================================================== */

.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}

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

.card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-md);
}

.card-content {
  color: var(--color-text-secondary);
}

/* ========================================================================
   FORM COMPONENTS
   ======================================================================== */

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: white;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-hero-orange);
  box-shadow: var(--shadow-focus-brand);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* ========================================================================
   NAVIGATION COMPONENTS
   ======================================================================== */

.nav-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.nav-link {
  color: var(--color-text-primary);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.nav-link:hover {
  background-color: var(--color-surface);
  color: var(--color-hero-orange);
}

.nav-link.active {
  color: var(--color-hero-orange);
  font-weight: 600;
}

/* ========================================================================
   FOOTER COMPONENT
   ======================================================================== */

footer {
  background: var(--color-white);
  color: var(--color-text-primary);  /* #2F3A44 */
  border-top: 1px solid var(--color-card-border);
  padding: 29px 0;
  margin-top: auto;
  font-family: var(--font-family-base);
  font-weight: 500;
  font-size: var(--font-size-sm);  /* 14px */
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  display: flex;
  gap: 32px;
}

.footer-links a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-text-dark);  /* #111928 */
  text-decoration: underline;
}

/* Footer responsive behavior */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .footer-links {
    gap: 16px;
  }
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }

.bg-surface { background-color: var(--color-surface); }
.bg-card { background-color: var(--color-card-bg); }
.bg-splash { background-color: var(--color-bg-splash); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

.shadow-sm    { box-shadow: var(--shadow-sm); }
.shadow       { box-shadow: var(--shadow); }
.shadow-md    { box-shadow: var(--shadow-md); }
.shadow-lg    { box-shadow: var(--shadow-lg); }
.shadow-xl    { box-shadow: var(--shadow-xl); }
.shadow-2xl   { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }

/* Spacing utilities */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }

/* Color theme classes — Figma color families
   Each sets fill (background), text (color), and border-color.
   Apply to any element: buttons, cards, badges, pills, tags, etc.
   Named after Figma color pages: red, yellow, orange, green, teal, cyan, blue, purple, pink, gray.
   ----------------------------------------------------------------- */
.color-red       { background: var(--color-red-light-5);    color: var(--color-red-dark);    border-color: var(--color-red); }
.color-yellow    { background: var(--color-yellow-light-3);  color: var(--color-yellow-dark); border-color: var(--color-yellow); }
.color-orange    { background: var(--color-orange-light-5);  color: var(--color-orange-dark); border-color: var(--color-orange); }
.color-green     { background: var(--color-green-light-6);   color: var(--color-green-dark);  border-color: var(--color-green); }
.color-teal      { background: var(--color-teal-light-4);    color: var(--color-teal-dark);   border-color: var(--color-secondary-teal); }
.color-cyan      { background: var(--color-cyan-light-3);    color: var(--color-cyan-dark);   border-color: var(--color-cyan); }
.color-blue      { background: var(--color-blue-light);      color: var(--color-primary-blue); border-color: var(--color-primary-blue); }
.color-purple    { background: var(--color-purple-light-3);  color: var(--color-purple-dark); border-color: var(--color-purple); }
.color-pink      { background: var(--color-pink-light-3);    color: var(--color-pink-dark);   border-color: var(--color-pink); }
.color-gray      { background: var(--color-gray-2);          color: var(--color-gray-7);      border-color: var(--color-gray-5); }

/* =========================================================
   STAT CARDS
   Shared component used across dashboard, conversations,
   analytics, and clinician analytics pages.

   Usage:
     <div class="stats-grid stats-grid--4">
       <div class="stat-card">
         <!-- optional header with icon -->
         <div class="stat-card-header">
           <div class="stat-card-icon" style="background: var(--color-primary-blue);">…</div>
           <div>
             <div class="stat-card-title">Label</div>
             <div class="stat-card-subtitle">This week</div>
           </div>
         </div>
         <!-- OR just a plain label -->
         <div class="stat-card-title">Label</div>

         <div class="stat-card-value">42</div>
         <div class="stat-card-change positive">↑ 12%</div>  <!-- optional -->
         <div class="stat-card-bar"><div class="stat-card-bar-fill" style="width:60%;background:var(--color-primary-blue);"></div></div>  <!-- optional -->
       </div>
     </div>
   ========================================================= */

.stats-grid {
  display: grid;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}
.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
.stats-grid--5 { grid-template-columns: repeat(5, 1fr); }
.stats-grid--6 { grid-template-columns: repeat(6, 1fr); }

.stat-card {
  background: var(--color-bg-splash);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: box-shadow var(--transition-base);
}
.stat-card:hover { box-shadow: var(--shadow-md); }

.stat-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
}
/* When title is used standalone (no header), give it muted colour like a label */
.stat-card > .stat-card-title {
  color: var(--color-text-muted);
  font-weight: 500;
}
.stat-card-subtitle {
  font-size: 12px;
  color: var(--color-text-muted);
}
.stat-card-value-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.stat-card-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.2;
}
.stat-card-change {
  font-size: 13px;
  font-weight: 500;
  min-height: 18px;
  color: var(--color-text-secondary);
}
.stat-card-change.positive { color: var(--color-green); }
.stat-card-change.negative { color: var(--color-error); }
.stat-card-change.neutral  { color: var(--color-text-muted); }

.stat-card-bar {
  height: 4px;
  background: var(--color-neutral);
  border-radius: 2px;
  margin-top: var(--spacing-sm);
  overflow: hidden;
}
.stat-card-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* Responsive */
@media (max-width: 1200px) {
  .stats-grid--5,
  .stats-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 840px) {
  .stats-grid--3,
  .stats-grid--4,
  .stats-grid--5,
  .stats-grid--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-grid--3,
  .stats-grid--4,
  .stats-grid--5,
  .stats-grid--6 { grid-template-columns: 1fr; }
}

/* =========================================================
   PAGE SECTIONS
   Generic section wrapper with a title. Used on admin,
   settings, and other dashboard-style pages.

   Usage:
     <div class="page-section">
       <h2 class="page-section__title">Users</h2>
       …content…
     </div>
   ========================================================= */

.page-section {
  margin-bottom: var(--spacing-xl);
}

.page-section__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-md);
}

/* =========================================================
   TOOLBAR
   Horizontal bar with left/right action groups.
   Used above tables and data sections.

   Usage:
     <div class="toolbar">
       <div class="toolbar__left">…buttons…</div>
       <div class="toolbar__right">…buttons…</div>
     </div>
   ========================================================= */

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-card-border);
}

.toolbar__left,
.toolbar__right {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 840px) {
  .toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   DATA TABLE
   Full-width table with sticky header, alternating rows,
   and hover state. Wrap in .data-table-wrap for border
   and overflow handling.

   Usage:
     <div class="data-table-wrap">
       <table class="data-table">
         <thead><tr><th>…</th></tr></thead>
         <tbody><tr><td>…</td></tr></tbody>
       </table>
     </div>
   ========================================================= */

.data-table-wrap {
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-card-border);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background: var(--color-card-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table th {
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: left;
  border-bottom: 1px solid var(--color-card-border);
}

.data-table td {
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-card-border);
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: var(--color-surface);
}

.data-table tbody tr:nth-child(even) {
  background: var(--color-card-bg);
}

.data-table tbody tr:nth-child(even):hover {
  background: var(--color-surface);
}

/* Scrollbar styling for table wraps */
.data-table-wrap::-webkit-scrollbar { width: 6px; }
.data-table-wrap::-webkit-scrollbar-track { background: var(--color-gray-2); border-radius: var(--radius-sm); }
.data-table-wrap::-webkit-scrollbar-thumb { background: var(--color-gray-6); border-radius: var(--radius-sm); }
.data-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--color-gray-7); }

@media (max-width: 840px) {
  .data-table-wrap { overflow-x: auto; }
}

/* =========================================================
   STATUS BADGE
   Small inline pill for status indicators.
   Only use color when it carries functional meaning
   (active/inactive, verified/failed, etc.).

   Usage:
     <span class="status-badge status-badge--active">Active</span>
     <span class="status-badge status-badge--inactive">Inactive</span>
     <span class="status-badge">Neutral</span>
   ========================================================= */

.status-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-lg);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--color-gray-2);
  color: var(--color-gray-7);
}

.status-badge--active {
  background: var(--color-green-light-6);
  color: var(--color-green-dark);
}

.status-badge--inactive {
  background: var(--color-red-light-5);
  color: var(--color-red-dark);
}

/* =========================================================
   MODAL
   Overlay + centered dialog. Close on backdrop click
   via event.target check in JS.

   Usage:
     <div class="modal-overlay" onclick="if(event.target===this)hide()">
       <div class="modal">
         <div class="modal__header">
           <h4 class="modal__title">Title</h4>
           <button class="modal__close" onclick="hide()">&#x2715;</button>
         </div>
         …content…
         <div class="modal__actions">
           <button class="btn btn-secondary">Cancel</button>
           <button class="btn btn-primary">Save</button>
         </div>
       </div>
     </div>
   ========================================================= */

.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: var(--spacing-xl);
  border-radius: var(--radius-xl);
  width: 440px;
  max-width: 90vw;
  box-shadow: var(--shadow-xl);
}

.modal--wide { width: 560px; }

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
}

.modal__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-dark);
}

.modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  line-height: 1;
  padding: var(--spacing-xs);
}

.modal__close:hover { color: var(--color-text-dark); }

.modal__actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  margin-top: var(--spacing-lg);
}

/* =========================================================
   FORM ROW (side-by-side fields)

   Usage:
     <div class="form-row">
       <div class="form-group" style="flex:1;">…</div>
       <div class="form-group" style="flex:1;">…</div>
     </div>
   ========================================================= */

.form-row {
  display: flex;
  gap: var(--spacing-md);
}

@media (max-width: 840px) {
  .form-row { flex-direction: column; }
}

/* =========================================================
   FILTER PILLS
   Horizontal row of toggle-able filter buttons.
   Active pill gets a subtle background.

   Usage:
     <div class="filter-pills">
       <button class="filter-pill active" data-filter="all">All (50)</button>
       <button class="filter-pill" data-filter="login">Login (12)</button>
     </div>
   ========================================================= */

.filter-pills {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}

.filter-pill {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  background: white;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-pill:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text-primary);
}

.filter-pill.active {
  background: var(--color-text-dark);
  color: white;
  border-color: var(--color-text-dark);
}