/* ═══════════════════════════════════════════════════════
   RapidSanctuary — Shared Design Tokens
   Extracted from admin-console/shared.css
   Surface-agnostic: used by admin-console, member-console,
   organization-website, and saas-marketing-website.
   Version: 1.0 (April 2026) — Brand Guideline aligned
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   SECTION 1: GOOGLE FONTS + DESIGN TOKENS (LIGHT MODE)
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand Primaries ── */
  --navy:            #10113D;
  --navy-light:      #1a1c5c;
  --navy-deep:       #0a0b2e;
  --navy-hover:      #252670;
  --purple-accent:   #4A4ECC;

  /* ── Gold System via color-mix (PrimeNG / Tailwind v4 pattern) ── */
  --p-primary-color: #fccc48;
  --tw-text-opacity: 1;
  --gold:            color-mix(in srgb, var(--p-primary-color) calc(100% * var(--tw-text-opacity, 1)), transparent);
  --gold-10:         color-mix(in srgb, var(--p-primary-color) 10%, transparent);
  --gold-15:         color-mix(in srgb, var(--p-primary-color) 15%, transparent);
  --gold-20:         color-mix(in srgb, var(--p-primary-color) 20%, transparent);
  --gold-30:         color-mix(in srgb, var(--p-primary-color) 30%, transparent);
  --gold-hover:      color-mix(in srgb, var(--p-primary-color) 85%, #000);
  --gold-light:      color-mix(in srgb, var(--p-primary-color) 40%, #fff);
  --gold-glow:       color-mix(in srgb, var(--p-primary-color) 30%, transparent);

  /* ── Neutral Scale (Zinc) ── */
  --white:     #ffffff;
  --zinc-50:   #fafafa;
  --zinc-100:  #f4f4f5;
  --zinc-200:  #e4e4e7;
  --zinc-300:  #d4d4d8;
  --zinc-400:  #a1a1aa;
  --zinc-500:  #71717a;
  --zinc-600:  #52525b;
  --zinc-700:  #3f3f46;
  --zinc-800:  #27272a;
  --zinc-900:  #18181b;
  --zinc-950:  #0a0a0b;

  /* ── Semantic Colors ── */
  --success:       #22c55e;
  --success-light: #dcfce7;
  --error:         #ef4444;
  --error-light:   #fee2e2;
  --warning:       #f59e0b;
  --warning-light: #fef3c7;
  --info:          #3b82f6;
  --info-light:    #dbeafe;

  /* ── Chart Palette ── */
  --chart-1: 44 97% 64%;
  --chart-2: 233 60% 25%;
  --chart-3: 225 40% 50%;
  --chart-4: 44 97% 76%;
  --chart-5: 233 40% 40%;
  --chart-6: 265 60% 55%;

  /* ── Typography ── */
  --font-body: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing Scale (4px base) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ── Border Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);

  /* ── Layout Tokens ── */
  --sidebar-width:     220px;
  --sidebar-collapsed: 64px;
  --topbar-height:     56px;
  --nav-height:        64px;
  --container-max:     1200px;
  --container-px:      24px;
  --section-py:        80px;
  --card-radius:       var(--radius-lg);
  --card-shadow-hover: 0 4px 16px rgba(0,0,0,0.10);

  /* ── spartan.ng / shadcn-compat HSL tokens ── */
  --background:             0 0% 100%;
  --foreground:             0 0% 4%;
  --card:                   0 0% 100%;
  --card-foreground:        0 0% 4%;
  --popover:                0 0% 100%;
  --popover-foreground:     0 0% 4%;
  --primary:                44 97% 64%;
  --primary-foreground:     233 60% 15%;
  --secondary:              240 5% 96%;
  --secondary-foreground:   0 0% 4%;
  --muted:                  240 5% 96%;
  --muted-foreground:       240 4% 46%;
  --accent:                 240 5% 96%;
  --accent-foreground:      0 0% 4%;
  --destructive:            0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border:                 240 6% 90%;
  --input:                  240 6% 90%;
  --ring:                   44 97% 64%;
  --radius:                 var(--radius-md);

  /* ── Sidebar HSL tokens ── */
  --sidebar-background:          233 60% 15%;
  --sidebar-foreground:          0 0% 100%;
  --sidebar-primary:             44 97% 64%;
  --sidebar-primary-foreground:  233 60% 15%;
  --sidebar-accent:              233 50% 20%;
  --sidebar-accent-foreground:   0 0% 100%;
  --sidebar-border:              233 40% 22%;
  --sidebar-ring:                44 97% 64%;
  --sidebar-muted:               0 0% 100%;
}


/* ═══════════════════════════════════════════════════════
   SECTION 2: DARK MODE TOKENS (html.dark)
   Brand Guideline § B: --dm-* token system
   ═══════════════════════════════════════════════════════ */

html.dark {
  color-scheme: dark;

  /* ── Surface tokens ── */
  --dm-background:         #09090b;
  --dm-card:               var(--zinc-900);
  --dm-secondary:          var(--zinc-800);
  --dm-sidebar-background: #0d0e12;
  --dm-sidebar-accent:     #1c1c1f;

  /* ── Text tokens ── */
  --dm-foreground:         var(--zinc-50);
  --dm-muted-foreground:   #bababf;

  /* ── Border & interaction tokens ── */
  --dm-border:             rgba(255,255,255,0.08);
  --dm-border-subtle:      rgba(255,255,255,0.06);
  --dm-hover:              rgba(255,255,255,0.06);

  /* ── Override light-mode HSL tokens for Tailwind ── */
  --background:             240 10% 4%;
  --foreground:             0 0% 98%;
  --card:                   240 6% 10%;
  --card-foreground:        0 0% 98%;
  --popover:                240 6% 10%;
  --popover-foreground:     0 0% 98%;
  --primary:                44 97% 68%;
  --primary-foreground:     240 10% 4%;
  --secondary:              240 4% 16%;
  --secondary-foreground:   0 0% 98%;
  --muted:                  240 4% 16%;
  --muted-foreground:       240 5% 65%;
  --accent:                 240 4% 16%;
  --accent-foreground:      0 0% 98%;
  --destructive:            0 63% 31%;
  --destructive-foreground: 0 0% 98%;
  --border:                 240 4% 16%;
  --input:                  240 4% 16%;
  --ring:                   44 97% 68%;

  /* ── Chart palette dark overrides ── */
  --chart-1: 44 97% 68%;
  --chart-2: 38 92% 50%;
  --chart-3: 32 81% 44%;
  --chart-4: 240 61% 15%;
  --chart-5: 238 57% 54%;

  /* ── Sidebar dark overrides ── */
  --sidebar-background:          240 10% 6%;
  --sidebar-foreground:          0 0% 95%;
  --sidebar-primary:             44 97% 68%;
  --sidebar-primary-foreground:  240 10% 4%;
  --sidebar-accent:              240 6% 12%;
  --sidebar-accent-foreground:   0 0% 95%;
  --sidebar-border:              240 4% 16%;
  --sidebar-ring:                44 97% 68%;
  --sidebar-muted:               240 5% 65%;
}


/* ═══════════════════════════════════════════════════════
   SECTION 3: BASE RESET + TYPOGRAPHY
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after {
  border-color: hsl(var(--border));
}

body {
  font-family: var(--font-body);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* Global scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--zinc-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--zinc-400); }
::-webkit-scrollbar-track { background: transparent; }
html.dark ::-webkit-scrollbar-thumb { background: var(--dm-secondary); }

h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
code, pre { font-family: var(--font-mono); font-size: 0.82em; }
a { color: inherit; text-decoration: none; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* ═══════════════════════════════════════════════════════
   SECTION 4: BUTTONS
   Brand Guideline § C: Primary = navy, Gold CTA,
   Outline, Ghost, Destructive
   ═══════════════════════════════════════════════════════ */

.btn-primary {
  background-color: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 8px 16px;
  transition: opacity 0.15s;
  cursor: pointer;
  border: none;
}
.btn-primary:hover { opacity: 0.85; }
html.dark .btn-primary {
  background-color: var(--navy-light);
}

.btn-gold {
  background-color: var(--gold);
  color: var(--navy);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 8px 16px;
  transition: background-color 0.15s;
  cursor: pointer;
  border: none;
}
.btn-gold:hover { background-color: var(--gold-hover); }

.btn-outline {
  background-color: transparent;
  color: var(--zinc-950);
  border: 1px solid var(--zinc-300);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 8px 16px;
  transition: background-color 0.15s;
  cursor: pointer;
}
.btn-outline:hover { background-color: var(--zinc-50); }
html.dark .btn-outline {
  color: var(--dm-foreground);
  border-color: rgba(255,255,255,0.14);
  background-color: transparent;
}
html.dark .btn-outline:hover { background-color: var(--dm-hover); }

.btn-ghost {
  background: transparent;
  color: var(--zinc-950);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 8px 16px;
  transition: background-color 0.15s;
  cursor: pointer;
  border: none;
}
.btn-ghost:hover { background-color: var(--zinc-100); }
html.dark .btn-ghost { color: var(--dm-foreground); }
html.dark .btn-ghost:hover { background-color: var(--dm-hover); }

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 8px 16px;
  transition: opacity 0.15s;
  cursor: pointer;
  border: none;
}
.btn-secondary:hover { opacity: 0.8; }

.btn-destructive {
  background-color: var(--error);
  color: var(--white);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 8px 16px;
  transition: opacity 0.15s;
  cursor: pointer;
  border: none;
}
.btn-destructive:hover { opacity: 0.88; }

/* Button sizes */
.btn-sm { padding: 5px 12px; font-size: 0.72rem; }
.btn-lg { padding: 10px 24px; font-size: 0.88rem; }


/* ═══════════════════════════════════════════════════════
   SECTION 5: CARDS
   Brand Guideline § C: bg white, border zinc-200,
   rounded-lg. No default shadow. Dark: border required.
   ═══════════════════════════════════════════════════════ */

.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
}
.card:hover {
  box-shadow: var(--shadow-sm);
}
html.dark .card {
  background-color: var(--dm-card);
  border-color: var(--dm-border);
}


/* ═══════════════════════════════════════════════════════
   SECTION 6: BADGES
   Brand Guideline § C: Pill shape, semantic colors,
   dark mode uses translucent ~18% tint + 400-level text
   ═══════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.15s;
}
.badge-primary   { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.badge-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.badge-outline   { background: transparent; border: 1px solid var(--zinc-300); color: var(--zinc-600); }
.badge-destructive { background-color: var(--error); color: var(--white); }
.badge-success   { background-color: var(--success-light); color: #166534; }
.badge-error     { background-color: var(--error-light); color: #991b1b; }
.badge-warning   { background-color: var(--warning-light); color: #92400e; }
.badge-info      { background-color: var(--info-light); color: #1e40af; }
.badge-gold      { background-color: var(--gold-10); color: var(--gold-hover); }
.badge-navy      { background-color: var(--navy); color: var(--gold); }

/* Dark badge overrides — translucent tint + 400-level text */
html.dark .badge-success { background-color: rgba(34,197,94,0.18); color: #4ade80; }
html.dark .badge-error   { background-color: rgba(239,68,68,0.18); color: #f87171; }
html.dark .badge-warning { background-color: rgba(245,158,11,0.18); color: #fbbf24; }
html.dark .badge-info    { background-color: rgba(59,130,246,0.18); color: #60a5fa; }
html.dark .badge-outline { border-color: rgba(255,255,255,0.14); color: var(--dm-muted-foreground); }
html.dark .badge-primary { background-color: rgba(255,255,255,0.1); color: var(--dm-foreground); }
html.dark .badge-gold    { background-color: rgba(252,204,72,0.15); color: var(--gold); }
html.dark .badge-navy    { background-color: var(--navy-light); color: var(--gold); }


/* ═══════════════════════════════════════════════════════
   SECTION 7: FORM CONTROLS
   Brand Guideline § C: Focus ring = gold at 20% (light) / 15% (dark)
   ═══════════════════════════════════════════════════════ */

input[type="checkbox"] { accent-color: var(--gold); }

input, select, textarea {
  font-family: var(--font-body);
  background-color: var(--white);
  border: 1px solid var(--zinc-200);
  color: var(--zinc-950);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(252,204,72,0.2);
}
input::placeholder, textarea::placeholder {
  color: var(--zinc-400);
}
html.dark input, html.dark select, html.dark textarea {
  background-color: var(--dm-secondary) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--dm-foreground) !important;
}
html.dark input::placeholder, html.dark textarea::placeholder {
  color: rgba(160,160,160,0.45);
}
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(252,204,72,0.15);
}


/* ═══════════════════════════════════════════════════════
   SECTION 8: TABLES
   Brand Guideline: header bg zinc-100 (light) / zinc-800 (dark)
   ═══════════════════════════════════════════════════════ */

thead tr {
  background-color: var(--zinc-100);
  border-bottom: 1px solid var(--zinc-200);
}
html.dark thead tr {
  background-color: var(--dm-secondary);
  border-bottom-color: var(--dm-border);
}
html.dark thead th {
  color: var(--dm-muted-foreground);
}
html.dark tbody td {
  border-color: rgba(255,255,255,0.04);
  color: var(--dm-muted-foreground);
}
html.dark tbody tr:hover {
  background-color: var(--dm-hover);
}


/* ═══════════════════════════════════════════════════════
   SECTION 9: ALERTS
   Brand Guideline § Showcase: 4 status variants + dark
   ═══════════════════════════════════════════════════════ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-radius: var(--radius-md);
  padding: 9px 11px;
  margin-bottom: 7px;
  border: 1px solid;
  font-size: 0.8rem;
}
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alert-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

html.dark .alert-success { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.28); color: #4ade80; }
html.dark .alert-error   { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.28); color: #f87171; }
html.dark .alert-warning { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.28); color: #fbbf24; }
html.dark .alert-info    { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.28); color: #60a5fa; }


/* ═══════════════════════════════════════════════════════
   SECTION 10: KPI / STAT WIDGETS
   ═══════════════════════════════════════════════════════ */

.kpi-card {
  background: var(--white);
  border: 1px solid var(--zinc-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
}
html.dark .kpi-card {
  background: var(--dm-card);
  border-color: var(--dm-border);
}
.kpi-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--zinc-500);
  margin-bottom: var(--space-1);
}
html.dark .kpi-label { color: var(--dm-muted-foreground); }
.kpi-value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--zinc-950);
}
html.dark .kpi-value { color: var(--dm-foreground); }
.kpi-trend {
  font-size: 0.68rem;
  font-weight: 600;
  margin-top: var(--space-1);
}
.kpi-trend-up   { color: var(--success); }
.kpi-trend-down { color: var(--error); }
.kpi-trend-warn { color: var(--warning); }


/* ═══════════════════════════════════════════════════════
   SECTION 11: CHART PLACEHOLDER
   ═══════════════════════════════════════════════════════ */

.chart-placeholder {
  background: var(--zinc-50);
  border: 2px dashed var(--zinc-300);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zinc-500);
  font-size: 13px;
  min-height: 200px;
}
html.dark .chart-placeholder {
  background: var(--dm-card);
  border-color: var(--dm-secondary);
  color: var(--dm-muted-foreground);
}


/* ═══════════════════════════════════════════════════════
   SECTION 12: MODALS & OVERLAYS
   ═══════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
}
.modal-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  overflow: hidden;
}
html.dark .modal-panel {
  background: var(--dm-card);
  border: 1px solid var(--dm-border);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}


/* ═══════════════════════════════════════════════════════
   SECTION 13: ANIMATIONS
   ═══════════════════════════════════════════════════════ */

.animate-in { animation: slideUp 0.15s ease-out; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════
   SECTION 14: PROGRESS BARS
   ═══════════════════════════════════════════════════════ */

.progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--zinc-100);
}
html.dark .progress-track { background: var(--dm-secondary); }
.progress-fill {
  height: 100%;
  border-radius: 3px;
}
.ring-chart-track { border-color: var(--zinc-200); }
html.dark .ring-chart-track { border-color: var(--dm-card); }


/* ═══════════════════════════════════════════════════════
   SECTION 15: PAGE HEADINGS
   ═══════════════════════════════════════════════════════ */

.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--zinc-950);
}
html.dark .page-title { color: var(--dm-foreground); }
.page-subtitle {
  font-size: 0.875rem;
  color: var(--zinc-500);
  margin-top: 2px;
}
html.dark .page-subtitle { color: var(--dm-muted-foreground); }


/* ═══════════════════════════════════════════════════════
   SECTION 16: TREE COMPONENT (Org Structure)
   ═══════════════════════════════════════════════════════ */

.tree-node { position: relative; }
.tree-children { position: relative; padding-left: 32px; }
.tree-branch { position: relative; }
.tree-branch::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 20px;
  width: 16px;
  height: 1px;
  background: var(--zinc-300);
}
.tree-branch::after {
  content: '';
  position: absolute;
  left: -16px;
  top: 0;
  width: 1px;
  bottom: -8px;
  background: var(--zinc-300);
}
.tree-branch:last-child::after {
  bottom: auto;
  height: 20px;
}
.tree-node > .tree-branch::before,
.tree-node > .tree-branch::after { display: none; }
html.dark .tree-branch::before,
html.dark .tree-branch::after { background: var(--dm-border); }


/* ═══════════════════════════════════════════════════════
   SECTION 17: DARK MODE TAILWIND UTILITY OVERRIDES
   Translates Tailwind utility classes used in HTML
   to proper dark mode values.
   ═══════════════════════════════════════════════════════ */

/* Body & main layout */
html.dark body { background-color: var(--dm-background) !important; color: var(--dm-foreground) !important; }
html.dark main { background-color: var(--dm-background) !important; }

/* Surface classes */
html.dark .bg-white { background-color: var(--dm-card) !important; }
html.dark .bg-zinc-50 { background-color: var(--dm-background) !important; }
html.dark .bg-zinc-100 { background-color: var(--dm-secondary) !important; }
html.dark .bg-zinc-200 { background-color: hsl(240 4% 20%) !important; }
html.dark .bg-zinc-300 { background-color: hsl(240 4% 25%) !important; }
html.dark .bg-zinc-400 { background-color: hsl(240 4% 30%) !important; }
html.dark .bg-zinc-800 { background-color: hsl(240 6% 12%) !important; }

/* Border classes */
html.dark .border-zinc-200 { border-color: var(--dm-border) !important; }
html.dark .border-zinc-100 { border-color: var(--dm-border) !important; }
html.dark .border-zinc-300 { border-color: rgba(255,255,255,0.12) !important; }

/* Text classes — raised values for WCAG AA contrast on dark bg */
html.dark .text-zinc-950 { color: var(--dm-foreground) !important; }
html.dark .text-zinc-900 { color: var(--dm-foreground) !important; }
html.dark .text-zinc-800 { color: hsl(0 0% 90%) !important; }
html.dark .text-zinc-700 { color: hsl(0 0% 83%) !important; }
html.dark .text-zinc-600 { color: var(--dm-muted-foreground) !important; }
html.dark .text-zinc-500 { color: hsl(240 4% 74%) !important; }
html.dark .text-zinc-400 { color: hsl(240 5% 55%) !important; }
html.dark .text-zinc-300 { color: hsl(240 4% 40%) !important; }

/* Disabled inputs — muted surface + text in dark mode */
html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled {
  background-color: hsl(240 4% 14%) !important;
  color: hsl(240 5% 45%) !important;
  border-color: var(--dm-border) !important;
}

/* Disabled opacity — ensure opacity-based disabled states stay visible */
html.dark .disabled\:opacity-50:disabled { opacity: 0.6 !important; }
html.dark .opacity-30 { opacity: 0.45 !important; }
html.dark .opacity-40 { opacity: 0.55 !important; }
html.dark .opacity-50 { opacity: 0.6 !important; }
html.dark .opacity-60 { opacity: 0.7 !important; }

/* Hover classes */
html.dark .hover\:bg-zinc-50:hover { background-color: var(--dm-hover) !important; }
html.dark .hover\:bg-zinc-50\/50:hover { background-color: var(--dm-hover) !important; }
html.dark .hover\:bg-zinc-100:hover { background-color: rgba(255,255,255,0.08) !important; }
html.dark .hover\:bg-black\/5:hover { background-color: rgba(255,255,255,0.08) !important; }

/* Opacity variant surfaces — subtle zinc tints on dark bg */
html.dark .bg-zinc-50\/30 { background-color: rgba(255,255,255,0.02) !important; }
html.dark .bg-zinc-50\/50 { background-color: rgba(255,255,255,0.03) !important; }
html.dark .bg-zinc-50\/60 { background-color: rgba(255,255,255,0.035) !important; }
html.dark .bg-zinc-50\/70 { background-color: rgba(255,255,255,0.04) !important; }

/* Dividers */
html.dark .divide-zinc-200 > * + * { border-color: var(--dm-border) !important; }
html.dark .divide-zinc-100 > * + * { border-color: var(--dm-border) !important; }

/* Rings & shadows */
html.dark .ring-zinc-200 { --tw-ring-color: var(--dm-border) !important; }
html.dark .shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.4) !important; }
html.dark .shadow-md  { box-shadow: 0 2px 8px 0 rgba(0,0,0,0.4) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
html.dark .shadow-lg  { box-shadow: 0 4px 12px 0 rgba(0,0,0,0.4) !important; border: 1px solid rgba(255,255,255,0.08) !important; }
html.dark .shadow-2xl { box-shadow: 0 4px 24px 0 rgba(0,0,0,0.5) !important; border: 1px solid rgba(255,255,255,0.08) !important; }

/* WCAG 1.4.11: dark-on-dark border enforcement */
html.dark .bg-white[class*="rounded"] { border: 1px solid var(--dm-border) !important; }

/* Description box text — universal catch-all for ALL text elements inside
   cards/containers that lack explicit text color classes.
   Covers: bg-white, bg-zinc-50, bg-zinc-100, and all semantic bg-*-50 surfaces.
   Excludes SVGs/icons inside buttons — they must inherit the button's color. */
html.dark .bg-white :not([class*="text-"]):not(button svg):not(button i),
html.dark .bg-zinc-50 :not([class*="text-"]):not(button svg):not(button i),
html.dark .bg-zinc-100 :not([class*="text-"]):not(button svg):not(button i),
html.dark [class*="bg-"][class*="-50"] :not([class*="text-"]):not(button svg):not(button i) {
  color: var(--dm-foreground);
}
/* Muted variant for secondary text elements without explicit color */
html.dark .bg-white p:not([class*="text-"]),
html.dark .bg-white td:not([class*="text-"]),
html.dark .bg-white th:not([class*="text-"]),
html.dark .bg-white label:not([class*="text-"]),
html.dark .bg-white li:not([class*="text-"]),
html.dark .bg-zinc-50 p:not([class*="text-"]),
html.dark .bg-zinc-50 td:not([class*="text-"]),
html.dark .bg-zinc-50 th:not([class*="text-"]),
html.dark .bg-zinc-50 label:not([class*="text-"]),
html.dark .bg-zinc-50 li:not([class*="text-"]) {
  color: var(--dm-muted-foreground);
}

/* ── Purple ── */
html.dark .bg-purple-50,
html.dark .bg-purple-accent\/10 { background-color: rgba(74,78,204,0.22) !important; }
html.dark .bg-purple-50\/40     { background-color: rgba(74,78,204,0.14) !important; }
html.dark .bg-purple-accent\/5  { background-color: rgba(74,78,204,0.10) !important; }
html.dark .bg-purple-100        { background-color: rgba(74,78,204,0.28) !important; }
html.dark .text-purple-accent   { color: #a5a8f5 !important; }
html.dark .text-purple-500,
html.dark .text-purple-600      { color: #a5a8f5 !important; }
html.dark .text-purple-700      { color: #a5a8f5 !important; }
html.dark .text-purple-800      { color: #c4c6fa !important; }
html.dark .border-purple-50     { border-color: rgba(74,78,204,0.22) !important; }
html.dark .border-purple-200    { border-color: rgba(74,78,204,0.40) !important; }
html.dark .border-purple-300,
html.dark .border-purple-400,
html.dark .border-purple-500    { border-color: rgba(74,78,204,0.50) !important; }
html.dark .border-purple-accent\/20 { border-color: rgba(74,78,204,0.30) !important; }
html.dark .hover\:bg-purple-50:hover  { background-color: rgba(74,78,204,0.16) !important; }
html.dark .hover\:bg-purple-100:hover { background-color: rgba(74,78,204,0.22) !important; }
html.dark .hover\:bg-purple-200:hover { background-color: rgba(74,78,204,0.32) !important; }

/* ── Blue (info banners, badges, tree nodes) ── */
html.dark .bg-blue-50   { background-color: rgba(59,130,246,0.18) !important; }
html.dark .bg-blue-50\/30 { background-color: rgba(59,130,246,0.10) !important; }
html.dark .bg-blue-50\/50 { background-color: rgba(59,130,246,0.12) !important; }
html.dark .bg-blue-100  { background-color: rgba(59,130,246,0.25) !important; }
html.dark .text-blue-500 { color: #7eb8fc !important; }
html.dark .text-blue-600,
html.dark .text-blue-700 { color: #7eb8fc !important; }
html.dark .text-blue-800 { color: #93c5fd !important; }
html.dark .text-blue-900 { color: #bfdbfe !important; }
html.dark .border-blue-50  { border-color: rgba(59,130,246,0.20) !important; }
html.dark .border-blue-100 { border-color: rgba(59,130,246,0.25) !important; }
html.dark .border-blue-200 { border-color: rgba(59,130,246,0.35) !important; }
html.dark .border-blue-300,
html.dark .border-blue-400,
html.dark .border-blue-500 { border-color: rgba(59,130,246,0.50) !important; }
html.dark .hover\:bg-blue-50:hover  { background-color: rgba(59,130,246,0.14) !important; }
html.dark .hover\:bg-blue-200:hover { background-color: rgba(59,130,246,0.32) !important; }

/* ── Green (success banners, badges, tree nodes) ── */
html.dark .bg-green-50  { background-color: rgba(34,197,94,0.16) !important; }
html.dark .bg-green-50\/50 { background-color: rgba(34,197,94,0.10) !important; }
html.dark .bg-green-100 { background-color: rgba(34,197,94,0.22) !important; }
html.dark .text-green-400,
html.dark .text-green-500 { color: #4ade80 !important; }
html.dark .text-green-600,
html.dark .text-green-700 { color: #4ade80 !important; }
html.dark .text-green-800 { color: #86efac !important; }
html.dark .text-green-900 { color: #bbf7d0 !important; }
html.dark .border-green-50  { border-color: rgba(34,197,94,0.18) !important; }
html.dark .border-green-100 { border-color: rgba(34,197,94,0.20) !important; }
html.dark .border-green-200 { border-color: rgba(34,197,94,0.30) !important; }
html.dark .border-green-300,
html.dark .border-green-500 { border-color: rgba(34,197,94,0.45) !important; }
html.dark .hover\:bg-green-50:hover  { background-color: rgba(34,197,94,0.12) !important; }
html.dark .hover\:bg-green-100:hover { background-color: rgba(34,197,94,0.18) !important; }
html.dark .hover\:bg-green-200:hover { background-color: rgba(34,197,94,0.28) !important; }

/* ── Amber (warning banners, badges, tree nodes) ── */
html.dark .bg-amber-50  { background-color: rgba(245,158,11,0.18) !important; }
html.dark .bg-amber-50\/30 { background-color: rgba(245,158,11,0.10) !important; }
html.dark .bg-amber-50\/50 { background-color: rgba(245,158,11,0.12) !important; }
html.dark .bg-amber-100 { background-color: rgba(245,158,11,0.25) !important; }
html.dark .text-amber-400 { color: #fbbf24 !important; }
html.dark .text-amber-500 { color: #fbbf24 !important; }
html.dark .text-amber-600,
html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-amber-900 { color: #fde68a !important; }
html.dark .border-amber-50  { border-color: rgba(245,158,11,0.20) !important; }
html.dark .border-amber-200 { border-color: rgba(245,158,11,0.35) !important; }
html.dark .border-amber-300,
html.dark .border-amber-400 { border-color: rgba(245,158,11,0.50) !important; }
html.dark .hover\:bg-amber-50:hover { background-color: rgba(245,158,11,0.14) !important; }

/* ── Rose (tree nodes) ── */
html.dark .bg-rose-50   { background-color: rgba(244,63,94,0.16) !important; }
html.dark .bg-rose-50\/50 { background-color: rgba(244,63,94,0.10) !important; }
html.dark .bg-rose-100  { background-color: rgba(244,63,94,0.22) !important; }
html.dark .text-rose-600,
html.dark .text-rose-700 { color: #fb7185 !important; }
html.dark .border-rose-50  { border-color: rgba(244,63,94,0.18) !important; }
html.dark .border-rose-200 { border-color: rgba(244,63,94,0.30) !important; }

/* ── Cyan (org-structure types, audit-logs, services) ── */
html.dark .bg-cyan-50   { background-color: rgba(6,182,212,0.16) !important; }
html.dark .bg-cyan-50\/50 { background-color: rgba(6,182,212,0.10) !important; }
html.dark .bg-cyan-100  { background-color: rgba(6,182,212,0.22) !important; }
html.dark .text-cyan-600,
html.dark .text-cyan-700 { color: #22d3ee !important; }
html.dark .border-cyan-50  { border-color: rgba(6,182,212,0.18) !important; }
html.dark .border-cyan-100 { border-color: rgba(6,182,212,0.22) !important; }
html.dark .border-cyan-200 { border-color: rgba(6,182,212,0.30) !important; }

/* ── Yellow (interaction timelines, badges) ── */
html.dark .bg-yellow-50  { background-color: rgba(234,179,8,0.16) !important; }
html.dark .bg-yellow-100 { background-color: rgba(234,179,8,0.22) !important; }
html.dark .text-yellow-600,
html.dark .text-yellow-700 { color: #facc15 !important; }
html.dark .text-yellow-800 { color: #fde047 !important; }
html.dark .border-yellow-200 { border-color: rgba(234,179,8,0.35) !important; }

/* ── Orange (badges, status indicators) ── */
html.dark .bg-orange-50  { background-color: rgba(249,115,22,0.16) !important; }
html.dark .bg-orange-100 { background-color: rgba(249,115,22,0.22) !important; }
html.dark .text-orange-500 { color: #fb923c !important; }
html.dark .text-orange-600,
html.dark .text-orange-700 { color: #fb923c !important; }
html.dark .border-orange-200 { border-color: rgba(249,115,22,0.35) !important; }

/* ── Pink (interaction timelines, badges) ── */
html.dark .bg-pink-50  { background-color: rgba(236,72,153,0.16) !important; }
html.dark .bg-pink-100 { background-color: rgba(236,72,153,0.22) !important; }
html.dark .text-pink-600,
html.dark .text-pink-700 { color: #f472b6 !important; }

/* ── Teal (badges, status indicators) ── */
html.dark .bg-teal-50  { background-color: rgba(20,184,166,0.16) !important; }
html.dark .bg-teal-100 { background-color: rgba(20,184,166,0.22) !important; }
html.dark .text-teal-600,
html.dark .text-teal-700 { color: #2dd4bf !important; }

/* ── Indigo (badges, status indicators) ── */
html.dark .bg-indigo-50  { background-color: rgba(99,102,241,0.16) !important; }
html.dark .bg-indigo-100 { background-color: rgba(99,102,241,0.22) !important; }
html.dark .text-indigo-600,
html.dark .text-indigo-700 { color: #818cf8 !important; }

/* ── Violet (badges) ── */
html.dark .bg-violet-50  { background-color: rgba(139,92,246,0.16) !important; }
html.dark .text-violet-600,
html.dark .text-violet-700 { color: #a78bfa !important; }

/* ── Emerald (badges, status) ── */
html.dark .bg-emerald-50  { background-color: rgba(16,185,129,0.16) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16,185,129,0.22) !important; }
html.dark .bg-emerald-300 { background-color: rgba(16,185,129,0.40) !important; }
html.dark .text-emerald-600,
html.dark .text-emerald-700 { color: #34d399 !important; }

/* ── Sky (badges) ── */
html.dark .bg-sky-50  { background-color: rgba(14,165,233,0.16) !important; }
html.dark .text-sky-700 { color: #38bdf8 !important; }

/* ── Red (error banners, badges, buttons) ── */
html.dark .bg-red-50    { background-color: rgba(239,68,68,0.16) !important; }
html.dark .bg-red-50\/50 { background-color: rgba(239,68,68,0.10) !important; }
html.dark .bg-red-100   { background-color: rgba(239,68,68,0.22) !important; }
html.dark .text-red-400,
html.dark .text-red-500  { color: #f87171 !important; }
html.dark .text-red-600  { color: #f87171 !important; }
html.dark .text-red-700  { color: #fca5a5 !important; }
html.dark .text-red-800  { color: #fca5a5 !important; }
html.dark .text-red-900  { color: #fecaca !important; }
html.dark .border-red-100 { border-color: rgba(239,68,68,0.20) !important; }
html.dark .border-red-200 { border-color: rgba(239,68,68,0.30) !important; }
html.dark .border-red-300,
html.dark .border-red-400 { border-color: rgba(239,68,68,0.45) !important; }
html.dark .hover\:bg-red-50:hover  { background-color: rgba(239,68,68,0.12) !important; }
html.dark .hover\:bg-red-100:hover { background-color: rgba(239,68,68,0.18) !important; }
html.dark .hover\:bg-red-200:hover { background-color: rgba(239,68,68,0.28) !important; }


/* ═══════════════════════════════════════════════════════
   SECTION 18: DARK MODE — GOLD & NAVY UTILITIES
   ═══════════════════════════════════════════════════════ */

/* Gold accent classes — solid gold stays gold */
html.dark .text-gold, html.dark [class*="text-gold"] { color: var(--gold) !important; }
html.dark .bg-gold { background-color: var(--gold) !important; }
html.dark .bg-gold-hover { background-color: var(--gold-hover) !important; }
html.dark .border-gold { border-color: var(--gold) !important; }

/* Gold tint variants — subtle gold on dark bg, NOT solid gold */
html.dark .bg-gold\/5  { background-color: rgba(252,204,72,0.08) !important; }
html.dark .bg-gold\/10 { background-color: rgba(252,204,72,0.12) !important; }
html.dark .bg-gold\/20 { background-color: rgba(252,204,72,0.18) !important; }
html.dark .border-gold\/40 { border-color: rgba(252,204,72,0.35) !important; }
html.dark .border-gold\/50 { border-color: rgba(252,204,72,0.45) !important; }
html.dark .hover\:border-gold\/60:hover { border-color: rgba(252,204,72,0.55) !important; }
html.dark .hover\:bg-gold\/5:hover { background-color: rgba(252,204,72,0.10) !important; }
html.dark .hover\:bg-gold\/20:hover { background-color: rgba(252,204,72,0.22) !important; }

/* Navy text → Gold in dark mode (navy is invisible on dark bg) */
html.dark .text-navy { color: var(--gold) !important; }
html.dark .hover\:text-navy\/80:hover { color: color-mix(in srgb, var(--p-primary-color) 80%, transparent) !important; }
html.dark .bg-navy { background-color: hsl(var(--sidebar-background)) !important; }

/* Gold button text: keep dark text on SOLID gold bg (11:1 contrast) */
.bg-gold.text-navy,
html.dark .bg-gold.text-navy,
html.dark .bg-gold .text-navy,
html.dark .bg-gold.text-navy svg,
html.dark .bg-gold.text-navy i { color: var(--navy) !important; }

/* .btn-gold always uses navy text — lock it in dark mode too */
html.dark .btn-gold { color: var(--navy) !important; }
html.dark .btn-gold svg,
html.dark .btn-gold i { color: var(--navy) !important; }

/* Gold tint + text-navy: navy → gold (tinted bg is dark, navy text invisible) */
html.dark .bg-gold\/5.text-navy,
html.dark .bg-gold\/10.text-navy,
html.dark .bg-gold\/20.text-navy,
html.dark .bg-gold\/5 .text-navy,
html.dark .bg-gold\/10 .text-navy,
html.dark .bg-gold\/20 .text-navy { color: var(--gold) !important; }
/* Gold tint chip text without .text-navy — ensure visible on subtle bg */
html.dark [class*="bg-gold\/"].text-zinc-800 { color: var(--gold) !important; }

/* ── Dark mode icon inheritance ──
   Lucide replaces <i> with <svg> that lacks the parent's text-* color class.
   Without this, SVGs pick up the general dark foreground instead of the
   button/link's converted text color. color:inherit fixes it; explicit
   color classes on the SVG (e.g. text-green-600) have higher specificity
   and still win. */
html.dark button svg,
html.dark a svg,
html.dark [role="button"] svg { color: inherit; }


/* ═══════════════════════════════════════════════════════
   SECTION 19: SVG DENDROGRAM + CHART SIZE WRAPPERS
   ═══════════════════════════════════════════════════════ */

/* Light mode */
.dn-line       { stroke: var(--zinc-300); stroke-width: 1.5; fill: none; }
.dn-node       { fill: var(--white); stroke: var(--zinc-200); stroke-width: 1.5; }
.dn-root       { fill: var(--gold); stroke: var(--gold); }
.dn-title      { font-family: var(--font-body); font-size: 11px; font-weight: 700; fill: var(--zinc-900); }
.dn-root-title { fill: var(--navy); }
.dn-sub        { font-family: var(--font-body); font-size: 9.5px; fill: var(--zinc-500); }
.dn-root-sub   { fill: var(--navy); opacity: 0.75; }
.dn-node-sm    { fill: var(--white); stroke: var(--zinc-200); stroke-width: 1.5; cursor: pointer; transition: stroke 0.15s; }
.dn-node-sm:hover { stroke: var(--gold); }
.dn-svg        { overflow: visible; display: block; }

/* Chart canvas wrappers */
.chart-wrap-sm  { position: relative; height: 180px; }
.chart-wrap-md  { position: relative; height: 220px; }
.chart-wrap-lg  { position: relative; height: 260px; }
.chart-wrap-xl  { position: relative; height: 280px; }
.chart-wrap-320 { position: relative; height: 320px; }

/* Dark mode */
html.dark .dn-line    { stroke: var(--dm-border); }
html.dark .dn-node    { fill: var(--dm-card); stroke: var(--dm-secondary); }
html.dark .dn-node-sm { fill: var(--dm-card); stroke: var(--dm-secondary); }
html.dark .dn-node-sm:hover { stroke: var(--gold); }
html.dark .dn-title   { fill: #c8c8e0; }
html.dark .dn-sub     { fill: #8b8ba3; }
html.dark .dn-root         { fill: var(--gold); stroke: var(--gold); }
html.dark .dn-root-title   { fill: var(--navy); }
html.dark .dn-root-sub     { fill: var(--navy); opacity: 0.7; }


/* ═══════════════════════════════════════════════════════
   SECTION 20: MISC SHARED COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* Team badge */
.team-badge {
  font-size: 9px;
  font-weight: 700;
  background-color: var(--purple-accent);
  color: var(--white);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* Action icon button (table row actions) */
.action-icon {
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s;
  cursor: pointer;
}
.action-icon:hover { background-color: var(--zinc-100); }
html.dark .action-icon:hover { background-color: var(--dm-hover); }
.action-icon-danger:hover { background-color: var(--error-light); }
html.dark .action-icon-danger:hover { background-color: rgba(239,68,68,0.12); }

/* Empty state (short definition — used inline in some pages) */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-4);
  color: var(--zinc-400);
  text-align: center;
}

/* Section label (small caps above sections) */
.section-label-sm {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--zinc-400);
}
html.dark .section-label-sm { color: var(--dm-muted-foreground); }

/* Filter chip */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--zinc-100);
  border-radius: var(--radius-sm);
  color: var(--zinc-700);
}
html.dark .filter-chip {
  background: var(--dm-secondary);
  color: var(--dm-muted-foreground);
}

/* Tab group */
.tab-group {
  display: flex;
  background: var(--white);
  border: 1px solid var(--zinc-200);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}
html.dark .tab-group {
  background: var(--dm-card);
  border-color: var(--dm-border);
}
.tab-item {
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--zinc-500);
  cursor: pointer;
  transition: all 0.15s;
}
.tab-item:hover { background: var(--zinc-50); color: var(--zinc-700); }
.tab-item-active {
  background: var(--navy);
  color: var(--white);
}
html.dark .tab-item { color: var(--dm-muted-foreground); }
html.dark .tab-item:hover { background: var(--dm-hover); color: var(--dm-foreground); }
html.dark .tab-item-active { background: var(--navy-light); color: var(--white); }

/* Dropdown menu */
.dropdown-menu {
  background: var(--white);
  border: 1px solid var(--zinc-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}
html.dark .dropdown-menu {
  background: var(--dm-card);
  border-color: var(--dm-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}


/* ═══════════════════════════════════════════════════════
   SECTION 21: RESPONSIVE MEDIA QUERIES
   ═══════════════════════════════════════════════════════ */

/* ─── Mobile: < 640px ─── */
@media (max-width: 639px) {
  /* Grid layouts: single column */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }

  /* Tables: horizontal scroll */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards: full width stacked */
  .card, .kpi-card {
    width: 100% !important;
  }

  /* Modal: full width with small margin */
  .modal-panel {
    width: calc(100% - 2rem) !important;
    max-width: none !important;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  /* Touch targets: min 44px */
  .btn-primary, .btn-gold, .btn-outline, .btn-ghost,
  .btn-secondary, .btn-destructive,
  .tab-item, .action-icon {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ─── Tablet: 640px – 1023px ─── */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Grids: 2 columns */
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tables: scroll if needed */
  .table-wrapper {
    overflow-x: auto;
  }
}

/* ─── Large Desktop: 1440px+ ─── */
@media (min-width: 1440px) {
  .grid-cols-5 {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}


/* ═══════════════════════════════════════════════════════
   SECTION 22: SECOND DARK MODE BLOCK
   Extended component overrides with more specific selectors
   ═══════════════════════════════════════════════════════ */

html.dark {
  color-scheme: dark;
}

/* Card backgrounds and borders */
html.dark .card,
html.dark .kpi-card {
  background-color: var(--dm-card);
  border-color: var(--dm-border);
}

/* Table rows and headers */
html.dark table {
  border-color: var(--dm-border);
}
html.dark thead tr {
  background-color: var(--dm-secondary);
  border-bottom-color: var(--dm-border);
}
html.dark thead th {
  color: var(--dm-muted-foreground);
}
html.dark tbody tr {
  border-color: rgba(255,255,255,0.04);
}
html.dark tbody td {
  color: var(--dm-muted-foreground);
}
html.dark tbody tr:hover {
  background-color: var(--dm-hover);
}

/* Text colors: primary, secondary, muted */
html.dark .text-primary { color: var(--dm-foreground) !important; }
html.dark .text-secondary { color: var(--dm-muted-foreground) !important; }
html.dark .text-muted { color: rgba(186,186,191,0.7) !important; }

/* Input/select field backgrounds and borders */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: var(--dm-secondary) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--dm-foreground) !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(252,204,72,0.15);
}

/* Modal backgrounds */
html.dark .modal-overlay {
  background: rgba(0,0,0,0.7);
}
html.dark .modal-panel {
  background: var(--dm-card);
  border: 1px solid var(--dm-border);
}

/* Badge dark overrides */
html.dark .badge-success { background-color: rgba(34,197,94,0.18); color: #4ade80; }
html.dark .badge-error   { background-color: rgba(239,68,68,0.18); color: #f87171; }
html.dark .badge-warning { background-color: rgba(245,158,11,0.18); color: #fbbf24; }
html.dark .badge-info    { background-color: rgba(59,130,246,0.18); color: #60a5fa; }
html.dark .badge-gold    { background-color: rgba(252,204,72,0.15); color: var(--gold); }
html.dark .badge-navy    { background-color: var(--navy-light); color: var(--gold); }

/* KPI cards dark */
html.dark .kpi-label { color: var(--dm-muted-foreground); }
html.dark .kpi-value { color: var(--dm-foreground); }


/* ═══════════════════════════════════════════════════════
   SECTION 23: EMPTY STATES — FULL VERSION
   Centered container for empty tables / lists
   ═══════════════════════════════════════════════════════ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-4);
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zinc-300);
  margin-bottom: var(--space-4);
  font-size: 2.5rem;
}
html.dark .empty-state-icon {
  color: var(--dm-muted-foreground);
}

.empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--zinc-700);
  margin-bottom: var(--space-2);
}
html.dark .empty-state-title {
  color: var(--dm-foreground);
}

.empty-state-desc {
  font-size: 0.82rem;
  color: var(--zinc-500);
  max-width: 320px;
  line-height: 1.5;
  margin-bottom: var(--space-6);
}
html.dark .empty-state-desc {
  color: var(--dm-muted-foreground);
}

.empty-state-action {
  background-color: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 8px 20px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.empty-state-action:hover {
  background-color: var(--gold-hover);
}


/* ═══════════════════════════════════════════════════════
   SECTION 24: FORM VALIDATION
   Complement validators.js — base styles
   ═══════════════════════════════════════════════════════ */

.field-error {
  border-color: var(--error) !important;
}
.field-error:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,0.2) !important;
}
html.dark .field-error {
  border-color: var(--error) !important;
}
html.dark .field-error:focus {
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important;
}

.field-success {
  border-color: var(--success) !important;
}
.field-success:focus {
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2) !important;
}
html.dark .field-success {
  border-color: var(--success) !important;
}
html.dark .field-success:focus {
  box-shadow: 0 0 0 3px rgba(34,197,94,0.15) !important;
}

.field-error-message {
  color: var(--error);
  font-size: 0.72rem;
  margin-top: var(--space-1);
  display: block;
}
html.dark .field-error-message {
  color: #f87171;
}


/* ═══════════════════════════════════════════════════════
   SECTION 25: TABLE WRAPPER + TABLE ACTIONS
   ═══════════════════════════════════════════════════════ */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--zinc-200);
}
html.dark .table-wrapper {
  border-color: var(--dm-border);
}

.table-wrapper table {
  min-width: 640px;
  width: 100%;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: flex-end;
}


/* ═══════════════════════════════════════════════════════
   SECTION 26: STATUS BADGES
   ═══════════════════════════════════════════════════════ */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
}

.status-badge-active {
  background-color: var(--success-light);
  color: #166534;
}
html.dark .status-badge-active {
  background-color: rgba(34,197,94,0.18);
  color: #4ade80;
}

.status-badge-inactive {
  background-color: var(--zinc-100);
  color: var(--zinc-600);
}
html.dark .status-badge-inactive {
  background-color: var(--dm-secondary);
  color: var(--dm-muted-foreground);
}

.status-badge-pending {
  background-color: var(--warning-light);
  color: #92400e;
}
html.dark .status-badge-pending {
  background-color: rgba(245,158,11,0.18);
  color: #fbbf24;
}

.status-badge-suspended {
  background-color: var(--error-light);
  color: #991b1b;
}
html.dark .status-badge-suspended {
  background-color: rgba(239,68,68,0.18);
  color: #f87171;
}

.status-badge-draft {
  background-color: var(--info-light);
  color: #1e40af;
}
html.dark .status-badge-draft {
  background-color: rgba(59,130,246,0.18);
  color: #60a5fa;
}


/* ═══════════════════════════════════════════════════════
   SECTION 27: CSS-ONLY CHARTS
   ═══════════════════════════════════════════════════════ */

/* CSS-based bar chart */
.css-bar { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding-top: 8px; }
.css-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.css-bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.4s ease; min-width: 12px; }
.css-bar-label { font-size: 10px; color: var(--zinc-500); white-space: nowrap; }
.css-bar-value { font-size: 9px; font-weight: 600; color: var(--zinc-700); }

/* Horizontal bar chart */
.css-hbar { display: flex; flex-direction: column; gap: 8px; }
.css-hbar-row { display: flex; align-items: center; gap: 8px; }
.css-hbar-label { width: 90px; font-size: 11px; color: var(--zinc-500); text-align: right; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.css-hbar-track { flex: 1; height: 20px; background: var(--zinc-100); border-radius: 4px; overflow: hidden; position: relative; }
.css-hbar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.css-hbar-val { font-size: 11px; font-weight: 600; color: var(--zinc-700); width: 40px; text-align: right; flex-shrink: 0; }

/* Segment bar */
.css-segment { display: flex; height: 28px; border-radius: 6px; overflow: hidden; }
.css-segment-part { transition: width 0.4s ease; min-width: 2px; }
.css-segment-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.css-segment-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--zinc-500); }
.css-segment-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Grouped bar chart */
.css-grouped { display: flex; align-items: flex-end; gap: 6px; height: 180px; }
.css-grouped-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.css-grouped-pair { display: flex; gap: 2px; width: 100%; justify-content: center; }
.css-grouped-bar { width: 45%; border-radius: 3px 3px 0 0; transition: height 0.4s ease; }

/* Ring / retention display */
.css-ring { width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; }
.css-ring-brand { }
.css-ring-brand::before { display: none; }

/* Doughnut chart */
.css-doughnut-wrap { display: flex; align-items: center; gap: 24px; }
.css-doughnut { width: 160px; height: 160px; border-radius: 50%; position: relative; flex-shrink: 0; }
.css-doughnut::after { content: ''; position: absolute; inset: 32px; border-radius: 50%; background: white; }
.css-doughnut-legend { display: flex; flex-direction: column; gap: 8px; }
.css-doughnut-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--zinc-500); }
.css-doughnut-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Pie chart */
.css-pie-wrap { display: flex; align-items: center; gap: 24px; }
.css-pie { width: 160px; height: 160px; border-radius: 50%; position: relative; flex-shrink: 0; }
.css-pie-legend { display: flex; flex-direction: column; gap: 8px; }
.css-pie-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--zinc-500); }
.css-pie-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Collapsible section */
.dash-section-header { cursor: pointer; user-select: none; }
.dash-section-header:hover { opacity: 0.85; }
.dash-section-body.collapsed { display: none; }

/* Org tree (dashboard) */
.org-tree-node { padding: 6px 12px; border: 1px solid var(--zinc-200); border-radius: 8px; background: white; font-size: 12px; }
.org-tree-node.root { background: var(--navy); color: white; border-color: var(--navy); }
.org-tree-children { margin-left: 24px; border-left: 2px solid var(--zinc-200); padding-left: 16px; }
.org-tree-children > div { position: relative; margin-top: 8px; }
.org-tree-children > div::before { content: ''; position: absolute; left: -16px; top: 50%; width: 16px; height: 0; border-top: 2px solid var(--zinc-200); }

/* Charts dark mode */
html.dark .css-doughnut::after { background: var(--dm-card, var(--zinc-900)); }
html.dark .css-doughnut-legend-item, html.dark .css-pie-legend-item { color: var(--zinc-400); }
html.dark .css-bar-label, html.dark .css-hbar-label, html.dark .css-segment-item { color: var(--zinc-400); }
html.dark .css-bar-value, html.dark .css-hbar-val { color: var(--zinc-300); }
html.dark .css-hbar-track { background: rgba(255,255,255,0.07); }
html.dark .org-tree-node { background: hsl(var(--card)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
html.dark .org-tree-node.root { background: var(--navy); color: white; }
html.dark .org-tree-children { border-left-color: hsl(var(--border)); }
html.dark .org-tree-children > div::before { border-top-color: hsl(var(--border)); }


/* ═══════════════════════════════════════════════════════
   SECTION 28: RICH TEXT + SERVICE REQUEST STYLES
   ═══════════════════════════════════════════════════════ */

/* Rich text editor */
.rt-toolbar button.active { background: var(--zinc-200); }
.rt-editor { min-height: 80px; outline: none; font-size: 0.875rem; padding: 8px 12px; }
.rt-editor:empty::before { content: attr(data-placeholder); color: var(--zinc-400); }

/* Sub-event indent */
.sub-event-row td:first-child { padding-left: 2rem; }

/* Venue conflict banner */
.venue-conflict { animation: pulse-warn 1.5s ease-in-out infinite; }
@keyframes pulse-warn { 0%,100% { opacity: 1; } 50% { opacity: 0.8; } }

/* Member tag pills */
.member-tag { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--zinc-100); border-radius: 8px; font-size: 12px; }
.member-tag button { display: flex; align-items: center; color: var(--zinc-500); transition: color 0.1s; }
.member-tag button:hover { color: var(--error); }

/* Service request tabs */
.tab-active { color: var(--navy); border-color: var(--gold); }
.tab-inactive { color: var(--zinc-500); border-color: transparent; }
.tab-inactive:hover { color: var(--zinc-700); }

/* Status badges (service requests) */
.status-pending    { background: #fffbeb; color: #b45309; }
.status-approved   { background: #f0fdf4; color: #15803d; }
.status-in_progress { background: #eff6ff; color: #1d4ed8; }
.status-awaiting_info { background: #fff7ed; color: #c2410c; }
.status-completed  { background: #f0fdf4; color: #15803d; }
.status-rejected   { background: #fef2f2; color: #dc2626; }

/* Source badges */
.source-member_portal { background: #eff6ff; color: #1d4ed8; }
.source-walk_in { background: var(--zinc-100); color: var(--zinc-600); }

/* Message bubbles */
.msg-admin  { background: #eff6ff; }
.msg-member { background: var(--zinc-100); }
.msg-system { background: #fefce8; }

/* View toggle */
.detail-view { display: none; }
.detail-view.active { display: block; }
.list-view.active { display: block; }
.list-view { display: none; }

/* Timeline */
.timeline-step { position: relative; }
.timeline-step::after { content: ''; position: absolute; left: 50%; top: 32px; width: 1px; height: 16px; background: var(--zinc-200); }
.timeline-step:last-child::after { display: none; }

/* Service requests dark mode */
html.dark .status-pending    { background: #451a03; color: #fcd34d; }
html.dark .status-approved   { background: #052e16; color: #86efac; }
html.dark .status-in_progress { background: #172554; color: #93c5fd; }
html.dark .status-awaiting_info { background: #431407; color: #fdba74; }
html.dark .status-completed  { background: #052e16; color: #86efac; }
html.dark .status-rejected   { background: #450a0a; color: #fca5a5; }
html.dark .msg-admin  { background: #172554; }
html.dark .msg-member { background: var(--zinc-800); }
html.dark .msg-system { background: #422006; }


/* ═══════════════════════════════════════════════════════
   SECTION 29: PRINT STYLES
   ═══════════════════════════════════════════════════════ */

@media print {
  nav, header, .no-print { display: none !important; }
  main { margin: 0 !important; padding: 16px !important; }
  .print-only { display: block !important; }
}
.print-only { display: none; }


/* ═══════════════════════════════════════════════════════
   SECTION 30: REDUCED MOTION
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}