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

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

/* ---------- 10. select2 ---------- */
/* select2's own CSS never sets text color on its dropdown options, so they
   inherit the page's light body text color in dark mode. That sits on
   select2's light-gray "currently selected" highlight (--option--selected,
   #ddd), making the selected option unreadable - force a yellow highlight
   so it stays visible. (Note: select2 also stamps aria-selected="true" on
   whichever row currently has keyboard/mouse focus - that's an ARIA
   bookkeeping attribute, not the actual selection, so it must not be used
   to key off the "selected" styling here.) */

[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-dropdown {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

    [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
    [data-bs-theme="dark"] .select2-container--default .select2-results__option {
        color: var(--bs-body-color);
    }

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-primary);
    color: #fff;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: #ffc107;
    color: #000;
}

/* ---------- 11. Quill editor toolbar ---------- */
/* quill.snow.css hardcodes toolbar icon strokes/fills and picker label text
   to light-theme grays (#444/#ccc) with no dark-mode variant, so the
   font/size dropdowns and formatting icons render dim and low-contrast
   against the dark toolbar background. Re-point them at the theme-aware
   vars, and darken the toolbar bar and the font/size picker dropdown panel
   (both white by default). */

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

[data-bs-theme="dark"] .ql-container.ql-snow {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ql-snow .ql-stroke {
    stroke: var(--bs-body-color);
}

[data-bs-theme="dark"] .ql-snow .ql-fill,
[data-bs-theme="dark"] .ql-snow .ql-stroke.ql-fill {
    fill: var(--bs-body-color);
}

[data-bs-theme="dark"] .ql-snow .ql-picker {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ql-snow .ql-picker-options {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .ql-snow .ql-picker-item {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover,
[data-bs-theme="dark"] .ql-snow .ql-toolbar button:focus,
[data-bs-theme="dark"] .ql-snow .ql-toolbar button.ql-active,
[data-bs-theme="dark"] .ql-snow .ql-toolbar .ql-picker-label:hover,
[data-bs-theme="dark"] .ql-snow .ql-toolbar .ql-picker-label.ql-active,
[data-bs-theme="dark"] .ql-snow .ql-toolbar .ql-picker-item:hover,
[data-bs-theme="dark"] .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--bs-primary);
}

    [data-bs-theme="dark"] .ql-snow .ql-toolbar button:hover .ql-stroke,
    [data-bs-theme="dark"] .ql-snow .ql-toolbar button:focus .ql-stroke,
    [data-bs-theme="dark"] .ql-snow .ql-toolbar button.ql-active .ql-stroke,
    [data-bs-theme="dark"] .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
    [data-bs-theme="dark"] .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
        stroke: var(--bs-primary);
    }

[data-bs-theme="dark"] .ql-snow .ql-tooltip {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: none;
}

    [data-bs-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
        background-color: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
        border-color: var(--bs-border-color);
    }