/**
 * Easy Insure - World-Class Design System
 * Self-contained CSS without Tailwind CDN
 * Advanced Multi-Theme System
 */

/* =============================================
   ROOT VARIABLES & ALL THEMES
   ============================================= */
:root {
    /* Light Mode Base - Arctic Frost */
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --bg-card: #FFFFFF;
    --bg-card-rgb: 255, 255, 255;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-gradient-start: #F8FAFC;
    --bg-gradient-end: #E2E8F0;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --border-color: #E2E8F0;
    --border-rgb: 226, 232, 240;

    /* Brand Colors - Arctic Blue */
    --brand-50: #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;
    --brand-300: #93c5fd;
    --brand-400: #60a5fa;
    --brand-500: #3b82f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-glow: rgba(59, 130, 246, 0.4);

    /* Semantic Colors */
    --success-50: #f0fdf4;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --warning-50: #fffbeb;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --error-50: #fef2f2;
    --error-500: #ef4444;
    --error-600: #dc2626;
    --info-50: #eff6ff;
    --info-500: #3b82f6;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-glow: 0 0 20px var(--brand-glow);

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

    /* Animations */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Color Primary (alias for compatibility) */
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
}

/* === MIDNIGHT DARK === */
.theme-dark, .dark {
    --bg-primary: #0a0f1a;
    --bg-secondary: #111827;
    --bg-tertiary: #1f2937;
    --bg-card: #1a2332;
    --bg-card-rgb: 26, 35, 50;
    --bg-glass: rgba(10, 15, 26, 0.85);
    --bg-gradient-start: #0a0f1a;
    --bg-gradient-end: #0f172a;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --border-color: #334155;
    --border-rgb: 51, 65, 85;

    --brand-50: #1e3a5f;
    --brand-100: #1e40af;
    --brand-200: #1d4ed8;
    --brand-300: #2563eb;
    --brand-400: #3b82f6;
    --brand-500: #60a5fa;
    --brand-600: #93c5fd;
    --brand-700: #bfdbfe;
    --brand-glow: rgba(59, 130, 246, 0.5);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.6), 0 8px 10px -6px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 30px var(--brand-glow);

    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
}

/* === EMERALD DEEP === */
.theme-emerald {
    --bg-primary: #022c22;
    --bg-secondary: #064e3b;
    --bg-tertiary: #065f46;
    --bg-card: #047857;
    --bg-card-rgb: 4, 120, 87;
    --bg-glass: rgba(2, 44, 34, 0.9);
    --bg-gradient-start: #022c22;
    --bg-gradient-end: #064e3b;
    --text-primary: #ECFDF5;
    --text-secondary: #A7F3D0;
    --text-muted: #6EE7B7;
    --border-color: #059669;
    --border-rgb: 5, 150, 105;

    --brand-50: #064e3b;
    --brand-100: #059669;
    --brand-200: #10b981;
    --brand-300: #34d399;
    --brand-400: #6ee7b7;
    --brand-500: #a7f3d0;
    --brand-600: #d1fae5;
    --brand-700: #ecfdf5;
    --brand-glow: rgba(52, 211, 153, 0.5);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.7), 0 8px 10px -6px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 30px var(--brand-glow);

    --color-primary: #34d399;
    --color-primary-hover: #10b981;
}

/* === ROYAL PURPLE === */
.theme-purple {
    --bg-primary: #1a1025;
    --bg-secondary: #2d1f4e;
    --bg-tertiary: #3b2a6d;
    --bg-card: #4c3399;
    --bg-card-rgb: 76, 51, 153;
    --bg-glass: rgba(26, 16, 37, 0.9);
    --bg-gradient-start: #1a1025;
    --bg-gradient-end: #2d1f4e;
    --text-primary: #F5F3FF;
    --text-secondary: #DDD6FE;
    --text-muted: #C4B5FD;
    --border-color: #7c3aed;
    --border-rgb: 124, 58, 237;

    --brand-50: #3b2a6d;
    --brand-100: #5b21b6;
    --brand-200: #7c3aed;
    --brand-300: #8b5cf6;
    --brand-400: #a78bfa;
    --brand-500: #c4b5fd;
    --brand-600: #ddd6fe;
    --brand-700: #ede9fe;
    --brand-glow: rgba(139, 92, 246, 0.5);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.7), 0 8px 10px -6px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 30px var(--brand-glow);

    --color-primary: #a78bfa;
    --color-primary-hover: #8b5cf6;
}

/* === OCEAN BLUE === */
.theme-ocean {
    --bg-primary: #0c1929;
    --bg-secondary: #1e3a5f;
    --bg-tertiary: #1e4d7b;
    --bg-card: #0f4c75;
    --bg-card-rgb: 15, 76, 117;
    --bg-glass: rgba(12, 25, 41, 0.9);
    --bg-gradient-start: #0c1929;
    --bg-gradient-end: #1e3a5f;
    --text-primary: #E0F2FE;
    --text-secondary: #7DD3FC;
    --text-muted: #38BDF8;
    --border-color: #0284c7;
    --border-rgb: 2, 132, 199;

    --brand-50: #0369a1;
    --brand-100: #0284c7;
    --brand-200: #0ea5e9;
    --brand-300: #38bdf8;
    --brand-400: #7dd3fc;
    --brand-500: #bae6fd;
    --brand-600: #e0f2fe;
    --brand-700: #f0f9ff;
    --brand-glow: rgba(56, 189, 248, 0.5);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.7), 0 8px 10px -6px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 30px var(--brand-glow);

    --color-primary: #38bdf8;
    --color-primary-hover: #0ea5e9;
}

/* === SUNSET WARM === */
.theme-sunset {
    --bg-primary: #1c110d;
    --bg-secondary: #2d1f1a;
    --bg-tertiary: #3d2922;
    --bg-card: #4a332a;
    --bg-card-rgb: 74, 51, 42;
    --bg-glass: rgba(28, 17, 13, 0.9);
    --bg-gradient-start: #1c110d;
    --bg-gradient-end: #2d1f1a;
    --text-primary: #FEF3C7;
    --text-secondary: #FCD34D;
    --text-muted: #FBBF24;
    --border-color: #b45309;
    --border-rgb: 180, 83, 9;

    --brand-50: #78350f;
    --brand-100: #92400e;
    --brand-200: #b45309;
    --brand-300: #d97706;
    --brand-400: #f59e0b;
    --brand-500: #fbbf24;
    --brand-600: #fcd34d;
    --brand-700: #fde68a;
    --brand-glow: rgba(251, 191, 36, 0.5);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.7), 0 8px 10px -6px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 30px var(--brand-glow);

    --color-primary: #fbbf24;
    --color-primary-hover: #f59e0b;
}

/* === CYBER NEON === */
.theme-cyber {
    --bg-primary: #050505;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #111111;
    --bg-card: #1a1a1a;
    --bg-card-rgb: 26, 26, 26;
    --bg-glass: rgba(5, 5, 5, 0.95);
    --bg-gradient-start: #050505;
    --bg-gradient-end: #0a0a0a;
    --text-primary: #00FF41;
    --text-secondary: #00CC33;
    --text-muted: #009926;
    --border-color: #00FF41;
    --border-rgb: 0, 255, 65;

    --brand-50: #003d00;
    --brand-100: #005500;
    --brand-200: #007700;
    --brand-300: #009900;
    --brand-400: #00BB00;
    --brand-500: #00FF41;
    --brand-600: #33FF66;
    --brand-700: #66FF8C;
    --brand-glow: rgba(0, 255, 65, 0.6);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.6), 0 2px 4px -2px rgba(0,0,0,0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.7), 0 4px 6px -4px rgba(0,0,0,0.6);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.8), 0 8px 10px -6px rgba(0,0,0,0.7);
    --shadow-glow: 0 0 40px var(--brand-glow), 0 0 80px rgba(0, 255, 65, 0.3);

    --color-primary: #00FF41;
    --color-primary-hover: #00CC33;
}

/* === ROSE GOLD (Light) === */
.theme-rosegold {
    --bg-primary: #FDF2F8;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #FCE7F3;
    --bg-card: #FFF1F5;
    --bg-card-rgb: 255, 241, 245;
    --bg-glass: rgba(253, 242, 248, 0.9);
    --bg-gradient-start: #FDF2F8;
    --bg-gradient-end: #FCE7F3;
    --text-primary: #831843;
    --text-secondary: #be185d;
    --text-muted: #ec4899;
    --border-color: #F9A8D4;
    --border-rgb: 249, 168, 212;

    --brand-50: #FDF2F8;
    --brand-100: #FCE7F3;
    --brand-200: #FBCFE8;
    --brand-300: #F9A8D4;
    --brand-400: #F472B6;
    --brand-500: #EC4899;
    --brand-600: #DB2777;
    --brand-700: #BE185D;
    --brand-glow: rgba(236, 72, 153, 0.4);

    --shadow-sm: 0 1px 2px rgba(131, 24, 67, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(131, 24, 67, 0.1), 0 2px 4px -2px rgba(131, 24, 67, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(131, 24, 67, 0.1), 0 4px 6px -4px rgba(131, 24, 67, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(131, 24, 67, 0.1), 0 8px 10px -6px rgba(131, 24, 67, 0.1);
    --shadow-glow: 0 0 30px var(--brand-glow);

    --color-primary: #EC4899;
    --color-primary-hover: #DB2777;
}

/* === FOREST EARTH === */
.theme-forest {
    --bg-primary: #F0FDF4;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #DCFCE7;
    --bg-card: #F7FFF9;
    --bg-card-rgb: 247, 255, 249;
    --bg-glass: rgba(240, 253, 244, 0.9);
    --bg-gradient-start: #F0FDF4;
    --bg-gradient-end: #DCFCE7;
    --text-primary: #14532D;
    --text-secondary: #166534;
    --text-muted: #15803D;
    --border-color: #86EFAC;
    --border-rgb: 134, 239, 172;

    --brand-50: #F0FDF4;
    --brand-100: #DCFCE7;
    --brand-200: #BBF7D0;
    --brand-300: #86EFAC;
    --brand-400: #4ADE80;
    --brand-500: #22C55E;
    --brand-600: #16A34A;
    --brand-700: #15803D;
    --brand-glow: rgba(34, 197, 94, 0.4);

    --shadow-sm: 0 1px 2px rgba(20, 83, 45, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(20, 83, 45, 0.1), 0 2px 4px -2px rgba(20, 83, 45, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(20, 83, 45, 0.1), 0 4px 6px -4px rgba(20, 83, 45, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(20, 83, 45, 0.1), 0 8px 10px -6px rgba(20, 83, 45, 0.1);
    --shadow-glow: 0 0 30px var(--brand-glow);

    --color-primary: #22C55E;
    --color-primary-hover: #16A34A;
}

/* === SLATE PROFESSIONAL === */
.theme-slate {
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F1F5F9;
    --bg-card: #FFFFFF;
    --bg-card-rgb: 255, 255, 255;
    --bg-glass: rgba(255, 255, 255, 0.9);
    --bg-gradient-start: #F8FAFC;
    --bg-gradient-end: #E2E8F0;
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;
    --border-color: #CBD5E1;
    --border-rgb: 203, 213, 225;

    --brand-50: #F1F5F9;
    --brand-100: #E2E8F0;
    --brand-200: #CBD5E1;
    --brand-300: #94A3B8;
    --brand-400: #64748B;
    --brand-500: #475569;
    --brand-600: #334155;
    --brand-700: #1E293B;
    --brand-glow: rgba(71, 85, 105, 0.3);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-glow: 0 0 20px var(--brand-glow);

    --color-primary: #475569;
    --color-primary-hover: #334155;
}

/* === VIOLET DREAM === */
.theme-violet {
    --bg-primary: #0F0A1F;
    --bg-secondary: #1A1033;
    --bg-tertiary: #251847;
    --bg-card: #2E1F5C;
    --bg-card-rgb: 46, 31, 92;
    --bg-glass: rgba(15, 10, 31, 0.9);
    --bg-gradient-start: #0F0A1F;
    --bg-gradient-end: #1A1033;
    --text-primary: #EDE9FE;
    --text-secondary: #C4B5FD;
    --text-muted: #A78BFA;
    --border-color: #5B21B6;
    --border-rgb: 91, 33, 182;

    --brand-50: #251847;
    --brand-100: #4C1D95;
    --brand-200: #5B21B6;
    --brand-300: #7C3AED;
    --brand-400: #8B5CF6;
    --brand-500: #A78BFA;
    --brand-600: #C4B5FD;
    --brand-700: #DDD6FE;
    --brand-glow: rgba(139, 92, 246, 0.5);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.7), 0 8px 10px -6px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 30px var(--brand-glow);

    --color-primary: #8B5CF6;
    --color-primary-hover: #7C3AED;
}

/* === CORAL ENERGY === */
.theme-coral {
    --bg-primary: #FFF7ED;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #FFEDD5;
    --bg-card: #FFF8F0;
    --bg-card-rgb: 255, 248, 240;
    --bg-glass: rgba(255, 247, 237, 0.9);
    --bg-gradient-start: #FFF7ED;
    --bg-gradient-end: #FFEDD5;
    --text-primary: #7C2D12;
    --text-secondary: #9A3412;
    --text-muted: #C2410C;
    --border-color: #FDBA74;
    --border-rgb: 253, 186, 116;

    --brand-50: #FFF7ED;
    --brand-100: #FFEDD5;
    --brand-200: #FED7AA;
    --brand-300: #FDBA74;
    --brand-400: #FB923C;
    --brand-500: #F97316;
    --brand-600: #EA580C;
    --brand-700: #C2410C;
    --brand-glow: rgba(249, 115, 22, 0.4);

    --shadow-sm: 0 1px 2px rgba(124, 45, 18, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(124, 45, 18, 0.1), 0 2px 4px -2px rgba(124, 45, 18, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(124, 45, 18, 0.1), 0 4px 6px -4px rgba(124, 45, 18, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(124, 45, 18, 0.1), 0 8px 10px -6px rgba(124, 45, 18, 0.1);
    --shadow-glow: 0 0 30px var(--brand-glow);

    --color-primary: #F97316;
    --color-primary-hover: #EA580C;
}

/* === RETRO TERMINAL === */
.theme-terminal {
    --bg-primary: #0D1117;
    --bg-secondary: #161B22;
    --bg-tertiary: #21262D;
    --bg-card: #1C2128;
    --bg-card-rgb: 28, 33, 40;
    --bg-glass: rgba(13, 17, 23, 0.95);
    --bg-gradient-start: #0D1117;
    --bg-gradient-end: #161B22;
    --text-primary: #58A6FF;
    --text-secondary: #8B949E;
    --text-muted: #6E7681;
    --border-color: #30363D;
    --border-rgb: 48, 54, 61;

    --brand-50: #1F2937;
    --brand-100: #374151;
    --brand-200: #4B5563;
    --brand-300: #6B7280;
    --brand-400: #9CA3AF;
    --brand-500: #58A6FF;
    --brand-600: #79C0FF;
    --brand-700: #A5D6FF;
    --brand-glow: rgba(88, 166, 255, 0.4);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.7), 0 8px 10px -6px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 25px var(--brand-glow);

    --color-primary: #58A6FF;
    --color-primary-hover: #79C0FF;
}

/* === SAPPHIRE LUXURY === */
.theme-sapphire {
    --bg-primary: #030712;
    --bg-secondary: #0F172A;
    --bg-tertiary: #1E3A5F;
    --bg-card: #172554;
    --bg-card-rgb: 23, 37, 84;
    --bg-glass: rgba(3, 7, 18, 0.9);
    --bg-gradient-start: #030712;
    --bg-gradient-end: #0F172A;
    --text-primary: #DBEAFE;
    --text-secondary: #93C5FD;
    --text-muted: #60A5FA;
    --border-color: #1D4ED8;
    --border-rgb: 29, 78, 216;

    --brand-50: #172554;
    --brand-100: #1E40AF;
    --brand-200: #1D4ED8;
    --brand-300: #2563EB;
    --brand-400: #3B82F6;
    --brand-500: #60A5FA;
    --brand-600: #93C5FD;
    --brand-700: #BFDBFE;
    --brand-glow: rgba(59, 130, 246, 0.5);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.7), 0 8px 10px -6px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 35px var(--brand-glow);

    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
}

/* =============================================
   BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
}
.light input[type="date"] {
    color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.8) brightness(1.2);
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* =============================================
   ADVANCED ANIMATED BACKGROUNDS
   ============================================= */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px var(--brand-500), 0 0 10px var(--brand-glow); }
    50% { box-shadow: 0 0 15px var(--brand-500), 0 0 25px var(--brand-glow); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes border-glow {
    0%, 100% { border-color: var(--brand-500); }
    50% { border-color: var(--brand-400); }
}

/* Animated gradient backgrounds for specific themes */
.theme-cyber body {
    background: linear-gradient(135deg, #0a0a0a 0%, #0d1f0d 50%, #0a0a0a 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

.theme-cyber body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
}

.theme-sunset body {
    background: linear-gradient(135deg, #0f0a0a 0%, #1a0f0a 50%, #0f0a0a 100%);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
}

.theme-sunset body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40vh;
    background: radial-gradient(ellipse at top, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.theme-ocean body {
    background: linear-gradient(135deg, #0a0f1a 0%, #0a1a2a 50%, #0a0f1a 100%);
    background-size: 400% 400%;
    animation: gradientShift 18s ease infinite;
}

.theme-ocean body::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30vh;
    background: radial-gradient(ellipse at bottom, rgba(56, 189, 248, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.theme-emerald body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50vh;
    background: radial-gradient(ellipse at top, rgba(52, 211, 153, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.theme-purple body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50vh;
    background: radial-gradient(ellipse at top, rgba(167, 139, 250, 0.06) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.theme-violet body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50vh;
    background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.07) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Glow effects for interactive elements */
.glow-effect {
    animation: pulse-glow 2s ease-in-out infinite;
}

.float-effect {
    animation: float 3s ease-in-out infinite;
}

/* Shimmer loading effect */
.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* =============================================
   ADVANCED UI ENHANCEMENTS
   ============================================= */

/* Glass morphism with enhanced blur */
.glass-morphism {
    background: rgba(var(--bg-card-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(var(--border-rgb), 0.3);
}

/* Neon text effect */
.neon-text {
    text-shadow: 0 0 5px var(--brand-500), 0 0 10px var(--brand-glow), 0 0 20px var(--brand-glow);
}

/* Cyberpunk border */
.cyber-border {
    position: relative;
}

.cyber-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--brand-500), transparent, var(--brand-500));
    border-radius: inherit;
    z-index: -1;
    animation: border-glow 2s ease-in-out infinite;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Enhanced button hover states */
.btn-enhanced {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

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

.btn-enhanced:hover::before {
    width: 300px;
    height: 300px;
}

/* Card hover lift effect */
.card-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 20px var(--brand-glow);
}

/* =============================================
   LAYOUT UTILITIES
   ============================================= */
.hidden { display: none; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.glass-card {
    background: rgba(var(--bg-card-rgb), 0.7);
    border: 1px solid rgba(var(--border-rgb), 0.6);
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(var(--border-rgb), 0.3);
    backdrop-filter: blur(12px);
}
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-50 { z-index: 50; }
.z-40 { z-index: 40; }
.z-30 { z-index: 30; }
.z-20 { z-index: 20; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Responsive Layout Enforcements */
@media (max-width: 767px) {
    .sidebar-desktop { display: none !important; }
    .header-desktop { display: none !important; }
    .header-mobile { display: flex !important; }
    .nav-mobile { display: flex !important; }
    #main-content { margin-left: 0 !important; padding-top: 4rem !important; padding-bottom: 5rem !important; }
}

@media (min-width: 768px) {
    .sidebar-desktop { display: flex !important; }
    .header-desktop { display: flex !important; }
    .header-mobile { display: none !important; }
    .nav-mobile { display: none !important; }
    #main-content { margin-left: 16rem !important; padding-top: 0 !important; padding-bottom: 2rem !important; }
    .md\:flex { display: flex !important; }
    .md\:hidden { display: none !important; }
    .md\:block { display: block !important; }
    .md\:grid { display: grid !important; }
    .md\:ml-64 { margin-left: 16rem !important; }
    .md\:pt-0 { padding-top: 0 !important; }
}

/* Flexbox */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* Spacing */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-10 { padding-left: 2.5rem; }
.pl-12 { padding-left: 3rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-4 { padding-right: 1rem; }
.m-auto { margin: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-auto { margin-left: auto; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }

/* Sizing */
.w-full { width: 100%; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-h-\[70vh\] { max-height: 70vh; }
.min-h-screen { min-height: 100vh; }

/* =============================================
   TYPOGRAPHY
   ============================================= */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }

/* =============================================
   COLORS
   ============================================= */
.text-white { color: #ffffff; }
.text-slate-900 { color: #0f172a; }
.text-slate-500 { color: #64748b; }
.text-slate-400 { color: #94a3b8; }
.text-brand-500 { color: var(--brand-500); }
.text-brand-400 { color: #4ade80; }
.text-blue-500 { color: var(--blue-500); }
.text-red-500 { color: var(--red-500); }
.text-yellow-500 { color: var(--yellow-500); }
.bg-white { background-color: #ffffff; }
.bg-slate-50 { background-color: #f8fafc; }
.bg-brand-500 { background-color: var(--brand-500); }
.bg-brand-500\/20 { background-color: rgba(34, 197, 94, 0.2); }
.bg-blue-500\/20 { background-color: rgba(59, 130, 246, 0.2); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }

/* =============================================
   BORDERS & SHADOWS
   ============================================= */
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; }
.border-slate-200 { border-color: #e2e8f0; }
.border-brand-500 { border-color: var(--brand-500); }
.border-transparent { border-color: transparent; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.shadow-brand-500\/25 { box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.25); }

/* =============================================
   EFFECTS & ANIMATIONS
   ============================================= */
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }
.transition-opacity { transition: opacity 0.3s ease; }
.transform { transform: translateZ(0); }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.active\:scale-\[0\.98\]:active { transform: scale(0.98); }
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* =============================================
   FOCUS STATES
   ============================================= */
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px; }
.focus\:ring-brand-500\/20:focus { --tw-ring-color: rgba(34, 197, 94, 0.2); }
.focus\:border-brand-500:focus { border-color: var(--brand-500); }

/* =============================================
   SCROLLBAR (VISIBLE & RESPONSIVE ON ALL DEVICES)
   ============================================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(34, 197, 94, 0.6);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.overflow-y-auto { 
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch;
}

.modal-scroll-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: calc(88vh - 75px);
}

@media (max-width: 640px) {
    .modal-scroll-body {
        max-height: calc(85vh - 65px);
    }
}

.overflow-x-hidden { overflow-x: hidden; }
.pr-2 { padding-right: 0.5rem; }

/* =============================================
   LOADING OVERLAY
   ============================================= */
#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    transition: opacity 0.3s ease;
}

#loading-overlay .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--bg-tertiary);
    border-top-color: var(--brand-500);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* =============================================
   LOGIN SCREEN
   ============================================= */
#login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.login-card input[type="tel"],
.login-card input[type="password"],
.login-card input[type="text"],
.login-card input[type="email"] {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 3rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    font-size: 1rem;
    color: var(--text-primary);
    transition: all 0.2s;
}

.login-card input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.login-btn {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.25);
    transition: all 0.2s;
}

.login-btn:hover {
    transform: scale(1.02);
}

.login-btn:active {
    transform: scale(0.98);
}

/* =============================================
   MAIN APP LAYOUT
   ============================================= */
#main-app {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    transition: transform 0.3s ease;
}

.main-content {
    flex: 1;
    margin-left: 280px;
    min-height: 100vh;
}

/* Header */
.app-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 30;
}

/* Cards */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.25rem;
    transition: all 0.2s;
}

.stat-card:hover {
    border-color: var(--brand-500);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);
}

/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* =============================================
   GRADIENT TEXT (bg-clip-text fallback)
   ============================================= */
.bg-clip-text { background-clip: text; -webkit-background-clip: text; }
.text-transparent { color: transparent; }

/* Solid text gradients */
.gradient-text { color: #4ade80; }
.gradient-text-white { color: #f8fafc; }

/* =============================================
   CUSTOM COMPONENT CLASSES
   ============================================= */

/* Input fields */
.input-field {
    background: rgba(var(--bg-card-rgb), 0.6) !important;
    border: 1.5px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.75rem !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    -webkit-appearance: none !important;
}
.input-field::placeholder { color: var(--text-muted) !important; }
.input-field:hover {
    border: 1.5px solid rgba(var(--border-rgb), 0.85) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(var(--border-rgb), 0.12) !important;
}
.input-field:not(:placeholder-shown) {
    border: 1.5px solid rgba(var(--border-rgb), 0.9) !important;
}

/* Glow wrapper — border glow applied to parent on input focus */
.glow-input-wrap {
    position: relative;
}
.glow-input-wrap:focus-within {
    border-radius: 0.875rem;
    box-shadow:
        0 0 0 2.5px rgba(74, 222, 128, 0.35),
        0 0 14px rgba(74, 222, 128, 0.25),
        0 0 28px rgba(74, 222, 128, 0.1);
}
.glow-input-wrap:hover:not(:focus-within) {
    box-shadow: 0 0 0 2.5px rgba(51, 65, 85, 0.25);
}

/* Kill all Tailwind ring/outline on inputs */
input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: none !important;
}
select.input-field {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}
.dark select.input-field { color: #f8fafc; }
.dark select.input-field option { background: #1e293b; color: #f8fafc; }
select.input-field option { background: #ffffff; color: #0f172a; }

/* Textarea */
textarea.input-field {
    resize: vertical;
    min-height: 80px;
}

/* PDF upload area */
#pdf-upload-area {
    border: 1.5px dashed rgba(var(--border-rgb), 0.7) !important;
    background: rgba(var(--bg-card-rgb), 0.4) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#pdf-upload-area:hover, #pdf-upload-area.border-brand-500 {
    border-color: #22c55e !important;
    border-style: solid !important;
    background: rgba(34, 197, 94, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12), 0 0 16px rgba(34, 197, 94, 0.15) !important;
}

/* Primary button */
.btn-primary {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(34, 197, 94, 0.3);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
    opacity: 0;
    transition: opacity 0.25s;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(34, 197, 94, 0.35), 0 0 20px rgba(34, 197, 94, 0.2), 0 0 0 1px rgba(34, 197, 94, 0.4);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Card hover effect */
.card-hover { transition: transform 0.2s, box-shadow 0.2s; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3); }

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-slide-in { animation: slideIn 0.3s ease-out; }

/* Dark mode table headers */
.dark .bg-white\/5 { background-color: rgba(255, 255, 255, 0.07); }

/* Sidebar */
.sidebar { background: var(--bg-secondary); border-right: 1px solid var(--border-color); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
}

@media (max-width: 768px) {
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================
   LUXURY NEW POLICY MODAL THEME
   ============================================= */
.luxury-modal-card {
    background: radial-gradient(ellipse at top, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 1px 0 rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.luxury-header-title {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #F1F5F9;
    background: linear-gradient(180deg, #FFFFFF 0%, #CBD5E1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.luxury-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    font-weight: 600;
    font-size: 0.925rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #E2E8F0;
    cursor: pointer;
}

.luxury-tab:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.luxury-tab.active-motor {
    background: linear-gradient(180deg, #A85A26 0%, #C47334 40%, #7E3812 100%) !important;
    border: 1px solid rgba(255, 200, 150, 0.5) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(196, 115, 52, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

.luxury-tab.active-health {
    background: linear-gradient(180deg, #047857 0%, #10B981 40%, #064E3B 100%) !important;
    border: 1px solid rgba(110, 231, 183, 0.5) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

.luxury-tab.active-life {
    background: linear-gradient(180deg, #4338CA 0%, #6366F1 40%, #312E81 100%) !important;
    border: 1px solid rgba(199, 210, 254, 0.5) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

.luxury-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: #F8FAFC;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.luxury-input.pl-20, input.luxury-input.pl-20, input.pl-20 { padding-left: 5rem !important; }
.luxury-input.pl-18, input.luxury-input.pl-18, input.pl-18 { padding-left: 4.5rem !important; }
.luxury-input.pl-16, input.luxury-input.pl-16, input.pl-16 { padding-left: 4.25rem !important; }
.luxury-input.pl-14, input.luxury-input.pl-14, input.pl-14 { padding-left: 3.5rem !important; }
.luxury-input.pl-12, input.luxury-input.pl-12, input.pl-12 { padding-left: 3rem !important; }
.luxury-input.pl-10, input.luxury-input.pl-10, input.pl-10 { padding-left: 2.5rem !important; }
.luxury-input.pr-10, input.luxury-input.pr-10, input.pr-10 { padding-right: 2.5rem !important; }
.luxury-input.pr-9, select.luxury-input.pr-9, select.pr-9 { padding-right: 2.25rem !important; }

/* Wrap luxury inputs in .luxury-input-wrap for glow-on-focus via :focus-within */
.luxury-input-wrap {
    position: relative;
    width: 100%;
}
.luxury-input-wrap:focus-within {
    border-radius: 0.875rem;
    box-shadow:
        0 0 0 2.5px rgba(74, 222, 128, 0.4),
        0 0 14px rgba(74, 222, 128, 0.25),
        0 0 30px rgba(74, 222, 128, 0.1);
}
.luxury-input-wrap:hover:not(:focus-within) {
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.15);
}

.luxury-input:focus {
    border-color: rgba(74, 222, 128, 0.85) !important;
    background: rgba(15, 23, 42, 0.95) !important;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(34, 197, 94, 0.2),
        0 0 12px rgba(34, 197, 94, 0.25),
        0 0 30px rgba(34, 197, 94, 0.15) !important;
}
.luxury-input:hover {
    border-color: rgba(74, 222, 128, 0.5) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(74, 222, 128, 0.12) !important;
}

.luxury-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #94A3B8;
    margin-bottom: 0.35rem;
}

.luxury-label .required {
    color: #EF4444;
    margin-left: 0.15rem;
}

.luxury-submit-btn {
    width: 100%;
    padding: 0.9rem 1.5rem;
    border-radius: 0.875rem;
    font-weight: 700;
    font-size: 1rem;
    color: #FFFFFF;
    background: linear-gradient(180deg, #D97706 0%, #B45309 60%, #92400E 100%);
    border: 1px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 4px 20px rgba(180, 83, 9, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-submit-btn:hover {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 60%, #B45309 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(217, 119, 6, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.luxury-submit-btn:active {
    transform: translateY(1px);
}

/* =============================================
   MOBILE FLOATING BOTTOM DOCK NAVIGATION
   ============================================= */
.mobile-bottom-dock-container {
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.mobile-bottom-dock {
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(8, 14, 26, 0.98) 100%);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 16px 40px -6px rgba(0, 0, 0, 0.85),
        0 0 24px -2px rgba(34, 197, 94, 0.22),
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
    border-radius: 1.75rem;
}

.mobile-dock-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.5rem;
    border-radius: 1.25rem;
    color: #94A3B8;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    flex: 1;
    min-width: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid transparent;
}

.mobile-dock-btn:active {
    transform: scale(0.88);
}

.mobile-dock-btn.active {
    color: #4ADE80;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.04) 100%);
    border: 1px solid rgba(74, 222, 128, 0.35);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.mobile-dock-btn .dock-indicator {
    position: absolute;
    top: 2px;
    width: 14px;
    height: 3px;
    border-radius: 9999px;
    background: #4ADE80;
    box-shadow: 0 0 8px #4ADE80, 0 0 14px rgba(74, 222, 128, 0.8);
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-dock-btn.active .dock-indicator {
    opacity: 1;
    transform: scaleX(1);
}

.mobile-dock-btn .dock-icon {
    width: 1.35rem;
    height: 1.35rem;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.mobile-dock-btn.active .dock-icon {
    transform: translateY(-1px) scale(1.05);
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.6));
}

.mobile-dock-btn .dock-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: 0.2rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.mobile-dock-btn.active .dock-label {
    color: #FFFFFF;
    font-weight: 700;
}

/* Center Action Button (FAB in dock) */
.mobile-dock-fab-wrapper {
    position: relative;
    top: -1.05rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.25rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
}

.mobile-dock-fab {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 50%, #0D9488 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    border: 3px solid #0B132B;
    box-shadow: 
        0 10px 25px -3px rgba(34, 197, 94, 0.65),
        0 0 20px rgba(34, 197, 94, 0.45),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.mobile-dock-fab::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
    pointer-events: none;
}

.mobile-dock-fab-wrapper:hover .mobile-dock-fab {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 
        0 14px 30px -3px rgba(34, 197, 94, 0.75),
        0 0 28px rgba(34, 197, 94, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.mobile-dock-fab-wrapper:active .mobile-dock-fab {
    transform: scale(0.92);
}

.mobile-dock-fab-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: #86EFAC;
    margin-top: 0.2rem;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* =============================================
   NATIVE FULLSCREEN MOBILE APP MENU
   ============================================= */
.native-menu-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    overflow: hidden;
    backdrop-filter: blur(16px);
}

.native-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.native-menu-row:last-child {
    border-bottom: none;
}

.native-menu-row:active {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.99);
}

.native-menu-row.active {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.03) 100%);
    border-left: 3px solid #4ADE80;
}

.native-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.5rem;
    border-radius: 1.25rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.native-app-tile:active {
    transform: scale(0.92);
}



/* =============================================
   ADVANCED SHIELD PRELOADER
   ============================================= */
@keyframes preloader-pulse {
    0%, 100% {
        transform: scale(0.96);
        filter: drop-shadow(0 0 15px rgba(34, 197, 94, 0.4)) drop-shadow(0 0 35px rgba(59, 130, 246, 0.3));
    }
    50% {
        transform: scale(1.06);
        filter: drop-shadow(0 0 25px rgba(74, 222, 128, 0.85)) drop-shadow(0 0 50px rgba(59, 130, 246, 0.5));
    }
}

@keyframes preloader-orbit {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes preloader-orbit-reverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes preloader-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.preloader-shield-container {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-ring-outer {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed rgba(74, 222, 128, 0.6);
    border-top-color: #38bdf8;
    border-bottom-color: #a855f7;
    animation: preloader-orbit 6s linear infinite;
}

.preloader-ring-inner {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-left-color: #22c55e;
    border-right-color: #3b82f6;
    animation: preloader-orbit-reverse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.preloader-shield-img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    z-index: 10;
    animation: preloader-pulse 2.2s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}

.preloader-glow-orb {
    position: absolute;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.35) 0%, rgba(59, 130, 246, 0.15) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: preloader-pulse 2.2s ease-in-out infinite;
}

.preloader-shimmer-text {
    background: linear-gradient(90deg, #94a3b8 0%, #ffffff 50%, #94a3b8 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: preloader-shimmer 2.5s linear infinite;
}


/* =============================================
   PROFESSIONAL LIGHT THEMES
   ============================================= */

/* --- Arctic Frost (Default Light) --- */
html.theme-light, body.theme-light,
html.light, body.light, .theme-light, html.theme-light {
    --bg-primary: #FFFFFF !important;
    --bg-secondary: #F8FAFC !important;
    --bg-tertiary: #F1F5F9 !important;
    --bg-card: #FFFFFF !important;
    --bg-card-rgb: 255, 255, 255 !important;
    --bg-glass: rgba(255, 255, 255, 0.95) !important;
    --text-primary: #0F172A !important;
    --text-secondary: #475569 !important;
    --text-muted: #94A3B8 !important;
    --border-color: #E2E8F0 !important;
    --border-rgb: 226, 232, 240 !important;
    --brand-50: #eff6ff !important;
    --brand-100: #dbeafe !important;
    --brand-200: #bfdbfe !important;
    --brand-300: #93c5fd !important;
    --brand-400: #60a5fa !important;
    --brand-500: #3b82f6 !important;
    --brand-600: #2563eb !important;
    --brand-700: #1d4ed8 !important;
    --brand-glow: rgba(59, 130, 246, 0.3) !important;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05) !important;
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1) !important;
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1) !important;
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1) !important;
    --color-primary: #2563eb !important;
    --color-primary-hover: #1d4ed8 !important;
}

.theme-light body, html.theme-light body, body.theme-light,
html.light body, body.light {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
}

/* Light Theme - Clean Card Styles */
.theme-light .glass-card,
.theme-light.glass-card,
.light .glass-card,
.light.glass-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important;
    border-radius: 12px !important;
}

/* Light Theme - Sidebar */
.theme-light .sidebar-desktop,
.theme-light .sidebar-mobile,
html.theme-light .sidebar-desktop,
html.theme-light .sidebar-mobile {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.04) !important;
}

/* Light Theme - Header */
.theme-light .header-desktop,
.theme-light .header-mobile,
html.theme-light .header-desktop,
html.theme-light .header-mobile {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(12px) !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Light Theme - Inputs */
.theme-light .luxury-input,
.theme-light input:not([type=checkbox]):not([type=radio]),
.theme-light select,
.theme-light textarea,
.light .luxury-input,
.light input:not([type=checkbox]):not([type=radio]),
.light select,
.light textarea {
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    color: #0F172A !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
}

.theme-light .luxury-input:focus,
.theme-light input:focus,
.theme-light select:focus,
.theme-light textarea:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Light Theme - Buttons */
.theme-light .luxury-submit-btn,
.theme-light button[type=submit],
.light .luxury-submit-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

/* Light Theme - Text contrast fixes */
.theme-light, .light {
    color: #0F172A !important;
}

.theme-light .text-slate-400,
.theme-light .text-slate-300,
.theme-light .text-slate-500 {
    color: #64748B !important;
}

.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4 {
    color: #0F172A !important;
}

/* Rose Gold Light Theme */
.theme-rosegold, html.theme-rosegold, body.theme-rosegold {
    --bg-primary: #FDF2F8 !important;
    --bg-secondary: #FFFFFF !important;
    --bg-card: #FFFFFF !important;
    --bg-card-rgb: 255, 255, 255 !important;
    --bg-glass: rgba(255, 255, 255, 0.95) !important;
    --text-primary: #831843 !important;
    --text-secondary: #9D174D !important;
    --text-muted: #BE185D !important;
    --border-color: #FBCFE8 !important;
    --brand-500: #EC4899 !important;
    --brand-600: #DB2777 !important;
    --color-primary: #DB2777 !important;
    --color-primary-hover: #BE185D !important;
}

.theme-rosegold .glass-card,
.theme-rosegold.glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #FBCFE8 !important;
}

/* Forest Light Theme */
.theme-forest, html.theme-forest, body.theme-forest {
    --bg-primary: #F0FDF4 !important;
    --bg-secondary: #FFFFFF !important;
    --bg-card: #FFFFFF !important;
    --bg-card-rgb: 255, 255, 255 !important;
    --text-primary: #14532D !important;
    --text-secondary: #166534 !important;
    --text-muted: #22C55E !important;
    --border-color: #BBF7D0 !important;
    --color-primary: #16A34A !important;
    --color-primary-hover: #15803D !important;
}

.theme-forest .glass-card,
.theme-forest.glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #BBF7D0 !important;
}

/* Slate Light Theme */
.theme-slate-light, html.theme-slate-light, body.theme-slate-light {
    --bg-primary: #F8FAFC !important;
    --bg-secondary: #FFFFFF !important;
    --bg-card: #FFFFFF !important;
    --text-primary: #0F172A !important;
    --text-secondary: #334155 !important;
    --text-muted: #64748B !important;
    --border-color: #CBD5E1 !important;
    --color-primary: #475569 !important;
    --color-primary-hover: #334155 !important;
}

/* Coral Light Theme */
.theme-coral, html.theme-coral, body.theme-coral {
    --bg-primary: #FFF7ED !important;
    --bg-secondary: #FFFFFF !important;
    --bg-card: #FFFFFF !important;
    --text-primary: #7C2D12 !important;
    --text-secondary: #9A3412 !important;
    --text-muted: #EA580C !important;
    --border-color: #FED7AA !important;
    --color-primary: #EA580C !important;
    --color-primary-hover: #C2410C !important;
}

.theme-coral .glass-card,
.theme-coral.glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #FED7AA !important;
}

/* Lavender Light Theme */
.theme-lavender, html.theme-lavender, body.theme-lavender {
    --bg-primary: #FAF5FF !important;
    --bg-secondary: #FFFFFF !important;
    --bg-card: #FFFFFF !important;
    --text-primary: #581C87 !important;
    --text-secondary: #7E22CE !important;
    --text-muted: #A855F7 !important;
    --border-color: #E9D5FF !important;
    --color-primary: #9333EA !important;
    --color-primary-hover: #7E22CE !important;
}

.theme-lavender .glass-card,
.theme-lavender.glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #E9D5FF !important;
}

/* Mint Light Theme */
.theme-mint, html.theme-mint, body.theme-mint {
    --bg-primary: #F0FDFA !important;
    --bg-secondary: #FFFFFF !important;
    --bg-card: #FFFFFF !important;
    --text-primary: #134E4A !important;
    --text-secondary: #0F766E !important;
    --text-muted: #14B8A6 !important;
    --border-color: #99F6E4 !important;
    --color-primary: #0D9488 !important;
    --color-primary-hover: #0F766E !important;
}

/* Peach Light Theme */
.theme-peach, html.theme-peach, body.theme-peach {
    --bg-primary: #FEF2F2 !important;
    --bg-secondary: #FFFFFF !important;
    --bg-card: #FFFFFF !important;
    --text-primary: #7F1D1D !important;
    --text-secondary: #991B1B !important;
    --text-muted: #DC2626 !important;
    --border-color: #FECACA !important;
    --color-primary: #DC2626 !important;
    --color-primary-hover: #B91C1C !important;
}

/* =============================================
   ADVANCED GLASSMORPHISM EFFECTS
   ============================================= */

/* Premium Glass Card - Blur + Gradient Border */
.glass-premium {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.glass-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Crystal Glass Effect */
.glass-crystal {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Neon Glow Glass */
.glass-neon {
    background: rgba(var(--bg-card-rgb), 0.4);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(var(--brand-500), 0.3);
    border-radius: 1rem;
    box-shadow: 0 0 15px rgba(var(--brand-500), 0.1), 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(var(--brand-500), 0.05);
    transition: all 0.3s ease;
}

.glass-neon:hover {
    border-color: rgba(var(--brand-500), 0.5);
    box-shadow: 0 0 25px rgba(var(--brand-500), 0.2), 0 12px 40px rgba(0, 0, 0, 0.25), inset 0 0 30px rgba(var(--brand-500), 0.08);
}

/* Frosted Glass Panel */
.glass-frost {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Gradient Border Effect */
.gradient-border {
    position: relative;
    background: var(--bg-card);
    border-radius: 1rem;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--brand-400), var(--brand-600), var(--brand-400));
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
    border-radius: inherit;
    z-index: -1;
}

/* Shimmer Effect */
.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

/* Floating Particles Background */
.particles-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.particles-bg::before,
.particles-bg::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
    animation: float 20s ease-in-out infinite;
}

.particles-bg::before {
    top: -100px;
    left: -100px;
}

.particles-bg::after {
    bottom: -100px;
    right: -100px;
    animation-delay: -10s;
}

/* Animated Gradient Background */
.animated-gradient-bg {
    background: linear-gradient(-45deg, var(--bg-primary), var(--bg-secondary), var(--bg-tertiary), var(--bg-card));
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* Matrix Rain Effect (Cyber Theme) */
.matrix-rain {
    background:
        linear-gradient(transparent 95%, rgba(0, 255, 65, 0.03) 95%),
        linear-gradient(90deg, transparent 95%, rgba(0, 255, 65, 0.02) 95%);
    background-size: 30px 30px;
}

/* Aurora Effect */
.aurora-bg {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(var(--brand-500), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--brand-400), 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 60% 80%, rgba(var(--brand-600), 0.05) 0%, transparent 45%);
    animation: auroraShift 30s ease-in-out infinite alternate;
}

/* Frost Effect */
.frost-overlay {
    position: relative;
}

.frost-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    border-radius: inherit;
}

/* Holographic Effect */
.holographic {
    position: relative;
    background: var(--bg-card);
}

.holographic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 60%);
    background-size: 200% 200%;
    animation: holographicMove 5s ease infinite;
    border-radius: inherit;
    pointer-events: none;
}

/* Glass Morphism Card Override */
.glass-card {
    background: rgba(var(--bg-card-rgb), 0.6) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(var(--border-rgb), 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* =============================================
   ADVANCED ANIMATIONS
   ============================================= */

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes auroraShift {
    0% { opacity: 0.7; transform: translate(0, 0); }
    50% { opacity: 1; transform: translate(20px, -20px); }
    100% { opacity: 0.7; transform: translate(-20px, 20px); }
}

@keyframes holographicMove {
    0% { background-position: 200% 200%; }
    100% { background-position: 0% 0%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    75% { transform: translateY(20px) rotate(-5deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px var(--brand-500), 0 0 10px var(--brand-glow); }
    50% { box-shadow: 0 0 20px var(--brand-500), 0 0 40px var(--brand-glow); }
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Glow Effects */
.glow-soft { box-shadow: 0 0 20px rgba(var(--brand-500), 0.2); }
.glow-medium { box-shadow: 0 0 30px rgba(var(--brand-500), 0.3); }
.glow-strong { box-shadow: 0 0 40px rgba(var(--brand-500), 0.4); }

.glow-text {
    text-shadow: 0 0 10px var(--brand-500), 0 0 20px var(--brand-glow);
}

.glow-border {
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 15px rgba(var(--brand-500), 0.3), inset 0 0 15px rgba(var(--brand-500), 0.1);
}

/* =============================================
   THEME-SPECIFIC GLASS EFFECTS
   ============================================= */

/* Cyber Theme - Matrix Grid */
.theme-cyber .glass-card,
.theme-cyber.glass-card {
    background: rgba(0, 20, 0, 0.6) !important;
    border-color: rgba(0, 255, 65, 0.2) !important;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.1), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Ocean Theme - Bubbles */
.theme-ocean .glass-card,
.theme-ocean.glass-card {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.3), rgba(8, 47, 73, 0.4)) !important;
    border-color: rgba(56, 189, 248, 0.2) !important;
}

/* Sunset Theme - Warm Glow */
.theme-sunset .glass-card,
.theme-sunset.glass-card {
    background: linear-gradient(135deg, rgba(146, 64, 14, 0.4), rgba(120, 53, 15, 0.5)) !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.1) !important;
}

/* Emerald Theme - Nature */
.theme-emerald .glass-card,
.theme-emerald.glass-card {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.5), rgba(2, 44, 34, 0.6)) !important;
    border-color: rgba(52, 211, 153, 0.2) !important;
}

/* Violet Theme - Mystical */
.theme-violet .glass-card,
.theme-violet.glass-card {
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.4), rgba(30, 27, 75, 0.5)) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.15) !important;
}

/* Sapphire Theme - Luxury */
.theme-sapphire .glass-card,
.theme-sapphire.glass-card {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.5), rgba(3, 7, 18, 0.7)) !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.15) !important;
}

/* Rose Gold Theme - Elegant */
.theme-rosegold .glass-card,
.theme-rosegold.glass-card {
    background: rgba(253, 242, 240, 0.8) !important;
    border-color: rgba(236, 72, 153, 0.2) !important;
    backdrop-filter: blur(25px) saturate(150%) !important;
}

/* Light Themes - Brighter Glass */
.theme-light .glass-card,
.theme-light.glass-card,
.light .glass-card,
.light.glass-card {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
}

.theme-forest .glass-card,
.theme-forest.glass-card {
    background: rgba(240, 253, 244, 0.8) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}

.theme-slate .glass-card,
.theme-slate.glass-card {
    background: rgba(248, 250, 252, 0.9) !important;
    border-color: rgba(100, 116, 139, 0.15) !important;
}

.theme-coral .glass-card,
.theme-coral.glass-card {
    background: rgba(255, 247, 237, 0.8) !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
}

/* =============================================
   ADVANCED CARD EFFECTS
   ============================================= */

/* 3D Card Tilt Effect */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-3d-inner {
    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.card-3d:hover .card-3d-inner {
    transform: rotateY(5deg) rotateX(5deg);
}

/* Hover Lift with Glow */
.card-lift-glow {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-lift-glow:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 30px var(--brand-glow);
}

/* Magnetic Effect Cards */
.card-magnetic {
    transition: transform 0.2s ease-out;
}

/* Press Effect */
.card-press:active {
    transform: scale(0.98);
    transition: transform 0.1s;
}

/* Border Gradient Animation */
.border-gradient-animate {
    position: relative;
}

.border-gradient-animate::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, var(--brand-400), var(--brand-600), var(--brand-400));
    background-size: 200% 100%;
    animation: borderGradient 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes borderGradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Ripple Effect */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--brand-500) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}

.ripple:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* =============================================
   THEME-SPECIFIC BACKGROUND EFFECTS
   ============================================= */

/* Cyber Theme Body */
.theme-cyber body {
    background:
        radial-gradient(circle at 20% 80%, rgba(0, 255, 65, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 65, 0.03) 0%, transparent 30%),
        linear-gradient(135deg, #0a0a0a 0%, #0d1f0d 50%, #0a0a0a 100%);
}

/* Ocean Theme Body */
.theme-ocean body {
    background:
        radial-gradient(ellipse at top right, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(14, 116, 144, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, #0a0f1a 0%, #0c1929 50%, #0a0f1a 100%);
}

/* Sunset Theme Body */
.theme-sunset body {
    background:
        radial-gradient(ellipse at top center, rgba(251, 191, 36, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(146, 64, 14, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, #0f0a0a 0%, #1a0f0a 50%, #0f0a0a 100%);
}

/* Emerald Theme Body */
.theme-emerald body {
    background:
        radial-gradient(ellipse at top left, rgba(52, 211, 153, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(6, 78, 59, 0.05) 0%, transparent 40%),
        linear-gradient(135deg, #022c22 0%, #064e3b 50%, #022c22 100%);
}

/* Violet Theme Body */
.theme-violet body {
    background:
        radial-gradient(ellipse at top right, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(88, 28, 135, 0.06) 0%, transparent 40%),
        linear-gradient(135deg, #1e1b4b 0%, #2e1065 50%, #1e1b4b 100%);
}

/* Sapphire Theme Body */
.theme-sapphire body {
    background:
        radial-gradient(ellipse at center, rgba(96, 165, 250, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, #030712 0%, #0f172a 50%, #030712 100%);
}

/* Terminal Theme Body */
.theme-terminal body {
    background: #0d1117;
}

/* =============================================
   PREMIUM UI COMPONENTS
   ============================================= */

/* Premium Button */
.btn-premium {
    position: relative;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: white;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--brand-500), 0.3);
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-premium:hover::before {
    left: 100%;
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--brand-500), 0.4);
}

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

/* Ghost Button */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ghost:hover {
    background: var(--bg-tertiary);
    border-color: var(--brand-500);
}

/* Icon Button Glow */
.btn-icon-glow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-icon-glow:hover {
    background: var(--brand-500);
    border-color: var(--brand-500);
    box-shadow: 0 0 20px var(--brand-glow);
    transform: scale(1.1);
}

.btn-icon-glow svg {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.btn-icon-glow:hover svg {
    color: white;
}

/* Badge with Glow */
.badge-glow {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--brand-500);
    color: white;
    box-shadow: 0 0 10px var(--brand-glow);
}

/* Input Focus Glow */
.input-glow:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(var(--brand-500), 0.2), 0 0 20px rgba(var(--brand-500), 0.1);
}

/* Tooltip with Arrow */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 50;
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

/* Progress Bar Glow */
.progress-glow {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 9999px;
    overflow: hidden;
}

.progress-glow-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
    border-radius: 9999px;
    position: relative;
    overflow: hidden;
}

.progress-glow-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

/* Avatar with Ring */
.avatar-ring {
    position: relative;
}

.avatar-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
    z-index: -1;
}

/* Status Indicator Pulse */
.status-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success-500);
    position: relative;
}

.status-pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Divider with Gradient */
.divider-gradient {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

/* Notification Dot */
.notification-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--bg-card);
}

.notification-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #ef4444;
    opacity: 0.3;
    animation: pulse-glow 1.5s ease-in-out infinite;
}


/* =============================================
   LIGHT THEME - COMPONENT OVERRIDES
   ============================================= */

/* Light Theme - Sidebar */
.theme-light .sidebar-desktop,
.theme-light .sidebar-mobile,
.light .sidebar-desktop,
.light .sidebar-mobile {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.05) !important;
}

.theme-light .sidebar-desktop .nav-item,
.theme-light .sidebar-mobile .nav-item {
    color: #475569 !important;
    border-radius: 8px !important;
}

.theme-light .sidebar-desktop .nav-item:hover,
.theme-light .sidebar-mobile .nav-item:hover {
    background: #F1F5F9 !important;
    color: #0F172A !important;
}

.theme-light .sidebar-desktop .nav-item.active,
.theme-light .sidebar-mobile .nav-item.active {
    background: #EFF6FF !important;
    color: #2563EB !important;
    border-left: 3px solid #2563EB !important;
}

/* Light Theme - Header */
.theme-light .header-desktop,
.theme-light .header-mobile,
.light .header-desktop,
.light .header-mobile {
    background: rgba(255,255,255,0.95) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    backdrop-filter: blur(12px) !important;
}

/* Light Theme - Inputs */
.theme-light input:not([type="checkbox"]):not([type="radio"]),
.theme-light select,
.theme-light textarea,
.light input:not([type="checkbox"]):not([type="radio"]),
.light select,
.light textarea {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
}

.theme-light input:focus,
.theme-light select:focus,
.theme-light textarea:focus,
.light input:focus,
.light select:focus,
.light textarea:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Light Theme - Buttons */
.theme-light .luxury-submit-btn,
.light .luxury-submit-btn {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

.theme-light .luxury-submit-btn:hover,
.light .luxury-submit-btn:hover {
    background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}

/* Light Theme - Tables */
.theme-light table,
.light table {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.theme-light table thead,
.light table thead {
    background: #F8FAFC !important;
}

.theme-light table thead th,
.light table thead th {
    color: #475569 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #E2E8F0 !important;
}

.theme-light table tbody tr,
.light table tbody tr {
    background: #FFFFFF !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.theme-light table tbody tr:hover,
.light table tbody tr:hover {
    background: #F8FAFC !important;
}

/* Light Theme - Cards in Modals */
.theme-light .modal-content,
.theme-light .modal-overlay,
.light .modal-content,
.light .modal-overlay {
    background: #FFFFFF !important;
    border-radius: 16px !important;
}

/* Light Theme - Dropdown/Select */
.theme-light select,
.light select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 8px center !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    padding-right: 32px !important;
}

/* Light Theme - Badges */
.theme-light .badge,
.theme-light .status-badge,
.light .badge,
.light .status-badge {
    border-radius: 20px !important;
    font-weight: 500 !important;
}

/* Light Theme - Mobile Bottom Dock */
.theme-light .mobile-bottom-dock,
.light .mobile-bottom-dock {
    background: rgba(255,255,255,0.95) !important;
    border-top: 1px solid #E2E8F0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important;
}

/* Light Theme - Tooltips */
.theme-light .tooltip,
.theme-light [data-tooltip]:before,
.light .tooltip,
.light [data-tooltip]:before {
    background: #0F172A !important;
    color: #FFFFFF !important;
}

/* Light Theme - Progress Bars */
.theme-light .progress-bar,
.theme-light .progress,
.light .progress-bar,
.light .progress {
    background: #E2E8F0 !important;
}

/* Light Theme - Quick Actions */
.theme-light .quick-action-tile,
.light .quick-action-tile {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
}

.theme-light .quick-action-tile:hover,
.light .quick-action-tile:hover {
    background: #F8FAFC !important;
    border-color: #3B82F6 !important;
    color: #2563EB !important;
}

/* Light Theme - Charts */
.theme-light .chart-container,
.light .chart-container {
    background: #FFFFFF !important;
    border-radius: 12px !important;
}

/* Light Theme - Tabs */
.theme-light .tab-active,
.theme-light .tab.active,
.light .tab-active,
.light .tab.active {
    background: #2563EB !important;
    color: #FFFFFF !important;
}

.theme-light .tab:not(.active),
.light .tab:not(.active) {
    background: transparent !important;
    color: #64748B !important;
}

/* Light Theme - Loading */
.theme-light .loading-spinner,
.theme-light .spinner,
.light .loading-spinner,
.light .spinner {
    border-color: rgba(37, 99, 235, 0.2) !important;
    border-top-color: #2563EB !important;
}