/* Light and dark themes. The theme lives on <html data-theme="light|dark">, set before first paint by
   the snippet at the top of base.html and switched by the sun/moon toggle in the navbar
   (project.js). Light is the stock Bootstrap look, so only the dark half overrides anything; the
   tokens here are the few colours script needs to read (Plotly). */

:root {
  color-scheme: light;

  /* Plotly's own defaults, so light-mode charts look exactly as they always have. */
  --bi-chart-paper: #fff;
  --bi-chart-ink: #444;
  --bi-chart-grid: #eee;
  --bi-chart-axis: #444;
  --bi-chart-rule: rgba(0, 0, 0, 0.12);
  --bi-chart-button: #eee;
  --bi-chart-button-active: #d4d4d4;
  --bi-chart-modebar: rgba(68, 68, 68, 0.3);
  --bi-chart-modebar-active: rgba(68, 68, 68, 0.7);
  --bi-chart-modebar-bg: rgba(255, 255, 255, 0.5);
}

/* ---------- The toggle ----------
   The Django admin's: a plain nav link that is a button, showing the current mode -- the half circle
   for auto (follow the system), the sun, the moon. Colour and padding come from the navbar's own
   nav-link rules. */
.theme-toggle {
  border: 0;
  background: none;
  cursor: pointer;
}

.theme-toggle:focus {
  outline: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid rgba(0, 123, 255, 0.5);
  outline-offset: -2px;
}

/* A click leaves the button focused, and Bootstrap darkens a focused nav link -- out of step with
   the icons beside it until you click elsewhere. Keep that for keyboard focus only. */
.navbar-light .navbar-nav .theme-toggle:focus:not(:focus-visible):not(:hover) {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .navbar-light .navbar-nav .theme-toggle:focus:not(:focus-visible):not(:hover) {
  color: rgba(255, 255, 255, 0.6);
}

.theme-toggle__icon {
  display: none;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  vertical-align: -2px;
}

[data-theme-mode="auto"] .theme-toggle__icon--auto,
[data-theme-mode="light"] .theme-toggle__icon--light,
[data-theme-mode="dark"] .theme-toggle__icon--dark {
  display: inline-block;
}

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

  --bi-bg: #121614;
  --bi-surface: #1a1f1c;
  --bi-surface-2: #212724;
  --bi-input: #151a17;
  --bi-border: #323a36;
  --bi-border-strong: #414a45;
  --bi-text: #dfe5e1;
  --bi-muted: #8d9791;
  --bi-link: #5fb0e8;
  --bi-link-hover: #8cc8f0;
  --bi-hover: rgba(255, 255, 255, 0.05);

  --bi-chart-paper: #1a1f1c;
  --bi-chart-ink: #b4bdb8;
  --bi-chart-grid: #2a312d;
  --bi-chart-axis: #6f7974;
  --bi-chart-rule: rgba(255, 255, 255, 0.14);
  --bi-chart-button: #2a312d;
  --bi-chart-button-active: #414a45;
  --bi-chart-modebar: rgba(223, 229, 225, 0.35);
  --bi-chart-modebar-active: rgba(223, 229, 225, 0.8);
  --bi-chart-modebar-bg: rgba(26, 31, 28, 0.5);

  /* The staff pages' palette (project.css), turned over: inks light, tints dark, accents lifted so
     they hold their contrast on the dark surface. */
  --people-ink: #e3e8e5;
  --people-ink-rgb: 227, 232, 229;
  --people-ink-2: #b4bdb8;
  --people-ink-3: #8a948e;
  --people-ink-4: #6f7974;
  --people-ink-5: #67716b;
  --people-mute: #59625d;
  --people-mute-2: #6c7670;
  --people-dotted: #4a534e;
  --people-line: #3d4641;
  --people-chip-line: #3a423e;
  --people-rest: #3a433e;
  --people-rule: #323a36;
  --people-hair: #2a312d;
  --people-avatar: #2b3531;
  --people-on: #2c3330;
  --people-tint: #262c29;
  --people-tint-2: #29302c;
  --people-tint-3: #232926;
  --people-group: #1f2522;
  --people-panel: #1f2522;
  --people-surface: #1a1f1c;
  --people-shadow-rgb: 0, 0, 0;
  --people-mine-tag: #2a302d;
  --people-mine-tag-ink: #9aa39e;
  --people-teal: #34a0a1;
  --people-teal-tint: #1e4142;
  --people-teal-soft: #1b3637;
  --people-teal-wash: #1b3433;
  --people-under: #1e4142;
  --people-under-ink: #7fcfd0;
  --people-rust: #d4744b;
  --people-over: #48291d;
  --people-over-ink: #f0a98a;
  --people-saved: #183a2e;
  --people-saved-ink: #8fd6b5;
  --cluster-none: #59625d;
}

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

/* :where() keeps these at Bootstrap's own weight, so any class that colours its links still wins. */
:where([data-theme="dark"]) a {
  color: var(--bi-link);
}

:where([data-theme="dark"]) a:hover {
  color: var(--bi-link-hover);
}

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

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

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

[data-theme="dark"] .bg-light {
  background-color: var(--bi-surface-2) !important;
}

[data-theme="dark"] .bg-white {
  background-color: var(--bi-surface) !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(--bi-border) !important;
}

/* Navbar: navbar-light's dark text on our dark bar. */
[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .navbar-light .navbar-brand:hover {
  color: var(--bi-text);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar-light .navbar-text {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus,
[data-theme="dark"] .navbar-light .navbar-nav .show > .nav-link,
[data-theme="dark"] .navbar-light .navbar-nav .active > .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

/* The logo's white "E" is the page showing through, and its black and dark-red parts vanish on
   the dark bar: keep the official colours on a small white tile rather than recolouring them. */
[data-theme="dark"] #header-logo {
  padding: 3px 4px;
  border-radius: 6px;
  background-color: #fff;
}

[data-theme="dark"] .navbar-light .navbar-toggler {
  border-color: var(--bi-border-strong);
}

[data-theme="dark"] .navbar-light .navbar-toggler-icon {
  filter: invert(1);
}

/* Cards */
[data-theme="dark"] .card {
  border-color: var(--bi-border);
  background-color: var(--bi-surface);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  border-color: var(--bi-border);
  background-color: rgba(255, 255, 255, 0.03);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
  border-color: var(--bi-border-strong);
  background-color: var(--bi-surface-2);
  color: var(--bi-text);
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .dropdown-item-text {
  color: var(--bi-text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.07);
  color: #fff;
}

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

[data-theme="dark"] .dropdown-divider {
  border-top-color: var(--bi-border-strong);
}

/* Tables */
[data-theme="dark"] .table {
  color: var(--bi-text);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table tbody + tbody,
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
  border-color: var(--bi-border);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--bi-hover);
  color: var(--bi-text);
}

[data-theme="dark"] .table .thead-light th {
  border-color: var(--bi-border);
  background-color: var(--bi-surface-2);
  color: var(--bi-text);
}

[data-theme="dark"] .table-active,
[data-theme="dark"] .table-active > th,
[data-theme="dark"] .table-active > td {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-secondary > th,
[data-theme="dark"] .table-secondary > td {
  background-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .table-success,
[data-theme="dark"] .table-success > th,
[data-theme="dark"] .table-success > td {
  background-color: rgba(40, 167, 69, 0.22);
}

[data-theme="dark"] .table-danger,
[data-theme="dark"] .table-danger > th,
[data-theme="dark"] .table-danger > td {
  background-color: rgba(220, 53, 69, 0.22);
}

[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > th,
[data-theme="dark"] .table-warning > td {
  background-color: rgba(255, 193, 7, 0.18);
}

[data-theme="dark"] .table-info,
[data-theme="dark"] .table-info > th,
[data-theme="dark"] .table-info > td {
  background-color: rgba(23, 162, 184, 0.22);
}

[data-theme="dark"] .table-hover .table-success:hover,
[data-theme="dark"] .table-hover .table-success:hover > td,
[data-theme="dark"] .table-hover .table-success:hover > th {
  background-color: rgba(40, 167, 69, 0.3);
}

[data-theme="dark"] .table-hover .table-danger:hover,
[data-theme="dark"] .table-hover .table-danger:hover > td,
[data-theme="dark"] .table-hover .table-danger:hover > th {
  background-color: rgba(220, 53, 69, 0.3);
}

[data-theme="dark"] .table-hover .table-warning:hover,
[data-theme="dark"] .table-hover .table-warning:hover > td,
[data-theme="dark"] .table-hover .table-warning:hover > th {
  background-color: rgba(255, 193, 7, 0.25);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .custom-file-label {
  border-color: var(--bi-border-strong);
  background-color: var(--bi-input);
  color: var(--bi-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus {
  border-color: #3f7fbf;
  background-color: var(--bi-input);
  color: var(--bi-text);
}

[data-theme="dark"] .form-control::placeholder {
  color: #6c7670;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .custom-select:disabled {
  background-color: var(--bi-surface-2);
  color: var(--bi-muted);
}

/* The select's arrow is a dark SVG baked into the shorthand; the same arrow in the muted ink. */
[data-theme="dark"] .custom-select {
  background: var(--bi-input) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23b4bdb8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
}

[data-theme="dark"] .input-group-text {
  border-color: var(--bi-border-strong);
  background-color: var(--bi-surface-2);
  color: var(--bi-text);
}

[data-theme="dark"] .custom-control-label::before {
  border-color: #59625d;
  background-color: var(--bi-input);
}

[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff;
}

/* Buttons that assume a light page. */
[data-theme="dark"] .btn-light {
  border-color: var(--bi-border-strong);
  background-color: #2a312d;
  color: var(--bi-text);
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-light:focus,
[data-theme="dark"] .btn-light:not(:disabled):not(.disabled):active {
  border-color: #4f5a55;
  background-color: #343c38;
  color: #fff;
}

[data-theme="dark"] .btn-outline-secondary {
  border-color: #59625d;
  color: #b4bdb8;
}

[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:not(:disabled):not(.disabled):active,
[data-theme="dark"] .btn-outline-secondary:not(:disabled):not(.disabled).active {
  border-color: #6c757d;
  background-color: #6c757d;
  color: #fff;
}

[data-theme="dark"] .btn-outline-primary {
  border-color: #3f8fe0;
  color: var(--bi-link);
}

[data-theme="dark"] .btn-outline-primary:hover {
  color: #fff;
}

[data-theme="dark"] .btn-outline-danger {
  color: #f0848f;
}

[data-theme="dark"] .btn-outline-danger:hover {
  color: #fff;
}

[data-theme="dark"] .btn-link {
  color: var(--bi-link);
}

[data-theme="dark"] .badge-light {
  background-color: #3a423e;
  color: var(--bi-text);
}

[data-theme="dark"] .close {
  color: #fff;
  text-shadow: none;
}

/* Alerts: Bootstrap's pastel fills glare on a dark page; the same hues as a tint with light text. */
[data-theme="dark"] .alert-primary { border-color: rgba(0, 123, 255, 0.35); background-color: rgba(0, 123, 255, 0.15); color: #9ccbff; }
[data-theme="dark"] .alert-secondary { border-color: rgba(108, 117, 125, 0.45); background-color: rgba(108, 117, 125, 0.2); color: #ced4da; }
[data-theme="dark"] .alert-success { border-color: rgba(40, 167, 69, 0.4); background-color: rgba(40, 167, 69, 0.15); color: #8fd6a3; }
[data-theme="dark"] .alert-info { border-color: rgba(23, 162, 184, 0.4); background-color: rgba(23, 162, 184, 0.15); color: #8ad4e0; }
[data-theme="dark"] .alert-warning { border-color: rgba(255, 193, 7, 0.35); background-color: rgba(255, 193, 7, 0.12); color: #ffd866; }
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error { border-color: rgba(220, 53, 69, 0.4); background-color: rgba(220, 53, 69, 0.15); color: #f19aa3; }
[data-theme="dark"] .alert-debug { border-color: var(--bi-border-strong); background-color: var(--bi-surface); color: var(--bi-text); }

[data-theme="dark"] .alert .alert-link,
[data-theme="dark"] .alert a {
  color: inherit;
}

/* Modals, list groups, tabs, pagination, progress */
[data-theme="dark"] .modal-content {
  border-color: var(--bi-border-strong);
  background-color: var(--bi-surface);
}

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

[data-theme="dark"] .list-group-item {
  border-color: var(--bi-border);
  background-color: var(--bi-surface);
  color: var(--bi-text);
}

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

[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--bi-border);
}

[data-theme="dark"] .nav-tabs .nav-link:hover,
[data-theme="dark"] .nav-tabs .nav-link:focus {
  border-color: var(--bi-border) var(--bi-border) var(--bi-border);
}

[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  border-color: var(--bi-border) var(--bi-border) var(--bi-bg);
  background-color: var(--bi-bg);
  color: var(--bi-text);
}

[data-theme="dark"] .page-link {
  border-color: var(--bi-border);
  background-color: var(--bi-surface);
  color: var(--bi-link);
}

[data-theme="dark"] .page-link:hover,
[data-theme="dark"] .page-link:focus {
  border-color: var(--bi-border);
  background-color: var(--bi-surface-2);
  color: var(--bi-link-hover);
}

[data-theme="dark"] .page-item.active .page-link {
  border-color: #007bff;
  background-color: #007bff;
  color: #fff;
}

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

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

/* bootstrap-table */
[data-theme="dark"] .bootstrap-table .fixed-table-container,
[data-theme="dark"] .bootstrap-table .fixed-table-container .table thead th,
[data-theme="dark"] .bootstrap-table .fixed-table-container .table tbody td,
[data-theme="dark"] .bootstrap-table .fixed-table-container .table tfoot th {
  border-color: var(--bi-border);
}

[data-theme="dark"] .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
  background-color: var(--bi-surface);
  color: var(--bi-text);
}

[data-theme="dark"] .fix-sticky table thead {
  background-color: var(--bi-surface);
}

/* select2's Bootstrap 4 theme (vendor/select2-bootstrap4.min.css) and its base sheet. */
[data-theme="dark"] .select2-container--bootstrap4 .select2-selection,
[data-theme="dark"] .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
  border-color: var(--bi-border-strong);
  background-color: var(--bi-input);
  color: var(--bi-text);
}

[data-theme="dark"] .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
[data-theme="dark"] .select2-container--bootstrap4 .select2-search__field {
  color: var(--bi-text);
}

[data-theme="dark"] .select2-dropdown {
  border-color: var(--bi-border-strong);
  background-color: var(--bi-surface-2);
  color: var(--bi-text);
}

[data-theme="dark"] .select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
  background-color: var(--bi-surface);
  color: var(--bi-text);
}

/* daterangepicker */
[data-theme="dark"] .daterangepicker {
  border-color: var(--bi-border-strong);
  background-color: var(--bi-surface-2);
  color: var(--bi-text);
}

[data-theme="dark"] .daterangepicker::before {
  border-bottom-color: var(--bi-border-strong);
}

[data-theme="dark"] .daterangepicker::after {
  border-bottom-color: var(--bi-surface-2);
}

[data-theme="dark"] .daterangepicker.drop-up::before {
  border-top-color: var(--bi-border-strong);
}

[data-theme="dark"] .daterangepicker.drop-up::after {
  border-top-color: var(--bi-surface-2);
}

[data-theme="dark"] .daterangepicker .calendar-table {
  border-color: var(--bi-surface-2);
  background-color: var(--bi-surface-2);
}

[data-theme="dark"] .daterangepicker .calendar-table .next span,
[data-theme="dark"] .daterangepicker .calendar-table .prev span {
  border-color: var(--bi-text);
}

[data-theme="dark"] .daterangepicker td.off,
[data-theme="dark"] .daterangepicker td.off.in-range,
[data-theme="dark"] .daterangepicker td.off.start-date,
[data-theme="dark"] .daterangepicker td.off.end-date {
  background-color: var(--bi-surface-2);
  color: #59625d;
}

[data-theme="dark"] .daterangepicker td.available:hover,
[data-theme="dark"] .daterangepicker th.available:hover,
[data-theme="dark"] .daterangepicker .ranges li:hover {
  background-color: #343c38;
}

[data-theme="dark"] .daterangepicker td.in-range {
  background-color: #1f3a4f;
  color: var(--bi-text);
}

[data-theme="dark"] .daterangepicker td.active,
[data-theme="dark"] .daterangepicker td.active:hover {
  background-color: #357ebd;
  color: #fff;
}

[data-theme="dark"] .daterangepicker select.monthselect,
[data-theme="dark"] .daterangepicker select.yearselect,
[data-theme="dark"] .daterangepicker select.hourselect,
[data-theme="dark"] .daterangepicker select.minuteselect,
[data-theme="dark"] .daterangepicker select.secondselect,
[data-theme="dark"] .daterangepicker select.ampmselect {
  border-color: var(--bi-border-strong);
  background-color: var(--bi-input);
  color: var(--bi-text);
}

[data-theme="dark"] .daterangepicker .drp-buttons,
[data-theme="dark"] .daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-color: var(--bi-border-strong);
}