/* ===========================
   Mobile Responsiveness Fixes
   =========================== */

/* Global overflow prevention */
* {
  max-width: 100vw;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Container fixes to prevent horizontal scrolling */
.container {
  width: 100%;
  max-width: min(100%, 1200px);
  margin: 0 auto;
  padding-left: clamp(1rem, 5vw, 2rem);
  padding-right: clamp(1rem, 5vw, 2rem);
  overflow-x: hidden;
}

/* Fix touch targets - minimum 44x44px */
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
.clickable,
.card-interactive {
  min-height: 44px;
  min-width: 44px;
  position: relative;
}

/* Increase tap area for small buttons */
.btn-sm {
  min-height: 44px;
  padding: 0.75rem 1rem;
}

/* Form input spacing and sizing for mobile */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  min-height: 44px;
  padding: 0.75rem;
  font-size: 16px; /* Prevents zoom on iOS */
  width: 100%;
}

/* Form field spacing on mobile */
@media (max-width: 768px) {
  /* Add vertical spacing between form groups */
  .mb-4, .mb-lg {
    margin-bottom: 1.5rem;
  }
  
  /* Ensure form labels have proper spacing */
  label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
  }
  
  /* Stack form fields on mobile */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Increase spacing in property details section */
  .property-details-section > div {
    margin-bottom: 1.5rem;
  }
  
  /* Better spacing for checkbox groups */
  .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
  }
}

/* Navigation fixes for mobile */
.navbar,
nav {
  overflow-x: hidden;
  width: 100%;
}

.navbar .container,
nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Logo and title handling */
@media (max-width: 640px) {
  .logo-text,
  .navbar-title {
    font-size: 1.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }
  
  /* Hide less important nav items on small screens */
  .nav-secondary {
    display: none;
  }
}

/* Card and content width constraints */
.card,
.content-section,
.analysis-section {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  word-wrap: break-word;
}

/* Table responsiveness */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.table-responsive table {
  min-width: 100%;
  margin-bottom: 0;
}

/* Prevent wide content from breaking layout */
pre,
code,
.code-block {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Image responsiveness */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Modal and overlay fixes */
.modal,
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-content {
  width: calc(100% - 2rem);
  max-width: 600px;
  margin: 1rem auto;
}

/* Button group responsiveness */
@media (max-width: 640px) {
  .button-group,
  .btn-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
  
  .button-group .btn,
  .btn-group .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Analysis results responsiveness */
@media (max-width: 768px) {
  /* Stack metric cards vertically */
  .metrics-grid,
  .grid.grid-cols-3,
  .grid.grid-cols-4 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Make metric values more readable */
  .metric-value {
    font-size: 1.5rem;
  }
  
  .metric-label {
    font-size: 0.875rem;
  }
  
  /* Airbnb listings mobile layout */
  .airbnb-listings-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Investment verdict mobile styling */
  .investment-verdict {
    padding: 1.5rem;
  }
  
  .verdict-score {
    font-size: 2rem;
  }
}

/* Specific fixes for StarterPackApp components */
/* Fix property details section */
.property-details {
  overflow-x: hidden;
}

.property-details .grid {
  width: 100%;
}

/* Fix CTR banner on mobile */
@media (max-width: 640px) {
  .extension-cta-banner {
    padding: 1rem;
    text-align: center;
  }
  
  .extension-cta-banner .flex {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

/* Loading state fixes */
.loading-spinner {
  margin: 0 auto;
}

/* Error state mobile improvements */
@media (max-width: 640px) {
  #error-state .card {
    padding: 1.5rem;
  }
  
  .error-icon {
    width: 3rem;
    height: 3rem;
  }
  
  .error-message {
    font-size: 1rem;
  }
}

/* Tooltip positioning on mobile */
@media (max-width: 768px) {
  .tooltip {
    position: fixed;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: calc(100vw - 2rem);
  }
}

/* Ensure all sections respect mobile boundaries */
section,
.section,
#property-input-section,
#results-section,
#login-section,
#error-state {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Fix flex layouts that might cause overflow */
.flex {
  flex-wrap: wrap;
}

.flex.flex-nowrap {
  overflow-x: hidden;
}

/* Responsive padding adjustments */
@media (max-width: 640px) {
  .p-4 { padding: 1rem; }
  .p-6 { padding: 1.25rem; }
  .p-8 { padding: 1.5rem; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .px-6 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .py-6 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* Ensure content doesn't get too close to edges */
.content-wrapper {
  width: 100%;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Fix any absolute positioned elements */
@media (max-width: 768px) {
  .absolute {
    position: static;
  }
  
  /* Keep tooltips absolute but constrained */
  .tooltip {
    position: absolute !important;
  }
}