/* =============================================================================================
   What is left of the project template's stylesheet after TICKET-026.

   admin.css is the design language. This file holds only the two things Blazor's own machinery
   renders and admin.css has no business knowing about: the framework error strip and the
   validation classes EditForm emits.
   ============================================================================================= */

/* THE TEMPLATE SHIPPED `h1:focus { outline: none }` AND THAT IS THE DEFECT tokens.css DOCUMENTS
   ON THREE PUBLIC FIELDS. It exists because <FocusOnNavigate Selector="h1"> moves focus to the
   heading after every navigation, which would otherwise draw a focus ring nobody asked for.

   The fix is not to remove the ring, it is to remove it only for PROGRAMMATIC focus. :focus-visible
   is exactly that distinction: a keyboard user tabbing to the heading still gets a visible ring,
   and the router's own focus call does not. Never `outline: none` without a replacement. */
h1:focus:not(:focus-visible) {
    outline: none;
}

h1:focus-visible {
    outline: var(--f2f-a-focus-ring-width, 2px) solid var(--f2f-a-focus-ring, #1A5FA8);
    outline-offset: var(--f2f-a-focus-ring-offset, 2px);
}

/* EditForm's validation classes. Colour is never the only carrier — every invalid field also
   carries aria-invalid and a message, and the error summary at the top of the form is what a
   phone user actually reads (WCAG 3.3.1). These are the belt. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--f2f-a-success, #1B6B3A);
}

.invalid {
    outline: 2px solid var(--f2f-a-danger, #B3261E);
}

.validation-message {
    color: var(--f2f-a-danger, #B3261E);
    font-size: var(--f2f-a-fs-100, 0.8125rem);
    font-weight: var(--f2f-a-fw-medium, 500);
}

/* The framework's last-resort boundary. Plain words, no illustration, and it inherits the admin
   danger colour so it does not look like it came from a different product. */
.blazor-error-boundary {
    background: var(--f2f-a-danger, #B3261E);
    color: #FFFFFF;
    padding: var(--f2f-a-space-4, 1rem);
    border-radius: var(--f2f-a-radius-md, 6px);
}

.blazor-error-boundary::after {
    content: "Something on this screen failed. Nothing you were working on has been saved — reload and try again.";
}