/**
 * Dark Mode Theme System for PIM
 * Complete dark theme implementation with CSS variables
 */

/* Light Theme (Default) - CSS Variables */
:root {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-quaternary: #dee2e6;
    --bg-card: #ffffff;
    --bg-modal: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --text-light: #adb5bd;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-light: #e9ecef;
    --border-medium: #dee2e6;
    --border-dark: #ced4da;
    --border-focus: #007bff;
    
    /* Button Colors */
    --btn-primary-bg: #007bff;
    --btn-primary-hover: #0056b3;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-hover: #5a6268;
    --btn-success-bg: #28a745;
    --btn-success-hover: #218838;
    --btn-danger-bg: #dc3545;
    --btn-danger-hover: #c82333;
    --btn-warning-bg: #ffc107;
    --btn-warning-hover: #e0a800;
    --btn-info-bg: #17a2b8;
    --btn-info-hover: #138496;
    
    /* Form Colors */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-focus-border: #007bff;
    --input-focus-shadow: rgba(0, 123, 255, 0.25);
    --select-bg: #ffffff;
    
    /* Table Colors */
    --table-bg: #ffffff;
    --table-hover: #f8f9fa;
    --table-stripe: #f2f2f2;
    --table-border: #dee2e6;
    --table-header-bg: #007bff;
    --table-header-text: #ffffff;
    
    /* Tab Colors */
    --tab-bg: #f8f9fa;
    --tab-active-bg: #007bff;
    --tab-active-text: #ffffff;
    --tab-inactive-text: #495057;
    --tab-border: #dee2e6;
    
    /* Notification Colors */
    --notification-success-bg: #d4edda;
    --notification-success-border: #c3e6cb;
    --notification-success-text: #155724;
    --notification-warning-bg: #fff3cd;
    --notification-warning-border: #ffeaa7;
    --notification-warning-text: #856404;
    --notification-error-bg: #f8d7da;
    --notification-error-border: #f5c6cb;
    --notification-error-text: #721c24;
    --notification-info-bg: #e3f2fd;
    --notification-info-border: #bbdefb;
    --notification-info-text: #1976d2;
    
    /* Shadow Colors */
    --shadow-sm: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.15);
    --shadow-lg: rgba(0, 0, 0, 0.2);
    --shadow-focus: rgba(0, 123, 255, 0.25);
    
    /* Progress Colors */
    --progress-bg: #e9ecef;
    --progress-success: #28a745;
    --progress-warning: #ffc107;
    --progress-danger: #dc3545;
    
    /* Scrollbar Colors */
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a8a8a8;
}

/* Dark Theme - CSS Variables */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-quaternary: #4a4a4a;
    --bg-card: #2d2d2d;
    --bg-modal: #2d2d2d;
    --bg-overlay: rgba(0, 0, 0, 0.8);
    --bg-hover: rgba(52, 152, 219, 0.15);
    --bg-input: #3a3a3a;
    --success-color-light: rgba(46, 204, 113, 0.2);
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #e9ecef;
    --text-muted: #adb5bd;
    --text-light: #6c757d;
    --text-inverse: #1a1a1a;
    
    /* Border Colors */
    --border-light: #495057;
    --border-medium: #5a6268;
    --border-dark: #6c757d;
    --border-focus: #4dabf7;
    
    /* Button Colors */
    --btn-primary-bg: #4dabf7;
    --btn-primary-hover: #339af0;
    --btn-secondary-bg: #495057;
    --btn-secondary-hover: #5a6268;
    --btn-success-bg: #40c057;
    --btn-success-hover: #37b24d;
    --btn-danger-bg: #fa5252;
    --btn-danger-hover: #f03e3e;
    --btn-warning-bg: #fd7e14;
    --btn-warning-hover: #e8590c;
    --btn-info-bg: #22b8cf;
    --btn-info-hover: #1c9db5;
    
    /* Form Colors */
    --input-bg: #3a3a3a;
    --input-border: #5a6268;
    --input-focus-border: #4dabf7;
    --input-focus-shadow: rgba(77, 171, 247, 0.25);
    --select-bg: #3a3a3a;
    
    /* Table Colors */
    --table-bg: #2d2d2d;
    --table-hover: #3a3a3a;
    --table-stripe: #343a40;
    --table-border: #495057;
    --table-header-bg: #4dabf7;
    --table-header-text: #ffffff;
    
    /* Tab Colors */
    --tab-bg: #3a3a3a;
    --tab-active-bg: #4dabf7;
    --tab-active-text: #ffffff;
    --tab-inactive-text: #adb5bd;
    --tab-border: #495057;
    
    /* Notification Colors */
    --notification-success-bg: #2b5a31;
    --notification-success-border: #40c057;
    --notification-success-text: #69db7c;
    --notification-warning-bg: #663c00;
    --notification-warning-border: #fd7e14;
    --notification-warning-text: #ffec99;
    --notification-error-bg: #5c1e20;
    --notification-error-border: #fa5252;
    --notification-error-text: #ffc9c9;
    --notification-info-bg: #1c5282;
    --notification-info-border: #4dabf7;
    --notification-info-text: #a5d8ff;
    
    /* Shadow Colors */
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.5);
    --shadow-lg: rgba(0, 0, 0, 0.7);
    --shadow-focus: rgba(77, 171, 247, 0.4);
    
    /* Progress Colors */
    --progress-bg: #495057;
    --progress-success: #40c057;
    --progress-warning: #fd7e14;
    --progress-danger: #fa5252;
    
    /* Scrollbar Colors */
    --scrollbar-track: #2d2d2d;
    --scrollbar-thumb: #495057;
    --scrollbar-thumb-hover: #5a6268;
}

/* Theme Toggle Switch Styles */
.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 20px;
    user-select: none;
}

.theme-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.theme-toggle-switch {
    position: relative;
    width: 50px;
    height: 24px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 2px solid var(--border-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.theme-toggle-switch:hover {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--shadow-focus);
}

.theme-toggle-slider {
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--btn-primary-bg);
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    left: 2px;
    box-shadow: 0 2px 4px var(--shadow-sm);
}

[data-theme="dark"] .theme-toggle-slider {
    transform: translateX(26px);
    background: var(--btn-primary-bg);
}

.theme-toggle-icon {
    transition: opacity 0.2s ease;
}

/* Icon transitions */
[data-theme="light"] .theme-toggle .fa-moon {
    opacity: 0.5;
}

[data-theme="light"] .theme-toggle .fa-sun {
    opacity: 1;
}

[data-theme="dark"] .theme-toggle .fa-moon {
    opacity: 1;
}

[data-theme="dark"] .theme-toggle .fa-sun {
    opacity: 0.5;
}

/* Global Dark Mode Styles */
[data-theme="dark"] {
    color-scheme: dark;
}

/* Apply theme colors to all elements */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* 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 !important;
}

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

/* Dark mode image filters */
[data-theme="dark"] img:not(.no-filter) {
    filter: brightness(0.9) contrast(1.1);
}

[data-theme="dark"] .product-image-small img {
    filter: brightness(0.8) contrast(1.2);
}

/* Code and monospace elements in dark mode */
[data-theme="dark"] code,
[data-theme="dark"] pre,
[data-theme="dark"] .monospace {
    background-color: var(--bg-tertiary);
    color: #f8f8f2;
}

/* Selection colors */
[data-theme="dark"] ::selection {
    background: var(--btn-primary-bg);
    color: white;
}

[data-theme="dark"] ::-moz-selection {
    background: var(--btn-primary-bg);
    color: white;
}

/* Focus outline for accessibility */
[data-theme="dark"] *:focus {
    outline-color: var(--border-focus);
}

/* Loading spinners in dark mode */
[data-theme="dark"] .fa-spinner {
    color: var(--btn-primary-bg);
}

/* Placeholder text */
[data-theme="dark"] ::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

[data-theme="dark"] ::-webkit-input-placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

[data-theme="dark"] ::-moz-placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

[data-theme="dark"] :-ms-input-placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

/* Ensure proper contrast for disabled elements */
[data-theme="dark"] :disabled {
    opacity: 0.6;
    color: var(--text-muted);
}

/* Animation for theme switching */
@keyframes themeSwitch {
    0% { opacity: 0.8; }
    50% { opacity: 0.9; }
    100% { opacity: 1; }
}

[data-theme] {
    animation: themeSwitch 0.3s ease-in-out;
}