* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
            padding: 20px;
        }

        /* width:100%+box-sizing:border-box+padding percentuale laterale: stessa
           identica formula di #footer piu' sotto, cosi' header e footer hanno
           sempre la stessa larghezza e lo stesso margine laterale - a
           prescindere dal contenitore della pagina (vedi nota in admin.php/
           dashboard.php, dove header.php e' stato spostato fuori da
           .container proprio per non restare piu' stretto del footer, che
           invece e' gia' fuori da qualunque container). */
        h1 {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            text-align: center;
            margin: 5px 0 15px 0;
            font-size: 30px;
            font-weight: bold;
            border-bottom: 2px solid #1a6985;
            width: 100%;
            box-sizing: border-box;
            padding: 10px 2.5%;
        }

        /* Separatore verde sotto l'header, uniforme su tutte le pagine -
           sostituisce gli style="border: 2px solid green; ..." inline
           sparsi nei vari file. Va dentro <div class="container">, quindi
           e' largo come il container (l'header invece e' fuori dal
           container e largo come il body - vedi nota sopra su h1). */
        .separatore-container {
            border: none;
            border-top: 2px solid green;
            border-radius: 2px;
            margin: 10px 0 20px 0;
            width: 100%;
        }

        /* Link "Torna al Dashboard" tra il bordo blu dell'header e il
           separatore verde (planner.php, report.php - stessa posizione di
           admin.php, che pero' usa .testo-a-destra senza margini propri). */
        .link-ritorna-dashboard {
            text-align: right;
            margin: 10px 2.5% 5px 2.5%;
        }

        /* Avatar Google nell'header (header.php) - qui invece che solo in
           app.css perche' style.css e' caricato da TUTTE le pagine: senza
           questo, dashboard.php/prenota.php (che non caricano app.css)
           mostravano l'avatar alla dimensione naturale dell'immagine,
           invece di 40x40 come planner.php. object-fit:cover evita che
           foto non quadrate vengano deformate dentro il cerchio. */
        .user-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        /* index.php - wrapper centrato del bottone di login Google */
        .centro-login-google {
            text-align: center;
        }

        /* Utility generiche riusate in piu' pagine (dashboard.php, admin.php):
           interlinea per blocchi di testo con icone fa-2x, form/etichette in
           linea invece che a blocco. */
        .riga-alta {
            line-height: 2.2;
        }
        .riga-altissima {
            line-height: 2.4;
        }
        .form-inline-block {
            display: inline-block;
        }
        .form-inline-block.con-margine-destro {
            margin-right: 10px;
        }
        .label-cliccabile {
            cursor: pointer;
        }

        .navigazione {
            display: flex;
            justify-content: center;
            gap: 20px; /* Spazio uniforme tra gli elementi */
            margin: 20px 0;
            font-size: 16px;
        }

        .navigazione a, .navigazione span {
            text-decoration: none;
            color: black;
            font-weight: bold;
        }

        .navigazione a:hover {
            text-decoration: none;
            color: inherit;
        }

        /* Legenda collassabile "Regole prenotazione" (planner_render.php),
           sotto la barra di navigazione settimane e sopra la tabella -
           stile compatto, chiusa di default. */
        .legenda-regole-prenotazione {
            text-align: center;
            margin: -10px 0 15px;
            font-size: 14px;
        }
        .link-legenda-regole {
            text-decoration: none;
            color: #1a6985;
            font-weight: bold;
            cursor: pointer;
        }
        .link-legenda-regole:hover {
            text-decoration: underline;
        }
        .contenuto-legenda-regole {
            display: none;
            max-width: 600px;
            margin: 10px auto 0;
            padding: 10px 16px;
            background: #f0f4f8;
            border: 1px solid #1a6985;
            border-radius: 6px;
            text-align: left;
            font-size: 13px;
        }
        .contenuto-legenda-regole.aperto {
            display: block;
        }
        .contenuto-legenda-regole ul {
            margin: 0;
            padding-left: 20px;
        }
        .contenuto-legenda-regole li {
            margin-bottom: 6px;
        }
        .contenuto-legenda-regole li:last-child {
            margin-bottom: 0;
        }
        .legenda-separatore {
            border: none;
            border-top: 1px solid #c5d5e0;
            margin: 8px 0;
        }

        /* Info data vigore orario (sopra la legenda, planner_render.php) */
        .info-data-vigore-orario {
            display: table;
            margin: -6px auto 18px;
            background: #f0f7f0;
            border: 1px solid #1f8a3b;
            border-radius: 4px;
            padding: 6px 10px;
            font-size: 13px;
            color: #155724;
            line-height: 1.4;
        }

        table {
            width: 100%;
            max-width: 900px; /* Limita la larghezza della tabella per dispositivi più larghi */
            margin: 0 auto;
            /* border-separate + border-spacing invece di collapse: ogni
               cella diventa una "scheda" con angoli smussati e un piccolo
               distacco dalle vicine, invece della griglia fitta e squadrata
               di prima (con collapse il border-radius non si vede sulle
               celle interne, solo sui 4 angoli esterni della tabella). */
            border-collapse: separate;
            border-spacing: 4px;
        }

        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid #e3e8ea;
            border-radius: 6px;
        }
		.giorno-normale {
			background-color: white;  /* Colore di sfondo normale */
			position: relative; /* ancora .stelle-eliminate (app.css) in alto a sinistra nella cella */
			overflow: visible; /* le stelle (position:absolute) non devono mai forzare un clip/resize della cella */
		}
        .giorno-escluso {
            background-color: #fdecea;
            border: 1px solid #1a6985 !important;
            position: relative;
            overflow: visible;
        }
		
        .disabilitato {
            pointer-events: none;
            text-decoration: none;
            color: #4b4e4e;
            font-style: italic;
        }

        .giorno-escluso .disabilitato {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: #c0392b;
            font-style: normal;
            font-size: 1.1rem;
            font-weight: 600;
            line-height: 1.3;
            height: 100%;
        }

        .giorno-escluso .disabilitato .icona-escluso {
            font-size: 1.4rem;
        }

        .oggi {
            color: red;
            font-weight: bold;
        }
        @media (max-width: 768px) {
            .navigazione {
                flex-direction: column;
                align-items: center;
            }

            table {
                width: 100%;
            }
        }
		/* Sfondo tenue per tutte le celle della colonna del giorno corrente */
		.oggi-colonna {
			background-color: #e0f7fa !important; /* Colore tenue (azzurro chiaro o colore che preferisci) */
			border: 2px solid red !important; /* Bordo rosso per la colonna del giorno corrente */
		}

        /* Aggiungi uno sfondo diverso per l'orario corrente */
        .orario-corrente {
            background-color: #fffb00 !important; /* Colore per l'orario corrente */
            border: 4px solid #ff6600 !important; /* Bordo evidenziato per la cella dell'orario corrente */
            font-weight: bold !important; /* Rende il testo in grassetto per l'orario corrente */
        }

		/* Rimuovere il grassetto dai link degli orari */
		.giorno-normale a, .giorno-escluso a {
			font-weight: normal; /* Assicurati che i link non siano in grassetto */
		}
		/* Rimuovi il trattino tra gli orari e visualizzali su due righe */
		.orario-doppio-linea {
			display: block;
			text-align: center;
		}
		.link-orario {
			text-decoration: none;  /* Rimuove la sottolineatura dai link */
			color: black;  /* Colore del testo del link */
		}
		.link-orario:hover {
			color: #007bff;  /* Colore del link al passaggio del mouse */
		}
		/* Sfondo per tutte le celle delle intestazioni di colonna (non del giorno corrente) */
		.no-oggi-colonna {
			background-color: #1a6985;
			color:white;
			font-weight: normal;
		}
        .intestazione-giorno-escluso,
        th.oggi-colonna.giorno-escluso {
            background-color: #fdecea;
            color: #c0392b;
            font-weight: normal;
            border: 1px solid #1a6985;
        }
        /* Colora di rosso la prima classe (quella in orario) */
        .rosso{
            color: red;
            font-weight: bold;
            line-height: 2.0;
        }
        .rossoTooltip{
            color: red;
            font-weight: bold;
            line-height: 2.0;
        }
        .rosso i{
            color:red;
        }
        /* Colora di nero le altre classi (non in orario) */
        .nero{
            color: black;
            font-weight: normal;
            line-height: 2.0;
        }
        .neroTooltip{
            color: black;
            font-weight: normal;
            line-height: 2.0;
        }
		.neroTooltip i{
            color: black;
		}
        .nero i{
            color:black;
        }
        .orario-colonna{
            background-color: #d1e1e7;
            border: 1px solid #1a6985;
        }
        /* Footer a tre righe (header.php/footer.php, estratti dalle pagine
           singole): sfondo del colore principale del tema invece del grigio
           chiaro precedente, per coerenza con header/pulsanti/intestazioni
           di colonna che usano gia' #1a6985 in tutto il sito. */
        #footer{
            background-color: #1a6985;
            color: #ffffff;
            margin:30px auto 0 auto;
            width:100%;
            box-sizing: border-box;
            text-align:center;
            padding:10px 2.5%;
            font-size:14px;
            display: block !important;
            overflow: visible !important;
        }
        /* footer.php ha solo due righe (riga-1: nome app+versione+data+
           copyright uniti sulla stessa riga; riga-3: licenza) - footer-riga-2
           non esiste piu' nel markup, rimossa anche qui. */
        .footer-riga-1 {
            font-weight: bold;
        }
        .footer-riga-3 {
            margin-top: 8px;
            font-size: 0.78em;
            opacity: 0.8;
        }
        i.fa-star{
            color: #1daa1f;
        }
        i.fa-eye{
            color: #13817d;
        }
        i.fa-trash-can{
            color: #7d1381;
        }
        i.fa-unlock{
            color: #ecb6a0;
        }
        i.fa-lock{
            color: #CC9D1D;
        }
        .update{
          width: 40%;
          background-color: #ffffff;
          box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
          margin-top: 20px;
          margin-left: auto;
          margin-right: auto;
        }
        .update h2 {
            font-size: 24px; /* Dimensione del font */
            font-weight: bold; /* Spessore del testo */
            color: #3274d6; /* Colore principale */
            text-align: center; /* Allinea il testo al centro */
            margin-bottom: 10px; /* Spazio sotto il titolo */
            margin-top: 0; /* Rimuove margine superiore */
            padding: 10px; /* Spaziatura interna */
            background-color: #f0f4f8; /* Sfondo leggero per evidenziarlo */
            border-radius: 5px; /* Angoli arrotondati */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Aggiunge una leggera ombra */
        }
        .update form {
            display: flex;
            flex-direction: column; /* Disposizione verticale di ogni riga (coppia label-campo) */
            gap: 3px; /* Spaziatura tra le righe */
            padding-top: 20px;
            color: #040f13;
            flex-wrap: wrap;
            justify-content: center;
        }
        .update form .form-group {
            display: flex; /* Disposizione orizzontale del label e campo */
            align-items: center; /* Allinea verticalmente al centro */
            /*justify-content: flex-start; /* Allinea a sinistra */
            gap: 10px; /* Spaziatura tra label e campo */
        }
        .update form label {
           width: 150px; /* Larghezza fissa per i label */
           font-weight: bold; /* Migliora leggibilità */
           height: 30px; /* Altezza uniforme con i campi input */
           display: flex; /* Assicura che il contenuto del label usi Flexbox */
           align-items: center; /* Centra il contenuto verticalmente */
           padding-left: 10px; /* Spazio interno per il testo */
           margin-left: 10px; /* Spazio esterno dal bordo sinistro */
           background-color: #3274d6;
           color: #ffffff;
        }
        .update form label i{
            vertical-align: middle;
            padding-right: 5px;
          }
        .update form input[type="text"],
        .update form select {
            width: 250px; /* Larghezza del campo */
            height: 30px; /* Altezza uniforme */
            border: 1px solid #dee0e4; /* Bordo */
            padding: 0 5px; /* Spaziatura interna */
            margin: 0; /* Rimuove margini */
            box-sizing: border-box; /* Assicura che padding non alteri larghezza */
            line-height: 30px; /* Allinea testo internamente */
            vertical-align: middle; /* Supporta l'allineamento su alcuni browser */
        }
        .update form input[type="submit"] {
            width: 100%;
            padding: 15px;
           margin-top: 20px;
            background-color: #3274d6;
            border: 0;
            cursor: pointer;
            font-weight: bold;
            color: #ffffff;
            transition: background-color 0.2s;
          }
          .update form input[type="submit"]:hover {
          background-color: #2868c7;
            transition: background-color 0.2s;
          }
          p.spostato-sinistra {
            margin-left: 270px; /* Cambia il valore in base alle tue preferenze */
            line-height: 14px; /* Imposta l'interlinea a 12px */
            margin-bottom:5px;
          }
          #messaggio{
            font-weight:bold;
            color:#0b2d39;
            background-color: #bee0ec;
            text-align: center;
            font-size:16px;
            margin:10px auto;
            border:3px dotted #040f13;
            border-radius: 10px;
            height:auto;
            width: 45%;
            padding: 5px;
            clear:both;
            }
        #messaggio i{
            vertical-align:middle;
            border:none;
            padding:10px;
        }
        hr {
            border: 1px solid #d0f0c0; /* Imposta il colore verde chiaro per il bordo */
            margin: 20px 0; /* Distanza sopra e sotto l'hr */
        }

        /* dashboard.php - box "accesso non valido" (sessione Google assente),
           spostato qui dallo <style> inline della stessa pagina. */
        .box-accesso-non-valido {
            max-width: 480px;
            margin: 60px auto;
            background: #fff;
            border-radius: 8px;
            border-top: 4px solid #1a6985;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            padding: 40px 30px;
            text-align: center;
        }
        .box-accesso-non-valido i.fa-exclamation-circle {
            font-size: 3rem;
            color: #e67e22;
            margin-bottom: 15px;
        }
        .box-accesso-non-valido h2 {
            color: #1a6985;
            margin: 0 0 15px 0;
        }
        .box-accesso-non-valido p {
            color: #444;
            margin-bottom: 25px;
        }
        .box-accesso-non-valido .link-azione {
            display: inline-block;
            margin: 0 10px 20px 10px;
            padding: 10px 20px;
            background: #1a6985;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            border-radius: 4px;
        }
        .box-accesso-non-valido .link-azione:hover {
            background: #134f63;
            text-decoration: none;
        }
        .box-accesso-non-valido .countdown-redirect {
            color: #888;
            font-size: 0.9rem;
        }

        /* dashboard.php - box "utente non autorizzato"/"account disabilitato"
           (mostraPaginaUtenteNonAutorizzato()/mostraPaginaAccountDisabilitato()):
           stesso identico stile in entrambe le funzioni, deduplicato in
           un'unica regola invece dei due <style> inline identici di prima
           (differivano solo nell'icona, gia' impostata via classe FA inline
           nel markup, non nel CSS). */
        .box-utente-non-autorizzato {
            max-width: 480px;
            margin: 60px auto;
            background: #fff;
            border-radius: 8px;
            border-top: 4px solid #1a6985;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            padding: 40px 30px;
            text-align: center;
        }
        .box-utente-non-autorizzato i.fa-user-xmark,
        .box-utente-non-autorizzato i.fa-user-lock {
            font-size: 3rem;
            color: #c0392b;
            margin-bottom: 15px;
        }
        .box-utente-non-autorizzato h2 {
            color: #1a6985;
            margin: 0 0 15px 0;
        }
        .box-utente-non-autorizzato p {
            color: #444;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        .box-utente-non-autorizzato .messaggio-secondario {
            font-size: 0.85rem;
            color: #777;
            margin-bottom: 25px;
        }
        .box-utente-non-autorizzato .link-azione {
            display: inline-block;
            padding: 10px 20px;
            background: #1a6985;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            border-radius: 4px;
        }
        .box-utente-non-autorizzato .link-azione:hover {
            background: #134f63;
        }

        /* dashboard.php - mostraPaginaRichiestaNonValida(): ?user=... usato
           fuori da DEV_MODE. Stesso pattern delle altre box-* sopra. */
        .box-richiesta-non-valida {
            max-width: 480px;
            margin: 60px auto;
            background: #fff;
            border-radius: 8px;
            border-top: 4px solid #1a6985;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            padding: 40px 30px;
            text-align: center;
        }
        .box-richiesta-non-valida i.fa-ban {
            font-size: 3rem;
            color: #c0392b;
            margin-bottom: 15px;
        }
        .box-richiesta-non-valida h2 {
            color: #1a6985;
            margin: 0 0 15px 0;
        }
        .box-richiesta-non-valida p {
            color: #444;
            margin-bottom: 25px;
        }
        .box-richiesta-non-valida .link-azione {
            display: inline-block;
            padding: 10px 20px;
            background: #1a6985;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            border-radius: 4px;
        }
        .box-richiesta-non-valida .link-azione:hover {
            background: #134f63;
        }

        /* index-MANUTENZIONE.php - box "Ops...spiacente" e link admin nascosto,
           spostati qui dallo <style> inline della stessa pagina. */
        .box-manutenzione {
            max-width: 520px;
            margin: 60px auto;
            background: #fff;
            border-radius: 8px;
            border-top: 4px solid #1a6985;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            padding: 40px 30px;
            text-align: center;
        }
        .box-manutenzione i.fa-mug-hot {
            font-size: 3rem;
            color: #6f4e37;
            margin-bottom: 15px;
        }
        .box-manutenzione h2 {
            color: #1a6985;
            margin: 0 0 20px 0;
        }
        .box-manutenzione p {
            color: #444;
            line-height: 1.6;
            margin: 0;
        }
        /* Unico "link" della pagina, per un amministratore che sa dove cliccare
           (es. durante un'interruzione, prima di poter usare admin.php tramite
           il percorso normale): un punto quasi invisibile in basso a destra,
           non un pulsante visibile come gli altri link dell'app. */
        .link-admin-nascosto {
            position: fixed;
            bottom: 8px;
            right: 8px;
            width: 16px;
            height: 16px;
            opacity: 0.05;
            z-index: 9999;
        }
        .link-admin-nascosto:hover {
            opacity: 0.3;
        }

        /* index-TRANSIZIONE.php - box "Sistema in aggiornamento" mostrato
           ai docenti quando l'accesso e' temporaneamente disabilitato. */
        .box-transizione {
            max-width: 520px;
            margin: 60px auto;
            background: #fff8e1;
            border-radius: 8px;
            border-top: 4px solid #e67e22;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            padding: 40px 30px;
            text-align: center;
        }
        .box-transizione i.fa-calendar-clock {
            font-size: 4rem;
            color: #e67e22;
            margin-bottom: 15px;
        }
        .box-transizione h2 {
            color: #c0530a;
            margin: 0 0 20px 0;
        }
        .box-transizione p {
            color: #5a3a00;
            line-height: 1.6;
            margin: 0 0 12px 0;
        }
        .box-transizione .nota-contatto {
            font-size: 0.9rem;
            color: #7a4500;
            margin-top: 16px;
        }
        .box-transizione .nota-contatto i {
            margin-right: 5px;
        }

        /* Banner "accesso docenti disabilitato" mostrato in dashboard a
           admin/tecnico quando il toggle transizione anno e' su OFF. */
        .banner-transizione-docenti {
            background: #fff3cd;
            border: 1.5px solid #e67e22;
            border-radius: 6px;
            padding: 12px 16px;
            margin: 14px 0 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.3rem;
            color: #7a4500;
            line-height: 1.4;
        }
        .banner-transizione-docenti i {
            color: #e67e22;
            font-size: 1.4rem;
            flex-shrink: 0;
        }
        .banner-transizione-docenti a {
            color: #c0530a;
            font-weight: bold;
            white-space: nowrap;
        }
        .banner-transizione-docenti a:hover {
            text-decoration: underline;
        }
        .bma-accesso-docenti {
            font-size: 1.3rem;
        }
        @media (max-width: 768px) {
            .bma-accesso-docenti {
                font-size: 1rem;
            }
            .banner-transizione-docenti {
                font-size: 1rem;
            }
            .banner-transizione-docenti i {
                font-size: 1.1rem;
            }
        }

        /* Toggle scorrevole (stesso di app.css/admin.php) — duplicato qui
           perché dashboard.php carica solo style.css, non app.css. */
        .toggle-switch { position: relative; display: inline-block; width: 50px; height: 26px; flex-shrink: 0; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-switch .toggle-slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #a94442; border-radius: 26px; transition: background-color 0.2s ease;
        }
        .toggle-switch .toggle-slider::before {
            position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px;
            background-color: #fff; border-radius: 50%; transition: transform 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        .toggle-switch input:checked + .toggle-slider { background-color: #1f8a3b; }
        .toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); }
        .toggle-switch input:disabled + .toggle-slider { background-color: #ccc; cursor: not-allowed; }
        .toggle-switch-label { font-weight: bold; color: #333; }

        /* Banner "sito in manutenzione" mostrato in dashboard a admin/R
           quando la manutenzione è attiva (con bypass, solo loro la vedono). */
        @keyframes pulse-warning {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.4; }
        }
        .banner-manutenzione-admin {
            background: #fff3cd;
            border-left: 4px solid #f39c12;
            border-radius: 6px;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            font-size: 1.3rem;
        }
        .banner-manutenzione-admin .bma-titolo {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            font-size: 1.5rem;
        }
        .banner-manutenzione-admin .bma-titolo .fa-triangle-exclamation {
            animation: pulse-warning 1.5s ease-in-out infinite;
            color: #f39c12;
            font-size: 1.6rem;
        }
        .banner-manutenzione-admin .bma-info {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 10px;
            font-size: 1.3rem;
            color: #5a4a00;
        }
        .banner-manutenzione-admin .bma-info i {
            color: #888;
            margin-top: 2px;
            flex-shrink: 0;
        }
        .banner-manutenzione-admin .bma-toggle-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.3rem;
            color: #5a4a00;
        }
        .banner-manutenzione-admin .bma-toggle-row .fa-power-off {
            color: #e67e22;
        }
        @media (max-width: 768px) {
            .banner-manutenzione-admin {
                font-size: 1rem;
            }
            .banner-manutenzione-admin .bma-titolo {
                font-size: 1.2rem;
            }
            .banner-manutenzione-admin .bma-titolo .fa-triangle-exclamation {
                font-size: 1.3rem;
            }
            .banner-manutenzione-admin .bma-info,
            .banner-manutenzione-admin .bma-toggle-row {
                font-size: 1rem;
            }
        }

        /* primo-avvio.php - box comune alle tre fasi del flusso guidato
           (password, dati amministratore, successo). Regole condivise tra
           mostraFormPrimoAvvio()/mostraFormPrimoAdmin() consolidate qui
           un'unica volta (erano duplicate identiche nei due <style> inline),
           le regole specifiche di ciascuna fase restano separate sotto. */
        .box-primo-avvio {
            max-width: 480px;
            margin: 60px auto;
            background: #fff;
            border-radius: 8px;
            border-top: 4px solid #1a6985;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            padding: 40px 30px;
            text-align: center;
        }
        .box-primo-avvio h2 {
            color: #1a6985;
            margin: 0 0 15px 0;
        }
        .box-primo-avvio p {
            color: #444;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .box-primo-avvio label {
            display: block;
            text-align: left;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        .box-primo-avvio button {
            width: 100%;
            padding: 10px;
            background: #1a6985;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            font-size: 15px;
            cursor: pointer;
        }
        .box-primo-avvio button:hover {
            background: #134f63;
        }
        .avviso-primo-avvio {
            background: #fff3cd;
            border: 2px solid #e67e22;
            color: #7a4a00;
            padding: 12px 16px;
            border-radius: 4px;
            margin-bottom: 20px;
            font-size: 14px;
            text-align: left;
        }
        .msg-errore-primo-avvio {
            background: #f8d7da;
            color: #721c24;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
        }

        /* Specifiche di mostraFormPrimoAvvio() (step 1: password) */
        .box-primo-avvio i.fa-database {
            font-size: 3rem;
            color: #1a6985;
            margin-bottom: 15px;
        }
        .box-primo-avvio input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 15px;
            box-sizing: border-box;
        }
        .box-primo-avvio button i.fa-database {
            font-size: 0.9rem;
            margin-right: 6px;
            margin-bottom: 0;
            color: #fff;
            opacity: 1;
        }
        .box-primo-avvio button:hover i.fa-database {
            color: #fff;
            opacity: 1;
        }
        .box-primo-avvio button:disabled {
            background: #999;
            cursor: not-allowed;
        }
        .avviso-bruteforce {
            color: #e67e22;
            font-size: 0.85rem;
            margin-top: 8px;
        }
        /* Box avviso-bruteforce dentro il form di primo-avvio.php (step 1):
           scoped su .box-primo-avvio per non interferire con
           .box-login-admin .avviso-bruteforce di admin.php (app.css),
           che ha dimensioni/allineamento diversi nello stesso contesto. */
        .box-primo-avvio .avviso-bruteforce {
            text-align: center;
        }
        .box-primo-avvio .avviso-bruteforce i {
            font-size: 1.5rem;
        }
        .box-primo-avvio .avviso-bruteforce strong {
            font-size: 1.1rem;
        }
        .msg-errore-primo-avvio strong {
            font-size: 1.05em;
        }

        /* Specifiche di mostraFormPrimoAdmin() (step 2: dati amministratore) */
        .box-primo-avvio i.fa-user-shield {
            font-size: 3rem;
            color: #1a6985;
            margin-bottom: 15px;
        }
        .box-primo-avvio input[type="text"],
        .box-primo-avvio input[type="email"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 15px;
            box-sizing: border-box;
        }
        .leggenda-primo-admin {
            background: #e8f1f5;
            border: 1px solid #1a6985;
            color: #134f63;
            padding: 12px 16px;
            border-radius: 4px;
            margin-top: 20px;
            font-size: 13px;
            text-align: left;
        }

        /* mostraSuccessoPrimoAvvio() - box verde di successo, classe distinta
           (.box-primo-avvio-successo, non .box-primo-avvio) dalle due fasi
           sopra: nessuna sovrapposizione di selettori. */
        .box-primo-avvio-successo {
            max-width: 480px;
            margin: 60px auto;
            background: #fff;
            border-radius: 8px;
            border-top: 4px solid #1f8a3b;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            padding: 40px 30px;
            text-align: center;
        }
        .box-primo-avvio-successo i.fa-circle-check {
            font-size: 3rem;
            color: #1f8a3b;
            margin-bottom: 15px;
        }
        .box-primo-avvio-successo h2 {
            color: #1f8a3b;
            margin: 0 0 15px 0;
        }
        .box-primo-avvio-successo ul {
            text-align: left;
            line-height: 1.8;
            margin-bottom: 25px;
        }
        .box-primo-avvio-successo .link-azione {
            display: inline-block;
            padding: 10px 20px;
            background: #1a6985;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
            border-radius: 4px;
        }
        .box-primo-avvio-successo .link-azione:hover {
            background: #134f63;
        }

/* =========================================================================
   Dashboard - Sezione Statistiche (visibile solo a tecnici e admin)
   ========================================================================= */

.stats-section {
    margin-top: 4px;
}
.stats-header {
    background: #1a6985;
    color: #fff;
    padding: 14px 20px;
    border-radius: 8px 8px 0 0;
    font-size: 1.15rem;
    font-weight: bold;
}
.stats-body {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 20px;
}

/* --- Barra selezione periodo --- */
.stats-periodo-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.stats-periodo-bottoni {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.stats-periodo-btn {
    padding: 5px 16px;
    border-radius: 999px;
    border: 1.5px solid #1a6985;
    background: transparent;
    color: #1a6985;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.stats-periodo-btn:hover    { background: rgba(26,105,133,0.08); }
.stats-periodo-btn.attivo   { background: #1a6985; color: #fff; }
.stats-periodo-selezione    { display: flex; align-items: center; gap: 6px; }
.stats-periodo-label-mese   { font-size: 0.85rem; color: #555; white-space: nowrap; }
.stats-periodo-select {
    font-size: 0.85rem;
    padding: 4px 8px;
    border: 1.5px solid #1a6985;
    border-radius: 6px;
    background: #fafbfc;
    color: #1a6985;
    cursor: pointer;
}
.stats-periodo-header-label {
    font-size: 0.85rem;
    font-weight: normal;
    color: rgba(255,255,255,0.75);
    margin-left: 6px;
}

/* --- Box numerici (4 in griglia) --- */
.stats-numeri-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.stats-box {
    border-radius: 8px;
    padding: 18px 12px;
    color: #fff;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.stats-box--blu    { background: #1a6985; }
.stats-box--verde  { background: #1f8a3b; }
.stats-box--arancio { background: #c0540a; }
.stats-box--viola  { background: #8e44ad; }
.stats-box-icona  { font-size: 1.3rem; margin-bottom: 6px; opacity: 0.85; }
.stats-box-numero-riga { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.stats-box-numero { font-size: 3rem; font-weight: bold; line-height: 1; }
.stats-box-num-etichetta { font-size: 1rem; opacity: 0.85; line-height: 1.35; text-align: left; }
.stats-box-label  { font-size: 0.95rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.4px; }
.stats-box-eliminate { font-size: 1rem; color: rgba(255,255,255,0.65); margin-top: 4px; }

/* --- Grafici (2 affiancati) --- */
.stats-grafici-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

/* --- Top 5 (2 affiancati) --- */
.stats-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* --- Card generica --- */
.stats-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.stats-card-title {
    font-size: 0.95rem;
    font-weight: bold;
    color: #1a6985;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}
.legenda-andamento { margin-top: 10px; }
.legenda-riga { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 5px; font-size: 0.82rem; color: #333; }
.legenda-item { display: flex; align-items: center; gap: 5px; }
.legenda-colore { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* --- Skeleton loading --- */
.skeleton-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.15) 75%);
    background-size: 200% 100%;
    animation: stats-shimmer 1.5s infinite;
    border-radius: 4px;
    height: 2.4rem;
    width: 55%;
    margin: 0 auto;
}
.skeleton-card {
    background: linear-gradient(90deg, #ececec 25%, #e0e0e0 50%, #ececec 75%);
    background-size: 200% 100%;
    animation: stats-shimmer 1.5s infinite;
    border-radius: 4px;
    min-height: 200px;
}
@keyframes stats-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* --- Righe Top 5 --- */
.stats-top-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 1rem;
}
.stats-top-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}
.stats-top-count {
    font-weight: bold;
    color: #1a6985;
    min-width: 28px;
    text-align: right;
}
.stats-top-barra-container {
    width: 70px;
    background: #e9ecef;
    border-radius: 3px;
    height: 7px;
    flex-shrink: 0;
}
.stats-top-barra {
    height: 7px;
    border-radius: 3px;
    background: #1a6985;
    transition: width 0.5s ease;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    p.spostato-sinistra { margin-left: 0; }
}
@media (max-width: 900px) {
    .stats-numeri-grid   { grid-template-columns: repeat(2, 1fr); }
    .stats-grafici-grid  { grid-template-columns: 1fr; }
    .stats-top-grid      { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .stats-numeri-grid   { grid-template-columns: 1fr; }
    .stats-box-numero    { font-size: 2.4rem; }
    .stats-top-riga      { font-size: 0.9rem; }
}