/* ===========================================
   NEW MAP - FILTER PANEL
   ----------------------------------------------------------------
   Dropdown panel anchored to the funnel button (#nm-filter-btn).
   Two single-select sections:
     - Content type (small fixed list, no scroll)
     - Topic       (dynamic list; scrolls internally when long)
   Plus a "Clear all filters" footer that stays pinned and shows
   only when something is selected.

   Sizing rules (the only place numbers live):
     panel width   clamp(240px, 32vmin, 320px)
     panel max-h   min(80vh, clamp(360px, 70vmin, 600px))
     topic list    max-height: clamp(180px, 30vmin, 300px) + scroll

   All scoped under #new-map-section so the rules can't leak.
   =========================================== */

/* ========== Panel shell ========== */
#new-map-section .nm-filter-panel {
  position: absolute;
  top: 72px;     /* under the 44px funnel button (top: 20px) + small gap */
  right: 24px;
  z-index: 50;
  width: clamp(240px, 32vmin, 320px);
  max-height: min(80vh, clamp(360px, 70vmin, 600px));
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  font-family: 'Helvetica', 'Arial', sans-serif;
  color: #222;
  display: flex;
  flex-direction: column;
  overflow: hidden;       /* clip rounded corners + footer */
  box-sizing: border-box;
}
#new-map-section .nm-filter-panel[hidden] {
  display: none;
}

/* ========== Sections ========== */
#new-map-section .nm-filter-section {
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f0f0f0;
}
/* Last section (topic) takes remaining height so its inner scroll works */
#new-map-section .nm-filter-section:last-of-type {
  border-bottom: none;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#new-map-section .nm-filter-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 6px;
}

/* ========== Lists ========== */
#new-map-section .nm-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#new-map-section .nm-filter-list--scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: clamp(180px, 30vmin, 300px);
  overflow-y: auto;
  /* visual: keep scrollbar tucked at the right edge */
  margin-right: -6px;
  padding-right: 6px;
}
#new-map-section .nm-filter-list--scroll::-webkit-scrollbar {
  width: 6px;
}
#new-map-section .nm-filter-list--scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}
#new-map-section .nm-filter-list--scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ========== Items ========== */
#new-map-section .nm-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
  color: #333;
  transition: background 0.15s ease;
  user-select: none;
}
#new-map-section .nm-filter-item:hover  { background: #f5f5f5; }
#new-map-section .nm-filter-item:active { background: #ececec; }

#new-map-section .nm-filter-item--placeholder {
  color: #aaa;
  cursor: default;
  font-style: italic;
}
#new-map-section .nm-filter-item--placeholder:hover { background: transparent; }

/* Radio circle on the left */
#new-map-section .nm-filter-radio {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 50%;
  background: transparent;
  display: inline-block;
  position: relative;
  transition: border-color 0.15s ease;
}
#new-map-section .nm-filter-item:hover .nm-filter-radio {
  border-color: #888;
}
#new-map-section .nm-filter-item--selected .nm-filter-radio {
  border-color: #1e90ff;
}
#new-map-section .nm-filter-item--selected .nm-filter-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #1e90ff;
}

/* Color swatch for topic rows (matches marker shadow color) */
#new-map-section .nm-filter-swatch {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
}

#new-map-section .nm-filter-label {
  flex: 1 1 auto;
  line-height: 1.3;
}
#new-map-section .nm-filter-item--selected .nm-filter-label {
  font-weight: 600;
  color: #1e90ff;
}

/* ========== Footer ========== */
#new-map-section .nm-filter-clear {
  flex-shrink: 0;
  border: none;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: #c62828;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
}
#new-map-section .nm-filter-clear:hover { background: #fff5f5; }
#new-map-section .nm-filter-clear[hidden] { display: none; }

/* ========== Active-filter badge on the funnel button ==========
   Note: do NOT set position on .nm-filter-btn here. It's already
   position: absolute in new_map.css (top:20px; right:24px), which
   also provides the positioning context for the ::after dot below.
   Setting position:relative here would knock the button out of
   place into the flex flow of .nm-app-container.                 */
#new-map-section .nm-filter-btn.has-active::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e90ff;
  border: 1.5px solid #fff;
}

/* ========== Tiny screens: smaller funnel + panel anchor ========== */
@media (max-width: 500px) {
  #new-map-section .nm-filter-panel {
    top: 62px;
    right: 20px;
  }
}