/* ==========================================================================
   Color schemes: the shipped colors (Appearance.Theme, Server Settings > Appearance).

   Every color the app's own stylesheets use is a variable here, once per scheme. App.razor
   writes the chosen scheme on <html> as data-theme (and data-bs-theme, so Bootstrap's own
   components follow); nothing else decides it, and there is no per-user override.

   **The operator edits colors on Server Settings > Appearance, not here.** What they change
   is stored in dbo.ThemeColor and App.razor writes it into the page after this file, so it
   wins. This file is what Reset goes back to, and the editor reads it (ThemeCatalog) for the
   list of colors, their groups, their descriptions and where each is used. So the format
   matters: one variable per line, a comment line holding "@group Name" for each group, and an
   optional "description | where used" comment at the end of the line. (Never write a comment's
   own opening and closing marks inside this header: CSS comments do not nest, so the first close
   ends the header and the browser throws away the whole light block that follows. That happened
   until 2026-10-11, and the light colors then came only from the page's inline overrides.)

   Thirty-two named colors (owner, 2026-10-05; text-on-status and on-orange added 2026-10-07; the
   seven menu colors 2026-10-11; the six Dashboard chart colors 2026-10-11, the dataviz reference
   categorical order, checked for color blindness on each scheme's page color), each for one job: page, dropdowns, text, muted, border, the brand
   colors, text and highlights on colored fills, the status colors and their tints, shadow, and
   the left menu. A stylesheet that needs a color uses one of these; a literal color in a
   stylesheet does not change with the scheme and cannot be edited. To add a color: add the
   variable to both blocks.

   Light follows the marketing site (www.youfixit.ai css/www.css, owner 2026-10-11): ink text
   #0e1e33, muted #556275, line #dce3ec, and its softer ok and warning tints. Brand blue, brand
   orange and the status fills were already the same; danger has no marketing counterpart and is
   unchanged. Dark is unchanged.

   The left menu follows the scheme (owner, 2026-10-11): light on Light and dark on Dark, from its
   own seven colors in the Menu group. Its icons are masks painted with the menu's icon color, so
   they change with it. The top bar stays brand blue in both.
   ========================================================================== */

:root,
[data-theme="light"] {
    color-scheme: light;

    /* @group Page */
    --bs-body-bg: #ffffff; /* Page background: the page, panels, cards, dialogs and inputs | Bootstrap: body; 120 more places */
    --yf-dropdown-bg: #ffffff; /* Dropdown background: dropdown boxes and the list that opens from them | app.css select, .form-select, select option; ThemeColorEditor .tc-newform select */
    --bs-body-color: #0e1e33; /* Text: anything that is not muted, a link, or on a colored fill | Bootstrap: body; 24 more places */
    --yf-muted: #556275; /* Muted text and gray: secondary text, gray dots, strong borders | ConfirmButton .confirm-message; AutoApproveSettings .toggle-row > span; ModelSettings .inv dt; +98 more */
    --yf-border: #dce3ec; /* Border: lines between rows, around panels and inputs | ConfirmButton .confirm-cancel; AutoApproveSettings .panel-section; LegalChangeBanner .legal-banner; +86 more */

    /* @group Brand */
    --brand-blue: #00579c; /* Brand blue: top bar, blue buttons, dark bars, focus rings | ConfirmButton .confirm-cancel:focus-visible, .confirm-go:foc; ReconnectModal #components-reconnect-modal button; ReconnectModal #components-reconnect-modal button:hover; +46 more */
    --brand-blue-fg: #00579c; /* Link: headings and links in blue | About .ab-head h1; About .ab-section h2; About .ab-chain strong; +54 more */
    --brand-orange: #e77817; /* Brand orange: attention and warnings, In Session button, accents | OwnedSessions .nav-sessions .dot-attention; ConnectionButton .conn-session; ConnectionButton .conn-session-offline; +22 more */

    /* @group On color */
    --yf-on-color: #ffffff; /* Text on color: on blue, green and red fills and the top bar | ConfirmButton .confirm-danger; ConfirmButton .confirm-go; +50 more */
    --yf-on-color-soft: #ffffff33; /* Highlight on color: hover and highlights on colored fills | ConfirmButton .confirm-key; +2 more */
    --yf-on-orange: #ffffff; /* Text on orange: text on brand-orange fills (white, owner 2026-10-07) | app .mk-btn; app .anon-btn; app .mk-badge; app .mk-links .mk-signin; ConnectionButton .conn-session; Diagnose .disconnect */


    /* @group Menu */
    --yf-menu-bg: #f3f6fa; /* Menu background: the left menu column | app .shell-nav */
    --yf-menu-fg: #0e1e33; /* Menu text: links and session names in the left menu | NavMenu .nav-link; OwnedSessions .nav-session */
    --yf-menu-muted: #556275; /* Menu headings: group headings, the version line and idle session dots | NavMenu .nav-group, .nav-legal; OwnedSessions .nav-sessions-title, .dot */
    --yf-menu-icon: #3d4b5f; /* Menu icons: the icon beside each menu link | NavMenu .nav-icon */
    --yf-menu-line: #dce3ec; /* Menu lines: between the menu's parts and along its right edge | app .shell-nav, .nav-bottom; OwnedSessions .nav-sessions */
    --yf-menu-active-bg: #dfeaf5; /* Menu highlight: the current page and the link under the pointer | NavMenu .nav-link.active, .nav-link:hover; OwnedSessions .nav-session.active */
    --yf-menu-active-fg: #00579c; /* Menu highlight text: the current page's text and icon | NavMenu .nav-link.active; OwnedSessions .nav-session.active */
    /* @group Status */
    --yf-success: #15803d; /* Success: green fills behind white text, green dots, Saved | ConnectionButton .conn-available; ConnectionButton .conn-unavailable, .conn-unavailable:disabl; Diagnose .approve; +10 more */
    --yf-success-soft: #e3f4e8; /* Success tint: Approve, waiting for the model | Diagnose .approve; Diagnose .approve:hover:not(:disabled); app .state-awaitingmodel; +1 more */
    --yf-success-fg: #135f30; /* Success text: green text and outlines on the page or on Success tint | Diagnose .approve; ConnectionButton .conn-unavailable; app .valid.modified; +4 more */
    --yf-danger: #b02a37; /* Danger: red fills behind white text (delete, Retry) | ConfirmButton .confirm-danger; ConfirmButton .confirm-danger:hover:not(:disabled); ConfirmButton .confirm-icon; +35 more */
    --yf-danger-soft: #fecaca; /* Danger tint: Reject, risky proposals, error panels | Diagnose .tier-write; Diagnose .tier-dataloss; Diagnose .reject; +5 more */
    --yf-danger-fg: #991b1b; /* Danger text: errors, invalid fields, red text on the page or on Danger tint | Diagnose .reject; Diagnose .stop; app .validation-message; +20 more */
    --yf-warning-soft: #fdf3d6; /* Warning tint: proposals that change settings | Diagnose .tier-changesettings */

    /* @group Charts */
    --yf-chart-1: #2a78d6; /* Chart color 1 (blue): online computers; the most common version | Dashboard DonutChart */
    --yf-chart-2: #eb6834; /* Chart color 2 (orange): computers with open issues; the second version | Dashboard DonutChart */
    --yf-chart-3: #1baf7a; /* Chart color 3 (aqua): the third version | Dashboard DonutChart */
    --yf-chart-4: #eda100; /* Chart color 4 (yellow): the fourth version | Dashboard DonutChart */
    --yf-chart-5: #e87ba4; /* Chart color 5 (magenta): the fifth version | Dashboard DonutChart */
    --yf-chart-rest: #b8c0ca; /* Chart neutral: offline, no open issues, and Other versions | Dashboard DonutChart */

    /* @group Shadow */
    --yf-shadow: #0e1e334d; /* Shadow and overlay: drop shadows, and the dimming behind pop-ups | ConfirmButton .confirm-backdrop; ConfirmButton .confirm-dialog; MainLayout #blazor-error-ui; +20 more */
}

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

    /* @group Page */
    --bs-body-bg: #1e1e1e; /* Page background: the page, panels, cards, dialogs and inputs | Bootstrap: body; 120 more places */
    --yf-dropdown-bg: #1e1e1e; /* Dropdown background: dropdown boxes and the list that opens from them | app.css select, .form-select, select option; ThemeColorEditor .tc-newform select */
    --bs-body-color: #ebebeb; /* Text: anything that is not muted, a link, or on a colored fill | Bootstrap: body; 24 more places */
    --yf-muted: #9da5b4; /* Muted text and gray: secondary text, gray dots, strong borders | ConfirmButton .confirm-message; AutoApproveSettings .toggle-row > span; ModelSettings .inv dt; +98 more */
    --yf-border: #454749; /* Border: lines between rows, around panels and inputs | ConfirmButton .confirm-cancel; AutoApproveSettings .panel-section; LegalChangeBanner .legal-banner; +86 more */

    /* @group Brand */
    --brand-blue: #00579c; /* Brand blue: top bar, blue buttons, dark bars, focus rings | ConfirmButton .confirm-cancel:focus-visible, .confirm-go:foc; ReconnectModal #components-reconnect-modal button; ReconnectModal #components-reconnect-modal button:hover; +46 more */
    --brand-blue-fg: #6fb0ff; /* Link: headings and links in blue | About .ab-head h1; About .ab-section h2; About .ab-chain strong; +54 more */
    --brand-orange: #e77817; /* Brand orange: attention and warnings, In Session button, accents | OwnedSessions .nav-sessions .dot-attention; ConnectionButton .conn-session; ConnectionButton .conn-session-offline; +22 more */

    /* @group On color */
    --yf-on-color: #ffffff; /* Text on color: on blue, green and red fills and the top bar | ConfirmButton .confirm-danger; ConfirmButton .confirm-go; +50 more */
    --yf-on-color-soft: #ffffff33; /* Highlight on color: hover and highlights on colored fills | ConfirmButton .confirm-key; +2 more */
    --yf-on-orange: #ffffff; /* Text on orange: text on brand-orange fills (white, owner 2026-10-07) | app .mk-btn; app .anon-btn; app .mk-badge; app .mk-links .mk-signin; ConnectionButton .conn-session; Diagnose .disconnect */


    /* @group Menu */
    --yf-menu-bg: #17191c; /* Menu background: the left menu column | app .shell-nav */
    --yf-menu-fg: #e6e8eb; /* Menu text: links and session names in the left menu | NavMenu .nav-link; OwnedSessions .nav-session */
    --yf-menu-muted: #9da5b4; /* Menu headings: group headings, the version line and idle session dots | NavMenu .nav-group, .nav-legal; OwnedSessions .nav-sessions-title, .dot */
    --yf-menu-icon: #b4bcc8; /* Menu icons: the icon beside each menu link | NavMenu .nav-icon */
    --yf-menu-line: #2a2e33; /* Menu lines: between the menu's parts and along its right edge | app .shell-nav, .nav-bottom; OwnedSessions .nav-sessions */
    --yf-menu-active-bg: #123a5e; /* Menu highlight: the current page and the link under the pointer | NavMenu .nav-link.active, .nav-link:hover; OwnedSessions .nav-session.active */
    --yf-menu-active-fg: #ffffff; /* Menu highlight text: the current page's text and icon | NavMenu .nav-link.active; OwnedSessions .nav-session.active */
    /* @group Status */
    --yf-success: #15803d; /* Success: green fills behind white text, green dots, Saved | ConnectionButton .conn-available; ConnectionButton .conn-unavailable, .conn-unavailable:disabl; Diagnose .approve; +10 more */
    --yf-success-soft: #14532d; /* Success tint: Approve, waiting for the model | Diagnose .approve; Diagnose .approve:hover:not(:disabled); app .state-awaitingmodel; +1 more */
    --yf-success-fg: #4ade80; /* Success text: green text and outlines on the page or on Success tint | Diagnose .approve; ConnectionButton .conn-unavailable; app .valid.modified; +4 more */
    --yf-danger: #b02a37; /* Danger: red fills behind white text (delete, Retry) | ConfirmButton .confirm-danger; ConfirmButton .confirm-danger:hover:not(:disabled); ConfirmButton .confirm-icon; +35 more */
    --yf-danger-soft: #49292a; /* Danger tint: Reject, risky proposals, error panels | Diagnose .tier-write; Diagnose .tier-dataloss; Diagnose .reject; +5 more */
    --yf-danger-fg: #ff8589; /* Danger text: errors, invalid fields, red text on the page or on Danger tint | Diagnose .reject; Diagnose .stop; app .validation-message; +20 more */
    --yf-warning-soft: #352b00; /* Warning tint: proposals that change settings | Diagnose .tier-changesettings */

    /* @group Charts */
    --yf-chart-1: #3987e5; /* Chart color 1 (blue): online computers; the most common version | Dashboard DonutChart */
    --yf-chart-2: #d95926; /* Chart color 2 (orange): computers with open issues; the second version | Dashboard DonutChart */
    --yf-chart-3: #199e70; /* Chart color 3 (aqua): the third version | Dashboard DonutChart */
    --yf-chart-4: #c98500; /* Chart color 4 (yellow): the fourth version | Dashboard DonutChart */
    --yf-chart-5: #d55181; /* Chart color 5 (magenta): the fifth version | Dashboard DonutChart */
    --yf-chart-rest: #4a4f56; /* Chart neutral: offline, no open issues, and Other versions | Dashboard DonutChart */

    /* @group Shadow */
    --yf-shadow: #00000066; /* Shadow and overlay: drop shadows, and the dimming behind pop-ups | ConfirmButton .confirm-backdrop; ConfirmButton .confirm-dialog; MainLayout #blazor-error-ui; +20 more */
}