/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Reset and ensure proper mobile scrolling */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  position: relative;
  margin: 0;
  padding: 0;
}

/* Force scrollable content */
main {
  position: relative;
  overflow: visible;
  min-height: calc(100vh - 64px); /* Account for nav height */
  padding-bottom: 2rem;
}

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

/* Ensure all containers allow overflow */
.container, [class*="max-w-"] {
  overflow: visible;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
  }
  
  /* Ensure touch targets are accessible */
  button, a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
  }
  
  /* Fix any potential positioning issues */
  .fixed {
    position: fixed;
  }
  
  /* Ensure grid layouts don't break scrolling */
  .grid {
    overflow: visible;
  }
}