/* Theme System - CSS Variables */

/* ============================================
   DEFAULT THEME (Current/Classic)
   ============================================ */
[data-theme="default"] {
    /* Sidebar */
    --sidebar-bg: #0f172a;
    --sidebar-header-bg: #1e293b;
    --sidebar-text: #cbd5e1;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: #334155;
    --sidebar-active: #1e293b;
    --sidebar-border: #334155;
    --sidebar-user-avatar: #3b82f6;
    
    /* Main Content */
    --page-bg: #f3f4f6;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --card-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
    
    /* Text */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    
    /* Accents */
    --accent-primary: #3b82f6;
    --accent-primary-hover: #2563eb;
    --accent-secondary: #8b5cf6;
    
    /* Table */
    --table-header-bg: #f9fafb;
    --table-row-hover: #f9fafb;
    --table-border: #e5e7eb;
    
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-focus-border: #3b82f6;
    --input-focus-ring: rgba(59, 130, 246, 0.2);
    
    /* Status colors */
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --error-bg: #fee2e2;
    --error-text: #dc2626;
    --info-bg: #dbeafe;
    --info-text: #1e40af;
}

/* ============================================
   MIDNIGHT THEME (Dark Mode)
   ============================================ */
[data-theme="midnight"] {
    /* Sidebar */
    --sidebar-bg: #0a0a0a;
    --sidebar-header-bg: #171717;
    --sidebar-text: #a1a1aa;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: #262626;
    --sidebar-active: #171717;
    --sidebar-border: #262626;
    --sidebar-user-avatar: #6366f1;
    
    /* Main Content */
    --page-bg: #09090b;
    --content-bg: #18181b;
    --card-bg: #18181b;
    --card-border: #27272a;
    --card-shadow: 0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px 0 rgba(0,0,0,0.3);
    
    /* Text */
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    
    /* Accents */
    --accent-primary: #6366f1;
    --accent-primary-hover: #4f46e5;
    --accent-secondary: #a855f7;
    
    /* Table */
    --table-header-bg: #27272a;
    --table-row-hover: #27272a;
    --table-border: #3f3f46;
    
    /* Form elements */
    --input-bg: #27272a;
    --input-border: #3f3f46;
    --input-focus-border: #6366f1;
    --input-focus-ring: rgba(99, 102, 241, 0.3);
    
    /* Status colors */
    --success-bg: #14532d;
    --success-text: #86efac;
    --warning-bg: #713f12;
    --warning-text: #fde047;
    --error-bg: #7f1d1d;
    --error-text: #fca5a5;
    --info-bg: #1e3a5f;
    --info-text: #93c5fd;
}

/* ============================================
   OCEAN THEME (Blue/Teal)
   ============================================ */
[data-theme="ocean"] {
    /* Sidebar */
    --sidebar-bg: #042f2e;
    --sidebar-header-bg: #0f766e;
    --sidebar-text: #99f6e4;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: #115e59;
    --sidebar-active: #0f766e;
    --sidebar-border: #134e4a;
    --sidebar-user-avatar: #2dd4bf;
    
    /* Main Content */
    --page-bg: #f0fdfa;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: #99f6e4;
    --card-shadow: 0 1px 3px 0 rgba(13, 148, 136, 0.1), 0 1px 2px 0 rgba(13, 148, 136, 0.06);
    
    /* Text */
    --text-primary: #134e4a;
    --text-secondary: #0f766e;
    --text-muted: #5eead4;
    
    /* Accents */
    --accent-primary: #0d9488;
    --accent-primary-hover: #0f766e;
    --accent-secondary: #06b6d4;
    
    /* Table */
    --table-header-bg: #f0fdfa;
    --table-row-hover: #ccfbf1;
    --table-border: #99f6e4;
    
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #5eead4;
    --input-focus-border: #14b8a6;
    --input-focus-ring: rgba(20, 184, 166, 0.2);
    
    /* Status colors */
    --success-bg: #d1fae5;
    --success-text: #065f46;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --error-bg: #fee2e2;
    --error-text: #dc2626;
    --info-bg: #cffafe;
    --info-text: #0e7490;
}

/* ============================================
   SUNSET THEME (Warm Orange/Rose)
   ============================================ */
[data-theme="sunset"] {
    /* Sidebar */
    --sidebar-bg: #451a03;
    --sidebar-header-bg: #7c2d12;
    --sidebar-text: #fed7aa;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: #9a3412;
    --sidebar-active: #7c2d12;
    --sidebar-border: #7c2d12;
    --sidebar-user-avatar: #f97316;
    
    /* Main Content */
    --page-bg: #fffbeb;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: #fed7aa;
    --card-shadow: 0 1px 3px 0 rgba(251, 146, 60, 0.1), 0 1px 2px 0 rgba(251, 146, 60, 0.06);
    
    /* Text */
    --text-primary: #7c2d12;
    --text-secondary: #c2410c;
    --text-muted: #fb923c;
    
    /* Accents */
    --accent-primary: #ea580c;
    --accent-primary-hover: #c2410c;
    --accent-secondary: #f43f5e;
    
    /* Table */
    --table-header-bg: #fff7ed;
    --table-row-hover: #ffedd5;
    --table-border: #fed7aa;
    
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #fdba74;
    --input-focus-border: #f97316;
    --input-focus-ring: rgba(249, 115, 22, 0.2);
    
    /* Status colors */
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --error-bg: #fee2e2;
    --error-text: #dc2626;
    --info-bg: #ffedd5;
    --info-text: #c2410c;
}

/* ============================================
   LAVENDER THEME (Purple/Pink)
   ============================================ */
[data-theme="lavender"] {
    /* Sidebar */
    --sidebar-bg: #2e1065;
    --sidebar-header-bg: #581c87;
    --sidebar-text: #e9d5ff;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: #6b21a8;
    --sidebar-active: #581c87;
    --sidebar-border: #581c87;
    --sidebar-user-avatar: #c084fc;
    
    /* Main Content */
    --page-bg: #faf5ff;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: #e9d5ff;
    --card-shadow: 0 1px 3px 0 rgba(168, 85, 247, 0.1), 0 1px 2px 0 rgba(168, 85, 247, 0.06);
    
    /* Text */
    --text-primary: #581c87;
    --text-secondary: #7c3aed;
    --text-muted: #a78bfa;
    
    /* Accents */
    --accent-primary: #9333ea;
    --accent-primary-hover: #7c3aed;
    --accent-secondary: #ec4899;
    
    /* Table */
    --table-header-bg: #faf5ff;
    --table-row-hover: #f3e8ff;
    --table-border: #e9d5ff;
    
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #d8b4fe;
    --input-focus-border: #a855f7;
    --input-focus-ring: rgba(168, 85, 247, 0.2);
    
    /* Status colors */
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --error-bg: #fee2e2;
    --error-text: #dc2626;
    --info-bg: #f3e8ff;
    --info-text: #7c3aed;
}

/* ============================================
   FOREST THEME (Green/Earth)
   ============================================ */
[data-theme="forest"] {
    /* Sidebar */
    --sidebar-bg: #14532d;
    --sidebar-header-bg: #166534;
    --sidebar-text: #bbf7d0;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: #15803d;
    --sidebar-active: #166534;
    --sidebar-border: #166534;
    --sidebar-user-avatar: #22c55e;
    
    /* Main Content */
    --page-bg: #f0fdf4;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: #bbf7d0;
    --card-shadow: 0 1px 3px 0 rgba(34, 197, 94, 0.1), 0 1px 2px 0 rgba(34, 197, 94, 0.06);
    
    /* Text */
    --text-primary: #14532d;
    --text-secondary: #166534;
    --text-muted: #4ade80;
    
    /* Accents */
    --accent-primary: #16a34a;
    --accent-primary-hover: #15803d;
    --accent-secondary: #84cc16;
    
    /* Table */
    --table-header-bg: #f0fdf4;
    --table-row-hover: #dcfce7;
    --table-border: #bbf7d0;
    
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #86efac;
    --input-focus-border: #22c55e;
    --input-focus-ring: rgba(34, 197, 94, 0.2);
    
    /* Status colors */
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --error-bg: #fee2e2;
    --error-text: #dc2626;
    --info-bg: #ecfccb;
    --info-text: #3f6212;
}

/* ============================================
   ROSE GOLD THEME (Elegant Pink/Gold)
   ============================================ */
[data-theme="rosegold"] {
    /* Sidebar */
    --sidebar-bg: #500724;
    --sidebar-header-bg: #9f1239;
    --sidebar-text: #fecdd3;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: #be123c;
    --sidebar-active: #9f1239;
    --sidebar-border: #9f1239;
    --sidebar-user-avatar: #fb7185;
    
    /* Main Content */
    --page-bg: #fff1f2;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: #fecdd3;
    --card-shadow: 0 1px 3px 0 rgba(251, 113, 133, 0.1), 0 1px 2px 0 rgba(251, 113, 133, 0.06);
    
    /* Text */
    --text-primary: #881337;
    --text-secondary: #be123c;
    --text-muted: #f472b6;
    
    /* Accents */
    --accent-primary: #e11d48;
    --accent-primary-hover: #be123c;
    --accent-secondary: #f59e0b;
    
    /* Table */
    --table-header-bg: #fff1f2;
    --table-row-hover: #ffe4e6;
    --table-border: #fecdd3;
    
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #fda4af;
    --input-focus-border: #fb7185;
    --input-focus-ring: rgba(251, 113, 133, 0.2);
    
    /* Status colors */
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --error-bg: #fee2e2;
    --error-text: #dc2626;
    --info-bg: #ffe4e6;
    --info-text: #be123c;
}

/* ============================================
   NORD THEME (Arctic, Blue-Grey)
   ============================================ */
[data-theme="nord"] {
    /* Sidebar */
    --sidebar-bg: #2e3440;
    --sidebar-header-bg: #3b4252;
    --sidebar-text: #d8dee9;
    --sidebar-text-active: #eceff4;
    --sidebar-hover: #434c5e;
    --sidebar-active: #3b4252;
    --sidebar-border: #434c5e;
    --sidebar-user-avatar: #88c0d0;
    
    /* Main Content */
    --page-bg: #eceff4;
    --content-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: #d8dee9;
    --card-shadow: 0 1px 3px 0 rgba(46, 52, 64, 0.1), 0 1px 2px 0 rgba(46, 52, 64, 0.06);
    
    /* Text */
    --text-primary: #2e3440;
    --text-secondary: #4c566a;
    --text-muted: #7b88a1;
    
    /* Accents */
    --accent-primary: #5e81ac;
    --accent-primary-hover: #81a1c1;
    --accent-secondary: #b48ead;
    
    /* Table */
    --table-header-bg: #e5e9f0;
    --table-row-hover: #e5e9f0;
    --table-border: #d8dee9;
    
    /* Form elements */
    --input-bg: #ffffff;
    --input-border: #d8dee9;
    --input-focus-border: #5e81ac;
    --input-focus-ring: rgba(94, 129, 172, 0.2);
    
    /* Status colors */
    --success-bg: #a3be8c33;
    --success-text: #a3be8c;
    --warning-bg: #ebcb8b33;
    --warning-text: #d08770;
    --error-bg: #bf616a33;
    --error-text: #bf616a;
    --info-bg: #88c0d033;
    --info-text: #5e81ac;
}

/* ============================================
   COMPONENT STYLES USING CSS VARIABLES
   ============================================ */

/* Apply theme variables to components */
body.themed {
    background-color: var(--page-bg);
    color: var(--text-primary);
}

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

.themed-sidebar-header {
    background-color: var(--sidebar-header-bg) !important;
}

.themed-sidebar-nav a {
    color: var(--sidebar-text);
}

.themed-sidebar-nav a:hover {
    background-color: var(--sidebar-hover);
}

.themed-sidebar-nav a.active {
    background-color: var(--sidebar-active);
    color: var(--sidebar-text-active);
}

.themed-sidebar-border {
    border-color: var(--sidebar-border);
}

.themed-user-avatar {
    background-color: var(--sidebar-user-avatar) !important;
}

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

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

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

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

/* Buttons */
.themed-btn-primary {
    background-color: var(--accent-primary) !important;
    color: white !important;
}

.themed-btn-primary:hover {
    background-color: var(--accent-primary-hover) !important;
}

/* Tables */
.themed-table thead {
    background-color: var(--table-header-bg);
}

.themed-table tbody tr:hover {
    background-color: var(--table-row-hover);
}

.themed-table th,
.themed-table td {
    border-color: var(--table-border);
}

/* Form elements */
.themed-input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.themed-input:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 2px var(--input-focus-ring) !important;
}

/* Main content area */
.themed-main {
    background-color: var(--page-bg) !important;
}

/* Theme switcher button styling */
.theme-switcher-btn {
    transition: all 0.2s ease;
}

.theme-switcher-btn:hover {
    transform: scale(1.05);
}

.theme-option {
    transition: all 0.15s ease;
}

.theme-option:hover {
    transform: translateX(4px);
}

.theme-option.active {
    background-color: var(--accent-primary);
    color: white;
}

/* Smooth theme transitions */
[data-theme] * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

/* Theme preview dots */
.theme-preview {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3);
}

/* Sidebar navigation link styles */
.sidebar-nav-link {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-nav-link:hover {
    background-color: var(--sidebar-hover) !important;
    color: var(--sidebar-text-active) !important;
}

/* Themed cards with proper styling */
.themed-card-auto {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
}

/* Themed headings */
.themed-heading {
    color: var(--text-primary);
}

/* Themed buttons */
.themed-btn-accent {
    background-color: var(--accent-primary);
    color: white;
    transition: background-color 0.15s ease;
}

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

/* Themed tables */
.themed-table-auto thead {
    background-color: var(--table-header-bg);
}

.themed-table-auto th {
    color: var(--text-secondary);
}

.themed-table-auto tbody tr {
    background-color: var(--card-bg);
    border-color: var(--table-border);
}

.themed-table-auto tbody tr:hover {
    background-color: var(--table-row-hover);
}

.themed-table-auto td {
    border-color: var(--table-border);
}

/* Link colors */
.themed-link {
    color: var(--accent-primary);
}

.themed-link:hover {
    color: var(--accent-primary-hover);
}

/* Gradient banner for email inbox - adapts to theme accent */
.themed-gradient-banner {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}