/* norway.menno.sh — camping spot map
   Theme: beige light (default) / Dracula dark (toggle) */

:root {
  --fg: #2b2418;
  --bg: #f5ecd7;
  --muted: #8a755a;
  --link: #1d4f8a;
  --rule: #d9c9a8;
  --code-bg: #ebdfc1;
  --panel-bg: #ede3ca;
  --accent-green: #2d8a4e;
  --accent-orange: #b8651a;
  --accent-purple: #6a3d9a;
  --accent-pink: #b44c7a;
  --accent-red: #c93535;
  --accent-yellow: #8a7a1a;
  --star: #b8961a;
}

:root[data-theme="dark"] {
  --fg: #f8f8f2;
  --bg: #282a36;
  --muted: #6272a4;
  --link: #8be9fd;
  --rule: #44475a;
  --code-bg: #21222c;
  --panel-bg: #1e1f29;
  --accent-green: #50fa7b;
  --accent-orange: #ffb86c;
  --accent-purple: #bd93f9;
  --accent-pink: #ff79c6;
  --accent-red: #ff5555;
  --accent-yellow: #f1fa8c;
  --star: #f1fa8c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration: none; }

/* --- HEADER --- */
.header {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  z-index: 1000;
  position: relative;
}
.nav-box {
  margin: 0; padding: 0; background: none;
  color: var(--muted); font-size: 14px;
  white-space: pre; overflow: visible;
}
.nav-box a { color: var(--fg); text-decoration: none; }
.nav-box a:hover { text-decoration: underline; }
.theme-toggle {
  font: inherit; color: var(--muted); background: none;
  border: 0; padding: 0; cursor: pointer; margin-left: auto;
}
.theme-toggle:hover { color: var(--fg); }

/* --- LAYOUT --- */
.app {
  display: flex;
  height: calc(100vh - 42px);
}

/* --- SIDEBAR --- */
.sidebar {
  width: 280px;
  min-width: 280px;
  overflow-y: auto;
  border-right: 1px solid var(--rule);
  padding: 1rem;
  background: var(--bg);
  flex-shrink: 0;
}

.sidebar h2 {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 1rem 0 .5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--rule);
}
.sidebar h2:first-child { margin-top: 0; }

.search-box {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: .35rem .5rem;
  background: var(--code-bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  outline: none;
}
.search-box:focus { border-color: var(--link); }
.search-box::placeholder { color: var(--muted); }

/* Filter groups */
.filter-group { margin-bottom: .25rem; }
.filter-group label {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem 0;
  cursor: pointer;
  font-size: 13px;
}
.filter-group input[type="checkbox"] {
  accent-color: var(--link);
  width: 14px; height: 14px;
}

.rating-filter {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 13px;
}
.rating-filter select {
  font: inherit;
  font-size: 13px;
  background: var(--code-bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .2rem .4rem;
}

.count-badge {
  font-size: 12px;
  color: var(--muted);
  margin-top: .5rem;
}
.count-badge span { color: var(--accent-green); }

.reset-btn {
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .2rem .6rem;
  cursor: pointer;
  margin-top: .5rem;
}
.reset-btn:hover { color: var(--fg); border-color: var(--muted); }

/* Tag filters */
.tag-filters { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag-chip {
  font: inherit;
  font-size: 11px;
  padding: .15rem .45rem;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}
.tag-chip:hover { border-color: var(--muted); color: var(--fg); }
.tag-chip.active {
  background: var(--link);
  color: var(--bg);
  border-color: var(--link);
}

/* --- MAP --- */
.map-container {
  flex: 1;
  position: relative;
}
#map { width: 100%; height: 100%; }

/* Leaflet popup styling */
.leaflet-popup-content-wrapper {
  background: var(--panel-bg) !important;
  color: var(--fg) !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.4) !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 13px !important;
}
.leaflet-popup-tip { background: var(--panel-bg) !important; }
.leaflet-popup-close-button { color: var(--muted) !important; }
.leaflet-popup-close-button:hover { color: var(--fg) !important; }

.popup-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: .3rem;
}
.popup-type {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: .4rem;
}
.popup-rating { color: var(--star); margin-bottom: .4rem; }
.popup-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: .5rem;
  max-height: 80px;
  overflow-y: auto;
}
.popup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin-bottom: .5rem;
}
.popup-tag {
  font-size: 10px;
  padding: .1rem .35rem;
  border-radius: 2px;
  background: var(--code-bg);
  color: var(--muted);
}
.popup-notes {
  font-size: 12px;
  color: var(--accent-green);
  margin-bottom: .5rem;
  font-style: italic;
}
.popup-note-item { margin-bottom: .2rem; }
.popup-note-item::before { content: "→ "; }
.popup-reviews {
  border-top: 1px solid var(--rule);
  padding-top: .4rem;
  margin-top: .3rem;
}
.popup-review {
  font-size: 12px;
  margin-bottom: .3rem;
  color: var(--fg);
}
.popup-review-rating { color: var(--star); font-size: 11px; }
.popup-review-text { color: var(--muted); }
.popup-link {
  display: inline-block;
  margin-top: .3rem;
  font-size: 12px;
}

/* Cluster markers */
.marker-cluster-small {
  background-color: rgba(139, 233, 253, .3) !important;
}
.marker-cluster-small div {
  background-color: rgba(139, 233, 253, .6) !important;
  color: var(--bg) !important;
  font-family: ui-monospace, monospace !important;
  font-weight: 600 !important;
}
.marker-cluster-medium {
  background-color: rgba(80, 250, 123, .3) !important;
}
.marker-cluster-medium div {
  background-color: rgba(80, 250, 123, .6) !important;
  color: var(--bg) !important;
  font-family: ui-monospace, monospace !important;
  font-weight: 600 !important;
}
.marker-cluster-large {
  background-color: rgba(255, 184, 108, .3) !important;
}
.marker-cluster-large div {
  background-color: rgba(255, 184, 108, .6) !important;
  color: var(--bg) !important;
  font-family: ui-monospace, monospace !important;
  font-weight: 600 !important;
}

/* --- DETAIL PANEL --- */
.detail-panel {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 50%;
  overflow-y: auto;
  background: var(--panel-bg);
  border-top: 2px solid var(--rule);
  padding: 1rem 1.5rem;
  z-index: 800;
}
.detail-panel.open { display: block; }
.detail-close {
  position: absolute;
  top: .5rem;
  right: .75rem;
  font: inherit;
  font-size: 16px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
}
.detail-close:hover { color: var(--fg); }

.detail-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .5rem;
}
.detail-name { font-size: 16px; font-weight: 600; }
.detail-type { font-size: 12px; color: var(--muted); }
.detail-rating { color: var(--star); }
.detail-meta { font-size: 12px; color: var(--muted); margin-bottom: .75rem; }

.detail-scores {
  display: flex;
  gap: 1rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.score-item {
  font-size: 12px;
  padding: .2rem .5rem;
  border-radius: 3px;
  background: var(--code-bg);
}
.score-label { color: var(--muted); }
.score-value { color: var(--accent-green); font-weight: 600; }

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .75rem;
}

.detail-notes {
  margin-bottom: .75rem;
  padding: .5rem;
  background: var(--code-bg);
  border-radius: 3px;
  border-left: 3px solid var(--accent-green);
}
.detail-notes h3 {
  font-size: 12px;
  color: var(--accent-green);
  margin-bottom: .3rem;
}

.detail-reviews { margin-top: .75rem; }
.detail-reviews h3 {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.review-item {
  padding: .4rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.review-item:last-child { border-bottom: none; }
.review-header {
  display: flex;
  gap: .5rem;
  margin-bottom: .2rem;
}
.review-stars { color: var(--star); font-size: 12px; }
.review-author { color: var(--muted); font-size: 12px; }
.review-date { color: var(--muted); font-size: 11px; }
.review-text { color: var(--fg); }

/* --- LOADING --- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity .3s;
}
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.loading-text {
  font-size: 14px;
  color: var(--muted);
}
.loading-text .dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  .app { flex-direction: column; }

  .sidebar {
    width: 100%;
    min-width: unset;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    order: 2;
    display: none;
  }
  .sidebar.open { display: block; }

  .map-container { order: 1; flex: 1; min-height: 50vh; }

  .mobile-toggle {
    display: flex !important;
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    font: inherit;
    font-size: 13px;
    padding: .4rem 1rem;
    background: var(--panel-bg);
    color: var(--fg);
    border: 1px solid var(--rule);
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
  }

  .detail-panel { max-height: 60%; }
}

.mobile-toggle { display: none; }

/* Leaflet overrides for dark theme */
.leaflet-control-zoom a {
  background: var(--panel-bg) !important;
  color: var(--fg) !important;
  border-color: var(--rule) !important;
}
.leaflet-control-attribution {
  background: rgba(40, 42, 54, .7) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }

.leaflet-control-attribution {
  background: rgba(245, 236, 215, .7) !important;
}

:root[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(40, 42, 54, .85) !important;
}

/* Popup images */
.popup-img-wrap {
  margin: -12px -16px 8px -16px;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  max-height: 160px;
  background: var(--code-bg);
}
.popup-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* OSM markers */
.osm-marker {
  background: none !important;
  border: none !important;
}
.osm-emoji {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.osm-cluster {
  background: rgba(100,100,100,.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
}
.osm-status, .radar-status {
  color: var(--muted);
  font-size: 11px;
  margin-left: 4px;
}

/* Weather in popup */
.popup-weather {
  margin: 8px -8px 4px;
  border-top: 1px solid var(--rule);
  padding-top: 6px;
}
.weather-loading {
  color: var(--muted);
  font-size: 11px;
}
.weather-compact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}
.weather-day {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.weather-day-label {
  font-weight: bold;
  min-width: 28px;
  color: var(--fg);
}
.weather-point {
  white-space: nowrap;
}
.weather-rain { color: var(--link); font-weight: bold; }

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.85);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}