/*
 * Flatpickr theme — restyles the calendar to the NNVV design system.
 * Overrides vendor/flatpickr.css, which is wrapped in @layer flatpickr-base;
 * these unlayered rules therefore win regardless of link order or
 * specificity. Tokens only, per _tokens.css.
 */

.flatpickr-calendar {
  font-family: inherit;
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

/* Positioning arrow above/below the calendar. The top arrow points into
 * the forest month header, the bottom arrow into the cream day grid. */
.flatpickr-calendar.arrowTop::before  { border-bottom-color: var(--sand); }
.flatpickr-calendar.arrowTop::after   { border-bottom-color: var(--forest); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--sand); }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--cream); }

/* Month header: forest bar with cream text, like the site hero. */
.flatpickr-months .flatpickr-month {
  background: var(--forest);
  color: var(--cream);
  fill: var(--cream);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* Centre the arrow glyph in the 34px header. The base padding that would
 * otherwise centre it is zeroed by the app's element reset, leaving the
 * 14px SVG pinned to the top; flex-centring the container is reset-proof. */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  color: var(--cream);
  fill: var(--cream);
}

/* Base pads the month label 7.48px from the top, floating it above the
 * flex-centred arrows. Flex-centre the label too so text and arrows share
 * one vertical line. */
.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--sand);
  fill: var(--sand);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--sand);
}

/* Month <select> and year input read as clean cream text on the forest
 * bar. appearance:none strips the native select box + chevron, which
 * rendered as a pale OS box over the green header. A faint rounded hover
 * is the only affordance the minimal 60-day nav needs — the < > arrows
 * do the real month-stepping. */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--cream);
  border-radius: var(--r);
  padding: 0 .5ch;
  /* Hug the current month instead of sizing to the widest option, so the
   * month and year sit together. Progressive enhancement — degrades to the
   * default auto width where field-sizing is unsupported. */
  field-sizing: content;
  text-align: center;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month span.cur-month:hover,
.flatpickr-current-month .numInputWrapper:hover {
  background: var(--on-dark-10);
}

.flatpickr-current-month input.cur-year { color: var(--cream); }

.flatpickr-current-month .numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--cream);
}

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-top-color: var(--cream);
}

span.flatpickr-weekday {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Day cells. Bookable days read as clean bold ink against the muted, flat
 * disabled days — no resting fill. The highlight (hover, selected) is a
 * circle, which sits inside the wider cell with natural gaps so adjacent
 * highlighted days never blur together. Every non-bookable day carries
 * .flatpickr-disabled under an `enable` whitelist, so a single
 * :not(.flatpickr-disabled) isolates the bookable ones at the same
 * specificity as .today/.selected — the cascade stays source-ordered
 * (base < hover/focus < today < selected). */
.flatpickr-day {
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 50%;
  transition: background .12s, border-color .12s, color .12s;
}

.flatpickr-day:not(.flatpickr-disabled) {
  font-weight: 600;
}

.flatpickr-day:not(.flatpickr-disabled):hover,
.flatpickr-day:not(.flatpickr-disabled):focus {
  background: oklch(from var(--forest) l c h / .12);
  border-color: transparent;
  color: var(--forest);
}

.flatpickr-day:not(.flatpickr-disabled):focus-visible {
  box-shadow: 0 0 0 2px oklch(from var(--forest) l c h / .35);
}

/* Today: a forest ring so it reads without a fill. */
.flatpickr-day.today {
  border-color: var(--forest);
}

/* Selected: solid forest circle, cream text. */
.flatpickr-day.selected,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}

.flatpickr-day.selected:hover {
  background: var(--moss);
  border-color: var(--moss);
}

/* Days outside the enabled whitelist, past min/max, or in adjacent months. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-weight: 400;
  opacity: .5;
}