/* EnergyBoss theme, ported from the device UI.
 *
 * Values are copied verbatim from
 * eng-hw-ioreplacement/src/System/Apps/EnergyBoss/EnergyBossWeb/VarData/theme/UiThemeSettings.json,
 * under the same --ui-* names UIColors.cs generates, so a role resolves to the same colour in both.
 * The copy is manual: a change to the device palette has to be applied here by hand.
 *
 * Type, as on the Demos site (demos/Demos/wwwroot/css/site.css): open-source fonts only, served
 * from this app (fonts/, SIL Open Font License). Source Sans 3, spocenergy.com's body face, for
 * everything, bold for headings; Source Code Pro for the monospace Bootstrap uses for code and unit
 * serials. Each is one variable file holding every weight. Sizes are in em from a root of 100%, so a
 * visitor's own text size setting scales the whole portal; borders stay in px, since a hairline in
 * em lands between pixels and draws blurred or not at all.
 */

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('fonts/SourceSans3-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url('fonts/SourceSans3-Italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url('fonts/SourceCodePro-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Brand orange, constant across both themes; matches the logo. */
    --ui-brand: #f15a29;

    --ui-default: #080808;
    --ui-off-color: #e0e0e0;
    --ui-on-color: #008000;
    --ui-glow-color: #32ff32;

    --ui-success: #008000;
    --ui-warning: #f0e000;
    --ui-error: #ffa500;
    --ui-fault: #ff0000;
    --ui-info: #1a5fb4;

    --ui-success-highlight: #e0ffe0;
    --ui-warning-highlight: #ffffe0;
    --ui-error-highlight: #f0e0e0;
    --ui-fault-highlight: #ffe0e0;
    --ui-info-highlight: #f0f0ff;

    --ui-graph-line-1: #3b82f6;
    --ui-graph-line-2: #ef4444;
    --ui-graph-line-3: #22c55e;
    --ui-graph-line-4: #8b5cf6;

    --ui-sidebar-top: #101010;
    /* The brand orange, matching the other nav states. The device's light theme uses #954601. */
    --ui-sidebar-accent: var(--ui-brand);
    --ui-top-bar: #f7f7f7;
    --ui-top-bar-border: #d6d5d5;

    --ui-nav-top-row: rgba(0, 0, 0, 0.4);
    --ui-nav-text: #333333;
    --ui-nav-active-background: rgba(241, 90, 41, 0.22);
    --ui-nav-active-border: rgba(241, 90, 41, 0.65);
    --ui-nav-hover-background: rgba(241, 90, 41, 0.35);

    /* The account and organization menus, in spocenergy.com's navy and cream with the brand orange
       marking the item under the pointer and the page that is open. */
    --ui-menu-background: #0f385b;
    --ui-menu-text: #f4efe3;
    --ui-menu-hover: rgba(244, 239, 227, 0.1);
    --ui-menu-divider: rgba(244, 239, 227, 0.18);
    --ui-menu-border: #0f385b;
    --ui-menu-shadow: rgba(0, 0, 0, 0.3);

    --ui-page-background: #ffffff;
    --ui-page-text: #080808;

    --ui-focus-ring: rgba(0, 128, 0, 0.35);
    /* An entry field's focus: a light grey, enough to show where the cursor is. */
    --ui-field-focus: #b4b4b4;

    --ui-logo: url('images/logo-light.svg');

    /* The system faces stand in while a file loads, or if it cannot. */
    --ui-font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ui-font-mono: 'Source Code Pro', ui-monospace, Menlo, Consolas, monospace;
}

/* Dark applies in two cases, declared twice because one lives inside a media query. Edit both.

   1. The OS asks for dark and no explicit light choice is set here; the :not([data-theme="light"])
      guard lets an explicit choice beat the system setting.
   2. Dark is chosen explicitly, whatever the OS says. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ui-default: #f0f0f0;
        --ui-off-color: #2d3748;

        --ui-success: #22c55e;
        --ui-warning: #f59e0b;
        --ui-error: #f97316;
        --ui-fault: #ef4444;
        --ui-info: #1a5fb4;

        --ui-graph-line-1: #f15a29;
        --ui-graph-line-2: #60a5fa;
        --ui-graph-line-3: #4ade80;
        --ui-graph-line-4: #f59e0b;

        --ui-sidebar-top: #0d1017;
        --ui-sidebar-accent: var(--ui-brand);
        --ui-top-bar: #151b26;
        --ui-top-bar-border: #2a3a5c;

        --ui-nav-top-row: rgba(0, 0, 0, 0.5);
        --ui-nav-text: #c0c8d8;
        --ui-nav-active-background: rgba(241, 90, 41, 0.12);
        --ui-nav-hover-background: rgba(241, 90, 41, 0.75);

        /* The same navy, edged in cream so the panel stands off the near-black page. */
        --ui-menu-border: rgba(244, 239, 227, 0.15);
        --ui-menu-shadow: rgba(0, 0, 0, 0.6);

        --ui-page-background: #0d1017;
        --ui-page-text: #f0f0f0;

        --ui-focus-ring: rgba(241, 90, 41, 0.4);
        --ui-field-focus: #6b7280;

        --ui-logo: url('images/logo.svg');
    }
}

:root[data-theme="dark"] {

    --ui-default: #f0f0f0;
    --ui-off-color: #2d3748;

    --ui-success: #22c55e;
    --ui-warning: #f59e0b;
    --ui-error: #f97316;
    --ui-fault: #ef4444;
    --ui-info: #1a5fb4;

    --ui-graph-line-1: #f15a29;
    --ui-graph-line-2: #60a5fa;
    --ui-graph-line-3: #4ade80;
    --ui-graph-line-4: #f59e0b;

    --ui-sidebar-top: #0d1017;
    --ui-sidebar-accent: var(--ui-brand);
    --ui-top-bar: #151b26;
    --ui-top-bar-border: #2a3a5c;

    --ui-nav-top-row: rgba(0, 0, 0, 0.5);
    --ui-nav-text: #c0c8d8;
    --ui-nav-active-background: rgba(241, 90, 41, 0.12);
    --ui-nav-hover-background: rgba(241, 90, 41, 0.75);

    --ui-menu-border: rgba(244, 239, 227, 0.15);
    --ui-menu-shadow: rgba(0, 0, 0, 0.6);

    --ui-page-background: #0d1017;
    --ui-page-text: #f0f0f0;

    --ui-focus-ring: rgba(241, 90, 41, 0.4);
    --ui-field-focus: #6b7280;

    --ui-logo: url('images/logo.svg');
}

/* ---------------------------------------------------------------------------
 * Bootstrap remap: point Bootstrap's own variables at the semantic roles, so
 * its components pick the theme up without being restyled individually.
 * ------------------------------------------------------------------------- */
:root {
    --bs-body-color: var(--ui-page-text);
    --bs-body-bg: var(--ui-page-background);
    --bs-border-color: var(--ui-top-bar-border);
    --bs-secondary-color: color-mix(in srgb, var(--ui-page-text) 65%, transparent);
    --bs-link-color: var(--ui-brand);
    --bs-link-hover-color: color-mix(in srgb, var(--ui-brand) 80%, black);

    --bs-font-sans-serif: var(--ui-font-sans);
    --bs-body-font-family: var(--ui-font-sans);
    --bs-font-monospace: var(--ui-font-mono);
    --bs-body-font-size: 1em;
}

/* 100%, not a fixed size: the browser's own setting is the base everything scales from. Phones are
   kept from enlarging text on their own when turned sideways. */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    background-color: var(--ui-page-background);
    color: var(--ui-page-text);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

a, .btn-link {
    color: var(--ui-brand);
}

.btn-primary {
    color: #fff;
    background-color: var(--ui-brand);
    border-color: var(--ui-brand);
    /* Bootstrap's hover, pressed, focus and disabled states paint their own blue over the rules
       above, and its pressed rule outranks them, so they are set through its variables. */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--ui-brand) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-brand) 85%, black);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--ui-brand) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--ui-brand) 85%, black);
    --bs-btn-focus-shadow-rgb: 241, 90, 41;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ui-brand);
    --bs-btn-disabled-border-color: var(--ui-brand);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: color-mix(in srgb, var(--ui-brand) 85%, black);
    border-color: color-mix(in srgb, var(--ui-brand) 85%, black);
}

/* The secondary actions: Bootstrap's blue, filled rather than outlined, so they read as buttons in
   both themes. Set through Bootstrap's own variables, so hover, active and disabled follow. */
.btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

/* Cancel, Close and the like: a plain blue link beside the action it backs out of. */
main.content .btn-link {
    --bs-btn-color: var(--ui-info);
    --bs-btn-hover-color: var(--ui-info);
    --bs-btn-active-color: var(--ui-info);
    color: var(--ui-info);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) main.content .btn-link {
        --bs-btn-color: #60a5fa;
        --bs-btn-hover-color: #60a5fa;
        --bs-btn-active-color: #60a5fa;
        color: #60a5fa;
    }
}

:root[data-theme="dark"] main.content .btn-link {
    --bs-btn-color: #60a5fa;
    --bs-btn-hover-color: #60a5fa;
    --bs-btn-active-color: #60a5fa;
    color: #60a5fa;
}

/* Bootstrap draws the close ✕ dark, for a light background. Dialogs take the page's dark
   background, so on a dark page it is turned white, as btn-close-white does. Alerts keep their
   light Bootstrap colours in both themes, so the ✕ on one stays dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-close:not(.alert .btn-close) {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}

:root[data-theme="dark"] .btn-close:not(.alert .btn-close) {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* No focus ring on a link-style button clicked with the mouse; it still shows when reached by
   keyboard, where it is the only sign of where focus is. */
main.content .btn-link:focus:not(:focus-visible) {
    box-shadow: none;
}

/* Delete and the like: a brighter red than Bootstrap's, outlined or filled. Hover fills the
   outlined one, so it reads as about to act. */
.btn-outline-danger {
    --bs-btn-color: #ef4444;
    --bs-btn-border-color: #ef4444;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ef4444;
    --bs-btn-hover-border-color: #ef4444;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc2626;
    --bs-btn-active-border-color: #dc2626;
    --bs-btn-disabled-color: #ef4444;
    --bs-btn-disabled-border-color: #ef4444;
    --bs-btn-focus-shadow-rgb: 239, 68, 68;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ef4444;
    --bs-btn-border-color: #ef4444;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc2626;
    --bs-btn-hover-border-color: #dc2626;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc2626;
    --bs-btn-active-border-color: #dc2626;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ef4444;
    --bs-btn-disabled-border-color: #ef4444;
    --bs-btn-focus-shadow-rgb: 239, 68, 68;
}

/* One size for every button in the page body, small or not: a fixed height and a common minimum
   width, so a row of actions lines up. A label longer than the minimum still widens its button
   rather than overflowing it. Left alone: link-styled buttons, which sit in running text and
   tables; the unit page's arrows; the sign-in page's two full-width buttons, sized below; and
   anything marked .btn-natural, the opt-out for exceptions. Inside an input group the field and
   its label take the same height, so the button stays flush with them. */
main.content .btn:not(.btn-link):not(.btn-natural):not(.unit-stepper .btn):not(.signin-stack .btn) {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    min-width: var(--ui-btn-min-width, 7rem);
}

/* The account pages' buttons share one wider width, so a row of them lines up whatever its
   labels; "Authenticator" is the longest. */
.account-manage {
    --ui-btn-min-width: 9rem;
}

main.content .input-group > :is(.form-control, .form-select, .input-group-text) {
    height: 2rem;
    padding-top: 0;
    padding-bottom: 0;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1em var(--ui-page-background), 0 0 0 .25em var(--ui-focus-ring);
}

.form-control, .form-select {
    background-color: var(--ui-page-background);
    color: var(--ui-page-text);
    border-color: var(--ui-top-bar-border);
}

.form-control:focus, .form-select:focus {
    background-color: var(--ui-page-background);
    color: var(--ui-page-text);
    border-color: var(--ui-field-focus);
    box-shadow: 0 0 0 1px var(--ui-field-focus);
}

/* A floated label: Bootstrap colours it from --bs-body-color-rgb, which the theme does not remap,
   so on a dark page it stays a dark grey that barely shows. */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control:-webkit-autofill ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
    color: var(--bs-secondary-color);
}

/* Tables are themed explicitly rather than inheriting Bootstrap's defaults. */
.table {
    --bs-table-color: var(--ui-page-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ui-top-bar-border);
    --bs-table-striped-color: var(--ui-page-text);
    --bs-table-striped-bg: var(--ui-top-bar);
    --bs-table-hover-color: var(--ui-page-text);
    --bs-table-hover-bg: rgba(241, 90, 41, 0.08);
    --bs-table-active-color: var(--ui-page-text);
    --bs-table-active-bg: var(--ui-top-bar);
    color: var(--ui-page-text);
}

.table > thead {
    border-bottom-color: var(--ui-top-bar-border);
}

.text-muted {
    color: var(--bs-secondary-color) !important;
}

.pagination {
    --bs-pagination-color: var(--ui-page-text);
    --bs-pagination-bg: var(--ui-page-background);
    --bs-pagination-border-color: var(--ui-top-bar-border);
    --bs-pagination-hover-bg: var(--ui-top-bar);
    --bs-pagination-hover-color: var(--ui-brand);
    --bs-pagination-active-bg: var(--ui-brand);
    --bs-pagination-active-border-color: var(--ui-brand);
    --bs-pagination-disabled-bg: var(--ui-page-background);
    --bs-pagination-disabled-border-color: var(--ui-top-bar-border);
}

.validation-message, .invalid-feedback {
    color: var(--ui-fault);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ui-success);
}

.invalid {
    outline: 1px solid var(--ui-fault);
}

/* ---------------------------------------------------------------------------
 * Sign-in pages (Account/Login and the pages around it), laid out as the Demos sign-in: the form
 * stands on the page with no panel, in a column centred in it, with its button at the right.
 * ------------------------------------------------------------------------- */

.signin-panel {
    max-width: 32.5em;
    margin: 1.5em auto;
}

.signin-panel h1 {
    font-size: 1.5em;
    margin-bottom: .75em;
}

/* A page's own heading under the column's title, and the headings inside it, a step down each. */
.signin-panel h2,
.signin-panel h3 {
    font-size: 1.25em;
    margin-bottom: .75em;
}

.signin-panel h4,
.signin-panel h5 {
    font-size: 1.0625em;
}

/* Fields at the body size and a finger's height: a phone zooms the page in on any field under
   16px, and a target needs about 2.75em (44px) to be hit reliably. Buttons take the one height
   every page body uses, set with the other buttons above, so the account pages match the rest. */
.signin-panel .form-control {
    font-size: 1em;
    min-height: 2.75em;
}

/* Every button in the column in the sign-in button's weight, and set apart from a neighbour. */
.signin-panel .btn {
    font-weight: 600;
    /* A link styled as a button centres its text the way a button element does. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.signin-panel .btn + .btn {
    margin-left: .5em;
}

.signin-stack .btn + .btn {
    margin-left: 0;
}

/* The buttons together at the right, under the end of the fields, as every button row is: Cancel
   beside the button it cancels. A checkbox, if there is one, stays at the left. */
.signin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5em;
    margin-bottom: 1em;
}

.signin-actions > :not(.btn):first-child {
    margin-right: auto;
}

.signin-actions .btn {
    font-weight: 600;
}

.signin-actions .btn + .btn {
    margin-left: 0;
}

.signin-actions .form-check-label {
    display: flex;
    align-items: center;
    gap: .5em;
}

.signin-actions .form-check-input {
    margin: 0;
}

/* Buttons stacked at the form's full width: sign in, then the passkey alternative under it. */
.signin-stack {
    display: flex;
    flex-direction: column;
    gap: .75em;
}

/* A step up from the common 2rem, as the way into the portal, though shorter than a field. */
.signin-stack .btn {
    width: 100%;
    font-weight: 600;
    font-size: 1rem;
    height: 2.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

/* A label with a link at the right end of its line, over the field it names. */
.signin-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
}

/* In blue, set apart from the brand-orange links; a lighter blue on a dark page, where the theme's
   info blue is too dim to read. Breadcrumb links too: they are wayfinding, not actions. Any other
   link takes it with .link-blue. */
.signin-label-row a,
.breadcrumb a,
a.link-blue {
    color: var(--ui-info);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .signin-label-row a,
    :root:not([data-theme="light"]) .breadcrumb a,
    :root:not([data-theme="light"]) a.link-blue {
        color: #60a5fa;
    }
}

:root[data-theme="dark"] .signin-label-row a,
:root[data-theme="dark"] .breadcrumb a,
:root[data-theme="dark"] a.link-blue {
    color: #60a5fa;
}

/* "or" between the two ways in, with a rule out to each edge. */
.signin-or {
    display: flex;
    align-items: center;
    gap: .75em;
    color: var(--bs-secondary-color);
}

.signin-or::before,
.signin-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--ui-top-bar-border);
}

/* The passkey is the second way in, so it is grey rather than the brand colour. */
.btn-passkey {
    background-color: #495057;
    color: #fff;
    border: 1px solid #fff;
}

.btn-passkey:hover,
.btn-passkey:focus-visible {
    background-color: #343a40;
    color: #fff;
    border-color: #fff;
}

.signin-check {
    display: flex;
    align-items: center;
    gap: .5em;
}

.signin-check .form-check-input {
    margin: 0;
}

/* A value the page shows but does not edit: a label over plain text, not a disabled field that
   reads as a control nobody can use. */
.account-value {
    margin-bottom: 1em;
}

.account-value-label {
    font-size: .875em;
    color: color-mix(in srgb, var(--ui-page-text) 65%, transparent);
}

.account-verified {
    margin-left: .625em;
}

/* A setting shown as its state, with Change at the right, opening its form in place. The summary
   goes once the form is open; Cancel closes it again. */
.account-change > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    list-style: none;
    cursor: default;
}

.account-change > summary::-webkit-details-marker {
    display: none;
}

.account-change > summary .btn {
    cursor: pointer;
}

.account-change[open] > summary {
    display: none;
}

/* The account pages sit in a column wider than the sign-in one. The account page stacks every
   setting in it, a section each, parted by space. */
.signin-panel.account-manage {
    max-width: 50em;
}

.account-manage > h1 {
    text-align: center;
}

.account-section + .account-section {
    margin-top: 2em;
}

/* The sections in three groups, each under a heading with a rule beneath it, and the sections'
   own headings a step down from it. */
.account-group + .account-group {
    margin-top: 3em;
}

.signin-panel .account-group > h2 {
    font-size: 1.375em;
    font-weight: 600;
    padding-bottom: .4em;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--ui-top-bar-border);
}

.signin-panel .account-group h3 {
    font-size: 1.0625em;
    font-weight: 600;
    margin-bottom: .6em;
}

/* A section's content set in under its heading, by the description indent. */
.account-section > :not(h3) {
    margin-left: 1.25em;
}

/* The way back to the account page from one reached from it. */
.account-back {
    margin-bottom: 1em;
}

/* The title on each page of the organization menu, named as its menu item. The size of the Sign In
   page's heading rather than Bootstrap's h1, which is too large for a working page. */
.page-title {
    font-size: 1.5em;
}

/* A page's description, set in from its heading: the paragraph straight after a portal page's
   title, or after the heading of a page reached from the account page. An account section sets in
   all its content instead. Not under a hidden title: with nothing visible to set in from, the
   paragraph starts at the margin like the rest of the page. */
.content h1:not(.visually-hidden) + p,
.account-manage > h3 + p {
    padding-left: 1.25em;
}

/* A line about the page rather than part of it, set in from the text it follows. */
.note {
    padding-left: 1.25em;
    font-size: .9em;
}

/* ---------------------------------------------------------------------------
 * Layout chrome
 * ------------------------------------------------------------------------- */

/* Always the white-wordmark file, not var(--ui-logo): the title bar is dark in both themes.
   --ui-logo remains defined for a logo placed on the page background instead. */
.brand-logo {
    display: block;
    height: 2.25em;
    background-image: url('images/logo.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    /* The artwork is 368.74 x 102.15, so this keeps its aspect ratio at the height above. */
    width: 8.2em;
    text-indent: -9999px;
    overflow: hidden;
}

/* The title bar and its links live in NavMenu.razor.css, whose scoped attribute selector outranks
   anything written here; it consumes the --ui-nav-* and --ui-sidebar-* variables above. */

/* The fleet tree panel beside the map on the home page. */
.fleet-tree {
    background-color: var(--ui-top-bar);
    border-right: 1px solid var(--ui-top-bar-border);
}

/* In dark mode the tree takes the page's black, like the map pane and footer beside it; the top
   bar's grey made it read as a separate panel. The border still divides the two. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fleet-tree {
        background-color: var(--ui-page-background);
    }
}

:root[data-theme="dark"] .fleet-tree {
    background-color: var(--ui-page-background);
}

.fleet-tree .tree-node,
.fleet-tree .tree-summary {
    display: flex;
    align-items: baseline;
    gap: .5em;
    font: inherit;
    color: var(--ui-page-text);
    text-decoration: none;
    padding: .2em .4em;
    border-radius: .25em;
    cursor: pointer;
}

.fleet-tree .tree-node:hover,
.fleet-tree .tree-summary:hover {
    background-color: color-mix(in srgb, var(--ui-brand) 12%, transparent);
}

.fleet-tree .tree-node.selected {
    background-color: var(--ui-nav-active-background);
    box-shadow: inset 2px 0 0 var(--ui-brand);
}

.fleet-tree .node-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-tree .node-count {
    font-variant-numeric: tabular-nums;
    font-size: .8125em;
    color: var(--bs-secondary-color);
}

/* An organisation is a row that can hold users; a group is a tag path segment that exists only
   while units are tagged under it. They are not the same kind of thing. */
.fleet-tree .tree-branch > .tree-summary .node-name {
    font-weight: 400;
    font-size: .9em;
}

/* Each level indents by its own padding, so depth costs no markup and a deep branch cannot run out
   of horizontal room -- the nesting is what carries it. */
.fleet-tree .tree-children {
    padding-left: .7em;
    border-left: 1px solid var(--ui-top-bar-border);
    margin-left: .55em;
}

/* The name fills the summary so the whole row is the filter target, leaving only the triangle to
   expand. Inheriting the colour keeps it reading as a tree row rather than as body-copy link. */
.fleet-tree .tree-summary .node-link {
    display: flex;
    align-items: baseline;
    gap: .5em;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.fleet-tree .tree-summary.selected {
    background-color: var(--ui-nav-active-background);
    box-shadow: inset 2px 0 0 var(--ui-brand);
}

/* A unit row in the categories' face, a step smaller. */
.fleet-tree .tree-node.is-unit {
    font-size: .8125em;
    /* The row spacing above, kept at its size as the text steps down: em here is .8125 of it. */
    gap: .61538em;
    padding: .24615em .49231em;
}

.fleet-tree .tree-node.is-unit.retired .node-name {
    color: var(--bs-secondary-color);
    text-decoration: line-through;
}

/* Theme switch in the top bar, styled as a quiet icon button. */
.theme-toggle {
    background: none;
    border: 1px solid var(--ui-top-bar-border);
    border-radius: .375em;
    color: var(--ui-page-text);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    padding: .3em .55em;
}

.theme-toggle:hover {
    background-color: color-mix(in srgb, var(--ui-brand) 12%, transparent);
    border-color: var(--ui-brand);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2em var(--ui-focus-ring);
}

/* The toggle shows the theme it switches to: the moon in light mode, the sun in dark. Chosen here
   from data-theme and the system preference, as the colours are, so it never waits on script. */
.theme-toggle .theme-icon-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-icon-sun {
    display: inline;
}

:root[data-theme="dark"] .theme-toggle .theme-icon-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .theme-icon-sun {
        display: inline;
    }

    :root:not([data-theme="light"]) .theme-toggle .theme-icon-moon {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * Home: fleet tree beside the map
 * ------------------------------------------------------------------------- */

.home-split {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.home-split .fleet-tree {
    flex: 0 0 18em;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fleet-tree .tree-head {
    display: flex;
    flex-direction: column;
    gap: .1em;
    padding: .75em 1em;
}

.fleet-tree .tree-title {
    font-weight: 600;
}

.fleet-tree .tree-total {
    font-size: .8125em;
    color: var(--bs-secondary-color);
}

/* The tree scrolls, not the page: the map beside it is sized to the viewport. */
.fleet-tree .tree-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .5em;
}

.home-split .map-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.home-split .map-pane #unit-map {
    flex: 1;
    min-height: 0;
}

.map-pane .map-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1.23077em;
    padding: .61538em 1.23077em;
    font-size: .8125em;
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--ui-top-bar-border);
}

/* The unit list beside the same tree: it scrolls on its own, as the tree does, with the page's
   usual padding inside it. */
.home-split .list-pane {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25em 1.5em;
}

/* Tabs, themed explicitly: Bootstrap colours the active tab from --bs-emphasis-color and the rest
   from the link colour, neither of which the theme remaps, so on a dark page the active tab's
   label was dark on dark. The others are the page's text, dimmed, and the active one full strength
   on the page's own background. */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--ui-top-bar-border);
    --bs-nav-tabs-link-hover-border-color: var(--ui-top-bar-border) var(--ui-top-bar-border) var(--ui-top-bar-border);
    --bs-nav-tabs-link-active-color: var(--ui-page-text);
    --bs-nav-tabs-link-active-bg: var(--ui-page-background);
    --bs-nav-tabs-link-active-border-color: var(--ui-top-bar-border) var(--ui-top-bar-border) var(--ui-page-background);
    --bs-nav-link-color: color-mix(in srgb, var(--ui-page-text) 70%, transparent);
    --bs-nav-link-hover-color: var(--ui-page-text);
}

.nav-tabs .nav-link.active {
    font-weight: 600;
}

/* The Users page's Edit dialog: every tab the same height, so switching does not resize it, and its
   content set in from the tab strip above it. */
.person-tab-body {
    min-height: 22rem;
    padding: .5rem 1.25rem 0;
}

/* The dot on a tab of the Users page's Edit dialog whose changes are not saved yet, in the brand
   orange of the Save button that would keep them. */
.person-tab-dirty {
    margin-left: .3em;
    font-weight: 700;
    color: var(--ui-brand);
}

/* Results per page and Include retired, on the Units and Search pages alike. */
.list-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75em 1.5em;
    margin-bottom: 1em;
}

.list-pane .list-where {
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
    margin-bottom: .25em;
}

/* Below this the two panes stack and share the height, the tree taking the smaller part. Sized by
   flex rather than by vh: the bar above them is not part of the viewport they are dividing, so a
   40/60 split in vh would overflow it. */
@media (max-width: 50.06125em) {
    .home-split {
        flex-direction: column;
    }

    .home-split .fleet-tree {
        flex: 0 0 40%;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--ui-top-bar-border);
    }

    .home-split .map-pane,
    .home-split .list-pane {
        flex: 1;
        min-height: 0;
    }
}