/**
 * Global Mobile Scrolling Fixes
 * This CSS file addresses scrolling issues across all mobile browsers
 */

/* Enable proper scrolling on all devices */
html, body {
  height: 100% !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: none; /* Prevent pull-to-refresh */
}

/* Core app containers */
#root, 
.app-container, 
.dashboard-container, 
.main-content, 
.content-area,
.user-dashboard, 
main, 
.scrollable-element, 
.overflow-auto, 
.overflow-y-auto {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain; /* Prevent pull-to-refresh within containers */
}

/* Horizontal scrolling containers */
.overflow-x-auto,
.table-container,
table.overflow-x-auto,
.chart-container,
.horizontal-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}

/* Dashboard specific fixes */
.dashboard-container .content {
  height: auto !important;
  min-height: calc(100vh - 80px) !important; /* Account for header height */
  overflow-y: auto !important;
}

/* Tables should be horizontally scrollable */
.table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
}

/* Fix for fixed headers */
.fixed-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Fix for navbar */
.navbar, 
.header,
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS devices */
  body {
    /* Prevent elastic overflow on iOS */
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  #root {
    /* Root takes full height and enables scrolling */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto !important;
  }
}

/* Android specific fixes */
@supports not (-webkit-touch-callout: none) {
  /* Non-iOS devices (Android) */
  body {
    overflow-y: auto !important;
  }
}

/* Class to explicitly mark elements as scrollable */
.scrollable-element {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Mobile scrolling optimizations */
html, body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/* Prevent zoom on input focus on iOS */
input, textarea, select {
  font-size: 16px !important;
}

/* Smooth scrolling for mobile */
* {
  -webkit-overflow-scrolling: touch;
}

/* Fix for mobile viewport issues */
@media only screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  
  /* Prevent horizontal scroll */
  .container {
    max-width: 100%;
    overflow-x: hidden;
  }
}