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

.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 */
}

/* 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;
}