/**
 * Aetheric AI EPM Suite
 * Dark Mode Styles
 */

html.dark {
    /* Override CSS Variables for Dark Mode */
    --bg-primary: #1F2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --bg-dark: #0F172A;

    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --text-inverse: #111827;

    --border-color: #374151;
    --border-color-dark: #4B5563;

    /* Adjusted shadows for dark mode */
    --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 -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

    /* Semantic colors - slightly adjusted for dark mode */
    --success-light: rgba(16, 185, 129, 0.2);
    --warning-light: rgba(245, 158, 11, 0.2);
    --danger-light: rgba(239, 68, 68, 0.2);
    --info-light: rgba(59, 130, 246, 0.2);

    /* Gray adjustments */
    --gray-50: #1F2937;
    --gray-100: #374151;
    --gray-200: #4B5563;
    --gray-300: #6B7280;
    --gray-400: #9CA3AF;
    --gray-500: #D1D5DB;
    --gray-600: #E5E7EB;
    --gray-700: #F3F4F6;
    --gray-800: #F9FAFB;
    --gray-900: #FFFFFF;
}

/* Body */
html.dark body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Header */
html.dark .app-header {
    background: var(--bg-primary);
    border-bottom-color: var(--border-color);
}

/* Search */
html.dark .search-input {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark .search-input:focus {
    background: var(--bg-tertiary);
    border-color: var(--brand-primary);
}

html.dark .search-shortcut {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* Theme toggle */
html.dark .theme-toggle:hover {
    background: var(--bg-tertiary);
}

/* Notifications */
html.dark .notifications-panel {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

/* User menu */
html.dark .user-toggle:hover {
    background: var(--bg-tertiary);
}

html.dark .user-menu {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

html.dark .user-menu-nav a:hover {
    background: var(--bg-tertiary);
}

html.dark .logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Sidebar */
html.dark .app-sidebar {
    background: var(--bg-primary);
    border-right-color: var(--border-color);
}

html.dark .nav-link:hover {
    background: var(--bg-tertiary);
}

html.dark .nav-item.active .nav-link {
    background: rgba(78, 205, 196, 0.15);
}

/* Cards */
html.dark .card,
html.dark .kpi-card,
html.dark .chart-widget,
html.dark .data-table-container {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

html.dark .card-footer,
html.dark .modal-footer {
    background: var(--bg-secondary);
}

/* Tables */
html.dark .data-table th {
    background: var(--bg-secondary);
}

html.dark .data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

html.dark .btn-action:hover {
    background: var(--bg-tertiary);
}

/* Forms */
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus {
    background: var(--bg-tertiary);
}

/* Buttons */
html.dark .btn-secondary {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark .btn-secondary:hover:not(:disabled) {
    background: var(--gray-200);
}

/* Modals */
html.dark .modal {
    background: var(--bg-primary);
}

html.dark .modal-header {
    border-bottom-color: var(--border-color);
}

html.dark .modal-footer {
    border-top-color: var(--border-color);
}

html.dark .modal-close:hover {
    background: var(--bg-tertiary);
}

html.dark .modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

/* Toasts */
html.dark .toast {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

/* Loading overlay */
html.dark .loading-overlay {
    background: rgba(17, 24, 39, 0.9);
}

html.dark .spinner {
    border-color: var(--border-color);
    border-top-color: var(--brand-primary);
}

/* Badges */
html.dark .badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

html.dark .badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

html.dark .badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
}

html.dark .badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

html.dark .badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

/* Skeleton loading */
html.dark .skeleton-bar {
    background: var(--bg-tertiary);
}

/* Chart skeleton */
html.dark .chart-loading {
    background: var(--bg-primary);
}

/* Tooltips */
html.dark .kpi-tooltip {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Heatmap adjustments */
html.dark .heatmap-container {
    background: var(--bg-tertiary);
}

/* Scrollbar */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

html.dark ::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-300);
}

/* Glass card adjustments */
html.dark .card-glass {
    background: rgba(31, 41, 55, 0.8);
    border-color: rgba(55, 65, 81, 0.5);
}

/* AI Elements */
html.dark .ai-status {
    background: rgba(167, 139, 250, 0.15);
}

/* Breadcrumbs */
html.dark .breadcrumb-separator {
    color: var(--gray-300);
}

/* Chart elements */
html.dark .chart-header {
    border-bottom-color: var(--border-color);
}

html.dark .chart-action-btn:hover {
    background: var(--bg-tertiary);
}

/* Login page specific */
html.dark .login-container {
    background: var(--bg-secondary);
}

html.dark .login-card {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

/* Selection */
html.dark ::selection {
    background: rgba(78, 205, 196, 0.3);
    color: var(--text-primary);
}

/* Transition for theme change */
html.dark * {
    transition: background-color var(--transition-base),
                border-color var(--transition-base),
                color var(--transition-base);
}