/* VibeCheck admin portal — the small amount of CSS that is not MudBlazor's.
   Dark only, matching the client (CLAUDE.md). MudBlazor's stylesheet owns everything else. */

html,
body {
    background-color: #0e0f13;
    color-scheme: dark;
}

/* Georgian sits in a taller vertical band than Latin at the same size, and venue names reach
   this portal untranslated. Never clamp rows to a Latin-tuned fixed height. */
body {
    line-height: 1.5;
}

/* Blazor's unhandled-error banner.

   Interactive Server means a dropped connection mid-action MUST fail visibly, not silently
   (docs/technical/09 §2.5) — someone doing a takedown at 02:00 on venue wifi has to know their
   action did not land. The framework default is a thin strip at the bottom of the viewport that
   is easy to miss on a phone, so this is deliberately loud, fixed, and above everything
   including MudBlazor's overlays. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 2000;
    padding: 1rem 1.25rem;
    background: #f0616d;
    color: #14060a;
    font-weight: 600;
    box-shadow: 0 2px 12px rgb(0 0 0 / 55%);
}

#blazor-error-ui .reload {
    color: #14060a;
    text-decoration: underline;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    padding: 0 0.25rem;
}

/* Thumb-sized targets on the one surface that has to work one-handed at 02:00. */
@media (max-width: 599.98px) {
    .mud-button-root {
        min-height: 44px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   THE ACCOUNT PAGES (/account/login, /account/enrol) ARE STATIC SERVER-RENDERED, so their form
   controls are the framework's own <InputText>, not MudBlazor's.

   That is not a preference. Blazor's static-SSR form binding needs every control to carry a
   `name` attribute matching its model path, and MudBlazor's inputs do not emit one — a MudTextField
   on a statically-rendered form posts nothing, silently, and the page re-renders as though the
   operator had submitted an empty form. MudBlazor still owns everything around the fields: the
   card, the typography, the alerts and the buttons are all real MudBlazor components.

   These rules exist to make <InputText> look like it belongs on a MudBlazor surface. They are
   deliberately scoped to .vc-account-field so nothing else in the portal can pick them up.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vc-account-field {
    display: block;
    margin-bottom: 1.25rem;
}

/* The field IS the <label>, so the caption is its first child span and the input is implicitly
   associated without needing an id/for pair to be kept in step. */
.vc-account-field > span:first-child {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    color: #9ea1b3;
}

.vc-account-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem;
    background: #12131a;
    color: #e8e9ef;
    border: 1px solid #262836;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1.5;
}

.vc-account-field input:focus {
    outline: none;
    border-color: #7c9cff;
    box-shadow: 0 0 0 2px rgb(124 156 255 / 25%);
}

.vc-account-field .vc-account-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #9ea1b3;
}

/* One-time values that have to be read off the screen and typed or copied: the otpauth URI, the
   manual-entry secret and the recovery codes. Monospace and breakable, because a line that wraps
   mid-token is a token somebody transcribes wrongly at 02:00. */
.vc-account-secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
    user-select: all;
}

/* The same secret as a QR. Fixed size rather than fluid: below about 160px a phone camera starts
   failing on the denser versions, and the panel it sits in is never wide enough to need more. */
.vc-account-qr {
    width: 196px;
    height: 196px;
    display: block;
}

/* The account pages' own shell (AccountLayout). MainLayout's MudLayout is not used there — a
   navigation drawer and a sign-out button are meaningless to somebody who is not signed in, and an
   interactive drawer toggle on a page with no circuit does nothing when clicked. */
.vc-account-shell {
    min-height: 100vh;
    background-color: #0e0f13;
}