/* Stili globali residui: validazione dei form e riquadri di errore Blazor.
   Il resto dell'aspetto e' definito in css/orbit-*.css */

/* Il modello Blazor disegna un contorno VERDE su ogni campo valido e toccato.
   E' rumore: segnala che va tutto bene, cosa che l'utente da' per scontata, e in un
   modulo lungo accende mezza schermata. Si segnala solo cio' che non va.

   Regola generale: l'interfaccia parla quando c'e' un problema, non per confermare
   l'assenza di problemi. */

.invalid,
.rz-textbox.invalid,
.rz-dropdown.invalid {
    outline: 2px solid var(--orbit-critico);
    outline-offset: -1px;
}

/* L'etichetta del campo diventa rossa insieme al bordo: il colore da solo non basta
   a chi non lo distingue, ma due segnali sullo stesso campo lo rendono trovabile. */
.orbit-form__campo:has(.invalid) .orbit-form__etichetta { color: var(--orbit-critico); }

.validation-message,
.rz-message {
    display: block;
    margin-block-start: .2rem;
    color: var(--orbit-critico);
    font-size: .75rem;
    line-height: 1.35;
}

.blazor-error-boundary {
    padding: 1rem 1.25rem;
    background: var(--orbit-critico);
    color: #fff;
    border-radius: var(--orbit-raggio-piccolo);
}

.blazor-error-boundary::after {
    content: "Si e' verificato un errore imprevisto.";
}

#blazor-error-ui {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    display: none;
    z-index: 9000;
    padding: .7rem 1.25rem;
    background: var(--orbit-attenzione);
    color: #fff;
    font-size: .82rem;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .25);
}

#blazor-error-ui .dismiss {
    position: absolute;
    inset-inline-end: .75rem;
    inset-block-start: .5rem;
    cursor: pointer;
}