/* ============================================================
   RIPROKA.WEB - app-level styles

   Almost everything lives in the design system
   (_content/Riproka.UI.Controls/rk-tokens.css + rk-base.css).
   Only things genuinely specific to THIS app belong here, and
   they still reference tokens - never a raw colour or size.
   ============================================================ */

/* Blazor's built-in validation classes, restyled onto the token set. */
.valid.modified:not([type=checkbox]) {
    outline: var(--rk-border-hair) solid var(--rk-ok);
}

.invalid {
    outline: var(--rk-border-hair) solid var(--rk-danger);
    background: var(--rk-err-wash);
}

.validation-message {
    display: block;
    margin-top: var(--rk-sp-4);
    color: var(--rk-danger);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
}

/* The unhandled-exception boundary. Deliberately loud. */
.blazor-error-boundary {
    background: var(--rk-danger);
    color: var(--rk-white);
    padding: var(--rk-sp-16);
    border-left: var(--rk-rail) solid var(--rk-danger-deep);
    font-size: var(--rk-fs-lg);
}

.blazor-error-boundary::after {
    content: "Something went wrong on this screen.";
}