/*
 * flatpickr (assets/js/date-pickers.js) in the portal's theme, light and dark.
 * Load after vendors/flatpickr-4.6.13/flatpickr.min.css.
 *
 * Its own colours are a light theme with a pale blue: the picked day was
 * white on #569ff7, about 2.8:1, and days of the months either side - which
 * can be picked - were drawn at 30% (about 1.9:1). Here the picked day is
 * white on blue-600 (about 5.2:1) and every day that can be picked is 4.5:1
 * or more in both themes. Days that cannot be picked stay faint: they are
 * not controls.
 */
.flatpickr-calendar {
  --dp-muted: oklch(55.2% 0.016 285.938);   /* zinc-500: 4.8:1 on white */
  --dp-weekday: oklch(44.2% 0.017 285.786); /* zinc-600 */
  --dp-today: var(--color-blue-600);
  --dp-picked: var(--color-blue-600);
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  font-family: inherit;
}
.dark .flatpickr-calendar {
  --dp-muted: oklch(70.5% 0.015 286.067);   /* zinc-400 */
  --dp-weekday: oklch(70.5% 0.015 286.067);
  --dp-today: oklch(70.7% 0.165 254.624);   /* blue-400 */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
}

/* The little arrow joining the calendar to its field. */
.flatpickr-calendar.arrowTop::before    { border-bottom-color: var(--border); }
.flatpickr-calendar.arrowTop::after     { border-bottom-color: var(--popover); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--border); }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--popover); }

/* Month, year and the arrows to the months either side. */
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--foreground);
  fill: var(--foreground);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--dp-today); }
.flatpickr-current-month .numInputWrapper span.arrowUp::after   { border-bottom-color: var(--foreground); }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: var(--foreground); }
span.flatpickr-weekday { color: var(--dp-weekday); font-weight: 600; }

/* Days. */
.flatpickr-day { color: var(--foreground); }
.flatpickr-day.prevMonthDay:not(.flatpickr-disabled),
.flatpickr-day.nextMonthDay:not(.flatpickr-disabled) { color: var(--dp-muted); }
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  background: var(--accent);
  border-color: var(--accent);
}
.flatpickr-day:focus-visible { outline: 2px solid var(--dp-today); outline-offset: -2px; }
.flatpickr-day.today { border-color: var(--dp-today); }
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: var(--accent);
  border-color: var(--dp-today);
  color: var(--foreground);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.selected.today,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay {
  background: var(--dp-picked);
  border-color: var(--dp-picked);
  color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.notAllowed {
  color: var(--dp-muted);
  opacity: 0.4;
  background: transparent;
  border-color: transparent;
}

/* The time, under the calendar. */
.flatpickr-calendar.hasTime .flatpickr-time { border-top: 1px solid var(--border); }
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--foreground); }
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus { background: var(--accent); }
.flatpickr-time .numInputWrapper span.arrowUp::after   { border-bottom-color: var(--foreground); }
.flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--foreground); }

/* The field shown in place of the input: a calendar mark at its end, so it
   reads as a date and not as a box to type in. zinc-500 is 4.8:1 on the
   light field and 4.1:1 on the dark one (3:1 is needed for a graphic). */
.date-picker-field {
  padding-inline-end: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.125rem;
  cursor: pointer;
}

/* A day and a time from a list (data-time-slots): side by side, the time
   under the day where the column is too narrow for both (the hire form's
   four columns). */
.date-picker-pair { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.date-picker-pair > .date-picker-field { flex: 1 1 11rem; min-width: 0; }
.date-picker-pair > .date-picker-time { flex: 1 0 7rem; min-width: 0; }

/* Phones and tablets: full targets for the month arrows and the time, and
   16px text in the year and time fields - iOS zooms the page into a field
   whose text is smaller. The days stay 39px: seven of 44px do not fit the
   calendar on a 320px phone. */
@media (width < 64rem) {
  .flatpickr-months .flatpickr-month { height: 44px; }
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month { height: 44px; width: 44px; padding: 14px; }
  .flatpickr-current-month { padding-top: 10px; }
  .flatpickr-calendar input { font-size: 16px; }
  .flatpickr-calendar.hasTime .flatpickr-time { height: 44px; line-height: 44px; max-height: 44px; }
}

/* flatpickr's fade-in ignores the setting. */
@media (prefers-reduced-motion: reduce) {
  .flatpickr-calendar.animate.open { animation: none; }
}