/* Theme overrides for flatpickr's calendar popup (flatpickr.min.css is the
   base stylesheet; enhanceDatePickers() in base.html wires it up). Only the
   calendar itself needs styling here -- the visible input it creates is a
   plain <input type="text"> inside <main>, so it already matches every
   other text field via input.css's "main input[type=...]" rule. */

.flatpickr-calendar {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-family: inherit;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--color-line);
}
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
  border-top-color: var(--color-line);
}

.flatpickr-months .flatpickr-month {
  color: var(--color-gold);
  fill: var(--color-gold);
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--color-gold);
  font-weight: 700;
  background: transparent;
}
.flatpickr-prev-month,
.flatpickr-next-month {
  color: var(--color-ink-faint);
  fill: var(--color-ink-faint);
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: var(--color-gold);
  fill: var(--color-gold);
}

span.flatpickr-weekday {
  color: var(--color-ink-faint);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.flatpickr-day {
  color: var(--color-ink);
  border-radius: 0.4rem;
}
.flatpickr-day.today {
  border-color: var(--color-gold);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--color-line-soft);
  border-color: var(--color-line-soft);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--color-ink-faint);
}

.flatpickr-day.today:not(.selected) {
  color: var(--color-gold);
}