/* === SYSTEM MODALS (Confirm & Alert) === */
.confirm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Sfondo scuro semitrasparente */
    backdrop-filter: blur(4px); /* Effetto sfocatura moderno */
    z-index: 9999; /* Sopra a tutto, anche alla sidebar */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeInModal 0.2s forwards;
}

.confirm-overlay.hidden {
    display: none;
}

.confirm-modal {
    background: var(--card-bg-color);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 90%;
    max-width: 400px;
    text-align: center;
    border: 1px solid var(--border-color);
    transform: scale(0.95);
    animation: popInModal 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.confirm-modal h2 {
    margin-top: 0;
    color: var(--text-color);
    font-size: 1.5rem;
}

.confirm-modal p {
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end; /* O 'center' se preferisci */
    gap: 1rem;
}

@keyframes fadeInModal { to { opacity: 1; } }
@keyframes popInModal { to { transform: scale(1); } }
/* === FIX MODALE CONFERMA === */

/* 1. Il contenitore scuro che copre tutto lo schermo */
.confirm-overlay {
    position: fixed !important; /* Forza la posizione fissa rispetto allo schermo */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6); /* Sfondo scuro semitrasparente */
    backdrop-filter: blur(4px); /* Effetto sfocatura */
    z-index: 99999 !important; /* Deve essere il numero più alto di tutti (sopra sidebar e header) */
    display: flex;
    align-items: center;     /* Centra verticalmente */
    justify-content: center; /* Centra orizzontalmente */
    opacity: 0;
    pointer-events: none; /* Non cliccabile quando invisibile */
    transition: opacity 0.2s ease;
}

/* Quando non ha la classe 'hidden', diventa visibile */
.confirm-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* La classe hidden nasconde tutto (se usata via JS) */
.confirm-overlay.hidden {
    display: none !important;
}

/* 2. Il box bianco centrale */
.confirm-modal {
    background-color: var(--card-bg-color, #ffffff);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 450px;
    text-align: center;
    border: 1px solid var(--border-color);
    transform: scale(0.95);
    transition: transform 0.2s ease;
    position: relative; /* Per stare dentro l'overlay */
}

/* Animazione di entrata */
.confirm-overlay:not(.hidden) .confirm-modal {
    transform: scale(1);
}

.confirm-modal h2 {
    margin-top: 0;
    color: var(--text-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.confirm-modal p {
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.confirm-actions {
    display: flex;
    justify-content: center; /* Centra i bottoni */
    gap: 1rem;
}

/* Stile bottoni specifico per la modale */
.confirm-actions .btn {
    min-width: 100px;
}