/* bankroll_scrollbar_fix.css
   Correctif Chrome/Opera/Edge : éviter la double scrollbar verticale.
   Le dashboard doit utiliser uniquement le scroll du document, et les modales Bootstrap
   doivent scroller dans .modal-body sans créer une deuxième barre sur .modal.
*/

html {
  min-height: 100%;
  height: auto;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

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

#bkRoot,
.bankroll-container,
.bankroll-layout,
.bankroll-main,
.bankroll-side,
.bankroll-side-inner {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/*
   Fix modales Add/Edit bet.
   Chromium affiche une barre sur .modal quand le dialog dépasse le viewport,
   puis une autre sur le document/body. On force donc le scroll utile dans le body
   de la modale uniquement.
*/
body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

.modal {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.modal-dialog {
  width: min(720px, calc(100vw - 24px));
  max-width: min(720px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: 12px auto !important;
  display: flex;
  align-items: stretch;
}

.modal-content {
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

.modal-header,
.modal-footer {
  flex: 0 0 auto;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@supports not (height: 100dvh) {
  .modal-dialog,
  .modal-content {
    max-height: calc(100vh - 24px);
  }
}