/* smit-mobile-sheet.css — модалки на мобильном = полноэкранные слайд-панели.
 *
 * На телефоне обычная центрированная модалка мешает: она уже экрана, поля
 * внутри жмутся, футер уезжает под клавиатуру, а фон за краями кликается
 * случайным пальцем. Поэтому на ширине < 768px ЛЮБАЯ bootstrap-модалка
 * раскрывается на весь экран и выезжает снизу, как системная панель.
 *
 * Правила намеренно слабой специфичности (два класса): экраны со своим
 * оформлением диалога (CRM-дровер #cdCardModal, сайдбар #orgModal и т.п.)
 * задают его через id и остаются как были.
 *
 * Опт-аут: <div class="modal smit-no-sheet"> — модалка сохраняет обычный вид.
 */

@media (max-width: 767.98px) {

  /* Панель на весь экран: без внешних отступов и ограничения ширины —
     перебиваем в т.ч. modal-sm/lg/xl и modal-dialog-centered. */
  .modal:not(.smit-no-sheet) .modal-dialog {
    margin: 0;
    max-width: none;
    width: 100%;
    min-height: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
  }

  .modal:not(.smit-no-sheet) .modal-content {
    width: 100%;
    height: 100%;
    max-height: none;      /* modal-dialog-scrollable ставит max-height:100% */
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  /* Выезд снизу вместо «прыжка» сверху (bootstrap: translate(0,-50px)). */
  .modal.fade:not(.smit-no-sheet) .modal-dialog {
    transform: translateY(100%);
    transition: transform .28s ease-out;
  }
  .modal.fade.show:not(.smit-no-sheet) .modal-dialog {
    transform: none;
  }

  /* Шапка остаётся на месте, скроллится только тело. */
  .modal:not(.smit-no-sheet) .modal-header {
    position: relative;
    flex: 0 0 auto;
    padding-top: 1rem;
  }
  /* «Ручка» — сигнал, что это выдвижная панель (и зона свайпа вниз). */
  .modal:not(.smit-no-sheet) .modal-header::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .18);
  }
  .modal:not(.smit-no-sheet) .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal:not(.smit-no-sheet) .modal-footer {
    flex: 0 0 auto;
    /* iPhone: не прячем кнопки под системную полосу жестов */
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    gap: .5rem;
  }
  /* Кнопки действий — во всю ширину и с пальцевым размером. */
  .modal:not(.smit-no-sheet) .modal-footer > .btn {
    flex: 1 1 auto;
    min-height: 44px;
  }
  /* «Удалить» с me-auto остаётся отдельно слева, не растягиваем. */
  .modal:not(.smit-no-sheet) .modal-footer > .btn.me-auto {
    flex: 0 0 auto;
  }
  .modal:not(.smit-no-sheet) .btn-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* Перетаскивание панели пальцем (smit-mobile-sheet.js). */
  .modal:not(.smit-no-sheet) .modal-dialog.smit-sheet-dragging {
    transition: none;
  }
}

@media (max-width: 767.98px) and (prefers-color-scheme: dark) {
  .modal:not(.smit-no-sheet) .modal-header::before {
    background: rgba(255, 255, 255, .28);
  }
}

@media (max-width: 767.98px) {
  [data-bs-theme="dark"] .modal:not(.smit-no-sheet) .modal-header::before,
  body.dark-theme .modal:not(.smit-no-sheet) .modal-header::before {
    background: rgba(255, 255, 255, .28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade:not(.smit-no-sheet) .modal-dialog {
    transition: none;
  }
}