/* --- Shared UI: modal (SSOT) --- */
/* NOTE:
   - глобальные reusable-правила модалок,
   - вынесены из app.css без изменения поведения,
   - подключаются глобально через base.html.
 */

/* --- Stage0/Stage2: modal scroll containment (SSOT) --- */
/* Новый глобальный стандарт:
   - panel фиксирована в viewport через overlay-centering,
   - если высоты окна не хватает, скроллится ВСЯ .modal-panel,
   - поведение одинаковое для staff/clients и других страниц,
   - sticky/footer остаётся опциональной надстройкой, а не обязательной базой.
 */
.modal-panel {
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.modal-footer-sticky {
  position: sticky;
  bottom: 0;
  background: var(--card);
  z-index: 1;
}

.modal-panel .modal-footer-sticky {
  border-top: 1px solid var(--border);
}

/* --- Stage2: modal focus ring fix (SSOT) --- */
/* Причина:
   - .input:focus-visible использует box-shadow,
   - внутри scroll-container ring может подрезаться.
   Решение:
   - внутри модалок рисуем ring inset-вариантом.
 */
.modal-panel .input:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--ring) !important;
  border-color: var(--primary);
}

/* --- Shared modal overlay/content --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgb(0 0 0 / 0.5);
}

.modal-content {
  position: fixed;
  top: calc(1/2 * 100%);
  left: calc(1/2 * 100%);
  z-index: 50;
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  width: 100%;
  max-width: var(--container-lg);
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 6);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
    0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
    var(--tw-ring-shadow), var(--tw-shadow);
  border: 1px solid var(--border);
  background-color: var(--card);
}