/**
 * Color Palette System for Privacy Platform
 * Legacy palette classes plus the canonical Governance Teal identity.
 * Each palette has Light + Dark mode variants; apple-vibrancy.css maps
 * production classes to one stable brand identity.
 * Dark mode is toggled independently by each user
 *
 * CSS class convention:
 *   .palette-trust-blue
 *   .palette-modern-teal
 *   .palette-purple-privacy
 *   .palette-minimal-corporate
 *   .palette-refined-teal (system default)
 *
 * Combined with .dark-mode for dark variants
 */

/* ==========================================================================
   PALETTE 1: TRUST BLUE (Enterprise Security Standard)
   Phù hợp: Enterprise, Bank, EU Market (GDPR-heavy), Compliance Platform
   ========================================================================== */

/* --- Trust Blue: Light Mode --- */
.palette-trust-blue {
    /* Primary scale */
    --pp-palette-50: #EFF6FF;
    --pp-palette-100: #DBEAFE;
    --pp-palette-200: #BFDBFE;
    --pp-palette-300: #93C5FD;
    --pp-palette-400: #60A5FA;
    --pp-palette-500: #3B82F6;
    --pp-palette-600: #2563EB;
    --pp-palette-700: #1D4ED8;
    --pp-palette-800: #1E40AF;
    --pp-palette-900: #1E3A8A;

    /* Neutral scale */
    --pp-neutral-50: #F8FAFC;
    --pp-neutral-100: #F1F5F9;
    --pp-neutral-200: #E2E8F0;
    --pp-neutral-300: #CBD5E1;
    --pp-neutral-400: #94A3B8;
    --pp-neutral-500: #64748B;
    --pp-neutral-600: #475569;
    --pp-neutral-700: #334155;
    --pp-neutral-800: #1E293B;
    --pp-neutral-900: #0F172A;

    /* Theme mapping — Light */
    --pp-primary: #1D4ED8;
    --pp-primary-hover: #1E40AF;
    --pp-primary-rgb: 29, 78, 216;
    --pp-bg-body: #F8FAFC;
    --pp-bg-surface: #FFFFFF;
    --pp-bg-surface-elevated: #FFFFFF;
    --pp-bg-input: #FFFFFF;
    --pp-bg-hover: #F1F5F9;
    --pp-bg-active: #E2E8F0;
    --pp-bg-code: #F8FAFC;
    --pp-text-primary: #0F172A;
    --pp-text-secondary: #475569;
    --pp-text-muted: #94A3B8;
    --pp-text-inverse: #FFFFFF;
    --pp-text-link: #1D4ED8;
    --pp-border-color: #E2E8F0;
    --pp-border-color-light: #F1F5F9;
    --pp-border-color-dark: #CBD5E1;
    --pp-navbar-bg: #1D4ED8;
    --pp-navbar-text: #FFFFFF;
    --pp-sidebar-bg: #FFFFFF;
    --pp-sidebar-text: #0F172A;
    --pp-sidebar-hover-bg: #F1F5F9;
    --pp-sidebar-active-bg: #EFF6FF;
    --pp-sidebar-active-text: #1D4ED8;
    --pp-card-bg: #FFFFFF;
    --pp-card-border: #E2E8F0;
    --pp-card-header-bg: #F8FAFC;
    --pp-table-bg: #FFFFFF;
    --pp-table-striped-bg: #F8FAFC;
    --pp-table-hover-bg: #F1F5F9;
    --pp-table-border: #E2E8F0;
    --pp-input-bg: #FFFFFF;
    --pp-input-border: #CBD5E1;
    --pp-input-focus-border: #93C5FD;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(29, 78, 216, 0.25);
    --pp-input-disabled-bg: #E2E8F0;
    --pp-modal-bg: #FFFFFF;
    --pp-modal-header-bg: #F8FAFC;
    --pp-badge-primary-bg: #1D4ED8;
    --pp-badge-secondary-bg: #64748B;
}

/* --- Trust Blue: Dark Mode --- */
.palette-trust-blue.dark-mode,
.palette-trust-blue[data-bs-theme="dark"] {
    --pp-primary: #60A5FA;
    --pp-primary-hover: #93C5FD;
    --pp-primary-rgb: 96, 165, 250;
    --pp-bg-body: #0B1220;
    --pp-bg-surface: #1E293B;
    --pp-bg-surface-elevated: #334155;
    --pp-bg-input: #334155;
    --pp-bg-hover: #334155;
    --pp-bg-active: #475569;
    --pp-bg-code: #334155;
    --pp-text-primary: #F1F5F9;
    --pp-text-secondary: #CBD5E1;
    --pp-text-muted: #64748B;
    --pp-text-inverse: #0F172A;
    --pp-text-link: #60A5FA;
    --pp-border-color: #475569;
    --pp-border-color-light: #334155;
    --pp-border-color-dark: #64748B;
    --pp-navbar-bg: #1E293B;
    --pp-navbar-text: #F1F5F9;
    --pp-sidebar-bg: #1E293B;
    --pp-sidebar-text: #F1F5F9;
    --pp-sidebar-hover-bg: #334155;
    --pp-sidebar-active-bg: #1E3A8A;
    --pp-sidebar-active-text: #93C5FD;
    --pp-card-bg: #1E293B;
    --pp-card-border: #475569;
    --pp-card-header-bg: #334155;
    --pp-table-bg: #1E293B;
    --pp-table-striped-bg: #334155;
    --pp-table-hover-bg: #475569;
    --pp-table-border: #475569;
    --pp-input-bg: #334155;
    --pp-input-border: #64748B;
    --pp-input-focus-border: #60A5FA;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
    --pp-input-disabled-bg: #475569;
    --pp-modal-bg: #1E293B;
    --pp-modal-header-bg: #334155;
    --pp-badge-primary-bg: #2563EB;
    --pp-badge-secondary-bg: #64748B;
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --pp-toast-bg: #334155;
    --pp-toast-border: #475569;
    --pp-chart-grid: #475569;
    --pp-chart-text: #94A3B8;
    --pp-chart-tooltip-bg: #1E293B;
    --pp-chart-tooltip-border: #475569;
    --pp-code-bg: #334155;
    --pp-code-text: #93C5FD;
    --pp-scrollbar-track: #1E293B;
    --pp-scrollbar-thumb: #475569;
    --pp-scrollbar-thumb-hover: #64748B;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   PALETTE 2: MODERN TEAL (Privacy Innovation)
   Phù hợp: SaaS, SME, VN & US market
   ========================================================================== */

/* --- Modern Teal: Light Mode --- */
.palette-modern-teal {
    --pp-palette-50: #ECFEFF;
    --pp-palette-100: #CFFAFE;
    --pp-palette-200: #A5F3FC;
    --pp-palette-300: #67E8F9;
    --pp-palette-400: #22D3EE;
    --pp-palette-500: #06B6D4;
    --pp-palette-600: #0891B2;
    --pp-palette-700: #0E7490;
    --pp-palette-800: #155E75;
    --pp-palette-900: #164E63;

    --pp-neutral-50: #F8FAFC;
    --pp-neutral-100: #F1F5F9;
    --pp-neutral-200: #E2E8F0;
    --pp-neutral-300: #CBD5E1;
    --pp-neutral-400: #94A3B8;
    --pp-neutral-500: #64748B;
    --pp-neutral-600: #475569;
    --pp-neutral-700: #334155;
    --pp-neutral-800: #1E293B;
    --pp-neutral-900: #0F172A;

    /* Theme mapping — Light */
    --pp-primary: #0E7490;
    --pp-primary-hover: #155E75;
    --pp-primary-rgb: 14, 116, 144;
    --pp-bg-body: #F8FAFC;
    --pp-bg-surface: #FFFFFF;
    --pp-bg-surface-elevated: #FFFFFF;
    --pp-bg-input: #FFFFFF;
    --pp-bg-hover: #F1F5F9;
    --pp-bg-active: #E2E8F0;
    --pp-bg-code: #F8FAFC;
    --pp-text-primary: #0F172A;
    --pp-text-secondary: #475569;
    --pp-text-muted: #94A3B8;
    --pp-text-inverse: #FFFFFF;
    --pp-text-link: #0E7490;
    --pp-border-color: #E2E8F0;
    --pp-border-color-light: #F1F5F9;
    --pp-border-color-dark: #CBD5E1;
    --pp-navbar-bg: #0E7490;
    --pp-navbar-text: #FFFFFF;
    --pp-sidebar-bg: #FFFFFF;
    --pp-sidebar-text: #0F172A;
    --pp-sidebar-hover-bg: #F1F5F9;
    --pp-sidebar-active-bg: #ECFEFF;
    --pp-sidebar-active-text: #0E7490;
    --pp-card-bg: #FFFFFF;
    --pp-card-border: #E2E8F0;
    --pp-card-header-bg: #F8FAFC;
    --pp-table-bg: #FFFFFF;
    --pp-table-striped-bg: #F8FAFC;
    --pp-table-hover-bg: #F1F5F9;
    --pp-table-border: #E2E8F0;
    --pp-input-bg: #FFFFFF;
    --pp-input-border: #CBD5E1;
    --pp-input-focus-border: #67E8F9;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(14, 116, 144, 0.25);
    --pp-input-disabled-bg: #E2E8F0;
    --pp-modal-bg: #FFFFFF;
    --pp-modal-header-bg: #F8FAFC;
    --pp-badge-primary-bg: #0E7490;
    --pp-badge-secondary-bg: #2563EB;
}

/* --- Modern Teal: Dark Mode --- */
.palette-modern-teal.dark-mode,
.palette-modern-teal[data-bs-theme="dark"] {
    --pp-primary: #22D3EE;
    --pp-primary-hover: #67E8F9;
    --pp-primary-rgb: 34, 211, 238;
    --pp-bg-body: #0B1220;
    --pp-bg-surface: #1E293B;
    --pp-bg-surface-elevated: #334155;
    --pp-bg-input: #334155;
    --pp-bg-hover: #334155;
    --pp-bg-active: #475569;
    --pp-bg-code: #334155;
    --pp-text-primary: #F1F5F9;
    --pp-text-secondary: #CBD5E1;
    --pp-text-muted: #64748B;
    --pp-text-inverse: #0F172A;
    --pp-text-link: #22D3EE;
    --pp-border-color: #475569;
    --pp-border-color-light: #334155;
    --pp-border-color-dark: #64748B;
    --pp-navbar-bg: #1E293B;
    --pp-navbar-text: #F1F5F9;
    --pp-sidebar-bg: #1E293B;
    --pp-sidebar-text: #F1F5F9;
    --pp-sidebar-hover-bg: #334155;
    --pp-sidebar-active-bg: #164E63;
    --pp-sidebar-active-text: #22D3EE;
    --pp-card-bg: #1E293B;
    --pp-card-border: #475569;
    --pp-card-header-bg: #334155;
    --pp-table-bg: #1E293B;
    --pp-table-striped-bg: #334155;
    --pp-table-hover-bg: #475569;
    --pp-table-border: #475569;
    --pp-input-bg: #334155;
    --pp-input-border: #64748B;
    --pp-input-focus-border: #22D3EE;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(34, 211, 238, 0.25);
    --pp-input-disabled-bg: #475569;
    --pp-modal-bg: #1E293B;
    --pp-modal-header-bg: #334155;
    --pp-badge-primary-bg: #0891B2;
    --pp-badge-secondary-bg: #2563EB;
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --pp-toast-bg: #334155;
    --pp-toast-border: #475569;
    --pp-chart-grid: #475569;
    --pp-chart-text: #94A3B8;
    --pp-chart-tooltip-bg: #1E293B;
    --pp-chart-tooltip-border: #475569;
    --pp-code-bg: #334155;
    --pp-code-text: #67E8F9;
    --pp-scrollbar-track: #1E293B;
    --pp-scrollbar-thumb: #475569;
    --pp-scrollbar-thumb-hover: #64748B;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   PALETTE 3: PURPLE PRIVACY (AI / Data Governance)
   Phù hợp: AI Compliance, Automation SaaS, US Market
   ========================================================================== */

/* --- Purple Privacy: Light Mode --- */
.palette-purple-privacy {
    --pp-palette-50: #F5F3FF;
    --pp-palette-100: #EDE9FE;
    --pp-palette-200: #DDD6FE;
    --pp-palette-300: #C4B5FD;
    --pp-palette-400: #A78BFA;
    --pp-palette-500: #8B5CF6;
    --pp-palette-600: #7C3AED;
    --pp-palette-700: #6D28D9;
    --pp-palette-800: #5B21B6;
    --pp-palette-900: #4C1D95;

    --pp-neutral-50: #FAFAFA;
    --pp-neutral-100: #F5F5F5;
    --pp-neutral-200: #E5E5E5;
    --pp-neutral-300: #D4D4D4;
    --pp-neutral-400: #A3A3A3;
    --pp-neutral-500: #737373;
    --pp-neutral-600: #525252;
    --pp-neutral-700: #404040;
    --pp-neutral-800: #262626;
    --pp-neutral-900: #171717;

    /* Theme mapping — Light */
    --pp-primary: #6D28D9;
    --pp-primary-hover: #5B21B6;
    --pp-primary-rgb: 109, 40, 217;
    --pp-bg-body: #FAFAFA;
    --pp-bg-surface: #FFFFFF;
    --pp-bg-surface-elevated: #FFFFFF;
    --pp-bg-input: #FFFFFF;
    --pp-bg-hover: #F5F5F5;
    --pp-bg-active: #E5E5E5;
    --pp-bg-code: #F5F3FF;
    --pp-text-primary: #171717;
    --pp-text-secondary: #525252;
    --pp-text-muted: #A3A3A3;
    --pp-text-inverse: #FFFFFF;
    --pp-text-link: #6D28D9;
    --pp-border-color: #E5E5E5;
    --pp-border-color-light: #F5F5F5;
    --pp-border-color-dark: #D4D4D4;
    --pp-navbar-bg: #6D28D9;
    --pp-navbar-text: #FFFFFF;
    --pp-sidebar-bg: #FFFFFF;
    --pp-sidebar-text: #171717;
    --pp-sidebar-hover-bg: #F5F5F5;
    --pp-sidebar-active-bg: #F5F3FF;
    --pp-sidebar-active-text: #6D28D9;
    --pp-card-bg: #FFFFFF;
    --pp-card-border: #E5E5E5;
    --pp-card-header-bg: #FAFAFA;
    --pp-table-bg: #FFFFFF;
    --pp-table-striped-bg: #FAFAFA;
    --pp-table-hover-bg: #F5F5F5;
    --pp-table-border: #E5E5E5;
    --pp-input-bg: #FFFFFF;
    --pp-input-border: #D4D4D4;
    --pp-input-focus-border: #C4B5FD;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(109, 40, 217, 0.25);
    --pp-input-disabled-bg: #E5E5E5;
    --pp-modal-bg: #FFFFFF;
    --pp-modal-header-bg: #FAFAFA;
    --pp-badge-primary-bg: #6D28D9;
    --pp-badge-secondary-bg: #737373;
}

/* --- Purple Privacy: Dark Mode --- */
.palette-purple-privacy.dark-mode,
.palette-purple-privacy[data-bs-theme="dark"] {
    --pp-primary: #A78BFA;
    --pp-primary-hover: #C4B5FD;
    --pp-primary-rgb: 167, 139, 250;
    --pp-bg-body: #0F0C29;
    --pp-bg-surface: #1B1A3A;
    --pp-bg-surface-elevated: #2D2B52;
    --pp-bg-input: #2D2B52;
    --pp-bg-hover: #2D2B52;
    --pp-bg-active: #3F3D6B;
    --pp-bg-code: #2D2B52;
    --pp-text-primary: #F5F5F5;
    --pp-text-secondary: #D4D4D4;
    --pp-text-muted: #737373;
    --pp-text-inverse: #171717;
    --pp-text-link: #A78BFA;
    --pp-border-color: #3F3D6B;
    --pp-border-color-light: #2D2B52;
    --pp-border-color-dark: #525283;
    --pp-navbar-bg: #1B1A3A;
    --pp-navbar-text: #F5F5F5;
    --pp-sidebar-bg: #1B1A3A;
    --pp-sidebar-text: #F5F5F5;
    --pp-sidebar-hover-bg: #2D2B52;
    --pp-sidebar-active-bg: #4C1D95;
    --pp-sidebar-active-text: #C4B5FD;
    --pp-card-bg: #1B1A3A;
    --pp-card-border: #3F3D6B;
    --pp-card-header-bg: #2D2B52;
    --pp-table-bg: #1B1A3A;
    --pp-table-striped-bg: #2D2B52;
    --pp-table-hover-bg: #3F3D6B;
    --pp-table-border: #3F3D6B;
    --pp-input-bg: #2D2B52;
    --pp-input-border: #525283;
    --pp-input-focus-border: #A78BFA;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(167, 139, 250, 0.25);
    --pp-input-disabled-bg: #3F3D6B;
    --pp-modal-bg: #1B1A3A;
    --pp-modal-header-bg: #2D2B52;
    --pp-badge-primary-bg: #7C3AED;
    --pp-badge-secondary-bg: #737373;
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --pp-toast-bg: #2D2B52;
    --pp-toast-border: #3F3D6B;
    --pp-chart-grid: #3F3D6B;
    --pp-chart-text: #A3A3A3;
    --pp-chart-tooltip-bg: #1B1A3A;
    --pp-chart-tooltip-border: #3F3D6B;
    --pp-code-bg: #2D2B52;
    --pp-code-text: #C4B5FD;
    --pp-scrollbar-track: #1B1A3A;
    --pp-scrollbar-thumb: #3F3D6B;
    --pp-scrollbar-thumb-hover: #525283;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   PALETTE 4: MINIMAL CORPORATE (Bank / Government)
   Phù hợp: Bank, Government, EU compliance
   ========================================================================== */

/* --- Minimal Corporate: Light Mode --- */
.palette-minimal-corporate {
    --pp-palette-50: #F8FAFC;
    --pp-palette-100: #F1F5F9;
    --pp-palette-200: #E2E8F0;
    --pp-palette-300: #CBD5E1;
    --pp-palette-400: #94A3B8;
    --pp-palette-500: #64748B;
    --pp-palette-600: #475569;
    --pp-palette-700: #334155;
    --pp-palette-800: #1E293B;
    --pp-palette-900: #0F172A;

    --pp-neutral-50: #F8FAFC;
    --pp-neutral-100: #F1F5F9;
    --pp-neutral-200: #E2E8F0;
    --pp-neutral-300: #CBD5E1;
    --pp-neutral-400: #94A3B8;
    --pp-neutral-500: #64748B;
    --pp-neutral-600: #475569;
    --pp-neutral-700: #334155;
    --pp-neutral-800: #1E293B;
    --pp-neutral-900: #0F172A;

    /* Theme mapping — Light */
    --pp-primary: #1E293B;
    --pp-primary-hover: #0F172A;
    --pp-primary-rgb: 30, 41, 59;
    --pp-bg-body: #F8FAFC;
    --pp-bg-surface: #FFFFFF;
    --pp-bg-surface-elevated: #FFFFFF;
    --pp-bg-input: #FFFFFF;
    --pp-bg-hover: #F1F5F9;
    --pp-bg-active: #E2E8F0;
    --pp-bg-code: #F8FAFC;
    --pp-text-primary: #0F172A;
    --pp-text-secondary: #475569;
    --pp-text-muted: #94A3B8;
    --pp-text-inverse: #FFFFFF;
    --pp-text-link: #2563EB;
    --pp-border-color: #E2E8F0;
    --pp-border-color-light: #F1F5F9;
    --pp-border-color-dark: #CBD5E1;
    --pp-navbar-bg: #1E293B;
    --pp-navbar-text: #FFFFFF;
    --pp-sidebar-bg: #FFFFFF;
    --pp-sidebar-text: #0F172A;
    --pp-sidebar-hover-bg: #F1F5F9;
    --pp-sidebar-active-bg: #E2E8F0;
    --pp-sidebar-active-text: #1E293B;
    --pp-card-bg: #FFFFFF;
    --pp-card-border: #E2E8F0;
    --pp-card-header-bg: #F8FAFC;
    --pp-table-bg: #FFFFFF;
    --pp-table-striped-bg: #F8FAFC;
    --pp-table-hover-bg: #F1F5F9;
    --pp-table-border: #E2E8F0;
    --pp-input-bg: #FFFFFF;
    --pp-input-border: #CBD5E1;
    --pp-input-focus-border: #93C5FD;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
    --pp-input-disabled-bg: #E2E8F0;
    --pp-modal-bg: #FFFFFF;
    --pp-modal-header-bg: #F8FAFC;
    --pp-badge-primary-bg: #1E293B;
    --pp-badge-secondary-bg: #64748B;
}

/* --- Minimal Corporate: Dark Mode --- */
.palette-minimal-corporate.dark-mode,
.palette-minimal-corporate[data-bs-theme="dark"] {
    --pp-primary: #94A3B8;
    --pp-primary-hover: #CBD5E1;
    --pp-primary-rgb: 148, 163, 184;
    --pp-bg-body: #020617;
    --pp-bg-surface: #0F172A;
    --pp-bg-surface-elevated: #1E293B;
    --pp-bg-input: #1E293B;
    --pp-bg-hover: #1E293B;
    --pp-bg-active: #334155;
    --pp-bg-code: #1E293B;
    --pp-text-primary: #F1F5F9;
    --pp-text-secondary: #CBD5E1;
    --pp-text-muted: #64748B;
    --pp-text-inverse: #0F172A;
    --pp-text-link: #60A5FA;
    --pp-border-color: #334155;
    --pp-border-color-light: #1E293B;
    --pp-border-color-dark: #475569;
    --pp-navbar-bg: #0F172A;
    --pp-navbar-text: #F1F5F9;
    --pp-sidebar-bg: #0F172A;
    --pp-sidebar-text: #F1F5F9;
    --pp-sidebar-hover-bg: #1E293B;
    --pp-sidebar-active-bg: #334155;
    --pp-sidebar-active-text: #CBD5E1;
    --pp-card-bg: #0F172A;
    --pp-card-border: #334155;
    --pp-card-header-bg: #1E293B;
    --pp-table-bg: #0F172A;
    --pp-table-striped-bg: #1E293B;
    --pp-table-hover-bg: #334155;
    --pp-table-border: #334155;
    --pp-input-bg: #1E293B;
    --pp-input-border: #475569;
    --pp-input-focus-border: #60A5FA;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
    --pp-input-disabled-bg: #334155;
    --pp-modal-bg: #0F172A;
    --pp-modal-header-bg: #1E293B;
    --pp-badge-primary-bg: #475569;
    --pp-badge-secondary-bg: #64748B;
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --pp-toast-bg: #1E293B;
    --pp-toast-border: #334155;
    --pp-chart-grid: #334155;
    --pp-chart-text: #94A3B8;
    --pp-chart-tooltip-bg: #0F172A;
    --pp-chart-tooltip-border: #334155;
    --pp-code-bg: #1E293B;
    --pp-code-text: #94A3B8;
    --pp-scrollbar-track: #0F172A;
    --pp-scrollbar-thumb: #334155;
    --pp-scrollbar-thumb-hover: #475569;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   PALETTE 5: CYAN ELECTRIC (System Default — Mobility Tech / Eco Branding)
   Phù hợp: SaaS, App Mobile, Smart City, Startup năng động
   Primary: #01CDD3 (Cyan) + Accent: #FFCA00 (Electric Yellow)
   ========================================================================== */

/* --- Cyan Electric: Light Mode (legacy opt-in palette) --- */
.palette-cyan-electric {
    /* Primary Cyan scale */
    --pp-palette-50: #E6FAFB;
    --pp-palette-100: #C7F4F6;
    --pp-palette-200: #99EBEE;
    --pp-palette-300: #66E0E4;
    --pp-palette-400: #33D6DB;
    --pp-palette-500: #01CDD3;
    --pp-palette-600: #01B6BC;
    --pp-palette-700: #019FA4;
    --pp-palette-800: #01787C;
    --pp-palette-900: #015356;

    /* Neutral Cool Gray scale */
    --pp-neutral-50: #F8FAFB;
    --pp-neutral-100: #F1F5F7;
    --pp-neutral-200: #E2E8EE;
    --pp-neutral-300: #CBD5DF;
    --pp-neutral-400: #94A3B8;
    --pp-neutral-500: #64748B;
    --pp-neutral-600: #475569;
    --pp-neutral-700: #334155;
    --pp-neutral-800: #1E293B;
    --pp-neutral-900: #0F172A;

    /* Accent — Electric Yellow */
    --pp-accent-50: #FFF9E0;
    --pp-accent-100: #FFF1B3;
    --pp-accent-200: #FFE680;
    --pp-accent-300: #FFDB4D;
    --pp-accent-400: #FFD426;
    --pp-accent-500: #FFCA00;
    --pp-accent-600: #E6B600;
    --pp-accent-700: #CC9F00;
    --pp-accent-800: #A67F00;
    --pp-accent-900: #7A5E00;

    /* Theme mapping — Light */
    --pp-primary: #01CDD3;
    --pp-primary-hover: #01B6BC;
    --pp-primary-rgb: 1, 205, 211;
    --pp-bg-body: #F8FAFB;
    --pp-bg-surface: #FFFFFF;
    --pp-bg-surface-elevated: #FFFFFF;
    --pp-bg-input: #FFFFFF;
    --pp-bg-hover: #F1F5F7;
    --pp-bg-active: #E2E8EE;
    --pp-bg-code: #F8FAFB;
    --pp-text-primary: #1E293B;
    --pp-text-secondary: #64748B;
    --pp-text-muted: #94A3B8;
    --pp-text-inverse: #0F172A;
    --pp-text-link: #019FA4;
    --pp-border-color: #E2E8EE;
    --pp-border-color-light: #F1F5F7;
    --pp-border-color-dark: #CBD5DF;
    --pp-navbar-bg: #01CDD3;
    --pp-navbar-text: #0F172A;
    --pp-sidebar-bg: #FFFFFF;
    --pp-sidebar-text: #1E293B;
    --pp-sidebar-hover-bg: #F1F5F7;
    --pp-sidebar-active-bg: #E6FAFB;
    --pp-sidebar-active-text: #01787C;
    --pp-card-bg: #FFFFFF;
    --pp-card-border: #E2E8EE;
    --pp-card-header-bg: #F8FAFB;
    --pp-table-bg: #FFFFFF;
    --pp-table-striped-bg: #F8FAFB;
    --pp-table-hover-bg: #F1F5F7;
    --pp-table-border: #E2E8EE;
    --pp-input-bg: #FFFFFF;
    --pp-input-border: #CBD5DF;
    --pp-input-focus-border: #66E0E4;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(1, 205, 211, 0.25);
    --pp-input-disabled-bg: #E2E8EE;
    --pp-modal-bg: #FFFFFF;
    --pp-modal-header-bg: #F8FAFB;
    --pp-badge-primary-bg: #01CDD3;
    --pp-badge-secondary-bg: #64748B;
}

/* --- Cyan Electric: Dark Mode --- */
.palette-cyan-electric.dark-mode,
.palette-cyan-electric[data-bs-theme="dark"] {
    --pp-primary: #33D6DB;
    --pp-primary-hover: #66E0E4;
    --pp-primary-rgb: 51, 214, 219;
    --pp-bg-body: #0F172A;
    --pp-bg-surface: #1E293B;
    --pp-bg-surface-elevated: #334155;
    --pp-bg-input: #334155;
    --pp-bg-hover: #334155;
    --pp-bg-active: #475569;
    --pp-bg-code: #334155;
    --pp-text-primary: #F1F5F7;
    --pp-text-secondary: #CBD5DF;
    --pp-text-muted: #64748B;
    --pp-text-inverse: #1E293B;
    --pp-text-link: #33D6DB;
    --pp-border-color: #475569;
    --pp-border-color-light: #334155;
    --pp-border-color-dark: #64748B;
    --pp-navbar-bg: #1E293B;
    --pp-navbar-text: #F1F5F7;
    --pp-sidebar-bg: #1E293B;
    --pp-sidebar-text: #F1F5F7;
    --pp-sidebar-hover-bg: #334155;
    --pp-sidebar-active-bg: #015356;
    --pp-sidebar-active-text: #33D6DB;
    --pp-card-bg: #1E293B;
    --pp-card-border: #475569;
    --pp-card-header-bg: #334155;
    --pp-table-bg: #1E293B;
    --pp-table-striped-bg: #334155;
    --pp-table-hover-bg: #475569;
    --pp-table-border: #475569;
    --pp-input-bg: #334155;
    --pp-input-border: #64748B;
    --pp-input-focus-border: #33D6DB;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(51, 214, 219, 0.25);
    --pp-input-disabled-bg: #475569;
    --pp-modal-bg: #1E293B;
    --pp-modal-header-bg: #334155;
    --pp-badge-primary-bg: #01B6BC;
    --pp-badge-secondary-bg: #64748B;
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --pp-toast-bg: #334155;
    --pp-toast-border: #475569;
    --pp-chart-grid: #475569;
    --pp-chart-text: #94A3B8;
    --pp-chart-tooltip-bg: #1E293B;
    --pp-chart-tooltip-border: #475569;
    --pp-code-bg: #334155;
    --pp-code-text: #66E0E4;
    --pp-scrollbar-track: #1E293B;
    --pp-scrollbar-thumb: #475569;
    --pp-scrollbar-thumb-hover: #64748B;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.7);

    /* Accent Yellow — dark mode */
    --pp-accent-500: #FFCA00;
    --pp-accent-400: #FFD426;
    --pp-accent-600: #E6B600;
}

/* ==========================================================================
   RISK LEVEL COLOR SYSTEM (Áp dụng cho cả 5 palette)
   ========================================================================== */
:root {
    --pp-risk-low: #10B981;
    --pp-risk-medium: #F59E0B;
    --pp-risk-high: #EF4444;
    --pp-risk-critical: #DC2626;
}

.dark-mode,
[data-bs-theme="dark"] {
    --pp-risk-low: #34D399;
    --pp-risk-medium: #FBBF24;
    --pp-risk-high: #F87171;
    --pp-risk-critical: #EF4444;
}

/* ==========================================================================
   DATA CLASSIFICATION COLOR SYSTEM (Áp dụng cho cả 4 palette)
   ========================================================================== */
:root {
    --pp-classification-public: #94A3B8;
    --pp-classification-internal: #2D6E9B;
    --pp-classification-confidential: #9A650C;
    --pp-classification-restricted: #B34045;
}

.dark-mode,
[data-bs-theme="dark"] {
    --pp-classification-public: #A7B2BD;
    --pp-classification-internal: #6FA9D6;
    --pp-classification-confidential: #D6A34B;
    --pp-classification-restricted: #E77B7E;
}

/* ==========================================================================
   SHARED STATUS COLORS (Override per mode only, shared across palettes)
   ========================================================================== */
.palette-trust-blue,
.palette-modern-teal,
.palette-purple-privacy,
.palette-minimal-corporate,
.palette-cyan-electric,
.palette-deep-trust-cyan,
.palette-refined-teal,
.palette-midnight-tech,
.palette-datanomics-horizon,
:root:not([class*="palette-"]) {
    --pp-success: #116329;          /* AA on both white and the semantic success background */
    --pp-success-bg: #d1e7dd;
    --pp-danger: #B91C1C;           /* 6.1:1 on #FFF — was #dc3545 (4.0:1 FAIL) */
    --pp-danger-bg: #f8d7da;
    --pp-warning: #B45309;          /* 4.8:1 on #FFF — was #ffc107 (1.9:1 FAIL) */
    --pp-warning-bg: #fff3cd;
    --pp-info: #0dcaf0;
    --pp-info-bg: #cff4fc;
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --pp-toast-bg: #ffffff;
    --pp-toast-border: #dee2e6;
    --pp-chart-grid: #e9ecef;
    --pp-chart-text: #6c757d;
    --pp-chart-tooltip-bg: #ffffff;
    --pp-chart-tooltip-border: #dee2e6;
    --pp-code-bg: #f8f9fa;
    --pp-code-text: #d63384;
    --pp-scrollbar-track: #f1f1f1;
    --pp-scrollbar-thumb: #c1c1c1;
    --pp-scrollbar-thumb-hover: #a8a8a8;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.5);
}

/* Dark mode status colors (shared across all palettes) */
.palette-trust-blue.dark-mode,
.palette-trust-blue[data-bs-theme="dark"],
.palette-modern-teal.dark-mode,
.palette-modern-teal[data-bs-theme="dark"],
.palette-purple-privacy.dark-mode,
.palette-purple-privacy[data-bs-theme="dark"],
.palette-minimal-corporate.dark-mode,
.palette-minimal-corporate[data-bs-theme="dark"],
.palette-cyan-electric.dark-mode,
.palette-cyan-electric[data-bs-theme="dark"],
.palette-deep-trust-cyan.dark-mode,
.palette-deep-trust-cyan[data-bs-theme="dark"],
.palette-refined-teal.dark-mode,
.palette-refined-teal[data-bs-theme="dark"],
.palette-midnight-tech.dark-mode,
.palette-midnight-tech[data-bs-theme="dark"],
.palette-datanomics-horizon.dark-mode,
.palette-datanomics-horizon[data-bs-theme="dark"],
:root:not([class*="palette-"]).dark-mode,
:root:not([class*="palette-"])[data-bs-theme="dark"] {
    --pp-success: #75b798;
    --pp-success-bg: #051b11;
    --pp-danger: #ea868f;
    --pp-danger-bg: #2c0b0e;
    --pp-warning: #ffda6a;
    --pp-warning-bg: #332701;
    --pp-info: #6edff6;
    --pp-info-bg: #032830;
}

/* ==========================================================================
   BRIDGE: Connect --pp-* palette variables → actual UI components
   These rules ensure palette colors are applied to Bootstrap classes and
   standard HTML elements in BOTH light and dark mode.
   Loaded LAST (after bootstrap, app.css, dark-mode.css) so !important wins.
   ========================================================================== */

/* --- Bootstrap CSS Variable Overrides (palette → Bootstrap tokens) --- */
/* This bridge ensures ALL Bootstrap utility classes (text-success, bg-danger, etc.)
   respond to palette switching and dark mode. */
body {
    --bs-primary: var(--pp-primary);
    --bs-primary-rgb: var(--pp-primary-rgb);
    --bs-success: var(--pp-success, #15803D);
    --bs-success-rgb: var(--pp-success-rgb, 21, 128, 61);
    --bs-danger: var(--pp-danger, #B91C1C);
    --bs-danger-rgb: var(--pp-danger-rgb, 185, 28, 28);
    --bs-warning: var(--pp-warning, #B45309);
    --bs-warning-rgb: var(--pp-warning-rgb, 180, 83, 9);
    --bs-info: var(--pp-info, #007A82);
    --bs-info-rgb: var(--pp-info-rgb, 0, 122, 130);
    --bs-secondary: var(--pp-text-secondary, #64748B);
    --bs-secondary-rgb: var(--pp-text-secondary-rgb, 100, 116, 139);
    --bs-light: var(--pp-bg-hover, #F1F5F7);
    --bs-dark: var(--pp-text-primary, #1E293B);
    --bs-white: var(--pp-bg-surface, #FFFFFF);
    --bs-body-color: var(--pp-text-primary);
    --bs-body-bg: var(--pp-bg-body);
    --bs-border-color: var(--pp-border, #E2E8EE);
    --bs-link-color: var(--pp-text-link);
    --bs-link-hover-color: var(--pp-primary-hover);
    --bs-link-color-rgb: var(--pp-primary-rgb);
    --bs-focus-ring-color: rgba(var(--pp-primary-rgb), 0.25);

    /* --- Body / Page Background --- */
    background-color: var(--pp-bg-body);
    color: var(--pp-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Navbar --- */
.navbar.bg-primary,
.navbar.navbar-dark.bg-primary {
    background-color: var(--pp-navbar-bg) !important;
    color: var(--pp-navbar-text) !important;
}

.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .nav-link,
.navbar.bg-primary .navbar-text {
    color: var(--pp-navbar-text) !important;
}

.navbar.bg-primary .btn-outline-light {
    --bs-btn-color: var(--pp-navbar-text);
    --bs-btn-border-color: rgba(255, 255, 255, 0.5);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.15);
    --bs-btn-hover-color: var(--pp-navbar-text);
}

/* --- Main Content Area --- */
main.bg-light,
.bg-light:not(.badge):not(.btn):not(.alert):not(.list-group-item) {
    background-color: var(--pp-bg-body) !important;
}

.bg-white:not(.badge):not(.btn):not(.toast) {
    background-color: var(--pp-bg-surface) !important;
}

.bg-body {
    background-color: var(--pp-bg-body) !important;
}

/* --- Sidebar --- */
.sidebar-column {
    background-color: var(--pp-sidebar-bg) !important;
}

.sidebar-column .border-end,
.sidebar-column.border-end {
    border-color: var(--pp-border-color) !important;
}

.unified-sidebar,
.sidebar-nav {
    background-color: var(--pp-sidebar-bg) !important;
}

.sidebar-nav .nav-link,
.nav-single-item .nav-link,
.nav-accordion-toggle {
    color: var(--pp-sidebar-text);
}

.sidebar-nav .nav-link:hover,
.nav-single-item .nav-link:hover,
.nav-accordion-toggle:hover {
    background-color: var(--pp-sidebar-hover-bg);
    color: var(--pp-primary);
}

.sidebar-nav .nav-link.active,
.nav-single-item .nav-link.active {
    background-color: var(--pp-sidebar-active-bg);
    color: var(--pp-sidebar-active-text);
}

.nav-accordion-toggle.has-active-child {
    background-color: var(--pp-sidebar-hover-bg);
    color: var(--pp-primary);
}

.nav-accordion-child .nav-link {
    color: var(--pp-sidebar-text);
}

.nav-accordion-child .nav-link:hover {
    background-color: var(--pp-sidebar-hover-bg);
    color: var(--pp-primary);
}

.nav-accordion-child .nav-link.active {
    background-color: var(--pp-primary);
    color: var(--pp-text-inverse);
}

.sidebar-section-title,
.nav-group-title,
.nav-group-header h6,
.nav-group-header {
    color: var(--pp-text-muted);
}

/* --- Cards --- */
.card {
    background-color: var(--pp-card-bg);
    border-color: var(--pp-card-border);
}

.card-header {
    background-color: var(--pp-card-header-bg);
    border-bottom-color: var(--pp-card-border);
    color: var(--pp-text-primary);
}

.card-footer {
    background-color: var(--pp-card-header-bg);
    border-top-color: var(--pp-card-border);
}

.card-title {
    color: var(--pp-text-primary);
}

/* --- Tables --- */
.table {
    --bs-table-bg: var(--pp-table-bg);
    --bs-table-striped-bg: var(--pp-table-striped-bg);
    --bs-table-hover-bg: var(--pp-table-hover-bg);
    --bs-table-border-color: var(--pp-table-border);
    --bs-table-color: var(--pp-text-primary);
    color: var(--pp-text-primary);
}

.table thead th,
thead th {
    background-color: var(--pp-card-header-bg);
    border-bottom-color: var(--pp-table-border);
    color: var(--pp-text-primary);
}

/* --- Forms --- */
.form-control,
.form-select {
    background-color: var(--pp-input-bg);
    border-color: var(--pp-input-border);
    color: var(--pp-text-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pp-input-focus-border);
    box-shadow: var(--pp-input-focus-shadow);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--pp-input-disabled-bg);
}

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

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

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

.input-group-text {
    background-color: var(--pp-card-header-bg);
    border-color: var(--pp-input-border);
    color: var(--pp-text-primary);
}

/* --- Buttons --- */
.btn-primary {
    --bs-btn-bg: var(--pp-primary);
    --bs-btn-border-color: var(--pp-primary);
    --bs-btn-hover-bg: var(--pp-primary-hover);
    --bs-btn-hover-border-color: var(--pp-primary-hover);
    --bs-btn-active-bg: var(--pp-primary-hover);
    --bs-btn-active-border-color: var(--pp-primary-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--pp-primary);
    --bs-btn-border-color: var(--pp-primary);
    --bs-btn-hover-bg: var(--pp-primary);
    --bs-btn-hover-color: var(--pp-text-inverse);
    --bs-btn-active-bg: var(--pp-primary);
    --bs-btn-active-color: var(--pp-text-inverse);
}

/* --- Modals --- */
.modal-content {
    background-color: var(--pp-modal-bg);
    border-color: var(--pp-border-color);
    color: var(--pp-text-primary);
}

.modal-header {
    background-color: var(--pp-modal-header-bg);
    border-bottom-color: var(--pp-border-color);
    color: var(--pp-text-primary);
}

.modal-footer {
    background-color: var(--pp-modal-header-bg);
    border-top-color: var(--pp-border-color);
}

/* --- Dropdowns --- */
.dropdown-menu {
    background-color: var(--pp-bg-surface-elevated);
    border-color: var(--pp-border-color);
}

.dropdown-item {
    color: var(--pp-text-primary);
}

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

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--pp-primary);
    color: var(--pp-text-inverse);
}

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

/* --- Text utilities --- */
.text-primary {
    color: var(--pp-primary) !important;
}

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

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

/* --- Link colors --- */
a {
    color: var(--pp-text-link);
}

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

/* --- Borders --- */
.border,
.border-end,
.border-start,
.border-top,
.border-bottom {
    border-color: var(--pp-border-color) !important;
}

/* --- Badges --- */
.badge.bg-primary {
    background-color: var(--pp-badge-primary-bg) !important;
}

/* --- Footer --- */
.bg-dark:not(.btn):not(.badge) {
    background-color: var(--pp-neutral-900, #0F172A) !important;
}

.bg-dark:not(.btn):not(.badge),
footer.bg-dark {
    color: var(--pp-navbar-text, #F1F5F9) !important;
}

/* Keep the main application footer explicit and consistent across themes. */
footer.main-footer {
    background-color: var(--pp-neutral-900, #0F172A) !important;
    background-image: none !important;
}

.dark-mode footer.main-footer,
[data-bs-theme="dark"] footer.main-footer {
    background-color: var(--pp-bg-surface, #1E293B) !important;
    background-image: none !important;
    color: var(--pp-navbar-text, #F1F5F9) !important;
    border-top: 1px solid var(--pp-border-color) !important;
}

/* --- Alerts (use palette accent) --- */
.alert-primary {
    --bs-alert-bg: rgba(var(--pp-primary-rgb), 0.1);
    --bs-alert-border-color: rgba(var(--pp-primary-rgb), 0.25);
    --bs-alert-color: var(--pp-primary);
}

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

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

.accordion-button:not(.collapsed) {
    background-color: var(--pp-bg-hover);
    color: var(--pp-primary);
}

/* --- Toast --- */
.toast {
    background-color: var(--pp-toast-bg);
    border-color: var(--pp-toast-border);
    color: var(--pp-text-primary);
}

/* --- Scrollbar (Webkit) --- */
::-webkit-scrollbar-track {
    background: var(--pp-scrollbar-track);
}

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

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

/* --- List groups --- */
.list-group-item {
    background-color: var(--pp-bg-surface);
    border-color: var(--pp-border-color);
    color: var(--pp-text-primary);
}

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

/* --- Breadcrumbs, pagination --- */
.breadcrumb-item a {
    color: var(--pp-text-primary);
}

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

.page-link {
    color: var(--pp-primary);
    background-color: var(--pp-bg-surface);
    border-color: var(--pp-border-color);
}

.page-item.active .page-link {
    background-color: var(--pp-primary);
    border-color: var(--pp-primary);
    color: var(--pp-text-inverse);
}

/* --- Tabs / Nav-tabs --- */
.nav-tabs .nav-link {
    color: var(--pp-text-secondary);
}

.nav-tabs .nav-link.active {
    color: var(--pp-primary);
    background-color: var(--pp-bg-surface);
    border-color: var(--pp-border-color) var(--pp-border-color) var(--pp-bg-surface);
}

.nav-tabs .nav-link:hover {
    border-color: var(--pp-border-color-light) var(--pp-border-color-light) var(--pp-border-color);
    color: var(--pp-primary);
}

/* --- Progress bars --- */
.progress {
    background-color: var(--pp-bg-active);
}

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

/* --- Code blocks --- */
code {
    color: var(--pp-code-text);
}

pre {
    background-color: var(--pp-code-bg);
    color: var(--pp-text-primary);
    border-color: var(--pp-border-color);
}

/* --- Spinner --- */
.spinner-border.text-primary {
    color: var(--pp-primary) !important;
}

/* --- Context Switcher --- */
.context-switcher .dropdown-header {
    color: var(--pp-primary);
}

.context-item {
    color: var(--pp-text-primary);
}

.context-item:hover {
    background-color: var(--pp-bg-hover);
}

.context-item.active {
    background-color: var(--pp-primary);
    color: var(--pp-text-inverse);
}

/* --- Main content column --- */
.main-content-column {
    background-color: var(--pp-bg-body);
}

/* --- Dark mode body explicit override (keep compatibility) --- */
body.dark-mode,
html.dark-mode body,
[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] body {
    background-color: var(--pp-bg-body) !important;
    color: var(--pp-text-primary) !important;
}

.dark-mode .content-wrapper,
.dark-mode .main-content,
.dark-mode main,
.dark-mode #app,
.dark-mode .page-content {
    background-color: var(--pp-bg-body) !important;
}

.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-mode .navbar-toggler-icon {
    filter: invert(1);
}

.dark-mode .accordion-button::after {
    filter: invert(1);
}

/* ==========================================================================
   OPTION A: Deep Trust Cyan (Dark Mode Base)
   Usage: add class "palette-deep-trust-cyan" to <html>
   Character: dark navy base, cyan primary, electric yellow accent
   ========================================================================== */

/* --- Option A raw tokens --- */
.palette-deep-trust-cyan {
    --opt-a-bg-base: #0F1C2E;
    --opt-a-surface: #1A2B3C;
    --opt-a-surface-2: #243547;
    --opt-a-primary: #01CDD3;
    --opt-a-primary-hover: #01B6BC;
    --opt-a-primary-subtle: rgba(1, 205, 211, 0.15);
    --opt-a-accent: #FFCA00;
    --opt-a-text-primary: #E2E8EE;
    --opt-a-text-secondary: #94A3B8;
    --opt-a-text-disabled: #475569;
    --opt-a-border: rgba(255, 255, 255, 0.1);
    --opt-a-border-strong: rgba(255, 255, 255, 0.2);
    --opt-a-sidebar-bg: #0A1628;
    --opt-a-navbar-bg: #0A1628;
    --opt-a-success: #22C55E;
    --opt-a-danger: #EF4444;
    --opt-a-warning: #FFCA00;
    --opt-a-info: #01CDD3;

    /* -- Map to --pp-* system tokens -- */
    --pp-primary: #01CDD3;
    --pp-primary-hover: #01B6BC;
    --pp-primary-rgb: 1, 205, 211;
    --pp-bg-body: #0F1C2E;
    --pp-bg-surface: #1A2B3C;
    --pp-bg-surface-elevated: #243547;
    --pp-bg-input: #243547;
    --pp-bg-hover: #243547;
    --pp-bg-active: #2E4157;
    --pp-bg-code: #243547;
    --pp-text-primary: #E2E8EE;
    --pp-text-secondary: #94A3B8;
    --pp-text-muted: #64748B;
    --pp-text-inverse: #0F1C2E;
    --pp-text-link: #01CDD3;
    --pp-border-color: rgba(255, 255, 255, 0.1);
    --pp-border-color-light: rgba(255, 255, 255, 0.06);
    --pp-border-color-dark: rgba(255, 255, 255, 0.2);
    --pp-navbar-bg: #0A1628;
    --pp-navbar-text: #E2E8EE;
    --pp-sidebar-bg: #0A1628;
    --pp-sidebar-text: #E2E8EE;
    --pp-sidebar-hover-bg: #1A2B3C;
    --pp-sidebar-active-bg: rgba(1, 205, 211, 0.15);
    --pp-sidebar-active-text: #01CDD3;
    --pp-card-bg: #1A2B3C;
    --pp-card-border: rgba(255, 255, 255, 0.1);
    --pp-card-header-bg: #243547;
    --pp-table-bg: #1A2B3C;
    --pp-table-striped-bg: #243547;
    --pp-table-hover-bg: #2E4157;
    --pp-table-border: rgba(255, 255, 255, 0.1);
    --pp-input-bg: #243547;
    --pp-input-border: rgba(255, 255, 255, 0.2);
    --pp-input-focus-border: #01CDD3;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(1, 205, 211, 0.25);
    --pp-input-disabled-bg: #1A2B3C;
    --pp-modal-bg: #1A2B3C;
    --pp-modal-header-bg: #243547;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.7);
    --pp-badge-primary-bg: #01CDD3;
    --pp-badge-secondary-bg: #475569;
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.6);
    --pp-toast-bg: #243547;
    --pp-toast-border: rgba(255, 255, 255, 0.1);
    --pp-chart-grid: rgba(255, 255, 255, 0.1);
    --pp-chart-text: #94A3B8;
    --pp-chart-tooltip-bg: #1A2B3C;
    --pp-chart-tooltip-border: rgba(255, 255, 255, 0.1);
    --pp-code-bg: #243547;
    --pp-code-text: #66E0E4;
    --pp-scrollbar-track: #1A2B3C;
    --pp-scrollbar-thumb: #2E4157;
    --pp-scrollbar-thumb-hover: #475569;
    --pp-dropdown-bg: #243547;
    --pp-dropdown-hover-bg: #2E4157;
    /* Status overrides for Option A */
    --pp-success: #22C55E;
    --pp-success-bg: rgba(34, 197, 94, 0.15);
    --pp-danger: #F87171;
    --pp-danger-bg: rgba(239, 68, 68, 0.15);
    --pp-warning: #FFCA00;
    --pp-warning-bg: rgba(255, 202, 0, 0.15);
    --pp-info: #01CDD3;
    --pp-info-bg: rgba(1, 205, 211, 0.15);
    /* Palette scale */
    --pp-palette-500: #01CDD3;
    --pp-palette-600: #01B6BC;
    --pp-neutral-50: #F8FAFB;
    --pp-neutral-800: #E2E8EE;
    --pp-neutral-900: #F1F5F9;
    --pp-accent-500: #FFCA00;
    --pp-accent-600: #E6B600;
    --pp-accent-text: #1E293B;
}

/* Option A dark mode variant (already dark — same tokens, no change needed) */
.palette-deep-trust-cyan.dark-mode,
.palette-deep-trust-cyan[data-bs-theme="dark"] {
    /* Already a dark palette — no overrides needed */
}

/* ==========================================================================
   OPTION B: Refined Teal / Governance Teal (DEFAULT)
   Usage: add class "palette-refined-teal" to <html>
   Character: restrained enterprise teal, neutral slate surfaces, steel-blue accent
   ========================================================================== */

/* --- Option B raw tokens --- */
.palette-refined-teal,
:root:not([class*="palette-"]) {
    --opt-b-bg-base: #F5F7F8;
    --opt-b-surface: #FFFFFF;
    --opt-b-surface-2: #F0F3F4;
    --opt-b-primary: #176B66;
    --opt-b-primary-hover: #125853;
    --opt-b-primary-light: #78B8B1;
    --opt-b-primary-subtle: #EFF7F6;
    --opt-b-accent: #496B9B;
    --opt-b-accent-hover: #3E5D88;
    --opt-b-text-primary: #17212B;
    --opt-b-text-secondary: #536170;
    --opt-b-text-disabled: #8995A1;
    --opt-b-text-inverse: #FFFFFF;
    --opt-b-border: #DDE3E6;
    --opt-b-border-strong: #C6D0D5;
    --opt-b-sidebar-bg: #F0F3F4;
    --opt-b-sidebar-text: #2C3A47;
    --opt-b-sidebar-active: #176B66;
    --opt-b-navbar-bg: #FFFFFF;
    --opt-b-navbar-border: #DDE3E6;
    --opt-b-success: #2E7D4F;
    --opt-b-danger: #B34045;
    --opt-b-warning: #9A650C;
    --opt-b-info: #2D6E9B;
    --opt-b-card-shadow: var(--shadow-l1);
    --opt-b-card-shadow-hover: var(--shadow-l1-hover);

    /* -- Map to --pp-* system tokens -- */
    --pp-primary: #176B66;
    --pp-primary-hover: #125853;
    --pp-primary-rgb: 23, 107, 102;
    --pp-bg-body: #F5F7F8;
    --pp-bg-surface: #FFFFFF;
    --pp-bg-surface-elevated: #FFFFFF;
    --pp-bg-input: #F2F4F5;
    --pp-bg-hover: #EDF1F2;
    --pp-bg-active: #E3E8EA;
    --pp-bg-code: #F5F7F8;
    --pp-text-primary: #17212B;
    --pp-text-secondary: #536170;
    --pp-text-muted: #7B8896;
    --pp-text-inverse: #FFFFFF;
    --pp-text-link: #176B66;
    --pp-border-color: #DDE3E6;
    --pp-border-color-light: #E9EDEF;
    --pp-border-color-dark: #C6D0D5;
    /* Navbar: white bg, dark text — Apple clean top bar */
    --pp-navbar-bg: #FFFFFF;
    --pp-navbar-text: #17212B;
    --pp-navbar-border: #DDE3E6;

    /* Sidebar: light mode = light bg (Apple style), not dark navy */
    --pp-sidebar-bg: #F0F3F4;
    --pp-sidebar-text: #2C3A47;
    --pp-sidebar-hover-bg: rgba(23, 107, 102, 0.08);
    --pp-sidebar-active-bg: #176B66;
    --pp-sidebar-active-text: #FFFFFF;
    --pp-sidebar-border: #DDE3E6;
    --pp-card-bg: #FFFFFF;
    --pp-card-border: transparent;
    --pp-card-header-bg: #F5F7F8;
    --pp-table-bg: #FFFFFF;
    --pp-table-striped-bg: transparent;
    --pp-table-hover-bg: #F5F7F8;
    --pp-table-border: #E4E9EB;
    --pp-input-bg: #F2F4F5;
    --pp-input-border: #D5DDE1;
    --pp-input-focus-border: rgba(23, 107, 102, 0.48);
    --pp-input-focus-shadow: 0 0 0 3px rgba(23, 107, 102, 0.16);
    --pp-input-disabled-bg: #E3E8EA;
    --pp-modal-bg: #FFFFFF;
    --pp-modal-header-bg: #F5F7F8;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.4);
    --pp-badge-primary-bg: #176B66;
    --pp-badge-secondary-bg: #536170;
    --pp-shadow-sm: var(--shadow-l1);
    --pp-shadow: var(--shadow-l2);
    --pp-shadow-lg: var(--shadow-l3);
    --pp-toast-bg: #FFFFFF;
    --pp-toast-border: #DDE3E6;
    --pp-chart-grid: #DDE3E6;
    --pp-chart-text: #687786;
    --pp-chart-tooltip-bg: #FFFFFF;
    --pp-chart-tooltip-border: #DDE3E6;
    --pp-code-bg: #F5F7F8;
    --pp-code-text: #176B66;
    --pp-scrollbar-track: #F0F3F4;
    --pp-scrollbar-thumb: #C6D0D5;
    --pp-scrollbar-thumb-hover: #8995A1;
    --pp-dropdown-bg: #FFFFFF;
    --pp-dropdown-hover-bg: #EDF1F2;
    /* Status overrides for Option B
       Text colors use 600-800 shades for WCAG AA on white (≥4.5:1).
       Background tints stay light for alert/badge fills. */
    --pp-success: #2E7D4F;
    --pp-success-bg: #EDF7F1;
    --pp-danger: #B34045;
    --pp-danger-bg: #FCEEEF;
    --pp-warning: #9A650C;
    --pp-warning-bg: #FBF5E8;
    --pp-info: #2D6E9B;
    --pp-info-bg: #EDF5FA;
    /* Palette scale */
    --pp-palette-50: #EFF7F6;
    --pp-palette-100: #D7EBE8;
    --pp-palette-200: #B0D8D3;
    --pp-palette-300: #7EBEB7;
    --pp-palette-400: #4C9F97;
    --pp-palette-500: #2D817A;
    --pp-palette-600: #176B66;
    --pp-palette-700: #145B57;
    --pp-palette-800: #134A47;
    --pp-palette-900: #123C3A;
    --pp-neutral-50: #F5F7F8;
    --pp-neutral-100: #F0F3F4;
    --pp-neutral-200: #DDE3E6;
    --pp-neutral-300: #C6D0D5;
    --pp-neutral-400: #8995A1;
    --pp-neutral-500: #687786;
    --pp-neutral-600: #536170;
    --pp-neutral-700: #2C3A47;
    --pp-neutral-800: #17212B;
    --pp-neutral-900: #101820;
    --pp-primary-active: #0F4945;
    --pp-primary-disabled: #A9CFCA;
    --pp-accent: #496B9B;
    --pp-accent-hover: #3E5D88;
    --pp-accent-500: #496B9B;
    --pp-accent-600: #3E5D88;
    --pp-accent-text: #FFFFFF;
}

/* Light sidebar: subtle right border, no heavy shadow */
.palette-refined-teal .sidebar-column {
  box-shadow: none;
  border-right: 1px solid #DDE3E6;
}

/* --- Option B: Dark Mode variant --- */
.palette-refined-teal.dark-mode,
.palette-refined-teal[data-bs-theme="dark"],
:root:not([class*="palette-"]).dark-mode,
:root:not([class*="palette-"])[data-bs-theme="dark"],
:root:not([class*="palette-"])[data-theme="dark"] {
    --pp-primary: #78B8B1;
    --pp-primary-hover: #91CAC3;
    --pp-primary-rgb: 120, 184, 177;
    --pp-bg-body: #10171E;
    --pp-bg-surface: #18222C;
    --pp-bg-surface-elevated: #202C37;
    --pp-bg-input: #202C37;
    --pp-bg-hover: #24323E;
    --pp-bg-active: #2B3B48;
    --pp-bg-code: #202C37;
    --pp-text-primary: #E7EDF2;
    --pp-text-secondary: #A7B2BD;
    --pp-text-muted: #778593;
    --pp-text-inverse: #10171E;
    --pp-text-link: #89C5BE;
    --pp-border-color: rgba(255, 255, 255, 0.1);
    --pp-border-color-light: rgba(255, 255, 255, 0.06);
    --pp-border-color-dark: rgba(255, 255, 255, 0.2);
    --pp-navbar-bg: #151F29;
    --pp-navbar-text: #E7EDF2;
    --pp-navbar-border: rgba(255, 255, 255, 0.08);
    --pp-sidebar-bg: #0D151D;
    --pp-sidebar-text: #B8C3CC;
    --pp-sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --pp-sidebar-active-bg: rgba(120, 184, 177, 0.18);
    --pp-sidebar-active-text: #A7D6D0;
    --pp-sidebar-border: rgba(255, 255, 255, 0.06);
    --pp-card-bg: #18222C;
    --pp-card-border: rgba(255, 255, 255, 0.1);
    --pp-card-header-bg: #202C37;
    --pp-table-bg: #18222C;
    --pp-table-striped-bg: #202C37;
    --pp-table-hover-bg: #24323E;
    --pp-table-border: rgba(255, 255, 255, 0.1);
    --pp-input-bg: #202C37;
    --pp-input-border: rgba(255, 255, 255, 0.2);
    --pp-input-focus-border: #78B8B1;
    --pp-input-focus-shadow: 0 0 0 3px rgba(120, 184, 177, 0.22);
    --pp-input-disabled-bg: #18222C;
    --pp-modal-bg: #18222C;
    --pp-modal-header-bg: #202C37;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.7);
    --pp-badge-primary-bg: #78B8B1;
    --pp-badge-secondary-bg: #536170;
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.6);
    --pp-toast-bg: #202C37;
    --pp-toast-border: rgba(255, 255, 255, 0.1);
    --pp-chart-grid: rgba(255, 255, 255, 0.1);
    --pp-chart-text: #A7B2BD;
    --pp-chart-tooltip-bg: #18222C;
    --pp-chart-tooltip-border: rgba(255, 255, 255, 0.1);
    --pp-code-bg: #202C37;
    --pp-code-text: #9ACEC8;
    --pp-scrollbar-track: #18222C;
    --pp-scrollbar-thumb: #2B3B48;
    --pp-scrollbar-thumb-hover: #536170;
    --pp-dropdown-bg: #202C37;
    --pp-dropdown-hover-bg: #24323E;
    --pp-success: #63B985;
    --pp-success-bg: rgba(99, 185, 133, 0.14);
    --pp-danger: #E77B7E;
    --pp-danger-bg: rgba(231, 123, 126, 0.14);
    --pp-warning: #D6A34B;
    --pp-warning-bg: rgba(214, 163, 75, 0.14);
    --pp-info: #6FA9D6;
    --pp-info-bg: rgba(111, 169, 214, 0.14);
    --pp-neutral-900: #0D151D;
    --pp-primary-active: #5FA49D;
    --pp-primary-disabled: #334A4A;
    --pp-accent: #8FA9CD;
    --pp-accent-hover: #A8BCDA;
    --pp-accent-500: #8FA9CD;
    --pp-accent-600: #7693BA;
    --pp-accent-text: #10171E;
}

/* ==========================================================================
   OPTION C: Midnight Tech (Full Dark, Electric)
   Usage: add class "palette-midnight-tech" to <html>
   Character: deep black base, electric cyan primary, glow effects, yellow accent
   ========================================================================== */

/* --- Option C raw tokens --- */
.palette-midnight-tech {
    --opt-c-bg-base: #0A0F1E;
    --opt-c-surface: #111827;
    --opt-c-surface-2: #1F2937;
    --opt-c-primary: #00E5EC;
    --opt-c-primary-hover: #00C9D0;
    --opt-c-primary-subtle: rgba(0, 229, 236, 0.1);
    --opt-c-primary-glow: 0 0 20px rgba(0, 229, 236, 0.3);
    --opt-c-accent: #FFCA00;
    --opt-c-text-primary: #F1F5F9;
    --opt-c-text-secondary: #94A3B8;
    --opt-c-text-disabled: #4B5563;
    --opt-c-border: rgba(255, 255, 255, 0.08);
    --opt-c-border-strong: rgba(255, 255, 255, 0.16);
    --opt-c-sidebar-bg: #060B18;
    --opt-c-navbar-bg: #060B18;
    --opt-c-success: #10B981;
    --opt-c-danger: #F87171;
    --opt-c-warning: #FBBF24;
    --opt-c-info: #00E5EC;

    /* -- Map to --pp-* system tokens -- */
    --pp-primary: #00E5EC;
    --pp-primary-hover: #00C9D0;
    --pp-primary-rgb: 0, 229, 236;
    --pp-bg-body: #0A0F1E;
    --pp-bg-surface: #111827;
    --pp-bg-surface-elevated: #1F2937;
    --pp-bg-input: #1F2937;
    --pp-bg-hover: #1F2937;
    --pp-bg-active: #2D3748;
    --pp-bg-code: #1F2937;
    --pp-text-primary: #F1F5F9;
    --pp-text-secondary: #94A3B8;
    --pp-text-muted: #6B7280;
    --pp-text-inverse: #0A0F1E;
    --pp-text-link: #00E5EC;
    --pp-border-color: rgba(255, 255, 255, 0.08);
    --pp-border-color-light: rgba(255, 255, 255, 0.04);
    --pp-border-color-dark: rgba(255, 255, 255, 0.16);
    --pp-navbar-bg: #060B18;
    --pp-navbar-text: #F1F5F9;
    --pp-sidebar-bg: #060B18;
    --pp-sidebar-text: #F1F5F9;
    --pp-sidebar-hover-bg: rgba(0, 229, 236, 0.08);
    --pp-sidebar-active-bg: rgba(0, 229, 236, 0.1);
    --pp-sidebar-active-text: #00E5EC;
    --pp-card-bg: #111827;
    --pp-card-border: rgba(255, 255, 255, 0.08);
    --pp-card-header-bg: #1F2937;
    --pp-table-bg: #111827;
    --pp-table-striped-bg: #1F2937;
    --pp-table-hover-bg: #2D3748;
    --pp-table-border: rgba(255, 255, 255, 0.08);
    --pp-input-bg: #1F2937;
    --pp-input-border: rgba(255, 255, 255, 0.16);
    --pp-input-focus-border: #00E5EC;
    --pp-input-focus-shadow: 0 0 0 0.25rem rgba(0, 229, 236, 0.25), 0 0 10px rgba(0, 229, 236, 0.15);
    --pp-input-disabled-bg: #111827;
    --pp-modal-bg: #111827;
    --pp-modal-header-bg: #1F2937;
    --pp-modal-backdrop: rgba(0, 0, 0, 0.8);
    --pp-badge-primary-bg: #00E5EC;
    --pp-badge-secondary-bg: #4B5563;
    --pp-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
    --pp-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);
    --pp-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.7);
    --pp-toast-bg: #1F2937;
    --pp-toast-border: rgba(255, 255, 255, 0.08);
    --pp-chart-grid: rgba(255, 255, 255, 0.08);
    --pp-chart-text: #94A3B8;
    --pp-chart-tooltip-bg: #111827;
    --pp-chart-tooltip-border: rgba(255, 255, 255, 0.08);
    --pp-code-bg: #1F2937;
    --pp-code-text: #00E5EC;
    --pp-scrollbar-track: #111827;
    --pp-scrollbar-thumb: #2D3748;
    --pp-scrollbar-thumb-hover: #4B5563;
    --pp-dropdown-bg: #1F2937;
    --pp-dropdown-hover-bg: #2D3748;
    /* Status overrides for Option C */
    --pp-success: #10B981;
    --pp-success-bg: rgba(16, 185, 129, 0.12);
    --pp-danger: #F87171;
    --pp-danger-bg: rgba(248, 113, 113, 0.12);
    --pp-warning: #FBBF24;
    --pp-warning-bg: rgba(251, 191, 36, 0.12);
    --pp-info: #00E5EC;
    --pp-info-bg: rgba(0, 229, 236, 0.12);
    /* Palette scale */
    --pp-palette-500: #00E5EC;
    --pp-palette-600: #00C9D0;
    --pp-neutral-50: #F1F5F9;
    --pp-neutral-800: #1F2937;
    --pp-neutral-900: #060B18;
    --pp-accent-500: #FFCA00;
    --pp-accent-600: #E6B600;
    --pp-accent-text: #1E293B;
}

/* Option C dark mode variant (already full dark — same tokens) */
.palette-midnight-tech.dark-mode,
.palette-midnight-tech[data-bs-theme="dark"] {
    /* Already a full-dark palette — no overrides needed */
}