/* ============================================
   CHINADRIVE THEME SWITCHER
   Light & Dark Mode CSS Variables
   ============================================ */

/* Dark Mode (Default) */
:root,
[data-theme="dark"] {
    /* Primary Colors */
    --theme-bg: #0a0a0a;
    --theme-bg-secondary: #111111;
    --theme-surface: #1e1e1e;
    --theme-surface-hover: #252525;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-border-hover: rgba(255, 255, 255, 0.2);
    
    /* Text Colors */
    --theme-text: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.7);
    --theme-text-muted: rgba(255, 255, 255, 0.5);
    --theme-text-faint: rgba(255, 255, 255, 0.3);
    
    /* Accent Colors */
    --theme-accent: #ff3333;
    --theme-accent-hover: #ff4d4d;
    --theme-accent-light: rgba(255, 51, 51, 0.15);
    --theme-accent-gradient: linear-gradient(135deg, #ff3333, #ff6666);
    
    /* Status Colors */
    --theme-success: #22c55e;
    --theme-success-bg: rgba(34, 197, 94, 0.15);
    --theme-warning: #f59e0b;
    --theme-warning-bg: rgba(245, 158, 11, 0.15);
    --theme-danger: #ef4444;
    --theme-danger-bg: rgba(239, 68, 68, 0.15);
    --theme-info: #3b82f6;
    --theme-info-bg: rgba(59, 130, 246, 0.15);
    
    /* Shadows */
    --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --theme-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --theme-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    
    /* Overlay */
    --theme-overlay: rgba(0, 0, 0, 0.8);
    --theme-overlay-light: rgba(0, 0, 0, 0.5);
    
    /* Input */
    --theme-input-bg: rgba(255, 255, 255, 0.05);
    --theme-input-border: rgba(255, 255, 255, 0.1);
    --theme-input-focus: rgba(255, 255, 255, 0.08);
    
    /* Card */
    --theme-card-bg: #1a1a1a;
    --theme-card-border: rgba(255, 255, 255, 0.08);
    
    /* Scrollbar */
    --theme-scrollbar-bg: rgba(255, 255, 255, 0.05);
    --theme-scrollbar-thumb: rgba(255, 255, 255, 0.2);
}

/* Light Mode */
[data-theme="light"] {
    /* Primary Colors */
    --theme-bg: #f5f5f7;
    --theme-bg-secondary: #ffffff;
    --theme-surface: #ffffff;
    --theme-surface-hover: #f0f0f2;
    --theme-border: rgba(0, 0, 0, 0.1);
    --theme-border-hover: rgba(0, 0, 0, 0.2);
    
    /* Text Colors */
    --theme-text: #1a1a1a;
    --theme-text-secondary: rgba(0, 0, 0, 0.7);
    --theme-text-muted: rgba(0, 0, 0, 0.5);
    --theme-text-faint: rgba(0, 0, 0, 0.3);
    
    /* Accent Colors */
    --theme-accent: #dc2626;
    --theme-accent-hover: #b91c1c;
    --theme-accent-light: rgba(220, 38, 38, 0.1);
    --theme-accent-gradient: linear-gradient(135deg, #dc2626, #ef4444);
    
    /* Status Colors */
    --theme-success: #16a34a;
    --theme-success-bg: rgba(22, 163, 74, 0.1);
    --theme-warning: #d97706;
    --theme-warning-bg: rgba(217, 119, 6, 0.1);
    --theme-danger: #dc2626;
    --theme-danger-bg: rgba(220, 38, 38, 0.1);
    --theme-info: #2563eb;
    --theme-info-bg: rgba(37, 99, 235, 0.1);
    
    /* Shadows */
    --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --theme-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --theme-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    
    /* Overlay */
    --theme-overlay: rgba(0, 0, 0, 0.6);
    --theme-overlay-light: rgba(0, 0, 0, 0.3);
    
    /* Input */
    --theme-input-bg: #f5f5f7;
    --theme-input-border: rgba(0, 0, 0, 0.15);
    --theme-input-focus: #ffffff;
    
    /* Card */
    --theme-card-bg: #ffffff;
    --theme-card-border: rgba(0, 0, 0, 0.08);
    
    /* Scrollbar */
    --theme-scrollbar-bg: rgba(0, 0, 0, 0.05);
    --theme-scrollbar-thumb: rgba(0, 0, 0, 0.2);
}

/* ============================================
   THEME TOGGLE BUTTON STYLES
   ============================================ */

.theme-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    color: var(--theme-text-secondary);
    font-size: 18px;
}

.theme-toggle:hover {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: white;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: all 0.3s ease;
}

/* Dark mode: show sun icon */
[data-theme="dark"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* Light mode: show moon icon */
[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Header specific styling - Metro */
.header-theme-toggle {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .header-theme-toggle {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.header-theme-toggle:hover {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: white;
}

/* Dashboard theme toggle - Metro */
.dashboard-theme-toggle {
    width: 38px;
    height: 38px;
}

/* ============================================
   GLOBAL THEME TRANSITIONS
   ============================================ */

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

/* Disable transitions on page load */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* ============================================
   SCROLLBAR THEMING
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--theme-scrollbar-bg);
}

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

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