/* ═══════════════════════════════════════════
   CUSTOM DATE PICKER (Flatpickr theme)
═══════════════════════════════════════════ */

/* Ensure the input is visible */
.flatpickr-input {
  display: block !important;
  visibility: visible !important;
}

.flatpickr-calendar {
  font-family: var(--font) !important;
  background: var(--cream) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
  width: clamp(280px, 95vw, 320px) !important;
  -webkit-box-shadow: var(--shadow-lg) !important;
  -moz-box-shadow: var(--shadow-lg) !important;
}
.flatpickr-months {
  background: linear-gradient(135deg, var(--dark), var(--dark-warm)) !important;
  -webkit-background: linear-gradient(135deg, var(--dark), var(--dark-warm)) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 6px 0 !important;
}
.flatpickr-months .flatpickr-month {
  background: transparent !important;
  height: 40px !important;
}
.flatpickr-current-month {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: #fff !important;
  padding-top: 6px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  border: none !important;
  padding: 2px 6px !important;
  appearance: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: var(--dark) !important;
  color: #fff !important;
}
.flatpickr-current-month input.cur-year {
  color: #fff !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--gold-light) !important;
  color: var(--gold-light) !important;
  padding: 8px 12px !important;
  transition: all var(--transition-fast) !important;
  border-radius: 8px !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  fill: #fff !important;
  color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 12px !important;
  height: 12px !important;
}
.flatpickr-weekdays {
  background: var(--surface-alt) !important;
  padding: 4px 0 !important;
}
span.flatpickr-weekday {
  font-family: var(--font) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.flatpickr-innerContainer { padding: 4px !important; }
.flatpickr-days { background: var(--cream) !important; }
.dayContainer {
  padding: 2px !important;
  min-width: clamp(260px, 90vw, 308px) !important;
  max-width: clamp(260px, 90vw, 308px) !important;
}
.flatpickr-day {
  font-family: var(--font) !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  height: 40px !important;
  line-height: 40px !important;
  max-width: 40px !important;
  margin: 1px !important;
  border: none !important;
  transition: all 0.15s ease !important;
}
.flatpickr-day:hover {
  background: var(--primary-glow) !important;
  color: var(--primary-dark) !important;
  border: none !important;
}
.flatpickr-day.today {
  background: rgba(212,119,44,0.1) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  border: 2px solid var(--primary) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(212,119,44,0.35) !important;
  border: none !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-muted) !important;
  opacity: 0.4 !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--border) !important;
  opacity: 0.3 !important;
}
.numInputWrapper:hover { background: rgba(255,255,255,0.08) !important; border-radius: 6px; }
.numInputWrapper span {
  border: none !important;
  opacity: 0;
  transition: opacity 0.15s !important;
}
.numInputWrapper:hover span { opacity: 1; }
.numInputWrapper span::after { border-top-color: #fff !important; border-bottom-color: #fff !important; }
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none !important; }

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .flatpickr-calendar {
    width: calc(100vw - 32px) !important;
    max-width: 300px !important;
  }

  .dayContainer {
    min-width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
  }

  .flatpickr-day {
    height: 36px !important;
    line-height: 36px !important;
    max-width: 36px !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 480px) {
  .flatpickr-calendar {
    width: calc(100vw - 24px) !important;
  }

  .dayContainer {
    min-width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
  }

  .flatpickr-day {
    height: 32px !important;
    line-height: 32px !important;
    max-width: 32px !important;
    font-size: 0.75rem !important;
    margin: 0.5px !important;
  }

  .flatpickr-current-month {
    font-size: 0.9rem !important;
  }

  span.flatpickr-weekday {
    font-size: 0.7rem !important;
  }
}

/* ═══════════════════════════════════════════
   BROWSER COMPATIBILITY
═══════════════════════════════════════════ */

/* Amélioration pour les navigateurs anciens */
  /* S'assure que l'input est bien visible */
  .flatpickr-input {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Fallback pour les transitions */
  .flatpickr-day {
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-transition: background 0.15s ease, color 0.15s ease;
    -moz-transition: background 0.15s ease, color 0.15s ease;
  }
}