/* ======================================
   Critical Mobile Overlap Fixes 
   Resolves z-index and positioning issues
   ====================================== */

/* Reset problematic z-index stacking contexts */
* {
  position: relative;
  z-index: auto;
}

/* Fix navigation overlap issues */
nav, 
.navbar,
header {
  position: relative !important;
  z-index: 1000 !important;
  width: 100% !important;
  overflow: visible !important;
}

/* Fix main content positioning */
main,
#main-content {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Fix overlapping containers */
.container {
  position: relative !important;
  z-index: auto !important;
  overflow: visible !important;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  /* Reset all absolute positioning that causes overlaps */
  body > * {
    position: relative !important;
  }
  
  /* Fix navigation structure */
  nav {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 60px;
  }
  
  /* Ensure proper content flow */
  main {
    display: block !important;
    margin-top: 0 !important;
    width: 100% !important;
  }
  
  /* Fix form sections */
  #login-section,
  #property-input-section,
  #results-section {
    position: relative !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem !important;
  }
  
  /* Fix hidden elements showing incorrectly */
  .hidden {
    display: none !important;
  }
  
  /* Fix card overlaps */
  .card,
  .bg-white.shadow-lg {
    position: relative !important;
    z-index: auto !important;
    margin-bottom: 1rem !important;
  }
  
  /* Fix input group overlaps */
  .input-group,
  .form-group {
    position: relative !important;
    z-index: auto !important;
    margin-bottom: 1rem !important;
  }
  
  /* Fix absolute positioned icons/elements */
  .absolute {
    position: relative !important;
    display: inline-block !important;
    margin: 0 0.25rem !important;
  }
  
  /* Fix tooltip overlaps - keep them absolute but controlled */
  .tooltip,
  [role="tooltip"] {
    position: absolute !important;
    z-index: 9999 !important;
  }
  
  /* Fix mobile menu */
  #mobile-menu-toggle {
    position: relative !important;
    z-index: 1001 !important;
  }
  
  /* Mobile menu container when open */
  .mobile-menu-open {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    z-index: 999 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
  }
}

/* Tablet-specific fixes */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Similar fixes for tablet but less aggressive */
  nav {
    position: relative !important;
    z-index: 1000 !important;
  }
  
  main {
    position: relative !important;
    z-index: 1 !important;
  }
  
  .container {
    max-width: 100% !important;
    padding: 0 1.5rem !important;
  }
}

/* Fix specific problem areas identified in test */
@media (max-width: 1024px) {
  /* Fix HTML/BODY/NAV/DIV overlap chain */
  html {
    overflow-x: hidden !important;
    position: relative !important;
  }
  
  body {
    overflow-x: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body > nav {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  nav > div {
    position: relative !important;
    margin: 0 !important;
  }
  
  /* Ensure sequential layout flow */
  body > * {
    clear: both;
    float: none !important;
  }
}

/* Portrait-specific fixes */
@media (max-width: 768px) and (orientation: portrait) {
  /* Extra spacing for touch targets */
  button, 
  .btn,
  a {
    margin: 0.25rem 0 !important;
  }
  
  /* Fix form layouts */
  form {
    width: 100% !important;
  }
  
  .grid {
    display: block !important;
  }
  
  .grid > * {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }
}

/* Debug helper - uncomment to see overlap issues */
/*
@media (max-width: 768px) {
  * {
    outline: 1px solid red !important;
  }
  
  nav { background: rgba(255,0,0,0.1) !important; }
  main { background: rgba(0,255,0,0.1) !important; }
  .container { background: rgba(0,0,255,0.1) !important; }
}
*/