/**
 * css/toolbar.css
 * Leaflet-markörens ram, verktygsfältet samt dess två undermenyer
 * (kartlager, lägg till-tips) och platseringsbannern.
 * Bruten ur app.css (Steg 8 Del A punkt 16, 2026-07-12) — ren flytt.
 */

/* ── Leaflet marker ── */
.waypoint-marker,
.leaflet-marker-icon.waypoint-marker { background: none !important; border: none !important; box-shadow: none !important; }

/* ── Toolbar ── */
#toolbar {
  position: absolute;
  bottom: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom)); /* extra marginal på telefoner med hemindikator/notch */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass-bg);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: var(--shadow-float);
  z-index: 1000;
}

.tb-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background .12s;
}
.tb-btn:hover { background: rgba(0,0,0,.06); }
.tb-btn i { font-size: 24px; }
.tb-btn.tb-primary { background: var(--accent); color: #fff; }
.tb-btn.tb-primary:hover { background: #0ea571; }
.tb-btn.active { background: rgba(0,0,0,.08); }

/* ── Kartlager-meny ── */
#layer-menu {
  display: none;
  position: absolute;
  bottom: 96px;
  /* Måste räkna in samma safe-area-tillägg som #toolbar (se ovan) — annars
     hamnar menyn för nära (eller överlappande) toolbaren på telefoner med
     hemindikator, där safe-area-inset-bottom är >0. Detta värde såg
     korrekt ut i skrivbordssimulering (safe-area där är alltid 0, så 96px
     råkade stämma av ren tur) men bröts på riktig mobil. 2026-07-16. */
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-bg-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  /* 1100, ETT snäpp över #toolbar (1000) — så menyn alltid ritas ovanpå
     toolbaren, oavsett DOM-ordning. Tidigare delad 1000-nivå med
     toolbaren gjorde att renderingsordningen kunde bli fel och toolbarens
     ikoner lyste igenom menyns nästan-solida glasbakgrund (bugg, se
     CHANGELOG). */
  z-index: 1100;
  min-width: 160px;
}
#layer-menu.open { display: block; }
#layer-menu button {
  display: block; width: 100%;
  padding: 11px 20px; text-align: left;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #374151;
  font-family: inherit; transition: background .1s;
}
#layer-menu button:hover { background: rgba(0,0,0,.04); }
#layer-menu button + button { border-top: 1px solid rgba(0,0,0,.06); }
#layer-menu button.active { color: var(--ink); font-weight: 700; }

/* ── Lägg till-undermeny ── */
#add-tip-menu {
  display: none;
  position: absolute;
  bottom: 96px;
  /* Samma resonemang som #layer-menu ovan. */
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-bg-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  /* Samma resonemang som #layer-menu ovan — 1100, ett snäpp över toolbaren. */
  z-index: 1100;
  min-width: 220px;
}
#add-tip-menu.open { display: block; }
#add-tip-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 20px; text-align: left;
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #374151;
  font-family: inherit; transition: background .1s;
}
#add-tip-menu button:hover { background: rgba(0,0,0,.04); }
#add-tip-menu button + button { border-top: 1px solid rgba(0,0,0,.06); }
#add-tip-menu button i { font-size: 16px; color: #6B7280; }

/* ── Placement-banner ── */
#placement-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: #111; color: #fff;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,.2);
  white-space: nowrap;
}
#placement-banner button {
  background: rgba(255,255,255,.2); border: none;
  border-radius: 999px; padding: 3px 10px;
  color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
#placement-banner button:hover { background: rgba(255,255,255,.3); }