/* public_html/css/themes.css - Premium Enterprise Theme System */

/* ============================================
   JIOCHAEL NEXUS - Theme Management System
   Premium Enterprise Design Themes
   ============================================ */

/* ============================================
   1. DARK THEME (Default Dark)
   ============================================ */
[data-theme="dark"] {
    /* Primary Colors - Dark Theme */
    --primary-50: #1E1B4B;
    --primary-100: #312E81;
    --primary-200: #3730A3;
    --primary-300: #4338CA;
    --primary-400: #4F46E5;
    --primary-500: #6366F1;
    --primary-600: #818CF8;
    --primary-700: #A5B4FC;
    --primary-800: #C7D2FE;
    --primary-900: #E0E7FF;
    --primary-950: #EEF2FF;
    
    /* Legacy Colors */
    --primary-color: #818CF8;
    --primary-dark: #6366F1;
    --primary-light: #A5B4FC;
    
    /* Semantic Colors */
    --secondary-color: #34D399;
    --secondary-dark: #10B981;
    --secondary-50: #064E3B;
    --secondary-100: #065F46;
    
    --danger-color: #F87171;
    --danger-50: #7F1D1D;
    --danger-100: #991B1B;
    --danger-600: #F87171;
    --danger-700: #FCA5A5;
    
    --warning-color: #FBBF24;
    --warning-50: #78350F;
    --warning-100: #92400E;
    --warning-600: #FBBF24;
    
    --info-color: #60A5FA;
    --info-50: #1E3A8A;
    --info-100: #1E40AF;
    --info-600: #60A5FA;
    
    --success-color: #34D399;
    --success-50: #064E3B;
    --success-100: #065F46;
    --success-600: #34D399;
    --success-700: #6EE7B7;
    
    /* Neutral Colors - Inverted for Dark Theme */
    --gray-50: #111827;
    --gray-100: #1F2937;
    --gray-200: #374151;
    --gray-300: #4B5563;
    --gray-400: #6B7280;
    --gray-500: #9CA3AF;
    --gray-600: #D1D5DB;
    --gray-700: #E5E7EB;
    --gray-800: #F3F4F6;
    --gray-900: #F9FAFB;
    --gray-950: #FFFFFF;
    
    /* Background Colors */
    --bg-primary: #1F2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --bg-dark: #111827;
    --bg-dark-secondary: #030712;
    
    /* Text Colors */
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary: #9CA3AF;
    --text-inverse: #111827;
    --text-disabled: #4B5563;
    
    /* Border Colors */
    --border-color: #374151;
    --border-light: #4B5563;
    --border-dark: #6B7280;
    
    /* Shadows - Darker and More Pronounced */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.8);
    
    /* Specific Component Overrides */
    --card-bg: #1F2937;
    --card-border: #374151;
    --input-bg: #111827;
    --input-border: #374151;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --active-bg: rgba(99, 102, 241, 0.2);
    --disabled-bg: #374151;
    --disabled-text: #6B7280;
}

/* ============================================
   2. COMPACT THEME
   ============================================ */
[data-theme="compact"] {
    /* Layout Dimensions */
    --sidebar-width: 200px;
    --sidebar-collapsed-width: 56px;
    --header-height: 56px;
    --content-padding: 1rem;
    --content-max-width: 1280px;
    
    /* Typography */
    --font-size-xs: 0.6875rem;
    --font-size-sm: 0.75rem;
    --font-size-base: 0.8125rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.125rem;
    --font-size-2xl: 1.25rem;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.25rem;
    
    /* Border Radius */
    --border-radius-xs: 3px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    --border-radius-2xl: 16px;
    --border-radius-3xl: 20px;
    
    /* Component Specific */
    --card-padding: 1rem;
    --btn-padding: 0.5rem 1rem;
    --input-padding: 0.5rem 0.75rem;
    --table-cell-padding: 0.625rem 0.75rem;
    --modal-padding: 1rem;
}

/* ============================================
   3. HIGH CONTRAST THEME
   ============================================ */
[data-theme="high-contrast"] {
    /* Text Colors - Maximum Contrast */
    --text-primary: #000000;
    --text-secondary: #1a1a1a;
    --text-tertiary: #333333;
    --text-inverse: #FFFFFF;
    --text-disabled: #666666;
    
    /* Primary Colors - High Visibility */
    --primary-50: #000080;
    --primary-100: #0000CC;
    --primary-200: #0000FF;
    --primary-300: #3333FF;
    --primary-400: #6666FF;
    --primary-500: #0000FF;
    --primary-600: #0000CC;
    --primary-700: #000099;
    --primary-800: #000066;
    --primary-900: #000033;
    --primary-950: #00001A;
    
    /* Legacy */
    --primary-color: #0000FF;
    --primary-dark: #000080;
    --primary-light: #6666FF;
    
    /* Semantic Colors - High Contrast */
    --secondary-color: #006400;
    --secondary-dark: #004400;
    
    --danger-color: #FF0000;
    --danger-50: #FFCCCC;
    --danger-100: #FF9999;
    --danger-600: #CC0000;
    --danger-700: #990000;
    
    --warning-color: #FFA500;
    --warning-50: #FFF3E0;
    --warning-100: #FFE0B2;
    --warning-600: #E65100;
    
    --info-color: #0000FF;
    --info-50: #E3F2FD;
    --info-100: #BBDEFB;
    --info-600: #1565C0;
    
    --success-color: #008000;
    --success-50: #E8F5E9;
    --success-100: #C8E6C9;
    --success-600: #2E7D32;
    --success-700: #1B5E20;
    
    /* Neutral Colors - High Contrast */
    --gray-50: #FFFFFF;
    --gray-100: #F5F5F5;
    --gray-200: #EEEEEE;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    --gray-950: #000000;
    
    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --bg-tertiary: #EEEEEE;
    --bg-dark: #000000;
    --bg-dark-secondary: #212121;
    
    /* Border Colors - Very Visible */
    --border-color: #000000;
    --border-light: #333333;
    --border-dark: #000000;
    
    /* Shadows - Stronger for Contrast */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.5);
    
    /* Component Specific */
    --focus-ring: 3px solid #0000FF;
    --focus-ring-offset: 2px;
    --selection-bg: #0000FF;
    --selection-text: #FFFFFF;
}

/* ============================================
   4. LIGHT THEME (Explicit)
   ============================================ */
[data-theme="light"] {
    /* Primary Colors - Light Theme */
    --primary-50: #EEF2FF;
    --primary-100: #E0E7FF;
    --primary-200: #C7D2FE;
    --primary-300: #A5B4FC;
    --primary-400: #818CF8;
    --primary-500: #6366F1;
    --primary-600: #4F46E5;
    --primary-700: #4338CA;
    --primary-800: #3730A3;
    --primary-900: #312E81;
    --primary-950: #1E1B4B;
    
    /* Legacy */
    --primary-color: #4F46E5;
    --primary-dark: #4338CA;
    --primary-light: #818CF8;
    
    /* Semantic Colors */
    --secondary-color: #10B981;
    --secondary-dark: #059669;
    
    --danger-color: #EF4444;
    --danger-600: #DC2626;
    --danger-700: #B91C1C;
    
    --warning-color: #F59E0B;
    --warning-600: #D97706;
    
    --info-color: #3B82F6;
    --info-600: #2563EB;
    
    --success-color: #10B981;
    --success-600: #059669;
    --success-700: #047857;
    
    /* Neutral Colors */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --gray-950: #030712;
    
    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-tertiary: #F3F4F6;
    --bg-dark: #1F2937;
    --bg-dark-secondary: #111827;
    
    /* Text Colors */
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-inverse: #FFFFFF;
    --text-disabled: #D1D5DB;
    
    /* Border Colors */
    --border-color: #E5E7EB;
    --border-light: #F3F4F6;
    --border-dark: #D1D5DB;
    
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(16, 24, 40, 0.1);
}

/* ============================================
   5. CORPORATE THEME (Blue)
   ============================================ */
[data-theme="corporate"] {
    /* Primary Colors - Corporate Blue */
    --primary-50: #EBF5FF;
    --primary-100: #D6EBFF;
    --primary-200: #ADD6FF;
    --primary-300: #85C1FF;
    --primary-400: #5CACFF;
    --primary-500: #3397FF;
    --primary-600: #0A82FF;
    --primary-700: #0068CC;
    --primary-800: #004E99;
    --primary-900: #003466;
    --primary-950: #001A33;
    
    /* Legacy */
    --primary-color: #0A82FF;
    --primary-dark: #0068CC;
    --primary-light: #5CACFF;
    
    /* Semantic Colors */
    --secondary-color: #00B894;
    --secondary-dark: #00A383;
    --danger-color: #FF4757;
    --warning-color: #FFA502;
    --info-color: #3742FA;
    --success-color: #2ED573;
    
    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F4F7FA;
    --bg-tertiary: #E8EDF2;
    --bg-dark: #2C3E50;
    --bg-dark-secondary: #1a252f;
    
    /* Text Colors */
    --text-primary: #2C3E50;
    --text-secondary: #5D6D7E;
    --text-tertiary: #95A5A6;
    --text-inverse: #FFFFFF;
    
    /* Border Colors */
    --border-color: #D5DBDB;
    --border-light: #EAEDED;
    --border-dark: #BDC3C7;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(44, 62, 80, 0.1);
    --shadow-md: 0 4px 8px rgba(44, 62, 80, 0.12);
    --shadow-lg: 0 8px 16px rgba(44, 62, 80, 0.15);
    --shadow-xl: 0 16px 32px rgba(44, 62, 80, 0.2);
}

/* ============================================
   6. EMERALD THEME (Green)
   ============================================ */
[data-theme="emerald"] {
    /* Primary Colors - Emerald Green */
    --primary-50: #ECFDF5;
    --primary-100: #D1FAE5;
    --primary-200: #A7F3D0;
    --primary-300: #6EE7B7;
    --primary-400: #34D399;
    --primary-500: #10B981;
    --primary-600: #059669;
    --primary-700: #047857;
    --primary-800: #065F46;
    --primary-900: #064E3B;
    --primary-950: #022C22;
    
    /* Legacy */
    --primary-color: #059669;
    --primary-dark: #047857;
    --primary-light: #34D399;
    
    /* Semantic Colors */
    --secondary-color: #3B82F6;
    --secondary-dark: #2563EB;
    --danger-color: #EF4444;
    --warning-color: #F59E0B;
    --info-color: #8B5CF6;
    --success-color: #10B981;
    
    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F0FDF4;
    --bg-tertiary: #DCFCE7;
    --bg-dark: #064E3B;
    --bg-dark-secondary: #022C22;
    
    /* Text Colors */
    --text-primary: #064E3B;
    --text-secondary: #047857;
    --text-tertiary: #6EE7B7;
    --text-inverse: #FFFFFF;
    
    /* Border Colors */
    --border-color: #A7F3D0;
    --border-light: #D1FAE5;
    --border-dark: #6EE7B7;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(6, 78, 59, 0.1);
    --shadow-md: 0 4px 6px rgba(6, 78, 59, 0.1);
    --shadow-lg: 0 10px 15px rgba(6, 78, 59, 0.1);
    --shadow-xl: 0 20px 25px rgba(6, 78, 59, 0.1);
}

/* ============================================
   7. THEME TRANSITIONS
   ============================================ */
* {
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal),
                box-shadow var(--transition-normal);
}

/* Exclude transition from elements that should be instant */
.no-theme-transition,
.no-theme-transition * {
    transition: none !important;
}

/* ============================================
   8. THEME-SPECIFIC COMPONENT STYLES
   ============================================ */

/* Dark Theme Specific Styles */
[data-theme="dark"] .card {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

[data-theme="dark"] .table th {
    background: var(--gray-200);
    color: var(--gray-500);
}

[data-theme="dark"] .table td {
    color: var(--gray-300);
}

[data-theme="dark"] .modal {
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}

[data-theme="dark"] .form-control {
    background: var(--gray-200);
    border-color: var(--gray-300);
    color: var(--gray-100);
}

[data-theme="dark"] .btn-secondary {
    background: var(--gray-200);
    color: var(--gray-100);
    border-color: var(--gray-300);
}

[data-theme="dark"] .sidebar {
    background: var(--gray-950);
    border-right: 1px solid var(--gray-200);
}

/* Compact Theme Specific Styles */
[data-theme="compact"] .card {
    padding: 1rem;
    margin-bottom: 1rem;
}

[data-theme="compact"] .card-header {
    margin-bottom: 0.75rem;
}

[data-theme="compact"] .form-group {
    margin-bottom: 0.75rem;
}

[data-theme="compact"] .nav-item {
    padding: 0.5rem 0.75rem;
}

[data-theme="compact"] .table th,
[data-theme="compact"] .table td {
    padding: 0.625rem 0.75rem;
}

/* High Contrast Theme Specific Styles */
[data-theme="high-contrast"] .card {
    border: 2px solid var(--border-color);
}

[data-theme="high-contrast"] .btn {
    border: 2px solid currentColor;
}

[data-theme="high-contrast"] .form-control {
    border: 2px solid var(--border-color);
}

[data-theme="high-contrast"] .form-control:focus {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    box-shadow: none;
}

[data-theme="high-contrast"] .badge {
    border: 2px solid currentColor;
    font-weight: 700;
}

[data-theme="high-contrast"] .nav-item.active {
    border: 2px solid white;
}

/* ============================================
   9. THEME UTILITY CLASSES
   ============================================ */
.theme-transition {
    transition: all var(--transition-normal);
}

.theme-fade-enter {
    opacity: 0;
    transform: translateY(10px);
}

.theme-fade-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.theme-fade-exit {
    opacity: 1;
}

.theme-fade-exit-active {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

/* ============================================
   10. SYSTEM THEME DETECTION
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Auto dark mode if no explicit theme is set */
        --bg-primary: #1F2937;
        --bg-secondary: #111827;
        --bg-tertiary: #374151;
        --bg-dark: #111827;
        
        --text-primary: #F9FAFB;
        --text-secondary: #D1D5DB;
        --text-tertiary: #9CA3AF;
        
        --border-color: #374151;
        --border-light: #4B5563;
    }
}

@media (prefers-contrast: high) {
    :root:not([data-theme="high-contrast"]) {
        /* Enhanced contrast for users who prefer it */
        --text-primary: #000000;
        --text-secondary: #1a1a1a;
        --border-color: #000000;
    }
}

/* ============================================
   11. THEME PERSISTENCE
   ============================================ */
/* Theme is saved to localStorage and applied via JavaScript */
/* This ensures theme preference persists across sessions */
[data-theme-persist="true"] {
    /* Theme will not reset on page reload */
}