/* mobile-nav-modal-fixes.css v6
   Fixes:
   - Restores visible modal headers/footers using the same DLL navy/red styling.
   - Allows long modal forms to scroll on both desktop and mobile.
   - Keeps DataTables/Select2 filter layers behind active modals.
   - Hides mobile bottom nav only while a modal is open. */

:root {
  --dll-navy: #092f6b;
  --dll-navy-dark: #061f45;
  --dll-red: #d90416;
  --dll-border: #d8e2f0;
  --dll-modal-vh: 100vh;
}

/* Put table clone/filter layers behind modals whenever Bootstrap opens one. */
body.modal-open .dataTables_wrapper,
body.modal-open .dataTables_scroll,
body.modal-open .dataTables_scrollHead,
body.modal-open .dataTables_scrollHeadInner,
body.modal-open .dataTables_scrollBody,
body.modal-open .dataTables_scrollFoot,
body.modal-open .dtfc-fixed-left,
body.modal-open .dtfc-fixed-right,
body.modal-open .dtfc-fixed-start,
body.modal-open .dtfc-fixed-end,
body.modal-open .DTFC_LeftWrapper,
body.modal-open .DTFC_RightWrapper,
body.modal-open table.dataTable,
body.modal-open table.dataTable thead,
body.modal-open table.dataTable thead th,
body.modal-open table.dataTable thead td,
body.modal-open table.dataTable .filters,
body.modal-open .column-filter,
body.modal-open .select2-container:not(.select2-container--open) {
  z-index: 1 !important;
}

.modal-backdrop {
  z-index: 2147482990 !important;
}

.modal {
  z-index: 2147483000 !important;
}

/* Select2 dropdowns opened from inside a modal must appear above the modal. */
.select2-container--open,
.select2-dropdown {
  z-index: 2147483050 !important;
}

/* Shared modal layout for desktop and mobile. */
.modal .modal-dialog,
.modal .modal-dialog.modal-dialog-scrollable,
.modal .modal-dialog.modal-dialog-centered {
  min-height: 0 !important;
}

.modal .modal-content {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 1rem !important;
  border: 0 !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .28) !important;
}

.modal .modal-content > form,
.modal form#umpireForm,
.modal form#volunteerForm,
.modal form#userForm,
.modal form#eventUmpireForm {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Important: do NOT make this white. app-theme gives it white text, so keep a dark header. */
.modal .modal-header {
  flex: 0 0 auto !important;
  min-height: 58px !important;
  padding: .9rem 1rem !important;
  position: relative !important;
  z-index: 4 !important;
  color: #fff !important;
  background: radial-gradient(circle at top, #0d4a9b 0%, var(--dll-navy) 55%, var(--dll-navy-dark) 100%) !important;
  border-bottom: 3px solid var(--dll-red) !important;
  border-radius: 1rem 1rem 0 0 !important;
}

.modal .modal-title,
.modal .modal-header h1,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-header h4,
.modal .modal-header h5,
.modal .modal-header h6 {
  color: #fff !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  margin: 0 !important;
}

.modal .modal-header .btn-close {
  filter: invert(1) grayscale(100%) !important;
  opacity: .95 !important;
}

.modal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 1rem !important;
  position: relative !important;
  z-index: 2 !important;
  background: #fff !important;
}

.modal .modal-footer {
  flex: 0 0 auto !important;
  min-height: 64px !important;
  padding: .75rem 1rem !important;
  position: relative !important;
  z-index: 4 !important;
  background: #f8fbff !important;
  border-top: 1px solid rgba(11, 31, 58, .14) !important;
  border-radius: 0 0 1rem 1rem !important;
  box-shadow: 0 -8px 20px rgba(11, 31, 58, .08) !important;
}

/* Let the whole modal body scroll; don't trap scroll inside division grids. */
.modal .umpire-division-grid,
.modal .umpire-divisions-grid,
.modal .division-checkbox-grid,
.modal .divisions-grid,
.modal #divisionCheckboxes,
.modal #divisionChecklist,
.modal #umpireDivisions,
.modal .division-list {
  max-height: none !important;
  overflow: visible !important;
}

.modal .form-control,
.modal .form-select,
.modal .btn {
  min-height: 42px;
}

@media (min-width: 768px) {
  .modal .modal-dialog.modal-dialog-scrollable .modal-content,
  .modal .modal-dialog .modal-content {
    max-height: calc(100vh - 3.5rem) !important;
  }

  .modal .modal-content > form,
  .modal form#umpireForm,
  .modal form#volunteerForm,
  .modal form#userForm,
  .modal form#eventUmpireForm {
    max-height: calc(100vh - 3.5rem) !important;
  }
}

@media (max-width: 767.98px) {
  html,
  body {
    min-height: 100%;
  }

  body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
  }

  /* Hide bottom nav only while the modal is actually open. */
  body.modal-open .mobile-bottom-nav,
  body.modal-open .app-mobile-bottom-nav,
  body.modal-open .app-bottom-nav,
  body.modal-open .bottom-mobile-nav,
  body.modal-open .bottom-nav,
  body.modal-open .mobile-footer-nav,
  body.modal-open .app-mobile-nav,
  body.modal-open .dll-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .modal {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .modal.show {
    display: block !important;
  }

  .modal .modal-dialog,
  .modal .modal-dialog.modal-lg,
  .modal .modal-dialog.modal-xl,
  .modal .modal-dialog.modal-sm,
  .modal .modal-dialog.modal-dialog-scrollable,
  .modal .modal-dialog.modal-dialog-centered {
    width: calc(100vw - 1rem) !important;
    max-width: 540px !important;
    height: calc((var(--app-vh, 1vh) * 100) - 1rem) !important;
    max-height: calc((var(--app-vh, 1vh) * 100) - 1rem) !important;
    min-height: 0 !important;
    margin: .5rem auto !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    transform: none !important;
  }

  .modal .modal-content,
  .modal .modal-content > form,
  .modal form#umpireForm,
  .modal form#volunteerForm,
  .modal form#userForm,
  .modal form#eventUmpireForm {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  .modal .modal-body {
    padding: 1rem !important;
    padding-bottom: 1.25rem !important;
  }

  .modal .modal-footer {
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)) !important;
  }

  .modal .row.g-3 {
    --bs-gutter-y: .85rem;
  }
}