/* kv_modal_fix.css — central mobile modal / fixed-chrome fix.
 * Ensures modal & overlay controls (close ✕, action buttons) are never hidden
 * behind the fixed top-bar / footer / bottom-nav, and respects device safe-areas.
 * Loaded last so it wins the cascade. Works even against max-int z-index chrome
 * because the modal-open rules LOWER the chrome rather than only raising modals. */

/* 1) Overlays sit above everything (Bootstrap + common patterns) */
.modal-backdrop, .offcanvas-backdrop { z-index: 100040 !important; }
.modal, .offcanvas                   { z-index: 100050 !important; }
.swal2-container, .toast-container    { z-index: 100060 !important; }

/* 2) While a modal/offcanvas is open, drop the fixed chrome BELOW the backdrop.
      This defeats even 2147483647-z-index headers/footers. */
body.modal-open  .app-topbar, body.modal-open  .app-header, body.modal-open  .app-footer,
body.modal-open  .app-menubar, body.modal-open  .app-bottom-nav, body.modal-open  .kv-bottom-nav,
body.modal-open  .mobile-nav, body.modal-open  .kv-topbar, body.modal-open  .navbar.fixed-top,
body.modal-open  .navbar.fixed-bottom,
body.offcanvas-open .app-bottom-nav, body.offcanvas-open .kv-bottom-nav {
  z-index: 100 !important;
}

/* On phones, hide the bottom nav entirely while a modal is up (it only blocks controls). */
@media (max-width: 768px) {
  body.modal-open .app-bottom-nav, body.modal-open .kv-bottom-nav, body.modal-open .mobile-nav {
    display: none !important;
  }
}

/* 3) Keep the modal inside the visible viewport & clear the notch / home indicator */
.modal-dialog { margin-top: max(12px, env(safe-area-inset-top)); margin-bottom: max(12px, env(safe-area-inset-bottom)); }
.modal-content { max-height: calc(100dvh - 24px); overflow: auto; }

/* 4) Pin the close button so it can never slide under fixed chrome */
.modal-header { position: sticky; top: 0; z-index: 3; }
.modal .btn-close, .modal .close, .modal [data-bs-dismiss="modal"], .modal [data-dismiss="modal"] { z-index: 4; }

/* 5) Sticky modal action bars respect the home-bar */
.modal-footer { position: sticky; bottom: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }

/* ============================================================
   Mobile responsive guards — kill horizontal overflow & oversized
   elements system-wide (addresses hundreds of hardcoded wide widths
   and nowrap content flagged in the UI audit). Mobile-only, so desktop
   layouts are untouched.
   ============================================================ */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas, iframe, embed, object { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  /* wide tables scroll inside their own box instead of pushing the page */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .container, .container-fluid, .row { max-width: 100%; }
  /* long unbroken strings (URLs, IDs) wrap instead of overflowing */
  .text-break-mobile, .card, .list-group-item { overflow-wrap: anywhere; }
}