/**
 * DRAP - Theme Styles
 * Dark mode and theme variations
 */

/* Dark Theme */
[data-theme="dark"] {
    --bg-color: #1a1b23;
    --surface-color: #2a2d3a;
    --border-color: #3f4451;
    --text-color: #e5e7eb;
    --text-muted: #9ca3af;
    
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --secondary-color: #6b7280;
    
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -2px rgb(0 0 0 / 0.2);
    
    /* Gray scale for dark theme */
    --gray-50: #374151;
    --gray-100: #4b5563;
    --gray-200: #6b7280;
    --gray-300: #9ca3af;
    --gray-400: #d1d5db;
    --gray-500: #e5e7eb;
    --gray-600: #f3f4f6;
    --gray-700: #f9fafb;
    --gray-800: #ffffff;
    --gray-900: #ffffff;
}

/* Dark theme specific component adjustments */
[data-theme="dark"] .card {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: rgba(55, 65, 81, 0.3);
    border-color: var(--border-color);
}

[data-theme="dark"] .table th {
    background-color: rgba(55, 65, 81, 0.3);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(55, 65, 81, 0.2);
}

[data-theme="dark"] .navbar {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-ghost:hover {
    background-color: var(--gray-100);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: var(--info-color);
    color: #93c5fd;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: var(--success-color);
    color: #6ee7b7;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: var(--warning-color);
    color: #fcd34d;
}

[data-theme="dark"] .alert-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--error-color);
    color: #fca5a5;
}

[data-theme="dark"] .badge-secondary {
    background-color: var(--gray-100);
    color: var(--gray-800);
}

/* Loading screen dark theme */
[data-theme="dark"] .loading-screen {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Auto theme (system preference) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1b23;
        --surface-color: #2a2d3a;
        --border-color: #3f4451;
        --text-color: #e5e7eb;
        --text-muted: #9ca3af;
        
        --primary-color: #3b82f6;
        --primary-hover: #2563eb;
        --secondary-color: #6b7280;
        
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --error-color: #ef4444;
        --info-color: #3b82f6;
        
        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px 0 rgb(0 0 0 / 0.2);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -2px rgb(0 0 0 / 0.2);
        
        /* Gray scale for dark theme */
        --gray-50: #374151;
        --gray-100: #4b5563;
        --gray-200: #6b7280;
        --gray-300: #9ca3af;
        --gray-400: #d1d5db;
        --gray-500: #e5e7eb;
        --gray-600: #f3f4f6;
        --gray-700: #f9fafb;
        --gray-800: #ffffff;
        --gray-900: #ffffff;
    }
    
    /* Apply dark theme styles when system preference is dark */
    .card {
        background-color: var(--surface-color);
        border-color: var(--border-color);
    }
    
    .card-header,
    .card-footer {
        background-color: rgba(55, 65, 81, 0.3);
        border-color: var(--border-color);
    }
    
    .table th {
        background-color: rgba(55, 65, 81, 0.3);
    }
    
    .table tbody tr:hover {
        background-color: rgba(55, 65, 81, 0.2);
    }
    
    .navbar {
        background-color: var(--surface-color);
        border-color: var(--border-color);
    }
    
    .btn-ghost:hover {
        background-color: var(--gray-100);
    }
    
    .alert-info {
        background-color: rgba(59, 130, 246, 0.1);
        border-color: var(--info-color);
        color: #93c5fd;
    }
    
    .alert-success {
        background-color: rgba(16, 185, 129, 0.1);
        border-color: var(--success-color);
        color: #6ee7b7;
    }
    
    .alert-warning {
        background-color: rgba(245, 158, 11, 0.1);
        border-color: var(--warning-color);
        color: #fcd34d;
    }
    
    .alert-error {
        background-color: rgba(239, 68, 68, 0.1);
        border-color: var(--error-color);
        color: #fca5a5;
    }
    
    .badge-secondary {
        background-color: var(--gray-100);
        color: var(--gray-800);
    }
    
    .loading-screen {
        background-color: var(--bg-color);
        color: var(--text-color);
    }
}

/* Light theme override (explicitly set) */
[data-theme="light"] {
    --bg-color: #ffffff;
    --surface-color: #ffffff;
    --border-color: #e5e7eb;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #6b7280;
    
    --success-color: #059669;
    --warning-color: #d97706;
    --error-color: #dc2626;
    --info-color: #2563eb;
    
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
    
    /* Reset gray scale for light theme */
    --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;
}

/* High contrast theme (accessibility) */
[data-theme="high-contrast"] {
    --bg-color: #000000;
    --surface-color: #000000;
    --border-color: #ffffff;
    --text-color: #ffffff;
    --text-muted: #cccccc;
    
    --primary-color: #0066ff;
    --primary-hover: #0052cc;
    --secondary-color: #888888;
    
    --success-color: #00cc00;
    --warning-color: #ffaa00;
    --error-color: #ff0000;
    --info-color: #00aaff;
    
    --shadow: 0 0 0 1px #ffffff;
    --shadow-lg: 0 0 0 2px #ffffff;
}

[data-theme="high-contrast"] .card,
[data-theme="high-contrast"] .btn,
[data-theme="high-contrast"] .form-input,
[data-theme="high-contrast"] .form-select {
    border: 2px solid var(--border-color);
}

[data-theme="high-contrast"] .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

[data-theme="high-contrast"] .btn-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .loading-spinner {
        animation: none;
        border: 2px solid var(--border-color);
        border-top: 2px solid var(--primary-color);
    }
}

/* Print styles */
@media print {
    :root {
        --bg-color: #ffffff !important;
        --surface-color: #ffffff !important;
        --text-color: #000000 !important;
        --border-color: #000000 !important;
    }
    
    .navbar,
    .toast-container,
    .modal-backdrop,
    .btn,
    [data-route] {
        display: none !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #000000 !important;
    }
    
    body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    .table {
        page-break-inside: avoid;
    }
}