/* =========================================================================
   Flexe — le calendrier, aux couleurs de la maison
   -------------------------------------------------------------------------
   flatpickr arrive en thème clair, conçu pour un site blanc : posé tel quel
   sur l'administration noire ou sur le bleu nuit du site public, il faisait
   l'effet d'une fenêtre d'un autre logiciel. Deux variantes, mêmes règles :

     .fp-flexe         administration et portail — noir, rouge Flexe
     .fp-flexe-public  site public — bleu nuit, or des guirlandes

   Un jour pris se lit barré, avec une pastille : grisé seul, on le prenait
   pour un jour passé.
   ========================================================================= */

.flatpickr-calendar.fp-flexe {
  --fp-fond: #141414;
  --fp-fond-survol: rgba(255, 255, 255, 0.08);
  --fp-bord: rgba(255, 255, 255, 0.1);
  --fp-texte: rgba(255, 255, 255, 0.88);
  --fp-discret: rgba(255, 255, 255, 0.38);
  --fp-accent: #e50914;
  --fp-accent-doux: rgba(229, 9, 20, 0.18);
  --fp-aujourdhui: rgba(229, 9, 20, 0.55);
  --fp-police: 'Inter', system-ui, -apple-system, sans-serif;
}

.flatpickr-calendar.fp-flexe-public {
  --fp-fond: #111823;
  --fp-fond-survol: rgba(245, 177, 76, 0.1);
  --fp-bord: rgba(255, 255, 255, 0.1);
  --fp-texte: rgba(246, 240, 230, 0.92);
  --fp-discret: rgba(246, 240, 230, 0.4);
  --fp-accent: #e50914;
  --fp-accent-doux: rgba(229, 9, 20, 0.2);
  --fp-aujourdhui: #f5b14c;
  --fp-police: 'Inter', system-ui, -apple-system, sans-serif;
}

.flatpickr-calendar.fp-flexe,
.flatpickr-calendar.fp-flexe-public {
  background: var(--fp-fond);
  border: 1px solid var(--fp-bord);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  font-family: var(--fp-police);
  color: var(--fp-texte);
  padding-bottom: 4px;
}

/* La petite flèche qui relie le calendrier à son champ. */
.flatpickr-calendar.fp-flexe.arrowTop::before,
.flatpickr-calendar.fp-flexe-public.arrowTop::before { border-bottom-color: var(--fp-bord); }
.flatpickr-calendar.fp-flexe.arrowTop::after,
.flatpickr-calendar.fp-flexe-public.arrowTop::after { border-bottom-color: var(--fp-fond); }
.flatpickr-calendar.fp-flexe.arrowBottom::before,
.flatpickr-calendar.fp-flexe-public.arrowBottom::before { border-top-color: var(--fp-bord); }
.flatpickr-calendar.fp-flexe.arrowBottom::after,
.flatpickr-calendar.fp-flexe-public.arrowBottom::after { border-top-color: var(--fp-fond); }

/* ------------------------------------------------------------ l'en-tête */

:is(.fp-flexe, .fp-flexe-public) .flatpickr-months .flatpickr-month,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-current-month .flatpickr-monthDropdown-months,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-current-month input.cur-year {
  color: var(--fp-texte);
  fill: var(--fp-texte);
  background: transparent;
  font-weight: 600;
}

:is(.fp-flexe, .fp-flexe-public) .flatpickr-current-month { font-size: 1rem; padding-top: 6px; }

:is(.fp-flexe, .fp-flexe-public) .flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: var(--fp-fond);
  color: var(--fp-texte);
}

:is(.fp-flexe, .fp-flexe-public) .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
:is(.fp-flexe, .fp-flexe-public) .numInputWrapper:hover { background: var(--fp-fond-survol); }

:is(.fp-flexe, .fp-flexe-public) .flatpickr-months .flatpickr-prev-month,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-months .flatpickr-next-month {
  color: var(--fp-discret);
  fill: var(--fp-discret);
  padding: 12px;
}

:is(.fp-flexe, .fp-flexe-public) .flatpickr-months .flatpickr-prev-month:hover svg,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--fp-accent); }

:is(.fp-flexe, .fp-flexe-public) .flatpickr-months .flatpickr-disabled { opacity: 0.2; }

:is(.fp-flexe, .fp-flexe-public) .numInputWrapper span.arrowUp::after { border-bottom-color: var(--fp-discret); }
:is(.fp-flexe, .fp-flexe-public) .numInputWrapper span.arrowDown::after { border-top-color: var(--fp-discret); }

:is(.fp-flexe, .fp-flexe-public) span.flatpickr-weekday {
  color: var(--fp-discret);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
}

/* -------------------------------------------------------------- les jours */

:is(.fp-flexe, .fp-flexe-public) .flatpickr-day {
  color: var(--fp-texte);
  border-radius: 8px;
  border-color: transparent;
  font-variant-numeric: tabular-nums;
  position: relative;
}

:is(.fp-flexe, .fp-flexe-public) .flatpickr-day:hover,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-day:focus {
  background: var(--fp-fond-survol);
  border-color: transparent;
}

:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.today { border-color: var(--fp-aujourdhui); }
:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.today:hover { background: var(--fp-fond-survol); color: var(--fp-texte); }

:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.selected,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.selected:hover,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.selected:focus {
  background: var(--fp-accent);
  border-color: var(--fp-accent);
  color: #fff;
  font-weight: 600;
}

:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.prevMonthDay,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.nextMonthDay { color: var(--fp-discret); opacity: 0.5; }

/* Hors période — trop tôt, trop loin, jour fermé. */
:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.flatpickr-disabled,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.flatpickr-disabled:hover {
  color: var(--fp-discret);
  opacity: 0.35;
  background: transparent;
  cursor: not-allowed;
}

/* Déjà pris : barré, avec une pastille. Grisé seul, on le prenait pour un
   jour passé ; barré, on comprend qu'il existe mais qu'il est occupé. */
:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.fp-indispo {
  text-decoration: line-through;
  text-decoration-color: var(--fp-accent);
  text-decoration-thickness: 2px;
  opacity: 1;
  color: var(--fp-discret);
}

:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.fp-indispo::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--fp-accent);
}

/* Signalé mais choisi quand même : l'équipe passe outre, le rouge reste. */
:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.fp-indispo.selected {
  color: #fff;
  text-decoration-color: #fff;
}

:is(.fp-flexe, .fp-flexe-public) .flatpickr-day.fp-ferme:not(.flatpickr-disabled) { color: var(--fp-discret); }

/* ------------------------------------------------------------- l'heure */

:is(.fp-flexe, .fp-flexe-public) .flatpickr-time { border-top-color: var(--fp-bord) !important; }

:is(.fp-flexe, .fp-flexe-public) .flatpickr-time input,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-time .flatpickr-time-separator {
  color: var(--fp-texte);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}

:is(.fp-flexe, .fp-flexe-public) .flatpickr-time input:hover,
:is(.fp-flexe, .fp-flexe-public) .flatpickr-time input:focus { background: var(--fp-fond-survol); }

/* Un sélecteur d'heure seul n'a pas besoin de la largeur d'un calendrier. */
.flatpickr-calendar.fp-heure { width: 11rem; }
.flatpickr-calendar.fp-heure .flatpickr-time { border-top: 0 !important; }

/* ------------------------------------------------------------ la légende */

.fp-legende {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 8px 12px 6px;
  border-top: 1px solid var(--fp-bord);
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--fp-discret);
}

.fp-pastille {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fp-accent);
  flex-shrink: 0;
}

/* Le champ affiché : on garde le style du champ d'origine, mais il se
   clique en entier et le curseur n'y clignote plus — on ne tape pas une
   date, on la choisit. */
input.fp-champ {
  cursor: pointer;
  caret-color: transparent;
}

/* ------------------------------------------------- effacer, sélection */

.fp-effacer {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--fp-bord);
  background: transparent;
  color: var(--fp-discret);
  font: inherit;
  font-size: 0.75rem;
  text-align: center;
  cursor: pointer;
}

.fp-effacer:hover { color: var(--fp-texte); background: var(--fp-fond-survol); }

/* Le chiffre de l'heure se sélectionne au clic : dans la teinte de la maison
   plutôt que dans le bleu du système. */
:is(.fp-flexe, .fp-flexe-public) .flatpickr-time input::selection {
  background: var(--fp-accent-doux);
  color: var(--fp-texte);
}