/* --- STILI GENERALI E STRUTTURA --- */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f4f6f9; 
    color: #333; 
    margin: 0; 
    padding: 20px; 
}

.container { 
    max-width: 100%; 
    margin: 0 auto; 
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}

/* --- NAVIGAZIONE A TAB --- */
.tabs { 
    display: flex; 
    border-bottom: 2px solid #ccc; 
    margin-bottom: 15px; 
    flex-wrap: wrap; 
}

.tab-button { 
    padding: 10px 15px; 
    border: none; 
    background: #e0e0e0; 
    cursor: pointer; 
    font-weight: bold; 
    margin-right: 5px; 
    border-radius: 5px 5px 0 0; 
    transition: 0.3s; 
    margin-bottom: 2px; 
}

.tab-button.active { 
    background: #0056b3; 
    color: white; 
}

.tab-content { 
    display: none; 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-top: none; 
    background: #fff; 
}

.tab-content.active { 
    display: block; 
}

.grid-container { 
    overflow-x: auto; 
    margin-top: 15px; 
    max-height: 650px; 
}

.scroll-tabella-bar {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.scroll-tabella-bar button {
    padding: 6px 14px;
    font-size: 12px;
}

/* --- SOTTOPAGINE INTERNE (es. Coperture) --- */
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }

/* --- TABELLA COPERTURA MENSILE --- */
th.cella-copertura-header, td.cella-copertura {
    min-width: 65px !important;
    max-width: 75px !important;
    width: 70px !important;
    font-size: 10px !important;
    padding: 3px 2px !important;
}

tr.riga-totale-copertura td {
    background-color: #334155 !important;
    color: #ffffff !important;
    font-weight: bold;
    cursor: default;
}

/* --- TABELLE SEGRETERIA (prototipo e mensile) --- */
th.cella-segreteria-header, td.cella-segreteria {
    min-width: 90px !important;
    max-width: 100px !important;
    width: 95px !important;
    font-size: 10px !important;
    padding: 3px 2px !important;
}
/* --- TABELLA FERIE E PERMESSI (colonne strette) --- */
th.cella-ferie-header, td.cella-ferie {
    min-width: 26px !important;
    max-width: 30px !important;
    width: 28px !important;
    padding: 3px 2px !important;
    font-size: 10px !important;
    line-height: 1.2;
}

.badge-stato-ferie {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}
.badge-stato-ferie.modificabile { background: #dcfce7; color: #166534; }
.badge-stato-ferie.sola-lettura { background: #fee2e2; color: #991b1b; }

/* --- STRUTTURA TABELLE MENSILI (RIGHE E BORDI MARCATI) --- */
table { 
    width: auto; 
    min-width: 100%; 
    border-collapse: collapse; 
    margin-bottom: 15px; 
    text-align: center; 
    table-layout: fixed; 
}

th, td { 
    border: 1.5px solid #777; /* Bordi più spessi e scuri per non far sparire le celle */
    padding: 4px 5px;        /* Ridotto per righe più sottili */
    font-size: 12px; 
    min-width: 85px; 
    max-width: 110px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    cursor: pointer; 
}

th { 
    background-color: #007bff; 
    color: white; 
    position: sticky; 
    top: 0; 
    z-index: 10; 
    border: 2px solid #555;  /* Bordo ancora più marcato per la testata */
}

/* --- ADATTAMENTO AGENDA GIORNALIERA --- */
#gridGiorno th, #gridGiorno td { 
    min-width: 50px; 
    max-width: 65px; 
    font-size: 11px; 
    padding: 3px 3px; 
    border: 1.5px solid #666; /* Separazione netta tra i vari operatori affiancati */
}

#gridGiorno th:first-child, #gridGiorno td:first-child { 
    min-width: 45px; 
    max-width: 50px; 
    font-weight: bold;
}

/* --- STATI, TEXT-CONTRAST E BLOCCHI GRAFICI --- */
.riga-copertura { 
    background-color: #fff3cd; 
    font-weight: bold; 
    color: #856404; 
}

.cella-bloccata { 
    cursor: not-allowed !important; 
    opacity: 0.85; 
    font-style: italic; 
}

.colonna-fissa { 
    position: sticky; 
    left: 0; 
    background-color: #007bff !important; 
    color: white !important; 
    font-weight: bold; 
    z-index: 15; 
    border-right: 2.5px solid #444 !important; /* Linea di divisione forte per la colonna fissa dell'orario */
}

td.colonna-fissa { 
    background-color: #e2e8f0 !important; 
    color: #1e293b !important; 
}

/* Rende il testo degli appuntamenti più leggibile sopra i background colorati */
td[onclick*="gestisciClicCella"] {
    font-weight: 600; 
}

/* --- PULSANTI E UTILITY BAR --- */
.toolbar { 
    display: flex; 
    gap: 12px; 
    margin-bottom: 15px; 
    flex-wrap: wrap; 
    align-items: center; 
    background: #f8f9fa; 
    padding: 10px; 
    border-radius: 6px; 
    border: 1px solid #e2e8f0; 
}

button { 
    padding: 8px 15px; 
    background-color: #28a745; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
}

button:hover { 
    background-color: #218838; 
}

button.btn-primary { 
    background-color: #007bff; 
}

button.btn-primary:hover { 
    background-color: #0069d9; 
}

button.btn-secondary { 
    background-color: #64748b; 
}

button.btn-secondary:hover { 
    background-color: #475569; 
}

button.btn-danger { 
    background-color: #dc3545; 
}

button.btn-danger:hover { 
    background-color: #c82333; 
}

input, select { 
    padding: 6px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    background: white; 
}

.status-panel { 
    background: #eee; 
    padding: 10px; 
    margin-top: 10px; 
    border-radius: 4px; 
    font-family: monospace; 
    font-size: 12px; 
}

#infoOrarioServizio { 
    padding: 4px 12px; 
    border-radius: 4px; 
    font-weight: bold; 
    transition: all 0.2s ease; 
}

/* --- MODULI DI CONFIGURAZIONE --- */
.config-layout { 
    display: grid; 
    grid-template-columns: 300px 1fr; 
    gap: 20px; 
}

.op-list-box { 
    border: 1px solid #ccc; 
    padding: 10px; 
    border-radius: 6px; 
    max-height: 400px; 
    overflow-y: auto; 
    background: white; 
}

.op-item { 
    padding: 8px; 
    margin-bottom: 5px; 
    background: #f1f5f9; 
    border-radius: 4px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    font-weight: bold; 
}

.op-item:hover { 
    background: #cbd5e1; 
}

/* Operatore selezionato con click destro, in attesa di essere spostato in una nuova posizione */
.op-item-selezionato {
    background: #fef08a !important;
    outline: 2px solid #ca8a04;
    outline-offset: -2px;
}

.config-form { 
    border: 1px solid #ccc; 
    padding: 15px; 
    border-radius: 6px; 
    background: #fafafa; 
}

.form-row-multi { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 10px; 
    margin-bottom: 10px; 
}

.form-row-multi input, .form-row-multi select { 
    width: 90%; 
}

.form-field { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    min-width: 0;
}

.form-field label { 
    font-weight: bold; 
    font-size: 11px; 
    color: #475569; 
}

/* Righe delle liste di selezione operatori (es. restrizioni colonna in Configurazione Sistema):
   una classe dedicata, non un semplice <label>, per non ereditare lo stile generico delle
   etichette di campo qui sopra (che le rendeva in grassetto e disallineate). Ogni riga occupa
   sempre tutta la larghezza disponibile, una sotto l'altra, senza andare mai affiancate. */
.riga-selezione-operatore {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    font-size: 13px;
    color: #1e293b;
    padding: 5px 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f5f9;
}

.riga-selezione-operatore input[type="checkbox"] {
    flex-shrink: 0;
    width: auto !important;
}

.riga-selezione-operatore span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.riga-selezione-operatore:last-child {
    border-bottom: none;
}

.riga-selezione-operatore:hover {
    background-color: #f8fafc;
}

.giorno-riga-config { 
    display: grid; 
    grid-template-columns: 90px 120px repeat(4, 1fr) 100px; 
    gap: 6px; 
    align-items: center; 
    margin-bottom: 6px; 
}

.giorno-riga-servizio { 
    display: grid; 
    grid-template-columns: 100px 120px repeat(4, 1fr); 
    gap: 10px; 
    align-items: center; 
    margin-bottom: 8px; 
}

/* --- SEZIONE IMPORTATORI FILE --- */
.import-section { 
    background: #f1f5f9; 
    padding: 10px; 
    border-radius: 4px; 
    margin-top: 10px; 
    border: 1px dashed #cbd5e1; 
    display: flex; 
    gap: 10px; 
    align-items: center; 
    flex-wrap: wrap; 
}

/* --- FINESTRE POPUP MODALI --- */
.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 100; 
}

.modal-attivita { 
    display: none; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
    z-index: 101; 
    width: 450px; 
    max-width: 90%; 
}

.modal-header { 
    font-size: 16px; 
    font-weight: bold; 
    margin-bottom: 15px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 8px; 
    color: #0056b3; 
}

.modal-footer { 
    display: flex; 
    justify-content: flex-end; 
    gap: 10px; 
    margin-top: 15px; 
    border-top: 1px solid #eee; 
    padding-top: 10px; 
}

.op-checkbox-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 8px; 
    max-height: 200px; 
    overflow-y: auto; 
    margin-top: 10px; 
    border: 1px solid #ddd; 
    padding: 8px; 
    border-radius: 4px; 
}

/* Popup "Coinvolgi altri operatori" negli appuntamenti: elenco verticale, testo più piccolo */
#containerCheckboxOpSlot.op-checkbox-grid {
    grid-template-columns: 1fr;
    font-size: 12px;
}

/* Popup "Seleziona Operatori / Ruoli Coinvolti" negli incontri ricorrenti: stesso stile, elenco verticale, testo più piccolo */
#containerCheckboxOp.op-checkbox-grid {
    grid-template-columns: 1fr;
    font-size: 12px;
}

/* Popup "Operatori abilitati alla Segreteria": stesso stile, elenco verticale */
#containerCheckboxOperatoriSegreteria.op-checkbox-grid {
    grid-template-columns: 1fr;
    font-size: 12px;
}

/* --- NOTIFICA DI SALVATAGGIO (TOAST) --- */
#toastSalvataggio {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: #1e293b;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    font-weight: bold;
    font-size: 14px;
    z-index: 200;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    border-left: 5px solid #28a745;
}

#toastSalvataggio.toast-visibile {
    opacity: 1;
    transform: translateY(0);
}

/* --- SCHERMATA DI LOGIN --- */
.login-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    z-index: 500;
}

.login-box {
    background: white;
    padding: 30px 35px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    width: 320px;
    max-width: 90%;
    text-align: center;
}

.login-box h2 { margin-top: 0; color: #0056b3; }

.login-box input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    margin-top: 10px;
}

.login-errore {
    display: none;
    color: #dc3545;
    font-weight: bold;
    font-size: 12px;
    margin-top: 10px;
}

.login-nota {
    display: none;
    color: #0369a1;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-radius: 4px;
    padding: 8px;
    font-size: 11px;
    font-weight: bold;
    margin-top: 10px;
    text-align: left;
}

.badge-ruolo {
    background: #e2e8f0;
    color: #1e293b;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

/* Swatch "nessun colore" selezionato: pattern a scacchiera */
.pulsante-swatch-colore.swatch-vuoto {
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}


/* --- CONTENUTO TESTUALE DELLA FINESTRA DI AIUTO --- */
.testo-aiuto {
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
}

.testo-aiuto h4 {
    color: #0056b3;
    margin: 16px 0 6px 0;
    font-size: 14px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 4px;
}

.testo-aiuto h4:first-child {
    margin-top: 0;
}

.testo-aiuto p {
    margin: 6px 0;
}

.testo-aiuto ul {
    margin: 6px 0;
    padding-left: 20px;
}

.testo-aiuto li {
    margin-bottom: 5px;
}

.testo-aiuto .nota-aiuto {
    background: #eff6ff;
    border-left: 4px solid #007bff;
    padding: 8px 10px;
    margin: 10px 0;
    border-radius: 0 4px 4px 0;
}

.testo-aiuto .nota-admin {
    background: #fef2f2;
    border-left: 4px solid #dc3545;
    padding: 8px 10px;
    margin: 10px 0;
    border-radius: 0 4px 4px 0;
}
/* --- SELETTORE COLORE A DOPPIA TAVOLOZZA --- */
.pulsante-swatch-colore {
    width: 45px;
    height: 30px;
    padding: 0;
    border: 1px solid #64748b;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pulsante-swatch-colore:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

.griglia-quadratini-colore {
    display: grid;
    grid-template-columns: repeat(auto-fill, 26px);
    gap: 6px;
    justify-content: start;
    box-sizing: border-box;
}

.quadratino-colore {
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid #e2e8f0;
    transition: transform 0.1s ease, border-color 0.1s ease;
}

.quadratino-colore:hover {
    transform: scale(1.12);
    border-color: #1e293b;
}
/* Cella dell'agenda evidenziata dopo un click: aiuta a non perdere il riferimento visivo di
   quale cella è stata cliccata per ultima, specie quando il click aggiorna la griglia in modo
   silenzioso (senza aprire alcuna finestra) e si perde altrimenti il "segnaposto" visivo. */
td.cella-evidenziata {
    outline: 3px solid #2563eb !important;
    outline-offset: -3px;
    position: relative;
    z-index: 5;
}

/* Orario nella colonna fissa (a sinistra) corrispondente alla riga della cella appena cliccata, sia
   in Agenda Giorno che in Agenda Mensile — aiuta a vedere a colpo d'occhio a che ora corrisponde. */
td.colonna-fissa.orario-evidenziato {
    color: #dc2626 !important;
    background-color: #fee2e2 !important;
    font-weight: 900 !important;
}

/* Animazione pulsante per l'avviso di inattività nella finestra appuntamenti: aiuta l'avviso a
   risultare ben visibile anche a chi sta guardando altrove sullo schermo in quel momento. */
@keyframes lampeggioAvviso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Casella Ferie con un appuntamento già inserito quel giorno: piccolo pallino rosso in alto a
   destra, visibile solo sulla riga che si può modificare (vedi operatoreHaAppuntamentoReale). */
td.cella-ferie-con-appuntamento {
    position: relative;
}
td.cella-ferie-con-appuntamento::after {
    content: "●";
    position: absolute;
    top: 0px;
    right: 2px;
    color: #dc2626;
    font-size: 9px;
    line-height: 1;
}

/* Risultato della ricerca rapida per lettera in agenda: arancione pulsante, volutamente diverso dal
   blu della cella "ultima cliccata" (.cella-evidenziata), per non confondere i due significati. */
td.cella-risultato-ricerca {
    outline: 3px solid #f97316 !important;
    outline-offset: -3px;
    position: relative;
    z-index: 6;
    animation: lampeggioAvviso 1s infinite;
}

/* --- ADATTAMENTO PER SCHERMI STRETTI (TELEFONO/TABLET) ---
   Si attiva da sola in base alla larghezza dello schermo, nessun file separato:
   stesso indirizzo, stesso HTML, stessa logica per tutti i dispositivi. */
@media (max-width: 768px) {

    /* Meno spazio sprecato ai bordi: su un telefono ogni pixel di larghezza conta */
    body {
        padding: 8px;
    }

    .container {
        padding: 10px;
        border-radius: 4px;
    }

    /* Tab più compatte ma sempre facili da toccare con un dito */
    .tab-button {
        padding: 10px 10px;
        font-size: 13px;
        margin-right: 3px;
    }

    .tab-content {
        padding: 10px;
    }

    /* I pulsanti della toolbar (Giorno Prec./Succ., Mese, Aggiorna, ecc.) vanno a capo
       meglio e restano larghi abbastanza da toccare comodamente col dito */
    .toolbar button,
    .scroll-tabella-bar button {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Le tabelle mensili (coperture, segreteria, ferie) restano leggibili:
       leggero aumento della dimensione minima delle celle rispetto al valore
       fisso attuale, il resto (scorrimento orizzontale) resta invariato */
    th, td {
        min-width: 70px;
        font-size: 12px;
        padding: 5px 4px;
    }

    /* L'agenda giornaliera è già quella meglio testata da telefono: qui basta
       solo un piccolo margine in più per il dito sul tocco delle celle */
    #gridGiorno th, #gridGiorno td {
        padding: 5px 4px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    /* Schermi molto piccoli (telefoni compatti): ulteriore compattazione dei testi */
    .tab-button {
        font-size: 12px;
        padding: 8px 8px;
    }
}

/* --- SU SCHERMI STRETTI: TAB E TOOLBAR SCORRONO IN ORIZZONTALE INVECE DI ANDARE A CAPO ---
   Stesso comportamento della griglia dell'agenda sottostante (scorrimento laterale).
   Nessun'altra parte del sito viene toccata. */
@media (max-width: 768px) {
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-button {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .toolbar > * {
        flex-shrink: 0;
    }

    .toolbar label {
        white-space: nowrap;
    }
}