/* Only what the shell needs before and around MudBlazor. Component colour lives in AppTheme.cs. */

:root {
    --app-loading-bg: #f4f6f8;
    --app-loading-fg: #1a2027;
    --app-loading-muted: #5a6772;
    --app-loading-track: #dde3e8;
    --app-accent: #1976d2;
    --app-error-bg: #fdecea;
    --app-error-fg: #7f2019;
    --app-error-border: #f2b8b3;
}

@media (prefers-color-scheme: dark) {
    :root {
        --app-loading-bg: #12171c;
        --app-loading-fg: #e6edf3;
        --app-loading-muted: #a8b3bd;
        --app-loading-track: #2a333c;
        --app-accent: #64b5f6;
        --app-error-bg: #2a1618;
        --app-error-fg: #f6c9c5;
        --app-error-border: #5c2b2b;
    }
}

h1:focus {
    outline: none;
}

/* Keyboard focus must stay visible everywhere, including inside MudBlazor surfaces. */
:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

/* ---------- Boot screen (rendered before Blazor starts) ---------- */

.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 1rem;
    background: var(--app-loading-bg);
    color: var(--app-loading-fg);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.app-loading-logo {
    fill: var(--app-accent);
}

.app-loading-text {
    color: var(--app-loading-muted);
    font-size: 0.95rem;
}

.app-loading-bar {
    width: 220px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--app-loading-track);
    overflow: hidden;
}

.app-loading-bar-value {
    height: 100%;
    background-color: var(--app-accent);
    transition: width 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-bar-value {
        transition: none;
    }
}

/* ---------- No JavaScript ---------- */

.app-noscript {
    max-width: 34rem;
    margin: 4rem auto;
    padding: 0 1.5rem;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--app-loading-fg);
}

.app-noscript h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.app-noscript p {
    color: var(--app-loading-muted);
    line-height: 1.6;
}

/* ---------- Form dialogs ---------- */

/* More room above a group label than below it, so the label reads as attached to the fields
   that follow rather than floating between two blocks. */
.form-section {
    margin: 4px 0 -4px;
}

.form-section--divided {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

.form-section__label {
    display: block;
    line-height: 1.4;
    letter-spacing: 0.09em;
}

.form-section__optional {
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
}

/* The disclosure that holds rarely-used fields. Quiet by default; it is a way in, not a control
   competing with the form. */
.form-disclosure {
    align-self: flex-start;
    margin-left: -8px;
}

/* Tabular figures wherever digits are compared down a column or across a pair of fields. */
.field-numeric input {
    font-variant-numeric: tabular-nums;
}

/* ---------- Unhandled error bar ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    box-sizing: border-box;
    padding: 0.75rem 3rem 0.75rem 1.25rem;
    background: var(--app-error-bg);
    color: var(--app-error-fg);
    border-top: 1px solid var(--app-error-border);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
}

#blazor-error-ui .reload {
    color: inherit;
    font-weight: 600;
    margin-left: 0.75rem;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}