html, body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

h1:focus {
    outline: none;
}

/* Blazor EditForm validation cues */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Fallback shown if a component throws inside an error boundary */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }


/* Blazor's circuit-failure banner.

   Global rather than scoped to one layout: it was defined only in MainLayout.razor.css, which
   CSS isolation limits to MainLayout, so the admin pages rendered the element with no styles at
   all — permanently visible, telling the only person who uses them that everything is broken.
   There is one banner, so there is one rule for it. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    box-sizing: border-box;
    padding: 14px 44px 14px 20px;
    font: 500 14px/1.5 Manrope, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #fff;
    background: #8c2f2f;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .4);
}
#blazor-error-ui a { color: #fff; font-weight: 700; }
#blazor-error-ui .dismiss { position: absolute; right: 16px; top: 12px; cursor: pointer; }