/**
 * Тема flatpickr под токены приложения (app.css) — светлая и тёмная.
 *
 * Заменяет нативный календарь браузера (найдено 01.09.2026: «найди
 * готовый или напиши календарь посимпотичнее» — системный date-picker
 * у каждого браузера/ОС свой, не совпадает с остальным интерфейсом).
 * Библиотека — app/static/vendor/flatpickr-4.6.13.min.{js,css} (MIT,
 * без зависимостей — подходит под CSP script-src 'self'). Этот файл
 * только перекрывает цвета/форму библиотечных классов её же переменными,
 * логику не трогает — обновление версии flatpickr не потребует правок
 * здесь, пока не поменяются имена классов.
 */
.flatpickr-calendar {
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--rule-strong); }
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { border-top-color: var(--rule-strong); }

.flatpickr-months { padding: 10px 10px 0; }
.flatpickr-months .flatpickr-month { color: var(--ink); fill: var(--ink); }
.flatpickr-current-month {
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent; color: var(--ink); font-weight: 600;
}
.flatpickr-current-month input.cur-year { color: var(--ink); font-weight: 600; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: var(--ink-3); color: var(--ink-3);
  transition: fill var(--dur-fast) var(--ease-out);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { fill: var(--ink); }

span.flatpickr-weekday { color: var(--ink-3); font-size: 11px; font-weight: 600; }

.flatpickr-day {
  color: var(--ink); border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.flatpickr-day.today { border-color: var(--ink-3); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--surface-2); border-color: var(--surface-2); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.flatpickr-day.inRange {
  background: var(--surface-2); border-color: var(--surface-2); box-shadow: none;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--ink-3); opacity: .6; }
.flatpickr-day.flatpickr-disabled { color: var(--ink-3); opacity: .35; }

.flatpickr-time { border-top: 1px solid var(--rule); }
.flatpickr-time input { color: var(--ink); }

/* Исходный <input type="date"> остаётся источником значения формы (ISO
   для бэкенда) — flatpickr сам переключает его type на "hidden" (браузер
   его и так не рисует, отдельно прятать не нужно). altInputClass задан
   явно в datepicker.js — без этого flatpickr подставляет свой служебный
   "form-control input", который здесь ничему не соответствует. altInput —
   то, что видит и кликает человек (человекочитаемый формат, свой
   календарь вместо системного). */
input.flatpickr-alt-input {
  height: var(--control-h-sm); font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm); padding: 0 10px; cursor: pointer;
}
input.flatpickr-alt-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flatpickr-day.selected {
    color: var(--accent-ink);
  }
}