/* MLS LISTINGS VIEW STYLES - REFACTORED */

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

/* 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,
[data-controller="loan-form"],
body:has([data-controller="loan-form"]) {
  height: auto !important;
  min-height: 100vh;
  overflow: visible !important;
}

/* Ensure parent containers allow scrolling when loan form is present */
body:has([data-controller="loan-form"]) .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;
}

/* =====================================================
   MAP VIEW FILTER STYLING
   ===================================================== */
/* The per-view panel layouts (.list-view / .split-view / .map-view) lived
   here for the retired /listings page; /properties keys its panels on the
   unified-map targets in properties.css instead. */

/* 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;
}

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

/* 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 */

/* 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;
}

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

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