/* ---------------------------------------------------------------------------
   Palette

   A vault is read carefully and operated deliberately, so the interface stays
   quiet and lets severity mean something. The accent is a muted teal rather
   than the neon cyan it replaces: amber and red then still read as warning and
   danger instead of competing with the furniture, which matters on a page whose
   whole job is to say "this secret has no value" or "this is irreversible".

   Light is defined on bare :root and dark under prefers-color-scheme, so a page
   is never left with one theme's text on the other's ground. Every colour used
   anywhere below comes from these tokens.
   --------------------------------------------------------------------------- */

:root {
    --vault-ground: #f4f6f6;
    --vault-surface: #ffffff;
    --vault-surface-raised: #fbfcfc;
    --vault-ink: #151b1f;
    --vault-ink-muted: #566169;
    --vault-accent: #2c7a6b;
    --vault-accent-quiet: rgba(44, 122, 107, 0.10);
    --vault-line: rgba(21, 27, 31, 0.12);
    --vault-line-faint: rgba(21, 27, 31, 0.06);
    --vault-scrollbar: rgba(21, 27, 31, 0.22);
    --vault-scrollbar-hover: rgba(44, 122, 107, 0.45);

    /* Form fields and the tints laid over a surface to separate a row or a panel from it.
       Expressed against the ink so they stay right whichever ground is underneath. */
    --vault-field: #ffffff;
    --vault-field-border: rgba(21, 27, 31, 0.22);
    --vault-overlay-weak: rgba(21, 27, 31, 0.03);
    --vault-overlay: rgba(21, 27, 31, 0.05);
    --vault-overlay-strong: rgba(21, 27, 31, 0.09);
    --vault-shadow: 0 12px 32px rgba(21, 27, 31, 0.10);

    /* Severity. Each is a readable ink, a wash to sit on, and a border, so an alert does not
       have to invent its own colours and end up unreadable in one theme. */
    --vault-on-accent: #ffffff;
    /* A filled destructive button needs its own colour. The danger *ink* is tuned to be read
       against the page, which in dark mode makes it a pale pink -- fine for text, useless as a
       background for a white label. */
    --vault-danger-solid: #b03a3a;
    --vault-on-danger: #ffffff;
    --vault-danger: #a32f2f;
    --vault-danger-wash: rgba(163, 47, 47, 0.10);
    --vault-danger-line: rgba(163, 47, 47, 0.40);
    --vault-warning: #8a5d0a;
    --vault-warning-wash: rgba(138, 93, 10, 0.10);
    --vault-warning-line: rgba(138, 93, 10, 0.40);
    --vault-success: #1f6b45;
    --vault-success-wash: rgba(31, 107, 69, 0.10);
    --vault-success-line: rgba(31, 107, 69, 0.40);
    --vault-info: #245f7d;
    --vault-info-wash: rgba(36, 95, 125, 0.10);
    --vault-info-line: rgba(36, 95, 125, 0.40);
}

@media (prefers-color-scheme: dark) {
    :root {
        --vault-ground: #12171b;
        --vault-surface: #1b2228;
        --vault-surface-raised: #202830;
        --vault-ink: #e6eaec;
        --vault-ink-muted: #98a4ac;
        --vault-accent: #5cbfae;
        --vault-accent-quiet: rgba(92, 191, 174, 0.12);
        --vault-line: rgba(255, 255, 255, 0.10);
        --vault-line-faint: rgba(255, 255, 255, 0.05);
        --vault-scrollbar: rgba(255, 255, 255, 0.18);
        --vault-scrollbar-hover: rgba(92, 191, 174, 0.45);

        --vault-field: rgba(255, 255, 255, 0.04);
        --vault-field-border: rgba(255, 255, 255, 0.20);
        --vault-overlay-weak: rgba(255, 255, 255, 0.04);
        --vault-overlay: rgba(255, 255, 255, 0.06);
        --vault-overlay-strong: rgba(255, 255, 255, 0.10);
        --vault-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);

        /* Lighter inks here: the same red that is readable on paper disappears on this ground.
           Each pair was checked against the surface it actually sits on, not assumed. */
        --vault-on-accent: #06131a;
        --vault-danger-solid: #b3484a;
        --vault-on-danger: #ffffff;
        --vault-danger: #ff9aa3;
        --vault-danger-wash: rgba(217, 112, 112, 0.14);
        --vault-danger-line: rgba(217, 112, 112, 0.45);
        --vault-warning: #f0c072;
        --vault-warning-wash: rgba(217, 164, 65, 0.14);
        --vault-warning-line: rgba(217, 164, 65, 0.45);
        --vault-success: #8fdcae;
        --vault-success-wash: rgba(90, 169, 122, 0.14);
        --vault-success-line: rgba(90, 169, 122, 0.45);
        --vault-info: #9ad0e8;
        --vault-info-wash: rgba(106, 169, 201, 0.14);
        --vault-info-line: rgba(106, 169, 201, 0.45);
    }
}

/* The names identity.css was written against, kept as aliases rather than renamed there.

   identity.css supplies the Bootstrap class names Identity's scaffolded pages use, and it is
   six hundred lines of someone else's vocabulary. Pointing the old names at the new tokens
   makes every one of those rules theme-aware for free, and means the two files cannot drift
   into disagreeing about what "the accent" is. Defined after the media query above so they
   inherit whichever set is in force. */
:root {
    --bg-dark: var(--vault-ground);
    --bg-surface: var(--vault-surface);
    --bg-surface-solid: var(--vault-surface);
    --accent-primary: var(--vault-accent);
    --accent-secondary: var(--vault-ink-muted);
    --text-primary: var(--vault-ink);
    --text-secondary: var(--vault-ink-muted);
    --border-subtle: var(--vault-line);

    /* The glows are gone. The names survive because identity.css still asks for them, and a
       shadow that resolves to nothing is better than one that resolves to a neon halo the rest
       of the interface no longer has. */
    --glow-primary: none;
    --glow-danger: none;
    --glow-success: none;
}

/* Fonts already on the machine, in preference order. Nothing is fetched from the internet:
   the previous Roboto stylesheet came from Google, which made rendering the administration
   interface both a third-party request and a dependency on outbound access. */
:root {
    --vault-font: 'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui, -apple-system,
        'Helvetica Neue', Arial, sans-serif;

    /* Configuration keys, thumbprints and ids are read character by character and compared
       against something else on screen. They belong in a face where l, 1 and I differ. */
    --vault-mono: 'Cascadia Mono', 'Cascadia Code', Consolas, 'SF Mono', ui-monospace,
        'Liberation Mono', Menlo, monospace;

    /* MudBlazor reads these for its own typography. */
    --mud-typography-default-family: var(--vault-font);
    --mud-typography-body1-family: var(--vault-font);
    --mud-typography-body2-family: var(--vault-font);
    --mud-typography-button-family: var(--vault-font);
    --mud-typography-caption-family: var(--vault-font);
    --mud-typography-h1-family: var(--vault-font);
    --mud-typography-h2-family: var(--vault-font);
    --mud-typography-h3-family: var(--vault-font);
    --mud-typography-h4-family: var(--vault-font);
    --mud-typography-h5-family: var(--vault-font);
    --mud-typography-h6-family: var(--vault-font);
    --mud-typography-subtitle1-family: var(--vault-font);
    --mud-typography-subtitle2-family: var(--vault-font);
}

body {
    background-color: var(--vault-ground);
    color: var(--vault-ink);
    font-family: var(--vault-font);
    min-height: 100vh;
    /* No gradient wash. The old one tinted the ground cyan, which is the sort of thing that
       looks like a design decision until a warning chip has to sit on top of it. */
}

/* ---------------------------------------------------------------------------
   Application shell

   Three rules with one shape: the header never moves, the main region is the
   only thing that scrolls, and nothing passes underneath the header.

   The last of those is the reason for the margin below. MudBlazor pads the top
   of the main content by seven eighths of the app bar's height, from inside the
   scroll box -- so as the page scrolls, content rises into that padding and
   shows through the translucent bar. Starting the box below the bar instead of
   padding down from behind it means the bar has nothing behind it to reveal.

   This assumes the app bar is fixed, which is both MudBlazor's default and
   stated explicitly in MainLayout.
   --------------------------------------------------------------------------- */

html,
body {
    height: 100%;
}

body {
    /* Without this the document scrolls as well as the main region, and the two
       scrollbars disagree about where you are. */
    overflow: hidden;
}

.mud-layout {
    height: 100dvh;
    overflow: hidden;
}

.mud-main-content {
    padding-top: 0;
    margin-top: var(--mud-appbar-height, 64px);
    height: calc(100dvh - var(--mud-appbar-height, 64px));
    overflow: auto;
    /* Reaching the end of this region should not start scrolling anything behind it. */
    overscroll-behavior: contain;
}

/* The one scrollbar in the application, so it may as well belong to it. */
.mud-main-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.mud-main-content::-webkit-scrollbar-track {
    background: transparent;
}

.mud-main-content::-webkit-scrollbar-thumb {
    background: var(--vault-scrollbar);
    border: 2px solid transparent;
    border-radius: 6px;
    background-clip: content-box;
}

.mud-main-content::-webkit-scrollbar-thumb:hover {
    background: var(--vault-scrollbar-hover);
    background-clip: content-box;
}

.mud-main-content {
    scrollbar-width: thin;
    scrollbar-color: var(--vault-scrollbar) transparent;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

h1:focus {
    outline: none;
}

/* Digits that have to line up: counts, dates, byte sizes, validity windows. */
.mud-table-cell,
.mud-table th {
    font-variant-numeric: tabular-nums;
}

/* A configuration key is an identifier, not prose. */
code,
kbd,
pre,
samp {
    font-family: var(--vault-mono);
    font-size: 0.9em;
}

code {
    background: var(--vault-accent-quiet);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

/* A configuration key inside a table row, where <code>'s tint on every line would be
   heavier than the information warrants. Same face, no background. */
.vault-key {
    font-family: var(--vault-mono);
    font-size: 0.9em;
    font-weight: 500;
    /* A long key wraps rather than widening the column past the rest of the row. */
    word-break: break-all;
}

/* Keyboard focus has to stay visible: this interface is operated by people who
   tab through forms, and MudBlazor's own outline disappears against some of the
   surfaces below. */
:focus-visible {
    outline: 2px solid var(--vault-accent);
    outline-offset: 2px;
}

.glass-appbar {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    /* The dividing line is drawn inside the bar rather than added to it. As a real
       border it made the bar 65px tall while the main content below was positioned
       against the 64px --mud-appbar-height, so the last pixel of the bar sat over
       the first pixel of the content. */
    box-shadow: inset 0 -1px 0 var(--vault-line) !important;
}

/* Named for the effect it used to have. It is now an ordinary panel: a surface, a
   hairline, and no glow. Kept under the old name because several pages reference
   it and renaming it is a layout change, not a palette one. */
.glass-panel {
    background: var(--vault-surface) !important;
    border: 1px solid var(--vault-line-faint);
}

/* Where a generated credential or a thumbprint is shown to be copied. Quiet, but
   distinct from the page, because it is the one thing on screen worth selecting. */
.neon-panel {
    background: var(--vault-accent-quiet);
    border: 1px solid var(--vault-accent);
    border-radius: 12px;
    padding: 1.5rem;
}

.neon-panel pre {
    color: var(--vault-ink);
    font-family: var(--vault-mono);
    font-weight: 600;
    margin: 0;
    /* A long key must not push the page sideways. */
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}