/* General HTML and Body styles */
html, body {
    color-scheme: light;
    background-color: #ffffff !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0; /* Supprime les marges par défaut du navigateur */
    padding: 0; /* Supprime les rembourrages par défaut du navigateur */
}

/* Main container for the application */
.container.is-fullhd {
    padding: 5px;
}

/* Sticky container for the search bar */
.search-bar-container {
    position: sticky;
    top: 0;
    z-index: 103;
    background-color: #ffffff; /* Le conteneur reste blanc */
    padding: 0.5rem 0 0.5rem 5px; /* Ajout d'un padding à gauche de 5px */
    display: flex; /* Maintient le flex pour un contrôle futur si nécessaire */
    justify-content: flex-start; /* Aligne la barre de recherche à gauche */
    margin-bottom: 5px; /* Écart de 5px entre la barre de recherche et les titres de colonnes */
}

.search-bar.box {
    background-color: #ebe4f1 !important; /* Nouveau fond pour la barre de recherche */
    box-shadow: none; /* Supprime l'ombre pour un look plus simple */
    border-radius: 8px; /* Adoucit les coins */
    border: 1px solid #d1c4e9; /* Bordure plus douce */
    max-width: 500px; /* Prend 1/3 de la largeur (ou une largeur fixe plus grande) */
    width: 100%; /* S'assure qu'il prend la largeur max-width */
    padding: 0; /* Supprime le padding du conteneur pour contrôler via l'input */
    /* display: flex; et align-items: center; sont inutiles ici si l'icône est un background-image */
}

/* Styles pour le conteneur de l'input et des suggestions */
.search-input-wrapper {
    position: relative; /* Permet de positionner le dropdown par rapport à ce conteneur */
    width: 100%; /* S'assure que le wrapper prend toute la largeur disponible */
}

/* Styles pour le champ de recherche */
#search-input {
    width: 100%; /* Prend toute la largeur de son conteneur */
    padding: 8px 15px 8px 40px; /* Moins épais, padding-left pour l'icône */
    border: none; /* Supprime la bordure par défaut de l'input */
    background-color: #ebe4f1; /* Fond de l'input */
    border-radius: 8px; /* Coins arrondis */
    outline: none; /* Supprime l'outline au focus */
    font-size: 1rem;
    box-sizing: border-box; /* Inclut le padding dans la largeur */
    color: #000000;
    
    /* Icône de loupe */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23522583'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center; /* Positionne l'icône */
    background-size: 20px 20px; /* Taille de l'icône */
}

/* Placeholder color for search input */
#search-input::placeholder {
    color: #888;
}

/* Styles pour le conteneur des suggestions personnalisées */
.custom-autocomplete-dropdown {
    position: absolute; /* Retire l'élément du flux normal du document */
    top: 100%; /* Positionne le dropdown juste en dessous de l'input */
    left: 0;
    width: 100%;
    max-height: 200px; /* Limite la hauteur et rend le contenu défilable */
    overflow-y: auto;
    background-color: #ebe4f1; /* La couleur demandée */
    border: 1px solid #d1c4e9; /* Bordure similaire à l'input */
    border-top: none; /* Pas de bordure en haut car elle est sous l'input */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Assure que le dropdown est au-dessus des autres éléments */
    display: none; /* Caché par défaut */
    border-radius: 0 0 8px 8px; /* Coins inférieurs arrondis */

    /* Personnalisation de la barre de défilement pour Webkit (Chrome, Safari) */
    &::-webkit-scrollbar {
        width: 12px; /* Largeur de la barre de défilement */
    }

    &::-webkit-scrollbar-track {
        background: #f0e6f8; /* Couleur de fond de la piste */
        border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #8e7cc3; /* Couleur de la poignée */
        border-radius: 6px;
        border: 3px solid #f0e6f8; /* Bordure autour de la poignée */
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: #6a5b9b; /* Couleur de la poignée au survol */
    }

    /* Pour Firefox */
    scrollbar-width: thin; /* Largeur de la barre de défilement (auto, thin, none) */
    scrollbar-color: #8e7cc3 #f0e6f8; /* Couleur de la poignée et couleur de la piste */
}

/* Styles pour chaque élément de suggestion */
.custom-suggestion-item {
    padding: 8px 15px; /* Padding similaire à l'input */
    cursor: pointer;
    border-bottom: 1px solid #e0d9e7; /* Ligne de séparation plus douce */
    color: #333; /* Couleur du texte par défaut */
    font-size: 0.9rem;
}

.custom-suggestion-item:last-child {
    border-bottom: none; /* Pas de bordure pour le dernier élément */
}

.custom-suggestion-item:hover {
    background-color: #e0d9e7; /* Couleur légèrement plus foncée au survol */
}

/* Nouvelle classe pour les suggestions de département */
.department-suggestion-item {
    background-color: #8e7cc3; /* Couleur de fond spécifique pour les départements */
    color: #ffffff; /* Couleur du texte pour assurer la lisibilité sur le fond coloré */
    font-weight: bold; /* Rend le texte en gras pour qu'il ressorte davantage */
}


/* Table container with controlled scrolling */
.table-container {
    margin-top: 1rem;
    max-height: calc(85vh); /* Adjust height to leave space for headers */
    overflow-y: scroll; /* La barre de défilement est toujours visible, même si le contenu ne dépasse pas */
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    background-color: #ffffff; /* Assurez-vous que le conteneur du tableau est aussi blanc */
}

/* Personnalisation de la barre de défilement pour Webkit (Chrome, Safari) */
.table-container::-webkit-scrollbar {
    width: 15px; /* Augmente la largeur totale de la barre de défilement */
}

.table-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Couleur de fond de la piste de la barre de défilement */
    border-radius: 10px;
}

.table-container::-webkit-scrollbar-thumb {
    background-color: #ebe4f1; /* Couleur de la poignée de la barre de défilement */
    border-radius: 10px;
    border: 3px solid #f1f1f1; /* Ajustez cette valeur pour contrôler la "bordure" autour du curseur */
    /* La largeur du curseur est implicitement gérée par la width du scrollbar et le border. */
}

.table-container::-webkit-scrollbar-thumb:hover {
    background-color: #d1c4e9; /* Couleur au survol */
}

/* Pour Firefox */
.table-container {
    scrollbar-width: auto; /* Utilisez 'auto' pour que Firefox gère la largeur, ou 'thin' */
    scrollbar-color: #000000 #e0d5ff; /* Couleur de la poignée et couleur de la piste */
}

/* General table styling */
.table {
    border-collapse: separate; /* Required for sticky headers to have borders */
    border-spacing: 0;
}

/* --- STICKY HEADERS --- */

/* Main table header cells */
.table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #363636;
    color: #000000 !important;
    font-weight: 600;
    border: none;
    border-right: 1px solid #555;
    border-bottom: 2px solid #000000;
    width: 60px;  /* Exemple de largeur fixe pour une colonne de mois */
    min-width: 40px; /* Assure que la colonne ne se rétrécit pas */
    height: 50px;  /* Exemple de hauteur fixe, correspondant peut-être à la hauteur de votre ligne d'en-tête */
    min-height: 50px; /* Assure que la colonne ne se rétrécit pas verticalement */
}
.table thead th:last-child {
    border-right: none;
}

/* Sticky styling for the first three columns (Ref, Title, Days) */
.fixed-column-header {
    position: sticky;
    left: 0;
    z-index: 25; /* Higher than other headers */
    background-color: #f8f9fa!important; /* Match header background */
    text-align: center !important;
}

.table td.fixed-column {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: #ffffff;
    color: #363636;
    border-right: 1px solid #dbdbdb;
    font-size: 0.9rem;
}

/* Specific positioning for the fixed columns */
th.fixed-column-header:nth-child(1),
td.fixed-column:nth-child(1) {
    left: 0;
    max-width: 170px;
    min-width: 120px;
}

th.fixed-column-header:nth-child(2),
td.fixed-column:nth-child(2) {
    left: 120px; /* Width of the first column */
    width: 350px;
    min-width: 350px;
}

th.fixed-column-header:nth-child(3),
td.fixed-column:nth-child(3) {
    left: 470px; /* Width of first two columns */
    max-width: 40px;
    min-width: 40px;
}


/* Department header row styling */
.department-header th {
    position: sticky;
    top: 65px; /* Height of the main header */
    left: 0;
    z-index: 10;
    background-color: #8e7cc3;
    color: #ffffff !important;
    font-weight: bold;
    text-align: left;
    padding: 8px;
    border-bottom: 2px solid #c7c7c7;
    border-top: 1px solid #c7c7c7;
}

/* --- DATE CELL STYLING --- */

/* Container for dates within a month cell */
.month-cell-content {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Space between date items */
    justify-content: flex-start;
    align-items: center;
    min-height: 30px;
    
}

/* Individual date item styling */
.date-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.80rem;
    font-weight: bold;
    color: #393939; /* Correction: assurez-vous que la couleur du texte est définie */
    border-radius: 50%; /* Makes it a circle */
    width: 28px;
    height: 28px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.date-item:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Tooltip styling */
.custom-tooltip {
    position: absolute;
    background-color: #363636;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    white-space: pre-line; /* Allows newlines in the tooltip */
}

/* Other styles */
.table td {
    padding: 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
    background-color: #ffffff; /* Ajouté pour forcer le fond blanc des cellules de données */
}

.table tr:hover td {
    background-color: #acacac;
    font-weight: bold; /* Ajouté pour mettre le texte en gras au survol */
}

.course-description {
    font-size: 0.9rem;
    color: #000000;
}

.cpf-tag {
    background-color: #23d160;
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

/* Styles pour le bouton de réinitialisation */
#search-reset-button {
    display: none; /* Caché par défaut */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 10px; /* Ajustez le padding si nécessaire */
    height: 100%; /* Pour qu'il s'aligne bien avec l'input */
    color: #522583; /* Couleur de l'icône */
    font-size: 1.2rem; /* Taille de l'icône */
    transition: color 0.2s ease;
}

#search-reset-button:hover {
    color: #331a5c; /* Couleur au survol */
}

/* Ajustement pour l'alignement du bouton dans le champ has-addons */
.field.has-addons .control:last-child {
    display: flex; /* Permet d'aligner le bouton verticalement */
    align-items: center;
    justify-content: center;
}