/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1f2937; }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* ── Layout ────────────────────────────────────────────── */
html, body { height: 100%; margin: 0; padding: 0; }
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ── Leaflet overrides ─────────────────────────────────── */
.leaflet-container { background: #1a2030; }
.leaflet-control-zoom a {
  background: #1f2937 !important;
  color: #e5e7eb !important;
  border-color: #374151 !important;
}
.leaflet-control-zoom a:hover { background: #374151 !important; }
.leaflet-control-attribution {
  background: rgba(17,24,39,0.8) !important;
  color: #6b7280 !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: #9ca3af !important; }

/* ── Custom SVG markers ────────────────────────────────── */
.kw-marker { background: none; border: none; }
.kw-marker svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); transition: transform .15s; }
.kw-marker:hover svg { transform: scale(1.2) translateY(-2px); }

/* ── Cluster ───────────────────────────────────────────── */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgba(220,107,47,0.3) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: rgba(220,107,47,0.85) !important;
  color: #fff !important;
  font-weight: 700;
}

/* ── Detail panel slide (desktop) ──────────────────────── */
#detail-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20rem;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 15;
}
#detail-panel.open { transform: translateX(0); }

/* ── Filter panel collapse (desktop) ───────────────────── */
#filter-panel {
  transition: width 0.3s ease, opacity 0.3s ease;
}
#filter-panel.collapsed { width: 0 !important; opacity: 0; overflow: hidden; }

/* ── Table ─────────────────────────────────────────────── */
#cave-table th { user-select: none; white-space: nowrap; }
#cave-table tbody tr {
  cursor: pointer;
  transition: background .1s;
}
#cave-table tbody tr:hover { background: #1f2937; }
.sort-asc::after  { content: ' ▲'; font-size: 10px; }
.sort-desc::after { content: ' ▼'; font-size: 10px; }

/* ── Pulse animation for loading ──────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; display: inline-block; }

/* ── Detail field rows ─────────────────────────────────── */
.detail-row { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid #1f2937; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; min-width: 70px; padding-top: 1px; }
.detail-value { color: #e5e7eb; font-size: 13px; word-break: break-word; flex: 1; }
.detail-value a { color: #F08040; text-decoration: none; }
.detail-value a:hover { text-decoration: underline; }

/* ── Rating badge ──────────────────────────────────────── */
.rating-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 600;
}

/* ── Mobile backdrop ───────────────────────────────────── */
#mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 3.5rem;
  background: rgba(0,0,0,0.6);
  z-index: 38;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#mobile-backdrop.active { display: block; }

/* ── Mobile layout ─────────────────────────────────────── */
@media (max-width: 767px) {

  /* Filter: fixed overlay from left */
  #filter-panel {
    position: fixed !important;
    top: 3.5rem;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: 285px !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  #filter-panel.collapsed {
    width: 285px !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    transform: translateX(-100%) !important;
  }
  #filter-panel.mobile-open {
    transform: translateX(0) !important;
  }

  /* Detail panel: bottom sheet */
  #detail-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 80vh;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid #374151 !important;
    z-index: 45;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    overflow-y: auto;
  }
  #detail-panel.open {
    transform: translateY(0) !important;
  }

  /* Main content always full width on mobile */
  .flex.overflow-hidden > main { width: 100% !important; }

  /* Prevent iOS auto-zoom on inputs */
  input, select, textarea { font-size: 16px !important; }

  /* Larger touch targets in table */
  #cave-table td, #cave-table th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}