/**
 * ════════════════════════════════════════════════════════════════════════════════
 * FLATPICKR - PERSONNALISATION DU CALENDRIER
 * ════════════════════════════════════════════════════════════════════════════════
 * 
 * Styles personnalisés pour le datepicker Flatpickr
 * Couleurs harmonisées avec le thème du formulaire
 * 
 * ════════════════════════════════════════════════════════════════════════════════
 */

/* ==========================================
   CHAMP INPUT DATE
   ========================================== */

/* Style du champ input date */
input.flatpickr-input {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
    border: 2px solid #CBD5E1 !important;
    border-radius: 0.75rem !important;
    padding: 10px 12px !important;
    font-size: 1rem !important;
    cursor: text !important;
    transition: all 0.25s ease !important;
}

input.flatpickr-input:hover {
    border-color: #2196F3 !important;
}

input.flatpickr-input:focus {
    border-color: #0382C9 !important;
    box-shadow: 0 0 0 4px rgba(3, 130, 201, 0.1) !important;
    outline: none !important;
}

input.flatpickr-input::placeholder {
    color: #94a3b8 !important;
}

/* ==========================================
   WRAPPER DATE AVEC ICÔNE
   ========================================== */

.date-input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 180px;
}

.date-input-wrapper input {
    padding-right: 36px !important;
    width: 100%;
}

.date-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    pointer-events: auto;
    padding: 4px;
    border-radius: 4px;
}

.date-icon:hover {
    color: #0382C9;
    background-color: rgba(3, 130, 201, 0.1);
}

.date-input-wrapper:hover .date-icon {
    color: #0382C9;
}

.date-input-wrapper input:focus + .date-icon {
    color: #0382C9;
}

/* ==========================================
   CALENDRIER POPUP
   ========================================== */

/* Conteneur principal du calendrier */
.flatpickr-calendar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    font-family: inherit !important;
    width: 320px !important;
    padding: 8px !important;
}

/* Calendrier pour date de naissance */
.flatpickr-calendar.birthdate-calendar {
    width: 290px !important;
    padding: 8px !important;
}

.flatpickr-calendar.birthdate-calendar .flatpickr-months {
    padding: 4px 0 8px 0 !important;
    height: 36px !important;
}

.flatpickr-calendar.birthdate-calendar .flatpickr-month {
    height: 32px !important;
}

.flatpickr-calendar.birthdate-calendar .flatpickr-current-month {
    font-size: 0.9rem !important;
    padding-top: 4px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.flatpickr-calendar.birthdate-calendar .flatpickr-day {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 0.85rem !important;
    max-width: 34px !important;
    margin: 1px !important;
}

.flatpickr-calendar.birthdate-calendar .flatpickr-weekday {
    font-size: 0.75rem !important;
}

/* Dropdowns mois et année pour date de naissance */
.flatpickr-calendar.birthdate-calendar .flatpickr-monthDropdown-months {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    margin: 0 4px !important;
}

.flatpickr-calendar.birthdate-calendar select.flatpickr-monthDropdown-months {
    width: auto !important;
    min-width: 75px !important;
}

/* Dropdown année caché (remplacé par select personnalisé) */
.flatpickr-calendar.birthdate-calendar .numInputWrapper {
    display: none !important;
}

/* Flèches navigation plus compactes */
.flatpickr-calendar.birthdate-calendar .flatpickr-prev-month,
.flatpickr-calendar.birthdate-calendar .flatpickr-next-month {
    padding: 4px !important;
    top: 2px !important;
}

.flatpickr-calendar.birthdate-calendar .flatpickr-prev-month svg,
.flatpickr-calendar.birthdate-calendar .flatpickr-next-month svg {
    width: 10px !important;
    height: 10px !important;
}

/* ==========================================
   CALENDRIER PÉRIODES DE STAGE
   ========================================== */

/* Les cellules du tableau doivent permettre le débordement du calendrier */
#tablePeriodes td {
    overflow: visible !important;
}

/* S'assurer que le calendrier des périodes a un z-index élevé */
.flatpickr-calendar.periode-calendar {
    width: 290px !important;
    padding: 8px !important;
    z-index: 99999 !important;
}

.flatpickr-calendar.periode-calendar .flatpickr-months {
    padding: 4px 0 8px 0 !important;
    height: 36px !important;
}

.flatpickr-calendar.periode-calendar .flatpickr-month {
    height: 32px !important;
}

.flatpickr-calendar.periode-calendar .flatpickr-current-month {
    font-size: 0.9rem !important;
    padding-top: 4px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.flatpickr-calendar.periode-calendar .flatpickr-day {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 0.85rem !important;
    max-width: 34px !important;
    margin: 1px !important;
}

.flatpickr-calendar.periode-calendar .flatpickr-weekday {
    font-size: 0.75rem !important;
}

/* Dropdowns mois et année pour périodes */
.flatpickr-calendar.periode-calendar .flatpickr-monthDropdown-months {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    margin: 0 4px !important;
}

.flatpickr-calendar.periode-calendar select.flatpickr-monthDropdown-months {
    width: auto !important;
    min-width: 75px !important;
}

/* Dropdown année caché (remplacé par select personnalisé) */
.flatpickr-calendar.periode-calendar .numInputWrapper {
    display: none !important;
}

/* Dropdown année pour calendrier période */
.flatpickr-calendar.periode-calendar .flatpickr-yearDropdown-years {
    font-size: 0.85rem !important;
    padding: 4px 20px 4px 8px !important;
    min-width: 65px !important;
}

/* Flèches navigation plus compactes */
.flatpickr-calendar.periode-calendar .flatpickr-prev-month,
.flatpickr-calendar.periode-calendar .flatpickr-next-month {
    padding: 4px !important;
    top: 2px !important;
}

.flatpickr-calendar.periode-calendar .flatpickr-prev-month svg,
.flatpickr-calendar.periode-calendar .flatpickr-next-month svg {
    width: 10px !important;
    height: 10px !important;
}

/* ==========================================
   DROPDOWN ANNÉE PERSONNALISÉ
   ========================================== */

/* Style du dropdown année */
.flatpickr-yearDropdown-years {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 22px 4px 10px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #001E5A !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23001E5A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    max-height: 200px !important;
}

.flatpickr-yearDropdown-years:hover {
    background-color: rgba(3, 130, 201, 0.08) !important;
}

.flatpickr-yearDropdown-years:focus {
    outline: none !important;
    background-color: rgba(3, 130, 201, 0.08) !important;
}

/* Dropdown année pour calendrier date de naissance */
.flatpickr-calendar.birthdate-calendar .flatpickr-yearDropdown-years {
    font-size: 0.85rem !important;
    padding: 4px 20px 4px 8px !important;
    min-width: 65px !important;
}

/* Animation d'apparition */
.flatpickr-calendar.open {
    animation: flatpickrSlideDown 0.2s ease-out;
}

@keyframes flatpickrSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   EN-TÊTE DU CALENDRIER (Mois / Année)
   ========================================== */

.flatpickr-months {
    padding: 4px 0 8px 0 !important;
}

.flatpickr-months .flatpickr-month {
    background: transparent !important;
    color: #001E5A !important;
    height: 34px !important;
}

/* Titre mois/année */
.flatpickr-current-month {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #001E5A !important;
    padding-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent !important;
    border: none !important;
    font-weight: 600 !important;
    color: #001E5A !important;
    font-size: 0.95rem !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background-color: rgba(3, 130, 201, 0.08) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus {
    outline: none !important;
    background-color: rgba(3, 130, 201, 0.08) !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    color: #001E5A !important;
    font-size: 0.95rem !important;
}

/* Flèches navigation */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: #0382C9 !important;
    color: #0382C9 !important;
    padding: 8px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(3, 130, 201, 0.1) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
}

/* ==========================================
   JOURS DE LA SEMAINE
   ========================================== */

.flatpickr-weekdays {
    background: transparent !important;
    padding: 8px 0 !important;
}

.flatpickr-weekday {
    background: transparent !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
}

/* ==========================================
   JOURS DU MOIS
   ========================================== */

.flatpickr-days {
    width: 100% !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.flatpickr-day {
    max-width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 8px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    margin: 2px !important;
}

.flatpickr-day:hover {
    background: rgba(3, 130, 201, 0.1) !important;
    border-color: transparent !important;
}

/* Jour sélectionné */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #0382C9 !important;
    border-color: #0382C9 !important;
    color: #ffffff !important;
}

/* Aujourd'hui */
.flatpickr-day.today {
    border: 2px solid #0382C9 !important;
    background: transparent !important;
}

.flatpickr-day.today:hover {
    background: rgba(3, 130, 201, 0.1) !important;
}

.flatpickr-day.today.selected {
    background: #0382C9 !important;
    color: #ffffff !important;
}

/* Jours du mois précédent/suivant */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #cbd5e1 !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
}

/* Jours désactivés */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #e2e8f0 !important;
    background: transparent !important;
    cursor: not-allowed !important;
}

/* Week-end (optionnel - légèrement coloré) */
.flatpickr-day.flatpickr-sun,
.flatpickr-day.flatpickr-sat {
    color: #64748b !important;
}

/* ==========================================
   DROPDOWNS MOIS / ANNÉE AMÉLIORÉS
   ========================================== */

/* Style des dropdowns - simple et épuré */
.flatpickr-current-month select.flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    margin: 0 4px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .numInputWrapper:hover {
    background-color: rgba(3, 130, 201, 0.08) !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .numInputWrapper input:focus {
    outline: none !important;
    background-color: rgba(3, 130, 201, 0.08) !important;
}

/* Input année */
.flatpickr-current-month .numInputWrapper input.cur-year {
    background: transparent !important;
    padding: 0 !important;
    width: 60px !important;
}

/* Flèches du spinner année */
.flatpickr-current-month .numInputWrapper span {
    border: none !important;
    background: transparent !important;
}

.flatpickr-current-month .numInputWrapper span:hover {
    background: rgba(3, 130, 201, 0.1) !important;
}

.flatpickr-current-month .numInputWrapper span:after {
    border-color: #0382C9 transparent transparent !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-color: transparent transparent #0382C9 !important;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 768px) {
    .flatpickr-calendar {
        width: 100% !important;
        max-width: 320px !important;
    }
    
    .flatpickr-day {
        max-width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
    }
}

/* ==========================================
   ÉTAT D'ERREUR
   ========================================== */

input.flatpickr-input.input-validation-error {
    border-color: #dc3545 !important;
}

input.flatpickr-input.input-validation-error:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1) !important;
}