/* ========================================
   THEME SYSTEM - ENTERPRISE CRM
   ======================================== */

/* Default Light Theme */
:root {
    /* Background Colors */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f8fafc;
    --bg-elevated: #ffffff;
    
    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;
    
    /* Brand Colors */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: #dbeafe;
    --primary-text: #1d4ed8;
    
    /* Accent Colors */
    --accent: #06b6d4;
    --accent-hover: #0891b2;
    --accent-light: #cffafe;
    
    /* Status Colors */
    --success: #10b981;
    --success-bg: #d1fae5;
    --success-text: #047857;
    --success-hover: #059669;
    
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --warning-text: #d97706;
    
    --error: #ef4444;
    --error-bg: #fee2e2;
    --error-text: #dc2626;
    --error-hover: #dc2626;
    
    --info: #3b82f6;
    --info-bg: #dbeafe;
    --info-text: #1d4ed8;
    
    /* Border Colors */
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-strong: #94a3b8;
    --border-interactive: #3b82f6;
    
    /* Shadow Colors */
    --shadow-sm: rgba(0, 0, 0, 0.05);
    --shadow-md: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    --shadow-xl: rgba(0, 0, 0, 0.25);
    
    /* Interactive States */
    --hover-overlay: rgba(0, 0, 0, 0.05);
    --active-overlay: rgba(0, 0, 0, 0.1);
    --focus-ring: #3b82f6;
    
    /* Status Badge Colors */
    --status-pending-bg: #fef3c7;
    --status-pending-text: #d97706;
    --status-approved-bg: #d1fae5;
    --status-approved-text: #047857;
    --status-rejected-bg: #fee2e2;
    --status-rejected-text: #dc2626;
    --status-expired-bg: #f1f5f9;
    --status-expired-text: #64748b;
    
    /* Form Elements */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-border-focus: #3b82f6;
    --input-text: #1f2937;
    --input-placeholder: #9ca3af;
    
    /* Navigation */
    --nav-bg: #ffffff;
    --nav-border: #e5e7eb;
    --nav-text: #6b7280;
    --nav-text-active: #1f2937;
    --nav-text-hover: #374151;
    --nav-active-bg: #f3f4f6;
    
    /* Cards and Surfaces */
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --card-hover-shadow: 0 4px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Dark Theme */
[data-theme="dark"] {
    /* Background Colors - Consistent with login page */
    --bg-primary: #0a1929;
    --bg-secondary: #121212;
    --bg-tertiary: #1e1e1e;
    --bg-surface: rgba(18, 30, 49, 0.8);
    --bg-surface-hover: rgba(18, 30, 49, 0.9);
    --bg-elevated: #2d2d2d;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a0b4c8;
    --text-tertiary: #64748b;
    --text-muted: #475569;
    --text-inverse: #1e293b;
    
    /* Brand Colors - Consistent with login page */
    --primary: #3c78d8;
    --primary-hover: #33a8e4;
    --primary-light: rgba(60, 120, 216, 0.2);
    --primary-text: #bb86fc;
    
    /* Accent Colors */
    --accent: #33a8e4;
    --accent-hover: #3c78d8;
    --accent-light: rgba(51, 168, 228, 0.2);
    
    /* Status Colors */
    --success: #4CAF50;
    --success-bg: #0d3320;
    --success-text: #4CAF50;
    --success-hover: #5dbd60;
    
    --warning: #FFC107;
    --warning-bg: #332b0d;
    --warning-text: #FFC107;
    
    --error: #cf6679;
    --error-bg: #3b1a1d;
    --error-text: #f8d7da;
    --error-hover: #ff4455;
    
    --info: #3c78d8;
    --info-bg: rgba(60, 120, 216, 0.2);
    --info-text: #bb86fc;
    
    /* Border Colors */
    --border-light: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-strong: rgba(255, 255, 255, 0.3);
    --border-interactive: #3c78d8;
    
    /* Shadow Colors */
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --shadow-xl: rgba(0, 0, 0, 0.6);
    
    /* Interactive States */
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --active-overlay: rgba(255, 255, 255, 0.1);
    --focus-ring: #3c78d8;
    
    /* Status Badge Colors */
    --status-pending-bg: rgba(255, 193, 7, 0.2);
    --status-pending-text: #FFC107;
    --status-approved-bg: rgba(76, 175, 80, 0.2);
    --status-approved-text: #4CAF50;
    --status-rejected-bg: rgba(207, 102, 121, 0.2);
    --status-rejected-text: #cf6679;
    --status-expired-bg: rgba(158, 158, 158, 0.2);
    --status-expired-text: #9e9e9e;
    
    /* Form Elements */
    --input-bg: rgba(10, 23, 42, 0.6);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-border-focus: #3c78d8;
    --input-text: #ffffff;
    --input-placeholder: #a0b4c8;
    
    /* Navigation */
    --nav-bg: #1e1e1e;
    --nav-border: rgba(255, 255, 255, 0.1);
    --nav-text: #a0b4c8;
    --nav-text-active: #ffffff;
    --nav-text-hover: #ffffff;
    --nav-active-bg: #3c78d8;
    
    /* Cards and Surfaces */
    --card-bg: rgba(18, 30, 49, 0.8);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --card-hover-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

/* Background animations for dark theme */
[data-theme="dark"] body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(124deg, #19191900, #0f0f4b10, #1e102555);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    z-index: -1;
}

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

/* Floating particles for dark theme */
[data-theme="dark"] .bg-particle {
    position: fixed;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: float 15s ease-in-out infinite;
}

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

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

/* Remove transitions from animations and transforms */
*[style*="animation"],
*[style*="transform"] {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}