/* =============================================================
   alerts.css — La forma dei riquadri di avviso, definita in un punto solo

   Scope: ogni `MudAlert` del prodotto (191, in 92 file), gli snackbar, e i
   riquadri di avviso disegnati da noi che usano la classe `.upf-alert`.

   PERCHÉ ESISTE QUESTO FILE
   -------------------------
   La tavolozza del prodotto ha tre toni chiari e saturi (`Warning` #ffc35a,
   `Info` #39afd1, `Success` #0acf97) più `Error` #fa5c7c. MudBlazor, nelle
   sue varianti di avviso, scrive il testo in `*-darken` — che di quei colori
   è appena più scuro: #ffc35a diventa #ffb638 — sopra `*-hover`, che è una
   velatura del 6%. Il risultato misurato in tema chiaro:

     Warning  1,52:1      Info  2,84:1
     Success  2,40:1      Error 3,04:1

   E in tema scuro, dove il difetto e' meno grave ma c'e': Warning 6,11:1,
   Success 3,90:1, Info 3,31:1, Error 3,14:1 — tre su quattro sotto i 4,5:1.

   Solo Error sfiorava i 3:1, e nessuno arriva ai 4,5:1 che WCAG 2.1 AA chiede per il
   testo normale. Gli snackbar stavano peggio: sono avvisi in variante
   `Filled`, cioè bianco sulla tinta piena — 1,59:1 su Warning.

   Non è il difetto di una schermata: è la tavolozza. Per questo la
   correzione sta qui e non nei 191 punti che disegnano un avviso, e per
   questo `pages/channel-status.css` non ha più una definizione propria — due
   definizioni della stessa cosa sono il modo in cui una torna a divergere.

   LA FORMA SCELTA
   ---------------
   Sfondo: la tinta del tono al 14%. Testo: `--mud-palette-text-primary`.
   Bordo sinistro di 4 px nel colore pieno della severità.

   **Il bordo non è decorativo.** Portando il testo a `text-primary` le
   quattro severità si distinguerebbero solo per una tinta di sfondo quasi
   impercettibile; il bordo è ciò che le tiene distinguibili, ed essendo un
   blocco di colore non ha un requisito di contrasto da rispettare.

   **L'icona resta nel colore pieno della severità.** Dentro un riquadro con
   il bordo colorato è un elemento grafico, non contenuto da leggere: la
   frase la si legge nel testo, che sta sopra i 7:1 in entrambi i temi.

   PERCHÉ LO SFONDO È TRASLUCIDO E NON UN COLORE FISSO
   ---------------------------------------------------
   `rgba(var(--mud-palette-X-rgb), 0.14)` si compone da sé sopra la
   superficie sottostante, e quindi funziona in entrambi i temi. Un valore
   fisso ne sbaglierebbe uno: MudThemeProvider passando al tema scuro
   riscrive le **stesse** variabili e non lascia nessun selettore su cui
   distinguere i due casi. Per la stessa ragione qui non si usa `color-mix`:
   verificato il 21/08/2026, in questo motore non si risolve (restituisce
   `rgb(1,1,0)`).

   IL TRANELLO DA NON RIFARE
   -------------------------
   ⚠️ `*-lighten` e `*-darken` **non** sono «tinta pallida» e «testo scuro»:
   sono lo stesso colore un gradino sopra e un gradino sotto. Su Warning
   danno #ffd285 e #ffb638 — due ambra della stessa luminosità, 1,23:1.

   I NUMERI SONO VERIFICATI DA UN TEST
   -----------------------------------
   `UPFCLOUD_Backend.Tests/ThemeContrastTests.cs` legge la tavolozza da
   `Shared/MainLayout.razor` e l'alfa da questo file, e pretende 4,5:1 su
   tutte e quattro le severità in entrambi i temi, per avvisi e snackbar.
   Se qualcuno cambia un colore del tema, quel test diventa rosso.
   Il metodo di misura è documentato in `.claude/css-system.md`.
   ============================================================= */


/* ══════════════════════════════════════════════
   IL TONO DELLA SEVERITÀ

   Due variabili per severità: il colore pieno (bordo e icona) e la sua forma
   'r,g,b', che serve a comporre la tinta di sfondo con un'alfa.

   Assegnate **senza** richiedere la classe `.mud-alert`, di proposito: negli
   snackbar MudBlazor mette la classe di severità su un elemento che non è un
   avviso, e la variabile deve valere anche là.
   ══════════════════════════════════════════════ */

.mud-alert-text-info,
.mud-alert-outlined-info,
.mud-alert-filled-info,
.upf-alert--info {
    --upf-alert-tone:     var(--mud-palette-info);
    --upf-alert-tone-rgb: var(--mud-palette-info-rgb);
}

.mud-alert-text-success,
.mud-alert-outlined-success,
.mud-alert-filled-success,
.upf-alert--success {
    --upf-alert-tone:     var(--mud-palette-success);
    --upf-alert-tone-rgb: var(--mud-palette-success-rgb);
}

.mud-alert-text-warning,
.mud-alert-outlined-warning,
.mud-alert-filled-warning,
.upf-alert--warning {
    --upf-alert-tone:     var(--mud-palette-warning);
    --upf-alert-tone-rgb: var(--mud-palette-warning-rgb);
}

.mud-alert-text-error,
.mud-alert-outlined-error,
.mud-alert-filled-error,
.upf-alert--error {
    --upf-alert-tone:     var(--mud-palette-error);
    --upf-alert-tone-rgb: var(--mud-palette-error-rgb);
}


/* ══════════════════════════════════════════════
   LA FORMA — una sola, per le quattro severità e le tre varianti

   Le tre varianti di MudBlazor (`Text`, `Outlined`, `Filled`) convergono
   qui: nel prodotto 180 avvisi su 191 usano la predefinita, e i 9 che
   dichiarano un `Variant` esplicito scavalcherebbero il predefinito e
   resterebbero illeggibili. Un avviso ha una forma sola.

   `Severity.Normal` non è elencata: MudBlazor la scrive già in
   `text-primary`, e nel prodotto non è usata.
   ══════════════════════════════════════════════ */

.upf-alert,
.mud-alert.mud-alert-text-info,
.mud-alert.mud-alert-outlined-info,
.mud-alert.mud-alert-filled-info,
.mud-alert.mud-alert-text-success,
.mud-alert.mud-alert-outlined-success,
.mud-alert.mud-alert-filled-success,
.mud-alert.mud-alert-text-warning,
.mud-alert.mud-alert-outlined-warning,
.mud-alert.mud-alert-filled-warning,
.mud-alert.mud-alert-text-error,
.mud-alert.mud-alert-outlined-error,
.mud-alert.mud-alert-filled-error {
    background-color: rgba(var(--upf-alert-tone-rgb), 0.14);
    color:            var(--mud-palette-text-primary);
    border:           0;
    border-left:      4px solid var(--upf-alert-tone);
    font-weight:      400;
}

/* Impaginazione dei riquadri disegnati da noi. Per i `MudAlert` non serve:
   la porta la classe `.mud-alert` di MudBlazor, insieme al suo `Dense`. */
.upf-alert {
    display:       flex;
    gap:           11px;
    padding:       12px 14px;
    border-radius: var(--mud-default-borderradius, 4px);
    font-size:     0.875rem;
    line-height:   1.5;
}

/* L'icona prende il tono. La variabile si eredita dal riquadro, quindi qui
   basta un selettore: dove il tono non è definito (Severity.Normal) l'icona
   resta del colore del testo. */
.mud-alert .mud-alert-icon,
.upf-alert-icon {
    color:   var(--upf-alert-tone, currentColor);
    opacity: 1;
    flex:    0 0 auto;
}


/* ══════════════════════════════════════════════
   SNACKBAR — superficie neutra scura, tono sul bordo e sull'icona

   Uno snackbar di MudBlazor è un avviso in variante `Filled`: bianco sulla
   tinta piena, cioè 1,59:1 su Warning. Nessun accorgimento sul testo salva
   un bianco su ambra — la superficie va cambiata, ed è anche la forma che
   Material usa per i propri snackbar.

   La superficie è `--mud-palette-dark` e non un valore fisso: è la stessa
   scelta del resto del file, e fa sì che il test diventi rosso se qualcuno
   trasforma `Dark` in un colore chiaro. Misurata 11,51:1 in tema chiaro
   (#313a46) e 11,47:1 in scuro (#353a40).

   Il selettore parte dal contenitore degli snackbar, che è un id: così
   vince su qualunque regola qui sopra, e intercetta la classe di severità
   sia che stia sull'elemento radice sia che stia su un discendente.
   ══════════════════════════════════════════════ */

#mud-snackbar-container .mud-alert-filled-info,
#mud-snackbar-container .mud-alert-filled-success,
#mud-snackbar-container .mud-alert-filled-warning,
#mud-snackbar-container .mud-alert-filled-error {
    background-color: var(--mud-palette-dark);
    color:            var(--mud-palette-dark-text);
    border:           0;
    border-left:      4px solid var(--upf-alert-tone);
    font-weight:      400;
}

#mud-snackbar-container .mud-alert-icon,
#mud-snackbar-container .mud-snackbar-icon {
    color:   var(--upf-alert-tone, currentColor);
    opacity: 1;
}