/* public/css/calendar.css */

.calendar-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 45px 80px rgba(0, 0, 0, 0.02);
    width: 100%;
    box-sizing: border-box; /* Empêche le padding de créer un scroll horizontal */
}

.calendar-grid {
    display: grid;
    width: 100%;
    border-top: 1px solid #f0f2f8;
    border-left: 1px solid #f0f2f8;
}

.header-cell {
    height: 50px; 
    background: #e2e8f0;
    color: #1b2559;
    border-right: 2px solid #cbd5e1;
    border-bottom: 3px solid #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Empêche les mots trop longs de casser la largeur 1fr */
}

.date-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.day-num { font-size: 14px; font-weight: 800; color: #0d30e0; }
.day-letter { font-size: 10px; font-weight: 500; color: #a3aed0; text-transform: uppercase; }

/* En mensuel, on réduit un peu le texte des jours pour que ça rentre */
.calendar-grid:not(:has(.wide-col)) .day-letter { font-size: 7px; }
.calendar-grid:not(:has(.wide-col)) .day-num { font-size: 10px; }

/* --- HAUTEURS FIXES MENSUEL (PAR DÉFAUT) --- */
.grid-cell {
    border-right: 2px solid #cbd5e1;
    border-bottom: 3px solid #94a3b8;
    background: #fff;
    height: 120px; 
}

.day-column {
    position: relative !important;
}

/* Le style Zebra pour différencier les lignes du planning */
.day-column.row-odd { background-color: #ffffff; }
.day-column.row-even { background-color: #f1f5f9; }


.room-cell {
    height: 120px; 
    background: #f8fafc;
    color: #1b2559;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    position: sticky;
    left: 0;
    z-index: 10;
    border-right: 2px solid #cbd5e1;
}

.room-cell.row-odd { background-color: #f1f5f9; }
.room-cell.row-even { background-color: #e2e8f0; }

/* --- HAUTEURS FIXES HEBDO --- */
.calendar-grid:has(.wide-col) .grid-cell,
.calendar-grid:has(.wide-col) .room-cell {
    height: 275px !important;
}

.day-column.wide-col {
    background-image: linear-gradient(
        to bottom, 
        transparent 45%, 
        #e2e8f0 45%, 
        #e2e8f0 46%, 
        transparent 46%
    );
}

/* =======================================================
    AFFICHAGE COMPACT POUR LES RÉSERVATIONS < 1H 
   ======================================================= */

/* On cache l'heure pour laisser la place au titre (ex: BIO1) */
.reservation-slot.compact .res-time {
    display: none;
}

/* On cache aussi le nom de l'enseignant pour que le titre respire bien */
.reservation-slot.compact .res-subtitle {
    display: none;
}

/* On s'assure que le texte principal prend bien l'espace disponible */
.reservation-slot.compact .res-info {
    justify-content: center; /* Centre le texte verticalement si besoin */
    padding: 2px 4px; /* Réduit un peu les marges internes pour gagner de la place */
}

/* Optionnel : Si le titre est encore trop gros, on peut réduire un peu sa taille */
.reservation-slot.compact .res-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Ajoute des "..." si c'est vraiment trop long */
}

/* --- LÉGENDE DU PLANNING --- */
.calendar-legend {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 15px;
    margin-bottom: 10px;
    padding-right: 5px;
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

.calendar-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend .legend-color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}