/* Dark theme for the web app.

   Light is the default (no attribute on <html>, or data-bs-theme="light").
   <html data-bs-theme="dark"> turns on Bootstrap's own dark mode; this sheet fits
   it to the Stowlines deep sea palette and fixes the few Bootstrap helpers that do not
   follow the theme. The colours the pages carry inline are handled separately, by
   theme-dark-vars.css (generated: see tools/themeify.py).

   Surfaces, darkest to lightest:  page #08161d  ·  card #0f232c  ·  raised #132c37  ·  line #203e4c */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: #0f232c;
    --bs-body-bg-rgb: 15, 35, 44;
    --bs-body-color: #dfe9ee;
    --bs-body-color-rgb: 223, 233, 238;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(223, 233, 238, .7);
    --bs-secondary-color-rgb: 223, 233, 238;
    --bs-tertiary-color: rgba(223, 233, 238, .5);
    --bs-tertiary-color-rgb: 223, 233, 238;
    --bs-secondary-bg: #193847;
    --bs-secondary-bg-rgb: 25, 56, 71;
    --bs-tertiary-bg: #132c37;
    --bs-tertiary-bg-rgb: 19, 44, 55;
    --bs-border-color: #203e4c;
    --bs-border-color-translucent: rgba(255, 255, 255, .12);
    --bs-heading-color: inherit;
    --bs-link-color: #7cc4d6;
    --bs-link-color-rgb: 124, 196, 214;
    --bs-link-hover-color: #b4dfe9;
    --bs-link-hover-color-rgb: 180, 223, 233;
    --bs-code-color: #f0a6c8;

    /* The brand teal as a fill: a step lighter, so buttons and badges stand off the dark surface. */
    --sl-navy: #1f7388;
    --sl-navy-dark: #26839a;
    --sl-deep: #1a6276;
    --bs-primary: #1f7388;
    --bs-primary-rgb: 31, 115, 136;
}

/* The page sits a step darker than the cards on it. */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] body.bg-light { background-color: #08161d !important; color: var(--bs-body-color); }

/* Bootstrap helpers with a fixed colour. */
[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; }
[data-bs-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.text-bg-warning),
[data-bs-theme="dark"] .text-black { color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .border-light { border-color: var(--bs-border-color) !important; }
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table > .table-light > tr > * {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: #152f3b;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: #173442;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-hover-bg: #1a3b4a;
    --bs-table-hover-color: #fff;
    --bs-table-active-bg: #1a3b4a;
    --bs-table-active-color: #fff;
}
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: #dfe9ee; --bs-btn-bg: #193847; --bs-btn-border-color: #203e4c;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1e4455; --bs-btn-hover-border-color: #265164;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #224c60; --bs-btn-active-border-color: #265164;
    --bs-btn-disabled-color: #8ea4ae; --bs-btn-disabled-bg: #16323e; --bs-btn-disabled-border-color: #203e4c;
}
[data-bs-theme="dark"] .btn-dark {
    --bs-btn-bg: #224759; --bs-btn-border-color: #305b6e;
    --bs-btn-hover-bg: #285468; --bs-btn-hover-border-color: #3a6b82;
}
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #dfe9ee; --bs-btn-border-color: #3f6d82;
    --bs-btn-hover-color: #08161d; --bs-btn-hover-bg: #dfe9ee; --bs-btn-hover-border-color: #dfe9ee;
    --bs-btn-active-color: #08161d; --bs-btn-active-bg: #dfe9ee; --bs-btn-active-border-color: #dfe9ee;
}
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #b2c5ce; --bs-btn-border-color: #325c70;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #265164; --bs-btn-hover-border-color: #325c70;
}

/* The brand teal as text: too dark to read on a dark surface, so a light teal instead. */
/* (:where keeps these as weak as the plain "a" rule they replace, so .btn, .nav-link and the like still win) */
:where([data-bs-theme="dark"]) a { color: #7cc4d6; }
:where([data-bs-theme="dark"]) a:hover { color: #b4dfe9; }
[data-bs-theme="dark"] .text-primary { color: #7cc4d6 !important; }
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #9ad3e1; --bs-btn-border-color: #4a9db2;
    --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-link { --bs-btn-color: #7cc4d6; --bs-btn-hover-color: #b4dfe9; }
[data-bs-theme="dark"] .page-link { color: #9ad3e1; }
[data-bs-theme="dark"] .active > .page-link, [data-bs-theme="dark"] .page-link.active { color: #fff; }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: #4a9db2; box-shadow: 0 0 0 .25rem rgba(74, 157, 178, .25); }
[data-bs-theme="dark"] .btn:focus, [data-bs-theme="dark"] .btn:active:focus,
[data-bs-theme="dark"] .form-check-input:focus { box-shadow: 0 0 0 .1rem #08161d, 0 0 0 .25rem #4a9db2; }
[data-bs-theme="dark"] .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, .4) !important; }
[data-bs-theme="dark"] hr { border-color: var(--bs-border-color); opacity: 1; }

/* App chrome (the top bars are deep sea blue in both themes). */
[data-bs-theme="dark"] .app-topmenu .dropdown-item.active,
[data-bs-theme="dark"] .app-topmenu .dropdown-item:active { background: #1f7388; color: #fff; }
[data-bs-theme="dark"] .app-tab.active { background: #08161d; color: #fff; }
[data-bs-theme="dark"] .user-menu-dropdown .dropdown-item.active { background: #193b4a; color: #9ad3e1; }
[data-bs-theme="dark"] .user-menu-dropdown .dropdown-item.active i { color: #9ad3e1; }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: #132c37; --bs-dropdown-link-hover-bg: #193847; --bs-dropdown-border-color: #203e4c; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
[data-bs-theme="dark"] .modal-content { --bs-modal-bg: #0f232c; box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
[data-bs-theme="dark"] .card { --bs-card-border-color: #193643; }
[data-bs-theme="dark"] .global-page-loader__panel { box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }

/* Theme switch in the top bar. */
.app-navbar .theme-toggle { background: transparent; border: 0; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; }

/* Maps: Leaflet's own controls, tooltips and popups follow the theme (their contents do). */
[data-bs-theme="dark"] .leaflet-bar a,
[data-bs-theme="dark"] .leaflet-bar a:hover { background-color: #132c37; color: #dfe9ee; border-bottom-color: #203e4c; }
[data-bs-theme="dark"] .leaflet-bar a.leaflet-disabled { background-color: #0f232c; color: #3f6d82; }
[data-bs-theme="dark"] .leaflet-popup-content-wrapper,
[data-bs-theme="dark"] .leaflet-popup-tip { background: #132c37; color: #dfe9ee; }
[data-bs-theme="dark"] .leaflet-tooltip { background-color: #132c37; border-color: #203e4c; color: #dfe9ee; }
[data-bs-theme="dark"] .leaflet-tooltip-top::before { border-top-color: #132c37; }
[data-bs-theme="dark"] .leaflet-tooltip-bottom::before { border-bottom-color: #132c37; }
[data-bs-theme="dark"] .leaflet-tooltip-left::before { border-left-color: #132c37; }
[data-bs-theme="dark"] .leaflet-tooltip-right::before { border-right-color: #132c37; }
[data-bs-theme="dark"] .leaflet-container { background: #08161d; }