/**
 * SEVEN UI Kit: общая модальная оболочка на нативном <dialog>.
 *
 * Раньше каждое окно рисовало свой бэкдроп и само пробивалось наверх слоями:
 * в проекте жили z-index 40, 1000, 1000, 1000, 1200, 1400, 3000 и 10020 —
 * последний уже явно проиграл эту войну. Нативный <dialog> открывается в
 * top layer, поэтому порядок слоёв перестаёт быть предметом спора, а Esc,
 * ловушка фокуса и возврат фокуса приходят от браузера.
 *
 * Компонент не переписывает разметку страниц: ui-kit/modal.js на время
 * показа переносит существующий контейнер окна внутрь <dialog>, а при
 * закрытии возвращает на место. Правила ниже гасят легаси-геометрию,
 * которая внутри top layer уже не нужна.
 */

.ui-modal {
  width: min(100%, var(--ui-modal-width, 720px));
  max-width: 100%;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.ui-modal::backdrop {
  background: rgba(8, 8, 7, 0.62);
  backdrop-filter: blur(2px);
}

:root[data-theme="light"] .ui-modal::backdrop {
  background: rgba(28, 26, 22, 0.42);
}

/* Внутри top layer контейнер окна перестаёт быть полноэкранной подложкой:
   позиционирование и слой берёт на себя сам <dialog>. */
.ui-modal > * {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100%;
  max-height: 100dvh;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Контейнеры, которые раньше сами работали полноэкранной подложкой: внутри
   top layer затемняет ::backdrop, и их собственный фон оставлял вокруг
   карточки лишний светлый прямоугольник. Гасим только фон контейнера —
   поверхность рисует карточка внутри него. Списком, а не по `.ui-modal > *`:
   у части окон карточка и есть контейнер, и обнуление фона делает окно
   прозрачным. */
.ui-modal > :is(
  .schedule-edit-modal,
  .picker-modal,
  .plan-action-modal,
  .ok-record-modal,
  .ok-schedule-modal,
  .qr-scanner-modal,
  .rw-modal
) {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Легаси-подложки: у <dialog> есть ::backdrop, второй слой затемнения
   только съедает контраст. */
.ui-modal :is(
  .schedule-modal-backdrop,
  .ok-record-modal-backdrop,
  .picker-modal-backdrop,
  .label-print-modal-backdrop,
  .payroll-detail-overlay-backdrop
) {
  display: none !important;
}

/* Класс-заглушка исходного места: контейнер уехал в <dialog>, а страница
   не должна на его месте схлопнуть раскладку. */
.ui-modal-placeholder {
  display: none !important;
}

@media (max-width: 768px) {
  .ui-modal {
    --ui-modal-width: 100%;
    align-self: flex-end;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ui-modal[open] {
    animation: ui-modal-in 140ms ease-out;
  }

  .ui-modal[open]::backdrop {
    animation: ui-modal-backdrop-in 140ms ease-out;
  }
}

@keyframes ui-modal-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes ui-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}