/* =====================================================================
   ux-scala-app.css — adattamenti dell'app (index.html) all'ingrandimento interfaccia (html.ux-zoom)
   Con la scala attiva (zoom su <html>, variabile --ux-z) vh/vw/dvh vengono moltiplicati per la scala:
   qui le misure "a percentuale dello schermo" scritte dall'app tornano giuste con calc(N vh / var(--ux-z,1)).
   TUTTE le regole sono sotto html.ux-zoom: a scala 1 (telefono, tablet, computer normale) non cambia nulla.
   ===================================================================== */

/* ---------- barre e avvisi centrati (index.html: CSS dell'app) ---------- */
html.ux-zoom #valv-allarme{ max-width:calc(92vw / var(--ux-z,1)); }
html.ux-zoom #fascsomma,
html.ux-zoom #carbbar,
html.ux-zoom #catsomma{ max-width:calc(94vw / var(--ux-z,1)); }

/* ---------- registro accessi (dentro la finestra) ---------- */
html.ux-zoom #acc-lista{ max-height:calc(52vh / var(--ux-z,1)); }

/* ---------- finestra generica: riserva se nessun'altra regola (ux-layout / ux-catasto) la limita ---------- */
html.ux-zoom .modal{ max-height:calc(100vh / var(--ux-z,1) - 16px); }
@supports (height:100dvh){
  html.ux-zoom .modal{ max-height:calc(100dvh / var(--ux-z,1) - 16px); }
}

/* ---------- posiziona telecamere: il foglio dal basso deve restare dentro lo schermo (la ✕ in alto) ---------- */
html.ux-zoom #campos{ max-height:calc(78vh / var(--ux-z,1)); }

/* ---------- elementi con stile scritto dall'app in JS ---------- */
/* scheda aereo (foglio di stile creato da aerCard) */
html.ux-zoom #aer-card .ac{ max-height:min(calc(62vh / var(--ux-z,1)), 520px); }
/* pillola "sorvolo" degli aerei */
html.ux-zoom #aer-sorvolo{ max-width:calc(92vw / var(--ux-z,1)); }
/* controlli radar pioggia / vento */
html.ux-zoom #meteo-ctl{ width:min(300px, calc(100vw / var(--ux-z,1) - 90px)); }

/* elenchi scorrevoli con max-height in vh scritto nello style="" (vince solo !important):
   eventi allarme (#al-scroll 60vh), scegli telecamera (#scegli-grid 56vh), passaggi/velocità (#vel-lista 60vh),
   farmacie aperte (48vh), visura storica grezza (50vh) */
/* (anche la forma con lo spazio: se l'app tocca style.* il browser riscrive l'attributo come "max-height: 60vh") */
html.ux-zoom [style*="max-height:48vh"], html.ux-zoom [style*="max-height: 48vh"]{ max-height:calc(48vh / var(--ux-z,1)) !important; }
html.ux-zoom [style*="max-height:50vh"], html.ux-zoom [style*="max-height: 50vh"]{ max-height:calc(50vh / var(--ux-z,1)) !important; }
html.ux-zoom [style*="max-height:56vh"], html.ux-zoom [style*="max-height: 56vh"]{ max-height:calc(56vh / var(--ux-z,1)) !important; }
html.ux-zoom [style*="max-height:60vh"], html.ux-zoom [style*="max-height: 60vh"]{ max-height:calc(60vh / var(--ux-z,1)) !important; }

/* =====================================================================
   COMANDI DELL'APP DENTRO LA MAPPA
   Il contenitore #map ha lo zoom inverso (tasselli nitidi): quello che l'app ci mette dentro resterebbe
   piccolo. Pulsanti e pillole dell'interfaccia tornano alla scala dell'interfaccia (anche top/left/bottom
   in px si ingrandiscono con loro, le percentuali no: restano centrati sulla mappa).
   ===================================================================== */
html.ux-zoom #map > #navi-aggiorna,      /* "🔄 Aggiorna navi" (livello Navi) */
html.ux-zoom #map > .omni-chip,          /* "👤 Nome ✕ tutte" (ricerca per proprietario) */
html.ux-zoom #map > #cat-mie-prog{        /* "carico le tue particelle… x/y" */
  zoom:var(--ux-z,1);
}

/* SIMBOLI SULLA MAPPA: la mappa resta 1:1 con lo schermo (le distanze tra i punti non crescono), quindi se i
   simboli crescessero quanto l'interfaccia si coprirebbero molto di più (a 4K gli impianti FV vicini, a zoom 18,
   si accavallavano dove a scala 1 erano liberi). Crescono un po' meno: --ux-zm = 1 + (scala - 1) × 2/3
   (scala 1,75 -> 1,5; 2 -> 1,67; 1,15 -> 1,1). Restano leggibili e si toccano solo dove si toccavano già. */
html.ux-zoom{ --ux-zm:calc(var(--ux-z, 1) * 2 / 3 + 1 / 3); }

/* etichette-dato sui segnaposti (divIcon con classe fv-ico): ⚡ kW del fotovoltaico, 🌡️ temperatura delle
   stazioni meteo, 🔢 contatori. Ingrandite con transform (NON zoom: il riquadro del segnaposto resta quello
   di Leaflet) attorno al punto d'aggancio = iconAnchor scritto in index.html (fv/contatori 13px, meteo 18px
   dall'alto, al centro in larghezza): restano esattamente sul loro punto anche zoomando la mappa.
   I numeri delle particelle e i nomi dei proprietari (cat-tip, cat-nome-lab) li ingrandisce ux-catasto.css. */
html.ux-zoom #map .fv-ico > .fv-badge,
html.ux-zoom #map .fv-ico > .cont-badge{ transform:scale(var(--ux-zm, 1)); transform-origin:50% 13px; }
html.ux-zoom #map .fv-ico > .meteo-badge{ transform:scale(var(--ux-zm, 1)); transform-origin:50% 18px; }
/* pallini delle valvole (divIcon 26×26, aggancio al centro) e punti delle telecamere (16×16, al centro):
   stessa crescita, attorno al centro = punto d'aggancio */
html.ux-zoom #map .leaflet-marker-icon > .valv-dot,
html.ux-zoom #map .fv-ico > .cam-punto{ transform:scale(var(--ux-zm, 1)); transform-origin:50% 50%; }
/* etichette delle particelle del fascicolo (tooltip fissi al centro): font e margini, NON zoom (Leaflet le
   centra misurandole; al cambio di scala ux-catasto.js le ricentra, come i numeri del catasto) */
html.ux-zoom .leaflet-container .leaflet-tooltip.fasc-etichetta{
  font-size:calc(11px * var(--ux-zm, 1));
  padding:calc(1px * var(--ux-zm, 1)) calc(5px * var(--ux-zm, 1));
  border-radius:calc(5px * var(--ux-zm, 1));
}
/* col mouse, un segnaposto in parte coperto da un vicino viene davanti quando ci si passa sopra
   (Leaflet scrive z-index nello style: serve !important) */
html.ux-zoom.ux-mouse #map .leaflet-marker-icon:hover{ z-index:100000 !important; }

/* =====================================================================
   SECONDA MAPPA: PERCORSO OPERATORE (#perc-map, dentro la vista "percorso")
   Stesso schema della mappa grande: zoom inverso (tasselli a 256 px, clic 1:1), poi altezza, raggio e
   margine moltiplicati per la scala (così resta grande come il resto della pagina); controlli +/- e
   fumetti tornano alla scala dell'interfaccia.
   ===================================================================== */
html.ux-zoom #perc-map{
  zoom:var(--ux-zinv, calc(1 / var(--ux-z,1)));
  height:calc(300px * var(--ux-z,1));
  border-radius:calc(14px * var(--ux-z,1));
  margin-bottom:calc(12px * var(--ux-z,1));
}
html.ux-zoom #perc-map .leaflet-control-container,
html.ux-zoom #perc-map .leaflet-popup-content-wrapper,
html.ux-zoom #perc-map .leaflet-popup-close-button,
html.ux-zoom #perc-map .leaflet-popup-tip-container{ zoom:var(--ux-z,1); }
html.ux-zoom #perc-map .leaflet-popup{ margin-bottom:calc(13px * var(--ux-z,1) + 7px); }