/* Style de base du datepicker */
.ui-datepicker {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    width: auto;
}

/* Style des dates */
.ui-datepicker td {
    padding: 2px;
}

.ui-datepicker td span, 
.ui-datepicker td a {
    text-align: center;
    padding: 10px;
    border-radius: 6px;
}

/* Styles spécifiques pour les différents types de jours */
.ui-datepicker td.passe a,
.ui-datepicker td.passe span {
    background: #f0f0f0 !important;
    color: #999 !important;
    cursor: not-allowed;
}

.ui-datepicker td.conges a,
.ui-datepicker td.conges span {
    background: #fdcbd2 !important;
    color: #fb0606 !important;
}

.ui-datepicker td.weekend a,
.ui-datepicker td.weekend span {
    background: #c2c2c2 !important;
    color: #6e6e70 !important;
}

.ui-datepicker td.ouvrable a,
.ui-datepicker td.ouvrable span {
    background: #e8f5e9 !important;
    color: #2cb733 !important;
}

/* Style des dates non disponibles */
.ui-datepicker .ui-state-disabled {
    opacity: 0.5;
}

/* Style de la date sélectionnée */
.ui-datepicker td a.ui-state-active {
    background: #1990f0 !important;
    color: white !important;
}



/* Full calendar gestion des filtres*/

#filters fieldset {
    min-width: 180px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 2px 2px 2px 2px;
    margin: 0;
    background: #fafbfc;
}

#filters legend {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 0px;
    color: #222;
    padding: 0 6px;
}

#filters .ui-controlgroup {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 2px;
    margin-top: 1px;
    justify-items: start; 
}

#filters .ui-controlgroup-panel {
    border: none;
    margin: 0;
    padding: 3;
    margin-top: 10px;
    border: none !important ;
    box-shadow: none;
    background: transparent;    
}

#filters label,
#filters input[type="checkbox"] {
    justify-self: start;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 20px;     /* optionnel pour uniformiser la hauteur */
    box-sizing: border-box;

    margin-right: 6px; /* espace entre la case et le label */
}
/* Couleur normale */
#filters label {
    color: #222;
    transition: color 0.2s;
}

/* Couleur quand la checkbox est cochée */
#filters input[type="checkbox"]:checked + label {
    color: #1990f0;
    font-weight: bold;
}

.custom-day-content {
    font-size: 0.9em;
    color: #ff0015;
    text-align: center;
    margin-top: 5px;
}

.fc-list-event.hide-the-time .fc-list-event-time {
    font-size: 0    !important;
}
.fc-list-event.hide-the-time .fc-list-event-time::before {
    content: "" !important;
}
/*
#filters label {
    justify-self: start;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width:100px; 
    box-sizing: border-box;


}
*/
/*
#filters label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9em;
    color: #333;
}
*/

/*

#filters label,
#filters input[type="checkbox"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
    */

    /* Ajoute un grand espace entre les boutons "listMois" et "mois" */
.fc-header-toolbar .fc-listSemaine-button {
    margin-right: 20px;
}
.fc-header-toolbar .fc-multiMonthYear-button {
    margin-right: 5px;
}
/* Ajuste la taile du font header full calendar */
.fc .fc-col-header-cell,
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-slot-label,
.fc .fc-timegrid-axis-cushion {
    font-size:  0.85em;/* 0.85em; *//* ou 12px, ajuste selon ton besoin */
    padding: 2px 0;
}

/* Met le fond jaune sur la colonne du header correspondant à aujourd'hui dans FullCalendar */
.fc .fc-col-header-cell.fc-day-today,
.fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
    background: #ffe066 !important; /* jaune pâle, ajuste la couleur si besoin */
}

/* Diminue la taille de la police pour les titres et créneaux en mode liste FullCalendar */
.fc .fc-list-table .fc-list-day-cushion {
    font-size: 0.8em; /* Titre du jour dans la vue liste, ajuste selon besoin */
}
.fc .fc-list-table .fc-list-event-time {
    font-size: 0.8em; /* Heure de l'événement dans la vue liste */
}
.fc .fc-list-table .fc-list-event-title {
    font-size: 0.8em; /* Titre de l'événement dans la vue liste */
}
/*-----------------------------------------------
  Colonnes de la vue Liste
-------------------------------------------------*/  
.fc-list-custom-row {
    display: flex;
    gap: 0.5em;
}
.fc-list-col {
    flex: 1;
    padding: 0 4px;
}
/* Largeur fixe pour la 1ère colonne */
.fc-list-col:first-child {
    flex: none;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
}
/* Largeur fixe pour la éème colonne */
.fc-list-col:nth-child(2) {
    flex: none;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}
/* Largeur fixe pour la 3ème colonne */
.fc-list-col:nth-child(3) {
    flex: none;
    width: 80px;
    min-width: 80px;
    max-width: 80px;
}
/* Largeur fixe pour la 4ème colonne */
.fc-list-col:nth-child(4) {
    flex: none;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
/* Réduit la hauteur des lignes dans la vue liste FullCalendar */
.fc .fc-list-table tr,
.fc .fc-list-table .fc-list-event,
.fc .fc-list-table .fc-list-day {
    height: 22px;      /* ajuste selon ton besoin */
    min-height: 18px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Réduit l'espacement vertical dans chaque cellule de la vue liste */
.fc .fc-list-table td,
.fc .fc-list-table th {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 2px;
    padding-right: 2px;
}

/* Change la taille de la police pour la rangée affichant le jour dans la vue List de FullCalendar */
.fc .fc-list-day-cushion {
    font-size: 0.8em;   /* ajuste la valeur selon ton besoin */
    font-weight: bold;
    background: #e9e9e9; /* optionnel : fond jaune pour bien distinguer */
    text-align: left ;       /* aligne le texte à gauche */
    padding-left: 20px;     /* espace à gauche pour l'esthétique */
}
/* cache la 1ère colonne de la vue List */

.fc .fc-list-event-graphic {
    display: none !important;
}

/*------------------------------------------------
  Table client
  ------------------------------------------------*/
.table-client {
    width: 100%;
    border-collapse: collapse;
}

.table-client th,
.table-client td {
    padding: 8px 12px;
    border: 1px solid #ddd;
}

.table-client td {
    background-color: #031208af;
    color: #fff;
    text-align: center;
}    

.row-passed {
    background-color: #d3d3d3; /* Light gray color */
    color: #808080; /* Gray text color */
}