/* ============================================================
   NEBULA DESIGN SYSTEM
   ------------------------------------------------------------
   Single source of truth for the app's colour scheme, elevation,
   radii, motion and component styling.

   Loaded LAST so it supersedes the legacy token blocks in
   styles.css, layout.css, modules.css, search.css,
   button-uniform.css and theme-glass.css without requiring any
   markup changes.

   Dark mode is driven by `html.dark` / `body.dark`, both of which
   are toggled by js/layout.js — every dark rule mirrors both
   selector chains.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS — LIGHT
   ------------------------------------------------------------ */
:root {
    /* --- Brand ramp: electric indigo -> aurora cyan --- */
    --ds-brand-50: #eef0ff;
    --ds-brand-100: #dfe1ff;
    --ds-brand-200: #c3c6ff;
    --ds-brand-300: #9ea2ff;
    --ds-brand-400: #7b7bfa;
    --ds-brand-500: #5b4bf5;
    --ds-brand-600: #4a37e4;
    --ds-brand-700: #3c2bc4;
    --ds-brand-800: #2f2298;
    --ds-brand-900: #211870;

    --ds-cyan-300: #67e8f9;
    --ds-cyan-400: #22d3ee;
    --ds-cyan-500: #06b6d4;
    --ds-cyan-600: #0891b2;

    /* --- Semantic ---
       `-text` variants are darkened for use as text; the base value is for
       fills and icons. Soft backgrounds pair with the `-text` variant. */
    --ds-success: #0ea472;
    --ds-success-text: #046c4e;
    --ds-success-soft: rgba(14, 164, 114, 0.12);
    --ds-warning: #c2740a;
    --ds-warning-text: #8f4e06;
    --ds-warning-soft: rgba(217, 132, 18, 0.14);
    --ds-danger: #dc2b4f;
    --ds-danger-text: #b81b3d;
    --ds-danger-soft: rgba(220, 43, 79, 0.11);
    --ds-info: #0b82d4;
    --ds-info-text: #0369a1;
    --ds-info-soft: rgba(11, 130, 212, 0.12);
    --ds-violet: #7c3aed;
    --ds-violet-text: #6d28d9;
    --ds-violet-soft: rgba(124, 58, 237, 0.12);

    /* Brand fill for solid surfaces carrying white text. Stays dark in both
       themes: `--primary` is tuned for text on dark and is far too light here. */
    --ds-brand-solid: #5b4bf5;
    --ds-brand-solid-hover: #4a37e4;

    /* Semantic equivalents. Fixed across themes for the same reason: the
       dark-mode fill values are bright pastels tuned for text on dark, and
       white text on them lands near 2:1. */
    --ds-success-solid: #0b7a55;
    --ds-warning-solid: #a15c00;
    --ds-danger-solid: #c41f42;
    --ds-info-solid: #0369a1;
    --ds-violet-solid: #6d28d9;

    /* --- Neutral surfaces (cool, faintly violet) --- */
    --ds-canvas: #f4f5fa;
    --ds-surface: #ffffff;
    --ds-surface-alt: #f7f8fc;
    --ds-surface-sunken: #edeff7;
    --ds-surface-raised: #ffffff;

    /* --- Text --- */
    --ds-text: #13172c;
    --ds-text-muted: #4d5473;
    --ds-text-subtle: #656c8a;
    --ds-text-inverse: #ffffff;

    /* --- Lines --- */
    --ds-line: rgba(24, 31, 74, 0.09);
    --ds-line-strong: rgba(24, 31, 74, 0.16);

    /* --- Focus --- */
    --ds-focus-ring: 0 0 0 3px rgba(91, 75, 245, 0.28);

    /* --- Radii scale --- */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* --- Control sizing --- */
    --ds-control-height: 36px;
    --ds-control-height-sm: 30px;
    --ds-control-padding-x: 0.95rem;

    /* --- Motion --- */
    --ds-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --ds-fast: 140ms;
    --ds-base: 220ms;

    /* --- Elevation (tight and low-contrast: definition comes from hairlines) --- */
    --shadow: 0 1px 2px rgba(19, 23, 44, 0.04);
    --shadow-md: 0 1px 2px rgba(19, 23, 44, 0.04), 0 4px 12px rgba(19, 23, 44, 0.06);
    --shadow-lg: 0 2px 6px rgba(19, 23, 44, 0.06), 0 14px 34px rgba(19, 23, 44, 0.10);
    --shadow-xl: 0 4px 12px rgba(19, 23, 44, 0.08), 0 28px 64px rgba(19, 23, 44, 0.14);
    --ds-glow: 0 4px 14px rgba(91, 75, 245, 0.24);

    /* --- Legacy token remap (consumed across the whole codebase) --- */
    --primary: var(--ds-brand-500);
    --primary-light: var(--ds-brand-400);
    --primary-dark: var(--ds-brand-700);
    --secondary: var(--ds-cyan-500);
    --secondary-light: var(--ds-cyan-400);
    --accent: var(--ds-cyan-500);
    --danger: var(--ds-danger-text);
    --success: var(--ds-success-text);
    --warning: var(--ds-warning-text);
    --info: var(--ds-info-text);
    --purple: var(--ds-violet-text);
    --indigo: var(--ds-brand-500);
    --pink: #d9418e;

    --bg: var(--ds-canvas);
    --bg-light: var(--ds-surface-alt);
    --bg-lighter: var(--ds-surface-sunken);
    --card: var(--ds-surface);

    --text: var(--ds-text);
    --text-light: var(--ds-text-muted);
    --text-lighter: var(--ds-text-subtle);

    --border: var(--ds-line);
    --border-light: var(--ds-line);

    --surface-1: var(--ds-surface);
    --surface-2: var(--ds-surface-alt);
    --surface-3: var(--ds-surface-sunken);
    --hover-bg: rgba(91, 75, 245, 0.08);

    /* Aliases referenced by module templates as var(--x, <light fallback>);
       without a definition the light fallback leaks into dark mode. */
    --bg-secondary: var(--ds-surface-alt);
    --text-muted: var(--ds-text-muted);
    --border-strong: var(--ds-line-strong);
    --explorer-border: var(--ds-line);

    /* --- Glass. Light mode is opaque: a flat canvas reads cleaner than
           translucent panels over a tinted backdrop. Only floating
           surfaces (menus, modals, top bar) keep a frost. --- */
    --glass-blur: none;
    --glass-menu-blur: saturate(140%) blur(20px);
    --glass-bg: #ffffff;
    --glass-bg-strong: #ffffff;
    --glass-menu-bg: rgba(255, 255, 255, 0.97);
    --glass-border: var(--ds-line);
    --glass-highlight: none;

    /* --- Navigation chrome: deep space rail in both modes --- */
    --menu-main-bg: linear-gradient(180deg, #171a3a 0%, #121430 55%, #0e1028 100%);
    --menu-sub-bg: linear-gradient(180deg, #12142f 0%, #0f1128 100%);
    --menu-column-bg: var(--menu-sub-bg);
    --menu-column-border: rgba(255, 255, 255, 0.07);
    --menu-column-text: #eef0ff;
    --menu-column-muted: rgba(238, 240, 255, 0.62);
    --menu-column-hover: rgba(158, 162, 255, 0.14);
    --menu-column-active: linear-gradient(135deg, rgba(123, 123, 250, 0.32) 0%, rgba(34, 211, 238, 0.22) 100%);
    --menu-column-accent: var(--menu-column-active);
}

/* ------------------------------------------------------------
   2. TOKENS — DARK
   Deliberately opaque and high-contrast: the previous theme was
   too translucent, which is what made dark mode hard to read.
   ------------------------------------------------------------ */
html.dark,
body.dark {
    --primary: #9a9bff;
    --primary-light: #b6b7ff;
    --primary-dark: #7b7bfa;
    --secondary: var(--ds-cyan-400);
    --secondary-light: var(--ds-cyan-300);
    --accent: var(--ds-cyan-400);

    --ds-success: #34d9a0;
    --ds-success-text: #34d9a0;
    --ds-success-soft: rgba(52, 217, 160, 0.16);
    --ds-warning: #fbbf4a;
    --ds-warning-text: #fbbf4a;
    --ds-warning-soft: rgba(251, 191, 74, 0.16);
    --ds-danger: #ff7089;
    --ds-danger-text: #ff7089;
    --ds-danger-soft: rgba(255, 112, 137, 0.16);
    --ds-info: #5cc4f5;
    --ds-info-text: #5cc4f5;
    --ds-info-soft: rgba(92, 196, 245, 0.16);
    --ds-violet: #c4a4ff;
    --ds-violet-text: #c4a4ff;
    --ds-violet-soft: rgba(196, 164, 255, 0.16);

    --danger: var(--ds-danger);
    --success: var(--ds-success);
    --warning: var(--ds-warning);
    --info: var(--ds-info);
    --purple: var(--ds-violet);

    --ds-canvas: #080a15;
    --ds-surface: #151a2e;
    --ds-surface-alt: #1b2138;
    --ds-surface-sunken: #232a45;
    --ds-surface-raised: #1e2540;

    --ds-text: #eef1fb;
    --ds-text-muted: #b2bad8;
    --ds-text-subtle: #8a93b5;

    --ds-line: rgba(163, 174, 224, 0.16);
    --ds-line-strong: rgba(163, 174, 224, 0.28);

    --ds-focus-ring: 0 0 0 3px rgba(154, 155, 255, 0.35);
    --ds-glow: 0 8px 26px rgba(91, 75, 245, 0.45);

    --bg: var(--ds-canvas);
    --bg-light: var(--ds-surface-alt);
    --bg-lighter: var(--ds-surface-sunken);
    --card: var(--ds-surface);

    --text: var(--ds-text);
    --text-light: var(--ds-text-muted);
    --text-lighter: var(--ds-text-subtle);

    --border: var(--ds-line);
    --border-light: var(--ds-line);

    --surface-1: var(--ds-surface);
    --surface-2: var(--ds-surface-alt);
    --surface-3: var(--ds-surface-sunken);
    --hover-bg: rgba(154, 155, 255, 0.14);

    /* Near-opaque glass: keeps the frosted look, kills the mush */
    --glass-blur: saturate(150%) blur(18px);
    --glass-bg: rgba(21, 26, 46, 0.92);
    --glass-bg-strong: rgba(27, 33, 56, 0.96);
    --glass-menu-bg: rgba(24, 29, 51, 0.98);
    --glass-border: rgba(163, 174, 224, 0.16);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 26px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.48), 0 22px 50px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 10px 24px rgba(0, 0, 0, 0.52), 0 36px 80px rgba(0, 0, 0, 0.58);

    --menu-main-bg: linear-gradient(180deg, #11142b 0%, #0c0e20 100%);
    --menu-sub-bg: linear-gradient(180deg, #0e1125 0%, #0a0c1c 100%);
    --menu-column-border: rgba(255, 255, 255, 0.06);
    --menu-column-hover: rgba(154, 155, 255, 0.12);
    --menu-column-active: linear-gradient(135deg, rgba(123, 123, 250, 0.30) 0%, rgba(34, 211, 238, 0.18) 100%);
    --menu-column-accent: var(--menu-column-active);
}

/* ------------------------------------------------------------
   3. BASE & BACKDROP
   ------------------------------------------------------------ */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    color: var(--text);
    background: var(--ds-canvas);
}

html.dark body,
body.dark,
body.dark .app-container,
body.dark .main-content,
html.dark body .app-container,
html.dark body .main-content {
    background:
        radial-gradient(58rem 40rem at 8% -12%, rgba(91, 75, 245, 0.16), transparent 58%),
        radial-gradient(46rem 34rem at 96% 2%, rgba(6, 182, 212, 0.10), transparent 55%),
        var(--ds-canvas);
    background-attachment: fixed;
    color: var(--text);
}

body.dark .app-container,
body.dark .main-content,
html.dark body .app-container,
html.dark body .main-content {
    background: transparent;
}

.main-content,
.main-wrapper {
    background: transparent;
}

::selection {
    background: rgba(91, 75, 245, 0.26);
    color: inherit;
}

html.dark ::selection,
body.dark ::selection {
    background: rgba(154, 155, 255, 0.32);
}

/* ------------------------------------------------------------
   4. TYPOGRAPHY — one consistent scale
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.page-title h1,
.section-title,
.content-title,
.module-header-title h1,
.module-header-title h2,
.module-header-title h3 {
    color: var(--text);
    letter-spacing: -0.015em;
    font-weight: 700;
    line-height: 1.25;
}

.page-title h1 { font-size: 1.45rem; }
.section-title { font-size: 1.05rem; }

.text-muted,
.subtitle,
.meta,
small {
    color: var(--text-light);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--ds-fast) var(--ds-ease);
}

a:hover {
    color: var(--primary-light);
}

/* ------------------------------------------------------------
   5. SURFACES — one card recipe everywhere
   ------------------------------------------------------------ */
.card,
.stat-card,
.bento-stat-card,
.committee-card,
.training-card,
.document-card,
.application-card,
.biometric-card,
.meeting-table-card,
.table-card,
.calendar-container,
.advanced-filters,
.filter-bar,
.sw-filter-panel,
.danger-zone,
.progress-section,
.module-section > .card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-highlight), var(--shadow);
    color: var(--text);
    transition: border-color var(--ds-base) var(--ds-ease),
                box-shadow var(--ds-base) var(--ds-ease),
                transform var(--ds-base) var(--ds-ease);
}

.card:hover,
.stat-card:hover,
.bento-stat-card:hover,
.committee-card:hover,
.document-card:hover,
.training-card:hover {
    border-color: var(--ds-line-strong);
    box-shadow: var(--glass-highlight), var(--shadow-md);
}

/* Headers are separated by a hairline only. Legacy tinted/gradient bands sit
   inside the card's padding, which reads as a floating grey box. */
.card-header,
.modal-header,
.list-header,
.committee-header,
.danger-zone-header {
    background: transparent;
    background-image: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.modal-footer {
    border-top: 1px solid var(--border);
}

/* Legacy dark rules paint these fully transparent — restore a real surface */
body.dark .card,
html.dark body .card,
body.dark .stat-card,
html.dark body .stat-card,
body.dark .bento-stat-card,
html.dark body .bento-stat-card,
body.dark .committee-card,
html.dark body .committee-card,
body.dark .training-card,
html.dark body .training-card,
body.dark .document-card,
html.dark body .document-card,
body.dark .calendar-container,
html.dark body .calendar-container,
body.dark .meeting-tabs,
html.dark body .meeting-tabs,
body.dark .task-item,
html.dark body .task-item,
body.dark .checklist-item,
html.dark body .checklist-item,
body.dark .conversation-item,
html.dark body .conversation-item {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--text);
}

body.dark .module-section [class*="card"],
html.dark body .module-section [class*="card"],
body.dark .module-section [class*="panel"],
html.dark body .module-section [class*="panel"],
body.dark .module-section [class*="content-box"],
html.dark body .module-section [class*="content-box"],
body.dark .module-section [class*="detail-box"],
html.dark body .module-section [class*="detail-box"],
body.dark .module-section [class*="table-wrap"],
html.dark body .module-section [class*="table-wrap"] {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    color: var(--text);
}

/* ------------------------------------------------------------
   6. NAVIGATION CHROME
   ------------------------------------------------------------ */
#navShell .sidebar.main-sidebar,
#navShell .sub-sidebar {
    -webkit-backdrop-filter: saturate(150%) blur(20px);
    backdrop-filter: saturate(150%) blur(20px);
    border-right: 1px solid var(--menu-column-border) !important;
}

#navShell .sub-sidebar {
    box-shadow: 10px 0 40px rgba(4, 6, 20, 0.28);
}

#navShell .main-menu .nav-item,
#navShell .sub-menu .nav-item {
    border-radius: var(--radius-md);
    transition: background var(--ds-fast) var(--ds-ease),
                color var(--ds-fast) var(--ds-ease),
                box-shadow var(--ds-fast) var(--ds-ease);
}

#navShell .main-menu .nav-item:hover,
#navShell .sub-menu .nav-item:hover {
    background: var(--menu-column-hover);
}

#navShell .main-menu .nav-item.active,
#navShell .sub-menu .nav-item.active {
    background: var(--menu-column-active);
    border: 1px solid rgba(158, 162, 255, 0.30) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 6px 18px rgba(8, 10, 28, 0.35);
}

/* Top bar — floating frosted rail */
.top-bar,
body.dark .top-bar,
html.dark body .top-bar {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-highlight), var(--shadow-md);
    color: var(--text);
}

.notification-btn,
.menu-toggle,
.top-actions .icon-btn,
.icon-btn,
.user-dropdown-btn,
.full-menu-toggle,
.sub-menu-toggle,
body.dark .notification-btn,
html.dark body .notification-btn,
body.dark .menu-toggle,
html.dark body .menu-toggle,
body.dark .top-actions .icon-btn,
html.dark body .top-actions .icon-btn,
body.dark .icon-btn,
html.dark body .icon-btn,
body.dark .user-dropdown-btn,
html.dark body .user-dropdown-btn {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill) !important;
    color: var(--text);
    box-shadow: var(--glass-highlight);
    transition: border-color var(--ds-fast) var(--ds-ease),
                background var(--ds-fast) var(--ds-ease),
                box-shadow var(--ds-fast) var(--ds-ease);
}

.notification-btn:hover,
.menu-toggle:hover,
.top-actions .icon-btn:hover,
.icon-btn:hover,
.user-dropdown-btn:hover {
    border-color: rgba(91, 75, 245, 0.42);
    box-shadow: var(--glass-highlight), 0 4px 16px rgba(91, 75, 245, 0.18);
}

/* ------------------------------------------------------------
   7. BUTTONS — one geometry, one motion curve
   ------------------------------------------------------------ */
.btn,
.btn-standard,
[data-ui-button="true"] {
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: background var(--ds-fast) var(--ds-ease),
                border-color var(--ds-fast) var(--ds-ease),
                color var(--ds-fast) var(--ds-ease),
                box-shadow var(--ds-fast) var(--ds-ease),
                transform var(--ds-fast) var(--ds-ease) !important;
}

.btn {
    min-height: var(--ds-control-height);
    padding: 0.5rem var(--ds-control-padding-x);
    font-size: 0.875rem;
}

[data-ui-button="true"] {
    min-height: var(--ds-control-height) !important;
    padding: 0.45rem var(--ds-control-padding-x) !important;
    font-size: 0.85rem !important;
}

.btn:active,
[data-ui-button="true"]:active {
    transform: translateY(0) scale(0.985);
}

.btn:focus-visible,
[data-ui-button="true"]:focus-visible {
    outline: none !important;
    box-shadow: var(--ds-focus-ring) !important;
}

/* Primary — brand gradient with a cyan lift */
.btn-primary,
.btn-standard-primary,
body.dark .btn-primary,
html.dark body .btn-primary,
[data-ui-button="true"][data-ui-button-variant="primary"] {
    background: linear-gradient(135deg, var(--ds-brand-solid) 0%, var(--ds-brand-solid-hover) 60%, #3f2fd4 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: var(--glass-highlight), var(--ds-glow) !important;
}

.btn-primary:hover,
.btn-standard-primary:hover,
[data-ui-button="true"][data-ui-button-variant="primary"]:hover {
    background: linear-gradient(135deg, #6b5cff 0%, var(--ds-brand-solid) 60%, var(--ds-brand-solid-hover) 100%) !important;
    transform: translateY(-1px);
    box-shadow: var(--glass-highlight), 0 10px 28px rgba(91, 75, 245, 0.38) !important;
}

/* Secondary — quiet glass chip */
.btn-secondary,
.btn-standard-secondary,
[data-ui-button="true"][data-ui-button-variant="secondary"],
body.dark [data-ui-button="true"][data-ui-button-variant="secondary"],
html.dark body [data-ui-button="true"][data-ui-button-variant="secondary"] {
    background: var(--glass-bg-strong) !important;
    color: var(--text) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-highlight) !important;
}

.btn-secondary:hover,
.btn-standard-secondary:hover,
[data-ui-button="true"][data-ui-button-variant="secondary"]:hover,
[data-ui-button="true"].active[data-ui-button-variant="secondary"],
[data-ui-button="true"][aria-pressed="true"][data-ui-button-variant="secondary"],
.btn-secondary.active {
    background: var(--hover-bg) !important;
    color: var(--primary) !important;
    border-color: rgba(91, 75, 245, 0.35) !important;
}

/* Semantic solids */
.btn-success { background: var(--ds-success-solid); color: #fff; }
.btn-danger { background: var(--ds-danger-solid); color: #fff; }
.btn-warning { background: var(--ds-warning-solid); color: #fff; }
.btn-info { background: var(--ds-info-solid); color: #fff; }
.btn-purple { background: var(--ds-violet-solid); color: #fff; }

.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-purple:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

[data-ui-button="true"][data-ui-button-variant="danger"] {
    background: var(--ds-danger-soft) !important;
    color: var(--ds-danger) !important;
    border-color: rgba(220, 43, 79, 0.32) !important;
    box-shadow: none !important;
}

[data-ui-button="true"][data-ui-button-variant="danger"]:hover {
    background: var(--ds-danger) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Outline family */
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--ds-line-strong);
    color: var(--text);
}

.btn-outline-primary { border-color: rgba(91, 75, 245, 0.42); color: var(--primary); }
.btn-outline-danger { border-color: rgba(220, 43, 79, 0.42); color: var(--ds-danger); }

.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: var(--hover-bg);
    border-color: rgba(91, 75, 245, 0.42);
    color: var(--primary);
}

/* Icon / action buttons */
[data-action-button="true"].btn-action,
.btn-action,
.btn-icon {
    border-radius: var(--radius-xs) !important;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    color: var(--text-light);
}

.btn-action:hover,
.btn-icon:hover {
    background: var(--hover-bg);
    color: var(--primary);
    border-color: rgba(91, 75, 245, 0.35);
}

/* Size scale */
.btn-xs { min-height: 28px; padding: 0.25rem 0.6rem; font-size: 0.75rem; }
.btn-sm { min-height: var(--ds-control-height-sm); padding: 0.35rem 0.75rem; font-size: 0.82rem; }
.btn-md { min-height: var(--ds-control-height); font-size: 0.9rem; }
.btn-lg { min-height: 44px; padding: 0.7rem 1.4rem; font-size: 1rem; }
.btn-xl { min-height: 52px; padding: 0.9rem 1.8rem; font-size: 1.05rem; }

/* ------------------------------------------------------------
   8. FORMS — identical control recipe across the app
   ------------------------------------------------------------ */
.form-group input,
.form-group select,
.form-group textarea,
.form-input,
.form-select,
.form-textarea,
.form-control,
.search-box input,
.sw-filter-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="tel"],
select,
textarea {
    background: var(--glass-bg-strong);
    color: var(--text);
    border: 1px solid var(--ds-line-strong);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color var(--ds-fast) var(--ds-ease),
                box-shadow var(--ds-fast) var(--ds-ease),
                background var(--ds-fast) var(--ds-ease);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select {
    min-height: var(--ds-control-height);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-control:focus,
.search-box input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ds-focus-ring);
}

::placeholder {
    color: var(--text-lighter);
    opacity: 1;
}

.form-group label,
body.dark .form-group label,
html.dark body .form-group label {
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}

body.dark .form-group input,
body.dark .form-group select,
body.dark .form-group textarea,
html.dark body .form-group input,
html.dark body .form-group select,
html.dark body .form-group textarea,
body.dark .search-box input,
html.dark body .search-box input {
    background: var(--glass-bg-strong);
    color: var(--text);
    border-color: var(--ds-line-strong);
}

.form-group input.is-invalid,
.form-group input.is-invalid:focus {
    border-color: var(--ds-danger);
    background-color: var(--ds-danger-soft);
    box-shadow: 0 0 0 3px rgba(220, 43, 79, 0.20);
}

.form-group label.is-invalid {
    color: var(--ds-danger);
}

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

/* ------------------------------------------------------------
   9. TABLES
   ------------------------------------------------------------ */
table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--text-lighter);
    background: transparent;
    border-bottom: 1px solid var(--ds-line-strong) !important;
}

table tbody td {
    color: var(--text);
    border-bottom: 1px solid var(--border) !important;
}

table tbody tr {
    transition: background var(--ds-fast) var(--ds-ease);
}

table tbody tr:hover {
    background: var(--hover-bg);
}

.table-responsive,
.table-card,
.meeting-table-responsive,
.file-explorer-table-wrap,
.activity-table-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

body.dark table thead th,
html.dark body table thead th,
body.dark table tbody td,
html.dark body table tbody td {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

body.dark table thead th,
html.dark body table thead th {
    color: var(--text-lighter);
}

/* ------------------------------------------------------------
   10. BADGES, CHIPS & STATUS
   ------------------------------------------------------------ */
.badge,
.badge-primary,
.badge-secondary,
.badge-success,
.badge-danger,
.badge-warning,
.badge-info,
.badge-count,
.list-status-badge,
.sw-chip,
.tab-badge,
.meeting-card-time-pill {
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.badge-primary { background: rgba(91, 75, 245, 0.12); color: var(--ds-brand-700); border-color: rgba(91, 75, 245, 0.26); }
.badge-success { background: var(--ds-success-soft); color: var(--ds-success-text); border-color: rgba(14, 164, 114, 0.28); }
.badge-danger { background: var(--ds-danger-soft); color: var(--ds-danger-text); border-color: rgba(220, 43, 79, 0.28); }
.badge-warning { background: var(--ds-warning-soft); color: var(--ds-warning-text); border-color: rgba(217, 132, 18, 0.30); }
.badge-info { background: var(--ds-info-soft); color: var(--ds-info-text); border-color: rgba(11, 130, 212, 0.28); }
.badge-secondary { background: var(--surface-3); color: var(--text-light); border-color: var(--border); }

html.dark .badge-primary,
body.dark .badge-primary { color: var(--primary); }

/* ------------------------------------------------------------
   11. TABS & SEGMENTED CONTROLS
   ------------------------------------------------------------ */
.meeting-tabs,
.finance-tabs,
.invoice-tabs,
.messaging-tabs,
.recruitment-tabs,
.platform-tabs,
.detail-main-tabs,
.poll-detail-tabs,
.view-switcher,
.view-toggle {
    gap: 0.3rem;
    background: transparent;
}

.meeting-tab,
.tab-btn,
.finance-tab,
.invoice-tab,
.messaging-tab,
.recruitment-tab,
.meeting-detail-tab,
.poll-detail-tab,
.detail-main-tab-btn {
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.85rem;
    transition: background var(--ds-fast) var(--ds-ease),
                color var(--ds-fast) var(--ds-ease),
                border-color var(--ds-fast) var(--ds-ease);
}

.meeting-tab:hover,
.tab-btn:hover,
.finance-tab:hover,
.invoice-tab:hover,
.messaging-tab:hover,
.recruitment-tab:hover,
.detail-main-tab-btn:hover {
    background: var(--hover-bg);
    color: var(--text);
}

.meeting-tab.active,
.tab-btn.active,
.finance-tab.active,
.invoice-tab.active,
.messaging-tab.active,
.recruitment-tab.active,
.meeting-detail-tab.active,
.poll-detail-tab.active,
.detail-main-tab-btn.active,
body.dark .meeting-tab.active,
html.dark body .meeting-tab.active {
    background: linear-gradient(135deg, var(--ds-brand-solid) 0%, var(--ds-brand-solid-hover) 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(91, 75, 245, 0.30);
}

/* ------------------------------------------------------------
   12. FLOATING SURFACES — menus, modals, sheets
   ------------------------------------------------------------ */
.notification-panel,
.user-dropdown-menu,
.dropdown-menu,
.search-results-dropdown,
.action-menu,
.meeting-action-menu,
.messaging-actions-menu,
.mobile-nav-sheet,
.mobile-speed-dial-sheet,
.sw-filter-panel,
body.dark .notification-panel,
html.dark body .notification-panel,
body.dark .user-dropdown-menu,
html.dark body .user-dropdown-menu,
body.dark .dropdown-menu,
html.dark body .dropdown-menu,
body.dark .search-results-dropdown,
html.dark body .search-results-dropdown,
body.dark .action-menu,
html.dark body .action-menu,
body.dark .meeting-action-menu,
html.dark body .meeting-action-menu,
body.dark .messaging-actions-menu,
html.dark body .messaging-actions-menu,
body.dark .mobile-nav-sheet,
html.dark body .mobile-nav-sheet,
body.dark .mobile-speed-dial-sheet,
html.dark body .mobile-speed-dial-sheet {
    background: var(--glass-menu-bg) !important;
    -webkit-backdrop-filter: var(--glass-menu-blur) !important;
    backdrop-filter: var(--glass-menu-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--glass-highlight), var(--shadow-lg) !important;
    color: var(--text);
}

/* `.modal` is used both as a full-screen scrim and, when nested in an
   overlay, as the dialog panel — style each role separately. */
.modal-overlay,
#modalOverlay,
.modal {
    background-color: rgba(8, 10, 21, 0.58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.modal-content,
.modal-box,
.confirmation-modal,
.edit-user-modal,
.user-details-modal,
#modalOverlay .modal,
.modal-overlay .modal,
body.dark .modal-content,
html.dark body .modal-content,
body.dark .modal-box,
html.dark body .modal-box,
body.dark #modalOverlay .modal,
html.dark body #modalOverlay .modal,
body.dark .modal-overlay .modal,
html.dark body .modal-overlay .modal {
    background: var(--glass-menu-bg) !important;
    -webkit-backdrop-filter: var(--glass-menu-blur) !important;
    backdrop-filter: var(--glass-menu-blur) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    color: var(--text);
}

.modal-content .modal-header,
.modal-content .modal-footer {
    border-color: var(--border);
}

.modal-close,
.modal-close-btn {
    border-radius: var(--radius-pill);
    color: var(--text-light);
    transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}

.modal-close:hover,
.modal-close-btn:hover {
    background: var(--hover-bg);
    color: var(--text);
}

.dropdown-item:hover,
.action-menu-item:hover,
.notification-item:hover {
    background: var(--hover-bg);
    color: var(--text);
}

/* ------------------------------------------------------------
   13. STAT / METRIC CARDS
   ------------------------------------------------------------ */
.stat-value,
.bento-stat-value,
body.dark .stat-value,
html.dark body .stat-value,
body.dark .bento-stat-value,
html.dark body .bento-stat-value {
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.stat-label,
.bento-stat-label {
    color: var(--text-lighter);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.stat-icon,
.bento-stat-icon,
.stat-card .stat-icon,
.bento-stat-card .bento-stat-icon {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    box-shadow: none;
}

/* Accent rail: one token per semantic variant */
.stat-card,
.bento-stat-card { --stat-accent: var(--ds-brand-500); }
.stat-card.primary, .bento-stat-card.primary { --stat-accent: var(--ds-brand-500); }
.stat-card.success, .bento-stat-card.success { --stat-accent: var(--ds-success); }
.stat-card.warning, .bento-stat-card.warning { --stat-accent: var(--ds-warning); }
.stat-card.info, .bento-stat-card.info { --stat-accent: var(--ds-info); }
.stat-card.danger, .bento-stat-card.danger { --stat-accent: var(--ds-danger); }
.stat-card.purple, .bento-stat-card.purple { --stat-accent: var(--ds-violet); }
.stat-card.secondary, .bento-stat-card.secondary { --stat-accent: var(--text-lighter); }

.stat-card::before,
.bento-stat-card::before {
    width: 3px;
    background: var(--stat-accent);
    opacity: 1;
}

/* Replace the hardcoded white gradients with a token-driven tint over glass */
.stat-card.primary { background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(91, 75, 245, 0.10) 100%); }
.stat-card.success { background: linear-gradient(135deg, var(--glass-bg) 0%, var(--ds-success-soft) 100%); }
.stat-card.warning { background: linear-gradient(135deg, var(--glass-bg) 0%, var(--ds-warning-soft) 100%); }
.stat-card.info { background: linear-gradient(135deg, var(--glass-bg) 0%, var(--ds-info-soft) 100%); }
.stat-card.danger { background: linear-gradient(135deg, var(--glass-bg) 0%, var(--ds-danger-soft) 100%); }
.stat-card.purple { background: linear-gradient(135deg, var(--glass-bg) 0%, var(--ds-violet-soft) 100%); }

.stat-card.primary .stat-icon, .bento-stat-card.primary .bento-stat-icon { color: var(--primary); background: rgba(91, 75, 245, 0.12); }
.stat-card.success .stat-icon, .bento-stat-card.success .bento-stat-icon { color: var(--ds-success); background: var(--ds-success-soft); }
.stat-card.warning .stat-icon, .bento-stat-card.warning .bento-stat-icon { color: var(--ds-warning); background: var(--ds-warning-soft); }
.stat-card.info .stat-icon, .bento-stat-card.info .bento-stat-icon { color: var(--ds-info); background: var(--ds-info-soft); }
.stat-card.danger .stat-icon, .bento-stat-card.danger .bento-stat-icon { color: var(--ds-danger); background: var(--ds-danger-soft); }
.stat-card.purple .stat-icon, .bento-stat-card.purple .bento-stat-icon { color: var(--ds-violet); background: var(--ds-violet-soft); }

.stat-icon.blue, .bento-stat-icon.blue { color: var(--ds-brand-600); background: rgba(91, 75, 245, 0.12); border-color: rgba(91, 75, 245, 0.22); }
.stat-icon.green, .bento-stat-icon.green { color: var(--ds-success); background: var(--ds-success-soft); border-color: rgba(14, 164, 114, 0.22); }
.stat-icon.orange, .bento-stat-icon.orange { color: var(--ds-warning); background: var(--ds-warning-soft); border-color: rgba(217, 132, 18, 0.24); }
.stat-icon.red, .bento-stat-icon.red { color: var(--ds-danger); background: var(--ds-danger-soft); border-color: rgba(220, 43, 79, 0.24); }
.stat-icon.purple, .bento-stat-icon.purple { color: var(--ds-violet); background: var(--ds-violet-soft); border-color: rgba(124, 58, 237, 0.22); }
.stat-icon.gray, .bento-stat-icon.gray { color: var(--text-light); background: var(--surface-3); border-color: var(--border); }

body.dark .stat-icon.blue, html.dark body .stat-icon.blue,
body.dark .bento-stat-icon.blue, html.dark body .bento-stat-icon.blue { color: var(--primary); background: rgba(154, 155, 255, 0.16); border-color: rgba(154, 155, 255, 0.26); }
body.dark .stat-icon.green, html.dark body .stat-icon.green,
body.dark .bento-stat-icon.green, html.dark body .bento-stat-icon.green { color: var(--ds-success); background: var(--ds-success-soft); border-color: rgba(52, 217, 160, 0.26); }
body.dark .stat-icon.orange, html.dark body .stat-icon.orange,
body.dark .bento-stat-icon.orange, html.dark body .bento-stat-icon.orange { color: var(--ds-warning); background: var(--ds-warning-soft); border-color: rgba(251, 191, 74, 0.26); }
body.dark .stat-icon.red, html.dark body .stat-icon.red,
body.dark .bento-stat-icon.red, html.dark body .bento-stat-icon.red { color: var(--ds-danger); background: var(--ds-danger-soft); border-color: rgba(255, 112, 137, 0.26); }
body.dark .stat-icon.purple, html.dark body .stat-icon.purple,
body.dark .bento-stat-icon.purple, html.dark body .bento-stat-icon.purple { color: var(--ds-violet); background: var(--ds-violet-soft); border-color: rgba(196, 164, 255, 0.26); }
body.dark .stat-icon.gray, html.dark body .stat-icon.gray,
body.dark .bento-stat-icon.gray, html.dark body .bento-stat-icon.gray { color: var(--text-light); background: var(--surface-3); border-color: var(--border); }

body.dark .stat-card,
html.dark body .stat-card,
body.dark .bento-stat-card,
html.dark body .bento-stat-card,
body.dark .stat-card.primary,
body.dark .stat-card.success,
body.dark .stat-card.warning,
body.dark .stat-card.info,
body.dark .stat-card.purple,
body.dark .stat-card.danger,
body.dark .stat-card.secondary {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow);
}

/* ------------------------------------------------------------
   14. MISC COMPONENTS
   ------------------------------------------------------------ */
.progress-bar,
.list-progress {
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.progress-fill,
.list-progress-fill {
    background: linear-gradient(90deg, var(--ds-brand-500) 0%, var(--ds-cyan-400) 100%);
    border-radius: var(--radius-pill);
}

.user-avatar,
.member-avatar,
.person-avatar,
.applicant-avatar,
.candidate-avatar,
.assignee-avatar,
.list-member-avatar,
.messaging-item-avatar,
.messaging-message-avatar,
.selected-avatar,
.biometric-avatar {
    background: linear-gradient(135deg, var(--ds-brand-solid) 0%, var(--ds-cyan-600) 100%);
    color: #ffffff;
    font-weight: 700;
}

.empty-state,
.empty-table-state,
.meeting-empty-state,
.messaging-empty,
.calendar-agenda-empty,
.sidebar-empty {
    color: var(--text-lighter);
    background: transparent;
}

.empty-state i,
.meeting-empty-state i,
.messaging-empty-icon {
    color: var(--text-lighter);
    opacity: 0.7;
}

.toast {
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-menu-bg);
    -webkit-backdrop-filter: var(--glass-menu-blur);
    backdrop-filter: var(--glass-menu-blur);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}

.alert-info,
.login-error-alert,
.alert-danger {
    border-radius: var(--radius-md);
}

.alert-info { background: var(--ds-info-soft); border: 1px solid rgba(11, 130, 212, 0.28); color: var(--ds-info-text); }
.alert-danger,
.login-error-alert { background: var(--ds-danger-soft); border: 1px solid rgba(220, 43, 79, 0.28); color: var(--ds-danger-text); }

.breadcrumb .crumb,
.crumb {
    color: var(--text-lighter);
}

.crumb-separator {
    color: var(--ds-line-strong);
}

hr,
.finance-summary-divider,
.messaging-date-divider {
    border-color: var(--border);
}

/* ------------------------------------------------------------
   15. LOGIN / AUTH — deep-space aurora
   ------------------------------------------------------------ */
.login-screen,
.auth-loading,
body.dark .login-screen,
body.dark .auth-loading,
html.dark body .login-screen,
html.dark body .auth-loading {
    background:
        radial-gradient(48rem 34rem at 16% 10%, rgba(91, 75, 245, 0.45), transparent 60%),
        radial-gradient(42rem 30rem at 88% 16%, rgba(124, 58, 237, 0.34), transparent 58%),
        radial-gradient(38rem 30rem at 50% 104%, rgba(34, 211, 238, 0.26), transparent 60%),
        linear-gradient(180deg, #0a0c1c 0%, #10132b 100%);
}

.login-container,
.auth-loading-content,
body.dark .login-container,
body.dark .auth-loading-content,
html.dark body .login-container,
html.dark body .auth-loading-content {
    background: rgba(20, 24, 48, 0.62);
    -webkit-backdrop-filter: saturate(160%) blur(26px);
    backdrop-filter: saturate(160%) blur(26px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-xl);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 32px 80px rgba(2, 4, 16, 0.55);
    color: #eef1fb;
}

.login-container h1,
.auth-loading-content h2,
body.dark .login-container h1,
body.dark .auth-loading-content h2,
html.dark body .login-container h1,
html.dark body .auth-loading-content h2 {
    color: #ffffff;
}

.login-container p,
.auth-loading-content p,
.login-container .form-group label,
body.dark .login-container p,
body.dark .auth-loading-content p,
body.dark .login-container .form-group label,
html.dark body .login-container p,
html.dark body .auth-loading-content p {
    color: rgba(238, 241, 251, 0.72);
}

.login-container .form-group input,
body.dark .login-container .form-group input,
html.dark body .login-container .form-group input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #eef1fb;
}

.login-container .form-group input::placeholder {
    color: rgba(238, 241, 251, 0.45);
}

.login-container .form-group input:focus {
    border-color: var(--ds-brand-300);
    box-shadow: 0 0 0 3px rgba(123, 123, 250, 0.35);
}

.login-logo {
    background: linear-gradient(135deg, var(--ds-brand-500) 0%, var(--ds-cyan-500) 100%);
    box-shadow: 0 10px 30px rgba(91, 75, 245, 0.45);
}

.loading-spinner {
    border-color: rgba(255, 255, 255, 0.18);
    border-top-color: var(--ds-brand-300);
}

/* ------------------------------------------------------------
   16. LIGHT-MODE FAIL-SAFE
   Mirror of the dark fail-safe in modules.css: legacy templates
   set a dozen near-identical off-whites via inline styles, which
   is what made light mode look patchy. Collapse them onto one
   surface token.
   ------------------------------------------------------------ */
html:not(.dark) body:not(.dark) [style*="background: #f8f9fa"],
html:not(.dark) body:not(.dark) [style*="background:#f8f9fa"],
html:not(.dark) body:not(.dark) [style*="background: #f9fbff"],
html:not(.dark) body:not(.dark) [style*="background:#f9fbff"],
html:not(.dark) body:not(.dark) [style*="background: #f8fbff"],
html:not(.dark) body:not(.dark) [style*="background:#f8fbff"],
html:not(.dark) body:not(.dark) [style*="background: #f8fafc"],
html:not(.dark) body:not(.dark) [style*="background:#f8fafc"],
html:not(.dark) body:not(.dark) [style*="background: #f1f5f9"],
html:not(.dark) body:not(.dark) [style*="background:#f1f5f9"],
html:not(.dark) body:not(.dark) [style*="background: #f3f4f6"],
html:not(.dark) body:not(.dark) [style*="background:#f3f4f6"],
html:not(.dark) body:not(.dark) [style*="background: #e9ecef"],
html:not(.dark) body:not(.dark) [style*="background:#e9ecef"],
html:not(.dark) body:not(.dark) [style*="background: #edf2f7"],
html:not(.dark) body:not(.dark) [style*="background:#edf2f7"] {
    background: var(--surface-2) !important;
    border-color: var(--border);
}

/* ------------------------------------------------------------
   17. SCROLLBARS
   ------------------------------------------------------------ */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(115, 123, 157, 0.40) transparent;
}

html.dark *,
body.dark * {
    scrollbar-color: rgba(163, 174, 224, 0.30) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(115, 123, 157, 0.38);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(115, 123, 157, 0.58);
    border: 2px solid transparent;
    background-clip: padding-box;
}

html.dark ::-webkit-scrollbar-thumb,
body.dark ::-webkit-scrollbar-thumb {
    background: rgba(163, 174, 224, 0.26);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ------------------------------------------------------------
   18. MODULE OVERRIDE NORMALISATION
   Module <style> blocks are injected after this stylesheet, so at
   equal specificity they win and each screen drifts to its own
   palette. These `html body` prefixed rules outrank them without
   resorting to !important, and only reset appearance — layout
   declared by the module is left untouched.
   ------------------------------------------------------------ */
html body .card-header,
html body .card-body,
html body .modal-header,
html body .modal-body,
html body .modal-footer {
    background: transparent;
    background-image: none;
    color: var(--text);
}

html body .card-header,
html body .modal-header {
    border-bottom: 1px solid var(--border);
}

html body .modal-footer {
    border-top: 1px solid var(--border);
}

html body .badge,
html body .badge-secondary,
html body .badge-success,
html body .badge-warning,
html body .badge-info,
html body .badge-danger,
html body .badge-light,
html body .badge-dark,
html body .badge-inactive,
html body .badge-archived {
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

html body .badge-success { background: var(--ds-success-soft); color: var(--ds-success-text); }
html body .badge-warning { background: var(--ds-warning-soft); color: var(--ds-warning-text); }
html body .badge-danger { background: var(--ds-danger-soft); color: var(--ds-danger-text); }
html body .badge-info { background: var(--ds-info-soft); color: var(--ds-info-text); }
html body .badge-secondary,
html body .badge-light,
html body .badge-inactive,
html body .badge-archived { background: var(--surface-3); color: var(--text-light); }
html body .badge-dark { background: var(--text); color: var(--card); }

html body .btn,
html body .btn-sm {
    border-radius: var(--radius-sm);
}

html body .btn-primary {
    background: linear-gradient(135deg, var(--ds-brand-500) 0%, var(--ds-brand-600) 60%, #3f2fd4 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

html body .btn-secondary {
    background: var(--glass-bg-strong);
    color: var(--text);
    border: 1px solid var(--glass-border);
}

html body .btn-success { background: var(--ds-success-solid); color: #fff; border-color: transparent; }
html body .btn-danger { background: var(--ds-danger-solid); color: #fff; border-color: transparent; }
html body .btn-warning { background: var(--ds-warning-solid); color: #fff; border-color: transparent; }
html body .btn-info { background: var(--ds-info-solid); color: #fff; border-color: transparent; }
html body .btn-purple { background: var(--ds-violet-solid); color: #fff; border-color: transparent; }

html body .form-group input,
html body .form-group select,
html body .form-group textarea {
    background: var(--glass-bg-strong);
    color: var(--text);
    border: 1px solid var(--ds-line-strong);
    border-radius: var(--radius-sm);
}

html body .form-group input:focus,
html body .form-group select:focus,
html body .form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--ds-focus-ring);
}

html body .empty-state {
    background: transparent;
    color: var(--text-lighter);
}

/* ------------------------------------------------------------
   19. CONTRAST SAFETY
   Fixes for combinations that fell below WCAG AA. Modules often
   scope these with an id, so !important is the only lever.
   ------------------------------------------------------------ */

/* Modules paint solid fills with `var(--primary)` and white text. In dark
   mode --primary is a light lavender tuned for text, so white on it lands
   near 2.5:1 — force the solid brand fill instead. */
html.dark body .btn-primary,
html.dark body .btn-standard-primary,
html.dark body [data-ui-button="true"][data-ui-button-variant="primary"],
html.dark body .meeting-tab.active,
html.dark body .tab-btn.active,
html.dark body [class*="step-dot"].active {
    background: linear-gradient(135deg, var(--ds-brand-solid) 0%, var(--ds-brand-solid-hover) 100%) !important;
    color: #ffffff !important;
}

/* Soft/tinted buttons must take their surface from the theme, not a
   hardcoded near-white, or dark mode pairs pink text on a white chip. */
html.dark body .btn-danger,
html.dark body .btn-standard-danger,
html.dark body .bulk-delete-btn,
html.dark body [data-ui-button="true"][data-ui-button-variant="danger"] {
    background: var(--ds-danger-soft) !important;
    color: var(--ds-danger-text) !important;
    border-color: rgba(255, 112, 137, 0.35) !important;
}

/* Solid semantic buttons: the dark-mode fill tokens are bright pastels, so
   modules painting a button with them leave white text at ~2:1. */
html.dark body .btn-success,
html.dark body .btn-standard-success { background: var(--ds-success-solid) !important; color: #fff !important; }
html.dark body .btn-warning { background: var(--ds-warning-solid) !important; color: #fff !important; }
html.dark body .btn-info { background: var(--ds-info-solid) !important; color: #fff !important; }
html.dark body .btn-purple { background: var(--ds-violet-solid) !important; color: #fff !important; }

/* Legacy hardcoded greys/greens that do not flip with the theme */
html body table thead th,
html body th,
html body .data-table th,
html body .policy-table th,
html body .shortlist-table th,
html body .client-list-table th,
html body #peopleTable th,
html body .activity-table-container th,
html body .table-standard th,
html body .badge-count {
    background: transparent;
    color: var(--text-lighter);
}

html body .cmw-step-dot,
html body .badge-count-gray,
html body [class*="step-dot"] {
    color: var(--text-light);
}

/* Legacy components that keep a light fill in dark mode. These were being
   repainted late by the JS dark fail-safe, which is what caused the flash. */
html.dark body .bulk-actions,
html.dark body .badge-count-gray,
html.dark body .cmw-step-dot,
html.dark body .type-label,
html.dark body .type-option input:checked + .type-label.income,
html.dark body .type-option input:checked + .type-label.expense,
html.dark body .type-option input:checked + .type-label.transfer,
html.dark body .finance-summary-item {
    background: var(--surface-2);
    color: var(--text);
}

html.dark body .badge-count-gray,
html.dark body .cmw-step-dot {
    color: var(--text-light);
}

/* Status pills across modules use hardcoded pastel fills that stay light in
   dark mode, leaving pale text on a pale chip. Reset every chip-like class
   first, then re-apply the semantic tints. */
html.dark body [class*="step-dot"],
html.dark body [class*="-badge"],
html.dark body [class*="-chip"],
html.dark body [class*="-pill"],
html.dark body [class*="-status"],
html.dark body .status-badge,
html.dark body .trustee-status-badge,
html.dark body .meeting-status-badge,
html.dark body .sw-status-badge,
html.dark body .list-status-badge,
html.dark body .application-status {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border);
}

html.dark body [class*="success"][class*="-badge"],
html.dark body [class*="active"][class*="-badge"],
html.dark body .status-badge.paid,
html.dark body .status-badge.reconciled,
html.dark body .status-badge.approved,
html.dark body .status-badge.active,
html.dark body .trustee-status-badge.active { background: var(--ds-success-soft); color: var(--ds-success-text); }
html.dark body [class*="pending"][class*="-badge"],
html.dark body [class*="review"][class*="-badge"],
html.dark body .status-badge.pending,
html.dark body .status-badge.draft,
html.dark body .status-badge.status-review { background: var(--ds-warning-soft); color: var(--ds-warning-text); }
html.dark body [class*="overdue"][class*="-badge"],
html.dark body [class*="rejected"][class*="-badge"],
html.dark body .status-badge.overdue,
html.dark body .status-badge.rejected { background: var(--ds-danger-soft); color: var(--ds-danger-text); }
html.dark body .status-badge.sent { background: var(--ds-info-soft); color: var(--ds-info-text); }

/* Re-assert the design-system badge tints, which the blanket chip reset above
   would otherwise flatten. */
html.dark body .badge-success { background: var(--ds-success-soft); color: var(--ds-success-text); }
html.dark body .badge-warning { background: var(--ds-warning-soft); color: var(--ds-warning-text); }
html.dark body .badge-danger { background: var(--ds-danger-soft); color: var(--ds-danger-text); }
html.dark body .badge-info { background: var(--ds-info-soft); color: var(--ds-info-text); }
html.dark body .badge-primary { background: rgba(154, 155, 255, 0.16); color: var(--primary); }

/* Bootstrap-era colours still inlined in some templates */
html body [style*="#28a745"] { color: var(--success) !important; }
html body [style*="#dc3545"] { color: var(--danger) !important; }
html body [style*="#dc2626"] { color: var(--danger) !important; }
html body [style*="#ffc107"] { color: var(--warning) !important; }
html body [style*="#17a2b8"] { color: var(--info) !important; }
html body [style*="#6c757d"] { color: var(--text-light) !important; }
html body [style*="#8b5cf6"] { color: var(--purple) !important; }
html body [style*="#e53e3e"] { color: var(--danger) !important; }
html body [style*="color: #3b82f6"],
html body [style*="color:#3b82f6"],
html body [style*="color: #2563eb"],
html body [style*="color:#2563eb"] { color: var(--primary) !important; }

/* Legacy near-white fills that never flip */
html.dark body .content-title,
html.dark body .file-explorer-table-wrap,
html.dark body .file-explorer-toolbar,
html.dark body .file-explorer-header-actions,
html.dark body .file-explorer-content-header,
html.dark body .file-explorer-statusbar,
html.dark body .explorer-action-btn {
    background: var(--surface-2);
    color: var(--text);
}

html.dark body [style*="background: #e9ecef"],
html.dark body [style*="background:#e9ecef"],
html.dark body [style*="background: #f0fdf4"],
html.dark body [style*="background:#f0fdf4"],
html.dark body [style*="background: #fef2f2"],
html.dark body [style*="background:#fef2f2"],
html.dark body [style*="background: #fff5f5"],
html.dark body [style*="background:#fff5f5"],
html.dark body [style*="background: #f5f5f5"],
html.dark body [style*="background:#f5f5f5"] {
    background: var(--surface-2) !important;
    color: var(--text);
}

html body .badge-count-blue {
    background: rgba(91, 75, 245, 0.14);
    color: var(--ds-brand-700);
}

html.dark body .badge-count-blue {
    color: var(--primary);
}

html.dark body .alert-success,
html.dark body .alert-danger,
html.dark body .alert-info,
html.dark body .alert-warning {
    color: var(--text);
}

html.dark body .alert-success strong,
html.dark body .alert-success p { color: var(--ds-success-text); }
html.dark body .alert-danger strong,
html.dark body .alert-danger p { color: var(--ds-danger-text); }

/* Native select popups follow color-scheme, but the closed control's
   options inherit a light grey in some engines. */
html.dark body select option {
    background: var(--ds-surface-alt);
    color: var(--text);
}

/* ------------------------------------------------------------
   20. ACCESSIBILITY FALLBACKS
   ------------------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
    .card,
    .stat-card,
    .bento-stat-card,
    .committee-card,
    .training-card,
    .document-card,
    .calendar-container,
    .top-bar,
    .notification-btn,
    .menu-toggle,
    .icon-btn,
    .user-dropdown-btn,
    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-input,
    .form-select,
    .form-textarea,
    .form-control,
    .search-box input,
    .btn-secondary,
    .btn-standard-secondary,
    .notification-panel,
    .user-dropdown-menu,
    .dropdown-menu,
    .search-results-dropdown,
    .action-menu,
    .meeting-action-menu,
    .messaging-actions-menu,
    .mobile-nav-sheet,
    .mobile-speed-dial-sheet,
    .modal-content {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: var(--card) !important;
    }

    #navShell .sidebar.main-sidebar,
    #navShell .sub-sidebar {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

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