/* atlante/css/leaflet.css nasconde di proposito tutti i .leaflet-control
   nel corner sinistro (per lasciare spazio alla sidebar): qui serve una
   specificita' maggiore per far rispuntare solo la nostra toolbar */
.leaflet-left .map-toolbar.leaflet-control {
    display: flex !important;
}
.map-toolbar {
    /* centrata in alto rispetto al viewport, indipendente dal corner
       leaflet (topleft) a cui il controllo resta agganciato nel DOM */
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    background: rgba(255,255,255,0.95);
    border-radius: 30px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    /* !important necessario: leaflet.css applica margin-left:10px a
       .leaflet-left .leaflet-control (per staccarli dal bordo del corner);
       qui il controllo e' invece centrato via left:50%+transform, quindi
       quel margin residuo lo spostava di 10px a destra rompendo la
       centratura reale sul viewport (verificato con screenshot headless) */
    margin: 0 !important;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
}
.map-toolbar-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 12px;
    overflow: hidden;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.map-toolbar-btn:hover {
    background: #f5f5f5;
}
.map-toolbar-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff !important;
}
/* pulsante "+" (speed-dial): esiste nel DOM solo per mobile, su desktop
   la barra mostra gia' tutto e non serve un extra toggle */
.map-toolbar-dial-toggle {
    display: none;
}
/* icona della mappa attiva (pulsante "basemaps"): l'immagine copre l'icona
   fa finche' non c'e' una mappa da mostrare (this._setButtonImage) */
.map-toolbar-btn-img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.map-toolbar-btn.has-img .map-toolbar-btn-img {
    display: block;
}
.map-toolbar-btn.has-img i {
    display: none;
}
.map-toolbar-btn.has-img {
    /* cerchio arancio sempre presente per evidenziare che l'icona mostra
       la mappa base attualmente attiva, non solo quando il dropdown e' aperto */
    box-shadow: 0 0 0 2px var(--accent);
}
.map-toolbar-btn.active.has-img {
    box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px rgba(255,153,0,0.35);
}
.map-toolbar-dropdown-wrap {
    /* border-radius = quello del bottone circolare interno: senza,
       il box-shadow di .map-toolbar-collapsible (mobile) disegnava
       angoli quadrati dietro l'icona rotonda */
    border-radius: 50%;
    /* NON position:relative: cosi' il dropdown (position:absolute) si
       aggancia alla piu' vicina ancestor posizionata, che e' .map-toolbar
       stessa (position:fixed) e non questo wrapper. Il timeslider e' piu'
       alto dei pulsanti e allunga la barra: ancorarsi al wrapper del
       pulsante (alto solo quanto il pulsante, centrato nella riga) dava un
       gap variabile invece che "8px sotto il bordo vero della barra" */
    flex: 0 0 auto;
}
/* .leaflet-top e .leaflet-bottom (leaflet.css) hanno entrambi z-index:1000
   fisso: sono stacking context propri, quindi lo z-index del dropdown
   (sotto) conta solo dentro al proprio corner e non basta a salire sopra
   un altro corner con z-index uguale (vince l'ordine nel DOM). La legenda
   .basemaps-accuracy-legend vive in .leaflet-bottom.leaflet-left: bisogna
   alzare lo z-index del corner .leaflet-top.leaflet-left che contiene la
   toolbar, non solo quello del dropdown. */
.leaflet-top.leaflet-left {
    z-index: 2010;
}
.map-toolbar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    /* sopra logo (#logo z-index:1000) e legenda (#legenda z-index:999,
       .basemaps-accuracy-legend z-index:1001) quando aperto */
    z-index: 2000;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}
.map-toolbar-dropdown.open {
    display: block;
}
/* i controlli innestati (geocoder, basemaps) portano gia' le loro classi
   leaflet-control (float, cursor...): qui lo si annulla perche' sono
   innestati nel dropdown e non in un corner leaflet vero e proprio */
.map-toolbar-dropdown .leaflet-control-geocoder-ods,
.map-toolbar-dropdown .basemaps {
    float: none;
    margin: 0;
}
/* dentro il dropdown il pannello basemaps deve restare sempre espanso
   (niente stato "closed" compatto: la visibilita' e' gia' gestita dal
   dropdown stesso) */
.map-toolbar-dropdown .basemaps.closed {
    display: flex;
    background: rgba(255,255,255,0.9);
    box-shadow: none;
    padding-bottom: 6px;
}
.map-toolbar-dropdown .basemaps.closed .basemap {
    display: flex;
}
.map-toolbar-dropdown .basemaps.closed .basemaps-title,
.map-toolbar-dropdown .basemaps.closed .basemaps-mode,
.map-toolbar-dropdown .basemaps.closed .basemaps-mode-description,
.map-toolbar-dropdown .basemaps.closed .basemaps-help-toggle,
.map-toolbar-dropdown .basemaps.closed .basemaps-group {
    display: block;
}
.map-toolbar-timeslider-slot {
    display: flex;
    align-items: center;
}
.map-toolbar-timeslider-slot .basemaps-timeslider {
    display: block !important;
    flex-basis: auto;
    min-width: 180px;
    max-width: 260px;
    margin: 0 4px;
}
.map-toolbar-timeslider-slot .basemaps-timeslider-label {
    text-shadow: none;
}
.map-toolbar-timeslider-slot .basemaps-timeslider-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
}
.map-toolbar-timeslider-slot .basemaps-timeslider-name {
    /* portato fuori dalla pillola (non ne influenza piu' la larghezza):
       ancorato a .map-toolbar (position:fixed, e' l'ancestor posizionato
       piu' vicino) e centrato sotto la barra, a tutta la sua larghezza.
       Alone bianco per restare leggibile sopra qualsiasi sfondo di mappa */
    position: absolute;
    left: 8px;
    right: 8px;
    top: 100%;
    margin-top: 6px;
    -webkit-line-clamp: 1;
    max-width: none;
    text-shadow: -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, 1px 1px 2px #fff, 0 0 5px #fff, 0 0 5px #fff;
	font-weight: 700;
}
@media (max-width: 600px) {
    /* dimensioni ridotte ~15% rispetto al desktop per stare comode su
       schermi stretti e lasciare margine alla centratura (left:50%+transform) */
    .map-toolbar {
        /* gap/padding/dimensione pulsanti fluidi (clamp) invece di valori fissi:
           su schermi molto stretti (iPhone SE, ~320px) i pulsanti fissi a 20px
           non ci stavano tutti e finivano a ridosso del bordo arrotondato della
           pillola (effetto "tagliato"); ora si restringono in proporzione alla
           larghezza reale del viewport */
        gap: clamp(1px, 0.8vw, 3px);
        padding: 3px clamp(6px, 2vw, 8px);
        /* centratura reale: 10px fissi a sx e dx invece della vecchia
           formula calc(50vw...) che dava margini asimmetrici; spostata
           piu' in basso (top) per non incollarsi al bordo schermo */
        top: 40px;
        left: 10px;
        right: 10px;
        transform: none;
        width: auto;
        max-width: none;
    }
    .map-toolbar-btn {
        width: clamp(26px, 8.5vw, 34px);
        height: clamp(26px, 8.5vw, 34px);
        font-size: clamp(13px, 4.2vw, 16px);
        flex-shrink: 0;
    }
    .map-toolbar-timeslider-slot {
        /* lo slot va fatto crescere (non solo lo slider al suo interno):
           senza flex-grow qui lo slot resta stretto quanto il suo contenuto
           minimo e lo spazio libero avanzato dai pulsanti (larghezza fissa
           via clamp) finisce vuoto a destra della pillola */
        flex: 1 1 auto;
        min-width: 0;
    }
    .map-toolbar-timeslider-slot .basemaps-timeslider {
        /* flex-shrink reale: la barra del tempo e' l'unico elemento non a
           dimensione fissa, quindi e' lei ad assorbire lo spazio mancante
           quando i pulsanti (larghezza minima clamp sopra) non bastano piu' */
        min-width: 60px;
        max-width: none;
        flex: 1 1 60px;
        margin: 0 2px;
    }
    .map-toolbar-timeslider-slot .basemaps-timeslider-label {
        font-size: 8px;
    }
    .map-toolbar-timeslider-slot .basemaps-timeslider-current {
        min-width: 15px;
        height: 15px;
        font-size: 8px;
    }
    /* sotto i 600px il nome della mappa storica appesantisce troppo la
       barra: resta comunque leggibile tramite il pulsante info/popup */
    .map-toolbar-timeslider-slot .basemaps-timeslider-name {
        display: none;
    }

    /* speed-dial (variante F testata in test_mobile_toolbar_variants.html):
       niente piu' pillola unica orizzontale. Il FAB "+" resta ancorato in
       alto a sinistra (stesso top:40px); sotto si apre una colonna
       verticale con home/fullscreen/basemap/cerca/info. Il timeslider
       esce dal flusso della colonna e resta sempre visibile come pillola
       separata a destra del FAB, mai nascosto dal toggle */
    .map-toolbar {
        flex-direction: column;
        align-items: flex-start;
        background: none;
        box-shadow: none;
        padding: 0;
        gap: clamp(4px, 1.5vw, 6px);
		left: 20px;
    }
    .map-toolbar-dial-toggle {
        display: flex;
        order: -1;
        background: #fff;
        box-shadow: 0 1px 6px rgba(0,0,0,.35);
        /* la pillola timeslider (a destra, stesso top:0) e' piu' alta del
           FAB (padding+label+slider), quindi condividendo top:0 i bordi
           superiori combaciano ma i centri no; nudge verso il basso per
           centrare il FAB sull'altezza della pillola. position:relative
           sposta solo la resa visiva, non riserva spazio nel flusso: senza
           margin-bottom pari, il FAB scendeva sovrapponendosi al bottone
           Home sottostante nella colonna aperta */
        position: relative;
        top: 8px;
        margin-bottom: 8px;
    }
    .map-toolbar-collapsible {
        /* ogni pulsante ha ora la propria ombra/sfondo (la pillola che li
           conteneva tutti e' sparita sopra) */
        box-shadow: 0 1px 6px rgba(0,0,0,.35);
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.22s ease, opacity 0.18s ease;
    }
    .map-toolbar.dial-open .map-toolbar-collapsible {
        max-height: 44px;
        opacity: 1;
        pointer-events: auto;
    }
    .map-toolbar-timeslider-slot {
        /* fuori dal flusso della colonna: pillola propria, ancorata allo
           stesso top:40px del FAB, a destra di esso, larghezza fino al
           bordo destro del vincolo (right:10px gia' sul container) */
        position: absolute;
        top: 0;
        left: calc(clamp(26px, 8.5vw, 34px) + 12px);
        right: 0;
        background: rgba(255,255,255,0.95);
        border-radius: 30px;
        box-shadow: 0 1px 6px rgba(0,0,0,.35);
        padding: 3px clamp(6px, 2vw, 8px);
    }
    /* i dropdown (basemap/cerca) restano ancorati a .map-toolbar (fixed):
       ora la colonna puo' essere piu' alta della pillola timeslider, quindi
       si aprono sotto tutta la colonna aperta invece che sotto il singolo
       bottone - comportamento accettato per questa variante */

    /* su mobile la guida e' gia' raggiungibile dalla bottom-nav (#bottom-nav-guida):
       il pulsante info nella colonna e' ridondante, si toglie del tutto */
    .map-toolbar-info {
        display: none !important;
    }

    /* dropdown (basemap/cerca): su mobile NON restano piu' ancorati sotto
       il bottone che li apre (li portava fuori schermo/dietro la legenda,
       vedi screenshot 2026-08-15_20h29_47). Si sganciano dal flusso della
       colonna e si piazzano fissi appena sotto la pillola del timeslider,
       stessa larghezza esatta di .map-toolbar-timeslider-slot (che inizia
       dopo il FAB: clamp(26px,8.5vw,34px)+12px, piu' i 10px di left del
       .map-toolbar - qui il dropdown e' fixed rispetto al viewport, non
       piu' figlio di .map-toolbar, quindi va ricalcolato in assoluto
       invece di ereditarlo) e davanti alla legenda (#legenda z-index:999) */
    .map-toolbar-dropdown {
        position: fixed;
        top: 94px;
        left: calc(10px + clamp(26px, 8.5vw, 34px) + 12px);
        right: 10px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 100px);
        z-index: 2002;
    }
}

/* Pannello impostazioni confronto (raggio/trasparenza occhio di bue, trasparenza mappa di base) */
.occhio-settings-panel {
    background: rgba(255,255,255,0.97);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.35);
    padding: 12px 14px;
    width: 260px;
    box-sizing: border-box;
}
.occhio-settings-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.occhio-settings-row:last-child {
    margin-bottom: 0;
}
.occhio-settings-row label {
    font-size: 12px;
    color: #333;
}
.occhio-settings-row input[type="range"] {
    width: 100%;
}