/* MLS LISTINGS VIEW STYLES - REFACTORED */

/* =====================================================
   BASE STRUCTURE
   ===================================================== */

/* Main container takes full viewport minus navbar */
.bg-gray-100.min-h-screen {
  height: 100vh;
  overflow: hidden;
}

/* Override for property transaction steps - allow scrolling */
body[data-controller*="property-transaction-steps"] .bg-gray-100.min-h-screen,
body[data-controller*="step-form"] .bg-gray-100.min-h-screen,
.property-transaction-steps .bg-gray-100.min-h-screen {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}


/* Override for MLS show page - allow normal scrolling */
.mls-show-page.bg-gray-100.min-h-screen {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

/* Content area positioning */
[data-unified-map-optimized-target="contentArea"] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* =====================================================
   MAP CONTAINER - Persistent across views
   ===================================================== */

/* Map container - always present but visibility controlled */
[data-unified-map-optimized-target="mapContainer"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#map-canvas {
  width: 100%;
  height: 100%;
}

/* Override any inline visibility styles added by JavaScript */
.view-list #map-canvas,
.view-list [data-unified-map-optimized-target="mapContainer"] {
  display: none !important;
  visibility: hidden !important;
}

.view-split #map-canvas,
.view-split [data-unified-map-optimized-target="mapContainer"] {
  display: block !important;
  visibility: visible !important;
}

.view-map #map-canvas,
.view-map [data-unified-map-optimized-target="mapContainer"] {
  display: block !important;
  visibility: visible !important;
}

/* =====================================================
   VIEW-SPECIFIC LAYOUTS
   ===================================================== */

/* LIST/GRID VIEW
   - Navbar (outside)
   - Filters header
   - Grid/list content
   - Map hidden
*/
/* Map hidden in list view - handled by visibility rules above */

.view-list .view-split-hidden {
  position: relative;
  z-index: 10;
  background: white;
  display: block !important;
}

.view-list [data-listing-filters-target="viewsContainer"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  background: #f3f4f6;
  padding-top: 180px; /* Space for header */
}

.view-list .list-view {
  display: block !important;
}

.view-list .split-view,
.view-list .map-view {
  display: none !important;
}

/* SPLIT VIEW
   - Navbar (outside)
   - Two columns: filters/list | map
   - Filters inside left column
*/
/* Map visible in split view - handled by visibility rules above */

.view-split .view-split-hidden {
  display: none !important;
}

.view-split [data-listing-filters-target="viewsContainer"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.view-split .split-view {
  display: flex !important;
  height: 100%;
}

.view-split .list-view,
.view-split .map-view {
  display: none !important;
}

/* Split view columns */
.view-split .split-view > div:first-child {
  width: 50%;
  overflow-y: auto;
  background: white;
  border-right: 1px solid #e5e7eb;
  padding-top: 0;
}

.view-split .split-view > div:last-child {
  width: 50%;
  position: relative;
}

/* MAP VIEW
   - Navbar (outside)
   - Full map
   - Filters as header (full width)
*/
/* Map visible in map view - handled by visibility rules above */

/* CLEAN: Fully transparent background for map view - no blur */
.view-map .view-split-hidden {
  background: transparent !important;
  background-color: transparent !important;
  z-index: 100 !important;
  position: relative !important;
}

/* JavaScript-applied transparency class */
.map-view-transparent {
  background: transparent !important;
  background-color: transparent !important;
}

/* Make ONLY the actual button elements white in map view - not their containers */
.view-map button:not(.bg-blue-500):not(.bg-red-500):not(.bg-green-500),
.view-map select,
.view-map form[data-listing-filters-target="form"] button,
.view-map form[data-listing-filters-target="form"] select,
.view-map select[name="property_type"] {
  background: white !important;
  background-color: white !important;
}

/* Make dropdown containers solid white (not glass) - remove any transparency */
.view-map [data-listing-filters-target*="Dropdown"] {
  background: white !important;
  background-color: white !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Ensure ALL dropdown elements have white backgrounds in map view */
.view-map [data-listing-filters-target*="Dropdown"] > div,
.view-map [data-listing-filters-target*="Dropdown"] .bg-gray-50,
.view-map [data-listing-filters-target*="Dropdown"] .bg-transparent {
  background: white !important;
  background-color: white !important;
}

/* Remove any glass effects from dropdown elements */
.view-map [data-listing-filters-target*="Dropdown"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* PRESERVE colored buttons in dropdowns - override white for colored states */
.view-map .bg-blue-500,
.view-map button.bg-blue-500,
.view-map .bg-blue-500.text-white,
.view-map button.bg-blue-500.text-white {
  background: #3b82f6 !important;
  background-color: #3b82f6 !important;
}

.view-map .bg-red-500,
.view-map button.bg-red-500,
.view-map .bg-red-500.text-white,
.view-map button.bg-red-500.text-white {
  background: #ef4444 !important;
  background-color: #ef4444 !important;
}

/* Also preserve other colored states */
.view-map .bg-green-500,
.view-map button.bg-green-500 {
  background: #22c55e !important;
  background-color: #22c55e !important;
}

/* Ensure dropdown buttons with Tailwind classes keep their colors */
.view-map [data-listing-filters-target*="Dropdown"] .bg-blue-500,
.view-map [data-listing-filters-target*="Dropdown"] button.bg-blue-500 {
  background: #3b82f6 !important;
  background-color: #3b82f6 !important;
}

.view-map [data-listing-filters-target*="Dropdown"] .bg-red-500,
.view-map [data-listing-filters-target*="Dropdown"] button.bg-red-500 {
  background: #ef4444 !important;
  background-color: #ef4444 !important;
}

/* Clean container styling without bg-white conflicts */

.view-map [data-listing-filters-target="viewsContainer"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  background: none !important;
}

.view-map .map-view {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
}

.view-map .map-view.hidden {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.view-map .list-view,
.view-map .split-view {
  display: none !important;
}

/* =====================================================
   FILTER VISIBILITY OVERRIDES
   ===================================================== */

/* Ensure filters show in map view but hide ALL dropdowns */
.view-map .view-split-hidden .hidden.md\:block {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* CRITICAL: Force desktop layout filters in map view */
.view-map .hidden.md\:block {
  display: block !important;
  visibility: visible !important;
}

/* Hide mobile filters in map view */
.view-map .md\:hidden {
  display: none !important;
}

/* CRITICAL: Respect hidden class for dropdowns in map view */
.view-map [data-listing-filters-target*="Dropdown"].hidden {
  display: none !important;
  visibility: hidden !important;
}

/* Allow dropdowns to show when not hidden - solid white background with absolute positioning */
.view-map [data-listing-filters-target*="Dropdown"]:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  background: white !important;
  background-color: white !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure Property Type dropdown specifically shows when not hidden */
[data-listing-filters-target="propertyTypeDropdown"]:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  background: white !important;
  border: 1px solid rgba(229, 231, 235, 0.8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  z-index: 1000 !important;
}

/* Force white background on all dropdown child elements */
.view-map [data-listing-filters-target*="Dropdown"]:not(.hidden) *:not(button):not(.bg-blue-500):not(.bg-red-500):not(.bg-green-500) {
  background: white !important;
  background-color: white !important;
}

/* ONLY force desktop filters to show - no other styling changes */
.view-map .hidden.md\:block {
  display: block !important;
}

/* Force desktop filters section background to be transparent - ONLY background change */
.view-map .hidden.md\:block.border-b.border-gray-200.py-4,
.view-map .hidden.md\:block.bg-white.border-b.border-gray-200.py-4 {
  background: transparent !important;
  border-bottom: none !important;
}

/* NO CUSTOM BUTTON STYLING - buttons should look identical to grid view */

/* No form styling changes - let original CSS handle layout */

/* Ensure map canvas is visible and takes full height */
.view-map #map-canvas {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* Clean up: removed redundant bg-white overrides since bg-white class was removed from HTML */

/* Removed - no longer needed */

/* Style the desktop filters section in map view */
/* Clean up - no layout changes, only transparency for child elements - EXCLUDE dropdowns */
.view-map .view-split-hidden > div:not([data-listing-filters-target*="Dropdown"]),
.view-map .view-split-hidden .bg-white:not([data-listing-filters-target*="Dropdown"]),
.view-map .view-split-hidden div:not([data-listing-filters-target*="Dropdown"]) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Make sure ALL nested containers are transparent - EXCLUDE dropdowns */
.view-map .hidden.md\\:block:not([data-listing-filters-target*="Dropdown"]),
.view-map .hidden.md\\:block.bg-white:not([data-listing-filters-target*="Dropdown"]),
.view-map .hidden.md\\:block div:not([data-listing-filters-target*="Dropdown"]) {
  background: transparent !important;
  background-color: transparent !important;
}

/* =====================================================
   PROPERTY TYPE DROPDOWN STYLING
   ===================================================== */

/* When property type button is selected (blue), make icon white */
[data-listing-filters-target*="propertyTypeDropdown"] button.bg-blue-500 i,
[data-listing-filters-target*="propertyTypeDropdown"] button.bg-blue-500.text-white i {
  color: white !important;
}

/* =====================================================
   DROPDOWN Z-INDEX MANAGEMENT
   ===================================================== */

/* Ensure dropdowns appear above other elements with absolute positioning */
[data-listing-filters-target*="Dropdown"] {
  z-index: 50;
  position: absolute !important;
}

/* Higher z-index in map view for floating filters - ensure they're above map */
.view-map [data-listing-filters-target*="Dropdown"] {
  z-index: 1000 !important;
  position: relative !important;
}

/* Ensure dropdowns work properly with hidden class in map view */
.view-map [data-listing-filters-target*="Dropdown"].hidden {
  display: none !important;
}

.view-map [data-listing-filters-target*="Dropdown"]:not(.hidden) {
  display: block !important;
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */

/* Mobile adjustments for split view */
@media (max-width: 768px) {
  .view-split .split-view {
    flex-direction: column !important;
  }
  
  .view-split .split-view > div {
    width: 100% !important;
    height: 50% !important;
  }
  
  /* Full width filters on mobile */
  .view-map .view-split-hidden {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* =====================================================
   VIRTUAL SCROLL SUPPORT
   ===================================================== */

.virtual-scroll-viewport {
  height: 100%;
  overflow-y: auto;
  position: relative;
}

.virtual-scroll-spacer {
  pointer-events: none;
}

.virtual-scroll-container {
  position: relative;
}

.virtual-item {
  position: absolute;
  left: 0;
  right: 0;
}

/* =====================================================
   TRANSITIONS
   ===================================================== */

/* Smooth transitions between views */
.view-content {
  transition: opacity 0.3s ease;
}

[data-unified-map-optimized-target="mapContainer"] {
  transition: visibility 0.3s ease;
}