/*
 * Additional CSS to ensure proper mobile viewport rendering
 * This works in conjunction with 000_force_desktop_viewport.js
 */

/* Prevent horizontal overflow on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure the app container doesn't exceed viewport width */
#react-entry-point,
#_dash-app-content,
.container,
.container-fluid {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Fix for AG-Grid and other wide components */
.ag-root-wrapper,
.ag-root,
.dash-table-container {
  max-width: 100%;
  overflow-x: auto;
}

/* Ensure modals work correctly on mobile */
.modal {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Force hardware acceleration for smoother scaling */
body {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Disable iOS elastic scrolling that can interfere with viewport */
body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
}

/* Ensure proper scaling on iOS devices */
@supports (-webkit-touch-callout: none) {
  /* iOS-specific fixes */
  body {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  #react-entry-point {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}