/* =========================
   MAP + SIDEBAR
   ========================= */
#map {
  position: absolute; top: 0; left: 350px;
  width: calc(100% - 350px); height: 100vh;
  z-index: 50; background: var(--map-back);
}
.sidebar {
  position: absolute; top: 0; left: 0;
  width: 350px; height: 100%;
  background-color: var(--bg-soft); border-right: 1px solid var(--border);
  z-index: 100; display: flex; flex-direction: column;
  overflow: hidden; padding: 30px 5px 0;
}
.sidebar h2 { font-size: 1.2em; margin: 20px; color: var(--text); }
.sidebar-content {
  flex-grow: 1; overflow-y: auto; margin: 0; padding: 10px; box-sizing: border-box;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sidebar-content::-webkit-scrollbar { display: none; }
.sidebar-content .sidebar-entry {
  margin-bottom: 15px; padding: 10px;
  background-color: var(--card); border: 1px solid var(--border);
  border-radius: 5px; box-shadow: 0 2px 4px var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sidebar-content .sidebar-entry:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.sidebar-content .sidebar-entry h3 { font-size: 1.2em; margin: 0 0 5px 0; }
.sidebar-content .sidebar-entry p { margin: 0; line-height: 1.4; font-size: .9em; color: var(--muted); }
.sidebar-entry.active {
  background-color: color-mix(in srgb, var(--brand) 18%, transparent);
  border-left: 4px solid var(--slider-active);
}
@media (max-width: 768px) {
  .sidebar { position: relative; width: 100%; height: auto; border-right: none; box-shadow: none; }
  #map { position: relative; top: 0; left: 0; width: 100%; height: 100vh; z-index: 50; }
}

/* =========================
   MAPBOX POPUPS & CONTROLS
   ========================= */
.custom-marker { box-shadow: 0 2px 5px rgba(0,0,0,.3); }
.custom-marker:hover { transform: scale(1.1); }
.mapboxgl-popup-content img { width: 100%; height: auto; border-radius: 5px; margin-bottom: 10px; }
.mapboxgl-popup-content h3 { font-size: 16px; margin: 5px 0; }
.mapboxgl-popup-content {
  font-family: 'Source Sans Pro', sans-serif; font-size: 14px;
  color: var(--popup-text); background: var(--card); border: 1px solid var(--border);
  line-height: 1.5; padding: 10px;
}
.mapboxgl-popup-close-button { font-size: 18px; width: 30px; height: 30px; line-height: 30px; color: var(--text); cursor: pointer; }
.mapboxgl-popup-close-button:hover { background-color: var(--bg-soft); color: var(--text); }
.mapboxgl-ctrl-attrib { font-family: 'Montserrat', sans-serif; font-size: 12px; color: var(--muted); }

/* === MAP PAGE (no sidebar) === */
body.no-sidebar .sidebar { display: none !important; }
#map:not(.default-split) {
  position: fixed;
  top: var(--nav-h, 60px); left: 0; width: 100%;
  height: calc(100vh  - var(--nav-h, 60px));
  height: calc(100dvh - var(--nav-h, 60px));
  height: calc(100svh - var(--nav-h, 60px));
  z-index: 10;
}
body.no-sidebar #map {
  position: fixed !important; top: var(--nav-h) !important;
  left: 0 !important; width: 100% !important;
  height: calc(100svh - var(--nav-h)) !important; z-index: 10;
}

/* Toolbar */
.map-toolbar {
  position: fixed; top: calc(var(--nav-h) + 8px); left: 50%;
  transform: translateX(-50%); z-index: 30;
  display: flex; gap: 8px; align-items: center;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(8px); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
@media (max-width: 700px) { .map-toolbar { left: 12px; transform: none; } }

.toolbar-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-weight: 700; cursor: pointer;
}
.toolbar-btn[hidden] { display: none; }
.toolbar-btn[aria-expanded="true"] { outline: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); }

/* Panel backdrop */
.panel-backdrop { position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(0,0,0,.28); z-index: 20; }

/* Float panels */
.float-panel {
  position: fixed; top: calc(var(--nav-h) + 56px); left: 50%;
  transform: translateX(-50%);
  width: clamp(320px, 92vw, 760px);
  max-height: calc(100svh - var(--nav-h) - 80px);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22); z-index: 40; display: flex; flex-direction: column;
}
.float-panel[hidden] { display: none; }
.float-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.float-panel__header h3 { margin: 0; font-size: 1.1rem; }
.panel-close {
  background: transparent; border: 0; font-size: 22px; cursor: pointer;
  color: var(--text); width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 6px;
}
.panel-close:hover { background: var(--bg-soft); }
.float-panel__body { padding: 12px; overflow: auto; }
#filtersPanel { width: clamp(320px, 92vw, 520px); }
#artworksPanel.float-panel--wide { width: clamp(360px, 96vw, 1100px); }
@media (max-width: 480px) {
  .float-panel {
    top: calc(var(--nav-h) + 48px);
    width: calc(100vw - 16px); left: 8px; transform: none;
    max-height: calc(100svh - var(--nav-h) - 64px);
  }
}

/* Suggestions z-index inside panels */
#artistSuggestions, #themeSuggestions { position: relative; z-index: 2; }

/* === ARTWORKS PANEL — grid + card === */
#artworksPanel .sidebar-content {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}
#artworksPanel .artwork-card {
  overflow: visible; container-type: inline-size;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 4px 10px var(--shadow);
}
#artworksPanel .artwork-card .artwork-media,
#artworksPanel .artwork-card > div:first-child {
  position: relative; aspect-ratio: var(--tile-ratio);
  border-radius: 12px 12px 0 0; overflow: hidden;
}
#artworksPanel .artwork-card .artwork-media img,
#artworksPanel .artwork-card > div:first-child img {
  position: absolute; inset: 0; width: 100%; height: 100% !important;
  object-fit: cover; border-radius: 0; display: block;
}
#artworksPanel .artwork-card-content { padding: 8px 10px 0; }
@supports (-webkit-hyphens:none) {
  #artworksPanel .artwork-card .artwork-media,
  #artworksPanel .artwork-card > div:first-child { -webkit-mask-image: -webkit-radial-gradient(white, black); }
}

/* =========================
   FILTERS / INPUTS / SLIDER (map sidebar)
   ========================= */
#filters { padding: 5px 20px 20px; background-color: var(--card); border-radius: 8px; }
#filters h3 {
  font-size: 1.3em; margin: 20px 0; color: var(--text);
  border-top: 2px solid var(--border); padding: 10px 0 2px; width: 100%; box-sizing: border-box;
}
#filters label { display: flex; align-items: center; margin-bottom: 12px; font-size: 1em; color: var(--muted); }
#filters input[type="checkbox"] { margin-right: 10px; transform: scale(1.2); cursor: pointer; }
#yearRangeDisplay { font-weight: bold; margin-bottom: 20px; text-align: center; font-size: 1.1em; }
#artistSearch, #themeSearch {
  width: 100%; padding: 12px; margin: 0 0 10px 0;
  background: var(--input-bg); color: var(--input-text);
  border: 1px solid var(--input-border); border-radius: 6px;
  font-size: 1em; transition: border-color .3s;
}
#artistSearch:focus, #themeSearch:focus { border-color: var(--brand); outline: none; }
#artistSuggestions, #themeSuggestions {
  position: absolute; left: 0; width: 100%; z-index: 999;
  background: var(--card); border-radius: 6px;
  box-shadow: 0 2px 6px var(--shadow); max-height: 200px; overflow-y: auto; list-style: none;
}
#artistSuggestions li, #themeSuggestions li { padding: 10px 12px; cursor: pointer; font-size: 1em; }
#artistSuggestions li:hover, #themeSuggestions li:hover { background: var(--bg-soft); }

/* noUi slider (map) */
#filters #yearSlider.noUi-target {
  background: var(--slider-track); border: 1px solid var(--slider-border);
  border-radius: 8px; box-shadow: inset 0 2px 4px var(--shadow); height: 12px; margin-bottom: 25px;
}
#filters #yearSlider .noUi-connect { background: var(--slider-active); border-radius: 8px; }
#filters #yearSlider .noUi-handle {
  width: 20px; height: 20px; right: -10px; top: -6px;
  background: var(--slider-handle); border: 2px solid var(--slider-handle-border); border-radius: 50%; box-shadow: none;
}
#filters #yearSlider .noUi-handle:before,
#filters #yearSlider .noUi-handle:after { content: none; }
#filters #yearSlider .noUi-handle:hover { transform: scale(1.2); border-color: var(--brand); }
#filters #yearSlider .noUi-handle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }