/*
 * Avvisi di pagina — restyling ondata 0, ristrutturazione 2026-10: fondo tenue, testo
 * scuro, simbolo nel colore dello stato; nessun bordo laterale colorato.
 * Gli esiti delle azioni HTMX usano i toast (K-16), non gli avvisi.
 */

/* Testo con grassetti e link scorre normalmente (prima, in flex, ogni pezzo diventava una
   colonna: "Attenzione: | stai per | Bianchi Ginevra…"). Flex solo con icona o chiusura. */
.alert {
    display: block;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--t-16);
    line-height: 1.5;
    border: 1px solid transparent;
    margin-bottom: var(--s-4);
    transition: opacity var(--m-base) ease-out;
}

.alert:has(> svg, > .alert-icon, > .alert-dismiss) {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
}

.alert.is-dismissed {
    opacity: 0;
}

.alert svg,
.alert .alert-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-success {
    background: var(--c-success-soft);
    color: var(--c-ink);
}

.alert-warning {
    background: var(--c-caution-soft);
    color: var(--c-ink);
}

.alert-danger,
.alert-error {
    background: var(--c-danger-soft);
    color: var(--c-ink);
}

.alert-info {
    background: var(--c-info-soft);
    color: var(--c-ink);
}

.alert-success > svg, .alert-success > .alert-icon { color: var(--c-success); }
.alert-warning > svg, .alert-warning > .alert-icon { color: var(--c-caution); }
.alert-danger > svg, .alert-danger > .alert-icon,
.alert-error > svg, .alert-error > .alert-icon { color: var(--c-danger); }
.alert-info > svg, .alert-info > .alert-icon { color: var(--c-info); }

.alert a:not(.btn) {
    color: inherit;
    text-decoration: underline;
}

.alert-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: var(--s-1);
    border-radius: var(--r-xs);
    min-width: 36px;
    min-height: 36px;
}

.alert-dismiss:hover {
    background: var(--c-surface);
}

/* Pagine del giorno di gara in sola lettura (D-8, 02/10/2026): avviso con il pulsante della regia */
.alert-regia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.alert-regia-text {
    margin: 0;
}

.alert-regia-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* Messaggi lunghi (03/10/2026, U-38): prima frase in vista, il resto in «Dettagli» */
.alert-body {
    flex: 1;
    min-width: 0;
}

.alert-details {
    margin-top: var(--s-1);
}

.alert-details > summary {
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.alert-details > summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.alert-details > p {
    margin: var(--s-1) 0 0;
}