/* ============================================================
   stile_gestionale.css — SOLO per server_app.py.
   Riproduce ESATTAMENTE i valori del CSS della versione Streamlit
   originale (stessi colori, stesse misure, stessa disposizione).
   Si carica DOPO stile.css apposta, per riprendere il controllo di
   bottoni/titoli/tabella con l'aspetto originale, lasciando a
   stile.css solo il logo in alto e la fascia nera in basso (la
   "maschera", identica ad app.py).
   ============================================================ */

/* --- Titoli (valori originali) --- */
.titolo-gestione {
    text-align: center;
    font-family: 'Arial Black', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #1A1A1A;
    margin-bottom: 18px;
}
.titolo-categoria {
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #1A1A1A;
    margin-bottom: 14px;
}
.titolo-sezione {
    background-color: #0288D1;
    color: white;
    text-align: center;
    padding: 12px;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}
.titolo-sezione .sottotitolo { font-size: 16px; font-weight: normal; }

/* --- Bottoni: stessa palette blu scuro dell'originale, dimensioni
   originali (più compatti di quelli dell'app allievo) --- */
.contenuto-principale button {
    background-color: #1A365D;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    padding: 10px;
    width: 100%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.contenuto-principale button:hover { background-color: #2a4d7c; }
.contenuto-principale button img.icona-bottone {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

/* --- Messaggi di stato (successo/errore/attenzione) --- */
.blocco-messaggi-gestionale { max-width: 900px; margin: 0 auto 14px auto; }
.msg-successo, .msg-errore, .msg-warning {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 14px;
}
.msg-successo { background: #D4EDDA; color: #155724; }
.msg-errore { background: #F8D7DA; color: #721C24; }
.msg-warning { background: #FFF3CD; color: #856404; }

/* --- Login (colonna centrale, come i 3 st.columns([1.5,1,1.5])) --- */
.riquadro-login-gestionale {
    max-width: 380px;
    margin: 30px auto;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    padding: 20px 24px;
}
.riquadro-login-gestionale input[type="text"],
.riquadro-login-gestionale input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 14px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    font-size: 15px;
}
.riquadro-login-gestionale label.etichetta-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444444;
    margin-bottom: 6px;
}
.riquadro-login-gestionale .testo-piccolo { font-size: 12px; color: #888888; margin-bottom: 16px; }

/* --- Riga disconnetti + titolo, in cima al Menu Principale --- */
.riga-disconnetti-titolo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 10px;
}
.riga-disconnetti-titolo .col-disconnetti { flex: none; order: 2; max-width: 220px; margin: 0 auto; }
.riga-disconnetti-titolo .col-titolo { order: 1; text-align: center; }

/* --- Due colonne Cat. A-B / Cat. AM nel Menu Principale --- */
.colonne-categorie {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}
.colonne-categorie > div { flex: 1; }
.colonne-categorie button { margin-bottom: 10px; }

.separatore-gestionale { border: none; border-top: 1px solid #DDDDDD; margin: 20px 0; }

/* --- Pulsante "Torna al Menu Principale", sempre in alto nella pagina AZIONE --- */
.riga-torna-indietro { max-width: 260px; margin-bottom: 18px; }

/* --- Pannello "INSERISCI NUOVO ALLIEVO" (expander originale) --- */
.pannello-espandibile {
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.pannello-espandibile summary {
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 10px;
}
/* Riquadro "INSERISCI NUOVO ALLIEVO" (solo pagina Inserimento Allievo):
   sfondo giallo, stesso giallo dei tooltip delle celle, per metterlo in evidenza.
   Classe separata perche' .pannello-espandibile e' usata anche in Commenti. */
.pannello-inserimento {
    background: #FFF176;
    border-color: #FBC02D;
}
/* Avviso della pagina Azzera: a tendina, si vede solo la prima riga con la
   freccia (quella standard di <details>); cliccando si apre il testo completo.
   Stesso giallo acceso del riquadro Inserimento. */
.avviso-azzera {
    background: #FFF176;
    color: #5F4B00;
    border: 1px solid #FBC02D;
    line-height: 1.55;
}
.avviso-azzera > summary { cursor: pointer; font-weight: bold; }
.avviso-azzera[open] > summary { margin-bottom: 8px; }
/* I tooltip possono andare a capo dove il testo contiene un ritorno a capo
   (usato nel tooltip di "Stato QuizCard"). */
.tooltip-tabella { white-space: pre-line; }
.riga-campi-inserimento {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}
.riga-campi-inserimento > div { flex: 1; }
.riga-campi-inserimento label { font-size: 13px; display: block; margin-bottom: 4px; }
.riga-campi-inserimento input[type="text"],
.riga-campi-inserimento input[type="email"] {
    width: 100%;
    padding: 7px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    font-size: 14px;
}
.riga-docente-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-bottom: 14px;
}
.pannello-espandibile > form > button { max-width: 260px; }

/* --- Tabella Elenco Allievi: stessa disposizione a colonne
   dell'originale [0.5,1.6,1.6,1.3,2.0,1.0,1.1,0.8,1.0,1.0,1.0],
   con scroll orizzontale su schermi stretti come nell'originale --- */
.tabella-scroll-gestionale { width: 100%; overflow-x: auto; padding: 0 24px 6px 24px; margin-bottom: 30px; box-sizing: border-box; }
.tabella-allievi {
    border-collapse: collapse;
    width: 100%;
    min-width: 760px;
}
.tabella-allievi th {
    text-align: left;
    font-size: 14px;
    padding: 4px 6px 10px 6px;
    border-bottom: 1px solid #DDDDDD;
}
.tabella-allievi td {
    padding: 6px;
    vertical-align: middle;
}
/* Account di sede (autoscuola): riga verdina subito sotto quella dell'account casa (bianca) */
.tabella-allievi tr.riga-sede td { background: #BBDEFB; }

/* Pagina Configurazione e Preferenze */
.pannello-config { max-width: 760px; margin-left: auto; margin-right: auto; }
.form-config label { display: block; font-size: 13px; margin: 10px 0 4px; }
.form-config input[type="text"], .form-config input[type="password"], .form-config input[type="number"] {
    width: 100%; max-width: 460px; padding: 8px 10px; border: 1px solid #CCCCCC; border-radius: 6px; font-size: 14px;
}
.form-config button { width: auto; padding: 8px 16px; margin-top: 12px; }
.form-config .btn-secondario { background: #777777; }
.nota-config { font-size: 12.5px; color: #555555; margin: 6px 0; }
.tabella-allievi input[type="text"],
.tabella-allievi input[type="email"] {
    width: 100%;
    padding: 6px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    font-size: 14px;
}
.cella-codice { color: #D32F2F; font-weight: bold; }
.cella-password { color: #D32F2F; }
.cella-centrata { text-align: center; }
.tabella-allievi .btn-tabella { width: 42px; padding: 8px 0; }

@media (max-width: 700px) {
    .colonne-categorie { flex-direction: column; gap: 10px; }
    .riga-campi-inserimento { flex-direction: column; gap: 4px; }
}

/* --- Tabella Azzera: righe alternate, bottone Azzera piccolo e
   arancione, esattamente come nell'originale --- */
.tabella-azzera { border-collapse: collapse; width: 100%; max-width: 700px; margin: 0 auto; }
.cella-azzera { padding: 5px 4px; }
.tabella-azzera thead th { text-align: left; padding: 4px; font-size: 14px; }
.riga-pari .cella-azzera { background: #B0C4DE; }
.riga-dispari .cella-azzera { background: #D6E4F0; }
.riga-pari .cella-azzera:first-child, .riga-dispari .cella-azzera:first-child, .riga-sede .cella-azzera:first-child { border-radius: 3px 0 0 3px; }
.riga-pari .cella-azzera:last-child, .riga-dispari .cella-azzera:last-child, .riga-sede .cella-azzera:last-child { border-radius: 0 3px 3px 0; }
.cod-azzera { font-weight: bold; color: #1A365D; }
.form-azzera-riga { margin: 0; }
.btn-azzera-riga {
    background-color: #E65100 !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    width: auto !important;
}
.btn-azzera-riga:hover { background-color: #F4511E !important; }

/* --- Gestione Commenti: interruttori a levetta (equivalenti a st.toggle) --- */
.blocco-interruttori { max-width: 700px; margin: 0 auto 10px auto; }
.riga-interruttore { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.riga-interruttore span:last-child { font-size: 14px; color: #1A1A1A; }
.didascalia-interruttore { font-size: 12px; color: #888888; margin: 0 0 14px 0; }

.interruttore { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.interruttore input { opacity: 0; width: 0; height: 0; }
.cursore-interruttore {
    position: absolute; cursor: pointer; inset: 0;
    background-color: #CCCCCC; border-radius: 24px; transition: 0.2s;
}
.cursore-interruttore::before {
    content: ""; position: absolute; height: 18px; width: 18px;
    left: 3px; bottom: 3px; background-color: #FFFFFF; border-radius: 50%; transition: 0.2s;
}
.interruttore input:checked + .cursore-interruttore { background-color: #1A365D; }
.interruttore input:checked + .cursore-interruttore::before { transform: translateX(18px); }

/* --- Filtro ricerca commenti --- */
.riga-filtro-commenti {
    display: flex; gap: 10px; max-width: 700px; margin: 0 auto 16px auto;
}
.riga-filtro-commenti input[type="text"] {
    flex: 3; padding: 8px; border: 1px solid #CCCCCC; border-radius: 4px; font-size: 14px;
}
.riga-filtro-commenti select {
    flex: 1; padding: 8px; border: 1px solid #CCCCCC; border-radius: 4px; font-size: 14px;
}
.riga-filtro-commenti button { flex: 0 0 auto; width: auto; padding: 8px 16px; }

.testo-piccolo-gestionale { font-size: 12px; color: #888888; }
.pannello-commento { max-width: 900px; margin: 0 auto 10px auto; }
.pannello-commento summary { font-size: 14px; }
.pannello-commento textarea {
    width: 100%; padding: 8px; border: 1px solid #CCCCCC; border-radius: 4px;
    font-size: 14px; font-family: inherit; box-sizing: border-box;
}

/* --- Statistiche: tabella allievi (righe alternate come Azzera) --- */
.tabella-statistiche { border-collapse: collapse; width: 100%; min-width: 780px; border: 1px solid #1A1A1A; }
.tabella-statistiche th, .tabella-statistiche td { border: 1px solid #1A1A1A; }
.tabella-statistiche thead th { text-align: left; padding: 4px 6px; font-size: 14px; }
.cella-stat { padding: 6px 4px; }
.riga-pari .cella-stat { background: #B0C4DE; }
.riga-dispari .cella-stat { background: #D6E4F0; }
/* Due soli colori negli elenchi: account casa = bianco, account autoscuola = azzurro */
.riga-casa .cella-stat { background: #FFFFFF; }
.riga-sede .cella-stat { background: #BBDEFB; }
/* Colonna con l'icona casa / insegnante (stessa misura per entrambe) */
.cella-icona { width: 44px; padding: 4px; text-align: center; }
.icona-ambiente { width: 24px; height: 24px; object-fit: contain; display: block; margin: 0 auto; }
.btn-mostra-stat { width: auto !important; padding: 6px 12px !important; font-size: 13px !important; }

/* --- Pannello dettaglio (grafico + tabella + riepilogo) di un allievo --- */
.riquadro-dettaglio-stat { padding: 10px 4px 20px 4px; }
.intestazione-dettaglio-stat {
    background: #EAF4FB;
    padding: 14px;
    border-left: 4px solid #1A365D;
    border-radius: 4px;
    margin: 4px 0 12px 0;
    font-weight: bold;
}
.contenitore-grafico-admin {
    background: #FFFDE7;
    border-radius: 6px;
    padding: 16px;
    height: 420px;
    margin-bottom: 16px;
}
.tabella-dettaglio-stat { border-collapse: collapse; width: 100%; min-width: 620px; margin-bottom: 16px; font-size: 13px; border: 1px solid #1A1A1A; }
.tabella-dettaglio-stat th {
    background: #1A365D; color: #FFFFFF; padding: 6px; text-align: left; border: 1px solid #1A1A1A;
}
.tabella-dettaglio-stat td { padding: 5px 6px; border: 1px solid #1A1A1A; }
.tabella-dettaglio-stat .cella-svolti { font-weight: bold; }
.tabella-dettaglio-stat .cella-svolti .numero-svolti {
    position: relative;
    color: #1A1A1A !important;
    font-weight: bold;
}
.col-argomento-stat { max-width: 320px; }
.riquadri-riepilogo-stat { display: flex; gap: 12px; }
.riquadro-stat-admin {
    flex: 1; text-align: center; font-weight: bold; padding: 10px; border-radius: 4px;
}

/* ============================================================
   Rifiniture grafiche (rilevate da Paride su desktop/mobile)
   ============================================================ */

/* 3a) Su desktop, i bottoni/testi del gestionale toccavano il bordo
   della pagina: contenuto-principale non aveva nessun margine
   laterale proprio (l'app allievo lo evita centrando ogni singolo
   componente, il gestionale invece riempie tutta la larghezza). */
.contenuto-principale { width: 100%; padding: 0 24px; max-width: 1150px; margin: 0 auto; box-sizing: border-box; }

/* Grafico Statistiche: toggle verticale (desktop) / orizzontale
   (mobile), stessa tecnica di stile.css per l'app allievo. */
.grafico-admin-mobile { display: none; height: 900px; }
@media (max-width: 768px) {
    .grafico-admin-desktop { display: none; }
    .grafico-admin-mobile { display: block; }
}

/* 4e) Filtro Commenti: su schermi stretti andava in colonna invece di
   restare su una riga che sfora lo schermo. */
@media (max-width: 700px) {
    .riga-filtro-commenti { flex-direction: column; }
    .riga-filtro-commenti input[type="text"],
    .riga-filtro-commenti select,
    .riga-filtro-commenti button { width: 100%; }
}

/* Su cellulare: meno respiro laterale e titolo un po' piu' piccolo. */
@media (max-width: 700px) {
    .contenuto-principale { padding: 0 12px; }
    .titolo-gestione { font-size: 22px; }
}

/* ============================================================
   Pallino di avanzamento "giro" (Statistiche Esercitazioni):
   nessun pallino = 1° giro in corso
   verde lampeggiante = 1° giro terminato, in attesa di auto-azzeramento
   verde fisso = 2° giro in corso
   rosso fisso = 2° giro terminato, account bloccato
   ============================================================ */
.pallino-stato {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
}
.pallino-verde-lampeggiante {
    background-color: #2E7D32;
    animation: lampeggio-pallino-stato 1s ease-in-out infinite;
}
.pallino-verde-fisso { background-color: #2E7D32; }
.pallino-rosso-fisso { background-color: #D32F2F; }
/* Verde fisso + rosso fisso affiancati (2° giro terminato): un po' di spazio fra i due */
.pallino-stato + .pallino-stato { margin-left: 6px; }

@keyframes lampeggio-pallino-stato {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Riga con i due bottoni "Mostra" e "Azzera statistiche" affiancati
   nella tabella Statistiche Esercitazioni. */
.riga-bottoni-stat {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.riga-bottoni-stat .btn-mostra-stat,
.riga-bottoni-stat .btn-azzera-riga {
    width: auto;
}
.riga-bottoni-stat .form-azzera-riga { margin: 0; }

/* ============================================================
   Ricerca rapida Cognome/Nome (riusabile su piu' pagine con
   elenco allievi: Statistiche, Inserimento, Azzera).
   ============================================================ */
.riga-torna-indietro-e-ricerca {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
}
.riga-torna-indietro-e-ricerca .riga-torna-indietro { margin-bottom: 0; }
.riquadro-ricerca {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    border: 1px solid #DDDDDD;
    border-radius: 6px;
    padding: 12px 16px;
    background: #FAFAFA;
}
.campo-ricerca { display: flex; flex-direction: column; gap: 4px; }
.campo-ricerca label { font-size: 13px; font-weight: bold; color: #444444; }
.campo-ricerca select {
    padding: 7px 10px;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    font-size: 14px;
    background: #FFFFFF;
    cursor: pointer;
}
.campo-ricerca-con-icona { position: relative; display: flex; align-items: center; }
.campo-ricerca-con-icona .icona-campo-ricerca {
    position: absolute;
    left: 9px;
    width: 14px;
    height: 14px;
    opacity: 0.6;
    pointer-events: none;
}
.campo-ricerca input[type="text"] {
    padding: 7px 10px 7px 30px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    font-size: 14px;
    min-width: 160px;
}
.btn-cerca { width: auto !important; padding: 9px 18px !important; align-self: flex-end; }

/* Barra rossa: frecce triangolari sempre presenti ai lati quando una riga
   e' evidenziata (sia dopo una ricerca sia navigando con le frecce), per
   dare l'idea dello scorrimento lungo l'elenco — leggermente "fuori" dal
   bordo della tabella, come da indicazioni. */
table.tabella-selezionabile tbody tr.riga-selezionata td:first-child,
table.tabella-selezionabile tbody tr.riga-selezionata td:last-child {
    position: relative;
}
table.tabella-selezionabile tbody tr.riga-selezionata td:first-child::before {
    content: "▶";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: #D32F2F;
    font-size: 16px;
    line-height: 1;
}
table.tabella-selezionabile tbody tr.riga-selezionata td:last-child::after {
    content: "◀";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: #D32F2F;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 800px) {
    .riga-torna-indietro-e-ricerca { flex-direction: column; align-items: stretch; }
    .riquadro-ricerca { flex-direction: column; align-items: stretch; }
    .campo-ricerca input[type="text"] { min-width: 0; width: 100%; }
}

/* ============================================================
   Riga selezionabile con tastiera (frecce Su/Giu) — generico e
   riusabile su ogni tabella con class="tabella-selezionabile".
   Vedi script in admin/base_admin.html.
   ============================================================ */
table.tabella-selezionabile tbody tr { cursor: pointer; }
/* Bordo (non outline: sulle righe di tabella l'outline e' inaffidabile tra
   browser, spesso copre solo alcune colonne) su OGNI cella della riga
   evidenziata, cosi' la cornice rossa e' sempre completa e dello stesso
   spessore su tutta la riga, dalla prima all'ultima colonna. */
table.tabella-selezionabile tbody tr.riga-selezionata td {
    border-top: 3px solid #D32F2F;
    border-bottom: 3px solid #D32F2F;
}
table.tabella-selezionabile tbody tr.riga-selezionata td:first-child {
    border-left: 3px solid #D32F2F;
}
table.tabella-selezionabile tbody tr.riga-selezionata td:last-child {
    border-right: 3px solid #D32F2F;
}