/* Поле даты и перекраска Air Datepicker 3.5.3 под «Каталог пластинок»: матовый чёрный,
   волоски, без скруглений; выбранный день — белый квадрат, сегодня — красная метка.
   Оболочка всплывающего слоя (.ui-pop, лист на телефоне, затемнение) — из select.css.
   Подключается после vendor/air-datepicker/air-datepicker.css. */

/* ---------- Поле: текст «дд.мм.гггг» и квадратная кнопка календаря ---------- */

.ui-date-control {
  position: relative;
  display: flex;
  min-width: 0;
}
.ui-date-text {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: auto;
}
.ui-date-btn {
  position: relative;
  z-index: 1;
  margin-left: -1px;
  color: var(--muted);
}
.ui-date-btn:hover,
.ui-date.is-open .ui-date-btn { border-color: var(--paper); color: var(--paper); }
.ui-date-text:focus,
.ui-date-btn:focus-visible { z-index: 2; }
.ui-date.is-invalid .ui-date-text { border-color: var(--bad); }
.ui-date-btn:disabled { color: var(--line); }

/* ---------- Окно календаря ---------- */

.ui-date-pop { width: 19.5rem; }
.ui-date-pop.is-sheet { width: auto; overflow-y: auto; }

.ui-cal-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) 0;
}
.ui-cal-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-m);
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums;
}
.ui-cal-step { border-color: transparent; }
.ui-cal-step:hover { border-color: var(--line); }
/* На границе (01.01.2000, завтра) стрелки нет, но место за ней остаётся. */
.ui-cal-step:disabled { visibility: hidden; }

.ui-cal-foot {
  display: flex;
  padding: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

/* ---------- Air Datepicker: только переменные и мелкие правки, разметка — библиотеки ---------- */

.ui-date-pop .air-datepicker {
  --adp-font-family: var(--font-text);
  --adp-font-size: var(--text-m);
  --adp-width: auto;
  --adp-padding: 0;
  --adp-transition-duration: 0s;
  --adp-background-color: var(--ink);
  --adp-background-color-hover: var(--ink-raised);
  --adp-background-color-active: var(--ink-raised);
  --adp-color: var(--paper);
  --adp-color-secondary: var(--muted);
  --adp-accent-color: var(--paper);
  --adp-color-current-date: var(--paper);
  --adp-color-other-month: var(--muted);
  --adp-color-other-month-hover: var(--paper);
  --adp-color-disabled: var(--line);
  --adp-color-disabled-in-range: var(--line);
  --adp-border-color: var(--line);
  --adp-border-color-inner: var(--line-soft);
  --adp-border-color-inline: var(--line);
  --adp-border-radius: 0;
  --adp-cell-border-radius: 0;
  --adp-day-name-color: var(--muted);
  --adp-day-cell-height: 2.5rem;
  --adp-cell-background-color-hover: var(--ink-raised);
  --adp-cell-background-color-selected: var(--paper);
  --adp-cell-background-color-selected-hover: var(--paper);
  --adp-background-color-selected-other-month: var(--paper);
  --adp-background-color-selected-other-month-focused: var(--paper);
  position: static;
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.ui-date-pop .air-datepicker-nav { display: none; } /* своя шапка с кнопками-стрелками */
.ui-date-pop .air-datepicker--content { padding: 0 var(--space-3) var(--space-3); }

.ui-date-pop .air-datepicker-body--day-names { margin: var(--space-3) 0 var(--space-1); }
.ui-date-pop .air-datepicker-body--day-name {
  height: 1.5rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.ui-date-pop .air-datepicker-body--cells.-days- { gap: 2px; }

.ui-date-pop .air-datepicker-cell.-day- {
  font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--dur-1) var(--ease-out);
}
/* Наведение — волосок по клетке. */
.ui-date-pop .air-datepicker-cell.-day-.-focus- {
  background: var(--ink-raised);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
/* Фокус клавиатуры — белая рамка 2px. */
.ui-date-pop .air-datepicker-cell.-day-:focus { outline: none; }
.ui-date-pop .air-datepicker-cell.-day-:focus-visible {
  z-index: 2;
  outline: 2px solid var(--paper);
  outline-offset: -2px;
}
/* Выбранный день — белый квадрат, цифра чёрная. */
.ui-date-pop .air-datepicker-cell.-day-.-selected-,
.ui-date-pop .air-datepicker-cell.-day-.-selected-.-focus-,
.ui-date-pop .air-datepicker-cell.-day-.-selected-.-other-month- {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  outline: 0;
}
.ui-date-pop .air-datepicker-cell.-day-.-selected-:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
/* Сегодня — красная метка в углу клетки (подпись «сегодня» — у скринридера). */
.ui-date-pop .air-datepicker-cell.-day-.-current- { font-weight: 600; }
.ui-date-pop .air-datepicker-cell.-day-.-current-::after {
  content: "";
  position: absolute;
  top: 0.3125rem;
  right: 0.3125rem;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--code-red);
}
/* Недоступные дни (вне границ) заметно слабее дней соседних месяцев (--muted). */
.ui-date-pop .air-datepicker-cell.-day-.-disabled- {
  color: var(--line-soft);
  color: color-mix(in srgb, var(--line) 50%, var(--ink));
  cursor: not-allowed;
}
.ui-date-pop .air-datepicker-cell.-day-.-disabled-.-focus- { background: none; outline: 0; }

/* Касание на планшете и ПК с сенсором: клетки не меньше 44px, окно шире. */
@media (pointer: coarse) {
  .ui-date-pop { width: 22rem; }
  .ui-date-pop .air-datepicker { --adp-day-cell-height: 2.75rem; }
}

/* Телефон: клетки не меньше 44px и в высоту, и в ширину, поля — по краю страницы. Семь
   колонок по 44px (19,25rem) на 320px не помещаются с полями --gutter и промежутками 2px:
   промежутков нет, а поля сужаются до остатка (не меньше 4px). */
.ui-date-pop.is-sheet .air-datepicker { --adp-day-cell-height: 3rem; --adp-font-size: 1rem; }
.ui-date-pop.is-sheet .ui-cal-nav { padding: var(--space-2) calc(var(--gutter) - var(--space-2)) 0; }
.ui-date-pop.is-sheet .air-datepicker--content {
  padding: 0 clamp(var(--space-1), (100% - 19.25rem) / 2, var(--gutter)) var(--space-3);
}
.ui-date-pop.is-sheet .air-datepicker-body--cells.-days- { gap: 0; }
.ui-date-pop.is-sheet .ui-cal-foot { padding: var(--space-3) var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  .ui-date-pop .air-datepicker-cell.-day- { transition: none; }
}