/* QA Pipeline Test — verifying Codex integration */
html {
    scroll-behavior: smooth;
}

:root {
    --bg-primary: #0a0e1a;
    --bg-secondary: #141827;
    --bg-tertiary: #1e2536;
    --accent-primary: #00f0ff;
    --accent-secondary: #ff00f5;
    --accent-tertiary: #7b61ff;
    --text-primary: #ffffff;
    --text-secondary: #a0aec0;
    --text-muted: #8494a7;
    --success: #00ff88;
    --warning: #ffb800;
    --danger: #ff3366;
    --glass-bg: rgba(30, 37, 54, 0.6);
    --glass-border: rgba(255, 255, 255, 0.12);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 240, 255, 0.3);
    --mesh-gradient-1: rgba(123, 97, 255, 0.3);
    --mesh-gradient-2: rgba(0, 240, 255, 0.3);
    --mesh-gradient-3: rgba(255, 0, 245, 0.3);
    --bg-gradient-1: rgba(123, 97, 255, 0.15);
    --bg-gradient-2: rgba(0, 240, 255, 0.15);
    --bg-gradient-3: rgba(255, 0, 245, 0.1);
    /* Design tokens: Radius scale */
    --radius-xs: 4px;
    --radius-small: 8px;
    --radius-element: 10px;
    --radius-card: 20px;
    --radius-full: 9999px;
    /* Design tokens: Font-size scale (8 steps) */
    --font-2xs: 0.625rem;   /* 10px */
    --font-xs: 0.6875rem;   /* 11px */
    --font-sm: 0.8125rem;   /* 13px */
    --font-base: 0.9375rem; /* 15px */
    --font-md: 1rem;        /* 16px */
    --font-lg: 1.125rem;    /* 18px */
    --font-xl: 1.5rem;      /* 24px */
    --font-2xl: 2rem;       /* 32px */
    /* Design tokens: Line-height scale */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    /* Border tokens */
    --border-width: 0px;
    --border-style: solid;
    --border-color: var(--glass-border);
    /* Template background tokens (Glassmorphic defaults) */
    --card-bg: rgba(30, 37, 54, 0.6);
    --element-bg: var(--bg-tertiary);
    /* Modal backdrop blur */
    --modal-blur: 12px;
    /* Spacing scale (4px base grid) */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 2.5rem;    /* 40px */
    --space-8: 3rem;      /* 48px */
    /* Transition tokens */
    --transition-speed: 200ms;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-snappy: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    /* Glass depth variation */
    --glass-bg-light: rgba(30, 37, 54, 0.35);
    --glass-bg-medium: rgba(30, 37, 54, 0.6);
    --glass-bg-heavy: rgba(30, 37, 54, 0.8);
    --glass-blur-light: 8px;
    --glass-blur-medium: 12px;
    --glass-blur-heavy: 20px;
    /* Shadow depth scale (refined) */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.15);
    /* Vibrancy (color saturation) */
    --vibrancy: 1;
}

[data-theme="dim"] {
    --bg-primary: #1a1f2e;
    --bg-secondary: #232a3b;
    --bg-tertiary: #2d3548;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #8494a7;
    --glass-bg: rgba(45, 53, 72, 0.6);
    --glass-bg-light: rgba(45, 53, 72, 0.35);
    --glass-bg-medium: rgba(45, 53, 72, 0.6);
    --glass-bg-heavy: rgba(45, 53, 72, 0.8);
    --card-bg: rgba(45, 53, 72, 0.6);
    --element-bg: #2d3548;
    --glass-border: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(0, 240, 255, 0.2);
    --mesh-gradient-1: rgba(123, 97, 255, 0.2);
    --mesh-gradient-2: rgba(0, 240, 255, 0.2);
    --mesh-gradient-3: rgba(255, 0, 245, 0.2);
    --bg-gradient-1: rgba(123, 97, 255, 0.1);
    --bg-gradient-2: rgba(0, 240, 255, 0.1);
    --bg-gradient-3: rgba(255, 0, 245, 0.07);
}

[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --accent-primary: #0ea5e9;
    --accent-secondary: #d946ef;
    --accent-tertiary: #8b5cf6;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #6b7280;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --glass-bg: #e9edf2;
    --card-bg: #ffffff;
    --element-bg: #f1f5f9;
    --glass-border: rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.2);
    --mesh-gradient-1: rgba(139, 92, 246, 0.15);
    --mesh-gradient-2: rgba(14, 165, 233, 0.15);
    --mesh-gradient-3: rgba(217, 70, 239, 0.1);
    --bg-gradient-1: rgba(139, 92, 246, 0.08);
    --bg-gradient-2: rgba(14, 165, 233, 0.08);
    --bg-gradient-3: rgba(217, 70, 239, 0.05);

    /* Light theme glass depth overrides */
    --glass-bg-light: rgba(255, 255, 255, 0.7);
    --glass-bg-medium: rgba(255, 255, 255, 0.85);
    --glass-bg-heavy: rgba(255, 255, 255, 0.95);
}

/* === Color Palettes === */
/* Ocean = default (:root), no override needed */

[data-palette="forest"] {
    --accent-primary: #10b981;
    --accent-secondary: #34d399;
    --accent-tertiary: #059669;
    --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);
    --mesh-gradient-1: rgba(5, 150, 105, 0.3);
    --mesh-gradient-2: rgba(16, 185, 129, 0.3);
    --mesh-gradient-3: rgba(52, 211, 153, 0.3);
    --bg-gradient-1: rgba(5, 150, 105, 0.15);
    --bg-gradient-2: rgba(16, 185, 129, 0.15);
    --bg-gradient-3: rgba(52, 211, 153, 0.1);
}

[data-palette="sunset"] {
    --accent-primary: #f97316;
    --accent-secondary: #ec4899;
    --accent-tertiary: #f59e0b;
    --shadow-glow: 0 0 20px rgba(249, 115, 22, 0.3);
    --mesh-gradient-1: rgba(245, 158, 11, 0.3);
    --mesh-gradient-2: rgba(249, 115, 22, 0.3);
    --mesh-gradient-3: rgba(236, 72, 153, 0.3);
    --bg-gradient-1: rgba(245, 158, 11, 0.15);
    --bg-gradient-2: rgba(249, 115, 22, 0.15);
    --bg-gradient-3: rgba(236, 72, 153, 0.1);
}

[data-palette="royal"] {
    --accent-primary: #6366f1;
    --accent-secondary: #a855f7;
    --accent-tertiary: #4f46e5;
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    --mesh-gradient-1: rgba(79, 70, 229, 0.3);
    --mesh-gradient-2: rgba(99, 102, 241, 0.3);
    --mesh-gradient-3: rgba(168, 85, 247, 0.3);
    --bg-gradient-1: rgba(79, 70, 229, 0.15);
    --bg-gradient-2: rgba(99, 102, 241, 0.15);
    --bg-gradient-3: rgba(168, 85, 247, 0.1);
}

[data-palette="crimson"] {
    --accent-primary: #ef4444;
    --accent-secondary: #f59e0b;
    --accent-tertiary: #dc2626;
    --shadow-glow: 0 0 20px rgba(239, 68, 68, 0.3);
    --mesh-gradient-1: rgba(220, 38, 38, 0.3);
    --mesh-gradient-2: rgba(239, 68, 68, 0.3);
    --mesh-gradient-3: rgba(245, 158, 11, 0.3);
    --bg-gradient-1: rgba(220, 38, 38, 0.15);
    --bg-gradient-2: rgba(239, 68, 68, 0.15);
    --bg-gradient-3: rgba(245, 158, 11, 0.1);
}

[data-palette="sky"] {
    --accent-primary: #0ea5e9;
    --accent-secondary: #3b82f6;
    --accent-tertiary: #0284c7;
    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3);
    --mesh-gradient-1: rgba(2, 132, 199, 0.3);
    --mesh-gradient-2: rgba(14, 165, 233, 0.3);
    --mesh-gradient-3: rgba(59, 130, 246, 0.3);
    --bg-gradient-1: rgba(2, 132, 199, 0.15);
    --bg-gradient-2: rgba(14, 165, 233, 0.15);
    --bg-gradient-3: rgba(59, 130, 246, 0.1);
}

[data-palette="agility"] {
    --accent-primary: #00b8d4;
    --accent-secondary: #0097a7;
    --accent-tertiary: #1b2d3e;
    --shadow-glow: 0 0 20px rgba(0, 184, 212, 0.3);
    --mesh-gradient-1: rgba(27, 45, 62, 0.3);
    --mesh-gradient-2: rgba(0, 184, 212, 0.3);
    --mesh-gradient-3: rgba(0, 151, 167, 0.3);
    --bg-gradient-1: rgba(27, 45, 62, 0.15);
    --bg-gradient-2: rgba(0, 184, 212, 0.15);
    --bg-gradient-3: rgba(0, 151, 167, 0.1);
}

[data-palette="agility"] .btn-primary {
    background: linear-gradient(135deg, #00b8d4, #0097a7);
    color: #ffffff;
}

/* Light theme + palette overrides (tone down neons for light backgrounds) */
[data-theme="light"][data-palette="forest"] {
    --accent-primary: #059669;
    --accent-secondary: #10b981;
    --accent-tertiary: #047857;
    --shadow-glow: 0 0 20px rgba(5, 150, 105, 0.2);
    --mesh-gradient-1: rgba(4, 120, 87, 0.15);
    --mesh-gradient-2: rgba(5, 150, 105, 0.15);
    --mesh-gradient-3: rgba(16, 185, 129, 0.1);
    --bg-gradient-1: rgba(4, 120, 87, 0.08);
    --bg-gradient-2: rgba(5, 150, 105, 0.08);
    --bg-gradient-3: rgba(16, 185, 129, 0.05);
}

[data-theme="light"][data-palette="sunset"] {
    --accent-primary: #ea580c;
    --accent-secondary: #db2777;
    --accent-tertiary: #d97706;
    --shadow-glow: 0 0 20px rgba(234, 88, 12, 0.2);
    --mesh-gradient-1: rgba(217, 119, 6, 0.15);
    --mesh-gradient-2: rgba(234, 88, 12, 0.15);
    --mesh-gradient-3: rgba(219, 39, 119, 0.1);
    --bg-gradient-1: rgba(217, 119, 6, 0.08);
    --bg-gradient-2: rgba(234, 88, 12, 0.08);
    --bg-gradient-3: rgba(219, 39, 119, 0.05);
}

[data-theme="light"][data-palette="royal"] {
    --accent-primary: #4f46e5;
    --accent-secondary: #9333ea;
    --accent-tertiary: #4338ca;
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.2);
    --mesh-gradient-1: rgba(67, 56, 202, 0.15);
    --mesh-gradient-2: rgba(79, 70, 229, 0.15);
    --mesh-gradient-3: rgba(147, 51, 234, 0.1);
    --bg-gradient-1: rgba(67, 56, 202, 0.08);
    --bg-gradient-2: rgba(79, 70, 229, 0.08);
    --bg-gradient-3: rgba(147, 51, 234, 0.05);
}

[data-theme="light"][data-palette="crimson"] {
    --accent-primary: #dc2626;
    --accent-secondary: #d97706;
    --accent-tertiary: #b91c1c;
    --shadow-glow: 0 0 20px rgba(220, 38, 38, 0.2);
    --mesh-gradient-1: rgba(185, 28, 28, 0.15);
    --mesh-gradient-2: rgba(220, 38, 38, 0.15);
    --mesh-gradient-3: rgba(217, 119, 6, 0.1);
    --bg-gradient-1: rgba(185, 28, 28, 0.08);
    --bg-gradient-2: rgba(220, 38, 38, 0.08);
    --bg-gradient-3: rgba(217, 119, 6, 0.05);
}

[data-theme="light"][data-palette="sky"] {
    --accent-primary: #0284c7;
    --accent-secondary: #2563eb;
    --accent-tertiary: #0369a1;
    --shadow-glow: 0 0 20px rgba(2, 132, 199, 0.2);
    --mesh-gradient-1: rgba(3, 105, 161, 0.15);
    --mesh-gradient-2: rgba(2, 132, 199, 0.15);
    --mesh-gradient-3: rgba(37, 99, 235, 0.1);
    --bg-gradient-1: rgba(3, 105, 161, 0.08);
    --bg-gradient-2: rgba(2, 132, 199, 0.08);
    --bg-gradient-3: rgba(37, 99, 235, 0.05);
}

[data-theme="light"][data-palette="agility"] {
    --accent-primary: #0097a7;
    --accent-secondary: #00838f;
    --accent-tertiary: #1b2d3e;
    --shadow-glow: 0 0 20px rgba(0, 151, 167, 0.2);
    --mesh-gradient-1: rgba(27, 45, 62, 0.15);
    --mesh-gradient-2: rgba(0, 151, 167, 0.15);
    --mesh-gradient-3: rgba(0, 131, 143, 0.1);
    --bg-gradient-1: rgba(27, 45, 62, 0.08);
    --bg-gradient-2: rgba(0, 151, 167, 0.08);
    --bg-gradient-3: rgba(0, 131, 143, 0.05);
}

/* === User Customization Toggles === */

/* Glow Effects: off */
[data-glow="off"] {
    --shadow-glow: none;
}

/* Vibrancy (color saturation) — applied to main content */
html[data-vibrancy] {
    filter: saturate(var(--vibrancy, 1));
}

/* Badge Style: flat (solid colors, no gradients) */
[data-badge-style="flat"] .badge-aca { background: #06b6d4; }
[data-badge-style="flat"] .badge-medicare { background: #10b981; }
[data-badge-style="flat"] .badge-life { background: #f59e0b; }
[data-badge-style="flat"] .badge-active { background: #10b981; }
[data-badge-style="flat"] .badge-info { background: #3b82f6; }
[data-badge-style="flat"] .badge-warning { background: #f59e0b; }
[data-badge-style="flat"] .badge-danger { background: #ef4444; }
[data-badge-style="flat"] .badge-secondary { background: #64748b; }
[data-badge-style="flat"] .badge-accent { background: #8b5cf6; }
[data-badge-style="flat"] .badge-orange { background: #f97316; }
[data-badge-style="flat"] .badge-tag { background: #6366f1; }

/* Animation Speed: none */
[data-animation="none"] *,
[data-animation="none"] *::before,
[data-animation="none"] *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
}

/* Animation Speed: subtle */
[data-animation="subtle"] {
    --transition-speed: 100ms;
}

/* === Site Templates === */
/* Paper Flat: sharp edges, opaque backgrounds, serif headings, bordered tabs */
[data-template="paper-flat"] {
    --radius-card: 4px;
    --radius-element: 4px;
    --radius-small: 3px;
    --card-bg: var(--bg-secondary);
    --glass-bg: var(--bg-secondary);
    --border-width: 1px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-glow: none;
    --modal-blur: 0px;
}
[data-template="paper-flat"] .page-title,
[data-template="paper-flat"] .data-card-title,
[data-template="paper-flat"] .insights-title {
    font-family: 'Merriweather', Georgia, serif;
}
[data-template="paper-flat"] body {
    font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;
}
[data-template="paper-flat"] .data-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
}
[data-template="paper-flat"] .detail-tab {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-element);
    background: transparent;
}
[data-template="paper-flat"] .detail-tab.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
[data-template="paper-flat"] .sidebar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-template="paper-flat"] .modal-content {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
}
[data-template="paper-flat"] .modal-header {
    border-bottom: 1px solid var(--glass-border);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
[data-template="paper-flat"] .modal-footer {
    border-top: 1px solid var(--glass-border);
}
[data-template="paper-flat"] .slide-over-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-secondary);
    border-left: 1px solid var(--glass-border);
    border-radius: 0;
}
[data-template="paper-flat"] .data-table-container {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
    backdrop-filter: none;
}
[data-template="paper-flat"] .data-table thead {
    border-bottom: 2px solid var(--glass-border);
}
[data-template="paper-flat"] .table-footer {
    border-top: 1px solid var(--glass-border);
}
[data-template="paper-flat"] .badge-active,
[data-template="paper-flat"] .badge-info,
[data-template="paper-flat"] .badge-warning,
[data-template="paper-flat"] .badge-danger,
[data-template="paper-flat"] .badge-secondary,
[data-template="paper-flat"] .badge-accent {
    border-radius: var(--radius-xs);
}
[data-template="paper-flat"] .nav-item {
    border-radius: var(--radius-xs);
}
[data-template="paper-flat"] .nav-section-title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 0.6875rem;
}
[data-template="paper-flat"] .top-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--glass-border);
}
[data-template="paper-flat"] .insights-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-secondary);
    border-left: 1px solid var(--glass-border);
}
[data-template="paper-flat"] .btn-primary {
    border-radius: var(--radius-xs);
}
[data-template="paper-flat"] .btn-secondary {
    border-radius: var(--radius-xs);
    border: 1px solid var(--glass-border);
}
[data-template="paper-flat"] .filter-input,
[data-template="paper-flat"] .form-input,
[data-template="paper-flat"] select {
    border-radius: var(--radius-xs);
    backdrop-filter: none;
}
[data-template="paper-flat"] .login-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
}
[data-template="paper-flat"] .login-logo {
    border-radius: var(--radius-xs);
}
[data-template="paper-flat"] .command-palette {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
}
[data-template="paper-flat"] .stat-card,
[data-template="paper-flat"] .money-board-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xs);
}

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

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* ============================================================
   FONT FAMILIES (decoupled from templates)
   ============================================================ */

/* Outfit (default) — body already has 'Outfit' */

/* Font overrides — set on body, everything inherits */
[data-font="merriweather"] body { font-family: 'Merriweather', Georgia, serif; }
[data-font="inter"] body { font-family: 'Inter', system-ui, sans-serif; }
[data-font="jetbrains"] body { font-family: 'JetBrains Mono', monospace; }
[data-font="playfair"] body { font-family: 'Playfair Display', Georgia, serif; }
[data-font="roboto"] body { font-family: 'Roboto', system-ui, sans-serif; }
[data-font="nunito"] body { font-family: 'Nunito', sans-serif; }
[data-font="opensans"] body { font-family: 'Open Sans', sans-serif; }
[data-font="agility"] body { font-family: 'Inter', system-ui, sans-serif; }
[data-font="agility"] .data-card-title,
[data-font="agility"] .detail-tab,
[data-font="agility"] .nav-section-title,
[data-font="agility"] h1, [data-font="agility"] h2, [data-font="agility"] h3,
[data-font="agility"] .stat-value,
[data-font="agility"] .logo-text,
[data-font="agility"] .insights-title,
[data-font="agility"] .slide-over-header h3 { font-family: 'Comfortaa', sans-serif; letter-spacing: 0.02em; }

/* Login Page */
.login-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0e1a;
    overflow: hidden;
}

.login-bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--accent-primary) 8%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 80%, rgba(0, 255, 136, 0.06) 0%, transparent 60%);
}

.login-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.login-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: loginGlow 8s ease-in-out infinite;
    will-change: transform, opacity;
}

.login-bg-glow-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    animation-delay: 0s;
}

.login-bg-glow-2 {
    width: 350px;
    height: 350px;
    bottom: -50px;
    left: -80px;
    background: rgba(139, 92, 246, 0.1);
    animation-delay: -3s;
}

.login-bg-glow-3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 50%;
    background: rgba(0, 255, 136, 0.06);
    animation-delay: -5s;
}

@keyframes loginGlow {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50% { transform: translate(30px, -20px) scale(1.15); opacity: 1; }
}

.login-logo {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, #00f0ff, #8b5cf6);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.04em;
    box-shadow: 0 8px 40px color-mix(in srgb, var(--accent-primary) 30%, transparent), 0 0 80px rgba(139, 92, 246, 0.15);
    position: relative;
}

.login-logo::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 40%, transparent), rgba(139, 92, 246, 0.4));
    z-index: -1;
    filter: blur(12px);
}

.login-slogan {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: #00f0ff;
}

.login-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: var(--border-width) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-card);
    margin-bottom: 1rem;
}

/* Login section reusable classes (extracted from inline styles) */
.login-pad { padding: 2rem; }
.login-heading { font-size: 1.125rem; font-weight: 700; color: #ffffff; margin-bottom: 0.5rem; }
.login-desc { color: rgba(255,255,255,0.6); font-size: 0.875rem; margin-bottom: 1.5rem; }
.login-label { color: rgba(255,255,255,0.7); }
.login-divider { text-align: center; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); }
.login-divider-text { font-size: 0.875rem; color: rgba(255,255,255,0.5); }
.login-divider-link { font-size: 0.875rem; color: var(--accent-primary); margin-left: 0.25rem; font-weight: 600; }
.login-btn-full { width: 100%; font-size: 1rem; justify-content: center; padding: 0.875rem 1.5rem; margin-bottom: 0.75rem; }
.login-spinner { width: 60px; height: 60px; border: 3px solid rgba(255,255,255,0.1); border-top-color: var(--accent-primary); border-radius: 50%; margin: 0 auto 1.5rem; animation: spin 1s linear infinite; }
.login-mfa-grid { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }

.login-card .login-input {
    background: rgba(255, 255, 255, 0.06);
    border: var(--border-width) solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.login-card .login-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.login-card .login-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.login-sso-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: var(--border-width) solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-element);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.login-sso-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.login-otp-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: var(--border-width) solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-element);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.login-otp-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.login-back-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: var(--border-width) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-element);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: center;
}

.login-back-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
.reg-step-indicator {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.1); flex-shrink: 0; transition: all var(--transition-speed) var(--transition-ease);
}
.reg-step-active {
    color: #ffffff; background: var(--accent-primary); border-color: var(--accent-primary);
    box-shadow: 0 0 12px rgba(99,102,241,0.4);
}
.reg-step-done {
    color: #00ff88; background: rgba(0,255,136,0.15); border-color: rgba(0,255,136,0.4); font-size: 0.625rem;
}

.login-mfa-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: var(--border-width) solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-element);
    cursor: pointer;
    transition: all 0.2s;
}

.login-mfa-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-primary);
}

.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 1rem;
}

.login-modal {
    width: 100%;
    max-width: 440px;
    background: color-mix(in srgb, var(--bg-primary) 95%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: var(--border-width) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.login-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

.login-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: var(--border-width) solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-small);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.login-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.login-modal-body {
    padding: 1.5rem;
}

.login-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: var(--border-width) solid rgba(255, 255, 255, 0.08);
}

/* Animated Background */
.background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 50%, var(--bg-gradient-1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--bg-gradient-2) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, var(--bg-gradient-3) 0%, transparent 50%);
    animation: bgShift 20s ease-in-out infinite;
    will-change: transform;
}

@keyframes bgShift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, 20px) scale(1.05); }
}

.mesh-gradient {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(at 40% 20%, var(--mesh-gradient-1) 0%, transparent 50%),
        radial-gradient(at 80% 0%, var(--mesh-gradient-2) 0%, transparent 50%),
        radial-gradient(at 0% 50%, var(--mesh-gradient-3) 0%, transparent 50%);
    filter: blur(100px);
    opacity: 0.5;
    animation: meshRotate 30s linear infinite;
    z-index: 0;
    will-change: transform;
}

@keyframes meshRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes requestBuilderBounce {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-6px); }
    40% { transform: translateY(0); }
    55% { transform: translateY(-3px); }
    70% { transform: translateY(0); }
}

.request-builder-bounce {
    animation: requestBuilderBounce 0.6s ease;
}

/* CSS Utility Classes */
.u-glass-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.u-glass-blur-light { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.u-glass-blur-heavy { backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }
.u-shadow-lg { box-shadow: var(--shadow-lg); }
.u-shadow-none { box-shadow: none; }
.u-text-center { text-align: center; }
.u-text-muted { color: var(--text-muted); }
.u-text-muted-sm { font-size: 0.8125rem; color: var(--text-muted); }
.u-text-secondary { color: var(--text-secondary); }
.u-text-secondary-sm { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }
.u-text-muted-body { font-size: 0.875rem; color: var(--text-muted); }
.u-font-bold { font-weight: 700; }
.u-font-semibold { font-weight: 600; }
.u-flex { display: flex; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-gap-sm { gap: 0.5rem; }
.u-gap-md { gap: 1rem; }
.u-hidden { display: none; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-text-detail { font-size: 0.8125rem; color: var(--text-secondary); }
.u-text-hint { font-size: 0.75rem; color: var(--text-muted); }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-row-sm { display: flex; align-items: center; gap: 0.5rem; }
.u-pointer { cursor: pointer; }
.u-mb-1 { margin-bottom: 1rem; }
.u-mb-1-5 { margin-bottom: 1.5rem; }
.u-mb-2 { margin-bottom: 2rem; }
.u-mt-1-5 { margin-top: 1.5rem; }
.u-m-0 { margin: 0; }
.u-mb-0-5 { margin-bottom: 0.5rem; }
.u-mb-0-75 { margin-bottom: 0.75rem; }
.u-mt-1 { margin-top: 1rem; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-text-success-bold { color: var(--success); font-weight: 700; }
.u-flex-center-gap { display: flex; align-items: center; gap: 0.75rem; }
.u-text-primary-semibold { color: var(--text-primary); font-weight: 600; }
.u-empty-state { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; }

/* Glass morphism effects */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: var(--border-width) var(--border-style) var(--border-color);
    box-shadow: var(--shadow-md);
    transition: all 0.4s ease;
}

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    height: 100vh;
    background: var(--bg-secondary);
    backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(150%);
    border-right: none;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    overflow: hidden;
    transition: transform 0.3s var(--transition-snappy);
    box-shadow: var(--shadow-md);
    will-change: transform;
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.sidebar-nav::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}

.logo {
    padding: 0 2rem 1rem 2rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0;
}

.logo-mark {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-element);
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}

.logo-full {
    min-width: 0;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.logo-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.nav-section {
    padding: 0 0.875rem;
    margin-bottom: 0.625rem;
}

.nav-section-title {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.25rem 0 0;
    margin-bottom: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color 0.2s ease;
}

.nav-section-title:hover {
    color: var(--text-secondary);
}

.nav-section.has-active > .nav-section-title {
    color: var(--accent-primary);
}

.nav-section-title .nav-collapse-icon {
    font-size: 0.5rem;
    transition: transform 0.2s ease;
}

.nav-section.collapsed .nav-section-title .nav-collapse-icon {
    transform: rotate(-90deg);
}

.nav-section-items {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.3s ease;
}

.nav-section.collapsed .nav-section-items {
    max-height: 0;
}

/* Pinned Nav Section */
.nav-pinned-section {
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.25rem;
    margin-bottom: 0.625rem;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
    backdrop-filter: blur(30px);
}
.nav-pinned-section:not(:has(.nav-item)) {
    display: none !important;
}
.nav-pinned-section .nav-item {
    font-size: 0.8125rem;
    padding: 0.1875rem 0.5rem;
}
.nav-item .nav-pin-toggle {
    display: inline-flex;
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0;
    cursor: pointer;
    padding: 0.375rem 0;
    flex-shrink: 0;
    border-radius: var(--radius-small);
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, max-width 0.2s ease, padding 0.2s ease;
    position: relative;
    z-index: 1;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
}
.nav-item:hover .nav-pin-toggle {
    opacity: 0.4;
    max-width: 2.5rem;
    padding: 0.375rem 0.5rem;
    pointer-events: auto;
}
.nav-item .nav-pin-toggle:hover {
    opacity: 1;
    color: var(--accent-primary);
    background: rgba(255,255,255,0.08);
}
.nav-item .nav-pin-toggle.is-pinned {
    opacity: 0.7;
    max-width: 2.5rem;
    padding: 0.375rem 0.5rem;
    pointer-events: auto;
    color: var(--accent-primary);
}
.nav-item .nav-pin-toggle.is-pinned:hover {
    background: rgba(255,255,255,0.08);
    opacity: 1;
}
.nav-pinned-section .nav-item .nav-pin-toggle:hover {
    color: var(--danger, #ff3366);
    background: rgba(255,51,102,0.1);
}
[data-theme="light"] .nav-item .nav-pin-toggle:hover,
[data-theme="light"] .nav-item .nav-pin-toggle.is-pinned:hover {
    background: rgba(0,0,0,0.06);
}
[data-theme="light"] .nav-pinned-section .nav-item .nav-pin-toggle:hover {
    background: rgba(255,51,102,0.08);
}

@keyframes pinBounceIn {
    0% { opacity: 0; transform: translateY(-8px) scale(0.95); }
    50% { opacity: 1; transform: translateY(3px) scale(1.02); }
    70% { transform: translateY(-1px) scale(1); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pinFadeOut {
    0% { opacity: 1; transform: translateX(0); max-height: 40px; }
    100% { opacity: 0; transform: translateX(-20px); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}
.nav-pinned-section .nav-item.pin-animate-in {
    animation: pinBounceIn 0.35s ease-out forwards;
}
.nav-pinned-section .nav-item.pin-animate-out {
    animation: pinFadeOut 0.25s ease-in forwards;
}

/* Email list hover actions (Gmail/Outlook style) */
.email-list-row .email-hover-action { display: none !important; }
.email-list-row:hover .email-hover-action { display: inline !important; opacity: 0.6; transition: opacity 0.15s; }
.email-list-row:hover .email-hover-action:hover { opacity: 1; color: var(--accent-primary) !important; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.875rem 0.25rem 0;
    margin-bottom: 0.0625rem;
    border-radius: var(--radius-element);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    position: relative;
    overflow: hidden;
    font-size: 0.875rem;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary) 0%, transparent 100%);
    opacity: 0;
    transition: all var(--transition-speed) var(--transition-ease);
    pointer-events: none;
}

.nav-item:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent-tertiary) 12%, transparent);
    padding-left: 0.125rem;
}

.nav-item:hover::before {
    width: 100%;
    opacity: 0.1;
}

.nav-item.active {
    color: var(--accent-primary);
    background: none;
    border-left: none;
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
    color: var(--accent-primary);
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
    color: var(--text-muted);
}

/* Phosphor fill variant on active/hover nav items */
.nav-item.active .nav-icon .ph,
.nav-item:hover .nav-icon .ph {
    font-family: 'Phosphor-Fill';
}

/* JS-rendered icons in top bar */
.icon-btn > span[data-icon] {
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
}
.settings-nav-item > span[data-icon] {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.settings-nav-item.active > span[data-icon] {
    color: var(--accent-primary);
}
.description-bar > span[data-icon] {
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

.nav-item-expandable {
    position: relative;
}

.nav-expand-icon {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.nav-item-expandable.expanded .nav-expand-icon {
    transform: rotate(90deg);
}

.nav-sub-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-sub-menu.open {
    max-height: 200px;
}

.nav-sub-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.875rem 0.5rem 3.25rem;
    margin-bottom: 0;
    border-radius: var(--radius-element);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    font-size: 0.875rem;
}

.nav-sub-item:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent-tertiary) 8%, transparent);
}

.nav-sub-item.active {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

/* Main Content */
.main-container {
    margin-left: 240px;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    transition: margin-right 0.3s ease;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 10px 0.85rem 3rem;
    background: var(--bg-secondary);
    backdrop-filter: blur(20px);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: none;
    margin-right: -360px;
    padding-right: calc(10px + 360px);
}
.main-container.rail-collapsed .top-bar {
    margin-right: -40px;
    padding-right: calc(10px + 40px);
}

.search-bar {
    position: relative;
    flex: 1;
    margin-right: 1rem;
}

.search-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 3.25rem;
    background: var(--glass-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    outline: none;
    border-radius: var(--radius-card);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all var(--transition-speed) var(--transition-ease);
    backdrop-filter: blur(20px);
    -webkit-appearance: none;
    appearance: none;
}

.search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-icon svg {
    width: 20px;
    height: 20px;
}

.top-bar-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.icon-btn {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    color: var(--text-secondary);
    position: relative;
    font-family: 'Outfit', sans-serif;
}

.icon-btn:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 20%, transparent);
    color: var(--text-primary);
}

.icon-btn[aria-expanded="true"] {
    transform: none;
}

.theme-toggle {
    position: relative;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    color: var(--text-secondary);
    overflow: hidden;
    font-family: 'Outfit', sans-serif;
}

.theme-toggle:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 20%, transparent);
    color: var(--text-primary);
}

.theme-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    font-size: 1.25rem;
    line-height: 1;
}

/* Dark mode (default): show moon */
.theme-icon.sun {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}
.theme-icon.dim-icon {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}
.theme-icon.moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Dim mode: show half-moon */
[data-theme="dim"] .theme-icon.sun {
    opacity: 0;
    transform: rotate(180deg) scale(0);
}
[data-theme="dim"] .theme-icon.dim-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="dim"] .theme-icon.moon {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}

/* Light mode: show sun */
[data-theme="light"] .theme-icon.sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="light"] .theme-icon.dim-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}
[data-theme="light"] .theme-icon.moon {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 22px;
    height: 22px;
    background: var(--danger);
    color: #fff !important;
    border-radius: var(--radius-element);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    border: 2px solid var(--bg-primary);
    z-index: 3;
    box-sizing: border-box;
    line-height: 1;
    padding: 0 5px;
    -webkit-text-fill-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

.number-bubble {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.assets-tab-content { display: none; }
.assets-tab-content.active { display: block; }

.request-builder-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: #fff;
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 50%;
    line-height: 1;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    font-family: 'Outfit', system-ui, sans-serif;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    pointer-events: none;
}

.notif-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
    pointer-events: auto;
}

.notif-dropdown-header {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-dropdown-list {
    overflow: hidden;
}

.notif-dropdown-item {
    padding: 0.65rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.notif-dropdown-item:hover {
    background: var(--bg-tertiary);
}

.notif-dropdown-item:last-child {
    border-bottom: none;
}

.notif-dropdown-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.notif-dropdown-text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.notif-dropdown-time {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.notif-dropdown-item.unread .notif-dropdown-text {
    font-weight: 600;
}

.notif-dropdown-item.unread::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0.85rem;
    width: 6px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 50%;
}

.notif-dropdown-footer {
    padding: 0.6rem 1rem;
    text-align: left;
    background: var(--bg-tertiary);
    border-top: var(--border-width) var(--border-style) var(--border-color);
}

.notif-dropdown-footer a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-decoration: none;
    cursor: pointer;
}

.notif-dropdown-footer a:hover {
    text-decoration: underline;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    margin-bottom: 0.5rem;
    transition: all var(--transition-speed) var(--transition-ease);
}

.quick-action-item:hover {
    border-color: var(--accent-primary);
}

.quick-action-item.dragging {
    opacity: 0.4;
}

.quick-action-item.drag-over {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.quick-action-grip {
    cursor: grab;
    color: var(--text-muted);
    font-size: 1.1rem;
    letter-spacing: 2px;
    user-select: none;
    flex-shrink: 0;
}

.quick-action-grip:active {
    cursor: grabbing;
}

.quick-action-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.quick-action-info {
    flex: 1;
    min-width: 0;
}

.quick-action-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.quick-action-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.quick-action-target {
    font-size: 0.75rem;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-small);
    flex-shrink: 0;
}

.quick-action-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 46px;
    padding: 0 0.625rem 0 0;
    background: var(--glass-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    max-width: 260px;
    position: relative;
}

.user-profile:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 20%, transparent);
}

.user-profile[aria-expanded="true"] {
    transform: none;
}

.user-avatar {
    width: 46px;
    min-width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: var(--radius-element) 0 0 var(--radius-element);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Content Area */
.content {
    padding: 0;
}

.view-content {
    padding: 3rem 2rem 3rem 3rem;
    animation: fadeIn 0.5s ease backwards;
}

.page-header {
    margin-bottom: 2.125rem;
    animation: slideDown 0.6s ease;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

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

.page-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.page-subtitle {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* Dashboard Attention Card */
/* Daily Feed */
.daily-feed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.daily-feed-item {
    position: relative;
    display: flex;
    align-items: stretch;
    border-radius: var(--radius-element);
    overflow: hidden;
    background: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    transition: all var(--transition-speed) var(--transition-ease);
}

.daily-feed-item:hover {
    background: var(--glass-bg);
}
.daily-feed-linked { cursor: pointer; }
.daily-feed-linked .daily-feed-text { text-decoration: none; }
.daily-feed-linked:hover .daily-feed-text { color: var(--accent-primary); }

.daily-feed-accent {
    width: 4px;
    flex-shrink: 0;
}

.daily-feed-item[data-sentiment="success"] .daily-feed-accent { background: var(--success); }
.daily-feed-item[data-sentiment="info"] .daily-feed-accent { background: var(--accent-primary); }
.daily-feed-item[data-sentiment="warning"] .daily-feed-accent { background: var(--warning); }
.daily-feed-item[data-sentiment="danger"] .daily-feed-accent { background: var(--danger); }

.daily-feed-content {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    flex: 1;
    min-width: 0;
}

.daily-feed-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.daily-feed-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daily-feed-close {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
}
.daily-feed-close:hover {
    transform: translateY(-50%);
}

@media (max-width: 1024px) {
    .daily-feed-grid {
        grid-template-columns: 1fr;
    }
}

/* Upcoming Training Grid — 4 cols (collapsed) / 3 cols (rail open), 2 rows */
.upcoming-training-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.main-container.rail-open .upcoming-training-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast-notification {
    position: fixed;
    top: 13px;
    right: 15px;
    width: 300px;
    box-sizing: border-box;
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: var(--radius-element);
    padding: 0.75rem 1.25rem;
    z-index: 9999;
    font-size: 0.8125rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: toastDropIn 0.3s ease;
}
.toast-notification .toast-icon {
    margin-right: 0.5rem;
}
.toast-notification .toast-icon.success { color: var(--success, #00ff88); }
.toast-notification .toast-icon.warning { color: var(--warning, #fbbf24); }
.toast-notification .toast-icon.info { color: var(--accent-primary); }

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

.description-bar {
    background: var(--card-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.description-bar > span:first-child {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.description-bar-title {
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 0.25rem;
}

.description-bar-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.stat-card {
    background: var(--element-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 1.25rem;
    row-gap: 0;
    align-items: center;
    overflow: hidden;
    transition: all var(--transition-speed) var(--transition-ease);
    cursor: pointer;
    box-shadow: none;
}

.stat-card::before {
    display: none;
}

.stat-card:hover {
    background: var(--glass-bg);
    box-shadow: none;
}

.stat-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-element);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

.stat-icon.primary {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 20%, transparent), color-mix(in srgb, var(--accent-primary) 5%, transparent));
    color: var(--accent-primary);
}

.stat-icon.success {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.05));
    color: var(--success);
}

.stat-icon.warning {
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.2), rgba(255, 184, 0, 0.05));
    color: var(--warning);
}

.stat-icon.danger {
    background: linear-gradient(135deg, rgba(255, 51, 102, 0.2), rgba(255, 51, 102, 0.05));
    color: var(--danger);
}

.stat-trend {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-small);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.stat-trend.up {
    background: rgba(0, 255, 136, 0.15);
    color: var(--success);
}

.stat-trend.down {
    background: rgba(255, 51, 102, 0.15);
    color: var(--danger);
}

.stat-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0;
    text-transform: uppercase;
    grid-column: 2;
    letter-spacing: 0.08em;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0;
    grid-column: 2;
    font-family: 'JetBrains Mono', monospace;
}

.stat-change {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    grid-column: 2;
}

/* Data Table Card */
.data-card {
    background: var(--glass-bg-medium);
    backdrop-filter: blur(var(--glass-blur-medium)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur-medium)) saturate(180%);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 2.25rem;
    box-shadow: var(--shadow-xs);
    transition: transform var(--transition-speed) var(--transition-snappy),
                box-shadow var(--transition-speed) var(--transition-smooth),
                background var(--transition-speed) var(--transition-ease);
}
.data-card:hover {
    box-shadow: var(--shadow-sm);
}
.dash-card-uniform {
    min-height: 200px;
}
/* ── Empty Preview Mode ──────────────────────────────────────────── */
html[data-empty-preview] .data-table tbody tr,
html[data-empty-preview] .dash-widget-item,
html[data-empty-preview] .stats-grid .stat-value,
html[data-empty-preview] .stats-grid .stat-change,
html[data-empty-preview] .stats-grid .stat-trend,
html[data-empty-preview] #todaysTasksList > *,
html[data-empty-preview] #atRiskClientsWidget > *,
html[data-empty-preview] #recentActivityWidget > *,
html[data-empty-preview] #docsExpiringWidget > *,
html[data-empty-preview] .kanban-column .kanban-card,
html[data-empty-preview] .notification-items > * {
    display: none !important;
}
html[data-empty-preview] [id$="Empty"],
html[data-empty-preview] .empty-state-msg {
    display: block !important;
}
html[data-empty-preview] .table-footer-info::after {
    content: '0 of 0';
}
html[data-empty-preview] .table-footer-info {
    font-size: 0;
}
html[data-empty-preview] .table-footer-info::after {
    font-size: 0.9375rem;
}

/* Empty state cards retain normal layout */

.data-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 50%, transparent);
}
/* Cards with header + description: icon spans both lines */
.data-card:has(> .data-card-header + p),
.data-card:has(> .data-card-header + .data-card-description) {
    position: relative;
}
.data-card-header:has(+ p),
.data-card-header:has(+ .data-card-description) {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    align-items: flex-start;
    max-height: 1.75rem;
    overflow: visible;
}
.data-card-header:has(+ p) .data-card-title,
.data-card-header:has(+ .data-card-description) .data-card-title {
    padding-left: calc(40px + 0.75rem);
    padding-top: 0.125rem;
}
.data-card-header:has(+ p) .data-card-title-icon,
.data-card-header:has(+ .data-card-description) .data-card-title-icon {
    position: absolute;
    left: 2.25rem;
    top: 2.25rem;
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
}
.data-card-header + p,
.data-card-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    padding-left: calc(40px + 0.75rem);
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 50%, transparent);
}

[data-border-active="true"] .data-card-header {
    border-bottom: none;
    padding-bottom: 0;
}

.data-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.data-card-title-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--radius-small);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 20%, transparent), color-mix(in srgb, var(--accent-tertiary) 20%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: var(--accent-primary);
}

/* ========================================
   STANDARDIZED BUTTON SYSTEM
   5 sizes: XS, SM, MD (default), LG, XL
   ======================================== */

.btn {
    /* Default = MD (Medium) */
    padding: 0.625rem 1.75rem;
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    height: auto;
    min-height: 2.875rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    white-space: nowrap;
}

/* Ensure icon spacing and color inheritance for all direct children */
.btn > * {
    display: inline-flex;
    align-items: center;
    color: inherit;
}

/* Consistent icon spacing for button spans */
.btn > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-secondary {
    background: var(--glass-bg);
    color: var(--text-primary);
}

[data-theme="light"] .btn-secondary {
    background: #e2e8f0;
}

[data-theme="light"] .modal-header {
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
}

[data-theme="light"] .modal-body,
[data-theme="light"] .modal-footer {
    background: transparent;
}

[data-theme="light"] .data-table-container {
    background: #f8fafc;
}

[data-theme="light"] .data-table thead {
    background: #e2e8f0;
    border-bottom: 2px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

[data-theme="light"] .table-footer {
    background: #e2e8f0;
}

/* Light mode: Dropdown header & footer accent */
[data-theme="light"] .notif-dropdown-header {
    background: var(--accent-primary);
    color: #fff;
}
[data-theme="light"] .notif-dropdown-footer {
    background: var(--accent-primary);
}
[data-theme="light"] .notif-dropdown-footer a {
    color: #fff;
}
[data-theme="light"] .notif-dropdown-header .notif-dropdown-header-meta {
    color: rgba(255, 255, 255, 0.7) !important;
}
[data-theme="light"] .notif-dropdown-footer a:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Light mode: Login page fixes */
[data-theme="light"] .login-bg {
    background: #f0f4f8;
}
[data-theme="light"] .login-bg-grid {
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}
[data-theme="light"] .login-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .login-card .login-input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
}
[data-theme="light"] .login-card .login-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .login-sso-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
}
[data-theme="light"] .login-sso-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .login-slogan {
    color: var(--accent-primary);
}
[data-theme="light"] .login-logo {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
}

/* Light mode: Event date badge */
[data-theme="light"] .event-date-badge .edb-month {
    color: #fff;
}

/* Light mode: Analytics bar colors */
[data-theme="light"] .analytics-bar-positive { color: var(--success); }
[data-theme="light"] .analytics-bar-neutral { color: var(--text-muted); }

/* Light mode: Recommendation/alert icon colors */
[data-theme="light"] .rec-icon-success { color: var(--success); }
[data-theme="light"] .rec-icon-warning { color: var(--warning); }
[data-theme="light"] .rec-icon-danger { color: var(--danger); }
[data-theme="light"] .rec-icon-info { color: var(--accent-primary); }
[data-theme="light"] .rec-icon-accent { color: var(--accent-tertiary); }

/* Utility: theme-aware step indicator text (replaces hardcoded #000) */
.step-indicator-active-text { color: var(--text-primary); }

/* Utility: theme-aware copy feedback */
.copy-feedback { background: var(--accent-primary); color: #fff; }

.btn-secondary:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 20%, transparent);
}

.btn-secondary.active {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

/* Button Sizes */

/* XS - Extra Small: Compact actions, inline buttons */
.btn-xs {
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    border-radius: var(--radius-small);
    gap: 0.375rem;
    font-weight: 500;
    min-height: 1.875rem;
}

/* SM - Small: Table actions, secondary controls */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-element);
    gap: 0.4375rem;
    font-weight: 600;
    min-height: 2.25rem;
}

/* MD - Medium (default): Standard buttons */
/* Already defined in .btn base class */

/* LG - Large: Primary CTAs, important actions */
.btn-lg {
    padding: 1.125rem 2.25rem;
    font-size: 1.0625rem;
    border-radius: var(--radius-element);
    gap: 0.625rem;
    font-weight: 700;
    min-height: 3.5rem;
}

/* XL - Extra Large: Hero CTAs, major actions */
.btn-xl {
    padding: 1.375rem 2.75rem;
    font-size: 1.25rem;
    border-radius: var(--radius-element);
    gap: 0.75rem;
    font-weight: 700;
    min-height: 4rem;
}

/* 2XS - Micro: Tiny inline controls, tags */
.btn-2xs {
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    border-radius: var(--radius-small);
    gap: 0.25rem;
    font-weight: 500;
    min-height: 1.5rem;
}

/* Button utility classes */
.btn-block { width: 100%; justify-content: center; }
.btn-danger-text { color: var(--danger); }
.btn-danger-text:hover { color: #fff; background: var(--danger); }
.btn-flex-1 { flex: 1; }
.btn-nowrap { white-space: nowrap; }
.btn-unstyled { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: inherit; }
.btn-icon-square { padding: 0; min-width: 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon-square-sm { padding: 0; min-width: 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; border: none; color: var(--text-muted); }
.btn-circle { border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; }
.btn-circle-md { width: 44px; height: 44px; font-size: 1.25rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.ml-auto { margin-left: auto; }

/* Universal button styling for buttons without specific classes */
button:not(:is([class*="btn"], [class*="close"], [class*="toggle"], [class*="tab"], [class*="widget"])) {
    padding: 1rem 2rem;
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--glass-bg);
    color: var(--text-primary);
    backdrop-filter: blur(20px);
    font-family: inherit;
}

button:not(:is([class*="btn"], [class*="close"], [class*="toggle"], [class*="tab"], [class*="widget"])):hover {
    background: color-mix(in srgb, var(--accent-tertiary) 20%, transparent);
    border-color: var(--accent-tertiary);
}

.filter-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    align-items: center;
}

.filter-bar input,
.filter-bar select,
.filter-bar .filter-select,
.filter-bar .filter-input,
.filter-bar .btn,
.filter-bar button,
.filter-bar .multiselect-dropdown .multiselect-trigger {
    height: 2.875rem;
    box-sizing: border-box;
}

.filter-bar .btn-secondary {
    background: var(--bg-tertiary);
    align-self: stretch;
    flex-shrink: 0;
    white-space: nowrap;
}

.filter-input {
    flex: 1 1 200px;
    min-width: 160px;
    padding: 0.625rem 1rem;
    height: 2.875rem;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    color: var(--text-primary);
    font-size: 0.9375rem;
    transition: all var(--transition-speed) var(--transition-ease);
    backdrop-filter: blur(10px);
}

.filter-input:focus {
    outline: none;
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.filter-select {
    padding: 0.625rem 1rem;
    height: 2.875rem;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    backdrop-filter: blur(10px);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

.filter-select:focus {
    outline: none;
    background-color: var(--bg-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

/* Custom Multi-Select Dropdown */
.multiselect-dropdown {
    position: relative;
    display: inline-block;
    min-width: 140px;
    flex: 0 1 auto;
    overflow: visible;
}

.multiselect-dropdown-toggle {
    padding: 0.625rem 1rem;
    height: 2.875rem;
    box-sizing: border-box;
    background: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.multiselect-dropdown-toggle:hover {
    background: var(--bg-secondary);
}

.multiselect-dropdown.open .multiselect-dropdown-toggle {
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.multiselect-dropdown-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multiselect-dropdown-arrow {
    margin-left: 0.75rem;
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.multiselect-dropdown.open .multiselect-dropdown-arrow {
    transform: rotate(180deg);
}

.multiselect-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: max(100%, 180px);
    width: max-content;
    max-width: none;
    background: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    padding: 0.5rem;
    display: none;
    flex-direction: column;
    gap: 0.125rem;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.multiselect-dropdown.open .multiselect-dropdown-menu {
    display: flex;
}

.multiselect-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-tertiary);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
    margin-bottom: 0.25rem;
}
.multiselect-ctrl-btn {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-primary);
    cursor: pointer;
    transition: opacity 0.15s;
}
.multiselect-ctrl-btn:hover { opacity: 0.7; }
.multiselect-ctrl-divider {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-element);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    user-select: none;
}

.multiselect-option:hover {
    background: var(--bg-tertiary);
}

.multiselect-option input[type="checkbox"] {
    position: relative;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-small);
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
}

.multiselect-option input[type="checkbox"]:hover {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
}

.multiselect-option input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.multiselect-option input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.multiselect-option span {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.multiselect-option input[type="checkbox"]:checked + span {
    font-weight: 600;
    color: var(--accent-primary);
}

.filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    font-size: 0.875rem;
    color: var(--text-secondary);
    user-select: none;
}

.filter-checkbox:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.filter-checkbox input[type="checkbox"]:checked + span {
    color: var(--text-primary);
    font-weight: 600;
}

/* Platform Checkbox for Social Media Selection */
.platform-checkbox {
    position: relative;
    cursor: pointer;
}

.platform-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.platform-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    transition: all var(--transition-speed) var(--transition-ease);
    padding: 0.75rem;
    text-align: center;
}

.platform-checkbox:hover .platform-box {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.platform-checkbox input[type="checkbox"]:checked + .platform-box {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 15%, transparent), color-mix(in srgb, var(--accent-tertiary) 15%, transparent));
    border-color: var(--accent-primary);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.platform-checkbox input[type="checkbox"]:disabled + .platform-box {
    opacity: 0.5;
    cursor: not-allowed;
}

.platform-checkbox input[type="checkbox"]:disabled:hover + .platform-box {
    transform: none;
    border-color: var(--glass-border);
    box-shadow: none;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    transition: all var(--transition-speed) var(--transition-ease);
    border-radius: var(--radius-card);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-muted);
    transition: all var(--transition-speed) var(--transition-ease);
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
    background-color: white;
}

.toggle-switch:hover .toggle-slider {
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent-tertiary) 30%, transparent);
}


/* --- Theme/palette option cards in Appearance --- */
/* Base theme-option card styling */
.theme-option {
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
}

.theme-option:hover {
    opacity: 0.85;
}

.theme-option.selected {
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

/* Modern Data Table */
.data-table-container {
    overflow: hidden;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-bottom: none;
}
.data-table-container:last-child {
    border-radius: var(--radius-card);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

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

.data-table thead {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
}

.data-table thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-card);
}

.data-table thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-card);
}

.data-table th {
    text-align: left;
    padding: 0.75rem 1.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

.sortable-table th {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable-table th:hover {
    color: var(--accent-primary);
}

.sort-arrow {
    font-size: 0.75rem;
    margin-left: 0.5rem;
    opacity: 0.5;
    transition: all var(--transition-speed) var(--transition-ease);
}

.sortable-table th:hover .sort-arrow {
    opacity: 1;
    color: var(--accent-primary);
}

.data-table tbody tr {
    transition: background-color var(--transition-speed) var(--transition-ease);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}
.data-table tbody tr:last-child {
    border-bottom: none;
}
.data-table tbody tr.empty-table-row {
    border-bottom: none;
}
.data-table tbody tr.empty-table-row:hover {
    background: transparent;
    box-shadow: none;
}

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

.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-primary) 5%, var(--glass-bg));
    box-shadow: inset 3px 0 0 var(--accent-primary);
}

.data-table td {
    padding: var(--table-cell-padding, 0.75rem 1.25rem);
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

/* Table Density: Comfortable (default) */
:root { --table-cell-padding: 0.75rem 1.25rem; }
/* Table Density: Compact */
[data-table-density="compact"] { --table-cell-padding: 0.4375rem 1.25rem; }
/* Table Density: Spacious */
[data-table-density="spacious"] { --table-cell-padding: 1rem 1.25rem; }

.client-name {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.client-avatar {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-small);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
}

.agent-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-tertiary), var(--accent-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.badge {
    padding: calc(0.2rem + 2px) calc(0.4rem + 2px) calc(0.2rem + 1px);
    border-radius: var(--radius-small);
    font-size: 0.625rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    line-height: 1;
    color: #fff;
    border: none;
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

.badge-aca {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
}

.badge-medicare {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.badge-life {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.badge-active {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.badge-info {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.badge-warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.badge-danger {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.badge-secondary {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

.badge-accent {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}
.badge-orange {
    background: linear-gradient(135deg, #f97316, #fb923c);
}
.badge-lg {
    font-size: 0.875rem;
    font-weight: 700;
}
.badge-mono {
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    min-width: 48px;
    text-align: center;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Universal Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}
.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    opacity: 0.4;
}
.empty-state-title {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.empty-state-message {
    font-size: var(--font-sm);
    color: var(--text-muted);
    max-width: 320px;
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
}
.empty-state-cta {
    margin-top: var(--space-2);
}

/* Modal Overlay (used by template preview) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(var(--modal-blur)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--modal-blur)) saturate(120%);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.25s var(--transition-smooth);
}

.modal-overlay .modal {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    background: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.4s ease;
    z-index: auto;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--modal-blur));
    -webkit-backdrop-filter: blur(var(--modal-blur));
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.4s ease;
    position: relative;
    will-change: transform, opacity;
}


@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Style: Frosted Glass */
[data-modal-style="frosted"] .modal {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
}
[data-modal-style="frosted"] .modal-content {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-modal-style="frosted"] .modal-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-modal-style="frosted"] .modal-footer {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
[data-modal-style="frosted"] .modal-overlay .modal {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="light"][data-modal-style="frosted"] .modal-overlay .modal {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="light"][data-modal-style="frosted"] .modal-content {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="light"][data-modal-style="frosted"] .modal-header {
    background: rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="light"][data-modal-style="frosted"] .modal-footer {
    background: rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Modal Style: Minimal */
[data-modal-style="minimal"] .modal {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
}
[data-modal-style="minimal"] .modal-content {
    background: var(--bg-secondary);
    backdrop-filter: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-small);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-modal-style="minimal"] .modal-header {
    background: transparent;
    border-bottom: 1px solid var(--border-subtle);
}
[data-modal-style="minimal"] .modal-footer {
    background: transparent;
    border-top: 1px solid var(--border-subtle);
}
[data-modal-style="minimal"] .modal-overlay {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
}
[data-modal-style="minimal"] .modal-overlay .modal {
    background: var(--bg-secondary);
    backdrop-filter: none;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Modal Style: Frosted — Command Palette */
[data-modal-style="frosted"] .command-palette-backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
}
[data-modal-style="frosted"] .command-palette {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="light"][data-modal-style="frosted"] .command-palette {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Modal Style: Minimal — Command Palette */
[data-modal-style="minimal"] .command-palette-backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: none;
}
[data-modal-style="minimal"] .command-palette {
    background: var(--bg-secondary);
    backdrop-filter: none;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-small);
}

/* Modal Style: Frosted — Confirm Dialog */
[data-modal-style="frosted"] .confirm-modal-content {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
[data-theme="light"][data-modal-style="frosted"] .confirm-modal-content {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-modal-style="minimal"] .confirm-modal-content {
    background: var(--bg-secondary);
    backdrop-filter: none;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Modal Style: Elevated — deep shadow, floating appearance */
[data-modal-style="elevated"] .modal { background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(var(--modal-blur)); -webkit-backdrop-filter: blur(var(--modal-blur)); }
[data-modal-style="elevated"] .modal-content { background: var(--card-bg); border: none; border-radius: var(--radius-card); box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); }
[data-modal-style="elevated"] .modal-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.06); }
[data-modal-style="elevated"] .modal-footer { background: transparent; border-top: 1px solid rgba(255,255,255,0.06); }
[data-modal-style="elevated"] .modal-overlay .modal { background: var(--card-bg); border: none; border-radius: var(--radius-card); box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); }
[data-modal-style="elevated"] .command-palette-backdrop { background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(var(--modal-blur)); -webkit-backdrop-filter: blur(var(--modal-blur)); }
[data-modal-style="elevated"] .command-palette { background: var(--card-bg); border: none; border-radius: var(--radius-card); box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); }
[data-modal-style="elevated"] .confirm-modal-content { background: var(--card-bg); border: none; border-radius: var(--radius-card); box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
[data-theme="light"][data-modal-style="elevated"] .modal { background: rgba(0, 0, 0, 0.1); }
[data-theme="light"][data-modal-style="elevated"] .modal-content { box-shadow: 0 25px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); }

/* Modal Style: Neon Glow — accent-colored border glow */
[data-modal-style="neon"] .modal { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(var(--modal-blur)); -webkit-backdrop-filter: blur(var(--modal-blur)); }
[data-modal-style="neon"] .modal-content { background: rgba(10,10,20,0.95); border: 1px solid var(--accent-primary); border-radius: var(--radius-small); box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent), 0 0 60px color-mix(in srgb, var(--accent-primary) 10%, transparent), inset 0 1px 0 rgba(255,255,255,0.05); }
[data-modal-style="neon"] .modal-header { background: rgba(255,255,255,0.02); border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent); }
[data-modal-style="neon"] .modal-footer { background: rgba(255,255,255,0.02); border-top: 1px solid color-mix(in srgb, var(--accent-primary) 30%, transparent); }
[data-modal-style="neon"] .modal-overlay .modal { background: rgba(10,10,20,0.95); border: 1px solid var(--accent-primary); box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent); }
[data-modal-style="neon"] .command-palette-backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(var(--modal-blur)); -webkit-backdrop-filter: blur(var(--modal-blur)); }
[data-modal-style="neon"] .command-palette { background: rgba(10,10,20,0.95); border: 1px solid var(--accent-primary); box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent); }
[data-modal-style="neon"] .confirm-modal-content { background: rgba(10,10,20,0.95); border: 1px solid var(--accent-primary); box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent); }
[data-theme="light"][data-modal-style="neon"] .modal-content { background: rgba(255,255,255,0.97); border: 1px solid var(--accent-primary); box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 20%, transparent); }

/* Modal Style: Soft — rounded corners, gentle shadows */
[data-modal-style="soft"] .modal { background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(var(--modal-blur)); -webkit-backdrop-filter: blur(var(--modal-blur)); }
[data-modal-style="soft"] .modal-content { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-card); box-shadow: 0 4px 24px rgba(0,0,0,0.2); }
[data-modal-style="soft"] .modal-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-card) var(--radius-card) 0 0; }
[data-modal-style="soft"] .modal-footer { background: transparent; border-top: 1px solid rgba(255,255,255,0.06); border-radius: 0 0 var(--radius-card) var(--radius-card); }
[data-modal-style="soft"] .modal-overlay .modal { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-card); box-shadow: 0 4px 24px rgba(0,0,0,0.2); }
[data-modal-style="soft"] .command-palette-backdrop { background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(var(--modal-blur)); -webkit-backdrop-filter: blur(var(--modal-blur)); }
[data-modal-style="soft"] .command-palette { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-card); box-shadow: 0 4px 24px rgba(0,0,0,0.2); }
[data-modal-style="soft"] .confirm-modal-content { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-card); box-shadow: 0 4px 24px rgba(0,0,0,0.2); }
[data-theme="light"][data-modal-style="soft"] .modal { background: rgba(0, 0, 0, 0.08); }
[data-theme="light"][data-modal-style="soft"] .modal-content { border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 24px rgba(0,0,0,0.08); }

/* Modal Style: Dimmed — very dark overlay, subtle card */
[data-modal-style="dimmed"] .modal { background: rgba(0, 0, 0, 0.75); backdrop-filter: none; }
[data-modal-style="dimmed"] .modal-content { background: var(--bg-primary); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--radius-small); box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
[data-modal-style="dimmed"] .modal-header { background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.04); }
[data-modal-style="dimmed"] .modal-footer { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.04); }
[data-modal-style="dimmed"] .modal-overlay .modal { background: var(--bg-primary); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
[data-modal-style="dimmed"] .command-palette-backdrop { background: rgba(0, 0, 0, 0.75); }
[data-modal-style="dimmed"] .command-palette { background: var(--bg-primary); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
[data-modal-style="dimmed"] .confirm-modal-content { background: var(--bg-primary); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
[data-theme="light"][data-modal-style="dimmed"] .modal { background: rgba(0, 0, 0, 0.5); }
[data-theme="light"][data-modal-style="dimmed"] .modal-content { background: var(--bg-primary); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }

/* Modal Style: Bordered — bold accent border, no shadow */
[data-modal-style="bordered"] .modal { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(var(--modal-blur)); -webkit-backdrop-filter: blur(var(--modal-blur)); }
[data-modal-style="bordered"] .modal-content { background: var(--card-bg); border: 2px solid var(--accent-primary); border-radius: var(--radius-small); box-shadow: none; }
[data-modal-style="bordered"] .modal-header { background: color-mix(in srgb, var(--accent-primary) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent); }
[data-modal-style="bordered"] .modal-footer { background: color-mix(in srgb, var(--accent-primary) 5%, transparent); border-top: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent); }
[data-modal-style="bordered"] .modal-overlay .modal { background: var(--card-bg); border: 2px solid var(--accent-primary); box-shadow: none; }
[data-modal-style="bordered"] .command-palette-backdrop { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(var(--modal-blur)); -webkit-backdrop-filter: blur(var(--modal-blur)); }
[data-modal-style="bordered"] .command-palette { background: var(--card-bg); border: 2px solid var(--accent-primary); box-shadow: none; }
[data-modal-style="bordered"] .confirm-modal-content { background: var(--card-bg); border: 2px solid var(--accent-primary); box-shadow: none; }
[data-theme="light"][data-modal-style="bordered"] .modal { background: rgba(0, 0, 0, 0.15); }

/* Modal Style: Spotlight — very dark overlay, card glows */
[data-modal-style="spotlight"] .modal { background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.92) 50%, rgba(0,0,0,0.97) 100%); backdrop-filter: none; }
[data-modal-style="spotlight"] .modal-content { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-element); box-shadow: 0 0 80px rgba(255,255,255,0.05), 0 8px 40px rgba(0,0,0,0.4); }
[data-modal-style="spotlight"] .modal-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.06); }
[data-modal-style="spotlight"] .modal-footer { background: transparent; border-top: 1px solid rgba(255,255,255,0.06); }
[data-modal-style="spotlight"] .modal-overlay .modal { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 80px rgba(255,255,255,0.05), 0 8px 40px rgba(0,0,0,0.4); }
[data-modal-style="spotlight"] .command-palette-backdrop { background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.92) 50%, rgba(0,0,0,0.97) 100%); }
[data-modal-style="spotlight"] .command-palette { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 80px rgba(255,255,255,0.05); }
[data-modal-style="spotlight"] .confirm-modal-content { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 80px rgba(255,255,255,0.05); }
[data-theme="light"][data-modal-style="spotlight"] .modal { background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.82) 100%); }
[data-theme="light"][data-modal-style="spotlight"] .modal-content { border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 0 80px rgba(0,0,0,0.08), 0 8px 40px rgba(0,0,0,0.12); }

[data-modal-style="cinema"] .modal { background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 25%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.9) 100%); backdrop-filter: blur(4px); }
[data-modal-style="cinema"] .modal-content { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-card); box-shadow: 0 8px 60px rgba(0,0,0,0.5), 0 0 30px rgba(var(--accent-primary-rgb, 99,102,241), 0.08); }
[data-modal-style="cinema"] .modal-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.06); }
[data-modal-style="cinema"] .modal-footer { background: transparent; border-top: 1px solid rgba(255,255,255,0.06); }
[data-modal-style="cinema"] .modal-overlay .modal { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 60px rgba(0,0,0,0.5); }
[data-modal-style="cinema"] .command-palette-backdrop { background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.45) 25%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0.9) 100%); }
[data-modal-style="cinema"] .command-palette { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 60px rgba(0,0,0,0.5); }
[data-modal-style="cinema"] .confirm-modal-content { background: var(--card-bg); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 60px rgba(0,0,0,0.5); }
[data-theme="light"][data-modal-style="cinema"] .modal { background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.7) 100%); }
[data-theme="light"][data-modal-style="cinema"] .modal-content { border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 8px 60px rgba(0,0,0,0.15); }

.modal-header {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.close-btn,
.insights-close,
.close-x-icon,
.slide-over-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-element);
    background: rgba(255, 51, 102, 0.12);
    border: none;
    cursor: pointer;
    color: var(--danger);
    transition: all var(--transition-speed) var(--transition-ease);
    font-size: 1.25rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.close-btn span, .close-btn svg,
.insights-close span, .insights-close svg,
.close-x-icon span, .close-x-icon svg,
.slide-over-close span, .slide-over-close svg {
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1;
}

.close-btn:hover,
.insights-close:hover,
.close-x-icon:hover,
.slide-over-close:hover {
    background: var(--danger);
    color: #fff;
}

.modal-body {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    flex: 1;
}

.modal-body .form-group {
    margin-bottom: 1rem;
}

.modal-body .form-group:last-child {
    margin-bottom: 0;
    min-height: 0;
}

.modal-footer {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: transparent;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* Ticket Screenshot Dropzone */
.ticket-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-element);
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8125rem;
    transition: all var(--transition-speed) var(--transition-ease);
}
.ticket-dropzone:hover,
.ticket-dropzone.dragover {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb, 0, 255, 255), 0.03);
    color: var(--text-secondary);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.form-input,
.form-select,
.form-textarea {
    padding: 0.625rem 1rem;
    background: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all var(--transition-speed) var(--transition-ease);
    min-width: 0;
    box-sizing: border-box;
    height: 2.875rem;
}
.form-select {
    height: 2.875rem;
}
.form-textarea {
    resize: vertical;
    min-height: 7.5rem;
    height: auto;
    padding: 0.75rem 1rem;
}

.form-select,
select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

.form-select:hover,
select:hover {
    background-color: var(--bg-secondary);
}

/* Style native select option elements to match multiselect look */
.form-select option,
select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: inherit;
}

.form-select option:checked,
select option:checked {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    font-weight: 600;
}

.form-select option:hover,
select option:hover {
    background: var(--bg-tertiary);
}

/* Filter bar selects match multiselect toggle dimensions */
.filter-bar select,
.filter-bar .filter-select {
    background-color: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    font-size: 0.9375rem;
    color: var(--text-primary);
    padding: 0.625rem 3rem 0.625rem 1rem;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
select:focus,
input:focus,
textarea:focus {
    outline: none;
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

/* Universal form element styling */
input:not(:is([type="checkbox"], [type="radio"], .form-input, .filter-input)),
select:not(:is(.form-select, .filter-select)) {
    padding: 0.625rem 1rem;
    background: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all var(--transition-speed) var(--transition-ease);
    backdrop-filter: blur(10px);
    height: 2.875rem;
    box-sizing: border-box;
}
textarea:not(.form-textarea) {
    padding: 0.875rem 1.25rem;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all var(--transition-speed) var(--transition-ease);
    backdrop-filter: blur(10px);
    resize: vertical;
}

select:not(:is(.form-select, .filter-select)) {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
}

/* Custom dropdown option styling */
select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.5rem;
}

/* Custom Select Dropdown (matching site design) */
.custom-select-wrapper {
    position: relative;
    width: auto;
    display: inline-block;
}

.custom-select-trigger {
    padding: 0.875rem 1.25rem;
    background: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 180px;
    user-select: none;
}

.custom-select-trigger:hover {
    background: var(--bg-secondary);
}

.custom-select-trigger.open {
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.custom-select-arrow {
    width: 12px;
    height: 12px;
    border-left: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
}

.custom-select-trigger.open .custom-select-arrow {
    transform: rotate(135deg);
    margin-top: 2px;
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-element);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    pointer-events: none;
    max-height: 280px;
    overflow-y: auto;
}

.custom-select-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
    pointer-events: auto;
}

.custom-select-option {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--text-primary);
    font-size: 0.875rem;
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

.custom-select-option:last-child {
    border-bottom: none;
}

.custom-select-option:hover {
    background: var(--bg-tertiary);
}

.custom-select-option.selected {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    color: var(--accent-primary);
    font-weight: 600;
}
.filter-bar .custom-select-wrapper {
    min-width: 120px;
}
.filter-bar .custom-select-trigger {
    padding: 0.625rem 1rem;
    min-width: 120px;
}

.section-divider {
    margin: 0.9375rem 0;
    padding-top: 0.9375rem;
    border-top: var(--border-width) var(--border-style) var(--border-color);
}

.section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#settings-appearance .data-card > div[style*="margin-bottom: 2.5rem"] {
    margin-bottom: 3.75rem !important;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-tertiary));
    border-radius: var(--radius-xs);
}

/* Detail View Tabs */
.detail-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: none;
    overflow-x: auto;
    width: fit-content;
    max-width: 100%;
    padding: 0.25rem;
    position: relative;
    background: var(--bg-tertiary);
    border-radius: var(--radius-element);
}

.detail-tab {
    padding: 0.5rem 1.25rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    white-space: nowrap;
    font-family: inherit;
    border-radius: var(--radius-element);
}

.detail-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.detail-tab.active {
    color: #fff;
    background: var(--accent-primary);
    font-weight: 600;
    box-shadow: none;
}

[data-theme="light"] .detail-tab.active {
    background: #1e293b;
}

.detail-tab-content {
    display: none;
}

.detail-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.sub-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: calc(1.25rem + 5px);
    background: var(--bg-tertiary);
    border-radius: var(--radius-element);
    padding: 0.25rem;
    width: fit-content;
}

.sub-tab {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-radius: var(--radius-element);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    white-space: nowrap;
    font-family: inherit;
}

.sub-tab:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.sub-tab.active {
    color: #fff;
    background: var(--accent-primary);
    box-shadow: none;
}

/* Data card with sub-tabs inside — push icon below */
.data-card-has-subtabs > .sub-tabs {
    margin-bottom: calc(0.75rem + 15px);
    background: var(--bg-tertiary);
    border-radius: var(--radius-element);
    padding: 0.25rem;
    width: fit-content;
    animation: none;
}
.data-card-has-subtabs > .sub-tabs .sub-tab {
    border-radius: var(--radius-element);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.info-card {
    background: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    transition: all var(--transition-speed) var(--transition-ease);
}

.info-card:hover {
    background: var(--glass-bg);
}

.info-card.accent-danger { border-left: var(--border-width) solid var(--danger); }
.info-card.accent-success { border-left: var(--border-width) solid var(--success); }
.info-card.accent-warning { border-left: var(--border-width) solid var(--warning); }
.info-card.accent-primary { border-left: var(--border-width) solid var(--accent-primary); }
.info-card.accent-tertiary { border-left: var(--border-width) solid var(--accent-tertiary); }
.info-card.accent-pink { border-left: var(--border-width) solid var(--accent-secondary, #ec4899); }

.info-card-center { text-align: center; padding: 1rem; }
.info-card-compact { padding: 0.75rem 1rem; }
.info-card-stacked { margin-bottom: 0.75rem; }
.info-card-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; margin: 0; padding: 0.75rem; }
.info-card-flex { display: flex; justify-content: space-between; align-items: center; }
.td-bold { font-weight: 600; }

.info-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.625rem;
}

.info-value {
    font-size: 1.125rem;
    color: var(--text-primary);
    font-weight: 600;
}

.family-card {
    background: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all var(--transition-speed) var(--transition-ease);
}

.family-card:hover {
    background: var(--glass-bg);
    border-color: var(--accent-primary);
}

.family-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.family-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.625rem;
    border: var(--border-width) var(--border-style) var(--border-color);
    border-top-style: var(--border-style);
    background: var(--glass-bg);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.table-footer-info {
    font-weight: 500;
}

.table-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-footer-actions button {
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-small);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    height: auto;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.table-footer-actions button:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 20%, var(--bg-tertiary));
    border-color: var(--accent-tertiary);
    color: var(--text-primary);
}

.table-footer-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* Settings Navigation */
.settings-profile-option {
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-tertiary);
}

.settings-profile-option .settings-profile-dot {
    background: transparent;
}

.settings-profile-option:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 5%, transparent);
    border-color: var(--accent-tertiary);
}

.settings-profile-option.active {
    background: color-mix(in srgb, var(--accent-tertiary) 5%, transparent);
    border-color: var(--accent-primary);
}

.settings-profile-option.active .settings-profile-dot {
    background: var(--accent-primary);
}

.settings-nav-item {
    font-size: 0.875rem;
    padding-top: calc(0.75rem - 5px);
    padding-bottom: calc(0.75rem - 5px);
    background: var(--bg-tertiary);
    border-left: 3px solid transparent;
}
.settings-nav-item.active {
    background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-tertiary));
    border-left: 3px solid var(--accent-primary);
}
.settings-nav-item.active > span:last-child {
    color: var(--text-primary);
    font-weight: 600;
}
[data-theme="light"] .settings-nav-item {
    background: #cbd5e1;
    color: #334155;
    border: 1px solid #b0bec5;
}
[data-theme="light"] .settings-nav-item.active {
    background: #3b82f6;
    color: #fff;
    border-color: #2563eb;
}
[data-theme="light"] .settings-nav-item:hover {
    background: #b0bec5;
}

.settings-nav-item > span:first-child {
    font-size: 1.1rem;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-nav-item > span:last-child {
    font-size: 0.875rem;
}

.settings-nav-item:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 5%, transparent);
}

.settings-nav-item:hover span:last-child {
    color: var(--text-primary);
}

.earnings-nav-item:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 5%, transparent);
}

.earnings-nav-item:hover span:last-child {
    color: var(--text-primary);
}

/* Right Rail */
.right-rail {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: row;
    transition: width 0.3s ease;
}

.right-rail-icons {
    width: 35px;
    height: 100vh;
    background: transparent;
    border-left: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 1.5rem;
    gap: 0.25rem;
    z-index: 102;
    flex-shrink: 0;
}

.right-rail-icon {
    width: 31px;
    height: 31px;
    border-radius: var(--radius-small, 6px);
    border: none;
    background: rgba(255,255,255,0.12);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.15s ease;
    position: relative;
    box-shadow: none;
}

.right-rail-icon:hover {
    background: rgba(255,255,255,0.2);
    color: var(--text-primary);
    transform: scale(1.05);
    box-shadow: none;
}

.right-rail-icon.active {
    opacity: 1;
    background: var(--accent-primary);
    color: #fff;
    box-shadow: none;
    transform: none;
}

[data-theme="light"] .right-rail-icon {
    background: #1e293b;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .right-rail-icon:hover {
    background: #334155;
}

[data-theme="light"] .right-rail-icon.active {
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.right-rail-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--danger);
    color: #fff;
    font-size: 0.5rem;
    padding: 0.05rem 0.25rem;
    border-radius: var(--radius-full);
    min-width: 12px;
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
}

.right-rail-panel {
    width: 320px;
    height: 100vh;
    background: var(--bg-secondary);
    backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    transition: width 0.3s ease, opacity 0.2s ease;
    overflow: hidden;
    will-change: width, opacity;
}

.right-rail.collapsed .right-rail-panel {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

.right-rail.collapsed .right-rail-icon {
    opacity: 1;
}

.right-rail.collapsed .right-rail-icon.active {
    opacity: 1;
    box-shadow: none;
    transform: none;
}

.right-rail-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.insights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--bg-secondary);
}

.insights-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.insights-title svg {
    width: 20px;
    height: 20px;
    color: var(--accent-primary);
}


.icon-action-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    transition: color 0.2s;
    flex-shrink: 0;
}

.icon-action-delete:hover {
    color: var(--danger);
}


/* Circle-check icon for task completion */
.task-complete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--success, #10b981);
    transition: all var(--transition-speed) var(--transition-ease);
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-element);
    background: rgba(16, 185, 129, 0.12);
    border: none;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.task-complete-icon:hover {
    background: var(--success, #10b981);
    color: #fff;
}

.insights-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1.25rem;
}
.insights-body::-webkit-scrollbar { display: none; }

.insight-card {
    background: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease;
}

.insight-card:hover {
    background: var(--glass-bg);
}

.insight-card-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.insight-card-label.sentiment-positive {
    color: var(--success);
}

.insight-card-label.sentiment-negative {
    color: var(--danger);
}

.insight-card-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.insight-card-metric {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 0.25rem;
}

.main-container.rail-open {
    margin-right: 360px;
}

.main-container.rail-collapsed {
    margin-right: 40px;
}

.main-container.rail-open .detail-tabs,
.main-container.rail-open .sub-tabs {
    overflow-x: hidden;
}

/* Communications Chat Styles */
.comms-chat-container {
    display: flex;
    flex-direction: column;
    height: 500px;
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-secondary);
}

.comms-channel-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-tertiary);
}

.comms-channel-bar label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.comms-channel-bar select {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-element);
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
}

.comms-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comms-msg {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-card);
    font-size: 0.875rem;
    line-height: 1.5;
    word-wrap: break-word;
}

.comms-msg.sent {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.comms-msg.received {
    align-self: flex-start;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.comms-msg-text {
    margin-bottom: 0.25rem;
}

.comms-msg-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.comms-msg.sent .comms-msg-meta {
    justify-content: flex-end;
    color: rgba(255,255,255,0.7);
}

.comms-msg-channel-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-small);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    color: var(--accent-primary);
}

.comms-msg.sent .comms-msg-channel-badge {
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
}

.comms-read-receipt {
    font-size: 0.75rem;
}

.comms-input-area {
    border-top: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-tertiary);
    padding: 0.75rem 1rem;
}

.comms-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.comms-input-row:last-child {
    margin-bottom: 0;
}

.comms-input-area select {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-element);
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.8125rem;
}

.comms-input-area textarea {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-element);
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: none;
    min-height: 38px;
    max-height: 100px;
    font-family: inherit;
}

.comms-input-area .btn-send {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-element);
    border: var(--border-width) var(--border-style) var(--border-color);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.comms-input-area .btn-send:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.comms-input-area .btn-template {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-element);
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.2s;
}

.comms-input-area .btn-template:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Template Picker */
.template-category {
    margin-bottom: 1.25rem;
}

.template-category h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

.template-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.35rem;
    border-radius: var(--radius-element);
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.2s;
}

.template-btn:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
}

/* AI Chatbot */

.ai-bot-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-bot-avatar svg {
    width: 20px;
    height: 20px;
}

.ai-bot-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
}

.ai-bot-avatar-sm svg {
    width: 18px;
    height: 18px;
}

.ai-msg-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    align-self: flex-start;
    max-width: 85%;
}

.ai-msg-row .comms-msg {
    max-width: 100%;
}


/* Chatbot Dual Tabs */
.chatbot-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Team Chat (inside right rail) */
.team-chat-widget-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    overscroll-behavior: contain;
    padding-left: 20px;
}
.team-chat-widget-body > div[style*="overflow-y"] {
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.team-chat-widget-body > div[style*="overflow-y"]::-webkit-scrollbar { display: none; }
#teamChatWidgetMessages {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#teamChatWidgetMessages::-webkit-scrollbar { display: none; }
.chat-section-header {
    padding: 0.25rem 0.75rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    user-select: none;
}
.chat-section-header:not(:first-child) {
    padding-top: 0.375rem;
}
.chat-section-items {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    opacity: 1;
}

.team-chat-widget-convo-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-tertiary);
}
.team-chat-widget-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.15s;
}
.team-chat-widget-item:hover { background: var(--bg-tertiary); }
.team-chat-widget-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}
.team-chat-widget-item-icon.channel {
    background: var(--glass-bg);
    color: var(--text-muted);
    font-size: 0.8125rem;
}
.team-chat-widget-item-icon.dm {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary)));
    color: #fff;
}
.team-chat-widget-item-name {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.team-chat-widget-item-badge {
    background: var(--danger);
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 0.05rem 0.325rem;
    border-radius: var(--radius-full);
    min-width: 14px;
    text-align: center;
}

.ai-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ai-chatbot-messages::-webkit-scrollbar { display: none; }

.ai-chatbot-input {
    border-top: var(--border-width) var(--border-style) var(--border-color);
    padding: 0.75rem;
    display: flex;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    position: relative;
}

.ai-chatbot-input textarea {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-element);
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: none;
    min-height: 38px;
    max-height: 80px;
    font-family: inherit;
}

.ai-chatbot-input .btn-send {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-element);
    border: var(--border-width) var(--border-style) var(--border-color);
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.ai-chatbot-input .btn-send:hover {
}

.ai-chatbot-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.75rem 1rem;
    align-self: flex-start;
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    border-bottom-left-radius: 4px;
}

.ai-chatbot-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingBounce 1.4s infinite;
}

.ai-chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}


/* Agent Detail Modal */
.agent-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.agent-detail-info-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.agent-detail-info-item span {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .main-container {
        margin-left: 0;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .top-bar {
        padding: 1rem 1.5rem;
        margin-right: 0;
        padding-right: 1.5rem;
    }
    .main-container.rail-collapsed .top-bar {
        margin-right: 0;
        padding-right: 1.5rem;
    }

    .search-bar {
        width: 100%;
    }

    .content {
        padding: 0;
    }

    .view-content {
        padding: 1.5rem;
    }

    .right-rail {
        display: none;
    }

    .main-container {
        margin-right: 0 !important;
    }

    .bulk-action-bar {
        left: 1rem;
        right: 1rem;
    }
}

/* Bulk Actions Bar */
.bulk-action-bar {
    position: fixed;
    bottom: 1.5rem;
    left: 240px;
    right: 40px;
    transform: translateY(100px);
    background: var(--bg-secondary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-element);
    padding: 0.625rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    box-shadow: var(--shadow-lg);
    z-index: 900;
    transition: transform 0.3s ease, right 0.3s ease;
    font-size: 0.8125rem;
    width: fit-content;
    margin: 0 auto;
    pointer-events: none;
}
.bulk-action-bar.visible {
    transform: translateY(0);
    pointer-events: auto;
}
.rail-open .bulk-action-bar {
    right: 360px;
}
[data-sidebar-collapse="true"] .bulk-action-bar {
    left: 60px;
}
.bulk-action-bar .bulk-count {
    font-weight: 600;
    color: var(--accent-primary);
    white-space: nowrap;
}
.bulk-action-bar .btn {
    height: auto;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}
.bulk-action-bar .btn [data-icon] {
    margin-right: 0.25rem;
}
.bulk-actions-group {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.5rem;
    border-right: 1px solid var(--glass-border);
}
.bulk-actions-group.active {
    display: flex;
}
.bulk-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--bg-tertiary) 30%, transparent);
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-tertiary) 50%, transparent);
    border-radius: var(--radius-xs);
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 70%, transparent);
}

/* Universal link styling */
a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: all var(--transition-speed) var(--transition-ease);
}

a:hover {
    color: var(--accent-tertiary);
}

/* Smooth transitions for all interactive elements */
button,
input,
select,
textarea,
.data-card,
.stat-card {
    transition: all var(--transition-speed) var(--transition-ease);
}

/* Dashboard Widget Customization */
.btn-success {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 255, 136, 0.15));
    color: var(--success);
}

.btn-success:hover {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.35), rgba(0, 255, 136, 0.25));
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border: none;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.btn-cancel {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: none;
}
.btn-cancel:hover {
    background: #ef4444;
    color: #fff;
}

/* Confirm Modal (simple yes/no dialogs) */
.confirm-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.confirm-modal.active {
    display: flex;
}

.confirm-modal-content {
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    width: 400px;
    max-width: 90vw;
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.4s ease;
}

.confirm-modal-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.confirm-modal-title {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
}

.confirm-modal-message {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 1.25rem;
}

.confirm-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.btn-info {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 25%, transparent), color-mix(in srgb, var(--accent-primary) 15%, transparent));
    color: var(--accent-primary);
}

.btn-info:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 35%, transparent), color-mix(in srgb, var(--accent-primary) 25%, transparent));
}

.dashboard-widget {
    position: relative;
    margin-bottom: 2rem;
    transition: all var(--transition-speed) var(--transition-ease);
}

.dashboard-widget.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.dashboard-widget.edit-mode {
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius-card);
    padding: 0.5rem;
    padding-bottom: 0;
}
.dashboard-widget.edit-mode > .data-card {
    margin-bottom: 0.5rem;
}

.dashboard-widget.drag-over {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 3%, transparent);
}

#script-upload-zone.drag-over {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
}

.co-widget { position: relative; }

.widget-controls {
    display: flex;
    gap: 0.5rem;
    position: absolute;
    top: -12px;
    right: 12px;
    z-index: 100;
    background: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-small);
    padding: 0.25rem 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.dashboard-widget:hover > .widget-controls,
.dashboard-widget.edit-mode > .widget-controls,
.co-widget:hover > .widget-controls {
    opacity: 1;
    pointer-events: auto;
}

.widget-up-btn,
.widget-down-btn,
.widget-edit-btn,
.widget-delete-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

/* ENHANCED: Larger, more visible arrow buttons */
.widget-up-btn,
.widget-down-btn {
    font-size: 1.375rem;
    padding: 0;
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-small);
    font-weight: 700;
}

.widget-up-btn:hover,
.widget-down-btn:hover {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.widget-edit-btn:hover {
    color: var(--accent-primary);
}

.widget-delete-btn:hover {
    color: var(--danger);
}

.widget-up-btn:disabled,
.widget-down-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.widget-library-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.widget-library-item {
    padding: 1.25rem 1rem;
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    background: var(--bg-tertiary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
}

.widget-library-item:hover {
    background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
}

.widget-library-item.widget-active {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 5%, transparent);
}

.widget-status-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3125rem;
}

.widget-status-remove {
    background: color-mix(in srgb, var(--danger) 20%, transparent);
    color: var(--danger);
}

.widget-status-add {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success);
}

.widget-remove-btn {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--danger) 20%, transparent);
    color: var(--danger);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.widget-remove-btn:hover {
    background: color-mix(in srgb, var(--danger) 30%, transparent);
    transform: scale(1.1);
}

.widget-library-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.widget-library-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.widget-library-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .widget-library-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Floating Audio Player */
.audio-player-float {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    background: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-lg);
    min-width: 400px;
    max-width: 600px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateX(-50%) translateY(100px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.audio-player-float .audio-art {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-small);
    background: linear-gradient(135deg, #1db954, #1ed760);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.audio-player-float .audio-info {
    flex: 1;
    min-width: 0;
}

.audio-player-float .audio-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player-float .audio-time {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.audio-player-float .audio-progress {
    width: 100%;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-xs);
    margin-top: 0.375rem;
    cursor: pointer;
    position: relative;
}

.audio-player-float .audio-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1db954, #1ed760);
    border-radius: var(--radius-xs);
    transition: width 0.3s linear;
}

.audio-player-float .audio-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.audio-player-float .audio-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--glass-bg);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--transition-speed) var(--transition-ease);
}

.audio-player-float .audio-btn:hover {
    background: color-mix(in srgb, var(--accent-tertiary) 15%, transparent);
    border-color: var(--accent-tertiary);
}

.audio-player-float .audio-btn.play-pause {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1db954, #1ed760);
    border: var(--border-width) var(--border-style) var(--border-color);
    color: #fff;
    font-size: 1.125rem;
}

.audio-player-float .audio-btn.play-pause:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(29, 185, 84, 0.4);
}

.audio-player-float .audio-btn.close-btn {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

/* Podcast play button overlay */
.podcast-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: var(--border-width) solid rgba(255, 255, 255, 0.8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all var(--transition-speed) var(--transition-ease);
    opacity: 0;
}

.podcast-card:hover .podcast-play-btn {
    opacity: 1;
}

.podcast-play-btn:hover {
    background: rgba(29, 185, 84, 0.9);
    border-color: #1ed760;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Events Page */
.status-upcoming { background: color-mix(in srgb, var(--accent-primary) 15%, transparent); color: var(--accent-primary); border: var(--border-width) solid color-mix(in srgb, var(--accent-primary) 30%, transparent); }
.status-cancelled { background: rgba(255, 51, 102, 0.15); color: var(--danger); border: var(--border-width) solid rgba(255, 51, 102, 0.3); }

.event-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 0.75rem; }
.event-calendar-header { padding: 0.5rem; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.event-calendar-day { min-height: 70px; padding: 0.4rem; background: var(--bg-secondary); border: var(--border-width) var(--border-style) var(--border-color); border-radius: var(--radius-small); cursor: pointer; transition: all 0.2s; position: relative; }
.event-calendar-day:hover { border-color: var(--accent-primary); }
.event-calendar-day.today { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 5%, transparent); }
.event-calendar-day.other-month { opacity: 0.35; }
.event-calendar-day .day-number { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.event-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin: 1px; }
.event-dot.dot-active { background: var(--success); }
.event-dot.dot-upcoming { background: var(--accent-primary); }
.event-dot.dot-completed { background: var(--text-muted); }

.event-date-badge { width: 56px; min-width: 56px; text-align: center; border-radius: var(--radius-element); overflow: hidden; border: var(--border-width) var(--border-style) var(--border-color); }
.event-date-badge .edb-month { background: var(--accent-primary); color: #fff; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; padding: 0.125rem 0; letter-spacing: 0.5px; }
.event-date-badge .edb-day { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); padding: 0.25rem 0; background: var(--bg-tertiary); }

.checkin-status { padding: 0.5rem 1rem; border-radius: var(--radius-small); font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; }
.checkin-status.not-checked-in { background: rgba(255, 184, 0, 0.1); color: var(--warning); border: var(--border-width) solid rgba(255, 184, 0, 0.3); }
.checkin-status.checked-in { background: rgba(0, 255, 136, 0.1); color: var(--success); border: var(--border-width) solid rgba(0, 255, 136, 0.3); }
.checkin-status.checked-out { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); color: var(--accent-primary); border: var(--border-width) solid color-mix(in srgb, var(--accent-primary) 30%, transparent); }

.analytics-bar-container { background: var(--bg-tertiary); border-radius: var(--radius-small); height: 24px; overflow: hidden; position: relative; }
.analytics-bar { height: 100%; border-radius: var(--radius-small); transition: width 0.6s ease; display: flex; align-items: center; padding-left: 0.5rem; font-size: 0.6875rem; font-weight: 600; color: #fff; min-width: fit-content; }

.ai-image-placeholder { width: 100%; height: 200px; border-radius: var(--radius-element); background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary)); border: 2px dashed var(--glass-border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.875rem; transition: all 0.3s; }
.ai-image-placeholder.generated { border-style: solid; border-color: var(--accent-primary); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 8%, transparent), color-mix(in srgb, var(--accent-tertiary) 8%, transparent)); }

/* Communications & Notifications top-bar sound controls */
.comm-mute-btn { background: none; border: none; cursor: pointer; padding: 3px 5px; border-radius: var(--radius-xs); transition: all 0.2s; line-height: 1; color: var(--text-secondary); display: flex; align-items: center; }
.comm-mute-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }
.comm-mute-btn.muted { opacity: 0.4; }
.comm-mute-btn svg { display: block; }
.sound-toggle { width: 36px; height: 36px; border-radius: var(--radius-element); display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--glass-bg); border: var(--border-width) var(--border-style) var(--border-color); transition: all 0.2s; color: var(--accent-primary); }
.sound-toggle:hover { background: color-mix(in srgb, var(--accent-primary) 10%, transparent); border-color: var(--accent-primary); }
.sound-toggle.muted { color: var(--text-muted); opacity: 0.5; }
.comm-live-badge { display: inline-block; background: var(--success); color: var(--bg-primary); font-size: 0.5625rem; font-weight: 800; padding: 0.0625rem 0.3125rem; border-radius: var(--radius-small); letter-spacing: 0.5px; margin-right: 0.25rem; animation: comm-live-pulse 2s ease-in-out infinite; vertical-align: middle; }
@keyframes comm-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.comm-live-dot { position: relative; }
.comm-live-dot::after { content: ''; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; background: var(--success); border-radius: 50%; border: 1.5px solid var(--bg-secondary); animation: comm-live-pulse 2s ease-in-out infinite; }
#commHubBtn .notification-badge { background: var(--accent-primary); color: #fff; }

/* Advocacy */
.officials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; padding: 1.25rem; }
.official-card { background: var(--glass-bg); border: var(--border-width) var(--border-style) var(--border-color); border-radius: var(--radius-element); padding: 1.25rem; transition: all var(--transition-speed) var(--transition-ease); }
.official-card:hover { border-color: var(--accent-primary); }
.official-contact { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.official-contact.expanded { max-height: 300px; }

/* --- Dynamic icon helper --- */
.dyn-icon {
    display: inline;
    vertical-align: baseline;
    line-height: 1;
}

/* ============================================================
   AUTO-COLLAPSE SIDEBAR
   ============================================================ */

[data-sidebar-collapse="true"] .sidebar {
    width: 60px;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1);
}

[data-sidebar-collapse="true"] .sidebar:hover {
    width: 240px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
}

[data-sidebar-collapse="true"] .main-container {
    margin-left: 60px;
}

[data-sidebar-collapse="true"] .logo {
    padding: 0 0 1rem 0;
    justify-content: center;
}

[data-sidebar-collapse="true"] .logo-mark {
    display: flex;
}

[data-sidebar-collapse="true"] .logo-full {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.2s ease, opacity 0.2s ease;
}

[data-sidebar-collapse="true"] .sidebar:hover .logo {
    padding: 0 2rem 1rem 2rem;
    justify-content: flex-start;
    gap: 0.75rem;
}

[data-sidebar-collapse="true"] .sidebar:hover .logo-full {
    width: auto;
    opacity: 1;
}

[data-sidebar-collapse="true"] .sidebar:hover .logo-text {
    font-size: 1.375rem;
}

[data-sidebar-collapse="true"] .sidebar:hover .logo-subtitle {
    font-size: 0.6875rem;
}

[data-sidebar-collapse="true"] .nav-section {
    padding: 0 0.25rem;
}

[data-sidebar-collapse="true"] .sidebar:hover .nav-section {
    padding: 0 0.875rem;
}

[data-sidebar-collapse="true"] .nav-item {
    justify-content: center;
    padding: 0.5rem;
    margin: 0.125rem 0;
}

[data-sidebar-collapse="true"] .nav-item span:not(.nav-icon) {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.15s ease, width 0.2s ease;
}

[data-sidebar-collapse="true"] .sidebar:hover .nav-item {
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0.75rem;
}

[data-sidebar-collapse="true"] .sidebar:hover .nav-item span:not(.nav-icon) {
    opacity: 1;
    width: auto;
}

[data-sidebar-collapse="true"] .nav-section-title {
    height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: height 0.2s ease, opacity 0.15s ease;
}

[data-sidebar-collapse="true"] .sidebar:hover .nav-section-title {
    height: auto;
    opacity: 1;
    margin-top: 0.5rem;
    padding: 0.25rem 1rem;
}


/* ============================================================
   FLOATING SIDEBAR
   ============================================================ */

[data-sidebar-floating="true"] .sidebar {
    margin: 0.75rem;
    height: calc(100vh - 1.5rem);
    border-radius: var(--radius-card);
    border: var(--border-width) var(--border-style) var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-sidebar-floating="true"] .main-container {
    margin-left: calc(240px + 1.5rem);
}

[data-sidebar-floating="true"] .top-bar {
    left: calc(240px + 1.5rem);
    width: calc(100% - 240px - 1.5rem);
}

[data-sidebar-floating="true"].rail-open .main-container {
    margin-right: calc(320px + 0.75rem);
}

/* ============================================================
   OVERLAY SIDEBAR
   ============================================================ */

[data-sidebar-overlay="true"] .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

[data-sidebar-overlay="true"] .sidebar.overlay-visible {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}

[data-sidebar-overlay="true"] .sidebar-overlay-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

[data-sidebar-overlay="true"] .sidebar-overlay-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

[data-sidebar-overlay="true"] .main-container {
    margin-left: 0;
}

[data-sidebar-overlay="true"] .top-bar {
    left: 0;
    width: 100%;
}

[data-sidebar-overlay="true"] .overlay-menu-btn {
    display: flex;
}

.sidebar-overlay-backdrop {
    display: none;
}

.overlay-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-small);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    flex-shrink: 0;
}

.overlay-menu-btn:hover {
    color: var(--text-primary);
    background: var(--element-bg);
}

/* ============================================================
   TOP NAV SIDEBAR
   ============================================================ */

[data-sidebar-topnav="true"] .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    z-index: 100;
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
    overflow: visible;
}

[data-sidebar-topnav="true"] .sidebar .logo {
    padding: 0.5rem 1rem 0.5rem 1.25rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

[data-sidebar-topnav="true"] .sidebar .logo-subtitle {
    display: none;
}

[data-sidebar-topnav="true"] .sidebar-nav {
    flex-direction: row;
    overflow: visible;
    flex: 1;
    min-height: unset;
    padding: 0;
}

[data-sidebar-topnav="true"] .sidebar-nav > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    flex: 1;
}

[data-sidebar-topnav="true"] .nav-section {
    position: relative;
    margin-bottom: 0 !important;
}

[data-sidebar-topnav="true"] .nav-section-title {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
    border-radius: var(--radius-small);
    transition: background 0.2s;
}

[data-sidebar-topnav="true"] .nav-section-title:hover {
    background: var(--glass-bg);
}

[data-sidebar-topnav="true"] .nav-section-title .nav-collapse-icon {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.625rem;
}

[data-sidebar-topnav="true"] .nav-section-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-md);
    z-index: 200;
    padding: 0.375rem 0;
    backdrop-filter: blur(20px);
}

[data-sidebar-topnav="true"] .nav-section:hover > .nav-section-items,
[data-sidebar-topnav="true"] .nav-section.topnav-open > .nav-section-items {
    display: block;
}

[data-sidebar-topnav="true"] .nav-section-items .nav-item {
    padding: 0.5rem 1rem;
    border-radius: 0;
    margin: 0;
}

[data-sidebar-topnav="true"] .nav-section-items .nav-item:hover {
    background: var(--glass-bg);
}

[data-sidebar-topnav="true"] .main-container {
    margin-left: 0;
    padding-top: 0;
}

[data-sidebar-topnav="true"] .top-bar {
    left: 0;
    width: 100%;
}

/* ============================================================
   FONT & ICON STYLE PICKER CARDS
   ============================================================ */

.font-preview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.font-preview-sample {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.icon-style-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.icon-style-sample {
    font-size: 1.5rem;
    line-height: 1;
}

.icon-style-picker-dimmed {
    opacity: 0.35;
    pointer-events: none;
}

/* Layout mockup previews in settings */
.layout-mockup {
    width: 100%;
    height: 50px;
    border-radius: var(--radius-element);
    background: var(--bg-tertiary);
    border: var(--border-width) var(--border-style) var(--border-color);
    margin-bottom: 0.75rem;
    display: flex;
    overflow: hidden;
}

.layout-mockup-sidenav .lm-sidebar {
    width: 20%;
    background: rgba(var(--accent-primary-rgb, 0, 240, 255), 0.15);
    border-right: var(--border-width) var(--border-style) var(--border-color);
}

.layout-mockup-sidenav .lm-content {
    flex: 1;
}

.layout-mockup-topnav .lm-topbar {
    width: 100%;
    height: 10px;
    background: rgba(var(--accent-primary-rgb, 0, 240, 255), 0.15);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

.layout-mockup-topnav {
    flex-direction: column;
}

.layout-mockup-topnav .lm-content {
    flex: 1;
}

/* ── RTL Support (Arabic) ── */
[dir="rtl"] .sidebar { right: 0; left: auto; }
[dir="rtl"] .main-content { margin-right: 260px; margin-left: 0; }
[dir="rtl"] .sidebar-nav .nav-item { text-align: right; }
[dir="rtl"] .settings-nav-item { border-left: none; border-right: 3px solid transparent; }
[dir="rtl"] .settings-nav-item.active { border-left: none; border-right: 3px solid var(--accent-primary); }
[dir="rtl"] .description-bar { direction: rtl; }
[dir="rtl"] .detail-tabs { direction: rtl; }
[dir="rtl"] .page-title, [dir="rtl"] .page-subtitle { text-align: right; }
[dir="rtl"] .data-card-header { direction: rtl; }
[dir="rtl"] .data-card-header:has(+ p) .data-card-title, [dir="rtl"] .data-card-header:has(+ .data-card-description) .data-card-title { padding-left: 0; padding-right: calc(48px + 0.75rem); }
[dir="rtl"] .data-card-header:has(+ p) .data-card-title-icon, [dir="rtl"] .data-card-header:has(+ .data-card-description) .data-card-title-icon { left: auto; right: 2.25rem; }
[dir="rtl"] .data-card-header + p, [dir="rtl"] .data-card-description { padding-left: 0; padding-right: calc(48px + 0.75rem); }
[dir="rtl"] .right-rail { right: auto; left: 0; }
[dir="rtl"] .nav-icon { margin-left: 0; }

/* Badge tag — readable on dark backgrounds (replaces purple-on-dark badges) */
.badge-tag {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    border: none;
}

/* Language cards base border */
.language-card,
.language-check-card {
    border: var(--border-width) var(--border-style) var(--border-color);
}
.language-card.active {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-tertiary));
}

/* Language card hover */
.language-card:hover,
.language-check-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Accessibility ── */

/* Screen-reader only (visually hidden, accessible to AT) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — visible on Tab focus */
.sr-only.focusable:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    width: auto;
    height: auto;
    padding: 0.75rem 1.5rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--accent-primary);
    color: #000;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: var(--radius-small);
    z-index: 10100;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Respect browser reduced-motion preference */
@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;
    }
}

/* Manual reduced-motion toggle */
[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* High contrast mode */
[data-contrast="high"] {
    --glass-border: rgba(255, 255, 255, 0.35);
}
[data-contrast="high"] * {
    border-color: var(--glass-border) !important;
}
[data-contrast="high"] a,
[data-contrast="high"] .nav-item span {
    text-decoration: underline;
}
[data-contrast="high"] *:focus {
    outline: 3px solid var(--accent-primary) !important;
    outline-offset: 2px !important;
}
[data-contrast="high"] .btn,
[data-contrast="high"] .icon-btn,
[data-contrast="high"] .form-input,
[data-contrast="high"] .data-card,
[data-contrast="high"] .info-card {
    box-shadow: 0 0 0 2px var(--text-primary) !important;
}
[data-contrast="high"] .text-secondary,
[data-contrast="high"] .text-muted,
[data-contrast="high"] [style*="color: var(--text-muted)"],
[data-contrast="high"] [style*="color: var(--text-secondary)"] {
    color: var(--text-primary) !important;
    opacity: 0.85;
}

/* High contrast — light mode overrides */
[data-contrast="high"][data-theme="light"] {
    --glass-border: rgba(0, 0, 0, 0.35);
}
[data-contrast="high"][data-theme="light"] *:focus {
    outline-color: var(--accent-primary) !important;
}

/* Small toggle switch for dropdown menus */
.toggle-switch-sm {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--glass-border);
    border-radius: var(--radius-element);
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-switch-sm::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.toggle-switch-sm.active {
    background: var(--accent-primary);
}
.toggle-switch-sm.active::after {
    transform: translateX(16px);
    background: #fff;
}

/* Accessibility dropdown row layout */
.a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
}
.a11y-row:hover {
    background: rgba(255, 255, 255, 0.05);
}
.a11y-row-label {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 500;
}
.a11y-row-sub {
    font-size: 0.6875rem;
    color: var(--text-muted);
}
.a11y-textsize-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.a11y-textsize-controls button {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-small);
    border: var(--border-width) var(--border-style) var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.a11y-textsize-controls button:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}
.a11y-textsize-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 42px;
    text-align: center;
}

/* ── Admin Mode ────────────────────────────────────────── */
.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-small);
    background: linear-gradient(135deg, var(--accent-tertiary, #8b5cf6), color-mix(in srgb, var(--accent-tertiary, #8b5cf6) 85%, #000));
    color: #fff;
    vertical-align: middle;
    margin-left: 0.375rem;
    line-height: 1.4;
}

/* Blur other agent names on leaderboard in agent profile mode */
[data-profile="agent"] .leaderboard-agent-name {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* ==================== ADMIN: HIERARCHY TREE ==================== */
.hierarchy-tree {
    padding: 0.25rem 0;
    font-size: 0.8125rem;
}

.hierarchy-node {
    position: relative;
}

.htree-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    cursor: default;
    transition: background 0.15s;
    white-space: nowrap;
}

.htree-row:hover {
    background: var(--element-bg);
}

.htree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--element-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}

.htree-toggle:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.htree-spacer {
    display: inline-block;
    width: 1.25rem;
    flex-shrink: 0;
}

.htree-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.htree-dot-principal { background: var(--accent-tertiary, #8b5cf6); }
.htree-dot-manager { background: var(--accent-primary); }
.htree-dot-senior { background: var(--success); }
.htree-dot-agent { background: var(--text-muted); opacity: 0.4; }

.htree-name {
    font-weight: 600;
    color: var(--text-primary);
}

.htree-role {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-xs);
    font-weight: 500;
}

.htree-role-principal { color: var(--accent-tertiary, #8b5cf6); background: color-mix(in srgb, var(--accent-tertiary, #8b5cf6) 10%, transparent); }
.htree-role-manager { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 10%, transparent); }
.htree-role-senior { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }

.htree-meta {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-left: auto;
}

.hierarchy-children {
    padding-left: 1.5rem;
    margin-left: 0.625rem;
    border-left: 1px dashed var(--border-color);
}

.hierarchy-node.collapsed > .hierarchy-children {
    display: none;
}

.hierarchy-highlight > .htree-row {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 4px);
}

/* ==================== ADMIN: REPORT GRID ==================== */
.admin-report-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.admin-report-card {
    background: var(--element-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    text-align: center;
}

.admin-report-card:hover {
    background: var(--glass-bg);
}

/* ==================== ADMIN: WORKFLOW CARDS ==================== */
.workflow-card {
    background: var(--element-bg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    transition: all var(--transition-speed) var(--transition-ease);
}

.workflow-card:hover {
    background: var(--glass-bg);
}

/* ==================== ADMIN: UPLOAD ZONE ==================== */
.upload-zone {
    border: 2px dashed var(--glass-border);
    border-radius: var(--radius-card);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    background: var(--bg-tertiary);
}

.upload-zone:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 5%, transparent);
}


/* === Scroll Lock === */
body.scroll-locked {
    overflow: hidden;
}

/* === Slide-Over Detail Panel === */
.slide-over-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999;
}

.slide-over-backdrop.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.slide-over-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 75vw;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 3px solid var(--accent-primary);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.slide-over-panel.active {
    transform: translateX(0);
    box-shadow: -16px 0 64px rgba(0, 0, 0, 0.5);
}

.slide-over-header {
    padding: 1.25rem 2rem;
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 1rem;
}

.slide-over-header-left {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    flex: 1;
}

.slide-over-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-small);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #fff;
    flex-shrink: 0;
}

.slide-over-title-group {
    min-width: 0;
}

.slide-over-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.slide-over-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
    line-height: 1.3;
}

.slide-over-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Uniform 36px tall action buttons in slide-over header */
.slide-over-header-actions .btn {
    height: 36px;
    padding: 0 0.875rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-small);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}


.slide-over-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem 2rem;
    background:
        radial-gradient(circle at 20% 50%, var(--bg-gradient-1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, var(--bg-gradient-2) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, var(--bg-gradient-3) 0%, transparent 50%),
        var(--bg-primary);
}

.slide-over-body .detail-tabs {
    position: sticky;
    top: -1.5rem;
    z-index: 10;
    background: transparent;
    padding-top: 1.5rem;
    margin-top: -1.5rem;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Client/Carrier Detail — Sidebar Nav Layout */

/* When panel has sidebar, switch to row layout */
.slide-over-panel.has-sidebar {
    flex-direction: row;
}

.slide-over-panel.has-sidebar .cd-sidebar-nav,
.slide-over-panel.has-sidebar .ad-sidebar-nav {
    width: 185px;
    min-width: 185px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.75rem 0.5rem;
    background: var(--bg-secondary);
    backdrop-filter: blur(30px);
    box-shadow: var(--shadow-md);
    z-index: 2;
}

.slide-over-panel.has-sidebar .slide-over-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.slide-over-panel.has-sidebar .slide-over-header {
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

.slide-over-panel.has-sidebar .slide-over-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem 2rem;
}

/* Standardize button sizes in detail panels */
#clientDetailPanel .btn:not(.btn-xs):not(.btn-lg),
#agentDetailPanel .btn:not(.btn-xs):not(.btn-lg) {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-element);
    gap: 0.4375rem;
    font-weight: 600;
}

/* Legacy layout fallback for panels without sidebar */
.cd-layout {
    display: flex;
    height: 100%;
    min-height: 0;
}

.cd-sidebar-nav,
.ad-sidebar-nav {
    width: 185px;
    min-width: 185px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.75rem 0.5rem;
    background: var(--bg-secondary);
    backdrop-filter: blur(30px);
    box-shadow: var(--shadow-md);
}

.cd-nav-item,
.ad-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3125rem 1rem;
    margin-bottom: 0.125rem;
    border-radius: var(--radius-element);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-ease);
    position: relative;
    overflow: hidden;
    font-size: 0.8125rem;
}

.cd-nav-item::before,
.ad-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary) 0%, transparent 100%);
    opacity: 0;
    transition: all var(--transition-speed) var(--transition-ease);
}

.cd-nav-item:hover,
.ad-nav-item:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent-tertiary) 10%, transparent);
}

.cd-nav-item:hover::before,
.ad-nav-item:hover::before {
    width: 100%;
    opacity: 0.1;
}

.cd-nav-item.active,
.ad-nav-item.active {
    color: var(--accent-primary);
}

.cd-nav-item.active .nav-icon,
.ad-nav-item.active .nav-icon {
    color: var(--accent-primary);
}

.cd-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

.slide-over-body .stats-grid {
    margin-bottom: 1.5rem;
}

.slide-over-body .stat-card {
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-element);
}

.slide-over-body .stat-label {
    font-size: 0.8125rem;
}

.slide-over-body .data-card {
    padding: 1.5rem;
}

.slide-over-body .data-card-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.slide-over-body .data-card-header:has(+ p) .data-card-title-icon,
.slide-over-body .data-card-header:has(+ .data-card-description) .data-card-title-icon {
    left: 1.5rem;
    top: 1.5rem;
}

[data-border-active="true"] .slide-over-body .data-card-header {
    padding-bottom: 0;
}

.slide-over-body .data-card-title {
    font-size: 1.25rem;
}

/* === Household Member Cards === */
.hh-card {
    background: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.hh-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}

.hh-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-small);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: #fff;
    flex-shrink: 0;
}

.hh-card-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.hh-card-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}

.hh-field {
    background: var(--element-bg);
    border-radius: var(--radius-small);
    padding: 0.75rem 1rem;
}

.hh-field-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.hh-field-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* Clickable table rows */
tr.clickable-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

tr.clickable-row:hover {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

/* Clickable name spans (static tables) */
.clickable-name {
    color: var(--text-primary);
    font-weight: 600;
    transition: color 0.15s ease;
}

.clickable-name:hover {
    color: var(--accent-primary);
}

/* Task filter bars */
#tasks-mine .filter-bar .filter-input,
#admin-tasks-all .filter-bar .filter-input {
    min-width: 180px;
    flex: 1 1 280px;
}

/* Autocomplete search results */
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-lg);
    margin-top: 2px;
}
.autocomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-bottom: var(--border-width) var(--border-style) var(--border-color);
}
.autocomplete-item:last-child {
    border-bottom: none;
}
.autocomplete-item:hover {
    background: var(--bg-tertiary);
}
.autocomplete-item .autocomplete-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Task tab count badge */
.tab-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: #fff;
    border-radius: var(--radius-small);
    font-size: 0.6875rem;
    font-weight: 700;
    margin-left: 0.375rem;
}

/* ============================================================
   LEADS VIEW TOGGLE & MAP
   ============================================================ */

.leads-view-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-small);
    overflow: hidden;
}
.leads-view-btn {
    padding: 0.375rem 0.625rem;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.15s;
    line-height: 1;
}
.leads-view-btn + .leads-view-btn {
    border-left: 1px solid var(--border-color);
}
.leads-view-btn.active {
    background: var(--accent-primary);
    color: #fff;
}
.leads-view-btn:hover:not(.active) {
    background: var(--bg-tertiary);
}

/* Lead type checkboxes in Add Lead modal */
.lead-type-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.lead-type-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
}
.lead-type-check input[type="checkbox"] {
    accent-color: var(--accent-primary);
}

/* Map placeholder */
.leads-map-placeholder {
    text-align: center;
    padding: 2.5rem 1.5rem;
}
.leads-map-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}
.leads-map-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}
.leads-map-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    max-width: 420px;
    margin: 0 auto 1.5rem;
    line-height: 1.5;
}
.leads-map-preview {
    max-width: 500px;
    margin: 0 auto;
}
.leads-map-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.leads-map-region {
    text-align: left;
}
.leads-map-region-bar {
    height: 6px;
    border-radius: var(--radius-xs);
    margin-bottom: 0.25rem;
    min-width: 8px;
    transition: width 0.3s ease;
}
.leads-map-region-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}
.leads-map-region-info span {
    color: var(--text-secondary);
}
.leads-map-region-info strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================================
   ENROLLMENT PLATFORM STYLES
   ============================================================ */

/* Step Indicator */
.enroll-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-element);
    border: 1px solid var(--border-color);
}
.enroll-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    position: relative;
    z-index: 1;
}
.enroll-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    transition: all var(--transition-speed) var(--transition-ease);
}
.enroll-step.active .enroll-step-circle {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb, 99,102,241), 0.2);
}
.enroll-step.completed .enroll-step-circle {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.enroll-step-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.enroll-step.active .enroll-step-label {
    color: var(--accent-primary);
}
.enroll-step.completed .enroll-step-label {
    color: var(--success);
}
.enroll-step-line {
    flex: 1;
    height: 2px;
    min-width: 40px;
    max-width: 80px;
    background: var(--border-color);
    margin: 0 0.25rem;
    margin-bottom: 1.25rem;
    transition: background 0.3s ease;
}
.enroll-step-line.completed {
    background: var(--success);
}

/* Section titles */
.enroll-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}
.enroll-section-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* Household cards */
.enroll-hh-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-element);
    padding: 1rem;
    margin-bottom: 1rem;
}
.enroll-hh-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.enroll-hh-card-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-primary);
}
.enroll-hh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.625rem;
}
.enroll-hh-field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.enroll-hh-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.enroll-hh-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.enroll-hh-summary {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-element);
    margin: 1.25rem 0;
    border: 1px solid var(--border-color);
}
.enroll-hh-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.enroll-hh-summary-item span {
    font-size: 0.6875rem;
    color: var(--text-muted);
}
.enroll-hh-summary-item strong {
    font-size: 1rem;
    color: var(--text-primary);
}

/* Navigation bar */
.enroll-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Filter bar */
.enroll-filter-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.enroll-filter-bar .form-input {
    flex: 1;
    min-width: 140px;
    max-width: 220px;
}

/* Subsidy banner */
.enroll-subsidy-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: var(--radius-element);
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}
.enroll-subsidy-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* Plan Cards (Quick Quote grid) */
.enroll-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.enroll-cards-grid.compact {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.enroll-plan-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-element);
    padding: 1rem;
    transition: all var(--transition-speed) var(--transition-ease);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.enroll-plan-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.enroll-plan-card.selected {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 99,102,241), 0.06), rgba(var(--accent-primary-rgb, 99,102,241), 0.02));
}
.enroll-plan-card.compact {
    padding: 0.75rem;
    gap: 0.5rem;
}

/* Browse cards (step 2) */
.enroll-browse-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 5rem;
}
.enroll-browse-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-element);
    padding: 1rem 1.25rem;
    transition: all var(--transition-speed) var(--transition-ease);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.enroll-browse-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.enroll-browse-card.selected {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(var(--accent-primary-rgb, 99,102,241), 0.06), rgba(var(--accent-primary-rgb, 99,102,241), 0.02));
    border-width: 2px;
}

/* Plan card shared elements */
.enroll-plan-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.enroll-carrier-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-element);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.125rem;
    color: #fff;
    flex-shrink: 0;
}
.enroll-plan-info {
    flex: 1;
    min-width: 0;
}
.enroll-carrier-name {
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-weight: 500;
}
.enroll-plan-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.enroll-premium-block {
    text-align: right;
    flex-shrink: 0;
}
.enroll-premium-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}
.enroll-premium-amount .premium-zero {
    color: var(--success);
}
.enroll-premium-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* Badges */
.enroll-plan-badges {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.enroll-type-badge, .enroll-tier-badge, .enroll-network-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.enroll-type-badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.enroll-network-badge {
    background: rgba(99,102,241,0.1);
    color: var(--accent-primary);
}
.enroll-tier-badge {
    color: #fff;
}
.enroll-tier-bronze { background: linear-gradient(135deg, #b45309, #d97706); }
.enroll-tier-silver { background: linear-gradient(135deg, #6b7280, #9ca3af); }
.enroll-tier-gold { background: linear-gradient(135deg, #d97706, #f59e0b); }
.enroll-tier-platinum { background: linear-gradient(135deg, #475569, #64748b); }

/* Plan stats row */
.enroll-plan-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 0.5rem;
}
.enroll-stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-small);
}
.enroll-stat-label {
    font-size: 0.625rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.enroll-stat-value {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Plan card actions */
.enroll-plan-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: auto;
}

/* Sticky bar (step 2) */
.enroll-sticky-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 -1.5rem;
    padding: 0.75rem 1.5rem;
    z-index: 5;
    backdrop-filter: blur(12px);
}
.enroll-sticky-info {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.enroll-sticky-count {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.875rem;
}
.enroll-sticky-total {
    font-size: 0.875rem;
    color: var(--success);
    font-weight: 600;
}
.enroll-sticky-actions {
    display: flex;
    gap: 0.5rem;
}

/* Compare Grid (step 3) */
.enroll-compare-grid {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-element);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.enroll-compare-row {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}
.enroll-compare-row:last-child {
    border-bottom: none;
}
.enroll-compare-row.even {
    background: var(--bg-secondary);
}
.enroll-compare-row.enroll-compare-header {
    background: var(--bg-tertiary);
    padding: 1rem 0;
}
.enroll-compare-label {
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
}
.enroll-compare-col {
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
}

/* Application Review (step 4) */
.enroll-review-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-element);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.enroll-review-card-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.enroll-review-plan {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.enroll-review-members {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.enroll-review-member {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-small);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
}
.enroll-attestations {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.enroll-attestation {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    cursor: pointer;
}
.enroll-attestation input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: var(--accent-primary);
}

/* Confirmation (step 5) */
.enroll-confirmation {
    text-align: center;
    padding: 2rem 0;
}
.enroll-confirmation-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}
.enroll-confirmation-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}
.enroll-confirmation-id {
    font-size: 0.9375rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.enroll-confirm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.enroll-confirm-field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.enroll-confirm-field span {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.enroll-confirm-field strong {
    font-size: 0.875rem;
    color: var(--text-primary);
}
.enroll-next-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.enroll-next-step {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.enroll-next-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.enroll-next-step span {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.enroll-confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
}

/* Plan detail modal */
.enroll-detail-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.enroll-detail-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-element);
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
}
.enroll-detail-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.enroll-detail-modal-body {
    padding: 1.25rem;
}

/* ============================================
   COMMAND PALETTE
   ============================================ */
.command-palette-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10002;
    display: none;
    justify-content: center;
    padding-top: 15vh;
}
.command-palette-backdrop.active {
    display: flex;
}
.command-palette {
    width: 580px;
    max-width: 90vw;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    max-height: 500px;
    display: flex;
    flex-direction: column;
}
.command-palette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem 0;
}
.command-palette-kbd {
    font-size: 0.6875rem;
    padding: 0.15rem 0.4rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    font-family: monospace;
}
.command-palette-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
}
.command-palette-input::placeholder {
    color: var(--text-muted);
}
.command-palette-results {
    overflow-y: auto;
    max-height: 360px;
    padding: 0.5rem;
}
.command-palette-section {
    margin-bottom: 0.5rem;
}
.command-palette-section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem 0.25rem;
}
.command-palette-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-small);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: background 0.15s;
}
.command-palette-item:hover,
.command-palette-item.active {
    background: var(--glass-bg);
}
.command-palette-icon {
    font-size: 1rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}
.command-palette-meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.command-palette-empty {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ============================================
   ACTIVITY TIMELINE
   ============================================ */
.activity-timeline {
    position: relative;
    padding-left: 2rem;
}
.activity-timeline::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}
.timeline-item {
    position: relative;
    display: flex;
    gap: 1rem;
    padding-bottom: 1.25rem;
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-dot {
    position: absolute;
    left: -2rem;
    top: 0.125rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 2px solid var(--card-bg);
    z-index: 1;
    flex-shrink: 0;
}
.timeline-content {
    flex: 1;
    padding: 0.625rem 0.875rem;
    background: var(--glass-bg);
    border-radius: var(--radius-element);
    border: 1px solid var(--border-color);
}
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.timeline-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.timeline-date {
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.timeline-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ============================================
   IMPORT DROPZONE
   ============================================ */
.import-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.import-dropzone:hover,
.import-dropzone.dragover {
    border-color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.05);
}
.import-dropzone-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

/* Chat */
.chat-mention-token { background: color-mix(in srgb, var(--accent-primary) 15%, transparent); color: var(--accent-primary); padding: 0.1rem 0.35rem; border-radius: var(--radius-xs); font-weight: 600; cursor: pointer; user-select: all; }
.chat-mention-token:hover { background: color-mix(in srgb, var(--accent-primary) 30%, transparent); }
#chatMessageInput:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
#chatMessagesArea { scroll-behavior: smooth; }

/* ==================== Contacts ==================== */
.contact-avatar { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.contact-avatar-client { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.contact-avatar-lead { background: linear-gradient(135deg, #f59e0b, #d97706); }
.contact-avatar-agent { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.contact-avatar-carrier { background: linear-gradient(135deg, #10b981, #059669); }
.contact-avatar-personal { background: linear-gradient(135deg, #ec4899, #db2777); }
.contact-star { cursor: pointer; font-size: 1rem; color: var(--text-muted); transition: color 0.15s; user-select: none; }
.contact-star.starred { color: #f59e0b; }
.contact-star:hover { color: #f59e0b; }
.contact-group-card { background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: var(--radius-element); padding: 1.25rem; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 0.5rem; }
.contact-group-card:hover { background: var(--bg-tertiary); border-color: var(--accent-primary); }
.contact-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.contacts-tab-content { display: none; }

/* ==================== Calendar Redesign ==================== */
.cal-layout { display: flex; gap: 1rem; height: calc(100vh - 230px); min-height: 500px; }
.cal-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-right { width: 320px; min-width: 300px; max-width: 380px; display: flex; flex-direction: column; gap: 0; }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-day-cell { padding: 0.375rem; min-height: 72px; background: var(--bg-secondary); border-radius: var(--radius-small); cursor: pointer; border: 1px solid var(--glass-border); transition: all 0.15s; }
.cal-day-cell:hover { background: var(--bg-tertiary); }
.cal-day-cell.cal-selected { background: var(--bg-tertiary); border-color: var(--accent-primary); }
.cal-day-cell.cal-other-month { opacity: 0.35; }
.cal-day-number { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.125rem; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-today .cal-day-number { background: var(--accent-primary); color: #fff; font-weight: 700; }
.cal-event-chip { font-size: 0.625rem; padding: 0.0625rem 0.25rem; border-radius: var(--radius-xs); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; line-height: 1.4; }
.cal-chip-appointment { background: #06b6d4; }
.cal-chip-meeting { background: #3b82f6; }
.cal-chip-call { background: #10b981; }
.cal-chip-event { background: #f97316; }
.cal-chip-followup { background: #f59e0b; }
.cal-chip-task { background: #ec4899; }
.cal-chip-personal { background: #8b5cf6; }
.cal-week-grid { display: grid; grid-template-columns: 50px repeat(7, 1fr); gap: 0; }
.cal-week-header { padding: 0.5rem 0.25rem; text-align: center; font-size: 0.75rem; font-weight: 600; border-bottom: 1px solid var(--glass-border); cursor: pointer; border-radius: var(--radius-small); }
.cal-week-header:hover { background: var(--bg-tertiary); }
.cal-week-header.cal-today-col { color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 5%, transparent); }
.cal-week-time { padding: 0.25rem 0.25rem; font-size: 0.6875rem; color: var(--text-muted); text-align: right; border-top: 1px solid var(--glass-border); }
.cal-week-cell { position: relative; min-height: 48px; border-top: 1px solid var(--glass-border); border-left: 1px solid var(--glass-border); }
.cal-week-event-block { position: absolute; left: 2px; right: 2px; border-radius: var(--radius-xs); padding: 0.125rem 0.25rem; font-size: 0.625rem; color: #fff; overflow: hidden; cursor: pointer; z-index: 1; line-height: 1.3; }
.cal-mini-month { user-select: none; }
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.6875rem; }
.cal-mini-day { padding: 0.25rem; cursor: pointer; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; margin: 0 auto; transition: background 0.1s; }
.cal-mini-day:hover { background: var(--bg-tertiary); }
.cal-mini-day.cal-mini-today { background: var(--accent-primary); color: #fff; font-weight: 700; }
.cal-mini-day.cal-mini-selected { border: 2px solid var(--accent-primary); }
.cal-mini-day.cal-mini-has-event::after { content: ''; position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-primary); }
.cal-mini-day { position: relative; }
.cal-mini-header { font-size: 0.625rem; font-weight: 600; color: var(--text-muted); padding: 0.25rem; }
.cal-detail-event { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-small); cursor: pointer; transition: background 0.1s; }
.cal-detail-event:hover { background: var(--bg-tertiary); }
.cal-detail-bar { width: 3px; min-height: 32px; border-radius: var(--radius-xs); flex-shrink: 0; }
.cal-event-detail-card { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* ==================== Password Vault ==================== */
.vault-layout { display: flex; gap: 0; height: calc(100vh - 230px); min-height: 500px; }
.vault-left { width: 320px; min-width: 300px; border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; padding: 0.75rem; overflow: hidden; }
.vault-right { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.vault-scope-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--glass-border); margin-bottom: 0.75rem; }
.vault-scope-tab { flex: 1; padding: 0.5rem; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; background: none; border-top: none; border-left: none; border-right: none; }
.vault-scope-tab:hover { color: var(--text-primary); }
.vault-scope-tab.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.vault-entry-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.5rem; border-radius: var(--radius-small); cursor: pointer; transition: all 0.1s; }
.vault-entry-item:hover { background: var(--bg-tertiary); }
.vault-entry-item.active { background: var(--bg-tertiary); border-left: 3px solid var(--accent-primary); }
.vault-field-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--glass-border); }
.vault-field-label { font-size: 0.75rem; color: var(--text-muted); min-width: 80px; }
.vault-field-value { flex: 1; font-size: 0.875rem; color: var(--text-primary); font-family: monospace; word-break: break-all; }
.vault-field-btn { background: var(--bg-tertiary); border: 1px solid var(--glass-border); border-radius: var(--radius-small); padding: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
.vault-field-btn:hover { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
.vault-cat-carrier { color: #06b6d4; }
.vault-cat-cms { color: #f97316; }
.vault-cat-quoting { color: #10b981; }
.vault-cat-email { color: #3b82f6; }
.vault-cat-crm { color: #8b5cf6; }
.vault-cat-banking { color: #f59e0b; }
.vault-cat-team { color: #ec4899; }
.vault-strength-weak { background: #ef4444; }
.vault-strength-fair { background: #f59e0b; }
.vault-strength-good { background: #10b981; }
.vault-strength-strong { background: #06b6d4; }
.vault-tag { display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--radius-full); font-size: 0.6875rem; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--glass-border); }

/* SOA System */
/* Legacy soa-countdown classes removed — now uses standard badge-active/badge-warning */
.soa-product-tag { display: inline-block; padding: 0.125rem 0.4rem; border-radius: var(--radius-xs); font-size: 0.6875rem; font-weight: 600; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--glass-border); margin-right: 0.25rem; margin-bottom: 0.125rem; text-transform: uppercase; letter-spacing: 0.02em; }
.soa-audit-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 1.5rem; }
.soa-audit-timeline::before { content: ''; position: absolute; left: 0.4375rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--border-color); }
.soa-audit-entry { position: relative; padding: 0.5rem 0; }
.soa-audit-entry::before { content: ''; position: absolute; left: -1.09375rem; top: 0.75rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); border: 2px solid var(--bg-primary); }
.soa-audit-entry .audit-time { font-size: 0.75rem; color: var(--text-muted); }
.soa-audit-entry .audit-action { font-size: 0.8125rem; color: var(--text-primary); margin-top: 0.125rem; }
.soa-audit-entry .audit-by { font-size: 0.75rem; color: var(--text-secondary); }

/* Accessibility: focus-visible styles for keyboard navigation */
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
.nav-item:focus-visible,
.detail-tab:focus-visible,
.sub-tab:focus-visible,
.theme-option:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.close-btn:focus-visible,
.insights-close:focus-visible {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

/* ── Team Comments & Activity Feed ─────────────── */
.comment-thread { display: flex; flex-direction: column; }
.comment-item { display: flex; gap: 0.75rem; padding: 0.75rem; border-bottom: 1px solid var(--glass-border); }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #06b6d4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.comment-author { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.comment-time { font-size: 10px; color: var(--text-muted); }
.comment-visibility { font-size: 9px; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--bg-tertiary); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.comment-actions { margin-left: auto; display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.15s; }
.comment-item:hover .comment-actions { opacity: 1; }
.comment-actions button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 10px; padding: 2px 6px; border-radius: var(--radius-xs); transition: all 0.15s; }
.comment-actions button:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.comment-actions button.comment-delete:hover { color: var(--danger); background: rgba(255,51,102,0.12); }
.comment-text { font-size: 12px; color: var(--text-secondary); margin-top: 0.25rem; line-height: 1.5; word-break: break-word; }
.comment-text .mention { color: var(--accent-primary); font-weight: 600; cursor: pointer; background: color-mix(in srgb, var(--accent-primary) 15%, transparent); padding: 0.1rem 0.35rem; border-radius: var(--radius-xs); }
.comment-text .mention:hover { text-decoration: underline; }
.comment-replies { margin-left: 2rem; border-left: 2px solid var(--glass-border); }
.comment-replies .comment-item { padding: 0.5rem 0.75rem; }
.comment-compose { padding: 0.75rem; border-top: 1px solid var(--glass-border); }
.comment-compose textarea { width: 100%; min-height: 50px; background: var(--glass-bg); border: var(--border-width) solid var(--glass-border); border-radius: var(--radius-small); color: var(--text-primary); padding: 0.5rem; font-size: 12px; resize: vertical; font-family: inherit; }
.comment-compose textarea::placeholder { color: var(--text-muted); }
.comment-compose textarea:focus { outline: none; border-color: var(--accent-primary); }
.comment-compose-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; align-items: center; }
.comment-compose-actions .comment-visibility-toggle { font-size: 10px; color: var(--text-muted); cursor: pointer; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--bg-tertiary); border: 1px solid var(--glass-border); }
.comment-compose-actions .comment-visibility-toggle:hover { background: rgba(255,255,255,0.08); }
.comment-compose-actions .comment-visibility-toggle.private { color: var(--warning); border-color: rgba(255,184,0,0.3); }
.comment-mention-dropdown { position: absolute; background: var(--glass-bg); backdrop-filter: blur(20px); border: var(--border-width) solid var(--glass-border); border-radius: var(--radius-small); max-height: 160px; overflow-y: auto; z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.4); min-width: 180px; }
.comment-mention-item { padding: 0.375rem 0.75rem; font-size: 12px; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.comment-mention-item:hover, .comment-mention-item.active { background: rgba(123,97,255,0.15); }
.comment-mention-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #06b6d4); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 600; flex-shrink: 0; }
.comment-section-toggle { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; cursor: pointer; border-top: 1px solid var(--glass-border); margin-top: 1rem; }
.comment-section-toggle:hover { background: rgba(255,255,255,0.03); }
.comment-section-toggle .toggle-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; }
.comment-section-toggle .toggle-count { font-size: 11px; background: rgba(123,97,255,0.2); color: var(--accent-primary); padding: 1px 8px; border-radius: var(--radius-element); }
.comment-section-toggle .toggle-arrow { font-size: 12px; color: var(--text-muted); transition: transform 0.2s; }
.comment-section-toggle .toggle-arrow.expanded { transform: rotate(180deg); }
.comment-section-body { overflow: hidden; transition: max-height 0.3s ease; }
.comment-section-body.collapsed { max-height: 0 !important; }
.comment-edit-area { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.25rem; }
.comment-edit-area textarea { width: 100%; min-height: 40px; background: var(--glass-bg); border: var(--border-width) solid var(--accent-primary); border-radius: var(--radius-xs); color: var(--text-primary); padding: 0.375rem; font-size: 12px; font-family: inherit; resize: vertical; }
.comment-edit-actions { display: flex; gap: 0.25rem; justify-content: flex-end; }
.comment-edit-actions button { font-size: 10px; padding: 2px 10px; border-radius: var(--radius-xs); border: none; cursor: pointer; }
.comment-edit-actions .save-edit { background: var(--accent-primary); color: #fff; }
.comment-edit-actions .cancel-edit { background: rgba(255,255,255,0.08); color: var(--text-muted); }

/* Activity Feed */
.activity-feed { display: flex; flex-direction: column; }
.activity-feed-item { display: flex; gap: 0.75rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--glass-border); font-size: 12px; align-items: flex-start; }
.activity-feed-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.activity-feed-content { flex: 1; color: var(--text-secondary); line-height: 1.5; }
.activity-feed-content strong { color: var(--text-primary); font-weight: 600; }
.activity-feed-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* ── Segment Builder ────────────────────────────── */
/* ── Smart Lists ──────────────────────────────────── */
.smart-lists-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.smart-list-rule { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--bg-tertiary); padding: 0.2rem 0.5rem; border-radius: var(--radius-small); font-size: 0.6875rem; color: var(--text-secondary); border: 1px solid var(--glass-border); }
.smart-list-rule strong { font-weight: 700; color: var(--text-primary); }
[data-theme="light"] .smart-list-rule { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .smart-list-rule strong { color: #1e293b; }
.smart-list-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; color: var(--text-muted); padding-top: 0.5rem; border-top: 1px solid var(--glass-border); }
.smart-list-rules { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.625rem; }
.smart-list-count { font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; font-weight: 800; flex-shrink: 0; text-shadow: 0 0 12px currentColor; }
.saved-segment-card { padding: 0.75rem; background: var(--bg-tertiary); border-radius: var(--radius-default); border: 1px solid var(--glass-border); }
.saved-segment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.375rem; }
.saved-segment-name { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); }
.saved-segment-count { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 800; color: var(--accent-primary); }
.saved-segment-meta { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.saved-segment-actions { display: flex; gap: 0.375rem; }
/* ── Smart List Cards ─────────────────────────────── */
.smart-list-card {
    position: relative;
    padding: 1rem 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.smart-list-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.15));
    border-color: var(--accent-primary);
}
[data-theme="light"] .smart-list-card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
[data-theme="light"] .smart-list-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06);
}
.smart-list-card .data-card-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    align-items: center;
}
.smart-list-card .data-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-left: 0 !important;
    padding-top: 0 !important;
    gap: 0.5rem;
}
.smart-list-card .data-card-title-icon {
    position: static !important;
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.875rem;
    border-radius: var(--radius-small);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
[data-theme="light"] .smart-list-card .data-card-title-icon {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.smart-list-card .data-card-header + p {
    padding-left: 0 !important;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--glass-border);
    font-size: 0.75rem;
    line-height: 1.4;
}
#clients-segments .data-card { min-height: 300px; }
#segmentConditions .filter-input { font-size: 0.8125rem; padding: 0.375rem 0.625rem; background: var(--bg-primary); border-color: var(--border-color); }
[data-theme="light"] #segmentConditions .filter-input { background: #fff; }
@media (max-width: 900px) {
    #clients-segments > div { grid-template-columns: 1fr !important; }
}

.news-hub-card {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-element);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    margin-bottom: 0.75rem;
}
.news-hub-card:hover {
    background: var(--glass-bg);
}
.news-hub-card-top {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}
.news-hub-card-headline {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.4;
}
.news-hub-card-summary {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-hub-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Breaking News Widget */
.breaking-news-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 0.5rem;
}
.breaking-news-item:hover {
    background: var(--glass-bg);
}
.breaking-news-content {
    flex: 1;
    min-width: 0;
}
.breaking-news-text {
    font-size: 0.8125rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.breaking-news-meta {
    font-size: 0.6875rem;
    color: var(--text-muted);
}
.breaking-news-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Breaking News Alert Banner */
.breaking-news-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06));
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-lg, 0.75rem);
    backdrop-filter: blur(8px);
}
.breaking-news-alert-badge {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--danger, #ef4444);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm, 0.375rem);
    white-space: nowrap;
    animation: alertPulse 2s ease-in-out infinite;
}
@keyframes alertPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.breaking-news-alert-text {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.breaking-news-alert-text:hover {
    text-decoration: underline;
}
.breaking-news-alert-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .daily-feed-grid {
        grid-template-columns: 1fr;
    }
}

/* Dashboard widget item hover */
.dash-widget-item,
.ai-rec-card {
    transition: background 0.15s ease, transform 0.15s ease;
}
.dash-widget-item:hover,
.ai-rec-card:hover {
    background: var(--glass-bg) !important;
}

.cd-nav-profile {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem 0.75rem;
    margin-bottom: 0.375rem;
    border-bottom: 1px solid var(--border-subtle);
}
/* QA Pipeline Test — verifying Codex integration */