.fa-eye{
    position: absolute;
    top: 28%;
    right: 4%;
    cursor: pointer;
    color: lightgray;
  }

.btn.cursore-bloccato {
  cursor: not-allowed !important;
  pointer-events: auto !important; /* Forza il browser a intercettare il mouse anche se disabled */
}

.flatpickr-calendar, 
.flatpickr-innerContainer, 
.flatpickr-rContainer, 
.flatpickr-days {
  width: 100% !important;
  max-width: 100% !important;
}

.flatpickr-days .dayContainer {
  width: 100% !important;
  max-width: 100% !important;
}

.flatpickr-day {
  width: calc(100% / 7) !important; /* Distribuisce i 7 giorni della settimana */
  max-width: 100% !important;
  height: auto !important; /* L'altezza si adatta proporzionalmente */
  aspect-ratio: 1; /* Mantiene i giorni perfettamente quadrati */
  /* Cambia la dimensione del font e centra il testo dei numeri all'interno del calendario */
  font-size: 16px;          /* Imposta la dimensione dei numeri a tuo piacimento */
  display: flex;
  align-items: center;      /* Centra verticalmente */
  justify-content: center;  /* Centra orizzontalmente */
  line-height: normal;      /* Sovrascrive il line-height predefinito che potrebbe disallineare il testo */
}

/* Modifica la casella di testo dell'input */
.flatpickr-input {
  width: 100%;       /* Larghezza desiderata */
  height: 45px;      /* Altezza desiderata */
  padding: 10px;
  box-sizing: border-box;
}

/* Opzionale: Centra anche i nomi dei giorni della settimana in alto */
.flatpickr-weekday {
  font-size: 14px;          /* Dimensione dei nomi dei giorni (Lun, Mar, ecc.) */
  text-align: center;
}

.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

 /* Personalizzazione grafica dei giorni occupati */
.giorno-occupato {
    background-color: #dc3545 !important; /* Rosso Bootstrap */
    color: white !important;
    border-radius: 50%;
    font-weight: bold;
}
/* Opzionale: cambia colore al passaggio del mouse */
.giorno-occupato:hover {
    background-color: #bd2130 !important;
}
/* Giorni COMPLETAMENTE PIENI (Rosso) */
.giorno-pieno {
     background-color: #dc3545 !important; /* bg-danger di Bootstrap */
    color: white !important;
    border-radius: 50%;
    font-weight: bold;
}

/* Giorni PARZIALMENTE OCCUPATI (Arancione/Giallo) */
.giorno-parziale {
    background-color: #ffc107 !important; /* bg-warning di Bootstrap */
    color: #212529 !important;
    border-radius: 50%;
    font-weight: bold;
}
.giorno-disponibile {
    background: #2ecc71 !important;
    color: #212529 !important;
    border-radius: 50%;
    font-weight: bold;
}

:root {
  --danger-color: #dc3545;  /* Rosso Bootstrap 5 */
  --warning-color: #ffc107; /* Giallo Bootstrap 5 */
}

#title_richiesta {
    border-bottom: 1px solid black;
    margin-bottom: 25px;
    width: 100%;
    font-weight: bold;
}

#title_richiesta h3 {
    margin-bottom: 10px;
    font-weight: bold;
}

#campi-obbligatori {
    font-size: 17px;
    font-style: italic;
}
/* 1. Pranzo Pieno (Rosso a Sinistra) e Cena con Posto (Giallo a Destra) */
.giorno-pranzoPieno-cenaParziale {
  background: linear-gradient(90deg, var(--danger-color) 50%, var(--warning-color) 50%) !important;
  color: white !important;
  border-radius: 50%;
}

/* 2. Pranzo con Posto (Giallo a Sinistra) e Cena Piena (Rosso a Destra) */
.giorno-pranzoParziale-cenaPieno {
  background: linear-gradient(90deg, var(--warning-color) 50%, var(--danger-color) 50%) !important;
  color: white !important;
  border-radius: 50%;
}

/* 3. Entrambi i servizi COMPLETAMENTE PIENI (Tutto Rosso) */
.giorno-tutto-pieno {
  background-color: var(--danger-color) !important;
  color: white !important;
  border-radius: 50%;
  font-weight: bold;
}

/* 4. Entrambi i servizi hanno prenotazioni ma c'è ancora posto (Tutto Giallo) */
.giorno-tutto-parziale {
  background-color: var(--warning-color) !important;
  color: #212529 !important;
  border-radius: 50%;
  font-weight: bold;
}

/* Rimuove i bordi interni accumulati e applica il tuo padding personalizzato */
.ts-wrapper.form-select .ts-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 3px 8px !important;
    font-size: inherit;
    min-height: auto !important;
}

/* Nasconde l'input di testo così non compare la barra di digitazione */
.ts-wrapper.form-select .ts-control > input {
    display: none !important;
}

/* --- STILE SOLO PER IL TURNO (Statico, senza digitazione) --- */
#quali-prenotazioni + .ts-wrapper .ts-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 3px 8px !important;
    font-size: inherit;
    min-height: auto !important;
    cursor: pointer !important;
}

#quali-prenotazioni + .ts-wrapper .ts-control > input {
    display: none !important; /* Nasconde l'input SOLO qui */
}

/* --- STILE PER IL CLIENTE (Dinamico, deve far digitare l'utente) --- */
#search_cliente + .ts-wrapper .ts-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 3px 8px !important;
    font-size: inherit;
    min-height: auto !important;
}
/* NON nascondiamo l'input del cliente! Lo lasciamo visibile per permettere la digitazione */
#search_cliente + .ts-wrapper .ts-control > input {
    display: inline-block !important;
    cursor: text !important;
}

/* Forza la tendina di Tom Select a stare SOPRA la modale di Bootstrap 5 */
.ts-dropdown.single {
    z-index: 2000 !important; /* Valore altissimo per superare la modale */
}

/* Evita che gli elementi interni perdano lo stile o la manina */
.ts-dropdown-content {
    cursor: pointer !important;
}

/* Stile per il pulsante di cancellazione (la X) di Tom Select */
.ts-wrapper .clear-button {
    font-size:30px !important;
    right: 2rem !important; /* Sposta la X leggermente a sinistra per non sovrapporsi alla freccia di Bootstrap */
    color: #999 !important;
    opacity: 1 !important;
}

.ts-wrapper .clear-button:hover {
    color: #dc3545 !important; /* Diventa rossa al passaggio del mouse */
}

.plugin-clear_button .clear-button {
  transform: translateY(-61%);
}

/* 
Impedisce all'icona interna di intercettare o disturbare il click del mouse 
Avendo inserito il tag <i> dentro il <button>, quando l'utente clicca esattamente sopra l'icona, 
l'evento e.target di JavaScript intercetta il tag <i> e non il bottone. 
Di conseguenza, il sistema potrebbe non trovare gli attributi data-id e data-stato.
La buona notizia è che nel codice Vanilla JS che abbiamo scritto prima abbiamo usato .closest('.btn-stato'), che è una funzione formidabile: 
dice a JavaScript di "andare a ritroso" a cercare il bottone anche se l'utente ha cliccato precisamente sull'icona interna.
Per essere sicuri al 100% che funzioni senza bug visivi, ti consiglio solo di aggiungere questa riga nel tuo file CSS 
per blindare il comportamento dell'icona: on questo accorgimento, l'icona diventa "trasparente" 
per il mouse e il click arriva dritto al bottone, garantendo un cambio di stato fulmineo.
*/
.btn-stato i {
    pointer-events: none;
}

/* come sopra */
.btn-leggi-note i {
    pointer-events: none;
}

/* 1. Forza l'azzeramento del padding laterale anomalo su tutta la struttura della modale */
#modalLeggiNote, 
#modalLeggiNote .modal-dialog,
#modalLeggiNote .modal-content {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

/* 2. Impedisce alla modale di allargarsi a tutto schermo, mantenendo la dimensione corretta del box */
@media (max-width: 576px) {
    #modalLeggiNote .modal-dialog {
        max-width: 320px !important; /* Dimensione perfetta e compatta per qualsiasi smartphone */
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* Il contenitore diventa una pellicola trasparente fissa agganciata ai 4 angoli del browser */
#main-toast-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    
    /* Forza le dimensioni reali della finestra visibile */
    width: 100% !important;
    height: 100% !important;
    
    /* Flexbox calcola il centro esatto dell'inquadratura corrente dello schermo */
    display: flex !important;
    align-items: center;     /* Centra in verticale rispetto agli occhi dell'utente */
    justify-content: center; /* Centra in orizzontale rispetto agli occhi dell'utente */
    
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1090 !important; /* Rimane sopra a tabelle e modali */
    pointer-events: none;    /* Permette di cliccare la tabella sottostante */
}

/* Il rettangolo del Toast visibile */
#main-toast-container #liveToast {
    width: 320px !important;    
    max-width: 85vw !important; 
    margin: 0 !important;
    pointer-events: auto;       /* Ripristina i click sul Toast (es. per chiuderlo) */
}

/* table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  margin-right: 0em !important;
  border-left: 0px !important;
} */
/*
table#prenotazioni .linea-totali {
    border-top: 1px solid black !important;
    border-bottom: 1px solid black; 
}

@media (max-width: 576px) {
    table#prenotazioni  {
        font-size: 13px;
    }
}
*/

/* Seleziona la cella sotto il cursore e applica il bordo */
table.dataTable tbody td:hover {
    outline: 2px solid #007bff; /* Colore blu (modificabile) */
    outline-offset: -2px;       /* Sposta il bordo all'interno per non spostare il testo */
    cursor: pointer;            /* Cambia il cursore in una manina (opzionale) */
}

/* Selettore rinforzato per costringere il server online ad applicare lo sfondo e i bordi neri */
table#prenotazioni tbody tr.linea-totali td {
    background-color: #e3e7ea !important;  /* Colore grigio chiaro Bootstrap (bg-light) */
    color: #212529 !important;             /* Forza il testo scuro */
    border-top: 1px solid #000000 !important;   /* Linea sopra nera continua */
    border-bottom: 1px solid #000000 !important;/* Linea sotto nera continua */
}

/* Effetto focus sui quadratini del codice d'accesso */
.pin-input:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25) !important;
    background-color: #f8f9fa;
}

/* Nasconde l'intero contenitore e i bottoni nativi di DataTables 3 */
.dt-layout-start .dt-buttons,
.buttons-pdf {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Rende il link amministratore estremamente discreto e mimetizzato */
.small-admin-link {
    transition: opacity 0.2s ease-in-out;
}
.small-admin-link:hover {
    opacity: 1 !important;
    color: #dc3545 !important; /* Diventa rosso amministratore solo al passaggio */
}

/* Cambia la freccia del mouse in una manina quando si passa sopra la riga della tabella */
#tabellaPrenotazioni tbody tr {
    cursor: pointer;
}

/* Finezza extra: quando la riga viene toccata o cliccata, cambia leggermente colore di sfondo */
#tabellaPrenotazioni tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Forza la comparsa della barra di scorrimento interna per la rubrica clienti */
.ts-dropdown .ts-dropdown-content {
    max-height: 120px !important; /* Altezza ridotta apposta per fare il test con 5 clienti */
    overflow-y: auto !important;  /* Attiva la scrollbar verticale se i nomi superano l'altezza */
    -webkit-overflow-scrolling: touch; /* Scorrimento morbido e cinematico col pollice da mobile */
}

/* Rende la linea della barra di scorrimento sottile e discreta su smartphone */
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar {
    width: 6px;
}
.ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

/* Stile base per le celle modificabili */
.editable {
    transition: background-color 0.4s ease, border-color 0.4s ease;
    outline: none;
    padding: 4px;
}

/* Stato: Salvataggio in corso */
.editable.is-saving {
    background-color: #fff3cd !important; /* Giallo chiaro */
    border: 1px dashed #ffc107;
}

/* Stato: Salvato con successo */
.editable.is-saved {
    background-color: #d1e7dd !important; /* Verde chiaro */
    border: 1px solid #0f5132;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {   
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}