/* PayCalendar — стили единого календаря платформы. Цвета берутся из токенов
   страницы-хоста (var(--…)), поэтому календарь следует теме хоста (светлая/тёмная).
   Локальные --pc-* дают безопасные значения, если хост не задал токены. См. paycal.js. */

/* Маппинг токенов хоста → локальные переменные календаря. По умолчанию — светлая
   палитра-фолбэк; наследуется потомками .dp-pop / .dp-trigger. Если хост задаёт
   свои токены (--popover/--card/--panel, --foreground/--tx, --border/--bd и т.д.) —
   выигрывают они, и календарь автоматически следует теме хоста. */
.dp-pop, .dp-trigger {
  --pc-surface: var(--popover, var(--card, var(--panel, #ffffff)));
  --pc-fg:      var(--foreground, var(--tx, var(--text, #111111)));
  --pc-muted:   var(--muted-foreground, var(--muted-fg, var(--tx-2, #6b7280)));
  --pc-border:  var(--border, var(--bd, #e2e5ea));
  --pc-hover:   var(--secondary, var(--panel-2, #f1f3f7));
  --pc-accent:  oklch(48.8% .243 264.376);
}
/* Тёмная тема хоста (переключатель платформы, не ОС): меняем только ФОЛБЭКИ на
   случай, если у хоста нет токенов; при наличии токенов хоста выигрывают они (var()
   выше). Скоуп — только собственные селекторы календаря, глобальные правила не трогаем. */
[data-theme="dark"] .dp-pop, [data-theme="dark"] .dp-trigger,
.dark .dp-pop, .dark .dp-trigger {
  --pc-surface: var(--popover, var(--card, var(--panel, oklch(20.5% 0 0))));
  --pc-fg:      var(--foreground, var(--tx, var(--text, oklch(98.5% 0 0))));
  --pc-muted:   var(--muted-foreground, var(--muted-fg, var(--tx-2, oklch(70.8% 0 0))));
  --pc-border:  var(--border, var(--bd, oklch(26.9% 0 0)));
  --pc-hover:   var(--secondary, var(--panel-2, oklch(26.9% 0 0)));
}

/* Поле-триггер (базовый вид; модуль-хост может добавить обрамление под свой контекст). */
.dp-trigger { display: inline-flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: none; color: var(--pc-fg); font: inherit; text-align: left; padding: 7px 9px; cursor: pointer; border-radius: 4px; }
.dp-trigger .dp-ico { display: inline-flex; align-items: center; color: var(--pc-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(--pc-muted); }
.dp-trigger .dp-chev { display: inline-flex; align-items: center; color: var(--pc-muted); flex: 0 0 auto; opacity: .65; }
.dp-trigger:hover:not(.dp-disabled) { background: var(--pc-hover); }
.dp-trigger.dp-open { background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-accent); }
.dp-trigger.dp-disabled { cursor: default; opacity: .5; }

/* Выпадающий календарь — два месяца. */
.dp-pop { position: fixed; z-index: 10000; width: max-content; max-width: calc(100vw - 16px); background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: 6px; box-shadow: 0 16px 44px oklch(0% 0 0 / .5); 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: 13px; font-weight: 600; color: var(--pc-fg); }
.dp-navsp { width: 26px; height: 1px; }
.dp-nav { background: transparent; border: none; color: var(--pc-muted); font-size: 18px; line-height: 1; padding: 2px 8px; border-radius: 4px; cursor: pointer; }
.dp-nav:hover { background: var(--pc-hover); color: var(--pc-fg); }
.dp-wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dp-wd span { text-align: center; font-size: 11px; color: var(--pc-muted); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.dp-cell { height: 34px; display: flex; align-items: center; justify-content: center; }
.dp-day { width: 32px; height: 32px; border: none; background: transparent; color: var(--pc-fg); border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0; }
.dp-day:hover { background: var(--pc-hover); }
.dp-day.today { box-shadow: inset 0 0 0 1px oklch(74% .12 230 / .7); }
.dp-day.sel { background: var(--pc-accent); color: oklch(98.5% 0 0); font-weight: 600; }
.dp-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; border-top: 1px solid var(--pc-border); padding-top: 10px; }
.dp-fbtn { background: var(--pc-hover); border: 1px solid var(--pc-border); color: var(--pc-fg); border-radius: 4px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 12px; }
.dp-fbtn:hover { border-color: var(--pc-accent); }
.dp-clear { color: var(--pc-muted); }