/* ============================================================
   PETA.CSS — Halaman Peta Interaktif
   Portal Ekonomi Map — Desa Polobogo
   ============================================================ */

/* ── PAGE LAYOUT ─────────────────────────────────────────── */
.peta-body {
  overflow: hidden;
  height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ── NAV OVERRIDE di halaman peta ────────────────────────── */
.peta-body .nav { position: sticky; top: 0; }
.peta-body .nav.is-hidden { transform: none; }

/* ── PETA WRAPPER ────────────────────────────────────────── */
.peta-wrapper {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  min-height: 0;
}

@media (max-width: 900px) {
  .peta-body        { height: 100svh; overflow: hidden; }
  .peta-wrapper     { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  background-color: var(--bg-cream);
  border-right: 1px solid var(--border-warm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 10;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (max-width: 900px) {
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-warm);
    max-height: 45vh;
    grid-row: 1;
  }
  .sidebar.is-collapsed { max-height: 56px; }
}

/* Sidebar header */
.sidebar__head {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border-warm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.sidebar__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
}

.sidebar__count {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-subtle);
  letter-spacing: var(--tracking-wide);
}

/* Collapse toggle (mobile) */
.sidebar__toggle {
  display: none;
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--mist);
  color: var(--text-secondary);
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
@media (max-width: 900px) { .sidebar__toggle { display: flex; } }
.sidebar__toggle:hover { background-color: var(--bg-parchment); color: var(--ink); }

/* Filter bar */
.filter-bar {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-warm);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Search */
.filter-search {
  position: relative;
}
.filter-search__input {
  width: 100%;
  padding: 0.55rem 2.2rem 0.55rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--mist);
  background-color: var(--bg-parchment);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.filter-search__input:focus {
  outline: none;
  border-color: var(--sienna);
  box-shadow: 0 0 0 3px rgba(140,74,47,0.10);
}
.filter-search__icon {
  position: absolute;
  right: var(--sp-3); top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--mist);
  pointer-events: none;
}

/* Category chips */
.filter-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  background-color: var(--bg-parchment);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  user-select: none;
}
.cat-chip:hover { background-color: var(--mist); color: var(--ink); }
.cat-chip.is-active {
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cat-chip .chip-dot {
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  flex-shrink: 0;
  background-color: currentColor;
  opacity: 0.7;
}

/* UMKM list */
.sidebar__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) 0;
}
.sidebar__list::-webkit-scrollbar        { width: 4px; }
.sidebar__list::-webkit-scrollbar-thumb  { background: var(--mist); border-radius: var(--r-full); }

.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  border-bottom: 1px solid rgba(35,24,16,0.04);
  transition: background-color var(--dur-fast) var(--ease-out);
  position: relative;
}
.list-item:hover    { background-color: var(--bg-parchment); }
.list-item.is-active { background-color: rgba(140,74,47,0.07); }

.list-item.is-faded { opacity: 0.28; }

.list-item__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: white;
}

.list-item__body { flex: 1; min-width: 0; }
.list-item__name {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item__sub {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  margin-top: 2px;
}

.list-item__status {
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.list-item__status.open   { background-color: #4A7C59; }
.list-item__status.closed { background-color: var(--mist); }

/* Empty state */
.list-empty {
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
  color: var(--text-subtle);
}
.list-empty p { font-family: var(--font-ui); font-size: var(--text-sm); }

/* ── MAP AREA ─────────────────────────────────────────────── */
.map-area {
  position: relative;
  overflow: hidden;
}

#leaflet-map {
  width: 100%;
  height: 100%;
  background-color: #E8E0D0;
}

/* Leaflet custom tile filter — earthy illustration style */
.leaflet-tile-pane {
  filter: sepia(0.35) brightness(0.97) saturate(0.80) hue-rotate(2deg);
}

/* ── LEAFLET CUSTOM MARKER ───────────────────────────────── */
.map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  font-size: 16px;
  cursor: pointer;
  transition: transform var(--dur-normal) var(--ease-spring), box-shadow var(--dur-normal) var(--ease-out);
}
.map-pin:hover { transform: rotate(-45deg) scale(1.15); box-shadow: 0 5px 16px rgba(0,0,0,0.35); }
.map-pin.is-active { transform: rotate(-45deg) scale(1.2); box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.map-pin.is-faded  { opacity: 0.25; }
.map-pin__inner    { transform: rotate(45deg); font-size: 16px; }

/* Pulse animation for active pin */
.map-pin.is-active::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50% 50% 50% 0;
  border: 2px solid currentColor;
  animation: pinPulse 1.5s ease-in-out infinite;
  opacity: 0.4;
}
@keyframes pinPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%       { transform: scale(1.3); opacity: 0; }
}

/* ── DETAIL PANEL (slide dari kanan / bawah di mobile) ──── */
.detail-panel {
  position: absolute;
  z-index: 20;
  background-color: var(--bg-cream);
  box-shadow: var(--shadow-xl);
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Desktop: kanan */
@media (min-width: 901px) {
  .detail-panel {
    top: 0; right: 0; bottom: 0;
    width: 340px;
    transform: translateX(100%);
    border-left: 1px solid var(--border-warm);
    overflow-y: auto;
  }
  .detail-panel.is-open { transform: translateX(0); }
}

/* Mobile: bawah */
@media (max-width: 900px) {
  .detail-panel {
    bottom: 0; left: 0; right: 0;
    max-height: 65vh;
    transform: translateY(100%);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    overflow-y: auto;
  }
  .detail-panel.is-open { transform: translateY(0); }
}

/* Drag handle (mobile) */
.detail-panel__handle {
  display: none;
  width: 36px; height: 4px;
  background-color: var(--mist);
  border-radius: var(--r-full);
  margin: var(--sp-3) auto var(--sp-2);
}
@media (max-width: 900px) { .detail-panel__handle { display: block; } }

/* Panel close button */
.detail-panel__close {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--mist);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: all var(--dur-fast) var(--ease-out);
}
.detail-panel__close:hover { background-color: var(--bg-parchment); color: var(--ink); }

/* Panel photo */
.detail-panel__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: linear-gradient(135deg, var(--bg-parchment), var(--mist));
}

/* Panel body */
.detail-panel__body { padding: var(--sp-5); }

.detail-panel__cat {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}

.detail-panel__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--leading-snug);
  margin-bottom: var(--sp-3);
}

.detail-panel__tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-warm);
}

.detail-panel__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.detail-meta-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.detail-meta-row svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--sienna); }

.detail-panel__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ── MAP LEGEND ──────────────────────────────────────────── */
.map-legend {
  position: absolute;
  bottom: var(--sp-6);
  left: var(--sp-5);
  z-index: 10;
  background-color: rgba(250,245,234,0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-warm);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-md);
}

.map-legend__title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.map-legend__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: var(--sp-1);
}

.legend-pin {
  width: 14px; height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 1.5px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

/* ── MAP CONTROLS ─────────────────────────────────────────── */
.map-controls {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.map-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background-color: rgba(250,245,234,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-warm);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.map-btn:hover { background-color: var(--bg-cream); box-shadow: var(--shadow-md); transform: scale(1.05); }
.map-btn svg   { width: 14px; height: 14px; }