/**
 * Color System
 * Centralized color definitions following DRY principles
 * All application colors should be defined here
 */

:root {
    /* ========================================
       Primary Brand Colors
       Dynamic colors set by user's account
       ======================================== */
    --color-primary: #3498db;
    --color-primary-dark: #2980b9;
    --color-primary-light: #5dade2;
    
    --color-secondary: #2c3e50;
    --color-secondary-dark: #1a252f;
    --color-secondary-light: #34495e;
    
    --color-tertiary: #ffffff;
    --color-tertiary-dark: #f8f9fa;
    --color-tertiary-light: #ffffff;
    
    /* ========================================
       Semantic Colors
       Purpose-specific colors
       ======================================== */
    --color-success: #27ae60;
    --color-success-dark: #229954;
    --color-success-light: #2ecc71;
    
    --color-error: #e74c3c;
    --color-error-dark: #c0392b;
    --color-error-light: #ec7063;
    
    --color-warning: #f39c12;
    --color-warning-dark: #d68910;
    --color-warning-light: #f5b041;
    
    --color-info: #3498db;
    --color-info-dark: #2980b9;
    --color-info-light: #5dade2;
    
    --color-danger: #e74c3c;
    --color-danger-dark: #c0392b;
    --color-danger-light: #ec7063;
    
    /* ========================================
       Semantic Surfaces (Light Mode)
       ======================================== */
    --color-surface-warning: #fff3cd;
    --color-surface-warning-text: #856404;
    --color-surface-warning-border: #ffc107;
    
    --color-surface-success: #c6f6d5;
    --color-surface-success-text: #22543d;
    --color-surface-success-border: #34d399;
    
    --color-surface-danger: #fed7d7;
    --color-surface-danger-text: #742a2a;
    --color-surface-danger-border: #ef4444;
    
    --color-surface-info: #ebf8ff;
    --color-surface-info-text: #2c5282;
    --color-surface-info-border: #90cdf4;
    
    /* ========================================
       Neutral/Gray Scale
       ======================================== */
    --color-white: #ffffff;
    --color-black: #000000;
    
    --color-gray-50: #fafafa;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    --color-gray-950: #0d0d0d;
    
    /* ========================================
       Text Colors
       ======================================== */
    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-text-muted: #adb5bd;
    --color-text-disabled: #dee2e6;
    --color-text-inverse: #ffffff;
    
    /* ========================================
       Background Colors
       ======================================== */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #e9ecef;
    --color-bg-dark: #212529;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Card & Component Backgrounds */
    --color-card-bg: #ffffff;
    --color-card-header-bg: linear-gradient(to bottom, #ffffff 0%, #f7fafc 100%);
    --color-card-footer-bg: #f7fafc;
    
    /* ========================================
       Border Colors
       ======================================== */
    --color-border-light: #e9ecef;
    --color-border-medium: #dee2e6;
    --color-border-dark: #ced4da;
    
    /* ========================================
       Sidebar Colors
       ======================================== */
    --color-sidebar-bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    --color-sidebar-text: #bdc3c7;
    --color-sidebar-text-hover: #ffffff;
    --color-sidebar-active-bg: rgba(255, 255, 255, 0.15);
    --color-sidebar-active-border: #ffffff;
    --color-sidebar-icon: #95a5a6;
    --color-sidebar-icon-active: #ffffff;
    
    /* ========================================
       Form Colors
       ======================================== */
    --color-input-bg: #ffffff;
    --color-input-border: #ced4da;
    --color-input-border-focus: #3498db;
    --color-input-text: #495057;
    --color-input-placeholder: #6c757d;
    --color-input-disabled-bg: #e9ecef;
    --color-input-disabled-text: #6c757d;
    
    /* ========================================
       Button Colors
       ======================================== */
    --color-btn-primary-bg: var(--color-primary);
    --color-btn-primary-text: var(--color-tertiary);
    --color-btn-primary-hover: var(--color-primary-dark);
    
    --color-btn-secondary-bg: var(--color-secondary);
    --color-btn-secondary-text: var(--color-tertiary);
    --color-btn-secondary-hover: var(--color-secondary-dark);
    
    --color-btn-success-bg: var(--color-success);
    --color-btn-success-text: var(--color-white);
    --color-btn-success-hover: var(--color-success-dark);
    
    --color-btn-danger-bg: var(--color-danger);
    --color-btn-danger-text: var(--color-white);
    --color-btn-danger-hover: var(--color-danger-dark);
    
    /* ========================================
       Link Colors
       ======================================== */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);
    --color-link-visited: #8e44ad;
    --color-link-active: var(--color-primary-light);
    
    /* ========================================
       Status Colors
       ======================================== */
    --color-status-active: #27ae60;
    --color-status-inactive: #95a5a6;
    --color-status-pending: #f39c12;
    --color-status-rejected: #e74c3c;
    --color-status-approved: #27ae60;
    
    /* ========================================
       Chart Colors
       ======================================== */
    --color-chart-1: #3498db;
    --color-chart-2: #e74c3c;
    --color-chart-3: #f39c12;
    --color-chart-4: #27ae60;
    --color-chart-5: #9b59b6;
    --color-chart-6: #1abc9c;
    --color-chart-7: #34495e;
    --color-chart-8: #e67e22;
    
    /* Chart Component Colors */
    --color-chart-bg: #ffffff;
    --color-chart-text: #1f2937;
    --color-chart-text-muted: #6b7280;
    --color-chart-axis-line: #e5e7eb;
    --color-chart-grid-line: #f3f4f6;
    --color-chart-tooltip-bg: rgba(0, 0, 0, 0.85);
    --color-chart-tooltip-text: #ffffff;
    --color-chart-legend-text: #4b5563;
    --color-chart-legend-hover: #1f2937;
    --color-chart-legend-hidden: #d1d5db;
    --color-chart-export-stroke: #e5e7eb;
    --color-chart-export-hover: #f3f4f6;
    
    /* ========================================
       Shadow Colors
       ======================================== */
    --shadow-color-sm: rgba(0, 0, 0, 0.05);
    --shadow-color-md: rgba(0, 0, 0, 0.1);
    --shadow-color-lg: rgba(0, 0, 0, 0.15);
    --shadow-color-xl: rgba(0, 0, 0, 0.2);
    
    /* ========================================
       Overlay Colors
       ======================================== */
    --overlay-light: rgba(255, 255, 255, 0.9);
    --overlay-medium: rgba(0, 0, 0, 0.5);
    --overlay-dark: rgba(0, 0, 0, 0.8);
    
    /* ========================================
       Gradient Colors
       ======================================== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));
    --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    --gradient-danger: linear-gradient(135deg, var(--color-danger), var(--color-danger-dark));
}

/* ========================================
   Dark Mode Color Overrides
   Supports: data-theme="dark" (manual) and prefers-color-scheme (auto)
   ======================================== */

/* Dark mode variables - shared definition */
:root[data-theme="dark"],
html[data-theme="dark"] {
    --color-text-primary: #f8f9fa;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #212529;
    
    --color-bg-primary: #1a1d21;
    --color-bg-secondary: #212529;
    --color-bg-tertiary: #343a40;
    --color-bg-dark: #0d0f12;
    
    --color-border-light: #343a40;
    --color-border-medium: #495057;
    --color-border-dark: #6c757d;
    
    --color-input-bg: #2d3238;
    --color-input-border: #495057;
    --color-input-text: #f8f9fa;
    --color-input-placeholder: #6c757d;
    --color-input-disabled-bg: #343a40;
    --color-input-disabled-text: #6c757d;
    
    /* Card & Component Backgrounds - Dark Mode */
    --color-card-bg: #1e2227;
    --color-card-header-bg: linear-gradient(to bottom, #252a30 0%, #1e2227 100%);
    --color-card-footer-bg: #252a30;
    
    /* Gray scale inversion for dark mode */
    --color-gray-50: #1a1d21;
    --color-gray-100: #212529;
    --color-gray-200: #343a40;
    --color-gray-300: #495057;
    --color-gray-400: #6c757d;
    --color-gray-500: #adb5bd;
    --color-gray-600: #ced4da;
    --color-gray-700: #dee2e6;
    --color-gray-800: #e9ecef;
    --color-gray-900: #f8f9fa;
    --color-gray-950: #ffffff;
    
    --shadow-color-sm: rgba(0, 0, 0, 0.4);
    --shadow-color-md: rgba(0, 0, 0, 0.5);
    --shadow-color-lg: rgba(0, 0, 0, 0.6);
    --shadow-color-xl: rgba(0, 0, 0, 0.7);
    
    --overlay-light: rgba(0, 0, 0, 0.7);
    --overlay-medium: rgba(0, 0, 0, 0.6);
    --overlay-dark: rgba(0, 0, 0, 0.9);
    
    /* Semantic surfaces - Dark Mode */
    --color-surface-warning: #3a2f10;
    --color-surface-warning-text: #f8e3a1;
    --color-surface-warning-border: #fbbf24;
    
    --color-surface-success: #123524;
    --color-surface-success-text: #bbf7d0;
    --color-surface-success-border: #34d399;
    
    --color-surface-danger: #3b1d1d;
    --color-surface-danger-text: #fecaca;
    --color-surface-danger-border: #f87171;
    
    --color-surface-info: #0f2a3a;
    --color-surface-info-text: #bfdbfe;
    --color-surface-info-border: #60a5fa;
    
    /* Table colors for dark mode */
    --color-table-bg: #1e2227;
    --color-table-header-bg: #252a30;
    --color-table-row-hover: #2a3140;
    --color-table-row-stripe: #232830;
    --color-table-border: #343a40;
    --color-table-row-hover-accent: #3598dc;
    
    /* Chart Colors - Dark Mode (vibrant for better visibility) */
    --color-chart-1: #60a5fa;
    --color-chart-2: #f87171;
    --color-chart-3: #fbbf24;
    --color-chart-4: #34d399;
    --color-chart-5: #a78bfa;
    --color-chart-6: #2dd4bf;
    --color-chart-7: #94a3b8;
    --color-chart-8: #fb923c;
    
    /* Chart Component Colors - Dark Mode */
    --color-chart-bg: #1e2227;
    --color-chart-text: #f3f4f6;
    --color-chart-text-muted: #9ca3af;
    --color-chart-axis-line: #374151;
    --color-chart-grid-line: #2d3748;
    --color-chart-tooltip-bg: rgba(17, 24, 39, 0.95);
    --color-chart-tooltip-text: #f9fafb;
    --color-chart-legend-text: #d1d5db;
    --color-chart-legend-hover: #f9fafb;
    --color-chart-legend-hidden: #4b5563;
    --color-chart-export-stroke: #374151;
    --color-chart-export-hover: #4b5563;
}

/* Auto mode: follow system preference when no data-theme is set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]),
    html:not([data-theme="light"]) {
        --color-text-primary: #f8f9fa;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #94a3b8;
        --color-text-inverse: #212529;
        
        --color-bg-primary: #1a1d21;
        --color-bg-secondary: #212529;
        --color-bg-tertiary: #343a40;
        --color-bg-dark: #0d0f12;
        
        --color-border-light: #343a40;
        --color-border-medium: #495057;
        --color-border-dark: #6c757d;
        
        --color-input-bg: #2d3238;
        --color-input-border: #495057;
        --color-input-text: #f8f9fa;
        --color-input-placeholder: #6c757d;
        --color-input-disabled-bg: #343a40;
        --color-input-disabled-text: #6c757d;
        
        /* Card & Component Backgrounds - Dark Mode */
        --color-card-bg: #1e2227;
        --color-card-header-bg: linear-gradient(to bottom, #252a30 0%, #1e2227 100%);
        --color-card-footer-bg: #252a30;
        
        /* Gray scale inversion for dark mode */
        --color-gray-50: #1a1d21;
        --color-gray-100: #212529;
        --color-gray-200: #343a40;
        --color-gray-300: #495057;
        --color-gray-400: #6c757d;
        --color-gray-500: #adb5bd;
        --color-gray-600: #ced4da;
        --color-gray-700: #dee2e6;
        --color-gray-800: #e9ecef;
        --color-gray-900: #f8f9fa;
        --color-gray-950: #ffffff;
        
        --shadow-color-sm: rgba(0, 0, 0, 0.4);
        --shadow-color-md: rgba(0, 0, 0, 0.5);
        --shadow-color-lg: rgba(0, 0, 0, 0.6);
        --shadow-color-xl: rgba(0, 0, 0, 0.7);
        
        --overlay-light: rgba(0, 0, 0, 0.7);
        --overlay-medium: rgba(0, 0, 0, 0.6);
        --overlay-dark: rgba(0, 0, 0, 0.9);
        
        /* Semantic surfaces - Dark Mode */
        --color-surface-warning: #3a2f10;
        --color-surface-warning-text: #f8e3a1;
        --color-surface-warning-border: #fbbf24;
        
        --color-surface-success: #123524;
        --color-surface-success-text: #bbf7d0;
        --color-surface-success-border: #34d399;
        
        --color-surface-danger: #3b1d1d;
        --color-surface-danger-text: #fecaca;
        --color-surface-danger-border: #f87171;
        
        --color-surface-info: #0f2a3a;
        --color-surface-info-text: #bfdbfe;
        --color-surface-info-border: #60a5fa;
        
        /* Table colors for dark mode */
        --color-table-bg: #1e2227;
        --color-table-header-bg: #252a30;
        --color-table-row-hover: #2a3140;
        --color-table-row-stripe: #232830;
        --color-table-border: #343a40;
        --color-table-row-hover-accent: #3598dc;
        
        /* Chart Colors - Dark Mode (vibrant for better visibility) */
        --color-chart-1: #60a5fa;
        --color-chart-2: #f87171;
        --color-chart-3: #fbbf24;
        --color-chart-4: #34d399;
        --color-chart-5: #a78bfa;
        --color-chart-6: #2dd4bf;
        --color-chart-7: #94a3b8;
        --color-chart-8: #fb923c;
        
        /* Chart Component Colors - Dark Mode */
        --color-chart-bg: #1e2227;
        --color-chart-text: #f3f4f6;
        --color-chart-text-muted: #9ca3af;
        --color-chart-axis-line: #374151;
        --color-chart-grid-line: #2d3748;
        --color-chart-tooltip-bg: rgba(17, 24, 39, 0.95);
        --color-chart-tooltip-text: #f9fafb;
        --color-chart-legend-text: #d1d5db;
        --color-chart-legend-hover: #f9fafb;
        --color-chart-legend-hidden: #4b5563;
        --color-chart-export-stroke: #374151;
        --color-chart-export-hover: #4b5563;
    }
}

/* Force light mode regardless of system preference */
:root[data-theme="light"],
html[data-theme="light"] {
    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-text-muted: #adb5bd;
    --color-text-inverse: #ffffff;
    
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #e9ecef;
    --color-bg-dark: #212529;
    
    --color-border-light: #e9ecef;
    --color-border-medium: #dee2e6;
    --color-border-dark: #ced4da;
    
    --color-input-bg: #ffffff;
    --color-input-border: #ced4da;
    --color-input-text: #495057;
    --color-input-placeholder: #6c757d;
    --color-input-disabled-bg: #e9ecef;
    --color-input-disabled-text: #6c757d;
    
    --color-card-bg: #ffffff;
    --color-card-header-bg: linear-gradient(to bottom, #ffffff 0%, #f7fafc 100%);
    --color-card-footer-bg: #f7fafc;
    
    /* Gray scale - light mode defaults */
    --color-gray-50: #fafafa;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    --color-gray-950: #0d0d0d;
    
    --shadow-color-sm: rgba(0, 0, 0, 0.05);
    --shadow-color-md: rgba(0, 0, 0, 0.1);
    --shadow-color-lg: rgba(0, 0, 0, 0.15);
    --shadow-color-xl: rgba(0, 0, 0, 0.2);
    
    --overlay-light: rgba(255, 255, 255, 0.9);
    --overlay-medium: rgba(0, 0, 0, 0.5);
    --overlay-dark: rgba(0, 0, 0, 0.8);
    
    /* Table colors for light mode */
    --color-table-bg: #ffffff;
    --color-table-header-bg: #f8f9fa;
    --color-table-row-hover: #f1f3f5;
    --color-table-row-stripe: #f8f9fa;
    --color-table-border: #dee2e6;
}

/* ========================================
   Utility Classes
   ======================================== */

/* Text Colors */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
.text-muted { color: var(--color-text-muted) !important; }

/* Background Colors */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-light { background-color: var(--color-gray-100) !important; }
.bg-dark { background-color: var(--color-gray-900) !important; }
.bg-white { background-color: var(--color-white) !important; }

/* Border Colors */
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-danger { border-color: var(--color-danger) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-light { border-color: var(--color-border-light) !important; }
.border-medium { border-color: var(--color-border-medium) !important; }
.border-dark { border-color: var(--color-border-dark) !important; }