/* ══════════════════════════════════════════════════════════
   TAPIR · nav.css
   Global navigation — topbar, bottom nav, sidebar
   Responsive: mobile portrait / landscape / desktop
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) 12px 0;
  display: flex; align-items: flex-end; padding-bottom: 8px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
  gap: 10px;
}

.topbar-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; flex-shrink: 0;
}
.topbar-logo {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  letter-spacing: 3px;
  background: linear-gradient(120deg, var(--accent) 0%, #7dd3fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.topbar-sep { width: 1px; height: 13px; background: var(--border-hi); flex-shrink: 0; }
.topbar-page {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted-hi); font-weight: 500;
}

.topbar-right {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto; flex-shrink: 0;
}

/* ── Page stats (FM count dll) ── */
#stat-fm-chip, #stat-total-chip { flex-shrink: 0; }

/* ── Nav page links di topbar (desktop) ── */
.topbar-nav { display: none; gap: 2px; }
.topbar-nav-item {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600; color: var(--muted-hi);
  text-decoration: none; cursor: pointer;
  transition: background var(--tr), color var(--tr);
  border: 1px solid transparent;
}
.topbar-nav-item:hover { background: var(--surface2); color: var(--text); }
.topbar-nav-item.active {
  background: var(--accent-dim); color: var(--accent);
  border-color: rgba(0,229,255,.2);
}
.topbar-nav-item svg { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV (mobile portrait)
   ══════════════════════════════════════════════════════════ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 500;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex; align-items: stretch;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--border);
}

.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  color: var(--muted-hi); font-family: var(--sans);
  font-size: 9px; font-weight: 500; letter-spacing: .2px;
  text-transform: uppercase; text-decoration: none;
  transition: color var(--tr);
  position: relative;
}
.nav-item svg { transition: transform var(--tr-fast); }
.nav-item.active { color: var(--accent); }
.nav-item.active svg { transform: scale(1.08); }
.nav-item.active::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%;
  height: 2px; background: var(--accent);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 8px var(--accent-glow);
}


/* ══════════════════════════════════════════════════════════
   FILTER BAR (service / subservice / radius)
   — ditampilkan di bawah topbar, di atas peta
   ══════════════════════════════════════════════════════════ */
.filter-bar {
  position: fixed;
  top: calc(var(--topbar-h) + var(--safe-t));
  left: 0; right: 0;
  z-index: 490;
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 20px;
  background: var(--surface2); border: 1px solid var(--border);
  font-size: 11px; font-weight: 500; color: var(--text-dim);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.filter-chip:hover { background: var(--surface3); color: var(--text); }
.filter-chip.active {
  background: var(--accent-dim); border-color: rgba(0,229,255,.3);
  color: var(--accent);
}
.filter-chip svg { flex-shrink: 0; }

.filter-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }

.filter-select {
  appearance: none;
  background: var(--surface2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234d6a84' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 7px center;
  border: 1px solid var(--border); border-radius: 20px;
  color: var(--text-dim); font-family: var(--sans); font-size: 11px;
  padding: 5px 24px 5px 10px; cursor: pointer; flex-shrink: 0;
  transition: border-color var(--tr), color var(--tr);
}
.filter-select:focus { outline: none; border-color: var(--accent); color: var(--text); }

.filter-radius-wrap {
  display: flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.filter-radius-wrap label {
  font-size: 10px; color: var(--muted-hi); white-space: nowrap;
}
.filter-radius-input {
  width: 56px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; color: var(--text); font-family: var(--mono);
  font-size: 11px; padding: 5px 8px; text-align: center;
  transition: border-color var(--tr);
}
.filter-radius-input:focus { outline: none; border-color: var(--accent); }

.filter-apply {
  padding: 5px 12px; border-radius: 20px;
  background: var(--accent); color: var(--bg);
  font-size: 11px; font-weight: 600; border: none;
  cursor: pointer; flex-shrink: 0;
  transition: box-shadow var(--tr);
}
.filter-apply:hover { box-shadow: 0 0 12px var(--accent-glow); }

/* ══════════════════════════════════════════════════════════
   MAP OFFSET — konten peta offset dari topbar + filter bar
   ══════════════════════════════════════════════════════════ */
.map-offset {
  top: calc(var(--topbar-h) + var(--safe-t) + 42px);
}
#map {
  top: calc(var(--topbar-h) + var(--safe-t) + 42px);
  bottom: calc(var(--nav-h) + var(--safe-b));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Landscape phone / small tablet */
@media (max-height: 500px) and (orientation: landscape) {
  .bottom-nav { display: none; }
  .topbar-page { display: none; }
  #map { bottom: 0; }
  .toast { bottom: calc(var(--safe-b) + 12px); }
}

/* Tablet + desktop */
@media (min-width: 768px) {
  .bottom-nav { display: none; }
  .topbar-nav { display: flex; }
  #map {
    left: 0;
    bottom: 0;
  }
  .filter-bar { left: 0; }
  .toast { bottom: calc(var(--safe-b) + 12px); left: 50%; }
  .panel { left: 0; }
  .scrim { left: 0; }
}