/* ===== Top bar ===== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3000;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transform: translateY(0); transition: transform .25s ease;
}

/* iOS only */
html.ios .topbar {
  padding-top: calc(10px + env(safe-area-inset-top));
}


.topbar h1 {
  margin: 0; font-size: 18px; letter-spacing: .2px;
}
.topbar .subtitle {
  display: block; font-size: 12px; color: var(--muted); margin-top: 2px;
}
.topbar .actions { display: flex; align-items: center; gap: 8px; }
.btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  font: 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* .topbar {
  top: env(safe-area-inset-top);
  
} */

.btn:active { transform: translateY(1px); }

/* ===== Pannello disclaimer a discesa ===== */
.disclaimer-panel {
  position: fixed;
  top: var(--topbarHeight, 0px);
  left: 0;
  right: 0;
  z-index: 20000;

  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;

  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.disclaimer-panel.is-open {
  max-height: 40vh;
}


/* Mobile: stringiamo un po’ */
@media (max-width: 640px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar h1 { font-size: 16px; }
  .topbar .subtitle { font-size: 11px; }
  .btn { padding: 7px 10px; font-size: 13px; }
  .disclaimer-panel .inner { font-size: 12px; }
}

/* Popup SEMPRE sopra la topbar */
.leaflet-pane.leaflet-popup-pane { z-index: 4001 !important; }



/* Toggle per riaprire la topbar quando è chiusa */
/* Toggle per riaprire la topbar (sempre recuperabile) */

/*
.topbar-toggle {
  position: fixed;
  left: 12px;
  bottom: 12px;              
  top: auto;                 
  transform: none;
  z-index: 4002;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font: 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  display: none;             
  align-items: center;
  gap: 6px;
}
.topbar-toggle svg{ width:18px; height:18px; }
.topbar-toggle.force-visible{ display:inline-flex !important; }  

@media (max-width:640px){
  .topbar-toggle{ padding:10px 14px; font-size: 14px;} 
  .topbar-toggle svg{ width:20px; height:20px; }
  .topbar-toggle { bottom: 20px;}
}

@media (max-width:720px){
  .topbar-toggle { bottom: 20px;}
}
*/

/* Linguetta laterale per riaprire la barra (pill non ruotata) */
.side-tab{
  position: fixed;
  left: 40px;
  top: calc(env(safe-area-inset-top, 0px) + 0px); /* evita notch/status bar */
  z-index: 10000;                /* sopra tutto (Leaflet controls ~1000) */
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font: 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  display: none;                 /* verrà forzato via JS a inline-flex */
  pointer-events: auto;          /* sicurezza su overlay */
}
.side-tab svg{ width: 18px; height: 18px; vertical-align: -3px; }
.side-tab:active { transform: translateY(1px); }

/* Su schermi stretti, spostala lontano dai bottoni zoom di Leaflet */
/* Desktop: leggermente più grande e spostata più in alto */
@media (min-width: 641px) {
  .side-tab {
    right: 16px;
    bottom: 24px;
    width: 46px;
    height: 46px;
  }
  .side-tab svg {
    width: 22px;
    height: 22px;
  }
}




/* Stato collassato della topbar */
.topbar.is-collapsed { transform: translateY(-120%); transition: transform .25s ease; }
.disclaimer-panel.is-force-hidden { max-height: 0 !important; overflow: hidden; }

/* Toggle per mostrare/nascondere il pannello layer */
.layers-toggle {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 10px;
  font: 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  box-shadow: 0 8px 24px rgba(0,0,0,.30);
  cursor: pointer;
}
.layers-toggle:active { transform: translateY(1px); }

/* Migliora “trovabilità” bottone Legenda su mobile */
.legend-toggle { z-index: 3500; }

/* Su schermi piccoli, teniamo i controlli un po’ più grandi */
@media (max-width: 640px) {
  .layers-toggle, .legend-toggle { padding: 10px 14px; font-size: 14px; }
}

/* Topbar collassata: esce dallo schermo senza lasciare “barra nera” */
.topbar.is-collapsed { transform: translateY(-120%); }

/* Quando il disclaimer è chiuso, togli anche il bordo per evitare la striscia */
.disclaimer-panel:not(.is-open) { border-bottom: 0; }

/* Layers collassati: mostra solo la testata (grip) */
.leaflet-control-layers.is-collapsed .leaflet-control-layers-list { display: none; }