/* ---------- 1. Layout chrome ---------- */

/* Logo is a JPG: black text + red accent on a solid white background, no
   transparency. invert+hue-rotate flips it to white text/red accent on black
   (keeping the red hue), then mix-blend-mode:lighten drops the now-black
   background out in favor of whatever is actually behind it (the header's
   background color), so it blends in instead of showing as a black box. */
[data-bs-theme="dark"] #logo {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: lighten;
}

/* ---------- 2. Bootstrap literal color utilities used as panel backgrounds ---------- */

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

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

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

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

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

/* ---------- 3. Common hardcoded inline colors used for panels/highlights ---------- */
/* (only matches non-!important inline styles - author !important inline styles
   can't be overridden from a stylesheet and are fixed directly in the views) */

[data-bs-theme="dark"] [style*="background-color:lightblue"],
[data-bs-theme="dark"] [style*="background-color: lightblue"] {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] [style*="background-color:#f8f9fa"],
[data-bs-theme="dark"] [style*="background-color: #f8f9fa"],
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"] {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] [style*="background-color:#e9ecef"],
[data-bs-theme="dark"] [style*="background-color: #e9ecef"] {
    background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] [style*="background-color:#f0f0f0"],
[data-bs-theme="dark"] [style*="background-color: #f0f0f0"] {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] [style*="background-color:white"],
[data-bs-theme="dark"] [style*="background-color: white"],
[data-bs-theme="dark"] [style*="background-color:#fff"],
[data-bs-theme="dark"] [style*="background-color: #fff"],
[data-bs-theme="dark"] [style*="background-color:#ffffff"],
[data-bs-theme="dark"] [style*="background-color: #ffffff"] {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] [style*="background-color:#fff3cd"],
[data-bs-theme="dark"] [style*="background-color: #fff3cd"] {
    background-color: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning-border-subtle) !important;
}

[data-bs-theme="dark"] [style*="background-color:#d1ecf1"],
[data-bs-theme="dark"] [style*="background-color: #d1ecf1"] {
    background-color: var(--bs-info-bg-subtle) !important;
    border-color: var(--bs-info-border-subtle) !important;
}

[data-bs-theme="dark"] [style*="color:#333"],
[data-bs-theme="dark"] [style*="color: #333"],
[data-bs-theme="dark"] [style*="color:black"],
[data-bs-theme="dark"] [style*="color: black"] {
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] [style*="color:#666"],
[data-bs-theme="dark"] [style*="color: #666"] {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] [style*="color:#856404"],
[data-bs-theme="dark"] [style*="color: #856404"] {
    color: var(--bs-warning-text-emphasis) !important;
}

[data-bs-theme="dark"] [style*="color:#0c5460"],
[data-bs-theme="dark"] [style*="color: #0c5460"] {
    color: var(--bs-info-text-emphasis) !important;
}

/* ---------- 4. DataTables ---------- */

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_processing {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dataTables_wrapper .paginate_button {
    color: var(--bs-body-color) !important;
    border-color: transparent;
}

[data-bs-theme="dark"] .dataTables_wrapper .paginate_button.current,
[data-bs-theme="dark"] .dataTables_wrapper .paginate_button.current:hover {
    color: #fff !important;
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .paginate_button:hover {
    color: #fff !important;
    background: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .dataTables_wrapper .paginate_button.disabled,
[data-bs-theme="dark"] .dataTables_wrapper .paginate_button.disabled:hover,
[data-bs-theme="dark"] .dataTables_wrapper .paginate_button.disabled:active {
    color: var(--bs-secondary-color) !important;
}

/* ---------- 5. jQuery UI (datepicker / timepicker) ---------- */

[data-bs-theme="dark"] .ui-widget-content {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ui-widget-header {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ui-state-default,
[data-bs-theme="dark"] .ui-widget-content .ui-state-default {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ui-state-hover,
[data-bs-theme="dark"] .ui-widget-content .ui-state-hover,
[data-bs-theme="dark"] .ui-state-active,
[data-bs-theme="dark"] .ui-widget-content .ui-state-active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .ui-icon {
    filter: invert(1);
}

[data-bs-theme="dark"] .ui-datepicker-title select {
    color: #000;
}

/* ---------- 6. bootstrap-multiselect ---------- */

[data-bs-theme="dark"] .multiselect-container.dropdown-menu {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .multiselect-container > li > a,
[data-bs-theme="dark"] .multiselect-container > li > label {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .multiselect-container > li > a:hover,
[data-bs-theme="dark"] .multiselect-container > li > a:focus {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Filter search input rendered inside the dropdown by enableFiltering: true */
[data-bs-theme="dark"] .multiselect-container .multiselect-filter > .input-group > input.form-control,
[data-bs-theme="dark"] .multiselect-container .multiselect-filter input[type="text"] {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .multiselect-container .multiselect-filter > .input-group > input.form-control::placeholder,
[data-bs-theme="dark"] .multiselect-container .multiselect-filter input[type="text"]::placeholder {
    color: var(--bs-secondary-color);
}

/* Clear/reset button inside the filter input group */
[data-bs-theme="dark"] .multiselect-container .multiselect-filter .input-group-text,
[data-bs-theme="dark"] .multiselect-container .multiselect-filter .btn {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* Non-matching (greyed-out) items when filter is active */
[data-bs-theme="dark"] .multiselect-container > li.multiselect-filter-option {
    color: var(--bs-secondary-color);
}

/* Selected (highlighted) item in the open dropdown */
[data-bs-theme="dark"] .multiselect-container > li.active > a,
[data-bs-theme="dark"] .multiselect-container > li > a.dropdown-item:hover,
[data-bs-theme="dark"] .multiselect-container > li > a.dropdown-item:focus {
    background-color: var(--bs-primary);
    color: #fff;
}

/* ---------- 7. Dropzone ---------- */

[data-bs-theme="dark"] .dropzone {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropzone:hover {
    background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .dropzone .dz-message,
[data-bs-theme="dark"] .dropzone .dz-message * {
    color: var(--bs-body-color);
}

/* ---------- 8. Outline buttons ---------- */
/* .btn-outline-secondary (and friends) hardcode their color from Cerulean's
   base --bs-secondary/--bs-dark/--bs-light, which are never redefined per
   theme - so the button never actually gets tuned for either light or dark
   backgrounds. Route it through the vars that *are* theme-aware instead.
   Cerulean also ships a SEPARATE literal rule - `.btn-outline-secondary,
   .btn-secondary { color: rgb(73, 80, 87); }` - that sets `color` directly
   and bypasses the --bs-btn-color variable entirely, so the variable
   overrides above are not enough on their own; `color`/`border-color` have
   to be set directly here too to actually win. */

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-border-color: var(--bs-border-color);
    color: var(--bs-secondary-color) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:active {
    color: var(--bs-body-color) !important;
}

/* ---------- 9. Contextual table variants ---------- */
/* .table-primary/.table-light/etc. hardcode fixed light-theme hex colors
   (e.g. .table-light is always #f8f9fa bg + black text) - never redefined
   per theme, so they render as solid light/white bars in dark mode. Map
   each to the matching dark-theme -bg-subtle/-text-emphasis/-border-subtle
   variables that are already defined under [data-bs-theme="dark"]. */

[data-bs-theme="dark"] .table-primary,
[data-bs-theme="dark"] .table-secondary,
[data-bs-theme="dark"] .table-success,
[data-bs-theme="dark"] .table-info,
[data-bs-theme="dark"] .table-warning,
[data-bs-theme="dark"] .table-danger,
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-striped-color: var(--bs-emphasis-color);
    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-hover-color: var(--bs-emphasis-color);
    color: var(--bs-table-color);
}

[data-bs-theme="dark"] .table-primary { --bs-table-bg: var(--bs-primary-bg-subtle); --bs-table-border-color: var(--bs-primary-border-subtle); --bs-table-striped-bg: var(--bs-primary-bg-subtle); --bs-table-active-bg: var(--bs-primary-border-subtle); --bs-table-hover-bg: var(--bs-primary-border-subtle); }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: var(--bs-secondary-bg-subtle); --bs-table-border-color: var(--bs-secondary-border-subtle); --bs-table-striped-bg: var(--bs-secondary-bg-subtle); --bs-table-active-bg: var(--bs-secondary-border-subtle); --bs-table-hover-bg: var(--bs-secondary-border-subtle); }
[data-bs-theme="dark"] .table-success { --bs-table-bg: var(--bs-success-bg-subtle); --bs-table-border-color: var(--bs-success-border-subtle); --bs-table-striped-bg: var(--bs-success-bg-subtle); --bs-table-active-bg: var(--bs-success-border-subtle); --bs-table-hover-bg: var(--bs-success-border-subtle); }
[data-bs-theme="dark"] .table-info { --bs-table-bg: var(--bs-info-bg-subtle); --bs-table-border-color: var(--bs-info-border-subtle); --bs-table-striped-bg: var(--bs-info-bg-subtle); --bs-table-active-bg: var(--bs-info-border-subtle); --bs-table-hover-bg: var(--bs-info-border-subtle); }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: var(--bs-warning-bg-subtle); --bs-table-border-color: var(--bs-warning-border-subtle); --bs-table-striped-bg: var(--bs-warning-bg-subtle); --bs-table-active-bg: var(--bs-warning-border-subtle); --bs-table-hover-bg: var(--bs-warning-border-subtle); }
[data-bs-theme="dark"] .table-danger { --bs-table-bg: var(--bs-danger-bg-subtle); --bs-table-border-color: var(--bs-danger-border-subtle); --bs-table-striped-bg: var(--bs-danger-bg-subtle); --bs-table-active-bg: var(--bs-danger-border-subtle); --bs-table-hover-bg: var(--bs-danger-border-subtle); }
[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--bs-tertiary-bg); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-secondary-bg); --bs-table-active-bg: var(--bs-secondary-bg); --bs-table-hover-bg: var(--bs-secondary-bg); }