/* ============================================================================
   EXPLORER PAGE - Filter Layout & Controls
   ============================================================================
   Handles filter rows, map controls, and popover dropdowns for explorer page
*/

/* ──────────────────────────────────────────────────────
   EXPLORER - Filter Row Layout
   ────────────────────────────────────────────────────– */

/* Explorer Filter Row - horizontal scroll on mobile/medium */
.explorer-filter-row {
  width: 100%;
  margin: 0;
  padding: 4px 0;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
}

.explorer-filter-row::-webkit-scrollbar {
  display: none;
}

.explorer-filter-row > * {
  flex-shrink: 0 !important;
}

/* ──────────────────────────────────────────────────────
   EXPLORER - Map Controls Layout
   ────────────────────────────────────────────────────– */

/* Map controls row - horizontal scroll on mobile/medium */
.explorer-map-controls-row {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
}

.explorer-map-controls-row::-webkit-scrollbar {
  display: none;
}

.explorer-map-controls-row > * {
  flex-shrink: 0 !important;
}

/* ──────────────────────────────────────────────────────
   EXPLORER - Popover & Dropdown Styling
   ────────────────────────────────────────────────────– */

/* Filter Popover Dropdown - mobile-friendly sizing */
.filter-popover-dropdown {
  max-width: calc(100vw - 24px);
}

@media screen and (max-width: 768px) {
  .filter-popover-dropdown {
    width: calc(100vw - 24px) !important;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Hide Map Legend on Explorer mobile */
  #explorer-map-legend-container {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────
   EXPLORER - Map Info Card
   ────────────────────────────────────────────────────– */

/* Map info card styling */
.map-info-card {
  padding: 10px 12px;
  font-family: var(--font-family);
  background: var(--map-info-bg);
  box-shadow: var(--map-info-shadow);
  border-radius: var(--radius-lg);
  border: var(--map-info-border);
  pointer-events: none;
  z-index: 60 !important;
}

.map-info-card h4 {
  margin: 0 0 6px 0;
  color: #214097;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}

.map-info-card .info-row {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
}

.map-info-card .info-label {
  font-weight: 600;
  color: #666;
  margin-right: 4px;
}

.map-info-card .info-value {
  color: #333;
}

/* ──────────────────────────────────────────────────────
   EXPLORER - Title Row & Badge Styling
   ────────────────────────────────────────────────────– */

/* Title row - truncate long names */
.explorer-title-row {
  min-width: 0;
}

.explorer-title-row h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Responsive badge and reset button */
@media screen and (max-width: 768px) {
  .explorer-title-row .mantine-Badge-root {
    font-size: 10px;
    height: 20px;
    padding: 0 6px;
  }

  .explorer-title-row .mantine-Button-root {
    font-size: 11px;
    padding: 2px 6px;
  }
}