/******** Modal de création de fiche ********/

/* UI */
#creaFormFiche .modal-dialog{
    max-width: 900px;
}
#creaFormFiche .modal-body {
    max-height: calc(100vh - 250px);
}
.btn-default{
    margin-left: 10px;
    border: 2px solid white;
    border-radius: 10%;
}
#labelChamp {
    margin-bottom: 0rem;
    padding: 5px;
    padding-left: 0; /* A voir si on aligne ou pas. Ici, c'est aligné */
}
#creaFormFiche .section-title {
    color: crimson;
    margin-top: 30px;
    margin-bottom: 10px;
}
#numDiv {
    margin-top: -2px;
    color: white;
}
#creaFormFiche .form-group {
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 15px;
}
#asterisk {
    font-size: 0.5rem;
    color: crimson;
    vertical-align: top;
}
.pre-icon {
    float: left;
    margin-left: 15px;
    margin-top: -27px;
    position: relative;
    z-index: 2;
    color: grey;
}
.post-icon {
    float: right;
    margin-right: 15px;
    margin-top: -27px;
    position: relative;
    z-index: 2;
    color: grey;
}
.post-icon:hover{
    cursor: pointer;
}

/* Champ Catégories */
#folder_jstree_crea{
    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
    border: 1px solid #DFD4CC;
    border-radius: 20px;
    max-height: 300px;
    overflow-y: scroll;
}
i.jstree-icon.jstree-themeicon.no-icon.jstree-themeicon-custom{
    display: none; /* Permet de supprimer les icones obligatoires devant les catégories autres que 1*/
}
.jstree-default .jstree-search{
    color: tomato; /* Permet de changer la couleur de la police des catégories proposées par la recherche */
}
.jstree-default .jstree-disabled{
    color: black!important; /* Permet de conserver la couleur noire de la police même si la catégorie est désactivée */
}
.jstree-default .jstree-disabled>.jstree-icon .jstree-checkbox{
    display: none; /* Permet de faire disparaitre la checkbox des catégories désactivées => NE FONCTIONNE PAS POUR LE MOMENT*/
}

/* Champ Description */
#creaFormFiche .trumbowyg-box {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
#creaFormFiche .trumbowyg-button-pane {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
#creaFormFiche .trumbowyg-editor {
    max-height: 300px;
}

/* Champ Tags */
#creaFormFiche .tagify__input {
    /*width: 301px;*/
    height: 38px;
    padding: 8px 12px 6px 12px;
    margin: 0;
    color: #727A82;
}
#creaFormFiche .tagify__tag {
    margin: 5px 0 10px 5px;
}
#creaFormFiche .tagify__tag>div {
    border-radius: 20px;
}

/* Champ Adresse */
#selectionCrea {
    margin-top: 8px; 
    padding: 5px; 
    height: 180px; 
    border: 1px solid #eaeaea; 
    box-shadow: 0 3px 5px rgb(0 0 0 / 25%);
    cursor: pointer;
}
#selectionCrea ul {
    padding-left: 0;
}
#selectionCrea li {
    font-size: 0.8rem;
    padding : 0.3rem;
    list-style-type: none; /* Supprime les puces dans l'auto-complétion */
}
#selectionCrea li:hover {
    background-color: rgb(250, 250, 250) ;
}
#selectionCrea span {
    font-size: medium;
}

/* Champ Dates */
/*.creaDateSelector {
    cursor: pointer;
    height: 100px;
    border-radius: 20px;
    width: 15%;
}
.creaDateSelector:hover {
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
}*/
.creaDateSelector {
    cursor: pointer;
    height: 100px;
    border-radius: 20px;
    width: 15%;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.creaDateSelector:hover {
    border-color: tomato;
}

.creaDateSelectorActive {
    border: 3px solid tomato;
    border-radius: 20px;
    color: tomato;
    font-weight: bold;
}
.creaDateSelectorImg {
    height: 50%;
    margin-top: 10px;
    margin-bottom: 5px;
    max-width: 100%; /* Ajustez selon vos besoins */
    /*height: auto;*/
}
.form-check-label {
    cursor: pointer;
}
/* AJOUTER STYLE FLATPICKR ICI */
#date-range-display {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px 15px;
    background-color: #f8f8fc;
    margin-top: 15px;
    display: inline-block;
    position: relative;
    left: 23%;
}
#date-range-display span {
    font-size: 18px;
}
#date-range-display-title {
    font-style: italic;
    font-weight: bold;
}
#date-count {
    color: #666;
    font-size: 14px;
 }
.flatpickr-calendar {
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
}
/* .flatpickr-days .dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    width: 100%;
    box-sizing: border-box;
} */
.flatpickr-day {
    margin: 5px 0 5px 0!important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.flatpickr-day:hover {
    background-color: rgba(255, 99, 71,0.8)!important;
    color: white;
    border-radius: 50%;
}
/* Empêcher le focus "rectangle moche" sur la date sélectionnée */
.flatpickr-day:focus {
    outline: none;
}
.flatpickr-day.past-day {
    opacity: 0.4;
    /*pointer-events: none;*/ /* Permet de désactiver les dates passées */
}
/* Date du jour */
.flatpickr-day.today {
    border: none !important;
    color: crimson !important;
    font-weight: bold;
}
/* Rendre la date sélectionnée plus visible */ 
.flatpickr-day.selected {
    background: transparent !important;
    border: 1.2px solid tomato !important;
    border-radius: 50% !important;
    color: tomato !important;
    font-weight: bold !important;
}




/* ===== Scrollbar CSS ===== */
/* Firefox => Semble s'appliquer sur tous les navigateurs avec des bugs... 
* {
    scrollbar-width: auto;
    scrollbar-color: #db6e33 #ffffff;
} */
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
*::-webkit-scrollbar-track {
    background: #ffffff;
}
*::-webkit-scrollbar-thumb {
    background-color: rgba(255, 99, 71, 0.55);
    border-radius: 16px;
    border: 3px solid #ffffff;
    visibility:hidden;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*:hover::-webkit-scrollbar-thumb {
    visibility:visible;
}

/* Assistant de récurrence */
#recurrAssistantModal {
    /*max-height: calc(100vh - 200px);*/
    background-color: white;
    /*padding: 25px 25px 25px 25px;*/
    width: 450px;
    position: fixed;
    top: 70px;
    right: 72%;
    transition: width 600ms ease;
    font-size: 0.875em;
    border: 2px solid #828282;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 0px #828282a2;
}
.recurrAssistantHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    /*padding-right: 10px;
    padding-bottom: 15px;*/
    padding: 25px;
    border-bottom: 1px solid #dee2e6;
}
.recurrAssistantHeader h5 {
    margin: 0;
    font-size: 1.25rem;
    /*font-weight: bold;*/
    color: tomato;
}
.recurrAssistantFooter {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}
#recurrAssistantResetBtn {
    margin-right: 25px;
}
.btn-tomato {
    background-color: white;
    color: tomato;
    border: 2px solid tomato;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: bold;
}
.btn-tomato:hover {
    background-color: tomato;
    color: white;
}
.btn-secondary {
    background-color: white;
    color: #6c757d;
    border: 2px solid #6c757d;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: bold;
}
.btn-secondary:hover {
    background-color: #6c757d;
    color: white;
}


/* NON VERIFIE */
.frequency-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}
.frequency-selector input[type="number"] {
    width: 60px;
    border-radius: 20px;
    border: 1px solid #ced4da;
    padding: 5px 10px;
    text-align: center;
}
.frequency-selector select {
    width: 120px;
    border-radius: 20px;
    border: 1px solid #ced4da;
    padding: 5px 15px;
}
.form-check-input {
    margin-right: 5px;
}
.date-range-section {
    margin-bottom: 25px;
}
.date-range-section .form-control {
    border-radius: 20px;
    border: 1px solid #ced4da;
    padding: 5px 15px;
    /*margin-bottom: 15px;*/
}
.radio-group {
    margin-top: 15px;
}
.radio-group .form-check {
    margin-bottom: 15px;
}
.occurrence-input {
    width: 80px;
    display: inline-block;
    margin: 0 10px;
    border-radius: 20px;
    border: 1px solid #ced4da;
    padding: 5px 10px;
    text-align: center;
}
.schedule-section, .rate-section {
    margin-bottom: 15px;
}
.schedule-item, .rate-item {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.schedule-item input, .rate-item input {
    border-radius: 20px;
    border: 1px solid #ced4da;
    padding: 5px 10px;
}
.add-button {
    color: #666;
    background: none;
    border: none;
    padding: 5px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875em;
}
/*#recurrAssistantModal .schedule-section .add-button:hover {
    color: #F2C94C;
}*/

/* Style pour les inputs horaire et commentaire */
/*.schedule-item input[placeholder="Horaire"] {
    width: 25%;
}*/
.schedule-item input[placeholder="Commentaire"] {
    width: 50%;
}
/* Style pour les inputs tarif */
.rate-item input[placeholder="Tarif"] {
    width: 30%;
}
.rate-item input[placeholder="Nom du tarif"] {
    width: 70%;
}

/* Style pour les boutons de suppression et de vidange */
.remove-item, .clear-item {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px; /* Même hauteur que les inputs */
}
.remove-item {
    color: crimson;
}
.remove-item:hover {
    color: crimson;
}
.clear-item {
    color: crimson;
    transition: color 0.3s ease;
}
.clear-item.active {
    color: crimson;
}
.clear-item.active:hover {
    color: crimson;
}

/* Style pour les boutons d'ajout */
#recurrAssistantModal .schedule-section .add-button:hover:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#recurrAssistantModal .schedule-section .add-button:not(:disabled):hover {
    color: #F2C94C;
}
#recurrAssistantModal .rate-section .add-button:hover:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#recurrAssistantModal .rate-section .add-button:not(:disabled):hover {
    color: black;
}
#recurrAssistantModal .frequency-selector {
    margin-top: 5px;
}
/* Ajustements pour les datepickers */
#recurrAssistantModal .ui-datepicker {
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#recurrAssistantModal .ui-datepicker-header {
    border-radius: 10px;
    background: tomato;
    color: white;
    border: none;
}
#recurrAssistantModal .form-control {
    font-size: 0.875em;
}
#recurrAssistantModal .form-select {
    font-size: 0.875em;
}
#recurrAssistantModal .input-group-text {
    border-radius: 20px 0 0 20px;
    font-size: 0.875em;
    padding: 0.375rem 0.75rem;
}
#recurrAssistantModal .input-group .date-input {
    border-radius: 0 20px 20px 0;
}
#recurrAssistantModal .radio-group .form-check-input {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#recurrAssistantModal .btn {
    font-size: 0.875em;
    text-decoration: none;
}
#recurrAssistantModal .time-range-input {
    color: #F2C94C;
    font-weight: bold;
    background-color: #fff;
}
#recurrAssistantModal #recurrAssistantForm {
    /*margin-left: 5px;*/
}
.recurrAssistantContent {
    max-height: calc(100vh - 225px);
    overflow-y: scroll;
    padding: 0 25px;
}

/* Micro-modal de Time Picker */
.time-picker-wrapper {
    position: relative;
    width: 30%;
}
.time-range-input {
    cursor: pointer;
    background-color: #fff;
}
.time-picker-modal {
    position: absolute;
    top: 100%;
    left: 0;
    width: 400px;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
    z-index: 1000;
    margin-top: 4px;
}
.time-picker-header {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}
.time-column-header {
    font-weight: bold;
    color: #666;
}
.time-picker-content {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    /*height: 200px;*/
}
.time-column {
    display: flex;
    gap: 8px;
    width: 48%;
}
.time-list {
    flex: 1;
    overflow-y: auto;
    border-radius: 4px;
    background: #f5f5f5;
}
.time-option {
    padding: 5px 12px;
    cursor: pointer;
    text-align: center;
}
.time-option:hover {
    background-color: #f0f0f0;
}
.time-option.selected {
    background-color: #fff2e8;
    color: tomato;
    font-weight: bold;
}
.time-picker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #f0f0f0;
}


/* Scrollbar styles for time lists */
.time-list::-webkit-scrollbar {
    width: 6px;
}
.time-list::-webkit-scrollbar-track {
    background: #f5f5f5;
}
.time-list::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    border-radius: 3px;
}
.time-list::-webkit-scrollbar-thumb:hover {
    background-color: #bfbfbf;
}
/* Schedule item adjustments */
.schedule-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: flex-start;
}
.schedule-item input[placeholder="Commentaire"] {
    width: 56%;
}
.time-option-earlier {
    color: #999;
    opacity: 0.7;
}

/* Style pour le bouton de récurrence actif */
#recurrAssistantBtn.active {
    background-color: white;
    border: 2px solid tomato;
    color: tomato;
    font-weight: bold;
    box-shadow: none;
}
#recurrAssistantBtn.active:hover {
    background-color: tomato;
    color: white;
    box-shadow: none;
}
#recurrAssistantModal input[type="checkbox"],
#recurrAssistantModal input[type="radio"],
#recurrAssistantModal .btn/*,
#recurrModal #intervalInput,
#recurrModal #frequencySelect*/ {
    box-shadow: none;
}
#recurrAssistantBtn {
    transition: all 0.3s ease;
}
#recurrAssistantBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
#recurrAssistantBtn[title]:not([title=""]):hover::after {
    content: attr(title);
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    transform: translateX(-50%);
    left: 50%;
    bottom: -30px;
}
#recurrAssistantBtn[title]:not([title=""]) {
    position: relative;
}

/* Style pour les boutons de récurrence et de suppression */
.date-buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
    width: 100%;
}
.date-buttons-container button {
    flex: 0 1 auto;
    min-width: 150px;
}

.date-buttons-container button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.date-buttons-container button:focus-visible {
    outline: 2px solid tomato;
    outline-offset: 2px;
}

/* Styles pour le tableau des sessions */
#creaTabFicheSessions {
    margin-top: 20px;
    width: 100%;
}

.dataTables_wrapper {
    padding: 10px;
}

#selectedDatesTable {
    width: 100%;
    border-collapse: collapse;
}

#selectedDatesTable thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 12px;
    font-weight: bold;
    color: #495057;
}

#selectedDatesTable tbody td {
    padding: 10px;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

#selectedDatesTable tbody tr:hover {
    background-color: #f8f9fa;
}

#selectedDatesTable .select-checkbox {
    width: 40px;
    text-align: center;
}

#selectedDatesTable .select-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#selectedDatesTable .date-column {
    width: 150px;
}

#selectedDatesTable .empty-table-message {
    text-align: center;
    font-style: italic;
    color: #6c757d;
    padding: 20px;
}

@media (max-width: 768px) {
    #selectedDatesTable thead th,
    #selectedDatesTable tbody td {
        padding: 8px;
        font-size: 14px;
    }
}

.selected-dates-table {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    border-collapse: separate;
    border-spacing: 0;
}

.selected-dates-table th,
.selected-dates-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.875em;
}

.selected-dates-table th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #495057;
}

.selected-dates-table td {
    color: #212529;
}

.selected-dates-table tbody tr:hover {
    background-color: #f8f9fa;
}

.selected-dates-table .checkbox-column {
    width: 40px;
    text-align: center;
}

.selected-dates-table .date-column {
    width: calc(100% - 40px);
}

.selected-dates-table input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.selected-dates-table .empty-message {
    text-align: center;
    padding: 20px;
    color: #6c757d;
    font-style: italic;
}

/* Style pour le conteneur du tableau */
#selectedDatesTableContainer {
    margin-top: 10px;
    margin-bottom: 20px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

/* Style pour le header du tableau */
.selected-dates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 5px;
}

.selected-dates-header h6 {
    margin: 0;
    color: #495057;
    font-size: 0.9em;
    font-weight: bold;
}

.selected-dates-actions {
    display: flex;
    gap: 10px;
}

.selected-dates-actions button {
    padding: 2px 8px;
    font-size: 0.8em;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    border: 1px solid #dee2e6;
    color: #495057;
}

.selected-dates-actions button:hover {
    background-color: #f8f9fa;
}

/* Style pour le message quand aucune date n'est sélectionnée */
.no-dates-message {
    text-align: center;
    padding: 20px;
    color: #6c757d;
    font-style: italic;
    font-size: 0.9em;
}



/* Assistant de récurrence - Jours de la semaine */
.recurrAssistantDaysSelector {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recurrAssistantDaysSelector label {
    display: inline-block;
    padding: 8px/* 12px*/;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 14px;
    background-color: white;
    transition: background-color 0.2s;
    text-align: center;
    width: 45px;
}
.recurrAssistantDaysSelector input[type="checkbox"] {
    display: none;
}
/*.recurrAssistantDaysSelector input[type="checkbox"]:checked + label {
    background-color: #ddd;
    border: 2px solid tomato;
    color: tomato;
    font-weight: bold;
}*/

/* Assistant de récurrence - Date de début et de fin */
#recurrAssistantModal #recurrAssistantDateStart:not(:disabled),
#recurrAssistantModal #recurrAssistantDateEndInput:not(:disabled) {
    background-color: #fff;
}

/* Barres horizontales de séparation (avec icone) */
.separator {
display: flex;
align-items: center;
text-align: center;
margin: 15px 0;
}
.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px dashed #999;
}
.separator .icon {
    padding: 0 10px;
    font-size: 1.2em;
    color: #555;
}

/* Horaires d'ouvertures - Micro-modal */
.time-picker-modal .time-extra-sep {
    border-top: 1px solid #e9ecef;
    margin: 8px 0;
}
.time-picker-modal .opening-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.time-picker-modal .opening-row input {
    margin: 0;
}
.time-picker-modal .opening-row .opening-text {
    font-weight: 400;
}
.time-picker-modal .opening-row.checked .opening-text {
    font-weight: 700;
    color: Tomato;
}
/* si tu utilises aussi le badge dans le récap */
.badge-open {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 12px;
    background: #fff3cd;
    color: #856404;
    font-size: .75em;
    border: 1px solid #ffeeba;
}
.time-picker-modal .opening-row:has(.opening-checkbox:checked) .opening-text {
    font-weight: 700;
    color: Tomato;
}