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

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"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] a,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark p,
html.dark span,
html.dark label,
html.dark a {
    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;
}

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

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