/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        messages.css
 * Path:        public/css/messages.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce gli stili dei messaggi flash di successo, errore e avviso, inclusi pulsante di chiusura e icone.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: messaggi applicativi.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato dalle view;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: contenitori, varianti e chiusura dei messaggi
 * ========================================================== */

/* Wrapper dei messaggi flash centrato sul contenuto principale. */
.msg-container {
    width: 100%;
    /* max-width: 1400px; */
    margin: 15px auto;
}

/* Struttura base dell'alert: icona e contenuto su due colonne. */
.msg-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    padding: 10px 40px 14px 16px;
    margin-bottom: 22px;
    border-radius: var(--radius-small);
    border: 1px solid transparent;
    border-left: 5px solid transparent;
    position: relative; /* FONDAMENTALE: permette al pulsante absolute di posizionarsi qui */
}

.msg-alert[hidden] {
    display: none !important;
}


/* Cella per l'icona semantica */
.msg-icon {
    vertical-align: top;
    width: 20px;
    font-weight: bold;
    font-size: 26px;
}

/* Cella per il testo del messaggio */
.msg-content {
    vertical-align: top;
    font-size: 14px;
    line-height: 1.5;
    margin-left: 8px;
}

/* ==========================================================
 * Varianti semantiche
 * ========================================================== */

/* Variante: successo. */
.msg-success {
    background-color: var(--color-msg-success-bg);
    color: var(--color-msg-success-text);
    border-color: var(--color-msg-success-border);
    border-left-color: var(--color-msg-success-accent);
}

/* Variante: pericolo / errore accessi. */
.msg-danger {
    background-color: var(--color-msg-danger-bg);
    color: var(--color-msg-danger-text);
    border-color: var(--color-msg-danger-border);
    border-left-color: var(--color-msg-danger-accent);
}

/* Il messaggio di errore riceve il focus al caricamento (vedi messages.js): non
   e' un elemento su cui si agisce, quindi niente contorno; per attirare
   l'attenzione un alone rosso che si spegne in un secondo e mezzo. */
.msg-danger:focus,
.msg-danger:focus-visible {
    outline: none;
}

.msg-container .msg-danger {
    animation: msg-danger-pulse 1.5s ease-out 1;
}

@keyframes msg-danger-pulse {
    0%   { box-shadow: 0 0 0 0 var(--color-msg-danger-accent); }
    100% { box-shadow: 0 0 0 14px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .msg-container .msg-danger {
        animation: none;
    }
}

/* Variante: avviso non bloccante. */
.msg-warning {
    background-color: var(--color-msg-warning-bg);
    color: var(--color-msg-warning-text);
    border-color: var(--color-msg-warning-border);
    border-left-color: var(--color-msg-warning-accent);
}

/* Icona: Successo */
.msg-success .msg-icon {
    color: var(--color-msg-success-accent);
}

/* Icona: Pericolo */
.msg-danger .msg-icon {
    color: var(--color-msg-danger-accent);
}

/* Icona: Avviso */
.msg-warning .msg-icon {
    color: var(--color-msg-warning-accent);
}

/* ==========================================================
 * Pulsante di chiusura
 * ========================================================== */

/* Pulsante di chiusura manuale, posizionato in absolute dentro .msg-alert. */
button.msg-close-btn, 
.msg-alert button.msg-close-btn {
    position: absolute;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    z-index: 1; /* Aggiunto: assicura che il pulsante stia sopra il testo */
    
    background: transparent !important;
    background-image: none !important;
    padding: 0 5px !important; /* Aggiunto padding per rendere l'area cliccabile più ampia */
    width: auto !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-block !important;
    
    font-size: 24px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: inherit !important;
    opacity: 0.5 !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}


/* Effetto hover specifico per il pulsante di chiusura */
button.msg-close-btn:hover,
.msg-alert button.msg-close-btn:hover {
    background: transparent !important;
    transform: translateY(-50%) scale(1.1) !important;
    opacity: 0.9 !important;
    box-shadow: none !important;
}