/* Babou Coach 4.4.1 — défilement fiable des pages et fenêtres sur iPhone/PWA */

html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  touch-action: auto;
}

main,
.page,
.page.active {
  min-height: 0;
  overflow: visible;
  touch-action: auto;
}

/*
 * Toutes les fenêtres utilisent désormais leur feuille comme zone de
 * défilement. Cette règle couvre aussi bien les formulaires avec .modal-body
 * que les guides machines dont le contenu est directement dans .modal-sheet.
 */
.modal {
  display: flex;
  align-items: flex-start !important;
  justify-content: center;
  overflow: hidden !important;
  box-sizing: border-box;
  padding:
    max(12px, env(safe-area-inset-top))
    0
    max(12px, env(safe-area-inset-bottom));
}

.modal .modal-sheet {
  width: min(920px, calc(100% - 20px));
  max-height: calc(100vh - 24px) !important;
  max-height: calc(
    100dvh
    - max(12px, env(safe-area-inset-top))
    - max(12px, env(safe-area-inset-bottom))
  ) !important;
  margin: auto 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.modal .modal-body {
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
  touch-action: pan-x pan-y pinch-zoom;
  box-sizing: border-box;
  padding-bottom: max(26px, calc(18px + env(safe-area-inset-bottom)));
}

/* Les deux écrans qui ont révélé le défaut sont explicitement protégés. */
#sessionFollowupModal .modal-sheet,
#machineLibraryModal .modal-sheet,
#machineGuideModal .modal-sheet {
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 620px) {
  .modal .modal-sheet {
    width: calc(100% - 16px);
    margin-right: 8px;
    margin-left: 8px;
  }

  .modal .modal-body {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@supports not (height: 100dvh) {
  .modal .modal-sheet {
    max-height: calc(100vh - 24px) !important;
  }
}