/* =========================================================
   style.css — Zeilreis Denemarken
   ========================================================= */

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-dark:    #0f1117;
  --bg-panel:   #1a1d2e;
  --bg-card:    #252842;
  --accent:     #4f8ef7;
  --accent2:    #6ba3ff;
  --txt:        #e8eaf6;
  --txt-dim:    #8892b0;
  --border:     #2d3561;
  --ok:         #4caf50;
  --danger:     #f44336;
  --sidebar-w:  295px;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-dark);
  color: var(--txt);
  height: 100vh;
  overflow: hidden;
}

#app { display: flex; height: 100vh; }

/* =========================================================
   SIDEBAR
   ========================================================= */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Header */
#sidebar header {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-dark);
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--accent);
}

.logo i { font-size: 1.15rem; }

.subtitle {
  margin-top: 3px;
  font-size: 0.67rem;
  color: var(--txt-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Panels */
.panel {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  overflow-y: auto;
}

.panel h3 {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.placeholder-msg {
  font-size: 0.8rem;
  color: var(--txt-dim);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ---- Verblijfplaatsen ---- */
#stops-list { display: flex; flex-direction: column; gap: 6px; }

.stop-item {
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.stop-name {
  font-size: 0.8rem;
  font-weight: 500;
}

.stop-duration {
  font-size: 0.72rem;
  color: var(--accent);
  margin-top: 2px;
}

.stop-dates {
  font-size: 0.65rem;
  color: var(--txt-dim);
  margin-top: 2px;
}

/* ---- Status bar ---- */
#status-bar {
  margin-top: auto;
  padding: 9px 16px;
  background: var(--bg-dark);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

#status-text {
  font-size: 0.73rem;
  color: var(--txt-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

#status-text.loading { color: var(--accent); }
#status-text.error   { color: var(--danger); }
#status-text.ok      { color: var(--ok); }

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

/* ---- Leaflet popup override ---- */
.leaflet-popup-content-wrapper {
  background: var(--bg-panel) !important;
  color: var(--txt) !important;
  border: 1px solid var(--border);
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55) !important;
}
.leaflet-popup-tip { background: var(--bg-panel) !important; }
.leaflet-popup-close-button { color: var(--txt-dim) !important; font-size: 18px !important; top: 8px !important; right: 8px !important; }
.leaflet-popup-content { margin: 14px 16px !important; font-size: 0.8rem; line-height: 1.65; }

.pu-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 7px; }
.pu-row   { display: flex; justify-content: space-between; gap: 14px; color: var(--txt-dim); margin-bottom: 2px; }
.pu-val   { font-weight: 500; color: var(--txt); }
.pu-addr  { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--txt-dim); }

/* Pulsing current-position marker */
.pulse-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79,142,247,.65); }
  70%  { box-shadow: 0 0 0 10px rgba(79,142,247,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,142,247,0); }
}

/* ---- Attribution ---- */
.leaflet-control-attribution {
  background: rgba(26,29,46,.82) !important;
  color: var(--txt-dim) !important;
  font-size: 0.62rem !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }

/* ---- Hamburger toggle (alleen zichtbaar op mobiel) ---- */
#btn-menu-toggle {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1001;
  width: 36px;
  height: 36px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--txt);
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Sluit-knop in sidebar header (alleen mobiel) */
#btn-sidebar-close {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--txt-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
#btn-sidebar-close:hover { color: var(--txt); }

/* Sidebar backdrop */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1999;
}
#sidebar-backdrop.open { display: block; }

/* =========================================================
   MOBIEL RESPONSIVE (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {
  /* Voorkom horizontale scroll tijdens slide-animatie */
  body { overflow-x: hidden; }

  /* Sidebar volledig uit de flex-stroom → kaart wordt vol-breed.
     Verberg via transform (betrouwbaarder dan left: calc). */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: min(var(--sidebar-w), 88vw);
    transform: translateX(-110%);
    transition: transform 0.22s ease;
    z-index: 2000;
    box-shadow: 4px 0 24px rgba(0,0,0,0.6);
    overflow-y: auto;
  }
  #sidebar.open { transform: translateX(0); }

  /* Kaart neemt volledige breedte */
  #app           { display: block; }
  #map-container { width: 100vw; height: 100dvh; }

  /* Header: logo links, sluitknop rechts op één rij */
  #sidebar header {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #sidebar header .logo    { flex: 1; }
  #sidebar header .subtitle { display: none; }

  /* Toon hamburger (op kaart) en sluit-knop (in sidebar) */
  #btn-menu-toggle   { display: flex; }
  #btn-sidebar-close { display: flex; align-items: center; justify-content: center;
                       width: 28px; height: 28px; border-radius: 6px;
                       background: var(--bg-card); border: 1px solid var(--border); }

  /* Reset-knop iets lager ivm zoom-controls */
  #btn-reset-view { top: 90px; }

  /* Heatmap-legenda compacter op mobiel */
  #heatmap-legend {
    bottom: 8px;
    left: 8px;
    padding: 7px 10px;
    min-width: 120px;
  }
  .map-legend-title  { font-size: 0.6rem; }
  .heatmap-grad-labels { font-size: 0.6rem; }
}

/* ---- Reset-positie knop op kaart ---- */
#btn-reset-view {
  position: absolute;
  top: 80px;           /* onder de Leaflet zoom-controls (~76px) */
  left: 10px;
  z-index: 1000;
  width: 30px;
  height: 30px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.2);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #444;
  transition: background 0.12s, color 0.12s;
}

#btn-reset-view:hover { background: #f4f4f4; color: #000; }

/* ---- Heatmap legend (overlay op de kaart, links-onder) ---- */
#heatmap-legend {
  position: absolute;
  bottom: 20px;
  left: 10px;
  z-index: 1000;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  min-width: 150px;
  pointer-events: none;
}

.map-legend-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--txt-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.heatmap-grad-bar {
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(to right, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
  margin: 7px 0 3px;
}

.heatmap-grad-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--txt-dim);
  padding: 0 1px;
}