/*
 * Site-wide dark mode, driven purely by the OS/browser preference
 * (prefers-color-scheme) - no in-page toggle. Loaded once from
 * bootstrap/header.php, which every app on the site includes, so this is
 * the shared baseline every app inherits automatically.
 *
 * Covers the shared chrome (body, footer, navbar dropdown menus) plus the
 * common Bootstrap 3 component patterns (panels, tables, forms, buttons,
 * links, pre/code) most apps build their pages from. Bootstrap 3 itself has
 * no native dark mode, so these are plain overrides using !important - each
 * app's own stylesheet load order/specificity can't be relied on here, so
 * !important is used deliberately rather than as a last resort.
 *
 * Apps with unusual markup, inline styles, or their own conflicting CSS may
 * still need individual follow-up fixes - this is a shared baseline, not a
 * guarantee that every app looks correct without further spot-checking.
 */

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a !important;
        color: #ddd !important;
    }
    #footer {
        background-color: #1e1e1e !important;
        color: #aaa !important;
    }

    a {
        color: #6ab0f3 !important;
    }
    a:hover,
    a:focus {
        color: #8cc4f7 !important;
    }

    .navbar-inverse .dropdown-menu {
        background-color: #222 !important;
        border-color: #444 !important;
    }
    .navbar-inverse .dropdown-menu > li > a {
        color: #ddd !important;
    }
    .navbar-inverse .dropdown-menu > li > a:hover,
    .navbar-inverse .dropdown-menu > li > a:focus {
        background-color: #333 !important;
        color: #fff !important;
    }
    .navbar-inverse .dropdown-menu .dropdown-header {
        color: #888 !important;
    }
    .navbar-inverse .dropdown-menu .divider {
        background-color: #444 !important;
    }

    .panel {
        background-color: #262626 !important;
        border-color: #3a3a3a !important;
    }
    .panel-default > .panel-heading {
        background-color: #2f2f2f !important;
        border-color: #3a3a3a !important;
        color: #eee !important;
    }
    .panel-title,
    .panel-body,
    label {
        color: #ddd !important;
    }

    .table {
        background-color: #262626 !important;
        color: #ddd !important;
    }
    .table > thead > tr > th,
    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table-bordered,
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > td {
        border-color: #3a3a3a !important;
    }
    .table-striped > tbody > tr:nth-of-type(odd),
    .table-striped > tbody > tr:nth-of-type(odd) > td,
    .table-striped > tbody > tr:nth-of-type(odd) > th {
        background-color: #3a3a3a !important;
    }

    input,
    select,
    textarea,
    .form-control {
        background-color: #333 !important;
        color: #eee !important;
        border-color: #555 !important;
    }
    input::placeholder,
    textarea::placeholder {
        color: #999 !important;
    }

    /*
     * jQuery UI widgets (spinner/slider/autocomplete/datepicker - used by several
     * apps, e.g. blueprint's ME/TE/facility-tax spinners). jQuery UI's own theme
     * deliberately makes the *inner* input of a spinner borderless so only the
     * *outer* .ui-widget-content wrapper shows a border; the generic `input` rule
     * above (being !important) was overriding that and adding a second border
     * inside the wrapper's border, making it look too wide/doubled. Re-borderless
     * the inner input and theme the wrapper/buttons instead.
     */
    .ui-widget-content {
        background: #333 !important;
        border-color: #555 !important;
        color: #ddd !important;
    }
    .ui-widget-header {
        background: #3a3a3a !important;
        border-color: #555 !important;
        color: #eee !important;
    }
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        background: #3a3a3a !important;
        border-color: #555 !important;
        color: #ddd !important;
    }
    .ui-state-hover,
    .ui-widget-content .ui-state-hover,
    .ui-widget-header .ui-state-hover,
    .ui-state-focus,
    .ui-widget-content .ui-state-focus,
    .ui-widget-header .ui-state-focus {
        background: #4a4a4a !important;
        border-color: #777 !important;
        color: #fff !important;
    }
    .ui-spinner-input {
        border: none !important;
        background: transparent !important;
        color: #eee !important;
    }
    .ui-icon {
        filter: invert(1);
    }

    .btn-default,
    button,
    button.btn-default {
        background-color: #3a3a3a !important;
        color: #eee !important;
        border-color: #555 !important;
    }
    button.btn-primary,
    .btn-primary {
        background-color: #204d74 !important;
        color: #fff !important;
        border-color: #122b40 !important;
    }

    pre,
    code {
        background-color: #1e1e1e !important;
        color: #ddd !important;
        border-color: #3a3a3a !important;
    }

    /*
     * Vanilla (non-Bootstrap) jQuery DataTables theme - several older apps load
     * jquery.dataTables.css directly (not the Bootstrap-integration variant) and
     * initialize .dataTable() on a plain table. That theme hardcodes light
     * row-striping and sorted-column tint colors via these exact class names
     * (e.g. implants, lpstore), which the Bootstrap-scoped rules above don't
     * touch at all.
     */
    table.dataTable,
    table.dataTable td,
    table.dataTable th {
        color: #ddd !important;
    }
    table.dataTable thead th,
    table.dataTable tfoot th {
        border-color: #444 !important;
    }
    table.dataTable tr.odd,
    table.dataTable tr.odd td.sorting_1,
    table.dataTable tr.odd td.sorting_2,
    table.dataTable tr.odd td.sorting_3 {
        background-color: #333 !important;
    }
    table.dataTable tr.even,
    table.dataTable tr.even td.sorting_1,
    table.dataTable tr.even td.sorting_2,
    table.dataTable tr.even td.sorting_3 {
        background-color: #262626 !important;
    }

    /*
     * Status-highlight cells (.good/.ok/.bad/.hover - a convention duplicated
     * across several apps, e.g. implants, lpstore) keep their semantic light
     * background colors in dark mode. lightgreen/yellow are light enough that
     * the default light table text becomes unreadable on them; darken the
     * text there specifically. red/darkgrey (.bad/.hover) already contrast
     * fine with light text, so they're left alone.
     */
    .good,
    .ok,
    table.dataTable td.good,
    table.dataTable td.ok {
        color: #111 !important;
    }
}