/* ===== ENHANCED THEME SYSTEM - COMPATIBLE WITH MAIN SITE ===== */

/* Default Light Theme Variables */
:root {
    /* Primary Colors */
    --theme-primary: #2E7D32;
    --theme-primary-light: #4CAF50; 
    --theme-primary-dark: #1B5E20;
    --theme-secondary: #607D8B;
    
    /* Background Colors */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-bg-tertiary: #e9ecef;
    --theme-bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 50%, #e8f5e8 100%);
    --theme-bg-card: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    --theme-bg-sidebar: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
    
    /* Text Colors */
    --theme-text-primary: #212121;
    --theme-text-secondary: #424242;
    --theme-text-muted: #9e9e9e;
    --theme-text-inverse: #ffffff;
    --theme-text-success: #2E7D32;
    --theme-text-warning: #F57C00;
    --theme-text-danger: #D32F2F;
    
    /* Border Colors */
    --theme-border-light: #e0e0e0;
    --theme-border-medium: #bdbdbd;
    --theme-border-dark: #757575;
    
    /* Component Colors */
    --theme-card-bg: #ffffff;
    --theme-card-border: #e0e0e0;
    --theme-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    
    --theme-input-bg: #ffffff;
    --theme-input-border: #e0e0e0;
    --theme-input-text: #212121;
    --theme-input-focus: #2E7D32;
    
    /* Shadows */
    --theme-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --theme-shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --theme-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
    
    /* Button Colors */
    --theme-btn-primary: #2E7D32;
    --theme-btn-primary-hover: #1B5E20;
    --theme-btn-secondary: #607D8B;
    --theme-btn-secondary-hover: #455A64;
}

/* Enhanced Dark Theme Override */
[data-theme="dark"] {
    /* Primary Colors - darker variations */
    --theme-primary: #4CAF50;
    --theme-primary-light: #66BB6A; 
    --theme-primary-dark: #2E7D32;
    --theme-secondary: #78909C;
    
    /* Background Colors */
    --theme-bg-primary: #1a1a1a;
    --theme-bg-secondary: #2c2c2c;
    --theme-bg-tertiary: #3a3a3a;
    --theme-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 50%, #1e3a1e 100%);
    --theme-bg-card: linear-gradient(145deg, #2c2c2c 0%, #3a3a3a 100%);
    --theme-bg-sidebar: linear-gradient(135deg, #2c2c2c 0%, #383838 100%);
    
    /* Text Colors */
    --theme-text-primary: #e0e0e0;
    --theme-text-secondary: #bdbdbd;
    --theme-text-muted: #757575;
    --theme-text-inverse: #212121;
    --theme-text-success: #4CAF50;
    --theme-text-warning: #FFB74D;
    --theme-text-danger: #EF5350;
    
    /* Border Colors */
    --theme-border-light: #404040;
    --theme-border-medium: #565656;
    --theme-border-dark: #757575;
    
    /* Component Colors */
    --theme-card-bg: #2c2c2c;
    --theme-card-border: #404040;
    --theme-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    
    --theme-input-bg: #3a3a3a;
    --theme-input-border: #565656;
    --theme-input-text: #e0e0e0;
    --theme-input-focus: #4CAF50;
    
    /* Shadows */
    --theme-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --theme-shadow-md: 0 4px 15px rgba(0, 0, 0, 0.4);
    --theme-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.5);
    
    /* Button Colors */
    --theme-btn-primary: #4CAF50;
    --theme-btn-primary-hover: #66BB6A;
    --theme-btn-secondary: #78909C;
    --theme-btn-secondary-hover: #90A4AE;
    
    /* Override original variables */
    --bg-primary: var(--theme-bg-primary);
    --bg-secondary: var(--theme-bg-secondary);
    --bg-gradient-primary: var(--theme-bg-gradient);
    --bg-gradient-card: var(--theme-bg-card);
    --bg-gradient-sidebar: var(--theme-bg-sidebar);
    --sidebar-bg: var(--theme-bg-sidebar);
    
    --text-primary: var(--theme-text-primary);
    --text-secondary: var(--theme-text-secondary);
    --text-muted: var(--theme-text-muted);
    --sidebar-text: var(--theme-text-primary);
    
    --border-light: var(--theme-border-light);
    --card-border: var(--theme-card-border);
    --sidebar-border: var(--theme-border-light);
    
    --card-bg: var(--theme-card-bg);
    --card-shadow: var(--theme-card-shadow);
    
    --input-bg: var(--theme-input-bg);
    --input-border: var(--theme-input-border);
    --input-text: var(--theme-input-text);
    
    --mobile-bg: var(--theme-bg-primary);
    --mobile-header-bg: var(--theme-bg-card);
    --mobile-nav-bg: var(--theme-bg-secondary);
    
    --shadow-sm: var(--theme-shadow-sm);
    --shadow-md: var(--theme-shadow-md);
    --shadow-lg: var(--theme-shadow-lg);
}

/* Apply light theme variables by default */
:root {
    --bg-primary: var(--theme-bg-primary);
    --bg-secondary: var(--theme-bg-secondary);
    --bg-gradient-primary: var(--theme-bg-gradient);
    --bg-gradient-card: var(--theme-bg-card);
    --bg-gradient-sidebar: var(--theme-bg-sidebar);
    --sidebar-bg: var(--theme-bg-sidebar);
    
    --text-primary: var(--theme-text-primary);
    --text-secondary: var(--theme-text-secondary);
    --text-muted: var(--theme-text-muted);
    --sidebar-text: var(--theme-text-primary);
    
    --border-light: var(--theme-border-light);
    --card-border: var(--theme-card-border);
    --sidebar-border: var(--theme-border-light);
    
    --card-bg: var(--theme-card-bg);
    --card-shadow: var(--theme-card-shadow);
    
    --input-bg: var(--theme-input-bg);
    --input-border: var(--theme-input-border);
    --input-text: var(--theme-input-text);
    
    --mobile-bg: var(--theme-bg-primary);
    --mobile-header-bg: var(--theme-bg-card);
    --mobile-nav-bg: var(--theme-bg-secondary);
    
    --shadow-sm: var(--theme-shadow-sm);
    --shadow-md: var(--theme-shadow-md);
    --shadow-lg: var(--theme-shadow-lg);
}

/* Theme Toggle Button */
.btn-theme-toggle {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--theme-bg-card);
    color: var(--theme-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--theme-shadow-sm);
    position: relative;
    overflow: hidden;
}

.btn-theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: var(--theme-shadow-lg);
}

.btn-theme-toggle i {
    transition: all 0.3s ease;
}

.btn-theme-toggle:hover i {
    transform: scale(1.1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.theme-toggle-animation {
    animation: themeToggle 0.5s ease;
}

@keyframes themeToggle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}