/*
    ABOSO admin UI — Nocturne v3, in brass.

    The same design system as Pillarbox (Conexio.Pillarbox.Web/wwwroot/css/app.css), retuned to a
    brass accent so the two consoles are not mistaken for each other at a glance. Structure,
    density, radii and shadow language are Pillarbox's; only the hues differ.

    THREE RULES FROM THAT SYSTEM ARE LOAD-BEARING. Check any change against them:

      1. NOTHING IS HARD-CODED. Every colour, size, radius and shadow comes from a token below.
         The whole look retunes from the :root block and nowhere else.

      2. THE ACCENT IS A LINE AND A GLOW, NEVER A FLOOD. The primary button is an accent OUTLINE
         on transparent, not a filled block. Large saturated fills are the one thing this system
         does not do.

      3. NO BOLDS. Everything is Inter 500 — see --font-heading-weight. v3 removed 600 entirely and
         App.razor no longer even fetches it, so a stray font-weight: 600 now falls back to a
         synthesised weight and looks wrong rather than looking deliberate. Emphasis comes from
         colour, spacing and rule weight.

    WHAT CHANGED IN v3

      - .card surfaces at 8px radius REPLACE the ruled grid. Sections are cards; the tables,
        timelines and fact lists inside them are transparent, because a card inside a card is two
        borders saying one thing.
      - The incident band is a soft accent-900 gradient with an accent left edge, not a filled
        alert. It stopped being the loudest thing on the dashboard, which it never earned.
      - Dropdowns drop the native chrome: accent chevron, lifted surface fill, accent border on
        hover, dark option rows instead of the browser's white list.

    WHAT THAT SECOND RULE COST, AND WHY IT IS STILL RIGHT

    The Modernist build this replaces used a solid accent field for the sign-in poster and a filled
    accent bar for the update banner. Both are floods, so both are gone. The emphasis that used to
    come from AREA now comes from WEIGHT, exactly as Pillarbox does it:

        filled alarm    = something is wrong and someone should act   (a stalled account)
        alarm outline   = worth knowing, not yet actionable           (an unregistered account)
        filled neutral  = measured and fine                           (a healthy account)
        hairline only   = NOT MEASURED - absence of data, not health  (an undocumented status)

    That last distinction is the one to protect. "We did not look" must never render like "we
    looked and it was fine" - on this tool that is the difference between a status nobody has
    documented and a status somebody checked.
*/

:root {
    /*
        Brass, not Pillarbox's blurple. The ground stays Nocturne's dark blue-grey; the accent is a
        warm brass that reads as scale hardware and puts maximum hue distance between this console
        and Pillarbox.
    */
    --color-bg: #12151c;
    --color-surface: #1a1e27;

    /* One step up from surface. v3 uses this for controls that should read as liftable — the
       dropdown fill, the hovered row — where a card would be too much furniture. */
    --color-raised: #222732;

    --color-text: #e8ecf2;
    --color-accent: #d99a3f;
    --color-divider: color-mix(in srgb, #e8ecf2 16%, transparent);

    /*
        Tonal ramps on one shared lightness scale - the same step of any role carries the same
        visual weight. On this dark ground: 700-900 for tinted fills and subtle borders, 500 as the
        base, 100-300 for text sitting on those tints.
    */
    --color-neutral-100: #f2f5fa;
    --color-neutral-200: #e2e7f0;
    --color-neutral-300: #cbd2df;
    --color-neutral-400: #aab3c4;
    --color-neutral-500: #8b94a8;
    --color-neutral-600: #6d768a;
    --color-neutral-700: #525a6b;
    --color-neutral-800: #3a404d;
    --color-neutral-900: #262b34;

    --color-accent-100: #fdf6ec;
    --color-accent-200: #f9e6c8;
    --color-accent-300: #f0c584;
    --color-accent-400: #e5ad5c;
    --color-accent-500: #d99a3f;
    --color-accent-600: #b87c2c;
    --color-accent-700: #8f5f21;
    --color-accent-800: #66431a;
    --color-accent-900: #33240f;

    /*
        A SECOND HUE, unlike Pillarbox's mono scheme, and deliberately so.

        This console's whole job is telling "wrong" apart from "unusual". Pillarbox can use its
        accent as the alarm because nothing competes with it; here the accent is ordinary interface
        chrome, so an alarm in the same hue would disappear into the furniture. On 2026-08-17, 2808
        of 2835 orders had reached no scale — collapsing that into the accent would erase the one
        signal this console was built to show.

        ⚠️ THE ALARM MOVED FROM AMBER TO RED ON 2026-09-07, when the accent became brass.

        Before that the accent was blue and amber was the alarm, so on any screenshot or memory
        older than that date AMBER MEANS TROUBLE. It now means ordinary chrome, and red carries
        "not reaching the scale". Anyone who learnt the old scheme will read a healthy screen as a
        failing one until told. Nothing but the alarm roles may use this hue.
    */
    --color-alarm: #e0574a;
    --color-alarm-300: #f5aca3;
    --color-alarm-700: #963228;
    --color-alarm-900: #3f1712;

    --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading-weight: 500;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    /* Density 0.70x - this system is compact on purpose. */
    --space-1: 2.8px;
    --space-2: 5.6px;
    --space-3: 8.4px;
    --space-4: 11.2px;
    --space-6: 16.8px;
    --space-8: 22.4px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    /* On a dark ground, elevation is a hairline edge plus ambient darkness - never a heavy drop. */
    --shadow-sm: 0 0 0 1px var(--color-neutral-800);
    --shadow-md: 0 0 0 1px var(--color-neutral-700), 0 6px 18px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 0 0 1px var(--color-neutral-500), 0 16px 40px rgba(0, 0, 0, 0.65);

    --nav-width: 226px;
    --topbar-height: 68px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2);
}

h1 { font-size: 24px; }
h2 { font-size: 17px; }
h3 { font-size: 16px; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--font-mono); font-size: 12.5px; }

.text-muted { color: var(--color-neutral-400); }
.small { font-size: 12px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }

/* ─────────────────────────── buttons ─────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text);
    text-decoration: none;
}

.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/*
    The primary action is an accent OUTLINE with a faint tint behind it, not a filled block. This
    is the single most recognisable thing about the system; filling it in is how a Nocturne screen
    stops looking like one.
*/
.btn-primary {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.btn-primary:hover {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 26%, transparent); }

.btn-secondary { border-color: var(--color-neutral-700); color: var(--color-neutral-200); }
.btn-secondary:hover { border-color: var(--color-neutral-500); background: var(--color-surface); }

.btn-ghost { color: var(--color-neutral-300); padding-inline: var(--space-2); }

.btn-ghost:hover {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.btn-block { width: 100%; }

/* ─────────────────────────── inputs ─────────────────────────── */

.input {
    width: 100%;
    min-height: 32px;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-size: 13px;
    color: var(--color-text);
    caret-color: var(--color-accent);
    background: var(--color-bg);
    border: 1px solid var(--color-neutral-800);
    border-radius: var(--radius-sm);
}

.input::placeholder { color: var(--color-neutral-600); }
.input:hover { border-color: var(--color-neutral-700); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input:disabled { opacity: 0.5; }

/* ───────────────────── badges: four weights ───────────────────── */
/*
    The four treatments are the vocabulary, and the gap between them is the message. See the note
    at the top of this file before changing any of them.
*/

.tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    margin-right: var(--space-1);
    white-space: nowrap;
}

/* Filled alarm — something is wrong and someone should act. */
.tag-accent { background: var(--color-alarm); color: var(--color-alarm-900); font-weight: 500; }

/* Alarm outline — worth knowing, not yet actionable. */
.tag-accent-2 { border-color: var(--color-alarm-700); color: var(--color-alarm-300); }

/* Filled neutral — measured, and fine. */
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-200); }

/* Hairline only — NOT MEASURED. Must never read like "we looked and it was fine". */
.tag-outline { border-color: var(--color-neutral-700); color: var(--color-neutral-400); }

/*
    select and textarea inherit .input rather than getting their own look. They are the same
    control to the person using them, and a select that does not match the text field beside it
    reads as a different kind of thing that might behave differently.

    The appearance reset is what makes that true on Windows: without it the browser paints its own
    chrome-grey control on a dark ground, which is the single most obvious way an admin console
    announces that nobody looked at it.
*/
select.input {
    appearance: none;
    padding-right: var(--space-8);
    cursor: pointer;

    /*
        v3: a LIFTED fill rather than the sunken input ground.

        A text field is a hole you type into; a dropdown is a control you press. Giving them the
        same recessed ground was the thing that made these read as ordinary — the fix is one step
        of elevation, not more decoration.
    */
    background-color: var(--color-raised);

    /*
        The chevron, drawn rather than fetched — no external asset, no request.

        v3 paints it in the ACCENT, not currentColor. It is the only affordance saying this control
        opens, and in text colour it disappeared into the value beside it.
    */
    background-image: linear-gradient(45deg, transparent 50%, var(--color-accent) 50%),
                      linear-gradient(135deg, var(--color-accent) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Accent border on hover — the same "line, not flood" rule the primary button follows. */
select.input:hover {
    border-color: var(--color-accent);
    background-color: color-mix(in srgb, var(--color-accent) 8%, var(--color-raised));
}

/*
    The dropdown list itself is painted by the OS, which does not read our variables.

    Naming both explicitly stops it opening as black-on-black on some platforms and as the
    browser's white list on others — the second is what actually happened here, and a white list
    dropping out of a dark console is the most obvious tell that nobody looked at it. color-scheme
    is what makes the scrollbar and the highlight follow; without it the rows are dark and the
    chrome around them is not.
*/
select.input { color-scheme: dark; }
select.input option { background: var(--color-surface); color: var(--color-text); }
select.input option:checked { background: var(--color-accent-900); color: var(--color-accent-200); }

textarea.input {
    min-height: 76px;
    resize: vertical;
    line-height: 1.5;
}