/**
 * Complete Dark Mode Overrides
 * Ensures ALL elements adapt to dark theme properly
 * Applied AFTER dynamic theme.css for maximum specificity
 */

/* ===== ROOT LEVEL ===== */
html[data-theme="dark"],
html.dark {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-2: #0f1729;
    --bg-secondary: #1e293b;
    
    /* Brand semantic colors inherit from :root (settings/theme.css); do not override here. */
    
    /* Dark mode text colors */
    --text-1: #f1f5f9;
    --text-2: #cbd5e1;
    --text-3: #94a3b8;
    --text-inverse: #111827;
    
    /* Dark mode borders */
    --border: #334155;
    --border-light: #475569;

    /* Semantic tints: theme -lt tokens are ~90% white and wash out in dark mode */
    --success-lt: color-mix(in srgb, var(--success-base, var(--success, #10b981)) 22%, #0f1729);
    --warning-lt: color-mix(in srgb, var(--warning-base, var(--warning, #f59e0b)) 22%, #0f1729);
    --danger-lt: color-mix(in srgb, var(--danger-base, var(--danger, #ef4444)) 22%, #0f1729);
    --info-lt: color-mix(in srgb, var(--info-base, var(--info, #0ea5e9)) 22%, #0f1729);
    --primary-lt: color-mix(in srgb, var(--primary-base, var(--primary, #2563eb)) 22%, #0f1729);
}

html[data-theme="dark"] body,
html.dark body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* ===== ALL CONTAINERS & SURFACES ===== */
html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] article,
html[data-theme="dark"] aside,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .container,
html.dark main,
html.dark section,
html.dark article,
html.dark aside,
html.dark .main-content,
html.dark .page-content,
html.dark .container {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* ===== CARDS & PANELS ===== */
html[data-theme="dark"] .card,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .filter-box,
html[data-theme="dark"] .content-card,
html.dark .card,
html.dark .admin-card,
html.dark .panel,
html.dark .box,
html.dark .widget,
html.dark .filter-box,
html.dark .content-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* ===== TABLES ===== */
html[data-theme="dark"] table,
html.dark table {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] thead,
html.dark thead {
    background-color: #0f1729 !important;
}

html[data-theme="dark"] thead th,
html.dark thead th {
    background-color: #0f1729 !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] tbody td,
html.dark tbody td {
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] tbody tr:hover,
html.dark tbody tr:hover {
    background-color: #0f1729 !important;
}

/* ===== INPUTS & FORM ELEMENTS ===== */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-textarea,
html.dark input,
html.dark select,
html.dark textarea,
html.dark .form-control,
html.dark .form-select,
html.dark .form-input,
html.dark .form-textarea {
    background-color: #0f1729 !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

/* ===== BUTTONS ===== */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-light,
html.dark .btn-secondary,
html.dark .btn-outline-secondary,
html.dark .btn-light {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html.dark .btn-secondary:hover,
html.dark .btn-outline-secondary:hover {
    background-color: #475569 !important;
    border-color: #64748b !important;
}

/* ===== TEXT ELEMENTS ===== */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark p,
html.dark label {
    color: #f1f5f9 !important;
}

/* Do not force color on all spans — breaks status/completeness badges and role pills */
html[data-theme="dark"] span:not([class*="badge"]):not([class*="status-"]):not([class*="completeness-"]):not(.role-badge):not(.nav-badge):not(.upgrade-title):not(.upgrade-text),
html.dark span:not([class*="badge"]):not([class*="status-"]):not([class*="completeness-"]):not(.role-badge):not(.nav-badge):not(.upgrade-title):not(.upgrade-text) {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] a,
html.dark a {
    color: #ffa500 !important;
}

html[data-theme="dark"] a:hover,
html.dark a:hover {
    color: #ffb84d !important;
}

/* Solid CTAs are often `<a class="btn btn-primary">` or `<a class="btn-primary">` — override prose-link orange above */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] a.btn-primary,
html[data-theme="dark"] .btn.btn-primary,
html.dark .btn-primary,
html.dark a.btn-primary,
html.dark .btn.btn-primary {
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] a.btn-primary:hover,
html[data-theme="dark"] .btn.btn-primary:hover,
html.dark .btn-primary:hover,
html.dark a.btn-primary:hover,
html.dark .btn.btn-primary:hover {
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-success,
html[data-theme="dark"] a.btn-success,
html[data-theme="dark"] .btn.btn-success,
html.dark .btn-success,
html.dark a.btn-success,
html.dark .btn.btn-success {
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] a.btn-success:hover,
html[data-theme="dark"] .btn.btn-success:hover,
html.dark .btn-success:hover,
html.dark a.btn-success:hover,
html.dark .btn.btn-success:hover {
    color: #ffffff !important;
}

/* ===== BADGES ===== */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .badge-light,
html.dark .badge,
html.dark .badge-light {
    background-color: #0f1729 !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

/* Semantic status / completeness pills (page-local styles use -lt + semantic color) */
html[data-theme="dark"] .status-active,
html[data-theme="dark"] .status-done,
html[data-theme="dark"] .status-paid,
html[data-theme="dark"] .status-completed,
html[data-theme="dark"] .status-approved,
html.dark .status-active,
html.dark .status-done,
html.dark .status-paid,
html.dark .status-completed,
html.dark .status-approved,
html[data-theme="dark"] .completeness-available,
html.dark .completeness-available {
    background: var(--success-lt) !important;
    color: var(--success) !important;
}

html[data-theme="dark"] .status-inactive,
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .status-credit,
html.dark .status-inactive,
html.dark .status-pending,
html.dark .status-credit,
html[data-theme="dark"] .completeness-nearly-full,
html.dark .completeness-nearly-full,
html[data-theme="dark"] .pay-credit,
html.dark .pay-credit {
    background: var(--warning-lt) !important;
    color: var(--warning) !important;
}

html[data-theme="dark"] .status-maintenance,
html.dark .status-maintenance {
    background: var(--info-lt) !important;
    color: var(--info) !important;
}

html[data-theme="dark"] .completeness-full,
html.dark .completeness-full {
    background: var(--danger-lt) !important;
    color: var(--danger) !important;
}

html[data-theme="dark"] .completeness-unlimited,
html.dark .completeness-unlimited {
    background: var(--surface-2) !important;
    color: var(--text-2) !important;
}

html[data-theme="dark"] .role-badge,
html.dark .role-badge {
    background: var(--primary-lt) !important;
    color: var(--primary) !important;
}

/* Sidebar / header icon buttons */
html[data-theme="dark"] .header-btn,
html[data-theme="dark"] .sidebar-toggle-btn,
html.dark .header-btn,
html.dark .sidebar-toggle-btn {
    background-color: var(--surface-2, #0f1729) !important;
    border-color: var(--border, #334155) !important;
    color: var(--text-2, #cbd5e1) !important;
}

html[data-theme="dark"] .header-btn:hover,
html[data-theme="dark"] .sidebar-toggle-btn:hover,
html.dark .header-btn:hover,
html.dark .sidebar-toggle-btn:hover {
    background-color: var(--border, #334155) !important;
    color: var(--text-1, #f1f5f9) !important;
}

html[data-theme="dark"] .header-btn i,
html[data-theme="dark"] .sidebar-toggle-btn i,
html.dark .header-btn i,
html.dark .sidebar-toggle-btn i {
    color: inherit !important;
}

/* Inline table action chips that hardcode background: white */
html[data-theme="dark"] .btn-small,
html.dark .btn-small {
    background: var(--surface-2, #0f1729) !important;
    color: var(--text-2, #cbd5e1) !important;
    border-color: var(--border, #334155) !important;
}

html[data-theme="dark"] .btn-small.btn-danger,
html.dark .btn-small.btn-danger {
    color: var(--danger) !important;
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border)) !important;
}

html[data-theme="dark"] .btn-small.btn-danger:hover,
html.dark .btn-small.btn-danger:hover {
    background: var(--danger-lt) !important;
    color: var(--danger) !important;
}

/* ===== BORDERS & DIVIDERS ===== */
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider,
html.dark hr,
html.dark .divider {
    border-color: #334155 !important;
}

/* ===== LIST ITEMS ===== */
html[data-theme="dark"] li,
html[data-theme="dark"] .list-item,
html.dark li,
html.dark .list-item {
    color: #f1f5f9 !important;
}

/* ===== MODALS ===== */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer,
html.dark .modal-content,
html.dark .modal-header,
html.dark .modal-body,
html.dark .modal-footer {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* ===== DROPDOWNS ===== */
html[data-theme="dark"] .dropdown-menu,
html.dark .dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .dropdown-item,
html.dark .dropdown-item {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:active,
html.dark .dropdown-item:hover,
html.dark .dropdown-item:active {
    background-color: #0f1729 !important;
    color: #f1f5f9 !important;
}

/* ===== ALERTS ===== */
html[data-theme="dark"] .alert,
html[data-theme="dark"] .alert-light,
html.dark .alert,
html.dark .alert-light {
    background-color: #0f1729 !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* ===== DATATABLE SPECIFIC ===== */
html[data-theme="dark"] .dataTables_wrapper,
html.dark .dataTables_wrapper {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .dataTables_filter input,
html[data-theme="dark"] .dataTables_length select,
html.dark .dataTables_filter input,
html.dark .dataTables_length select {
    background-color: #0f1729 !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .pagination .page-link,
html.dark .pagination .page-link {
    background-color: #0f1729 !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .pagination .page-link:hover,
html.dark .pagination .page-link:hover {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .pagination .page-item.active .page-link,
html[data-theme="dark"] .dataTables_paginate .page-item.active .page-link,
html[data-theme="dark"] .dataTables_paginate li.paginate_button.active > .page-link,
html[data-theme="dark"] .dataTables_paginate .paginate_button.current,
html.dark .pagination .page-item.active .page-link,
html.dark .dataTables_paginate .page-item.active .page-link,
html.dark .dataTables_paginate li.paginate_button.active > .page-link,
html.dark .dataTables_paginate .paginate_button.current {
    background-color: var(--primary, #2563eb) !important;
    background-image: none !important;
    border-color: var(--primary, #2563eb) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .dataTables_paginate .paginate_button.page-item,
html.dark .dataTables_paginate .paginate_button.page-item {
    background: transparent !important;
}

/* ===== CODE & MONOSPACE ===== */
html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html[data-theme="dark"] .code-block,
html.dark code,
html.dark pre,
html.dark .code-block {
    background-color: #0f1729 !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

/* ===== SCROLLBARS ===== */
html[data-theme="dark"] ::-webkit-scrollbar,
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track,
html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* ===== SELECT2 DROPDOWN INTEGRATION ===== */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--single {
    background-color: #0f1729 !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .select2-dropdown,
html.dark .select2-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .select2-results__option,
html.dark .select2-results__option {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .select2-results__option--highlighted[aria-selected],
html.dark .select2-results__option--highlighted[aria-selected] {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Select2 bootstrap-5 theme (admin layout) — same tokens as settings/theme.css */
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single,
html.dark .select2-container--bootstrap-5 .select2-selection--single {
    background-color: var(--surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
    color: var(--text-1, #f1f5f9) !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
html.dark .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--text-1, #f1f5f9) !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b,
html.dark .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-2, #cbd5e1) transparent transparent transparent !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection--single,
html.dark .select2-container--bootstrap-5.select2-container--open .select2-selection--single {
    border-color: var(--primary, #2563eb) !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
html.dark .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--surface, #1e293b) !important;
    border-color: var(--border, #334155) !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
html.dark .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: var(--surface-2, #0f1729) !important;
    border-color: var(--border, #334155) !important;
    color: var(--text-1, #f1f5f9) !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option,
html.dark .select2-container--bootstrap-5 .select2-results__option {
    color: var(--text-2, #cbd5e1) !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted,
html.dark .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--primary, #2563eb) !important;
    color: #fff !important;
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option--selected,
html.dark .select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--surface-2, #0f1729) !important;
    color: var(--text-1, #f1f5f9) !important;
}

/* ===== SweetAlert2 (app dark theme; popup is outside main layout) ===== */
html[data-theme="dark"] .swal2-container,
html.dark .swal2-container {
    color-scheme: dark;
}

html[data-theme="dark"] .swal2-popup,
html.dark .swal2-popup {
    background: var(--surface, #1e293b) !important;
    color: var(--text-1, #f1f5f9) !important;
    border: 1px solid var(--border, #334155) !important;
}

html[data-theme="dark"] .swal2-title,
html.dark .swal2-title {
    color: var(--text-1, #f1f5f9) !important;
}

html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content,
html.dark .swal2-html-container,
html.dark .swal2-content {
    color: var(--text-2, #cbd5e1) !important;
}

html[data-theme="dark"] .swal2-html-container p,
html[data-theme="dark"] .swal2-html-container span,
html[data-theme="dark"] .swal2-html-container strong,
html.dark .swal2-html-container p,
html.dark .swal2-html-container span,
html.dark .swal2-html-container strong {
    color: inherit !important;
}

html[data-theme="dark"] .swal2-html-container a,
html.dark .swal2-html-container a {
    color: var(--primary, #60a5fa) !important;
}

html[data-theme="dark"] .swal2-html-container a:hover,
html.dark .swal2-html-container a:hover {
    color: var(--primary-lt, #93c5fd) !important;
}

html[data-theme="dark"] .swal2-close,
html.dark .swal2-close {
    color: var(--text-3, #94a3b8) !important;
}

html[data-theme="dark"] .swal2-close:hover,
html.dark .swal2-close:hover {
    color: var(--text-1, #f1f5f9) !important;
}

html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select,
html.dark .swal2-input,
html.dark .swal2-textarea,
html.dark .swal2-select {
    background: var(--surface-2, #0f1729) !important;
    border-color: var(--border, #334155) !important;
    color: var(--text-1, #f1f5f9) !important;
}

html[data-theme="dark"] .swal2-validation-message,
html.dark .swal2-validation-message {
    background: var(--surface-2, #0f1729) !important;
    color: var(--danger, #f87171) !important;
}

html[data-theme="dark"] .swal2-footer,
html.dark .swal2-footer {
    border-top-color: var(--border, #334155) !important;
    color: var(--text-3, #94a3b8) !important;
}

html[data-theme="dark"] .swal2-timer-progress-bar,
html.dark .swal2-timer-progress-bar {
    background: var(--primary, #2563eb) !important;
}

html[data-theme="dark"] .swal2-timer-progress-bar-container,
html.dark .swal2-timer-progress-bar-container {
    background: var(--border, #334155) !important;
}

/* Modals only — toasts use a narrow container; backdrop here looks like a vertical screen split */
html[data-theme="dark"] body:not(.swal2-toast-shown) div:where(.swal2-container).swal2-backdrop-show,
html.dark body:not(.swal2-toast-shown) div:where(.swal2-container).swal2-backdrop-show {
    background: rgba(15, 23, 42, 0.72) !important;
}

html[data-theme="dark"] body.swal2-toast-shown .swal2-container,
html[data-theme="dark"] body.swal2-toast-shown .swal2-container.swal2-backdrop-show,
html.dark body.swal2-toast-shown .swal2-container,
html.dark body.swal2-toast-shown .swal2-container.swal2-backdrop-show {
    background: transparent !important;
}

html[data-theme="dark"] .swal2-toast.swal2-popup,
html.dark .swal2-toast.swal2-popup {
    background: var(--surface, #1e293b) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .swal2-toast .swal2-title,
html.dark .swal2-toast .swal2-title {
    color: var(--text-1, #f1f5f9) !important;
}