/**
 * Global Width Constraints
 * ========================
 *
 * Implements universal viewport width constraints (320px-2000px) across
 * all SwiftSpot pages without affecting existing CSS rules or responsive breakpoints.
 *
 * Loaded after Tailwind preflight (tailwind.css) and before component styles.
 * reset.css is list-spot only; base templates use Tailwind preflight instead.
 * to ensure proper cascade order while preserving existing responsive logic.
 */

/* ========================================
 * GLOBAL VIEWPORT CONSTRAINTS
 * ======================================== */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* EXCEPTION: Spot details dialog should escape any constraints */
#spot-detail-view {
  box-sizing: border-box;
}

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

/* Main content containers - apply constraints without !important to allow overrides */
.main-content,
.app-container,
.page-wrapper,
.content-wrapper,
.layout-container {
  min-width: 320px;
  max-width: 2000px;
  margin: 0 auto;
}

/* ========================================
 * 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: var(--discover-popover-max-width, 480px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

@media (max-width: 640px) {
  #unified-autocomplete {
    max-width: calc(100% - 2rem) !important;
    min-width: 0 !important;
  }
}

/* Datetime sizing: see datetime.css. Modal/overlay width: scope per component. */

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

/* Load order: tailwind.css -> variables.css -> global-constraints.css -> components */