/* Dark theme: redefines the site.css :root variables, then restyles Bootstrap 4 and the third-party widgets that
   don't read those variables. Applied through <html data-theme="dark"> (set server-side from the theme cookie). */

[data-theme="dark"] {
    color-scheme: dark;

    --brand-theme: #FFFFFF;
    --default-color: #dee2e6;
    --disabled: #2b3035;
    --highlight-alt: #343a40;
    --highlight-alt-darker: #495057;
    --subtle-bg: #2b3035;
    --muted-text: #9aa3ab;
    --muted-icon: #6c757d;
    --a: #6ea8fe;
    --a-hover: #9ec5fe;

    --surface: #212529;
    --surface-subtle: #2b3035;
    --text-secondary: #adb5bd;
    --border-color: #495057;
    --border-light: #3d444b;
    --border-faint: #343a40;
    --border-sidebar: #343a40;
    --border-muted: #495057;
    --page-bg: #16191c;
    --ink: #ffffff;

    --primary-pale-bg: #1c3550;
    --primary-pale-color: #8bb9fe;
    --primary-soft-bg: #1c3550;
    --secondary-pale-bg: #2f3439;
    --secondary-pale-color: #adb5bd;
    --success-pale-bg: #17342a;
    --success-pale-color: #75b798;
    --warning-pale-bg: #3d3214;
    --warning-pale-color: #ffda6a;
    --danger-pale-bg: #3b1c21;
    --danger-pale-color: #ea868f;
    --dark-pale-bg: #2b3035;
    --dark-pale-color: #ced4da;
    --info-pale-bg: #123a40;
    --info-pale-color: #6edff6;
    --blue-pale-bg: #1c3350;
    --blue-pale-color: #9ec5fe;
    --purple-pale-bg: #2d2347;
    --purple-pale-color: #c5b3f0;
    --purple: #b39ddb;
    --success-card-bg: #1a2e22;
    --success-card-border: #24432f;
    --warning-card-bg: #332b14;
    --warning-card-border: #4d4020;
    --danger-card-bg: #331b1e;
    --danger-card-border: #52262b;
    --warning-strong-color: #ffc107;
    --warning-dark-color: #ffda6a;
    --warning-amber-color: #f0b36a;

    --theme: #212529;
    --theme-rgb: 33, 37, 41;
    --theme-navbar-text: #ffffff;
    --theme-navbar-text-rgb: 255, 255, 255;
    --button-option-bg-color: #ffffff;
    --button-option-text-color: #000000;
}

/* DataTables FixedColumns defines --dtfc_background: white on :root (and only re-themes it for :root.dark, a class we
   don't use); html[...] is more specific than :root, so this wins even though the library's CSS loads after this file. */
html[data-theme="dark"] {
    --dtfc_background: var(--surface);
}

[data-theme="dark"] body {
    background-color: var(--page-bg);
    color: var(--default-color);
}

[data-theme="dark"] a:not([class]) {
    color: var(--a);
}
    [data-theme="dark"] a:not([class]):hover {
        color: var(--a-hover);
    }

[data-theme="dark"] hr {
    border-top-color: var(--border-color);
}

/* ---- Bootstrap 4 ---- */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .popover,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .toast,
[data-theme="dark"] .jumbotron {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--default-color);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .popover-header {
    background-color: var(--surface-subtle);
    border-color: var(--border-color);
    color: var(--default-color);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}

[data-theme="dark"] .close {
    color: var(--default-color);
    text-shadow: none;
}

[data-theme="dark"] .dropdown-item {
    color: var(--default-color);
}
    [data-theme="dark"] .dropdown-item:hover,
    [data-theme="dark"] .dropdown-item:focus {
        background-color: var(--surface-subtle);
        color: var(--default-color);
    }
    [data-theme="dark"] .dropdown-item.disabled,
    [data-theme="dark"] .dropdown-item:disabled {
        color: var(--muted-icon);
    }

[data-theme="dark"] .dropdown-header {
    color: var(--muted-text);
}

[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--surface-subtle);
    color: var(--default-color);
}

[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    color: var(--default-color);
    border-color: var(--border-color);
}
    [data-theme="dark"] .table thead th {
        border-bottom-color: var(--border-color);
    }
    [data-theme="dark"] .table-bordered,
    [data-theme="dark"] .table-bordered td,
    [data-theme="dark"] .table-bordered th {
        border-color: var(--border-color);
    }
    [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, 0.04);
    }
    [data-theme="dark"] .table-hover tbody tr:hover {
        background-color: rgba(255, 255, 255, 0.075);
        color: var(--default-color);
    }
    [data-theme="dark"] .thead-light th,
    [data-theme="dark"] .table .thead-light th {
        background-color: var(--surface-subtle);
        border-color: var(--border-color);
        color: var(--default-color);
    }

[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .custom-file-label,
[data-theme="dark"] .input-group-text {
    background-color: var(--surface);
    border-color: var(--highlight-alt-darker);
    color: var(--default-color);
}
    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .custom-select:focus {
        background-color: var(--surface);
        color: var(--default-color);
    }
    [data-theme="dark"] .form-control:disabled,
    [data-theme="dark"] .form-control[readonly],
    [data-theme="dark"] .custom-select:disabled {
        background-color: var(--disabled);
        color: var(--text-secondary);
    }
    [data-theme="dark"] .form-control::placeholder {
        color: var(--muted-text);
    }
    [data-theme="dark"] .input-group-text {
        background-color: var(--surface-subtle);
    }

[data-theme="dark"] .custom-control-label::before {
    background-color: var(--surface);
    border-color: var(--highlight-alt-darker);
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}
    [data-theme="dark"] .nav-tabs .nav-link:hover,
    [data-theme="dark"] .nav-tabs .nav-link:focus {
        border-color: var(--border-color) var(--border-color) transparent;
    }
    [data-theme="dark"] .nav-tabs .nav-link.active,
    [data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
        background-color: var(--surface);
        border-color: var(--border-color) var(--border-color) var(--surface);
        color: var(--default-color);
    }

[data-theme="dark"] .page-link {
    background-color: var(--surface);
    border-color: var(--border-color);
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--muted-icon);
}
[data-theme="dark"] .page-link:hover {
    background-color: var(--surface-subtle);
}

[data-theme="dark"] .breadcrumb {
    background-color: var(--surface-subtle);
}

[data-theme="dark"] .progress {
    background-color: var(--surface-subtle);
}

[data-theme="dark"] .bg-white {
    background-color: var(--surface) !important;
}
[data-theme="dark"] .bg-light {
    background-color: var(--surface-subtle) !important;
}
[data-theme="dark"] .text-muted {
    color: var(--muted-text) !important;
}
[data-theme="dark"] .text-dark {
    color: var(--default-color) !important;
}
[data-theme="dark"] .text-primary {
    color: var(--a) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-right,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-light {
    background-color: var(--surface-subtle);
    border-color: var(--border-color);
    color: var(--default-color);
}
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-outline-secondary {
    color: var(--default-color);
    border-color: var(--text-secondary);
}
    [data-theme="dark"] .btn-outline-dark:hover,
    [data-theme="dark"] .btn-outline-secondary:hover {
        background-color: var(--text-secondary);
        color: var(--surface);
    }
[data-theme="dark"] .btn-link {
    color: var(--a);
}

[data-theme="dark"] .badge-light {
    background-color: var(--surface-subtle);
    color: var(--default-color);
}

[data-theme="dark"] .alert-primary { background-color: var(--primary-pale-bg); border-color: var(--primary-pale-color); color: var(--primary-pale-color); }
[data-theme="dark"] .alert-secondary { background-color: var(--secondary-pale-bg); border-color: var(--secondary-pale-color); color: var(--secondary-pale-color); }
[data-theme="dark"] .alert-success { background-color: var(--success-pale-bg); border-color: var(--success-pale-color); color: var(--success-pale-color); }
[data-theme="dark"] .alert-warning { background-color: var(--warning-pale-bg); border-color: var(--warning-pale-color); color: var(--warning-pale-color); }
[data-theme="dark"] .alert-danger { background-color: var(--danger-pale-bg); border-color: var(--danger-pale-color); color: var(--danger-pale-color); }
[data-theme="dark"] .alert-info { background-color: var(--info-pale-bg); border-color: var(--info-pale-color); color: var(--info-pale-color); }
[data-theme="dark"] .alert-light,
[data-theme="dark"] .alert-dark { background-color: var(--dark-pale-bg); border-color: var(--dark-pale-color); color: var(--dark-pale-color); }

[data-theme="dark"] .table-primary, [data-theme="dark"] .table-primary > td, [data-theme="dark"] .table-primary > th { background-color: var(--primary-pale-bg); }
[data-theme="dark"] .table-success, [data-theme="dark"] .table-success > td, [data-theme="dark"] .table-success > th { background-color: var(--success-pale-bg); }
[data-theme="dark"] .table-warning, [data-theme="dark"] .table-warning > td, [data-theme="dark"] .table-warning > th { background-color: var(--warning-pale-bg); }
[data-theme="dark"] .table-danger, [data-theme="dark"] .table-danger > td, [data-theme="dark"] .table-danger > th { background-color: var(--danger-pale-bg); }
[data-theme="dark"] .table-info, [data-theme="dark"] .table-info > td, [data-theme="dark"] .table-info > th { background-color: var(--info-pale-bg); }

/* ---- site.css rules whose light-mode colour has no dark counterpart as a plain variable swap ---- */
[data-theme="dark"] .profile-square-btn {
    color: var(--default-color) !important;
}
[data-theme="dark"] .indicator-pill.btn-outline-dark:hover .app-badge {
    color: var(--dark-pale-color);
}
[data-theme="dark"] .brand-name {
    color: var(--brand-theme);
}

/* ---- Select2 ---- */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--surface);
    border-color: var(--highlight-alt-darker);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--default-color);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
[data-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--muted-text);
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-secondary) transparent transparent transparent;
}
[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-secondary) transparent;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__clear,
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-secondary);
}
[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--highlight-alt);
    border-color: var(--highlight-alt-darker);
    color: var(--default-color);
}
[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--disabled) !important;
}
[data-theme="dark"] .select2-dropdown {
    background-color: var(--surface);
    border-color: var(--highlight-alt-darker);
    color: var(--default-color);
}
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--surface);
    border-color: var(--highlight-alt-darker);
    color: var(--default-color);
}
[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--highlight-alt);
}
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary);
    color: var(--on-primary);
}
[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled=true] {
    color: var(--muted-icon);
}

/* ---- flatpickr ---- */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.6);
}
    [data-theme="dark"] .flatpickr-calendar.arrowTop::before,
    [data-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface); }
    [data-theme="dark"] .flatpickr-calendar.arrowBottom::before,
    [data-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface); }
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] span.flatpickr-weekday,
[data-theme="dark"] .flatpickr-day {
    color: var(--default-color);
    fill: var(--default-color);
    background: transparent;
}
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background-color: var(--surface);
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--default-color);
}
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled {
    color: var(--muted-icon);
}
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day.inRange {
    background: var(--highlight-alt);
    border-color: var(--highlight-alt);
}
[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--primary);
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}
[data-theme="dark"] .flatpickr-monthSelect-month {
    color: var(--default-color);
}
    [data-theme="dark"] .flatpickr-monthSelect-month:hover,
    [data-theme="dark"] .flatpickr-monthSelect-month.today {
        background: var(--highlight-alt);
    }
    [data-theme="dark"] .flatpickr-monthSelect-month.selected {
        background: var(--primary);
        color: var(--on-primary);
    }

/* ---- Coloris ---- */
[data-theme="dark"] .clr-picker {
    background-color: var(--surface);
}
[data-theme="dark"] .clr-picker input.clr-color {
    background-color: var(--surface);
    border-color: var(--highlight-alt-darker);
    color: var(--default-color);
}

/* ---- FullCalendar ---- */
[data-theme="dark"] .fc {
    --fc-page-bg-color: var(--surface);
    --fc-neutral-bg-color: var(--surface-subtle);
    --fc-neutral-text-color: var(--text-secondary);
    --fc-border-color: var(--border-color);
    --fc-list-event-hover-bg-color: var(--surface-subtle);
    --fc-today-bg-color: rgba(255, 220, 40, 0.12);
    --fc-non-business-color: rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .fc a {
    color: inherit;
}

/* ---- Org chart ---- */
[data-theme="dark"] .orgchart {
    background-image: none;
    background-color: transparent;
}
    [data-theme="dark"] .orgchart .node .content {
        background-color: var(--surface);
        color: var(--default-color);
    }