/* ==========================================================================
   Date picker (static/js/datepicker.js, apps/core/widgets.DatePickerInput)

   A Bootstrap-style drop-down calendar under the date field. Uses the design
   tokens of main.css; no inline styles (CSP).
   ========================================================================== */

.pm-datepicker {
  position: relative;
  /* Amber marks (today ring, "on request" dot) darkened to ≥ 3:1 on white (WCAG 1.4.11). */
  --pm-datepicker-mark: #b86e0b;
  /* Numbers of days that cannot be picked (inactive controls are exempt from text contrast). */
  --pm-datepicker-off: #aab4b9;
}

/* A normal text field (a date can be typed); clicking it also opens the calendar. */
.pm-datepicker__input {
  background-color: var(--pm-white);
  text-overflow: ellipsis;
}
.pm-datepicker__input::placeholder { color: var(--pm-muted); opacity: 1; }

.pm-datepicker__toggle {
  --bs-btn-color: var(--pm-primary);
  --bs-btn-bg: var(--pm-primary-soft);
  --bs-btn-border-color: var(--pm-control-border, var(--pm-border));
  --bs-btn-hover-color: var(--pm-white);
  --bs-btn-hover-bg: var(--pm-primary);
  --bs-btn-hover-border-color: var(--pm-primary);
  --bs-btn-active-color: var(--pm-white);
  --bs-btn-active-bg: var(--pm-primary-dark);
  --bs-btn-active-border-color: var(--pm-primary-dark);
  --bs-btn-border-radius: var(--pm-radius-sm);
  --bs-btn-padding-x: 0.9rem;
  font-size: 1.1rem;
}
.pm-datepicker.is-open .pm-datepicker__toggle {
  color: var(--pm-white);
  background-color: var(--pm-primary);
  border-color: var(--pm-primary);
}

/* Invalid field: the button's border turns red too. */
.pm-datepicker__input.is-invalid + .pm-datepicker__toggle { border-color: var(--bs-form-invalid-border-color); }

/* While a calendar is open the sticky header stays above it (the panel sits above the
   cookie banner and the floating buttons, which are lower in the stack). */
body:has(.pm-datepicker.is-open) .pm-header { z-index: 1050; }

/* Drop-down panel ----------------------------------------------------------- */
.pm-datepicker__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 1045; /* above the sticky header (1020), below Bootstrap modals (1055) */
  width: max(21rem, 100%); /* never narrower than the field */
  max-width: calc(100vw - 2rem);
  padding: 1rem;
  background: var(--pm-white);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  box-shadow: var(--pm-shadow-lg);
  animation: pm-datepicker-in 0.14s ease-out;
}
.pm-datepicker__menu.is-above { top: auto; bottom: calc(100% + 0.4rem); }
/* The panel covers the help text under the field; hide it so no sliver shows at the rounded corner
   (only when the panel opens below; above, the help text stays visible). */
.pm-datepicker.is-open:not(.is-above) ~ .form-text { visibility: hidden; }
.pm-datepicker__menu[hidden] { display: none; }

@keyframes pm-datepicker-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.pm-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.pm-datepicker__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  flex: 1;
}
.pm-datepicker__nav {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-color: var(--pm-primary);
  --bs-btn-hover-bg: var(--pm-primary-soft);
  --bs-btn-hover-color: var(--pm-primary-dark);
  --bs-btn-active-bg: var(--pm-primary-soft);
  --bs-btn-disabled-color: var(--pm-muted);
  --bs-btn-disabled-opacity: 0.35;
  /* Plain .btn has no disabled border colour: without this the border shows in currentColor. */
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: 1rem;
}

/* Month grid ---------------------------------------------------------------- */
.pm-datepicker__grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.15rem;
  table-layout: fixed;
}
.pm-datepicker__grid th {
  padding-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--pm-muted);
}
.pm-datepicker__grid th.is-closed { font-weight: 500; } /* muted text keeps 5.5:1 contrast */
.pm-datepicker__grid td { padding: 0; text-align: center; }

.pm-datepicker__day {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 100%;
  max-width: 2.6rem;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--pm-ink);
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color var(--pm-transition), color var(--pm-transition);
}
.pm-datepicker__day:hover { background: var(--pm-primary-soft); color: var(--pm-primary-dark); }
.pm-datepicker__day:focus-visible {
  outline: var(--pm-focus-width, 3px) solid var(--pm-focus-color, var(--pm-primary));
  outline-offset: 1px;
}

/* Today: amber ring. */
.pm-datepicker__day.is-today { border-color: var(--pm-datepicker-mark); font-weight: 700; }

/* "On request" days (e.g. Saturday): small amber dot under the number. */
.pm-datepicker__day.is-on-request::after {
  content: "";
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 0.26rem;
  height: 0.26rem;
  margin-left: -0.13rem;
  border-radius: 50%;
  background: var(--pm-datepicker-mark);
}

/* Not selectable: past, beyond the range or closed weekday (the label says so to screen
   readers). Only the number is faded — no opacity, so the focus ring keeps full contrast. */
.pm-datepicker__day.is-disabled {
  color: var(--pm-datepicker-off);
  font-weight: 400;
  cursor: not-allowed;
}
.pm-datepicker__day.is-disabled:hover { background: transparent; color: var(--pm-datepicker-off); }

.pm-datepicker__day.is-selected,
.pm-datepicker__day.is-selected:hover {
  background: var(--pm-primary);
  border-color: var(--pm-primary);
  color: var(--pm-white);
  font-weight: 700;
}
.pm-datepicker__day.is-selected.is-on-request::after { background: var(--pm-white); }

/* Legend, note and actions ---------------------------------------------------- */
.pm-datepicker__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0.65rem 0 0;
  border-top: 1px solid var(--pm-border);
  list-style: none;
  font-size: 0.8rem;
  color: var(--pm-muted);
}
.pm-datepicker__legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.pm-datepicker__swatch { flex: none; display: inline-block; border-radius: 50%; }
.pm-datepicker__swatch--today {
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid var(--pm-datepicker-mark);
}
.pm-datepicker__swatch--on-request {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--pm-datepicker-mark);
}
.pm-datepicker__note {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--pm-muted);
  text-wrap: pretty; /* no lone word or "·" on the last line */
}
.pm-datepicker__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.pm-datepicker__footer .btn { --bs-btn-border-radius: 999px; }
.pm-datepicker__footer .btn-link { --bs-btn-padding-x: 0.25rem; }

/* Phones: the panel spans the field width. */
@media (max-width: 575.98px) {
  .pm-datepicker__menu { width: 100%; max-width: none; padding: 0.85rem; }
  .pm-datepicker__grid { border-spacing: 0.05rem; }
  .pm-datepicker__grid th { letter-spacing: 0; font-size: 0.68rem; }
  .pm-datepicker__day { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-datepicker__menu { animation: none; }
}