/**
 * Mobile Scroll Fix
 * 
 * PURPOSE: Ensure scrolling works on all mobile devices
 * CREATED: November 6, 2025
 * 
 * This file fixes common mobile scrolling issues including:
 * - Body scroll lock from modals
 * - Fixed positioning preventing scroll
 * - iOS momentum scrolling
 * - Height constraints blocking scroll
 */

/* ====================================================================
   CORE SCROLL ENABLERS
   ==================================================================== */

/* Ensure html and body can scroll */
html {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scroll */
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100vw;
}

body {
  min-height: 100%;
  overflow-y: auto !important; /* Override any JS that sets overflow: hidden */
  overflow-x: hidden !important; /* Prevent horizontal scroll */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none; /* Prevent bounce on iOS */
  overscroll-behavior-x: none; /* Prevent horizontal bounce */
  touch-action: pan-y pinch-zoom; /* Allow vertical scrolling */
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* Main content should scroll */
main,
#main-content,
[role="main"] {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scroll */
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto; /* Center content */
  position: relative;
}

/* ====================================================================
   MODAL SCROLL FIX
   ==================================================================== */

/* When modals are open, ensure body can still scroll */
body[style*="overflow: hidden"] {
  overflow-y: auto !important;
}

/* Modal content should scroll internally, not block body scroll */
[role="dialog"],
[role="alertdialog"],
.modal,
.dialog {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 90vh;
}

/* ====================================================================
   MOBILE-SPECIFIC FIXES
   ==================================================================== */

@media (max-width: 768px) {
  /* Force scroll on mobile with horizontal overflow prevention */
  html,
  body {
    position: relative !important; /* Override any position: fixed */
    overflow-y: auto !important;
    overflow-x: hidden !important; /* Prevent horizontal scroll */
    height: auto !important;
    min-height: 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Prevent any element from causing horizontal overflow */
  * {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Fix iOS Safari bottom bar issues */
  body {
    min-height: -webkit-fill-available;
  }

  /* Ensure page containers allow scrolling and prevent horizontal overflow */
  .page,
  [class*="page"],
  [class*="Page"] {
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
  }

  /* Dashboard and main sections */
  [class*="dashboard"],
  [class*="Dashboard"],
  .container,
  .main-container {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
  }

  /* Fix for fixed positioning that blocks scroll */
  .fixed {
    position: absolute !important;
  }

  /* Mobile modals should not prevent body scroll */
  .mobile-modal,
  .mobile-bottom-sheet {
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-height: 90vh;
    max-width: 100vw;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  /* Command palette and overlays */
  .command-palette,
  .overlay,
  [class*="Overlay"] {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
}

/* ====================================================================
   SCROLL CONTAINER FIXES
   ==================================================================== */

/* All scroll containers should have touch scrolling */
.scroll-container,
.overflow-auto,
.overflow-y-auto,
[style*="overflow-y: auto"],
[style*="overflow: auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Ensure long content can scroll */
.long-content,
.article,
article {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ====================================================================
   PREVENT SCROLL BLOCKING
   ==================================================================== */

/* Never block scroll on these elements, but prevent horizontal overflow */
html,
body,
#__next,
#root,
[data-scroll-lock-ignore] {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  position: relative !important;
  width: 100%;
  max-width: 100vw;
}

/* ====================================================================
   SAFE AREA INSETS (iOS NOTCH)
   ==================================================================== */

@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ====================================================================
   DEBUG MODE (Enable to test scrolling)
   ==================================================================== */

/* Uncomment to debug scroll issues */
/*
body::before {
  content: "Body scrolling: " attr(style);
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  color: white;
  padding: 8px;
  z-index: 99999;
  font-size: 12px;
}
*/