/* project/static/css/notifications.css */

/* --- Stili per le Notifiche Pop-up --- */
#notification-area {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    align-items: center;
    width: 100%;
    max-width: 500px; /* Aumentato leggermente la larghezza massima dell'area per pop-up più grandi */
}

.notification-popup {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: flex-start; /* Allinea gli elementi (messaggio e X) in alto */
    justify-content: space-between;
    font-size: 1em;
    color: #333;
    
    /* === MODIFICATO: Larghezza dinamica e contenimento del testo === */
    width: fit-content; /* Permette al pop-up di adattarsi al contenuto */
    min-width: 280px; /* Larghezza minima per leggibilità */
    max-width: 90%; /* Limite massimo come percentuale del genitore (#notification-area) */
    
    text-align: left; /* Allinea il testo a sinistra per una migliore leggibilità dei paragrafi lunghi */
    word-break: break-word; /* Forza il testo a capo anche se non ci sono spazi, se necessario */
    overflow-wrap: break-word; /* Proprietà alternativa per gestire il testo lungo */
    
    box-sizing: border-box; /* Include padding e border nella larghezza */

    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    pointer-events: all;
}

.notification-popup .notification-message {
    /* === MODIFICATO: Assicuriamo che il messaggio riempia lo spazio senza restringersi === */
    flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis: Permette al messaggio di crescere e restringersi ma non sotto il suo contenuto intrinseco */
    margin-right: 10px;
    min-width: 0; /* Consente al contenuto flex di restringersi se necessario */
}

.notification-popup .notification-close-btn {
    background: none;
    border: none;
    font-size: 1.2em;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    margin-left: 10px;
    transition: color 0.2s ease;
    flex-shrink: 0; /* Impedisce che il pulsante di chiusura si rimpicciolisca */
}

.notification-popup .notification-close-btn:hover {
    color: #333;
}

/* Stili specifici per tipo di notifica (categorie Flask) */
.notification-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #badbcc;
}

.notification-error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.notification-warning {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

.notification-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-color: #bee5eb;
}

/* --- NUOVO: Definizione della classe Fade Out --- */
/*
 * Questa classe viene aggiunta dal JS (apputils.js)
 * per avviare l'animazione di chiusura.
*/
.notification-popup.fade-out {
    opacity: 0;
    transform: translateY(-20px); /* Fa scorrere la notifica verso l'alto mentre scompare */
}