/* Auto-extracted from index.html — modulo mappa condiviso
 * Caricato da: index.html, editor.html
 * Non modificare a mano: rigenerare con tool */



/* Filter bar */
.filter-bar{padding:7px 20px 7px 12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--border);background:var(--bg2)}


/* ── FILTRI DENTRO LA MAPPA (colonna destra + popup esteso) ──────────────
 * La barra filtri tradizionale è stata spostata dentro #global-map-wrap.
 * I chip sport principali stanno in colonna verticale in alto a destra
 * (overlay sulla mappa). Il bottone "···" apre un popup a sinistra della
 * colonna con sport extra, date, geo e GPX. Su mobile il popup diventa
 * un bottom-sheet a tutta larghezza. */
.map-filters-col{
  position:absolute;top:12px;right:12px;z-index:600;
  display:flex;flex-direction:column;gap:6px;
  width:122px;pointer-events:none;
}

.map-filters-col > *{pointer-events:auto}

.map-filters-col .chip-row{
  display:flex;flex-direction:column;gap:6px;width:100%;flex-wrap:nowrap;
}

.map-filters-col .chip{
  flex:0 0 auto;width:100%;min-width:0;text-align:center;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(160%) blur(8px);
  backdrop-filter:saturate(160%) blur(8px);
  border:1px solid rgba(0,0,0,.06);
  border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  font-size:12px;font-weight:600;
  padding:8px 10px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.map-filters-col .chip.on{background:#1C1A17;color:#fff;border-color:#1C1A17}

.map-filters-col .chip-more{font-size:14px;padding:8px 10px;letter-spacing:1px}

.map-filters-col .chip-more.on,.map-filters-col .chip-more.open{
  background:var(--orange);color:#fff;border-color:var(--orange)
}

.map-filters-col .filter-summary,
.map-filters-col .btn-clear-all{display:none!important}


/* Popup esteso — appare a sinistra della colonna */
.map-filters-pop{
  position:absolute;top:12px;right:144px;z-index:960;
  display:none;flex-direction:column;gap:10px;
  width:min(360px,calc(100vw - 168px));
  max-height:calc(100% - 24px);
  overflow-y:auto;
  background:rgba(255,255,255,.98);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  padding:12px 14px;
}

.map-filters-pop.open{display:flex}

.map-filters-pop .fe-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 0}

.map-filters-pop .fe-row + .fe-row{border-top:1px solid var(--border);padding-top:8px;margin-top:2px}

.map-filters-pop #chip-row-extra{flex-wrap:wrap;width:100%}

.map-filters-pop #chip-row-extra .chip{flex:0 1 auto;width:auto;min-width:0;padding:6px 10px;font-size:12px}

/* Riga dei chip principali: occupa tutta la larghezza senza andare a capo */
.chip-row{display:flex;gap:6px;flex-wrap:nowrap;width:100%;align-items:center}

.fe-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;padding:5px 0}

.fe-row+.fe-row{border-top:1px solid var(--border);padding-top:8px}

.geo-confirm-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:9999;background:#fff;border-bottom:2px solid var(--orange);padding:10px 18px;align-items:center;gap:10px;box-shadow:0 2px 12px rgba(0,0,0,.15);pointer-events:all}

.geo-confirm-banner.visible{display:flex}

.filter-summary{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3);flex-wrap:wrap}

.filter-summary-tag{display:inline-flex;align-items:center;gap:4px;background:var(--o-mid);border:1px solid var(--o-border);color:var(--orange);border-radius:20px;padding:2px 8px;font-size:11px;font-weight:600}

.btn-clear-all{background:none;border:1px solid var(--border);color:var(--text3);padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}

.btn-clear-all:hover{border-color:#DC2626;color:#DC2626}

.filter-sep{width:1px;height:22px;background:var(--border);margin:0 2px;flex-shrink:0}

.filter-lbl{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-right:2px}

.chip{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:6px 10px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;text-align:center}

.chip:hover{border-color:var(--border2);background:var(--bg4)}

.chip.on{background:var(--orl);border-color:var(--orm);color:var(--orange);font-weight:600}

/* Nei chip-row ogni chip si espande ugualmente */
.chip-row .chip{flex:1;min-width:0}

.chip-more{font-size:16px;letter-spacing:1px;padding:6px 9px;min-width:38px;text-align:center;flex:0 0 auto!important}

.chip-more.open{background:var(--orl);border-color:var(--orm);color:var(--orange)}

.date-input{height:30px;padding:0 8px;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--text);outline:none;transition:border-color .15s;cursor:pointer}

.date-input:focus{border-color:var(--orange)}

.btn-filter-clear{background:none;border:none;color:var(--text3);font-size:12px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all .15s}

.btn-filter-clear:hover{color:var(--red);background:rgba(220,38,38,.06)}


/* ══ GLOBAL MAP ══ */
#global-map-section{background:var(--bg2);border-bottom:1px solid var(--border);position:relative;z-index:1;isolation:isolate}

#global-map-wrap{position:relative;z-index:1;isolation:isolate}

#global-map{height:380px;width:100%;background:var(--bg3);transition:height .3s ease}

/* Collassata: striscia sottile che mostra solo i controlli in basso */
#global-map.collapsed{height:42px;overflow:hidden}

.map-legend{
  position:absolute;bottom:12px;left:12px;z-index:400;
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  border:1px solid var(--border);border-radius:8px;padding:8px 12px;
  display:flex;flex-direction:column;gap:4px;box-shadow:var(--sh-s);
  max-width:200px;
}

.map-legend-title{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}

.legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);font-weight:500}

.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

.map-toggle{background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s;box-shadow:var(--sh-s)}

.map-toggle:hover{background:var(--bg3)}

.map-lyr-btn{background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:1px solid var(--border);color:var(--text2);padding:4px 9px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;box-shadow:var(--sh-s);border-radius:0;border-right:none}

.map-lyr-btn:first-child{border-radius:6px 0 0 6px}

.map-lyr-btn:last-child{border-radius:0 6px 6px 0;border-right:1px solid var(--border)}

.map-lyr-btn:hover{background:var(--bg3)}

.map-lyr-btn.active{background:var(--orl);border-color:var(--orm);color:var(--orange)}

#global-map.drawing-rect,#global-map.drawing-rect *{cursor:crosshair!important}

#global-map.drawing-lasso,#global-map.drawing-lasso *{cursor:cell!important}

/* Pannello strumenti selezione — sinistra mappa */
#draw-tools{
  position:absolute;left:10px;top:10px;z-index:400;
  display:flex;flex-direction:column;gap:5px;
}

.draw-tool-btn{
  background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  border:1.5px solid var(--border);border-radius:8px;
  padding:7px 10px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;transition:all .15s;box-shadow:var(--sh-s);
  color:var(--text2);min-width:52px;
}

.draw-tool-btn:hover{background:var(--bg3);border-color:var(--border2)}

.draw-tool-btn.draw-active{
  background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.40);
  color:var(--blue);box-shadow:0 0 0 2px rgba(37,99,235,.18);
}

.draw-tool-btn svg{display:block}

.draw-tool-lbl{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;white-space:nowrap}

#global-map-wrap:fullscreen,
#global-map-wrap:-webkit-full-screen{position:fixed;inset:0;z-index:9999}

#global-map-wrap:fullscreen #global-map,
#global-map-wrap:-webkit-full-screen #global-map{height:100vh!important}

.geo-input{
  flex:1;height:34px;padding:0 36px 0 11px;background:var(--bg);
  border:1px solid var(--border);border-radius:6px;font-size:13px;color:var(--text);
  outline:none;transition:border-color .15s;
}

.geo-input:focus{border-color:var(--orange)}

.geo-input::placeholder{color:var(--text3)}

.geo-search-btn{
  position:absolute;right:0;top:0;bottom:0;width:34px;
  background:none;border:none;cursor:pointer;font-size:13px;
  color:var(--text3);transition:color .15s;border-radius:0 6px 6px 0;
}

.geo-search-btn:hover{color:var(--orange)}

.geo-radius-wrap{display:flex;align-items:center;gap:5px}

.geo-radius-input{
  width:72px;height:34px;padding:0 8px;background:var(--bg);
  border:1px solid var(--border);border-radius:6px;font-size:13px;
  color:var(--text);outline:none;text-align:right;transition:border-color .15s;
}

.geo-radius-input:focus{border-color:var(--orange)}

.geo-gps-btn{
  display:flex;align-items:center;gap:5px;
  height:34px;padding:0 12px;background:var(--bg2);
  border:1px solid var(--border);border-radius:6px;
  font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s;
}

.geo-gps-btn:hover{border-color:var(--orange);color:var(--orange);background:var(--orl)}

.geo-gps-btn.locating{color:var(--orange);border-color:var(--orm);animation:pulse 1s infinite}

.geo-status{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:5px}

.geo-status.ok{color:var(--green)}

.geo-status.err{color:var(--red)}

.geo-clear-btn{
  height:34px;padding:0 12px;background:rgba(252,76,2,.08);
  border:1px solid var(--orm);border-radius:6px;
  font-size:12px;font-weight:600;color:var(--orange);cursor:pointer;transition:all .15s;
}

.geo-clear-btn:hover{background:rgba(252,76,2,.15)}

.gpx-intersect-progress{display:none;align-items:center;gap:6px;font-size:12px;color:var(--text3);padding:3px 0}

.gpx-upload-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  height:32px;padding:0 14px;background:#fff;border:1.5px dashed #93C5FD;
  border-radius:6px;font-size:12px;font-weight:600;color:#2563EB;transition:all .15s;
}

.gpx-upload-btn:hover{background:#EFF6FF;border-color:#2563EB}

.gpx-upload-btn input{display:none}

.gpx-status{font-size:12px;color:#1E40AF;display:flex;align-items:center;gap:5px}

.gpx-status.err{color:var(--red)}

.gpx-clear-btn{
  height:32px;padding:0 12px;background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.25);border-radius:6px;
  font-size:12px;font-weight:600;color:#2563EB;cursor:pointer;transition:all .15s;
}

.gpx-clear-btn:hover{background:rgba(37,99,235,.15)}

.gpx-intersect-toggle{
  display:flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12px;font-weight:500;color:#1E40AF;user-select:none;
}

.gpx-intersect-toggle input{accent-color:#2563EB;width:14px;height:14px;cursor:pointer}

.map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(247,245,242,.7);z-index:300;font-size:13px;color:var(--text3);gap:8px;pointer-events:none}

.map-loading.hidden{display:none}


/* Multi-select bar (raised above bottom nav) */
.sel-bar{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);background:var(--text);color:#fff;border-radius:14px;padding:10px 16px;display:none;align-items:center;gap:12px;box-shadow:var(--sh-l);z-index:310;white-space:nowrap}

.sel-bar.show{display:flex}

.sel-bar .btn-xs{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);color:#fff;padding:5px 13px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}

.sel-bar .btn-xs:hover{background:rgba(255,255,255,.25)}

.sel-bar .btn-xs.primary{background:var(--orange);border-color:var(--orange)}

.sel-bar .btn-xs.primary:hover{filter:brightness(1.1)}


/* Tracce sulla mappa globale: blend "multiply" — quando molte tracce
 * si sovrappongono (cluster denso), il colore si addensa cromaticamente
 * dando un effetto naturale di heatmap, invece dell'effetto "blob" piatto.
 * Nelle zone marginali (poche tracce) il colore resta chiaro e trasparente. */
.gx-track-blend{mix-blend-mode:multiply}

.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--border2);border-top-color:var(--orange);animation:spin .7s linear infinite;flex-shrink:0}


/* ══ BIKE MODE — polish index.html ══════════════════════════════════════════
 * Quando body.bike-mode è attivo (toggle header 🚴):
 * testi e tap target più grandi, bordi più spessi, spaziature più generose.
 * Pensato per uso con guanti o telefono sul manubrio. */
body.bike-mode .chip          { font-size:15px; padding:10px 14px; }

body.bike-mode .chip-more     { font-size:20px; padding:10px 12px; min-width:46px; }
/* ── @media rules per mappa+filtri (estratte manualmente) ── */
@media (max-width:560px){
  .map-filters-col{width:104px;top:8px;right:8px;gap:5px}
  .map-filters-col .chip{font-size:11px;padding:7px 9px}
  .map-filters-col .chip-more{font-size:13px;padding:7px 9px}
  .map-filters-pop{
    /* Su mobile: panel posizionato tra l'header (≈54px) e i bottoni in basso.
     * z-index 960 lo mette sopra mode-btn (900), FAB (950), layer-toggle (910). */
    position:fixed;
    top:64px;
    left:8px;right:8px;
    bottom:auto;
    width:auto;
    max-height:calc(100vh - 80px - 240px - env(safe-area-inset-bottom,0px));
    border-radius:16px;
    z-index:960;
  }
}
@media print{.map-filters-col,.map-filters-pop{display:none!important}}