/* Hotfix Overrides - Loaded LAST to ensure new CSS wins */
/* These !important rules fix legacy CSS conflicts */

/* Make trays wide enough to read text */
.ce-tray, .explore-panel{
  width: 340px !important;
  max-width: calc(100vw - 24px) !important;
}

@media (max-width: 768px){
  .ce-tray, .explore-panel{ 
    width: 92vw !important; 
  }
}

/* Route tray gets extra width */
#routeTray {
  width: 400px !important;
  max-width: calc(100vw - 24px) !important;
}

@media (max-width: 768px){
  #routeTray { 
    width: 300px !important;
    max-width: 90vw !important;
  }
}

/* Ensure tray open/close states work */
.ce-tray {
  transform: translateY(-50%) translateX(-600px) !important; /* EXTRA HIDDEN by default */
}

.ce-tray--open {
  transform: translateY(-50%) translateX(0) !important; /* Visible when open */
}

@media (max-width: 768px) {
  .ce-tray {
    transform: translate(-50%, calc(100% + 50px)) !important; /* Completely hidden below screen */
  }
  
  .ce-tray--open {
    transform: translate(-50%, -80px) !important; /* Slide up when open */
  }
}

/* FAB Horizontal mode */
body.fab-horizontal .ce-tray {
  transform: translate(-50%, calc(100% + 50px)) !important;
}

body.fab-horizontal .ce-tray--open {
  transform: translate(-50%, -80px) !important;
}

/* FORCE the selects to be visible, full width, readable */
.ce-tray select,
.explore-panel select,
.ce-tray .select,
.setting-select,
select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  color: #111 !important;
  background: #fff !important;
  border: 2px solid #e9ecef !important;
  border-radius: 10px !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  appearance: auto !important; /* undo any custom hiding */
}

/* If a wrapper named .select was constraining width */
.ce-tray .select,
.explore-panel .select {
  width: 100% !important;
  display: block !important;
}

/* Make sure option text is visible */
select option { 
  color: #111 !important; 
}

/* Optional: one-session debug — outlines the area of each select */
html[data-debug-selects="1"] .ce-tray select { 
  outline: 1px dashed #9c27b0 !important; 
}

/* Map controls alignment fix */
@layer overrides;
.leaflet-control-container { pointer-events: none; }
.leaflet-control-container .leaflet-control { pointer-events: auto; }
.leaflet-right .leaflet-control { margin-right: 16px; }
.leaflet-top .leaflet-control { margin-top: 16px; }

/* --- Leaflet pane stacking (defensive reset) --- */
/* Ensure POI markers render ABOVE overlays and districts */
.leaflet-pane.leaflet-tile-pane    { z-index: 200 !important; }
.leaflet-pane.leaflet-overlay-pane { z-index: 400 !important; }
.leaflet-pane.leaflet-shadow-pane  { z-index: 500 !important; }
.leaflet-pane.leaflet-marker-pane  { z-index: 600 !important; }
.leaflet-pane.leaflet-tooltip-pane { z-index: 650 !important; }
.leaflet-pane.leaflet-popup-pane   { z-index: 700 !important; }

/* Our dedicated pane for POI pins - MUST be above overlays */
.leaflet-pane.pinPane {
  z-index: 620 !important;
  pointer-events: auto !important;
}

/* Prevent accidental click/visibility lockouts */
#map, 
.leaflet-container, 
.leaflet-pane {
  pointer-events: auto !important;
}

/* Ensure map container is interactive */
.leaflet-container .leaflet-marker-icon,
.leaflet-container .leaflet-marker-shadow {
  pointer-events: auto !important;
}