/* ===========================
   VARIABILI (Palette principale)
   =========================== */
:root {
  /* Stati base della tabella */
  --slot-guasto-bg: #dc3545; /* Bootstrap: danger */
  --slot-guasto-color: #fff;

  --slot-manutenzione-bg: #ff2545; /* Bootstrap: danger */
  --slot-manutenzione-color: #fff;


  --slot-chiuso-bg: #6c757d; /* Bootstrap: secondary */
  --slot-chiuso-color: #f8f9fa; /* Chiaro, per leggibilità su grigio */

  --slot-disponibile-bg: #8fd19e; 
  --slot-disponibile-color: #1b4d1b;
  
  --slot-prenotato-bg: #ffe08a;
  --slot-prenotato-color: #7a5900;
  
  --slot-libero-bg: #fff;
  --slot-libero-color: #555;
  --slot-libero-border: #dee2e6;
  
  /* Colori per gli stili Bootstrap personalizzati (per coerenza) */
  --bs-primary-main: #7a5cf4;
  --bs-primary-dark: #5f79ff;
}


/* ===========================
   BASE & LAYOUT
   =========================== */
body {
    font-family: 'Inter', sans-serif; /* Font più moderno */
    background-color: #F8F8FF; /* Semplificazione sfondo */
    color: #333;
}

main.container-fluid {
    padding-top: 70px; 
}

/* --- CARD PRINCIPALE (Aggiunto per chiarezza) --- */
.card {
    border-radius: 20px;
    border: none;
    background: linear-gradient(135deg, #f6f8fb, #ffffff);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: transform .2s ease;
}
.card:hover {
    transform: translateY(-2px);
}

/* --- TITOLI --- */
h2 {
    font-weight: 700;
    font-size: 1.8rem;
    background: linear-gradient(90deg, #4e83ff, var(--bs-primary-main));
    -webkit-background-clip: text;
    color: transparent;
}


/* ===========================
   TABELLE (Unificazione con classi Bootstrap)
   =========================== */

/* Stili generali della tabella */
.table {
    border-radius: 16px;
    overflow: hidden;
    /* Rimuoviamo molte regole qui, affidandoci a Bootstrap */
}

.table thead th {
    background: #eef0f9;
    color: #444;
    font-weight: 700;
    border-bottom: 2px solid #dde2f1;
    padding: 14px 10px;
}

.table tbody tr:hover {
    background: #f0f4ff; /* Colore più neutro */
    transition: background 0.2s ease-in-out;
}


/* ===========================
   CELLE DI STATO (td.slot)
   =========================== */
td.slot {
    border-radius: 6px;
    padding: 6px 10px; /* leggermente più grande */
    text-align: center;
    vertical-align: middle;
    /* Unifichiamo le transizioni per performance */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default; /* Impostato a default, solo slot-prenotabile è pointer */
}

/* Stile per le celle cliccabili (LIBERO) */
td.slot-prenotabile {
    cursor: pointer;
    /* Rimuoviamo la duplicazione delle classi di Bootstrap e usiamo le variabili custom */
    background: #b9f5c0 !important; 
    color: #0f6f25 !important;
    font-weight: 600;
}

td.slot-prenotabile:hover {
    background: #a2f3ad !important;
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Stile per le celle OCCUPATE */
.table-danger, td.slot.OCCUPATO { /* Usiamo .table-danger o slot.OCCUPATO a seconda del markup */
    background: var(--slot-guasto-bg) !important; /* Riutilizzo di una variabile per coerenza */
    color: var(--slot-guasto-color) !important;
    border-radius: 8px;
    font-weight: 600;
}


/* ===========================
   CLASSI BADGE (Coerenza con variabili slot)
   =========================== */

/* Badge Prenotato (per la lista) */
.badge-prenotato {
    background-color: var(--slot-prenotato-bg) !important;
    color: var(--slot-prenotato-color) !important;
}

/* Badge Completato (Se vuoi un colore specifico, altrimenti usa Bootstrap) */
/* Esempio: se completato è un colore neutro/successo */
.badge-completato {
    background-color: var(--slot-disponibile-bg) !important; /* Esempio: Usa un verde chiaro */
    color: #1b4d1b !important;
}

/* Badge Annullato */
.badge-annullato {
    background-color: var(--slot-chiuso-bg) !important; /* Grigio per annullato */
    color: var(--slot-chiuso-color) !important;
}

/* Badge Generico/Info */
.badge-info-slot {
    background-color: var(--bs-primary-main) !important;
    color: #fff !important;
}

/* RENDERING DELLE CELLE (Utilizzo di variabili per coerenza) */

td.slot.GUASTO { 
    background: var(--slot-guasto-bg); 
    color: var(--slot-guasto-color); 
    border: 1px solid var(--slot-guasto-bg); /* Riferimento a BG per bordo */
}
td.slot.MANUTENZIONE { 
    background: var(--slot-manutenzione-bg); 
    color: var(--slot-manutenzione-color); 
    border: 1px solid var(--slot-manutenzione-bg); 
}

td.slot.DISPONIBILE { 
    background: var(--slot-disponibile-bg); 
    color: var(--slot-disponibile-color); 
    border: 1px solid var(--slot-disponibile-bg); 
}
td.slot.CHIUSO { 
    background: var(--slot-chiuso-bg); 
    color: var(--slot-chiuso-color); 
    border: 1px solid var(--slot-chiuso-bg); 
}
td.slot.LIBERO { 
    /* Nota: Se libero è sinonimo di slot-prenotabile, potresti rimuovere questa sezione. */
    background: var(--slot-libero-bg); 
    color: var(--slot-libero-color); 
    border: 1px solid var(--slot-libero-border); 
}
td.slot.PRENOTATO { 
    background: var(--slot-prenotato-bg); 
    color: var(--slot-prenotato-color); 
    border: 1px solid var(--slot-prenotato-bg); 
}

/* ===========================
   SCORRIMENTO ORIZZONTALE E COLONNA FISSA (Migliorata)
   =========================== */

/* 1. Contenitore per lo scroll (Usiamo la classe standard Bootstrap dove possibile) */
/* .table-responsive-scroll è superfluo se si usa solo .table-responsive di Bootstrap */

/* 2. Definizione della Colonna Fissa (Stazione/Ora) */
.frozen-col {
    position: sticky; 
    left: 0;          
    z-index: 10;      
    background-color: #f8f9fa; /* Deve essere sempre solido */
    border-right: 1px solid #dee2e6;
}

/* Regola per evitare sfondi multipli sull'intestazione fissa (TH) */
.table thead .frozen-col {
    background-color: #eef0f9; /* Stesso colore del thead */
    z-index: 11; 
}


/* Desktop: mostra solo table-desktop */
.table-desktop { display: block; }
.table-mobile { display: none; }


/* Wrapper icona */
.slot-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

/* Icone cerchiate con colori personalizzati */
.slot-icon {
    font-size: 1.3rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Stati */
.slot-icon.libero { color: #0f6f25; }        /* verde */
.slot-icon.occupato { color: #8a1a1a; }    /* rosso */
.slot-icon.prenotato { color: #7a5900; }   /* giallo */
.slot-icon.chiuso { color: #6c757d; }  



/* Nasconde l'input originale, ma mantiene la funzionalità */
.checkbox-as-button .form-check-input {
    display: none; 
    visibility: hidden;
}

/* Stile base per il bottone/label */
.checkbox-as-button .btn {
    padding: 0.2rem 0.4rem; /* Rendi il bottone piccolo */
    font-size: 0.8rem;
}

/* Stile principale: Applica lo stato 'checked' alla label */
.checkbox-as-button .form-check-input:checked + .btn {
    /* Quando l'input è spuntato, cambia lo stile della label adiacente */
    background-color: var(--bs-warning); /* Colore attivo, es. Giallo/Arancione */
    color: var(--bs-dark);
    border-color: var(--bs-warning);
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
    /* Rendi il bottone 'active' come feedback */
    filter: brightness(0.9);
}


/* ===========================
   LEGACY/CUSTOM FIXES
   =========================== */
/* Rendi i numeri della data più piccoli solo su mobile */
@media (max-width: 768px) {
    /* Riduci le dimensioni del badge (giorno abbreviato) */
    .table-desktop { display: none; }
    .table-mobile { display: block; }


    .day-badge {
        font-size: 0.7rem;
        padding: 0.3em 0.5em;
    }

}