/* =============================================================================
   BlueBucks THEME SYSTEM — Three-Mode Design (Democratic Slate Blue)

   Themes:
     • dark           — "Obsidian Slate"          (deep cool navy-black)
     • medium         — "Graphite Slate"           (mid-tone cool blue-gray)
     • lite           — "Clean Slate"              (crisp white/gray SaaS)

   Accent Palette: Democratic Slate Blue
     • Slate Blue #6B8DB5 — primary accent (dark/medium)
     • Slate Blue #3D6080 — primary accent (lite, darkened for contrast)
     • Emerald  #3ABF6E — success / positive
     • Crimson  #E54D4D — danger / alerts
     • Info     #4AABEE — info / links
     • Purple   #A48BD4 — purple / metadata

   Uses --bb-* variable prefix for theme tokens.
   Legacy variable bridge ensures all existing component styles continue working.
   ============================================================================= */

/* =============================================================================
   DARK THEME — "Obsidian Slate"
   ============================================================================= */

html[data-theme="dark"] {
    /* === BlueBucks Palette — Deep Obsidian Slate === */
    --bb-bg-primary: #080A10;
    --bb-bg-secondary: #141922;
    --bb-bg-tertiary: #060810;
    --bb-bg-surface: #141922;
    --bb-bg-elevated: #1C2332;

    --bb-text-primary: #E0E4EC;
    --bb-text-secondary: #9AA5B8;
    --bb-text-muted: #8A95A8;
    --bb-text-accent: #6B8DB5;
    --bb-text-inverse: #080A10;

    --bb-cerulean: #6B8DB5;
    --bb-cerulean-hover: #7FA0C8;
    --bb-cerulean-light: rgba(107, 141, 181, 0.18);
    --bb-cerulean-rgb: 107, 141, 181;

    --bb-border-color: #2A3344;
    --bb-border-light: #1C2332;
    --bb-border-dark: #384A62;

    /* === Shadows — HARD 3D with crisp edges === */
    --bb-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(140,170,220,0.06);
    --bb-shadow: 0 4px 8px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.45);
    --bb-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.50), 0 12px 32px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(140,170,220,0.12);
    --bb-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.60), 0 24px 56px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(140,170,220,0.15);

    /* === Democratic Slate Blue Status Colors === */
    --bb-success: #3ABF6E;
    --bb-success-light: rgba(58, 191, 110, 0.18);
    --bb-success-dark: #2D9650;
    --bb-danger: #E54D4D;
    --bb-danger-light: rgba(229, 77, 77, 0.18);
    --bb-danger-dark: #C53030;
    --bb-warning: #E5A93B;
    --bb-warning-light: rgba(229, 169, 59, 0.18);
    --bb-warning-dark: #C89020;
    --bb-info: #4AABEE;
    --bb-info-light: rgba(74, 171, 238, 0.18);
    --bb-info-dark: #2B7FCC;

    /* === Extended Accent Palette — Slate Blue === */
    --bb-purple: #A48BD4;
    --bb-purple-dark: #8B6FC0;
    --bb-purple-rgb: 164, 139, 212;
    --bb-teal: #4AB8C9;
    --bb-teal-dark: #3A9AAC;
    --bb-teal-rgb: 74, 184, 201;
    --bb-rose: #D9637A;
    --bb-rose-dark: #C04B62;
    --bb-rose-rgb: 217, 99, 122;
    --bb-amber: #D4A04A;
    --bb-amber-dark: #B88838;
    --bb-amber-rgb: 212, 160, 74;

    --bb-sidebar-bg: #060810;
    --bb-sidebar-text: #E0E4EC;
    --bb-sidebar-header-bg: #040608;
    --bb-sidebar-border: #1A2030;
    --bb-sidebar-active: rgba(107, 141, 181, 0.15);

    --bb-input-bg: #141922;
    --bb-input-border: #2A3344;
    --bb-input-focus-border: #6B8DB5;
    --bb-input-focus-shadow: 0 0 0 3px rgba(107, 141, 181, 0.30);
    --bb-input-text: #E0E4EC;
    --bb-input-placeholder: #6E7A90;

    --bb-table-header-bg: #141922;
    --bb-table-stripe-bg: rgba(160, 185, 225, 0.08);
    --bb-table-stripe-solid: #181E28;
    --bb-table-hover-bg: rgba(160, 185, 225, 0.08);
    --bb-table-hover-solid: #1E2530;
    --bb-table-row-bg: #141922;

    --bb-card-bg: #141922;
    --bb-card-header-bg: #1C2332;
    --bb-card-border-radius: 12px;
    --bb-card-shadow: 0 4px 8px rgba(0, 0, 0, 0.50), 0 12px 32px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(140,170,220,0.12);

    --bb-header-bg: linear-gradient(135deg, #060810 0%, #141922 100%);
    --bb-header-text: #E0E4EC;

    /* === Legacy Variable Bridge === */
    --primary: #6B8DB5;
    --primary-light: #7FA0C8;
    --primary-lighter: #93B3D5;
    --primary-dark: #5A7A9E;
    --primary-rgb: 107, 141, 181;
    --accent: #6B8DB5;
    --accent-hover: #7FA0C8;
    --accent-light: rgba(107, 141, 181, 0.18);
    --accent-rgb: 107, 141, 181;
    --success: var(--bb-success);
    --success-light: var(--bb-success-light);
    --success-dark: var(--bb-success-dark);
    --danger: var(--bb-danger);
    --danger-light: var(--bb-danger-light);
    --danger-dark: var(--bb-danger-dark);
    --warning: var(--bb-warning);
    --warning-light: var(--bb-warning-light);
    --warning-dark: var(--bb-warning-dark);
    --info: var(--bb-info);
    --info-light: var(--bb-info-light);
    --info-dark: var(--bb-info-dark);
    --gray-50: #141922;
    --gray-100: #1C2332;
    --gray-200: #2A3344;
    --gray-300: #384A62;
    --gray-400: #5F6B80;
    --gray-500: #7A8698;
    --gray-600: #9AA5B8;
    --gray-700: #B8C2D0;
    --gray-800: #D0D6E0;
    --gray-900: #E0E4EC;
    --body-bg: var(--bb-bg-primary);
    --card-bg: var(--bb-card-bg);
    --sidebar-bg: var(--bb-sidebar-bg);
    --header-bg: var(--bb-header-bg);
    --text-primary: var(--bb-text-primary);
    --text-secondary: var(--bb-text-secondary);
    --text-muted: var(--bb-text-muted);
    --text-light: #384A62;
    --text-inverse: var(--bb-text-inverse);
    --border-color: var(--bb-border-color);
    --border-light: var(--bb-border-light);
    --border-dark: var(--bb-border-dark);
    --shadow-sm: var(--bb-shadow-sm);
    --shadow: var(--bb-shadow);
    --shadow-md: var(--bb-shadow-md);
    --shadow-lg: var(--bb-shadow-lg);
    --card-border-radius: var(--bb-card-border-radius);
    --card-shadow: var(--bb-card-shadow);
    --card-header-bg: var(--bb-card-header-bg);
    --btn-border-radius: 8px;
    --btn-padding: 0.5rem 1rem;
    --btn-font-weight: 600;
    --input-border-radius: 8px;
    --input-border-color: var(--bb-input-border);
    --input-focus-border: var(--bb-input-focus-border);
    --input-focus-shadow: var(--bb-input-focus-shadow);
    --table-header-bg: var(--bb-table-header-bg);
    --table-stripe-bg: var(--bb-table-stripe-bg);
    --table-hover-bg: var(--bb-table-hover-bg);
    --theme-primary: var(--accent);
    --theme-primary-hover: var(--accent-hover);
    --theme-primary-light: var(--accent-light);
    --theme-secondary: var(--gray-600);
    --theme-success: var(--bb-success);
    --theme-danger: var(--bb-danger);
    --theme-warning: var(--bb-warning);
    --theme-info: var(--bb-info);
    --theme-sidebar-bg: var(--bb-sidebar-bg);
    --theme-sidebar-text: var(--bb-sidebar-text);
    --theme-sidebar-header: var(--bb-sidebar-header-bg);
    --theme-sidebar-border: var(--bb-sidebar-border);
    --theme-sidebar-active: var(--bb-sidebar-active);
    --theme-body-bg: var(--bb-bg-primary);
    --theme-card-bg: var(--bb-card-bg);
    --theme-card-border: var(--bb-border-color);
    --theme-text: var(--bb-text-primary);
    --theme-text-muted: var(--bb-text-secondary);
    --theme-table-header: var(--bb-table-header-bg);
    --theme-table-stripe: var(--bb-table-stripe-bg);
    --theme-table-hover: var(--bb-table-hover-bg);
    --theme-input-bg: var(--bb-input-bg);
    --theme-input-border: var(--bb-input-border);
    --theme-input-focus: var(--bb-input-focus-shadow);
    --theme-navbar-bg: var(--bb-sidebar-bg);
    --theme-navbar-text: var(--bb-sidebar-text);

    /* === Glassmorphism — cool blue-tinted glass === */
    --bb-glass-bg: rgba(160, 185, 225, 0.08);
    --bb-glass-bg-strong: rgba(160, 185, 225, 0.14);
    --bb-glass-border: rgba(140, 170, 220, 0.28);
    --bb-glass-border-strong: rgba(140, 170, 220, 0.40);
    --bb-glass-blur: 24px;
    --bb-glass-blur-strong: 32px;
    --bb-glass-shadow: 0 4px 8px rgba(0,0,0,0.50), 0 12px 32px rgba(0,0,0,0.70);
    --bb-glass-shadow-lg: 0 8px 16px rgba(0,0,0,0.60), 0 24px 56px rgba(0,0,0,0.85);
    --bb-glass-highlight: linear-gradient(135deg, rgba(160,185,225,0.18) 0%, rgba(160,185,225,0.05) 50%, transparent 100%);
    --bb-glass-inner-glow: inset 0 1px 0 rgba(160,185,225,0.18), inset 0 0 20px rgba(160,185,225,0.04);
    --bb-glass-tint-opacity: 0.08;

    /* === Neumorphism — cool shadows (hard 3D) === */
    --bb-neu-bg: #141922;
    --bb-neu-raised: 6px 6px 14px rgba(0,0,0,0.85), -6px -6px 14px rgba(160,185,225,0.07);
    --bb-neu-raised-sm: 4px 4px 10px rgba(0,0,0,0.75), -4px -4px 10px rgba(160,185,225,0.06);
    --bb-neu-pressed: inset 4px 4px 12px rgba(0,0,0,0.85), inset -4px -4px 12px rgba(160,185,225,0.07);
    --bb-neu-pressed-sm: inset 3px 3px 8px rgba(0,0,0,0.75), inset -3px -3px 8px rgba(160,185,225,0.05);
    --bb-neu-flat: 3px 3px 8px rgba(0,0,0,0.65), -3px -3px 8px rgba(160,185,225,0.05);
    --bb-neu-btn: 3px 3px 8px rgba(0,0,0,0.80), -3px -3px 8px rgba(160,185,225,0.06), 0 0 0 1px rgba(140,170,220,0.15);
    --bb-neu-btn-hover: 5px 5px 14px rgba(0,0,0,0.90), -5px -5px 14px rgba(160,185,225,0.08), 0 0 0 1px rgba(140,170,220,0.22);
    --bb-neu-btn-active: inset 4px 4px 10px rgba(0,0,0,0.80), inset -4px -4px 10px rgba(160,185,225,0.05);

    /* === Bokeh Background — Slate Blue cool glow === */
    --bb-bokeh-1: rgba(107, 141, 181, 0.22);
    --bb-bokeh-2: rgba(74, 184, 201, 0.16);
    --bb-bokeh-3: rgba(138, 111, 192, 0.14);
    --bb-bokeh-4: rgba(74, 171, 238, 0.10);
    --bb-bokeh-5: rgba(164, 139, 212, 0.08);
    --bb-bokeh-opacity: 1;

    /* === Gradient Background — Deep Obsidian Slate === */
    --bb-body-gradient: linear-gradient(
        135deg,
        #080A10 0%,
        #0B0E16 25%,
        #0E1118 50%,
        #0A0D14 75%,
        #080A10 100%
    );
}

/* =============================================================================
   MEDIUM THEME — "Graphite Slate"
   ============================================================================= */

html[data-theme="medium"] {
    /* === BlueBucks Palette — Graphite Slate === */
    --bb-bg-primary: #1A2030;
    --bb-bg-secondary: #283448;
    --bb-bg-tertiary: #141A28;
    --bb-bg-surface: #283448;
    --bb-bg-elevated: #324058;

    --bb-text-primary: #E4E8F0;
    --bb-text-secondary: #A8B2C4;
    --bb-text-muted: #95A0B4;
    --bb-text-accent: #6B8DB5;
    --bb-text-inverse: #1A2030;

    --bb-cerulean: #6B8DB5;
    --bb-cerulean-hover: #7FA0C8;
    --bb-cerulean-light: rgba(107, 141, 181, 0.20);
    --bb-cerulean-rgb: 107, 141, 181;

    --bb-border-color: #384A62;
    --bb-border-light: #243040;
    --bb-border-dark: #4A5E78;

    /* === Shadows — HARD 3D with crisp edges === */
    --bb-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(140,175,225,0.08);
    --bb-shadow: 0 4px 8px rgba(0, 0, 0, 0.48), 0 8px 20px rgba(0, 0, 0, 0.38);
    --bb-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(140,175,225,0.15);
    --bb-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.55), 0 24px 56px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(140,175,225,0.18);

    /* === Democratic Slate Blue Status Colors === */
    --bb-success: #3ABF6E;
    --bb-success-light: rgba(58, 191, 110, 0.20);
    --bb-success-dark: #2D9650;
    --bb-danger: #E54D4D;
    --bb-danger-light: rgba(229, 77, 77, 0.20);
    --bb-danger-dark: #C53030;
    --bb-warning: #E5A93B;
    --bb-warning-light: rgba(229, 169, 59, 0.20);
    --bb-warning-dark: #C89020;
    --bb-info: #4AABEE;
    --bb-info-light: rgba(74, 171, 238, 0.20);
    --bb-info-dark: #2B7FCC;

    /* === Extended Accent Palette — Slate Blue === */
    --bb-purple: #A48BD4;
    --bb-purple-dark: #8B6FC0;
    --bb-purple-rgb: 164, 139, 212;
    --bb-teal: #4AB8C9;
    --bb-teal-dark: #3A9AAC;
    --bb-teal-rgb: 74, 184, 201;
    --bb-rose: #D9637A;
    --bb-rose-dark: #C04B62;
    --bb-rose-rgb: 217, 99, 122;
    --bb-amber: #D4A04A;
    --bb-amber-dark: #B88838;
    --bb-amber-rgb: 212, 160, 74;

    --bb-sidebar-bg: #121828;
    --bb-sidebar-text: #E4E8F0;
    --bb-sidebar-header-bg: #0E1420;
    --bb-sidebar-border: #243040;
    --bb-sidebar-active: rgba(107, 141, 181, 0.18);

    --bb-input-bg: #283448;
    --bb-input-border: #384A62;
    --bb-input-focus-border: #6B8DB5;
    --bb-input-focus-shadow: 0 0 0 3px rgba(107, 141, 181, 0.28);
    --bb-input-text: #E4E8F0;
    --bb-input-placeholder: #7D8A9E;

    --bb-table-header-bg: #243040;
    --bb-table-stripe-bg: rgba(160, 190, 230, 0.09);
    --bb-table-stripe-solid: #2C3A4E;
    --bb-table-hover-bg: rgba(160, 190, 230, 0.10);
    --bb-table-hover-solid: #303E54;
    --bb-table-row-bg: #283448;

    --bb-card-bg: #283448;
    --bb-card-header-bg: #324058;
    --bb-card-border-radius: 12px;
    --bb-card-shadow: 0 4px 8px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(140,175,225,0.15);

    --bb-header-bg: linear-gradient(135deg, #121828 0%, #1A2030 100%);
    --bb-header-text: #E4E8F0;

    /* === Legacy Variable Bridge === */
    --primary: #6B8DB5;
    --primary-light: #7FA0C8;
    --primary-lighter: #93B3D5;
    --primary-dark: #5A7A9E;
    --primary-rgb: 107, 141, 181;
    --accent: #6B8DB5;
    --accent-hover: #7FA0C8;
    --accent-light: rgba(107, 141, 181, 0.20);
    --accent-rgb: 107, 141, 181;
    --success: var(--bb-success);
    --success-light: var(--bb-success-light);
    --success-dark: var(--bb-success-dark);
    --danger: var(--bb-danger);
    --danger-light: var(--bb-danger-light);
    --danger-dark: var(--bb-danger-dark);
    --warning: var(--bb-warning);
    --warning-light: var(--bb-warning-light);
    --warning-dark: var(--bb-warning-dark);
    --info: var(--bb-info);
    --info-light: var(--bb-info-light);
    --info-dark: var(--bb-info-dark);
    --gray-50: #1A2030;
    --gray-100: #283448;
    --gray-200: #324058;
    --gray-300: #4A5E78;
    --gray-400: #6D7A90;
    --gray-500: #8892A4;
    --gray-600: #A8B2C4;
    --gray-700: #C0C8D6;
    --gray-800: #D4DAE4;
    --gray-900: #E4E8F0;
    --body-bg: var(--bb-bg-primary);
    --card-bg: var(--bb-card-bg);
    --sidebar-bg: var(--bb-sidebar-bg);
    --header-bg: var(--bb-header-bg);
    --text-primary: var(--bb-text-primary);
    --text-secondary: var(--bb-text-secondary);
    --text-muted: var(--bb-text-muted);
    --text-light: #4A5E78;
    --text-inverse: var(--bb-text-inverse);
    --border-color: var(--bb-border-color);
    --border-light: var(--bb-border-light);
    --border-dark: var(--bb-border-dark);
    --shadow-sm: var(--bb-shadow-sm);
    --shadow: var(--bb-shadow);
    --shadow-md: var(--bb-shadow-md);
    --shadow-lg: var(--bb-shadow-lg);
    --card-border-radius: var(--bb-card-border-radius);
    --card-shadow: var(--bb-card-shadow);
    --card-header-bg: var(--bb-card-header-bg);
    --btn-border-radius: 8px;
    --btn-padding: 0.5rem 1rem;
    --btn-font-weight: 600;
    --input-border-radius: 8px;
    --input-border-color: var(--bb-input-border);
    --input-focus-border: var(--bb-input-focus-border);
    --input-focus-shadow: var(--bb-input-focus-shadow);
    --table-header-bg: var(--bb-table-header-bg);
    --table-stripe-bg: var(--bb-table-stripe-bg);
    --table-hover-bg: var(--bb-table-hover-bg);
    --theme-primary: var(--accent);
    --theme-primary-hover: var(--accent-hover);
    --theme-primary-light: var(--accent-light);
    --theme-secondary: var(--gray-600);
    --theme-success: var(--bb-success);
    --theme-danger: var(--bb-danger);
    --theme-warning: var(--bb-warning);
    --theme-info: var(--bb-info);
    --theme-sidebar-bg: var(--bb-sidebar-bg);
    --theme-sidebar-text: var(--bb-sidebar-text);
    --theme-sidebar-header: var(--bb-sidebar-header-bg);
    --theme-sidebar-border: var(--bb-sidebar-border);
    --theme-sidebar-active: var(--bb-sidebar-active);
    --theme-body-bg: var(--bb-bg-primary);
    --theme-card-bg: var(--bb-card-bg);
    --theme-card-border: var(--bb-border-color);
    --theme-text: var(--bb-text-primary);
    --theme-text-muted: var(--bb-text-secondary);
    --theme-table-header: var(--bb-table-header-bg);
    --theme-table-stripe: var(--bb-table-stripe-bg);
    --theme-table-hover: var(--bb-table-hover-bg);
    --theme-input-bg: var(--bb-input-bg);
    --theme-input-border: var(--bb-input-border);
    --theme-input-focus: var(--bb-input-focus-shadow);
    --theme-navbar-bg: var(--bb-sidebar-bg);
    --theme-navbar-text: var(--bb-sidebar-text);

    /* === Glassmorphism — cool blue-tinted glass === */
    --bb-glass-bg: rgba(160, 190, 230, 0.10);
    --bb-glass-bg-strong: rgba(160, 190, 230, 0.16);
    --bb-glass-border: rgba(140, 175, 225, 0.30);
    --bb-glass-border-strong: rgba(140, 175, 225, 0.42);
    --bb-glass-blur: 22px;
    --bb-glass-blur-strong: 30px;
    --bb-glass-shadow: 0 4px 8px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.60);
    --bb-glass-shadow-lg: 0 8px 16px rgba(0,0,0,0.55), 0 24px 56px rgba(0,0,0,0.75);
    --bb-glass-highlight: linear-gradient(135deg, rgba(160,190,230,0.22) 0%, rgba(160,190,230,0.07) 50%, transparent 100%);
    --bb-glass-inner-glow: inset 0 1px 0 rgba(160,190,230,0.18), inset 0 0 20px rgba(160,190,230,0.05);
    --bb-glass-tint-opacity: 0.09;

    /* === Neumorphism — cool shadows (hard 3D) === */
    --bb-neu-bg: #283448;
    --bb-neu-raised: 6px 6px 14px rgba(0,0,0,0.70), -6px -6px 14px rgba(160,190,230,0.08);
    --bb-neu-raised-sm: 4px 4px 10px rgba(0,0,0,0.60), -4px -4px 10px rgba(160,190,230,0.06);
    --bb-neu-pressed: inset 4px 4px 12px rgba(0,0,0,0.70), inset -4px -4px 12px rgba(160,190,230,0.08);
    --bb-neu-pressed-sm: inset 3px 3px 8px rgba(0,0,0,0.60), inset -3px -3px 8px rgba(160,190,230,0.06);
    --bb-neu-flat: 3px 3px 8px rgba(0,0,0,0.50), -3px -3px 8px rgba(160,190,230,0.06);
    --bb-neu-btn: 3px 3px 8px rgba(0,0,0,0.65), -3px -3px 8px rgba(160,190,230,0.07), 0 0 0 1px rgba(140,175,225,0.18);
    --bb-neu-btn-hover: 5px 5px 14px rgba(0,0,0,0.75), -5px -5px 14px rgba(160,190,230,0.09), 0 0 0 1px rgba(140,175,225,0.25);
    --bb-neu-btn-active: inset 4px 4px 10px rgba(0,0,0,0.65), inset -4px -4px 10px rgba(160,190,230,0.06);

    /* === Bokeh Background — Slate Blue cool glow === */
    --bb-bokeh-1: rgba(107, 141, 181, 0.18);
    --bb-bokeh-2: rgba(74, 184, 201, 0.14);
    --bb-bokeh-3: rgba(138, 111, 192, 0.12);
    --bb-bokeh-4: rgba(74, 171, 238, 0.09);
    --bb-bokeh-5: rgba(164, 139, 212, 0.07);
    --bb-bokeh-opacity: 0.95;

    /* === Gradient Background — Graphite Slate === */
    --bb-body-gradient: linear-gradient(
        135deg,
        #1A2030 0%,
        #1E2538 25%,
        #20283C 50%,
        #1C2434 75%,
        #1A2030 100%
    );
}

/* =============================================================================
   LITE THEME — "Clean Slate" (DEFAULT)
   Crisp white/light gray modern SaaS look with cool slate blue accents.
   ============================================================================= */

:root, [data-theme="lite"] {
    /* === BlueBucks Palette — Clean Slate === */
    --bb-bg-primary: #F4F6F9;
    --bb-bg-secondary: #FFFFFF;
    --bb-bg-tertiary: #EBF0F5;
    --bb-bg-surface: #FFFFFF;
    --bb-bg-elevated: #FFFFFF;

    --bb-text-primary: #0F1724;
    --bb-text-secondary: #445068;
    --bb-text-muted: #8694A8;
    --bb-text-accent: #3D6080;
    --bb-text-inverse: #FFFFFF;

    --bb-cerulean: #3D6080;
    --bb-cerulean-hover: #2E4F6E;
    --bb-cerulean-light: rgba(61, 96, 128, 0.14);
    --bb-cerulean-rgb: 61, 96, 128;

    --bb-border-color: #D8DFE8;
    --bb-border-light: #EDF1F5;
    --bb-border-dark: #C0CAD8;

    /* === Shadows — Clean with subtle edge definition === */
    --bb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15,23,42,0.03);
    --bb-shadow: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.06);
    --bb-shadow-md: 0 2px 6px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15,23,42,0.06);
    --bb-shadow-lg: 0 4px 10px rgba(15, 23, 42, 0.15), 0 16px 36px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15,23,42,0.08);

    /* === Democratic Slate Blue Status Colors (darkened for light bg) === */
    --bb-success: #2B8A4E;
    --bb-success-light: rgba(43, 138, 78, 0.14);
    --bb-success-dark: #1E6E3A;
    --bb-danger: #C53030;
    --bb-danger-light: rgba(197, 48, 48, 0.14);
    --bb-danger-dark: #9B2C2C;
    --bb-warning: #B07D14;
    --bb-warning-light: rgba(176, 125, 20, 0.14);
    --bb-warning-dark: #8A6000;
    --bb-info: #2670B8;
    --bb-info-light: rgba(38, 112, 184, 0.14);
    --bb-info-dark: #1E5EA0;

    /* === Extended Accent Palette — Slate Blue (darkened for light bg) === */
    --bb-purple: #6B50B0;
    --bb-purple-dark: #5840A0;
    --bb-purple-rgb: 107, 80, 176;
    --bb-teal: #2888A0;
    --bb-teal-dark: #1E7088;
    --bb-teal-rgb: 40, 136, 160;
    --bb-rose: #B84060;
    --bb-rose-dark: #A03050;
    --bb-rose-rgb: 184, 64, 96;
    --bb-amber: #A87820;
    --bb-amber-dark: #8A6010;
    --bb-amber-rgb: 168, 120, 32;

    --bb-sidebar-bg: #FFFFFF;
    --bb-sidebar-text: #0F1724;
    --bb-sidebar-header-bg: #F6F8FB;
    --bb-sidebar-border: #D8DFE8;
    --bb-sidebar-active: rgba(61, 96, 128, 0.14);

    --bb-input-bg: #F6F8FB;
    --bb-input-border: #C0CAD8;
    --bb-input-focus-border: #3D6080;
    --bb-input-focus-shadow: 0 0 0 3px rgba(61, 96, 128, 0.22);
    --bb-input-text: #0F1724;
    --bb-input-placeholder: #8694A8;

    --bb-table-header-bg: #F0F3F7;
    --bb-table-stripe-bg: rgba(15, 23, 42, 0.02);
    --bb-table-stripe-solid: #F8F9FC;
    --bb-table-hover-bg: rgba(61, 96, 128, 0.06);
    --bb-table-hover-solid: #F0F3F7;
    --bb-table-row-bg: #FFFFFF;

    --bb-card-bg: #FFFFFF;
    --bb-card-header-bg: #F6F8FB;
    --bb-card-border-radius: 12px;
    --bb-card-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15,23,42,0.06);

    --bb-header-bg: linear-gradient(135deg, #1A2944 0%, #2A3D5C 100%);
    --bb-header-text: #F6F8FB;

    /* === Legacy Variable Bridge === */
    --primary: #3D6080;
    --primary-light: #4A7090;
    --primary-lighter: #5880A0;
    --primary-dark: #2E4F6E;
    --primary-rgb: 61, 96, 128;
    --accent: #3D6080;
    --accent-hover: #2E4F6E;
    --accent-light: rgba(61, 96, 128, 0.14);
    --accent-rgb: 61, 96, 128;
    --success: var(--bb-success);
    --success-light: var(--bb-success-light);
    --success-dark: var(--bb-success-dark);
    --danger: var(--bb-danger);
    --danger-light: var(--bb-danger-light);
    --danger-dark: var(--bb-danger-dark);
    --warning: var(--bb-warning);
    --warning-light: var(--bb-warning-light);
    --warning-dark: var(--bb-warning-dark);
    --info: var(--bb-info);
    --info-light: var(--bb-info-light);
    --info-dark: var(--bb-info-dark);
    --gray-50: #F8F9FC;
    --gray-100: #F0F3F7;
    --gray-200: #D8DFE8;
    --gray-300: #C0CAD8;
    --gray-400: #8694A8;
    --gray-500: #5F6D82;
    --gray-600: #445068;
    --gray-700: #2D3A50;
    --gray-800: #1A2538;
    --gray-900: #0F1724;
    --body-bg: var(--bb-bg-primary);
    --card-bg: var(--bb-card-bg);
    --sidebar-bg: var(--bb-sidebar-bg);
    --header-bg: var(--bb-header-bg);
    --text-primary: var(--bb-text-primary);
    --text-secondary: var(--bb-text-secondary);
    --text-muted: var(--bb-text-muted);
    --text-light: #C0CAD8;
    --text-inverse: var(--bb-text-inverse);
    --border-color: var(--bb-border-color);
    --border-light: var(--bb-border-light);
    --border-dark: var(--bb-border-dark);
    --shadow-sm: var(--bb-shadow-sm);
    --shadow: var(--bb-shadow);
    --shadow-md: var(--bb-shadow-md);
    --shadow-lg: var(--bb-shadow-lg);
    --card-border-radius: var(--bb-card-border-radius);
    --card-shadow: var(--bb-card-shadow);
    --card-header-bg: var(--bb-card-header-bg);
    --btn-border-radius: 8px;
    --btn-padding: 0.5rem 1rem;
    --btn-font-weight: 600;
    --input-border-radius: 8px;
    --input-border-color: var(--bb-input-border);
    --input-focus-border: var(--bb-input-focus-border);
    --input-focus-shadow: var(--bb-input-focus-shadow);
    --table-header-bg: var(--bb-table-header-bg);
    --table-stripe-bg: var(--bb-table-stripe-bg);
    --table-hover-bg: var(--bb-table-hover-bg);
    --theme-primary: var(--accent);
    --theme-primary-hover: var(--accent-hover);
    --theme-primary-light: var(--accent-light);
    --theme-secondary: var(--gray-600);
    --theme-success: var(--bb-success);
    --theme-danger: var(--bb-danger);
    --theme-warning: var(--bb-warning);
    --theme-info: var(--bb-info);
    --theme-sidebar-bg: var(--bb-sidebar-bg);
    --theme-sidebar-text: var(--bb-sidebar-text);
    --theme-sidebar-header: var(--bb-sidebar-header-bg);
    --theme-sidebar-border: var(--bb-sidebar-border);
    --theme-sidebar-active: var(--bb-sidebar-active);
    --theme-body-bg: var(--bb-bg-primary);
    --theme-card-bg: var(--bb-card-bg);
    --theme-card-border: var(--bb-border-color);
    --theme-text: var(--bb-text-primary);
    --theme-text-muted: var(--bb-text-secondary);
    --theme-table-header: var(--bb-table-header-bg);
    --theme-table-stripe: var(--bb-table-stripe-bg);
    --theme-table-hover: var(--bb-table-hover-bg);
    --theme-input-bg: var(--bb-input-bg);
    --theme-input-border: var(--bb-input-border);
    --theme-input-focus: var(--bb-input-focus-shadow);
    --theme-navbar-bg: var(--bb-sidebar-bg);
    --theme-navbar-text: var(--bb-sidebar-text);

    /* === Glassmorphism — clean white glass with slight blue tint === */
    --bb-glass-bg: rgba(255, 255, 255, 0.60);
    --bb-glass-bg-strong: rgba(255, 255, 255, 0.80);
    --bb-glass-border: rgba(15, 23, 42, 0.10);
    --bb-glass-border-strong: rgba(15, 23, 42, 0.14);
    --bb-glass-blur: 20px;
    --bb-glass-blur-strong: 28px;
    --bb-glass-shadow: 0 2px 6px rgba(15,23,42,0.12), 0 8px 20px rgba(15,23,42,0.10);
    --bb-glass-shadow-lg: 0 4px 10px rgba(15,23,42,0.15), 0 16px 36px rgba(15,23,42,0.14);
    --bb-glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.20) 100%);
    --bb-glass-inner-glow: inset 0 1px 0 rgba(255,255,255,0.90), inset 0 0 20px rgba(255,255,255,0.15);
    --bb-glass-tint-opacity: 0.04;

    /* === Neumorphism — neutral gray/white with edge definition === */
    --bb-neu-bg: #E6E9EE;
    --bb-neu-raised: 6px 6px 14px #C8CFD8, -6px -6px 14px #FFFFFF;
    --bb-neu-raised-sm: 4px 4px 8px #C8CFD8, -4px -4px 8px #FFFFFF;
    --bb-neu-pressed: inset 4px 4px 10px #C8CFD8, inset -4px -4px 10px #FFFFFF;
    --bb-neu-pressed-sm: inset 2px 2px 6px #C8CFD8, inset -2px -2px 6px #FFFFFF;
    --bb-neu-flat: 2px 2px 6px #C8CFD8, -2px -2px 6px #FFFFFF;
    --bb-neu-btn: 4px 4px 10px #C8CFD8, -4px -4px 10px #FFFFFF;
    --bb-neu-btn-hover: 6px 6px 16px #BCC4CE, -6px -6px 16px #FFFFFF;
    --bb-neu-btn-active: inset 3px 3px 8px #C8CFD8, inset -3px -3px 8px #FFFFFF;

    /* === Bokeh Background — very subtle cool tones === */
    --bb-bokeh-1: rgba(61, 96, 128, 0.04);
    --bb-bokeh-2: rgba(40, 136, 160, 0.03);
    --bb-bokeh-3: rgba(107, 80, 176, 0.03);
    --bb-bokeh-4: rgba(184, 64, 96, 0.02);
    --bb-bokeh-5: rgba(38, 112, 184, 0.02);
    --bb-bokeh-opacity: 0.50;

    /* === Gradient Background — Clean Slate === */
    --bb-body-gradient: linear-gradient(
        135deg,
        #F4F6F9 0%,
        #F0F3F7 30%,
        #F4F6F9 55%,
        #F2F4F8 80%,
        #F4F6F9 100%
    );
}

/* =============================================================================
   BASE STYLES - Applied to all themes
   ============================================================================= */

body {
    background: var(--bb-body-gradient, var(--body-bg));
    background-attachment: fixed;
    background-color: var(--body-bg);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
}

/* =============================================================================
   SIDEBAR STYLES
   ============================================================================= */

#sidebar {
    background: var(--theme-sidebar-bg) !important;
    border-right: 1px solid var(--theme-sidebar-border) !important;
}

#sidebar .sidebar-header {
    background: var(--theme-sidebar-header) !important;
    border-bottom: 1px solid var(--theme-sidebar-border) !important;
}

#sidebar .sidebar-header h5 {
    color: var(--theme-sidebar-text) !important;
}

#sidebar .list-group-item {
    background: transparent !important;
    color: var(--theme-sidebar-text) !important;
    border-color: var(--theme-sidebar-border) !important;
    transition: background-color 0.15s ease;
}

#sidebar .list-group-item:hover {
    background: var(--theme-sidebar-active) !important;
}

#sidebar .list-group-item.active {
    background: var(--theme-sidebar-active) !important;
    font-weight: 600;
}

#sidebar .list-group-item i {
    margin-right: 8px;
    width: 20px;
    text-align: center;
}

#sidebar .p-3 {
    border-color: var(--theme-sidebar-border) !important;
}

#sidebar .bi-person-circle,
#sidebar strong {
    color: var(--theme-sidebar-text) !important;
}

/* Sidebar toggle */
.sidebar-toggle-flag {
    background: var(--accent) !important;
}

.sidebar-toggle-flag:hover {
    background: var(--accent-hover) !important;
}

/* =============================================================================
   CARD STYLES
   ============================================================================= */

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    color: var(--text-primary);
}

.card-header {
    background-color: var(--card-header-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.card-header h5,
.card-header .h5 {
    margin: 0;
    font-weight: 600;
}

.card-body {
    color: var(--text-primary);
    padding: 1.25rem;
}

.card-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Stat Cards with gradient backgrounds */
.card.bg-primary {
    background: var(--header-bg) !important;
    border: none !important;
}

.card.bg-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%) !important;
    border: none !important;
}

.card.bg-info {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-dark) 100%) !important;
    border: none !important;
}

.card.bg-warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%) !important;
    border: none !important;
}

.card.bg-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%) !important;
    border: none !important;
}

/* =============================================================================
   BUTTON STYLES
   ============================================================================= */

.btn {
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    padding: var(--btn-padding);
    transition: all 0.15s ease;
}

/* Primary Button - Uses accent color */
.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border: none;
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
    color: white;
}

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

/* Secondary Button */
.btn-secondary {
    background-color: var(--gray-200);
    border: 1px solid var(--gray-300);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--gray-300);
    border-color: var(--gray-400);
    color: var(--text-primary);
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    border: none;
    color: white;
}

.btn-success:hover {
    background: linear-gradient(135deg, var(--success-dark) 0%, var(--success) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(56, 183, 100, 0.35);
    color: white;
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
    border: none;
    color: white;
}

.btn-danger:hover {
    background: linear-gradient(135deg, var(--danger-dark) 0%, var(--danger) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.35);
    color: white;
}

/* Info Button */
.btn-info {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-dark) 100%);
    border: none;
    color: white;
}

.btn-info:hover {
    background: linear-gradient(135deg, var(--info-dark) 0%, var(--info) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 159, 255, 0.35);
    color: white;
}

/* Warning Button */
.btn-warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%);
    border: none;
    color: white;
}

.btn-warning:hover {
    background: linear-gradient(135deg, var(--warning-dark) 0%, var(--warning) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 169, 59, 0.35);
    color: white;
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--accent);
    border: 2px solid var(--accent);
    background: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border: 2px solid var(--gray-400);
    background: transparent;
}

.btn-outline-secondary:hover {
    background-color: var(--gray-200);
    border-color: var(--gray-400);
    color: var(--text-primary);
}

.btn-outline-success {
    color: var(--success);
    border: 2px solid var(--success);
    background: transparent;
}

.btn-outline-success:hover {
    background-color: var(--success);
    color: white;
}

.btn-outline-danger {
    color: var(--danger);
    border: 2px solid var(--danger);
    background: transparent;
}

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

/* Button Sizes */
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

/* =============================================================================
   FORM STYLES
   ============================================================================= */

.form-control,
.form-select {
    background-color: var(--card-bg);
    border: 2px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    color: var(--text-primary);
    padding: 0.625rem 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--input-focus-border);
    box-shadow: var(--input-focus-shadow);
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

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

/* Form floating labels */
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 4px);
    padding: 1rem 0.875rem;
}

.form-floating > label {
    padding: 1rem 0.875rem;
    color: var(--text-muted);
}

/* Checkboxes and Radios */
.form-check-input {
    border: 2px solid var(--gray-400);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: var(--input-focus-shadow);
}

.form-check-label {
    color: var(--text-primary);
}

/* Input Groups */
.input-group-text {
    background-color: var(--gray-100);
    border: 2px solid var(--input-border-color);
    color: var(--text-secondary);
}

/* =============================================================================
   TABLE STYLES
   ============================================================================= */

.table {
    color: var(--text-primary);
    margin-bottom: 0;
}

.table thead th {
    background-color: var(--table-header-bg);
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.75rem 1rem;
    white-space: normal;
    vertical-align: middle;
}

.table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    color: var(--text-primary);
}

.table tbody tr {
    background-color: var(--bb-table-row-bg, var(--card-bg));
}

.table tbody td,
.table tbody th {
    background-color: inherit;
}

/* Override Bootstrap 5.3 internal striping variable */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--bb-table-stripe-solid, var(--table-stripe-bg));
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: transparent;
    background-color: inherit;
}

.table-hover > tbody > tr:hover {
    background-color: var(--bb-table-hover-solid, var(--table-hover-bg));
}

.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: transparent;
    background-color: inherit;
}

.table-bordered {
    border: 1px solid var(--border-color);
}

.table-bordered th,
.table-bordered td {
    border: 1px solid var(--border-color);
}

/* =============================================================================
   ALERT STYLES
   ============================================================================= */

.alert {
    border-radius: var(--card-border-radius);
    border-left: 4px solid;
    padding: 1rem 1.25rem;
}

.alert-primary {
    background-color: var(--accent-light);
    border-left-color: var(--accent);
    color: var(--text-primary);
}

.alert-success {
    background-color: var(--success-light);
    border-left-color: var(--success);
    color: var(--text-primary);
}

.alert-danger {
    background-color: var(--danger-light);
    border-left-color: var(--danger);
    color: var(--text-primary);
}

.alert-warning {
    background-color: var(--warning-light);
    border-left-color: var(--warning);
    color: var(--text-primary);
}

.alert-info {
    background-color: var(--info-light);
    border-left-color: var(--info);
    color: var(--text-primary);
}

/* =============================================================================
   MODAL STYLES
   ============================================================================= */

.modal-content {
    background-color: var(--card-bg);
    border: none;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
}

.modal-header {
    background-color: var(--card-header-bg);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
    padding: 1rem 1.25rem;
}

.modal-title {
    font-weight: 600;
}

.modal-body {
    padding: 1.25rem;
}

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

/* =============================================================================
   BADGE STYLES — High contrast text for readability
   ============================================================================= */

.badge {
    border-radius: 8px;
    font-weight: 700;
    padding: 0.4em 0.7em;
    letter-spacing: 0.02em;
}

.badge.bg-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
    color: white !important;
}

.badge.bg-success {
    background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%) !important;
    color: white !important;
}

.badge.bg-danger {
    background: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%) !important;
    color: white !important;
}

.badge.bg-warning {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning-dark) 100%) !important;
    color: white !important;
}

.badge.bg-info {
    background: linear-gradient(135deg, var(--info) 0%, var(--info-dark) 100%) !important;
    color: white !important;
}

.badge.bg-secondary {
    background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-600) 100%) !important;
}

/* =============================================================================
   DROPDOWN STYLES
   ============================================================================= */

.dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-md);
    padding: 0.5rem;
}

.dropdown-item {
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.5rem 1rem;
}

.dropdown-item:hover {
    background-color: var(--table-hover-bg);
    color: var(--text-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--accent);
    color: white;
}

.dropdown-divider {
    border-color: var(--border-color);
}

/* =============================================================================
   PAGINATION STYLES
   ============================================================================= */

.pagination {
    gap: 0.25rem;
}

.page-link {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--accent);
    padding: 0.5rem 0.875rem;
}

.page-link:hover {
    background-color: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}

.page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

.page-item.disabled .page-link {
    background-color: var(--gray-100);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* =============================================================================
   NAV TABS STYLES
   ============================================================================= */

.nav-tabs {
    border-bottom: 2px solid var(--border-color);
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    margin-bottom: -2px;
    padding: 0.75rem 1.25rem;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--gray-400);
    color: var(--text-primary);
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    border-bottom-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* =============================================================================
   LIST GROUP STYLES
   ============================================================================= */

.list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
    padding: 0.875rem 1.25rem;
}

.list-group-item:first-child {
    border-top-left-radius: var(--card-border-radius);
    border-top-right-radius: var(--card-border-radius);
}

.list-group-item:last-child {
    border-bottom-left-radius: var(--card-border-radius);
    border-bottom-right-radius: var(--card-border-radius);
}

.list-group-item-action:hover {
    background-color: var(--table-hover-bg);
}

.list-group-item.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* =============================================================================
   PROGRESS BAR STYLES
   ============================================================================= */

.progress {
    background-color: var(--gray-200);
    border-radius: 12px;
    height: 0.625rem;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--accent);
}

.progress-bar.bg-success {
    background-color: var(--success) !important;
}

.progress-bar.bg-danger {
    background-color: var(--danger) !important;
}

.progress-bar.bg-warning {
    background-color: var(--warning) !important;
}

.progress-bar.bg-info {
    background-color: var(--info) !important;
}

/* =============================================================================
   TEXT UTILITIES
   ============================================================================= */

.text-muted {
    color: var(--text-muted) !important;
}

.text-primary {
    color: var(--accent) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

/* =============================================================================
   LINK STYLES
   ============================================================================= */

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* =============================================================================
   QUICK SEARCH RESULTS
   ============================================================================= */

#quickSearchResults {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--card-border-radius) !important;
    box-shadow: var(--shadow-md) !important;
}

#quickSearchResults a {
    color: var(--text-primary) !important;
    border-radius: 8px;
}

#quickSearchResults a:hover {
    background-color: var(--table-hover-bg) !important;
    text-decoration: none;
}

/* =============================================================================
   PAGE HEADER STYLES
   ============================================================================= */

.page-header {
    background: var(--header-bg);
    border-radius: var(--card-border-radius);
    color: white;
    margin-bottom: 1.5rem;
    padding: 1.5rem 2rem;
}

.page-header h2 {
    margin: 0;
    font-weight: 600;
}

.page-header p {
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
}

/* =============================================================================
   BREADCRUMB STYLES
   ============================================================================= */

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-item a {
    color: var(--accent);
}

.breadcrumb-item.active {
    color: var(--text-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted);
}

/* =============================================================================
   TOOLTIP STYLES
   ============================================================================= */

.tooltip-inner {
    background-color: var(--gray-800);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--gray-800);
}

/* =============================================================================
   EMPTY STATE STYLES
   ============================================================================= */

.empty-state {
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state i {
    color: var(--text-muted);
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* =============================================================================
   SCROLL & SELECTION
   ============================================================================= */

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

::-webkit-scrollbar-track {
    background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

::selection {
    background-color: var(--accent-light);
    color: var(--text-primary);
}

/* =============================================================================
   THEME TOGGLE BUTTON STYLES
   ============================================================================= */

.bb-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bb-bg-tertiary, var(--gray-100));
    border: 1px solid var(--bb-border-color, var(--border-color));
    border-radius: 8px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--bb-text-primary, var(--text-primary));
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.15s ease;
    line-height: 1.5;
}

.bb-theme-toggle:hover {
    background: var(--bb-bg-elevated, var(--gray-200));
    border-color: var(--bb-cerulean, var(--accent));
}

.bb-theme-toggle .theme-icon {
    font-size: 1rem;
}

.bb-theme-toggle .theme-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =============================================================================
   ACCORDION THEME OVERRIDES (for export column selector etc.)
   ============================================================================= */

.accordion-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.accordion-button {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.accordion-button:not(.collapsed) {
    background-color: var(--card-header-bg);
    color: var(--text-primary);
}

.accordion-button::after {
    filter: var(--bb-accordion-arrow-filter, none);
}

/* Dark/medium theme accordion arrow fix */
[data-theme="dark"] .accordion-button::after,
[data-theme="medium"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.accordion-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* =============================================================================
   BOOTSTRAP UTILITY CLASS OVERRIDES FOR DARK/MEDIUM THEMES
   Override hardcoded bg-white and bg-light so they respect the active theme.
   ============================================================================= */

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background-color: var(--bb-bg-secondary) !important;
}

[data-theme="medium"] .bg-white,
[data-theme="medium"] .bg-light {
    background-color: var(--bb-bg-secondary) !important;
}

[data-theme="dark"] .text-dark,
[data-theme="medium"] .text-dark {
    color: var(--bb-text-primary) !important;
}

[data-theme="dark"] .border,
[data-theme="medium"] .border {
    border-color: var(--bb-border-color) !important;
}

[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
    background-color: var(--bb-table-header-bg) !important;
    color: var(--bb-text-primary) !important;
}

[data-theme="medium"] .table-light,
[data-theme="medium"] .table-light th,
[data-theme="medium"] .table-light td {
    background-color: var(--bb-table-header-bg) !important;
    color: var(--bb-text-primary) !important;
}

/* =============================================================================
   SIDEBAR SECTION HEADERS — ensure visibility across all themes
   ============================================================================= */

#sidebar .sidebar-section-header {
    color: var(--theme-sidebar-text) !important;
}

/* =============================================================================
   ADMIN HUB CARD OVERRIDES FOR DARK THEMES
   Override border-dark and bg-dark bg-opacity-10 which become invisible on
   dark backgrounds.
   ============================================================================= */

[data-theme="dark"] .card.border-dark,
[data-theme="medium"] .card.border-dark {
    border-color: var(--bb-border-color) !important;
}

[data-theme="dark"] .bg-dark.bg-opacity-10,
[data-theme="medium"] .bg-dark.bg-opacity-10 {
    background-color: rgba(148, 163, 184, 0.15) !important;
}

/* Fix warning badge contrast — white text on warning bg */
.badge.bg-warning {
    color: white !important;
}

/* =============================================================================
   HEADING COLOR OVERRIDES FOR DARK/MEDIUM THEMES
   Bootstrap 5 sets heading color to #212529 (near-black) which is invisible
   on dark backgrounds. Override all heading levels explicitly.
   ============================================================================= */

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3,
[data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 {
    color: var(--bb-text-primary);
}

[data-theme="medium"] h1, [data-theme="medium"] h2, [data-theme="medium"] h3,
[data-theme="medium"] h4, [data-theme="medium"] h5, [data-theme="medium"] h6,
[data-theme="medium"] .h1, [data-theme="medium"] .h2, [data-theme="medium"] .h3,
[data-theme="medium"] .h4, [data-theme="medium"] .h5, [data-theme="medium"] .h6 {
    color: var(--bb-text-primary);
}

/* Fix btn-close visibility in dark themes */
[data-theme="dark"] .btn-close,
[data-theme="medium"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* =============================================================================
   DYNAMIC BACKGROUND — Subtle animated gradient shift
   Creates a slowly moving warm gradient behind the static gradient
   ============================================================================= */

@keyframes bb-bg-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

html[data-theme="dark"] body,
html[data-theme="medium"] body {
    background-size: 200% 200%;
    animation: bb-bg-shift 30s ease-in-out infinite;
}

:root body,
[data-theme="lite"] body {
    background-size: 200% 200%;
    animation: bb-bg-shift 35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none !important;
        background-size: auto !important;
    }
}