/* PayCalendar для CRM АрендОК — копия public/assets/paycal.css (решение владельца №27): та же раскладка,
   цвета — только токены донора ds-emz.css (порт Emailzavr), литералов цвета нет. Светлая тема — :root,
   тёмная — :root[data-theme=dark]: значения токенов переключает сам ds-emz.css. Размер шрифта — токены --fs-*
   (их пересчитывает настройка «размер текста» оболочки). Подвал — канонические кнопки донора .btn--secondary .btn--sm.

   Пара «выбранный день / фокус» — свои имена поверх токенов донора (контраст посчитан по значениям ds-emz):
   светлая: --accent (#1fa588) на белом — 3,09, поэтому --accent-hover (#17836b): на белом 4,67, белый текст на нём 4,67;
   тёмная:  --accent (#22c55e) на --bg-surface — 7,98, текст на нём --c-ink (#111827) — 7,79. */
.dp-trigger, .dp-pop { --dp-strong: var(--accent-hover); --dp-on-strong: var(--fg-on-accent); }
:root[data-theme=dark] .dp-trigger, :root[data-theme=dark] .dp-pop { --dp-strong: var(--accent); --dp-on-strong: var(--c-ink); }

.dp-trigger { display: inline-flex; align-items: center; gap: 6px; width: 100%; background: none; border: none; color: var(--fg-default); font: inherit; text-align: left; padding: 8px 10px; cursor: pointer; border-radius: var(--r-sm); }
.dp-trigger .dp-ico { display: inline-flex; align-items: center; color: var(--fg-muted); flex: 0 0 auto; }
.dp-trigger .dp-val { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-trigger .dp-val.ph { color: var(--fg-muted); }
.dp-trigger .dp-chev { display: inline-flex; align-items: center; color: var(--fg-muted); flex: 0 0 auto; }
.dp-trigger:hover:not(.dp-disabled) { background: var(--bg-hover); }
.dp-trigger.dp-open { background: var(--bg-surface); box-shadow: inset 0 0 0 1px var(--dp-strong), 0 0 0 3px var(--ring); }
/* Недоступное поле: у исходника opacity .5 — подсказка падала ниже контраста 3; здесь приглушённый текст и фон-вкладка. */
.dp-trigger.dp-disabled { cursor: default; color: var(--fg-muted); background: var(--bg-inset); }
.dp-trigger:focus-visible, .dp-pop :focus-visible { outline: 2px solid var(--dp-strong); outline-offset: 2px; }

.dp-pop { position: fixed; z-index: 10000; width: max-content; max-width: calc(100vw - 16px); background: var(--bg-surface); color: var(--fg-default); border: 1px solid var(--border-default); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 14px; }
.dp-cals { display: flex; gap: 22px; }
.dp-cal { width: 232px; }
.dp-mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-mtitle { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--fg-default); }
.dp-navsp { width: 26px; height: 1px; }
.dp-nav { background: none; border: none; color: var(--fg-muted); font-size: 18px; line-height: 1; padding: 2px 8px; border-radius: var(--r-sm); cursor: pointer; }
.dp-nav:hover { background: var(--bg-hover); color: var(--fg-default); }
/* Сетка месяца (APG): .dp-grid[role=grid] → .dp-wd[role=row] заголовков → .dp-week[role=row] недель; раскладка та же. */
.dp-grid { display: grid; row-gap: 2px; }
.dp-wd, .dp-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-wd { margin-bottom: 2px; }
.dp-wd span { text-align: center; font-size: var(--fs-xs); color: var(--fg-muted); font-weight: var(--fw-semibold); }
.dp-cell { height: 34px; display: flex; align-items: center; justify-content: center; }
.dp-day { width: 32px; height: 32px; border: none; background: none; color: var(--fg-default); border-radius: var(--r-full); cursor: pointer; font: inherit; font-size: var(--fs-base); display: flex; align-items: center; justify-content: center; padding: 0; }
.dp-day:hover { background: var(--bg-active); }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--dp-strong); }
.dp-day.sel, .dp-day.sel:hover { background: var(--dp-strong); color: var(--dp-on-strong); font-weight: var(--fw-bold); }
.dp-pop .dp-day:focus-visible { border-radius: var(--r-full); }
.dp-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; border-top: 1px solid var(--border-default); padding-top: 10px; }

/* Узкие экраны: два месяца (2×232 + gap 22 = 486px) не помещаются в попап,
   ограниченный max-width:calc(100vw - 16px) — прокрутка внутри блока, как у исходника. */
@media (max-width: 560px) {
  .dp-cals { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .dp-cal { flex: 0 0 auto; scroll-snap-align: start; }
}