/* Календарь периода и закреплённая панель фильтров.

   Часть единого набора компонентов (docs/09, раздел 2):

       app/templates/components.html   разметка (kalendar_perioda, panel_upravleniya)
       app/static/components.js        поведение (протягивание, живое применение)
       app/static/kalendar.css         вид календаря и закреплённой панели (этот файл)

   Стили календаря переехали сюда из style.css целиком: общий файл правят
   несколько исполнителей параллельно, а календарь — отдельная законченная
   вещь. Базовые правила самой формы фильтров (.filtry, .tumbler, .vybor,
   .perekluchatel) остались в style.css — они общие для всех форм.

   Вид — по образцу заказчика, скрин из «[блок].офис» (docs/09, раздел 13,
   п. 7): светлая скруглённая панель, крупные числа с воздухом, будние
   заголовки серым мелким, выбранные даты — чёрные скруглённые квадраты
   с белой цифрой, диапазон — светло-серая заливка, сегодняшняя дата —
   тонкая рамка, дни соседних месяцев не показываются. Внизу слева поля
   «с» и «по», справа кнопка «Применить». Текущий месяц — СПРАВА, левее —
   два предыдущих (поздняя поправка заказчика от 04.09.2026).

   Движение — по docs/08: только transform/opacity, ease-out, без ease-in. */

/* ==========================================================================
   Закреплённая панель фильтров (docs/09, раздел 13, п. 5)
   ========================================================================== */

/* Панель управления сводкой прилипает к самому верху окна: шапка больше
   не закреплена (docs/09 §15 п. 7) и уходит вверх при прокрутке, поэтому
   панель встаёт на top: 0 — только фильтры и тумблеры видны всегда.
   Подложка — фон страницы: панель не шире колонки содержимого, а за краями
   колонки и так лежит тот же --m01-bg, поэтому просветов не бывает. */
.filtry--zakreplennye {
  position: sticky;
  top: 0;
  z-index: 30; /* выше содержимого, ниже шапки (у неё 50) */
  margin: 0 0 18px;
  padding: 10px 0;
  background: var(--m01-bg);
}

/* Тонкая тень-граница — только когда панель действительно прилипла
   (класс ставит components.js): в потоке страницы черта была бы шумом. */
.filtry--prilipla {
  box-shadow: 0 1px 0 var(--m01-border), 0 10px 24px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Кнопка календаря в ряду фильтров
   ========================================================================== */

/* У .kalendar намеренно нет position: relative — якорь панели не кнопка,
   а весь ряд .filtry__ryad (см. комментарий в style.css у .filtry__ryad). */

.kalendar__knopka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--m01-surface);
  border: 1px solid var(--m01-border);
  border-radius: var(--radius);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.kalendar__knopka::-webkit-details-marker { display: none; }

.kalendar[open] > .kalendar__knopka { border-color: var(--aktsent-tekst); }

/* ==========================================================================
   Панель: светлая, скруглённая, с воздухом
   ========================================================================== */

/* Панель — форма с датами, поверхность непрозрачная: читаемость чисел
   важнее стекла (docs/08). Позиционируется от ряда .filtry__ryad, а не от
   кнопки: прижата к правому краю ряда и не шире самого ряда, поэтому не
   вылетает за край экрана и не рождает горизонтальную прокрутку. */
.kalendar__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  /* Выше плавающих кнопок разделов (у них 60): открытая панель календаря
     не должна перекрываться ничем. */
  z-index: 70;
  width: max-content;
  max-width: 100%;
  padding: 18px;
  background: var(--m01-surface);
  border: 1px solid var(--m01-border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  transition: transform 150ms var(--ease-out), opacity 150ms var(--ease-out);
}

@starting-style {
  .kalendar__panel { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

/* ==========================================================================
   Полоса месяцев: ‹ два предыдущих и текущий ›
   ========================================================================== */

.kalendar__polosa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.kalendar__strelka {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 44px;
  background: var(--m01-surface);
  border: 1px solid var(--m01-border);
  border-radius: var(--radius);
  color: var(--m01-text-muted);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out);
}

.kalendar__strelka:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .kalendar__strelka:hover { color: var(--m01-text); }
}

.kalendar__mesyatsy {
  display: flex;
  /* Промежуток между месяцами — просторный (правка 07.09). */
  gap: 44px;
  overflow: hidden;
}

/* Таблицы месяцев ровные: шаблон добивает каждый месяц пустыми неделями
   до шести рядов, а клетка держит высоту и без кнопки внутри — поэтому
   три месяца всегда одной высоты и низ панели не прыгает при листании
   (заказчик: «исправить кривую отрисовку», docs/09, раздел 13, п. 7). */
.kalendar__mesyats { flex: none; border-collapse: collapse; }

/* Название месяца — сверху по центру. */
.kalendar__zagolovok {
  caption-side: top;
  /* Отступ до строки дней недели — заметный (правка заказчика 07.09). */
  padding-bottom: 18px;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
}

/* Будние заголовки ПН…ВС — серым мелким. */
.kalendar__dn {
  padding: 2px 0 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--m01-text-muted);
  text-align: center;
}

.kalendar__kletka { height: 32px; padding: 1px 0; }

/* Число месяца: крупная клетка с воздухом. Подсветка мгновенная:
   протягивание должно ощущаться как собственная рука, любой переход
   читался бы как тормоза. Дни соседних месяцев не рисуются вовсе —
   клетка тогда просто пуста. */
.kalendar__den {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Вдвое компактнее прежних 44px — правка заказчика 07.09. */
  width: 30px;
  height: 30px;
  margin: 0 auto;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--m01-text);
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kalendar__den--vyhodnoy { color: var(--m01-text-muted); }

/* Сегодняшняя дата — тонкая рамка. */
.kalendar__den--segodnya { box-shadow: inset 0 0 0 1px var(--m01-text); }

/* Диапазон между выбранными датами — светло-серая заливка сплошной полосой. */
.kalendar__den--v-periode,
.kalendar__den--vybor {
  background: var(--fon-perioda);
  border-radius: 0;
}

/* Выбранные даты (края диапазона) — чёрные скруглённые квадраты
   с белой цифрой (белый на #0e0e10 — контраст с запасом). */
.kalendar__den--nachalo,
.kalendar__den--konets {
  background: var(--m01-text);
  color: #ffffff;
  border-radius: 10px;
}

@media (hover: hover) and (pointer: fine) {
  /* Ховер не трогает края периода, выбранный день календаря дня (у него
     фирменная заливка) и запертые будущие дни. */
  .kalendar__den:not(.kalendar__den--nachalo):not(.kalendar__den--konets):not(.kalendar__den--vybran):not([disabled]):hover {
    background: var(--navedenie-stroki);
  }
}

/* Фон дней внутри диапазона — светло-серый, как на образце заказчика
   (прежняя фирменная розовая плашка отменена вместе с красными краями). */
:root { --fon-perioda: var(--fon-informatsii); }

/* ==========================================================================
   Низ панели: слева поля «с» и «по», справа «Применить»
   ========================================================================== */

.kalendar__niz {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 14px;
  margin-top: 14px;
}

.kalendar__polya {
  display: flex;
  gap: 10px;
}

.kalendar__pole {
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--m01-text-muted);
}

.kalendar__pole input { min-height: 44px; }

/* ==========================================================================
   Узкие экраны
   ========================================================================== */

/* Трём месяцам тесно — остаются два ПОСЛЕДНИХ (текущий всегда виден:
   он в полосе крайний справа). */
@media (max-width: 1240px) {
  .kalendar__mesyatsy .kalendar__mesyats:nth-last-child(n + 3) { display: none; }
}

/* Двум тесно — остаётся один ПОСЛЕДНИЙ, то есть текущий, а не давно
   прошедший. Стрелки листают тот же ряд, запасной путь — поля внизу. */
@media (max-width: 860px) {
  .kalendar__mesyatsy .kalendar__mesyats:nth-last-child(n + 2) { display: none; }
}

@media (max-width: 700px) {
  /* Панель раскрывается в поток страницы, а не поверх: на узком экране
     всплывающему окну не хватает места, и его пришлось бы прокручивать.
     В потоке она физически не может вылететь за край экрана. */
  .kalendar__panel {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 8px;
    padding: 14px;
    box-shadow: none;
  }

  .kalendar__mesyatsy { justify-content: center; flex: 1 1 auto; }

  /* Полоса обязана влезать в 390px вместе со стрелками: клетки чуть
     меньше (40px — всё ещё уверенная цель для пальца), стрелки уже.
     Итог: 7×40 + две стрелки по 28 + зазоры = 348px < 366px содержимого. */
  .kalendar__polosa { gap: 6px; }
  .kalendar__den { width: 40px; height: 40px; }
  .kalendar__kletka { height: 42px; }
  .kalendar__strelka { width: 28px; min-height: 40px; }

  /* Поля дат делят ширину панели, кнопка «Применить» — своим рядом справа. */
  .kalendar__polya { flex: 1 1 100%; }
  .kalendar__pole { flex: 1 1 0; width: auto; }
  .kalendar__niz { justify-content: flex-end; }
}

/* ==========================================================================
   Календарь одного дня — раздел «Ввод» (docs/09, раздел 16, п. 5)
   ========================================================================== */

/* Тот же календарь, что у сводки, — те же клетки, цвета и заголовок
   месяца, — но месяц один и выбирается один день. Разметку строит
   app/static/kalendar-den.js из нативного поля даты; пока скрипт
   не отработал (или его нет), видно само поле — запасной путь без JS. */

/* Обёртка .pole поля дня — якорь всплывающей панели. */
.kalendar-den { position: relative; }

/* Поле-фолбэк прячется, только когда календарь ДЕЙСТВИТЕЛЬНО построен:
   класс ставит сам скрипт, а не разметка (продолжение приёма
   .est-js/.bez-js из style.css) — сломался скрипт, осталось рабочее
   нативное поле. Спрятанное поле продолжает ездить с формой: display
   не отключает отправку значения, в отличие от disabled. */
.kalendar-den--gotov > input[type="date"] { display: none; }

/* Кнопка календаря встаёт на место поля: во всю ширину .pole и той же
   высоты, что нативные поля (48px в style.css), — ряд выбора дня
   и группы остаётся ровным. */
.kalendar-den .kalendar__knopka {
  width: 100%;
  min-height: 48px;
  justify-content: space-between;
}

/* Панель одного месяца якорится к полю и раскрывается вниз-вправо:
   поле «День» стоит у левого края экрана, влево панели лететь некуда.
   max-width сброшен: у сводки он равнялся ширине ряда фильтров, здесь
   якорь — узкое поле, и панель обязана быть шире него. */
.kalendar-den .kalendar__panel {
  left: 0;
  right: auto;
  max-width: none;
}

/* Выбранный день — фирменная заливка с белой цифрой (--aktsent-tekst —
   это фирменный красный с контрастом 5,74:1 на белом, style.css/docs/08).
   Чёрные квадраты сводки означают КРАЯ периода; здесь период — один
   день, и он фирменный. */
.kalendar__den--vybran {
  background: var(--aktsent-tekst);
  color: #ffffff;
  border-radius: 10px;
}

/* Будущие дни и стрелка в будущее заперты: за будущее не вводят
   (то же ограничение, что max у поля-фолбэка). */
.kalendar__den[disabled],
.kalendar__strelka[disabled] {
  color: var(--m01-text-muted);
  opacity: 0.4;
  cursor: default;
}

.kalendar__strelka[disabled]:active { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .kalendar__strelka[disabled]:hover { color: var(--m01-text-muted); }
}

/* На телефоне панель раскрывается в поток (общее правило выше), но живёт
   она внутри карточки с отступом 16px — календарю сводки, лежащему во всю
   ширину содержимого, было просторнее. Чтобы месяц не распирал карточку:
   поле разрешает себя сжимать, панель выходит минус-полями на края
   карточки, стрелки и зазоры уже, клетки 36px (уверенная цель для пальца).
   Итог на 375px: панель 351, внутри 333, месяц 7×36=252 + стрелки 2×24
   + зазоры 2×4 = 308 — влезает с запасом. */
@media (max-width: 700px) {
  .kalendar-den { min-width: 0; }

  .kalendar-den .kalendar__panel {
    width: auto;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .kalendar-den .kalendar__polosa { gap: 4px; }
  .kalendar-den .kalendar__strelka { width: 24px; }
  .kalendar-den .kalendar__den { width: 36px; height: 36px; }
  .kalendar-den .kalendar__kletka { height: 38px; }
}

/* ==========================================================================
   Ограниченное движение
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kalendar__panel {
    transition: opacity 150ms var(--ease-out);
    transform: none !important;
  }
  .kalendar__strelka:active { transform: none; }
}