/* Styles pour le tableau de disponibilité */
.availability-container {
    overflow-x: auto; /* Active le défilement horizontal */
    margin-top: 20px;
}

.availability-scroll-container {
    max-height: 600px; /* Limiter la hauteur selon vos besoins */
    overflow-y: auto;  /* Activer le défilement vertical */
    margin-top: 20px;  /* Ajouter un espacement au-dessus du conteneur */
    position: relative; /* Nécessaire pour le positionnement du <thead> */
}


.availability-table {
    width: 100%;
    min-width: 600px; /* Ajustez cette valeur selon la largeur minimale requise pour votre tableau */
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 11px;
}

.availability-table th,
.availability-table td {
    border: 1px solid #ddd;
    padding: 8px 1px;
    text-align: center;
}

/* Styles pour le <thead> fixe */
.availability-table th {
    background-color: #f4f4f4;
    color: #333;
    font-family: 'Montserrat-Bold';
    position: sticky; /* Fixer l'en-tête */
    top: -1; /* Positionner l'en-tête en haut du conteneur */
    z-index: 1; /* S'assurer qu'il est au-dessus du contenu */
}

.availability-table .disabled {
    pointer-events: none;
}

.availability-cell {
    cursor: pointer;
    background-color: #fff;
}

.availability-cell.selected {
    background-color: var(--light-yellow-green);
    color: #fff;
}

.time-column {
    background-color: #f4f4f4;
    font-family: 'Montserrat-Bold';
}

.availability-label {
    font-size: 10px;
    white-space: nowrap;
    color: var(--blue-x-dark);
    text-align: center;
    font-weight: bold;
}