/* =========================================================
   GLOBAL DARK MODE UI FIX (Overrides Bootstrap & Hardcoded Styles)
   ========================================================= */

/* Background Overrides */
html.dark .bg-white,
html.dark .bg-light,
html.dark .bg-body {
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
}

/* Text Overrides */
html.dark .text-dark,
html.dark .text-black,
html.dark .text-body {
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}

html.dark .text-muted,
html.dark .text-secondary {
    color: var(--text-muted, var(--text-secondary, #94a3b8)) !important;
}

/* Border Overrides */
html.dark .border,
html.dark .border-top,
html.dark .border-bottom,
html.dark .border-start,
html.dark .border-end,
html.dark .border-light,
html.dark .border-secondary {
    border-color: var(--card-border, var(--border, #334155)) !important;
}

/* Shadow Overrides */
html.dark .shadow-sm {
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.2)) !important;
}

html.dark .shadow {
    box-shadow: var(--shadow-md, var(--card-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.2))) !important;
}

html.dark .shadow-lg {
    box-shadow: var(--shadow-lg, var(--card-shadow-hover, 0 10px 15px -3px rgba(0, 0, 0, 0.3))) !important;
}

/* Table Overrides */
html.dark .table, 
html.dark .table>tbody, 
html.dark .table>tbody>tr>td, 
html.dark .table>thead, 
html.dark .table>thead>tr>th,
html.dark table.dataTable,
html.dark table.dataTable tbody tr {
    background-color: transparent !important;
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
    border-color: var(--card-border, var(--border, #334155)) !important;
}

html.dark .table>thead>tr>th,
html.dark .table-light th,
html.dark .table-light td {
    background-color: var(--table-thead-bg, var(--surface-2, rgba(255,255,255,0.05))) !important;
    color: var(--text-muted, var(--text-secondary, #94a3b8)) !important;
}

html.dark .table-hover>tbody>tr:hover>* {
    background-color: var(--sidebar-hover-bg, var(--sidebar-link-hover, rgba(124, 58, 237, 0.1))) !important;
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}

html.dark .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(255,255,255,0.02) !important;
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}

/* Form Overrides */
html.dark .form-control,
html.dark .form-select,
html.dark textarea,
html.dark input {
    background-color: var(--input-bg, #1e293b) !important;
    border-color: var(--input-border, #334155) !important;
    color: var(--input-color, var(--text-primary, #f8fafc)) !important;
}

html.dark .form-control:focus,
html.dark .form-select:focus {
    background-color: var(--input-bg, #1e293b) !important;
    border-color: var(--input-focus-border, var(--brand-purple, #7c3aed)) !important;
    box-shadow: 0 0 0 0.25rem var(--input-focus-shadow, rgba(124, 58, 237, 0.25)) !important;
}

html.dark .input-group-text {
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
    border-color: var(--input-border, #334155) !important;
    color: var(--text-muted, var(--text-secondary, #94a3b8)) !important;
}

/* Form Labels that are accidentally text-dark */
html.dark label.text-dark {
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}

/* Card Overrides */
html.dark .card {
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
    border-color: var(--card-border, var(--border, #334155)) !important;
}
html.dark .card-header,
html.dark .card-footer {
    background-color: var(--table-thead-bg, var(--surface-2, rgba(255,255,255,0.05))) !important;
    border-color: var(--card-border, var(--border, #334155)) !important;
}

/* Modal Overrides */
html.dark .modal-content {
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
    border-color: var(--card-border, var(--border, #334155)) !important;
}
html.dark .modal-header,
html.dark .modal-footer {
    border-color: var(--card-border, var(--border, #334155)) !important;
}

/* Dropdown Overrides */
html.dark .dropdown-menu {
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
    border-color: var(--card-border, var(--border, #334155)) !important;
}
html.dark .dropdown-item {
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}
html.dark .dropdown-item:hover {
    background-color: var(--sidebar-hover-bg, var(--sidebar-link-hover, rgba(124, 58, 237, 0.1))) !important;
    color: var(--primary-color, var(--brand-purple, #7c3aed)) !important;
}

/* List Group Overrides */
html.dark .list-group-item {
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
    border-color: var(--card-border, var(--border, #334155)) !important;
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}

/* Breadcrumb / Nav Tabs Overrides */
html.dark .nav-tabs {
    border-bottom-color: var(--card-border, var(--border, #334155)) !important;
}
html.dark .nav-tabs .nav-link {
    color: var(--text-muted, var(--text-secondary, #94a3b8)) !important;
}
html.dark .nav-tabs .nav-link.active,
html.dark .nav-tabs .nav-item.show .nav-link {
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
    border-color: var(--card-border, var(--border, #334155)) var(--card-border, var(--border, #334155)) var(--card-bg, var(--surface, #1e293b)) !important;
}

/* Pagination Overrides */
html.dark .page-item .page-link {
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
    border-color: var(--card-border, var(--border, #334155)) !important;
    color: var(--text-muted, var(--text-secondary, #94a3b8)) !important;
}
html.dark .page-item.active .page-link {
    background-color: var(--primary-color, var(--brand-purple, #7c3aed)) !important;
    border-color: var(--primary-color, var(--brand-purple, #7c3aed)) !important;
    color: #fff !important;
}
html.dark .page-item.disabled .page-link {
    background-color: var(--bg-color, var(--bg, #0b111e)) !important;
    border-color: var(--card-border, var(--border, #334155)) !important;
    color: var(--text-muted, var(--text-secondary, #94a3b8)) !important;
}

/* Alerts Specific fixes */
html.dark .alert {
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}

/* Accordion */
html.dark .accordion-item {
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
    border-color: var(--card-border, var(--border, #334155)) !important;
}
html.dark .accordion-button {
    background-color: var(--card-bg, var(--surface, #1e293b)) !important;
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}
html.dark .accordion-button:not(.collapsed) {
    background-color: var(--sidebar-hover-bg, var(--sidebar-link-hover, rgba(124, 58, 237, 0.1))) !important;
    color: var(--primary-color, var(--brand-purple, #7c3aed)) !important;
}
html.dark .accordion-button::after {
    filter: invert(1);
}

/* Fix text colors inside elements that have bg-white or bg-light in light mode */
html.dark .bg-white .text-dark,
html.dark .bg-light .text-dark {
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}

/* Typography & Headings Overrides */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark .h1,
html.dark .h2,
html.dark .h3,
html.dark .h4,
html.dark .h5,
html.dark .h6 {
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}

/* Rich Text / CMS Content Inline Style Overrides */
/* This forces inline colors generated by WYSIWYG editors to be readable in dark mode */
html.dark .page-content *,
html.dark .ck-content *,
html.dark .rich-text *,
html.dark [class*="content"] p,
html.dark [class*="content"] span,
html.dark [class*="content"] h1,
html.dark [class*="content"] h2,
html.dark [class*="content"] h3,
html.dark [class*="content"] h4,
html.dark [class*="content"] h5,
html.dark [class*="content"] h6,
html.dark [class*="content"] li {
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
    background-color: transparent !important;
}

/* Specific fix for elements that might have hardcoded dark colors */
html.dark [style*="color: rgb(0, 0, 0)"],
html.dark [style*="color: #000"],
html.dark [style*="color:#000"],
html.dark [style*="color: rgb(51, 51, 51)"],
html.dark [style*="color: #333"],
html.dark [style*="color:#333"],
html.dark [style*="color: rgb(33, 37, 41)"],
html.dark [style*="color: #212529"],
html.dark [style*="color:#212529"] {
    color: var(--text-primary, var(--text-dark, #f8fafc)) !important;
}