/**
 * Global Width Constraints
 * ========================
 * 
 * Implements universal viewport width constraints (320px-2000px) across
 * all SwiftSpot pages without affecting existing CSS rules or responsive breakpoints.
 * 
 * This file should be loaded after reset.css but before component styles
 * to ensure proper cascade order while preserving existing responsive logic.
 */

/* ========================================
 * GLOBAL VIEWPORT CONSTRAINTS
 * ======================================== */

/* Global viewport constraints - applies to all pages */
html {
  min-width: 320px !important;
  max-width: 2000px !important;
  margin: 0 auto !important;
  overflow-x: hidden !important; /* CRITICAL: Prevent horizontal scroll globally */
  box-sizing: border-box !important;
}

/* EXCEPTION: Spot details dialog should escape global constraints */
dialog#spot-detail-view,
dialog#spot-detail-view * {
  margin: 0 !important; /* Override global margin centering */
  max-width: none !important; /* Remove global max-width constraint */
  min-width: 0 !important; /* Remove global min-width constraint */
  box-sizing: border-box !important; /* Ensure proper box model */
}

/* CRITICAL: Ensure dialog positioning is not affected by global constraints */
body.discover-page dialog#spot-detail-view {
  position: fixed !important; /* Override any global positioning */
  transform: none !important; /* Remove any global transforms */
}

body {
  min-width: 320px !important;
  max-width: 2000px !important;
  margin: 0 auto !important;
  position: relative !important;
}

/* ========================================
 * CONTAINER-LEVEL CONSTRAINTS
 * ======================================== */

/* Main content containers - ensure all major layout containers respect constraints */
.main-content,
.app-container,
.page-wrapper,
.content-wrapper,
.layout-container {
  min-width: 320px !important;
  max-width: 2000px !important;
  margin: 0 auto !important;
}

/* Hide copyright footer globally */
footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* SPECIAL CASE: Discover page needs full viewport behavior */
html:has(body.discover-page),
body.discover-page {
  min-width: 320px !important;
  max-width: 100vw !important; /* Prevent content from exceeding viewport */
  margin: 0 !important; /* No centering margins */
  width: 100vw !important; /* Force full viewport width */
  overflow-x: hidden !important; /* Prevent horizontal scrollbar */
  overflow-y: hidden !important; /* Prevent vertical scrollbar on main page */
  box-sizing: border-box !important; /* Ensure proper width calculations */
}

/* CRITICAL: Root-level overflow protection for mobile touch devices */
@media (max-width: 1023px) {
  html,
  body {
    overflow-x: hidden !important; /* Prevent horizontal scroll on mobile */
    max-width: 100vw !important; /* Prevent any element from exceeding viewport */
    width: 100% !important; /* Use percentage instead of vw to avoid scrollbar issues */
    box-sizing: border-box !important;
  }
  
  /* Ensure discover page main containers respect viewport bounds */
  body.discover-page main,
  body.discover-page .h-screen,
  body.discover-page .flex.flex-col {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* CRITICAL: Root-level overflow protection for mobile touch devices */
@media (max-width: 1023px) {
  html,
  body {
    overflow-x: hidden !important; /* Prevent horizontal scroll on mobile */
    max-width: 100vw !important; /* Prevent any element from exceeding viewport */
    width: 100% !important; /* Use percentage instead of vw to avoid scrollbar issues */
    box-sizing: border-box !important;
  }
  
  /* Ensure discover page main containers respect viewport bounds */
  body.discover-page main,
  body.discover-page .h-screen,
  body.discover-page .flex.flex-col {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* ========================================
 * EDGE CASE HANDLING
 * ======================================== */

/* Ultra-wide screen behavior (>2000px) */
@media (min-width: 2001px) {
  html, body {
    background: var(--color-gray-50, #f9fafb) !important; /* Subtle background for margins */
  }
  
  /* Ensure fixed/absolute positioned elements respect constraints */
  .fixed, 
  .absolute,
  [style*="position: fixed"],
  [style*="position: absolute"] {
    max-width: 2000px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  /* Special handling for dropdowns and modals */
  #unified-autocomplete,
  .dropdown-menu,
  .modal-container,
  .popup-container {
    max-width: 2000px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* Ultra-narrow screen fallback (<320px) */
@media (max-width: 319px) {
  html, body {
    min-width: 320px !important;
    overflow-x: auto !important;
  }
  
  /* Ensure content doesn't break on extremely narrow screens */
  .main-content,
  .app-container,
  .page-wrapper,
  .discover-page {
    min-width: 320px !important;
    overflow-x: auto !important;
  }
}

/* ========================================
 * RESPONSIVE BREAKPOINT PRESERVATION
 * ======================================== */

/* Ensure existing responsive breakpoints continue to function normally */
/* These rules preserve the existing responsive behavior while applying constraints */

@media (min-width: 320px) {
  /* Preserve existing 320px+ responsive logic */
  html, body {
    min-width: 320px !important;
  }
}

@media (min-width: 375px) {
  /* Preserve existing 375px+ responsive logic */
  html, body {
    min-width: 320px !important; /* Still respect global minimum */
  }
}

@media (min-width: 640px) {
  /* Preserve existing 640px+ responsive logic */
  html, body {
    min-width: 320px !important;
    max-width: 2000px !important;
  }
}

@media (min-width: 768px) {
  /* Preserve existing 768px+ responsive logic */
  html, body {
    min-width: 320px !important;
    max-width: 2000px !important;
  }
}

@media (min-width: 1024px) {
  /* Preserve existing 1024px+ responsive logic */
  html, body {
    min-width: 320px !important;
    max-width: 2000px !important;
  }
}

@media (min-width: 1280px) {
  /* Preserve existing 1280px+ responsive logic */
  html, body {
    min-width: 320px !important;
    max-width: 2000px !important;
  }
}

@media (min-width: 1536px) {
  /* Preserve existing 1536px+ responsive logic */
  html, body {
    min-width: 320px !important;
    max-width: 2000px !important;
  }
}

/* ========================================
 * SPECIAL COMPONENT HANDLING
 * ======================================== */

/* Ensure discover page components respect global constraints */
.discover-top-bar,
.search-container,
.datetime-container,
.listings-container,
#listings-sheet {
  max-width: inherit !important; /* Inherit from parent constraints */
}

/* ========================================
 * DROPDOWN CONTAINER CONSTRAINTS
 * ======================================== */

/* Location dropdown - prevent excessive width on ultra-wide screens */
#unified-autocomplete {
  max-width: 500px !important; /* Reasonable maximum width for location dropdown */
  min-width: 300px !important; /* Maintain minimum usability */
  overflow-y: visible !important; /* Prevent unwanted vertical scrollbar */
  overflow-x: hidden !important; /* Hide horizontal overflow only */
  max-height: none !important; /* Remove height constraints that cause scrollbar */
}

/* Responsive dropdown constraints */
@media (max-width: 640px) {
  #unified-autocomplete {
    max-width: calc(100vw - 2rem) !important; /* Mobile: narrower dropdown with more margins */
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  #unified-autocomplete {
    max-width: 450px !important; /* Tablet: moderate width */
  }
}

@media (min-width: 1025px) {
  #unified-autocomplete {
    max-width: 500px !important; /* Desktop: maximum reasonable width */
  }
}

/* Datetime picker dropdown constraints - DEPRECATED: Now handled by responsive rules in datetime.css */
/* Removed conflicting max-width constraint - responsive sizing now handled in datetime.css */

/* General dropdown and modal constraints */
.modal,
.overlay,
.popup,
.dropdown,
.dropdown-menu {
  max-width: 600px !important; /* Reasonable maximum for most dropdowns */
}

/* Hamburger menu dropdown */
#discover-menu {
  max-width: 18rem !important; /* Increased to prevent horizontal scrollbar */
}

/* ========================================
 * COMPATIBILITY NOTES
 * ======================================== */

/*
 * This file is designed to work alongside existing CSS without conflicts:
 * 
 * 1. Uses !important only for global constraints, not component styling
 * 2. Preserves all existing responsive breakpoints
 * 3. Maintains existing component-specific width rules
 * 4. Provides fallbacks for edge cases
 * 5. Centers content on ultra-wide screens (>2000px)
 * 6. Ensures minimum usability on narrow screens (<320px)
 * 
 * Integration order: reset.css → global-constraints.css → component styles
 */