/* Unified Premium Dark Mode Overrides */

[data-theme="dark"] {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-soft: #334155;
    --surface-muted: #1e293b;
    --text: #f8fafc;
    --text-muted: #94a3b8;
    --border: #334155;
    --border-strong: #475569;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
    
    /* Dynamic theme overrides for alerts & badges */
    --status-success-bg: rgba(22, 163, 74, 0.12);
    --status-success-border: rgba(22, 163, 74, 0.25);
    --status-success-text: #4ade80;

    --status-warning-bg: rgba(217, 119, 6, 0.12);
    --status-warning-border: rgba(217, 119, 6, 0.25);
    --status-warning-text: #fbbf24;

    --status-danger-bg: rgba(220, 38, 38, 0.12);
    --status-danger-border: rgba(220, 38, 38, 0.25);
    --status-danger-text: #f87171;

    --status-info-bg: rgba(37, 99, 235, 0.12);
    --status-info-border: rgba(37, 99, 235, 0.25);
    --status-info-text: #60a5fa;
}

[data-theme="dark"] body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

/* 1. Global Backgrounds & Borders Overrides */
[data-theme="dark"] .modern-card,
[data-theme="dark"] .page-header-card,
[data-theme="dark"] .card,
[data-theme="dark"] .whats-new-block,
[data-theme="dark"] .note-box,
[data-theme="dark"] .table-responsive-clean,
[data-theme="dark"] .table-container,
[data-theme="dark"] .table-responsive {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .whats-new-block {
    background: var(--bg) !important;
}

/* 2. Text Colors Override (Ensuring high contrast) */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] th,
[data-theme="dark"] td,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] li,
[data-theme="dark"] div {
    /* Only override text if it is hardcoded to dark shades in styles */
    color: var(--text);
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .form-help,
[data-theme="dark"] small,
[data-theme="dark"] .whats-new-card__summary {
    color: var(--text-muted) !important;
    opacity: 0.9;
}

/* 3. Inputs, Selects & Textareas Styling */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* 4. Tables Overrides */
[data-theme="dark"] .professional-table th,
[data-theme="dark"] .data-table th,
[data-theme="dark"] .table th,
[data-theme="dark"] .modern-table th {
    color: var(--text) !important;
    background: #0f172a !important; /* Richer dark table header background */
    border-bottom: 2px solid var(--border-strong) !important;
}

[data-theme="dark"] .professional-table td,
[data-theme="dark"] .data-table td,
[data-theme="dark"] .table td,
[data-theme="dark"] .modern-table td {
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    color: var(--text) !important;
}

[data-theme="dark"] .professional-table tbody tr:hover,
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] .modern-table tbody tr:hover {
    background: var(--surface-soft) !important;
}

/* 5. Status Badges & Pills (Fixing Flashbangs) */
[data-theme="dark"] .badge-success,
[data-theme="dark"] .status-success,
[data-theme="dark"] .status-completed {
    background: var(--status-success-bg) !important;
    border-color: var(--status-success-border) !important;
    color: var(--status-success-text) !important;
}

[data-theme="dark"] .badge-warning,
[data-theme="dark"] .status-warning,
[data-theme="dark"] .status-pending {
    background: var(--status-warning-bg) !important;
    border-color: var(--status-warning-border) !important;
    color: var(--status-warning-text) !important;
}

[data-theme="dark"] .badge-danger,
[data-theme="dark"] .status-danger,
[data-theme="dark"] .status-returned {
    background: var(--status-danger-bg) !important;
    border-color: var(--status-danger-border) !important;
    color: var(--status-danger-text) !important;
}

[data-theme="dark"] .badge-info,
[data-theme="dark"] .status-info {
    background: var(--status-info-bg) !important;
    border-color: var(--status-info-border) !important;
    color: var(--status-info-text) !important;
}

/* 6. Notifications, Alerts & Modals */
[data-theme="dark"] .alert-banner,
[data-theme="dark"] .alert,
[data-theme="dark"] .toast,
[data-theme="dark"] .toast-notification {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

[data-theme="dark"] .alert-banner.alert-success,
[data-theme="dark"] .alert-success {
    border-right: 4px solid var(--status-success-text) !important;
}

[data-theme="dark"] .alert-banner.alert-danger,
[data-theme="dark"] .alert-danger {
    border-right: 4px solid var(--status-danger-text) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* 7. Header and Navigation */
[data-theme="dark"] .main-header,
[data-theme="dark"] .app-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
}

[data-theme="dark"] .header-user-chip {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
}

[data-theme="dark"] .header-whats-new-link,
[data-theme="dark"] .header-logout-link {
    background: var(--bg) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .header-whats-new-link:hover,
[data-theme="dark"] .header-logout-link:hover {
    background: var(--surface-soft) !important;
}

[data-theme="dark"] .main-navigation,
[data-theme="dark"] .dropdown-menu {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--surface-soft) !important;
    color: var(--text) !important;
}

/* 8. Avatars & Icons */
[data-theme="dark"] .avatar-circle-xs,
[data-theme="dark"] .user-avatar,
[data-theme="dark"] .person-avatar {
    background: var(--surface-soft) !important;
    color: var(--primary-400) !important;
    border-color: var(--border-strong) !important;
}

/* 9. Timeline layout overrides in whats-new */
[data-theme="dark"] .whats-new-page .whats-new-list::before {
    background: linear-gradient(to bottom, var(--primary), var(--border)) !important;
}

[data-theme="dark"] .whats-new-page .whats-new-card::before {
    background: var(--bg) !important;
}

[data-theme="dark"] .whats-new-page .whats-new-card:hover::before {
    background: var(--primary) !important;
}