/* Theme color system — ported from the main crms app (dashboard.css).
   Each theme overrides CSS custom properties the portal already uses. */

body.light-theme {
    --primary: #f5f5f7;
    --secondary: #ffffff;
    --tertiary: #f8f8f8;
    --text: #1a1a1f;
    --text-muted: #6b7280;
    --text-dark: #9ca3af;
    --border: #d1d5db;
}

/* ========== Ocean Theme (deep teal) ========== */
body.theme-ocean {
    --primary: #061a24;
    --secondary: #0a2935;
    --tertiary: #133847;
    --accent: #06b6d4;
    --accent-light: #22d3ee;
    --accent-dark: #0891b2;
    --text: #e0f7ff;
    --text-muted: #7ba3b8;
    --text-dark: #5d8499;
    --border: #1d4456;
    --gradient: #0ea5e9;
}
body.theme-ocean .top-header { background: rgba(6, 26, 36, 0.8); }

/* ========== Forest Theme (deep emerald) ========== */
body.theme-forest {
    --primary: #0a1410;
    --secondary: #122318;
    --tertiary: #1a3326;
    --accent: #10b981;
    --accent-light: #34d399;
    --accent-dark: #059669;
    --text: #ecfdf5;
    --text-muted: #86b09a;
    --text-dark: #5d8674;
    --border: #1f3d2c;
    --gradient: #14b8a6;
}
body.theme-forest .top-header { background: rgba(10, 20, 16, 0.8); }

/* ========== Royal Theme (deep purple) ========== */
body.theme-royal {
    --primary: #0f0a1f;
    --secondary: #1a1130;
    --tertiary: #251a45;
    --accent: #a855f7;
    --accent-light: #c084fc;
    --accent-dark: #9333ea;
    --text: #f5f3ff;
    --text-muted: #a89bc4;
    --text-dark: #7c70a0;
    --border: #382454;
    --gradient: #1d4ed8;
}
body.theme-royal .top-header { background: rgba(15, 10, 31, 0.8); }

/* ========== Midnight Theme (electric blue) ========== */
body.theme-midnight {
    --primary: #050816;
    --secondary: #0a0f24;
    --tertiary: #111933;
    --accent: #3b82f6;
    --accent-light: #60a5fa;
    --accent-dark: #2563eb;
    --text: #e6ebff;
    --text-muted: #6b7a99;
    --text-dark: #4a5777;
    --border: #1f2845;
    --gradient: #1d4ed8;
}
body.theme-midnight .top-header { background: rgba(5, 8, 22, 0.8); }

/* ========== Cyberpunk Theme (neon pink/cyan) ========== */
body.theme-cyberpunk {
    --primary: #0a0014;
    --secondary: #14001f;
    --tertiary: #1f0033;
    --accent: #ec4899;
    --accent-light: #f472b6;
    --accent-dark: #db2777;
    --text: #f5e6ff;
    --text-muted: #b59ec7;
    --text-dark: #846f96;
    --border: #2d0a47;
    --gradient: #06b6d4;
}
body.theme-cyberpunk .top-header { background: rgba(10, 0, 20, 0.8); }

/* ========== Dracula Theme ========== */
body.theme-dracula {
    --primary: #282a36;
    --secondary: #383a4c;
    --tertiary: #44475a;
    --accent: #bd93f9;
    --accent-light: #ff79c6;
    --accent-dark: #9580d4;
    --text: #f8f8f2;
    --text-muted: #c4c4d0;
    --text-dark: #6272a4;
    --border: #44475a;
    --gradient: #ff79c6;
}
body.theme-dracula .top-header { background: rgba(40, 42, 54, 0.8); }

/* ========== Nord Theme (cool blue-gray) ========== */
body.theme-nord {
    --primary: #2e3440;
    --secondary: #3b4252;
    --tertiary: #434c5e;
    --accent: #88c0d0;
    --accent-light: #8fbcbb;
    --accent-dark: #5e81ac;
    --text: #eceff4;
    --text-muted: #d8dee9;
    --text-dark: #a4adc4;
    --border: #4c566a;
    --gradient: #5e81ac;
}
body.theme-nord .top-header { background: rgba(46, 52, 64, 0.8); }

/* ========== Slate Theme (sophisticated slate-blue) ========== */
body.theme-slate {
    --primary: #0f172a;
    --secondary: #1e293b;
    --tertiary: #334155;
    --accent: #06b6d4;
    --accent-light: #22d3ee;
    --accent-dark: #0891b2;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --text-dark: #64748b;
    --border: #334155;
    --gradient: #0ea5e9;
}
body.theme-slate .top-header { background: rgba(15, 23, 42, 0.8); }

/* ========== Mocha Theme (warm rich brown) ========== */
body.theme-mocha {
    --primary: #1c1410;
    --secondary: #2a1f17;
    --tertiary: #3d2e22;
    --accent: #d4a574;
    --accent-light: #e8c598;
    --accent-dark: #a8855a;
    --text: #f5ede0;
    --text-muted: #c0a896;
    --text-dark: #8a7866;
    --border: #4a3828;
    --gradient: #b8865a;
}
body.theme-mocha .top-header { background: rgba(28, 20, 16, 0.8); }

/* ========== Crimson Theme (deep red sophistication) ========== */
body.theme-crimson {
    --primary: #1a0a0d;
    --secondary: #2a1118;
    --tertiary: #3d1a23;
    --accent: #dc2626;
    --accent-light: #ef4444;
    --accent-dark: #b91c1c;
    --text: #fdf4f5;
    --text-muted: #c9a4ac;
    --text-dark: #997a82;
    --border: #4a1d28;
    --gradient: #f43f5e;
}
body.theme-crimson .top-header { background: rgba(26, 10, 13, 0.8); }

/* ========== Aurora Theme (northern lights green/purple) ========== */
body.theme-aurora {
    --primary: #0a0f1c;
    --secondary: #131b2e;
    --tertiary: #1c2640;
    --accent: #10b981;
    --accent-light: #6ee7b7;
    --accent-dark: #059669;
    --text: #ecfeff;
    --text-muted: #94a3b8;
    --text-dark: #6b7c99;
    --border: #1f2d4d;
    --gradient: #a855f7;
}
body.theme-aurora .top-header { background: rgba(10, 15, 28, 0.8); }

/* ========== Rose Gold Theme (light pink/champagne) ========== */
body.theme-rose-gold {
    --primary: #fdf2f4;
    --secondary: #ffffff;
    --tertiary: #fce8ec;
    --accent: #e11d48;
    --accent-light: #fb7185;
    --accent-dark: #be123c;
    --text: #1f1213;
    --text-muted: #7a5560;
    --text-dark: #9c7d85;
    --border: #f5cdd5;
    --gradient: #f59e0b;
}
body.theme-rose-gold .top-header { background: rgba(253, 242, 244, 0.8); }

/* ========== Solarized Light Theme (warm cream/gold) ========== */
body.theme-solarized {
    --primary: #fdf6e3;
    --secondary: #ffffff;
    --tertiary: #f5eed0;
    --accent: #b58900;
    --accent-light: #cb9d28;
    --accent-dark: #93720b;
    --text: #073642;
    --text-muted: #586e75;
    --text-dark: #93a1a1;
    --border: #eee8d5;
    --gradient: #cb4b16;
}
body.theme-solarized .top-header { background: rgba(253, 246, 227, 0.8); }

/* ========== Mint Theme (soft sage green) ========== */
body.theme-mint {
    --primary: #f0fdf4;
    --secondary: #ffffff;
    --tertiary: #dcfce7;
    --accent: #059669;
    --accent-light: #10b981;
    --accent-dark: #047857;
    --text: #0f1f17;
    --text-muted: #4d6b5a;
    --text-dark: #7a9485;
    --border: #bbf7d0;
    --gradient: #14b8a6;
}
body.theme-mint .top-header { background: rgba(240, 253, 244, 0.8); }

/* ========== Sky Theme (pale blue) ========== */
body.theme-sky {
    --primary: #f0f9ff;
    --secondary: #ffffff;
    --tertiary: #e0f2fe;
    --accent: #0284c7;
    --accent-light: #38bdf8;
    --accent-dark: #0369a1;
    --text: #0c2540;
    --text-muted: #475569;
    --text-dark: #94a3b8;
    --border: #bae6fd;
    --gradient: #0ea5e9;
}
body.theme-sky .top-header { background: rgba(240, 249, 255, 0.8); }

/* ========== Lavender Theme (soft purple) ========== */
body.theme-lavender {
    --primary: #faf5ff;
    --secondary: #ffffff;
    --tertiary: #f3e8ff;
    --accent: #7c3aed;
    --accent-light: #a78bfa;
    --accent-dark: #6d28d9;
    --text: #1f1338;
    --text-muted: #6b5694;
    --text-dark: #9b8bbe;
    --border: #e9d5ff;
    --gradient: #1d4ed8;
}
body.theme-lavender .top-header { background: rgba(250, 245, 255, 0.8); }

/* ========== Sand Theme (warm beige/amber) ========== */
body.theme-sand {
    --primary: #fef9f0;
    --secondary: #ffffff;
    --tertiary: #fef3e2;
    --accent: #d97706;
    --accent-light: #f59e0b;
    --accent-dark: #b45309;
    --text: #1f1610;
    --text-muted: #78604a;
    --text-dark: #a89178;
    --border: #fde9c8;
    --gradient: #ea580c;
}
body.theme-sand .top-header { background: rgba(254, 249, 240, 0.8); }

/* ========== Pearl Theme (neutral elegant) ========== */
body.theme-pearl {
    --primary: #f8f7fa;
    --secondary: #ffffff;
    --tertiary: #f0eef5;
    --accent: #6b46c1;
    --accent-light: #1d4ed8;
    --accent-dark: #553c9a;
    --text: #1a1625;
    --text-muted: #5a4f70;
    --text-dark: #8b7e9e;
    --border: #e0dbe8;
    --gradient: #6366f1;
}
body.theme-pearl .top-header { background: rgba(248, 247, 250, 0.8); }

/* ========== Matcha Theme (earthy green) ========== */
body.theme-matcha {
    --primary: #f7faf3;
    --secondary: #ffffff;
    --tertiary: #ecf3e0;
    --accent: #65a30d;
    --accent-light: #84cc16;
    --accent-dark: #4d7c0f;
    --text: #1a2010;
    --text-muted: #5a6745;
    --text-dark: #8a9670;
    --border: #d6e3bc;
    --gradient: #84cc16;
}
body.theme-matcha .top-header { background: rgba(247, 250, 243, 0.8); }

/* ========== Champagne Theme (elegant gold) ========== */
body.theme-champagne {
    --primary: #faf8f0;
    --secondary: #ffffff;
    --tertiary: #f5f1e0;
    --accent: #ca8a04;
    --accent-light: #eab308;
    --accent-dark: #a16207;
    --text: #1f1810;
    --text-muted: #6b5a3a;
    --text-dark: #998a6a;
    --border: #ede4c5;
    --gradient: #eab308;
}
body.theme-champagne .top-header { background: rgba(250, 248, 240, 0.8); }

/* ========== Glacier Theme (icy pale blue) ========== */
body.theme-glacier {
    --primary: #f0f7fa;
    --secondary: #ffffff;
    --tertiary: #e1edf3;
    --accent: #0e7490;
    --accent-light: #06b6d4;
    --accent-dark: #155e75;
    --text: #0c1f24;
    --text-muted: #475569;
    --text-dark: #94a3b8;
    --border: #c5dde6;
    --gradient: #0891b2;
}
body.theme-glacier .top-header { background: rgba(240, 247, 250, 0.8); }

/* ========== Blush Theme (modern magenta) ========== */
body.theme-blush {
    --primary: #fdf2f8;
    --secondary: #ffffff;
    --tertiary: #fce7f3;
    --accent: #db2777;
    --accent-light: #ec4899;
    --accent-dark: #be185d;
    --text: #2a0a1f;
    --text-muted: #7a4a6a;
    --text-dark: #b08395;
    --border: #f9c5dc;
    --gradient: #d946ef;
}
body.theme-blush .top-header { background: rgba(253, 242, 248, 0.8); }

/* Theme color swatch (visual preview in dropdown) */
.theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
body.light-theme .theme-swatch,
body.theme-rose-gold .theme-swatch,
body.theme-solarized .theme-swatch,
body.theme-mint .theme-swatch,
body.theme-sky .theme-swatch,
body.theme-lavender .theme-swatch,
body.theme-sand .theme-swatch,
body.theme-pearl .theme-swatch,
body.theme-matcha .theme-swatch,
body.theme-champagne .theme-swatch,
body.theme-glacier .theme-swatch,
body.theme-blush .theme-swatch {
    border-color: rgba(0, 0, 0, 0.15);
}

.theme-dropdown-section {
    padding: 6px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    opacity: 0.7;
}

.theme-selector {
    position: relative;
}

.theme-toggle-btn {
    position: relative;
}

.theme-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    z-index: 1000;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}
.theme-dropdown::-webkit-scrollbar { width: 6px; }
.theme-dropdown::-webkit-scrollbar-track { background: transparent; }
.theme-dropdown::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
    opacity: 0.6;
}

.theme-selector.open .theme-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.theme-option:hover {
    background: var(--tertiary);
    color: var(--text);
}

.theme-option.active {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-light);
}

.theme-option i {
    width: 18px;
    text-align: center;
}


/* Header icon button (theme toggle) — ported from dashboard.css. */
.header-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-icon-btn:hover {
    border-color: var(--accent);
    color: var(--accent-light);
    background: rgba(99, 102, 241, 0.1);
}