/* Tavolozza Colori Giaccheverdi */
:root {
    --primary: #5d4037;    /* Marrone */
    --secondary: #2e7d32;  /* Verde */
    --bg: #f0f2f5;
    --white: #ffffff;
    --danger: #c62828;
    --info: #0288d1;
    --text: #333;
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; }

/* Layout Contenitori */
.container { max-width: 1100px; margin: auto; background: var(--white); padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

/* Barra Superiore */
.top-bar { 
    background: #333; color: white; padding: 15px 30px; 
    display: flex; justify-content: space-between; align-items: center;
    border-radius: 8px; margin-bottom: 25px;
}
.top-bar a { color: white; text-decoration: none; font-size: 0.9rem; margin-left: 15px; }

/* Tabelle */
table { width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--white); }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
th { background: var(--primary); color: white; }
tr:hover { background: #f9f9f9; }

/* Pulsanti */
.btn { 
    padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; 
    color: white; text-decoration: none; font-weight: bold; 
    display: inline-block; font-size: 13px; transition: 0.3s;
}
.btn-main { background: var(--primary); }
.btn-add { background: var(--secondary); }
.btn-del { background: var(--danger); }
.btn-edit { background: var(--info); }
.btn:hover { opacity: 0.8; transform: translateY(-1px); }
.btn-edit, .btn-del {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Rimuove il padding per farli perfettamente tondi/quadrati */
}

.btn-edit i, .btn-del i {
    font-size: 1.1rem;
}

.green-btn {
    background-color: #20c997;
    color: white;
    /*border: none;
    /*transition: background 0.3s ease;*/
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Rimuove il padding per farli perfettamente tondi/quadrati */
}

.green-btn:hover {
    background-color: #1aa179; /* Un verde leggermente più scuro al passaggio del mouse */
    color: white;
}

/* Form e Input */
.form-card { background: #f9f9f9; padding: 20px; border-radius: 10px; border: 1px solid #ddd; margin-bottom: 30px; }
input, select, textarea { 
    width: 100%; padding: 10px; margin: 8px 0; 
    border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; 
}

/* Badge e Stati */
.badge { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.status-on { color: var(--secondary); font-weight: bold; }
.status-off { color: var(--danger); font-weight: bold; }

/* Dashboard Grid */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; }
.dash-card {
    background: white; padding: 30px; border-radius: 15px;
    text-decoration: none; color: var(--text); box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: 0.3s; border-top: 5px solid var(--primary); text-align: center;
}
.dash-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

.password-wrapper input {
    /* Assicurati che i bordi e il raggio siano uguali al campo username */
    box-sizing: border-box; 
}

#togglePassword:hover {
    color: var(--secondary) !important; /* Diventa verde al passaggio del mouse */
}
/* Contenitore per le pillole */
    .permissions-grid {
        display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
        gap: 12px;
        margin-top: 10px;
    }

    /* Stile della singola etichetta (pillola) */
    .permission-item {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #f1f3f5;
        padding: 10px 15px;
        border-radius: 8px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
    }

    /* Effetto hover */
    .permission-item:hover {
        background: #e9ecef;
        border-color: #dee2e6;
    }

    /* Quando il checkbox è selezionato (cambia bordo e sfondo) */
    .permission-item.active {
        background: #e7f5ff;
        border-color: #339af0;
        color: #1971c2;
    }

    /* Nascondiamo il checkbox originale per un look più pulito (opzionale) 
       o lo lasciamo piccolo a lato */
    .permission-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.ck-editor__editable_inline {
        min-height: 300px; /* Qui decidi l'altezza minima */
    }



/*POP ALERT*/
/* Sfondo oscurato */
#custom-alert-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center; justify-content: center;
}

/* Scatola dell'alert */
.custom-alert-box {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-width: 400px;
    width: 90%;
    text-align: center;
    font-family: sans-serif;
}

.alert-success-icon { color: #20c997; font-size: 3em; margin-bottom: 15px; }
.alert-stats { text-align: left; background: #f8f9fa; padding: 15px; border-radius: 10px; margin: 15px 0; }
.alert-btn { background: #20c997; color: white; border: none; padding: 10px 25px; border-radius: 50px; cursor: pointer; font-weight: bold; }


/* =====================================================================
   AGGIUNTE NUOVA VERSIONE
   ===================================================================== */

h1, h2 { margin-top: 0; }
a { color: #1971c2; }
.sottotitolo { color: #666; margin-top: -5px; }
.pagina-titolo { color: #20c997; margin-bottom: 20px; }
.titoletto { color: #495057; margin: 20px 0 12px; font-size: 1.05rem; }
.nota { color: #888; font-size: 0.85em; font-weight: normal; }
label { font-weight: 600; font-size: 0.9rem; color: #444; }
textarea { font-family: inherit; }
code { background: #f1f3f5; padding: 2px 6px; border-radius: 4px; }

/* Barra superiore */
.top-bar { flex-wrap: wrap; gap: 10px; }
.top-bar .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.btn-logout { background: var(--danger); padding: 5px 10px; border-radius: 4px; }

/* Messaggi dopo un salvataggio */
.flash { padding: 12px 15px; border-radius: 8px; margin-bottom: 20px; font-weight: 600; transition: opacity .6s; }
.flash-ok { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.flash-errore { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

/* Moduli */
.form-card { background: #fff; border-left: 5px solid var(--primary); box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.form-card.modifica { border-left-color: #f39c12; }
.form-card h3 { margin-top: 0; }
.griglia-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 5px 15px; }
.griglia-form .intera { grid-column: 1 / -1; }
.griglia-form label { display: block; margin-top: 6px; }
.griglia-form small { display: block; color: #666; }
.riga-pulsanti { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; align-items: center; }
form.inline { display: inline; margin: 0; }

/* Pulsanti */
.btn-grigio { background: #6c757d; }
.btn-teal { background: #20c997; }
.btn-giallo { background: #ffc107; color: #333; }
.btn-blu { background: #4285F4; }
.btn.btn-grande { width: auto; height: auto; padding: 10px 18px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.btn.btn-tondo { width: auto; height: auto; padding: 10px 20px; border-radius: 50px; display: inline-flex; align-items: center; gap: 6px; }
.btn:disabled { opacity: .6; cursor: wait; }
.azioni { text-align: right; white-space: nowrap; }
.azioni .btn { width: 35px; height: 35px; padding: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 3px; }
.stato-link { background: none; border: none; cursor: pointer; font-weight: bold; padding: 0; font-size: 0.9rem; }
.stato-link.on { color: #27ae60; }
.stato-link.off { color: #e74c3c; }

/* Tabelle */
.tabella-scroll { width: 100%; overflow-x: auto; }
.tabella-scroll table { min-width: 640px; }
td.vuoto, .vuoto { text-align: center; color: #999; padding: 25px; }
.tag { display: inline-block; font-size: 0.85em; background: #f1f2f6; padding: 3px 8px; border-radius: 4px; }
.tag-verde { background: #e8f5e9; color: #007F5D; font-weight: bold; text-transform: uppercase; font-size: 0.78rem; }
.miniatura { width: 120px; height: 80px; overflow: hidden; border-radius: 6px; background: #eee; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; }

/* Filtri sopra le tabelle */
.barra-filtri { background: #fff; padding: 15px 20px; border-radius: 8px; border: 1px solid #eee; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: space-between; }
.campo-cerca { position: relative; flex: 1; min-width: 240px; }
.campo-cerca i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; }
.campo-cerca input { padding-left: 35px; margin: 0; }
.filtri-categorie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.filtri-categorie button { padding: 7px 14px; border-radius: 20px; border: 1px solid #ddd; background: #fff; color: #666; cursor: pointer; font-size: 0.78rem; font-weight: bold; transition: .2s; }
.filtri-categorie button.attivo { background: #007F5D; border-color: #007F5D; color: #fff; }

/* Dashboard */
.dash-card i { font-size: 2.5em; margin-bottom: 15px; display: block; }
.dash-card h3 { margin: 0; }
.dash-card p { font-size: 0.9em; color: #666; margin: 10px 0 0; }
.dashboard-grid { margin-top: 30px; }

/* Pagina di login */
body.pagina-login { background: var(--primary); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 0; }
.login-card { background: #fff; padding: 30px; border-radius: 12px; width: 100%; max-width: 350px; text-align: center; margin: 15px; }
.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 40px; }
#togglePassword { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #666; }

.accesso-negato { text-align: center; margin: 60px 0; }
.accesso-negato i { font-size: 3em; color: #dc3545; }
.accesso-negato h1 { color: #dc3545; }
.accesso-negato a { color: #20c997; text-decoration: none; font-weight: bold; }

.piede-admin { text-align: center; margin-top: 40px; padding: 20px; color: #888; font-size: 0.8rem; }

/* Finestra di messaggio / conferma */
.custom-alert-box h2 { margin: 0 0 10px; }
.alert-testo { color: #555; font-size: 1.05em; margin: 15px 0 20px; line-height: 1.5; }
.alert-pulsanti { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
#alert-annulla { background: #6c757d; display: none; }

/* Finestra grande (schede e moduli) */
.modale { display: none; position: fixed; z-index: 9990; inset: 0; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; backdrop-filter: blur(3px); padding: 15px; }
.modale-box { background: #fff; padding: 25px; border-radius: 12px; width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modale-box h3 { color: #20c997; border-bottom: 2px solid #eee; padding-bottom: 10px; margin-top: 0; }
.caricamento { text-align: center; padding: 20px; color: #666; }

/* Rubrica: statistiche */
.statistiche { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; }
.stat { background: #fff; border-left: 5px solid #20c997; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); display: flex; flex-direction: column; min-width: 160px; }
.stat span { color: #666; font-size: 0.75em; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.stat strong { color: #20c997; font-size: 2.2em; line-height: 1; margin-top: 5px; }
.stat.blu { border-left-color: #0d6efd; }
.stat.blu strong { color: #0d6efd; }
.stat.azzurro { border-left-color: #4285F4; }
.stat.azzurro strong { color: #4285F4; }

.pannello { background: #f4f7f6; padding: 20px; border-radius: 8px; border: 1px solid #ddd; margin: 25px 0 20px; }
.pannello h3 { margin-top: 0; }

/* Pillole selezionabili (destinatari e permessi) */
.griglia-pillole { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pillola { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; background: #fff; padding: 12px; border-radius: 8px; border: 2px solid #dee2e6; transition: all .2s ease; user-select: none; font-weight: 600; color: #333; }
.pillola:hover { border-color: #20c997; background: #f8f9fa; }
.pillola input { display: none; }
.pillola.attiva { background: #20c997; border-color: #1ba87e; color: #fff; box-shadow: 0 4px 10px rgba(32,201,151,0.3); }
.pillola.tutti { grid-column: 1 / -1; background: #e9ecef; justify-content: center; }
.pillola.tutti.attiva { background: #495057; border-color: #343a40; color: #fff; }
.pillola.disabilitata { opacity: .5; pointer-events: none; }
.pillola .conta { background: rgba(0,0,0,0.08); padding: 2px 8px; border-radius: 10px; font-size: 0.8em; }
.permissions-grid .pillola { justify-content: center; text-align: center; min-height: 45px; font-size: 14px; }

/* Rubrica: barra e tabella */
.barra-rubrica { margin: 20px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.barra-rubrica input[type="text"] { flex: 1; min-width: 240px; margin: 0; padding: 12px; font-size: 16px; }
#tabellaVolontari .btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 6px; font-size: 14px; border: 1px solid transparent; vertical-align: middle; margin: 0 2px; }
.btn-sospeso { background: #f8f9fa; color: #ffc107; border-color: #ffc107 !important; }
.btn-sospeso.attivo { background: #ffc107; color: #000; }
.btn-blacklist { background: #f8f9fa; color: #6c757d; border-color: #6c757d !important; }
.btn-blacklist.attivo { background: #dc3545; color: #fff; border-color: #bd2130 !important; }
tr.riga-sospesa { background: #fff3cd55; }
tr.riga-blacklist { background: #f8d7da55; }

/* Rubrica: scheda volontario */
.avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #20c997; background: #eee; flex-shrink: 0; }
.avatar-iniziali { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #20c997; background: #e6faf4; color: #20c997; display: flex; align-items: center; justify-content: center; font-size: 2em; font-weight: bold; flex-shrink: 0; }
.scheda-testa { display: flex; align-items: center; gap: 20px; border-bottom: 2px solid #20c997; padding-bottom: 15px; flex-wrap: wrap; }
.scheda-testa h2 { margin: 0; color: #333; }
.scheda-luogo { margin-left: auto; font-weight: bold; color: #4285F4; }
.chip { display: inline-block; margin-top: 5px; background: #e9ecef; padding: 4px 12px; border-radius: 15px; font-size: 0.85em; color: #444; font-weight: bold; }
.scheda-dati { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; font-size: 1.05em; }
.etichetta { display: block; font-size: 0.7em; color: #999; text-transform: uppercase; font-weight: bold; }
.scheda-piede { margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.box-foto { margin-top: 15px; background: #f9f9f9; padding: 15px; border-radius: 8px; border: 1px dashed #ccc; text-align: center; }
.box-consenso { margin-top: 15px; padding: 10px; background: #e9f7ef; border-radius: 8px; border: 1px solid #b2d8c5; }
.box-consenso label { display: flex; align-items: center; cursor: pointer; color: #155724; }
.box-consenso input { width: 20px; height: 20px; margin: 0 10px 0 0; }

/* Barra di avanzamento caricamento */
.barra-progresso { display: none; margin-top: 15px; }
.barra-progresso .fondo { width: 100%; background: #e9ecef; border-radius: 10px; height: 14px; overflow: hidden; }
.barra-progresso .riempimento { width: 0; height: 100%; background: #20c997; transition: width .2s; }

/* Preferenze */
.parametri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; margin-top: 25px; }
.box-parametro { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; }
.box-parametro h3 { border-bottom: 2px solid #20c997; padding-bottom: 10px; margin-top: 0; }
.box-parametro form.aggiungi { display: flex; gap: 8px; margin-bottom: 15px; align-items: center; }
.box-parametro form.aggiungi input, .box-parametro form.aggiungi select { margin: 0; }
.box-parametro form.aggiungi .btn { flex-shrink: 0; width: 40px; height: 38px; padding: 0; }
.box-parametro table { margin-top: 0; }
.box-parametro td { padding: 9px 6px; }
.reposition-container { width: 100%; height: 200px; overflow: hidden; cursor: ns-resize; position: relative; background: #eee; border-radius: 8px; border: 2px dashed #ccc; margin: 10px 0; }
.reposition-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; pointer-events: none; display: none; }
.reposition-container .segnaposto { text-align: center; padding-top: 85px; color: #999; }

/* Posta */
.email-elenco tr.non-letta td { font-weight: 800; color: #000; background: #f0fff9; }
.email-elenco tr.letta td { color: #777; }
.email-elenco a { color: inherit; text-decoration: none; display: block; }
.email-testa { font-size: 0.9em; color: #666; margin-bottom: 20px; line-height: 1.6; }
.email-corpo { width: 100%; height: 520px; resize: vertical; border: 1px solid #eee; border-radius: 6px; background: #fff; }
.allegati { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #ddd; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.allegati a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #333; padding: 8px 14px; background: #fff; border: 1px solid #20c997; border-radius: 5px; font-size: 0.85rem; }
.account-attivo { background: #f1f3f5; padding: 10px 15px; border-radius: 5px; border-left: 5px solid #20c997; display: inline-block; margin-bottom: 15px; }

/* Telefono */
@media (max-width: 700px) {
    body { padding: 8px; }
    .container { padding: 15px; }
    .top-bar { padding: 12px 15px; }
    .top-bar a { margin-left: 8px; }
    .scheda-dati { grid-template-columns: 1fr; }
    .scheda-luogo { margin-left: 0; }
    .barra-rubrica .btn-grande { flex: 1 1 45%; justify-content: center; }
}
.box-casella { margin-top: 15px; padding: 15px; border: 2px solid #20c997; border-radius: 10px; background: #f0fffb; }