/* ═══════════════════════════════════════
   FLATPICKR — Thème Royal Blue
   ═══════════════════════════════════════
   
   Requiert :
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
   Puis ce fichier APRÈS flatpickr.min.css

═══════════════════════════════════════ */


/* ── Conteneur principal (dropdown) ── */
.flatpickr-calendar {
  font-family: 'DM Sans', sans-serif;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid var(--rb-border, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 0;
  width: 320px;
  overflow: hidden;

  /* Animation d'ouverture */
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.flatpickr-calendar.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  display: none; /* On masque les flèches natives */
}


/* ── Header (mois / année / flèches) ── */
.flatpickr-months {
  background: linear-gradient(135deg, var(--rb-blue-1, #2563eb) 0%, #7c3aed 100%);
  border-radius: 14px 14px 0 0;
  padding: 0;
  height: 60px;
}

.flatpickr-months .flatpickr-month {
  color: #fff;
  fill: #fff;
  height: 60px;
}

.flatpickr-current-month {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  padding-top: 14px;
  letter-spacing: 0.4px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  background: transparent;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 4px;
  cursor: pointer;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: var(--rb-surface, #fff);
  color: var(--rb-text, #1e293b);
  font-size: 14px;
}

.flatpickr-current-month .numInputWrapper {
  width: 70px;
}

.flatpickr-current-month input.cur-year {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
}

/* Flèches prev/next */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--rb-blue-1, #2563eb);
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  fill: var(--rb-blue-2, #1d4ed8);
  background: #fff;
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

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

/* Spinner up/down année */
.numInputWrapper span {
  border: none;
}

.numInputWrapper span:hover {
  background: rgba(255, 255, 255, 0.15);
}

.numInputWrapper span svg path {
  fill: rgba(255, 255, 255, 0.7);
}

.numInputWrapper span:hover svg path {
  fill: #fff;
}


/* ── Jours de la semaine ── */
.flatpickr-weekdays {
  background: transparent;
  padding: 8px 12px 0;
}

span.flatpickr-weekday {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--rb-text-muted, #b89494);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: transparent;
}


/* ── Grille des jours ── */
.flatpickr-innerContainer {
  padding: 4px 10px 10px;
}

.flatpickr-rContainer {
  width: 100%;
}

.dayContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  gap: 2px;
  padding: 0;
}

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

.flatpickr-day {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--rb-text, #1e293b);
  border-radius: 10px;
  border: none;
  max-width: 38px;
  height: 38px;
  line-height: 38px;
  margin: 1px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.flatpickr-day:hover {
  background: var(--rb-blue-light, #eff6ff);
  border: none;
  color: var(--rb-blue-1, #2563eb);
  transform: scale(1.08);
}

/* Aujourd'hui */
.flatpickr-day.today {
  border: 2px solid var(--rb-blue-1, #2563eb);
  background: transparent;
  color: var(--rb-blue-1, #2563eb);
  font-weight: 700;
}

.flatpickr-day.today:hover {
  background: var(--rb-blue-light, #eff6ff);
  border-color: var(--rb-blue-1, #2563eb);
  color: var(--rb-blue-1, #2563eb);
}

/* 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: linear-gradient(135deg, var(--rb-blue-1, #2563eb), #7c3aed);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: scale(1.08);
}

/* Range intermédiaire */
.flatpickr-day.inRange {
  background: var(--rb-blue-light, #eff6ff);
  border: none;
  box-shadow: none;
  color: var(--rb-blue-1, #2563eb);
}

/* Jours désactivés / hors mois */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--rb-border, #e5e7eb);
  background: transparent;
  border: none;
  cursor: default;
  transform: none;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--rb-text-muted, #94a3b8);
  opacity: 0.5;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: var(--rb-blue-light, #eff6ff);
  color: var(--rb-text-muted, #94a3b8);
  opacity: 0.8;
}


/* ── Input flatpickr (le champ texte) ── */
/* Déjà stylé par .rb-input — on ajoute juste l'icône calendrier */
.rb-datepicker-wrapper {
  position: relative;
}

.rb-datepicker-wrapper .rb-input {
  padding-left: 42px;
  cursor: pointer;
}

.rb-datepicker-wrapper .rb-datepicker-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--rb-text-muted, #94a3b8);
  pointer-events: none;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.rb-datepicker-wrapper:focus-within .rb-datepicker-icon {
  color: var(--rb-blue-1, #2563eb);
}

/* Bouton clear (×) intégré */
.rb-datepicker-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rb-border-light, #f1f5f9);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--rb-text-muted, #94a3b8);
  transition: all 0.2s;
  z-index: 5;
}

.rb-datepicker-clear:hover {
  background: var(--rb-danger, #ef4444);
  color: #fff;
}

.rb-datepicker-wrapper.has-value .rb-datepicker-clear {
  display: flex;
}


/* ── Time picker (si enableTime) ── */
.flatpickr-time {
  border-top: 1px solid var(--rb-border-light, #f1f5f9);
  padding: 8px 12px;
  max-height: 46px;
}

.flatpickr-time input {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--rb-text, #1e293b);
}

.flatpickr-time .flatpickr-time-separator {
  color: var(--rb-text-muted, #94a3b8);
  font-weight: 600;
}

.flatpickr-time .flatpickr-am-pm {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  color: var(--rb-blue-1, #2563eb);
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--rb-blue-light, #eff6ff);
}

.numInputWrapper:hover {
  background: transparent;
}