/* ROOFSTACK_MOBILE_VIEWPORT_GUARD_20260702 */
@media (max-width: 900px) {
  html, body, #app { max-width: 100vw !important; overflow-x: hidden !important; }
  [role="dialog"], .modal, .fixed.inset-0 > div, .fixed.inset-0 .bg-white, .fixed.inset-0 .rounded-xl, .fixed.inset-0 .rounded-2xl {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;
    margin: calc(env(safe-area-inset-top, 0px) + 12px) auto calc(env(safe-area-inset-bottom, 0px) + 12px) auto !important;
    overflow: auto !important;
    box-sizing: border-box !important;
  }
  [role="dialog"] button[aria-label="Close"], .modal button[aria-label="Close"], .fixed.inset-0 button[aria-label="Close"], .fixed.inset-0 button[title="Close"] {
    position: sticky !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 50 !important;
  }
  .overflow-x-auto, .tabs, [role="tablist"] {
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table, .min-w-full { max-width: 100% !important; }
  .fixed.bottom-0, .sticky.bottom-0 {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
}