/* Bottom tab bar mobile (<=767px), sostituisce i due FAB in alto agli angoli
   (#sidebar-left-fab, #sidebar-right-fab, ancora usati da >=768px) con una
   barra fissa sul bordo inferiore, pattern piu' familiare su mobile
   (raggiungibile col pollice, stile app native). Non tocca il layout desktop. */

#bottom-nav { display: none; }

@media (max-width: 767px) {
  /* "Mostra tutti i marker" e "Overlay mappa" gia' presenti nella bottom-nav */
  #cartoline-toggles-card { display: none; }

  #bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* deve restare sopra il backdrop/la modale del plugin flythat usato
       dalla guida (#modal-basemap-help, z-index di default 8888/8887),
       cosi' resta cliccabile anche a guida aperta a schermo intero */
    z-index: 9500;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,.25);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  #bottom-nav button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px 6px;
    background: none;
    border: none;
    color: #666;
    font-size: 18px;
    font-family: inherit;
    cursor: pointer;
  }

  #bottom-nav button .bottom-nav-caption {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: inherit;
  }

  #bottom-nav button.active,
  #bottom-nav button:active {
    color: var(--accent);
  }

  /* i vecchi FAB in alto restano nel DOM (li apre ancora bottom-nav.js) ma
     non piu' visibili: sotto i 767px l'apertura sidebar passa dalla barra */
  #sidebar-left-fab, #sidebar-right-fab { display: none !important; }

  /* #map resta a schermo intero (la mappa scorre sotto la barra, come nelle
     app mobile native); solo i controlli leaflet in basso (attribuzione,
     legenda precisione, scala) e le sidebar aperte devono restare sopra
     la barra e non finirci nascosti dietro */
  .leaflet-bottom {
    margin-bottom: calc(52px + env(safe-area-inset-bottom, 0));
  }
  #sidebar.sidebar, #sidebar-right.sidebar {
    bottom: calc(52px + env(safe-area-inset-bottom, 0));
  }
}