/* =====================================================================
   ux-storico.css — 📜 ARCHIVIO STORICO DEL CATASTO (va con ux-storico.js; prefisso uxs-)
   Classe su <html> (da ux-storico.js): uxs-stretto (scheda storica come foglio in basso: telefono, tablet
   verticale). Variabile --ux-storico-h = altezza del foglio (px locali): con il foglio aperto, --ux-b di
   ux-layout la comprende -> avvisi, colonna destra e controlli della mappa salgono sopra.
   Dentro #map i px sono quelli dello schermo (zoom inverso di ux-layout): le etichette sulla mappa si
   moltiplicano per --ux-z. Fuori da #map i px sono "locali" (la scala dell'interfaccia fa da sola).
   ===================================================================== */

/* foglio in basso: il bordo basso utile di ux-layout (--ux-b) comprende anche il foglio storico */
html.uxs-stretto{
  --ux-b: calc(max(var(--ux-bottom,0px), env(safe-area-inset-bottom,0px)) + var(--ux-sheet-h,0px) + var(--ux-storico-h,0px));
}
html.uxs-stretto #map .leaflet-bottom{ bottom:calc(var(--ux-sheet-h,0px) + var(--ux-storico-h,0px)); }

/* pannellino a destra aperto: i pulsanti «Valvola qui (GPS)» / «Tocca mappa» restano alla sua sinistra (sul telefono in
   orizzontale il pannello copriva «Tocca mappa»). --ux-storico-w = larghezza del pannello (da ux-storico.js) */
html.uxs-pannello-on body #fab-add{
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + var(--ux-dx-w,54px) + 26px + var(--ux-storico-w,340px));
}

/* nelle altre sezioni (Valvole, Contatori...) e durante la misura la scheda resta ma non si vede */
html.uxi-fuori-mappa #ux-storico,
html.ux-misura #ux-storico{ display:none !important; }

/* ---------------------------------------------------------------------
   1) SCHEDA STORICA (#ux-storico): foglio in basso o pannellino a destra
   --------------------------------------------------------------------- */
#ux-storico{
  position:fixed; z-index:1440; display:none; box-sizing:border-box;
  background:#fff; color:#263238;
  font:14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow:0 12px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.05);
  -webkit-tap-highlight-color:transparent;
}
#ux-storico.on{ display:flex; flex-direction:column; }
#ux-storico button{ font-family:inherit; touch-action:manipulation; }
#ux-storico .uxs-dentro{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
#ux-storico .uxs-corpo{ min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:0 14px 12px; }
#ux-storico .uxs-grip{ display:none; }

/* --- foglio in basso (telefono, tablet verticale) --- */
#ux-storico.uxs-foglio{
  left:calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px));
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px));
  bottom:calc(max(var(--ux-bottom,0px), env(safe-area-inset-bottom,0px)) + var(--ux-sheet-h,0px));
  /* mai sopra l'intestazione: al massimo meta' schermo e comunque 70 px di mappa sotto l'header */
  max-height:min(calc(50vh / var(--ux-z,1)), calc(100vh / var(--ux-z,1) - var(--ux-t,0px) - var(--ux-tb,0px) - max(var(--ux-bottom,0px), env(safe-area-inset-bottom,0px)) - var(--ux-sheet-h,0px) - 70px));
  border-radius:18px 18px 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
  animation:uxs-su .22s ease-out;
}
@supports (height:100dvh){
  #ux-storico.uxs-foglio{ max-height:min(calc(50dvh / var(--ux-z,1)), calc(100dvh / var(--ux-z,1) - var(--ux-t,0px) - var(--ux-tb,0px) - max(var(--ux-bottom,0px), env(safe-area-inset-bottom,0px)) - var(--ux-sheet-h,0px) - 70px)); }
}
#ux-storico.uxs-foglio.uxs-tablet{ max-width:600px; margin:0 auto; }
#ux-storico.uxs-foglio .uxs-grip{ display:block; flex:none; width:100%; height:14px; cursor:pointer; position:relative; }
#ux-storico.uxs-foglio .uxs-grip::before{
  content:''; position:absolute; left:50%; top:5px; width:38px; height:4px; margin-left:-19px; border-radius:2px; background:#d5dcd9;
}
#ux-storico.uxs-foglio .uxs-corpo{ padding:0 calc(14px + env(safe-area-inset-right,0px)) 12px calc(14px + env(safe-area-inset-left,0px)); }

/* --- pannellino a destra (computer, iPad orizzontale, telefono orizzontale), accanto alla colonna --- */
#ux-storico.uxs-pannello{
  top:calc(var(--ux-t,0px) + var(--ux-tb,0px) + 10px);
  right:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + var(--ux-dx-w,54px) + 16px);
  width:340px;
  max-height:calc(100vh / var(--ux-z,1) - var(--ux-t,0px) - var(--ux-tb,0px) - var(--ux-b,0px) - 30px);
  border-radius:16px;
  animation:uxs-dx .2s ease-out;
}
@supports (height:100dvh){
  #ux-storico.uxs-pannello{ max-height:calc(100dvh / var(--ux-z,1) - var(--ux-t,0px) - var(--ux-tb,0px) - var(--ux-b,0px) - 30px); }
}
#ux-storico.uxs-pannello.uxs-tocco{ width:360px; }
#ux-storico.uxs-pannello.uxs-tel-orizz{ width:320px; top:calc(var(--ux-t,0px) + 6px); max-height:calc(100vh / var(--ux-z,1) - var(--ux-t,0px) - var(--ux-b,0px) - 12px); }

@keyframes uxs-su{ from{ transform:translateY(40px); opacity:.3; } to{ transform:none; opacity:1; } }
@keyframes uxs-dx{ from{ transform:translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }

/* --- intestazione: 📜 titolo (tocco = riduci / riapri), 🎯, ✕ --- */
#ux-storico .uxs-testa{ display:flex; align-items:center; gap:6px; padding:8px 10px 8px 8px; flex:none; border-bottom:1px solid #eef1f3; }
#ux-storico.uxs-foglio .uxs-testa{ padding-top:0; }
#ux-storico .uxs-tit{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px; border:0; background:transparent; color:inherit;
  text-align:left; padding:3px 4px; border-radius:10px; cursor:pointer; min-height:44px;
}
#ux-storico .uxs-ico{ font-size:20px; flex:none; width:28px; text-align:center; }
#ux-storico .uxs-tt{ display:flex; flex-direction:column; min-width:0; }
#ux-storico .uxs-tt b{ font-size:15.5px; color:#0d47a1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ux-storico .uxs-tt small{ font-size:12px; color:#607d8b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
#ux-storico .uxs-ib{
  flex:none; width:38px; height:38px; border:0; border-radius:11px; background:#eef4fb; color:#0d47a1;
  font-size:16px; font-weight:800; line-height:38px; padding:0; cursor:pointer; text-align:center;
}
#ux-storico .uxs-ib.uxs-x{ background:#37474f; color:#fff; font-size:15px; }
#ux-storico.uxs-tocco .uxs-ib{ width:42px; height:42px; line-height:42px; }
html.ux-mouse #ux-storico .uxs-tit:hover{ background:#f3f7fc; }
html.ux-mouse #ux-storico .uxs-ib:hover{ filter:brightness(.94); }

/* ridotta (scelta, o scheda particella agganciata accanto / sotto): solo l'intestazione */
#ux-storico.uxs-compatta .uxs-corpo{ display:none; }
#ux-storico.uxs-compatta .uxs-testa{ border-bottom:0; }

/* --- contenuto --- */
#ux-storico .uxs-voce{ padding-top:10px; }
#ux-storico .uxs-voce + .uxs-voce{ border-top:1px solid #eceff1; margin-top:10px; }
#ux-storico .uxs-voce-t{ margin:0 0 6px; }
#ux-storico .uxs-vai{
  border:0; background:#eef4fb; color:#0d47a1; border-radius:10px; padding:5px 10px; min-height:36px; cursor:pointer; font-size:13.5px;
}
#ux-storico .uxs-vai span{ color:#607d8b; font-size:12px; }
#ux-storico .uxs-frase{ margin:0 0 4px; font-size:14px; line-height:1.42; }
#ux-storico .uxs-frase b{ color:#0d47a1; }
#ux-storico .uxs-sm{ font-size:12.5px; color:#546e7a; margin:2px 0 6px; line-height:1.4; }
#ux-storico .uxs-lab{ font-size:12.5px; font-weight:800; color:#37474f; margin:8px 0 6px; }
#ux-storico .uxs-ora{ display:flex; flex-wrap:wrap; gap:6px; }
#ux-storico .uxs-b{
  min-height:40px; border:0; border-radius:12px; background:#1565c0; color:#fff; font-size:14px; line-height:1.15;
  padding:6px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
#ux-storico .uxs-b b{ font-size:15px; }
#ux-storico .uxs-b i{ font-style:normal; font-size:11.5px; opacity:.85; }
#ux-storico .uxs-b small{ font-size:12px; font-weight:700; background:rgba(255,255,255,.2); border-radius:999px; padding:1px 7px; }
#ux-storico.uxs-tocco .uxs-b{ min-height:44px; }
#ux-storico .uxs-b:disabled{ opacity:.55; cursor:default; }
html.ux-mouse #ux-storico .uxs-b:not(:disabled):hover{ background:#0d47a1; }
#ux-storico .uxs-b:not(:disabled):active{ transform:scale(.97); }
#ux-storico .uxs-chip{
  display:inline-flex; align-items:center; gap:5px; min-height:40px; box-sizing:border-box;
  border-radius:12px; background:#eceff1; color:#546e7a; font-size:13.5px; padding:6px 11px;
}
#ux-storico .uxs-chip small{ font-weight:700; font-size:12px; }
/* particelle di oggi che c'erano GIA' (fogli accavallati): stesso pulsante, colore piu' tenue */
#ux-storico .uxs-b.uxs-gia{ background:#546e7a; }
html.ux-mouse #ux-storico .uxs-b.uxs-gia:not(:disabled):hover{ background:#37474f; }
#ux-storico .uxs-avv{ background:#fff3e0; color:#bf360c; border-radius:10px; padding:7px 10px; margin:8px 0 2px; font-size:13px; font-weight:600; }
#ux-storico .uxs-nota{ font-size:11.5px; color:#78909c; margin-top:10px; line-height:1.4; }

/* telefono stretto (< 380 px): pulsanti piu' fitti */
@media (max-width:379px){
  #ux-storico .uxs-b{ padding:6px 9px; }
  #ux-storico .uxs-corpo{ padding-left:12px; padding-right:12px; }
}

/* ---------------------------------------------------------------------
   2) SULLA MAPPA: etichette dei contorni storici («40 · storica», «142 · prima»)
   --------------------------------------------------------------------- */
.leaflet-container .leaflet-tooltip.uxs-tip{
  background:rgba(21,101,192,.93); color:#fff; border:0; border-radius:8px;
  font:800 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding:1px 7px; box-shadow:0 1px 3px rgba(0,0,0,.4); white-space:nowrap; pointer-events:none;
}
.leaflet-container .leaflet-tooltip.uxs-tip.uxs-tip-prima{ background:rgba(0,105,92,.93); }
/* etichetta che si accavallerebbe a una gia' visibile (contorni vicini): nascosta finche' non c'e' posto */
.leaflet-container .leaflet-tooltip.uxs-tip.uxs-tip-coperta{ opacity:0 !important; }
.leaflet-container .leaflet-tooltip.uxs-tip::before{ display:none; }
/* scala dell'interfaccia: la mappa e' 1:1 con lo schermo -> etichette ingrandite con font e margini (NON zoom:
   Leaflet le centra misurandole) */
html.ux-zoom .leaflet-container .leaflet-tooltip.uxs-tip{
  font-size:calc(12px * var(--ux-z,1));
  padding:calc(1px * var(--ux-z,1)) calc(7px * var(--ux-z,1));
  border-radius:calc(8px * var(--ux-z,1));
}

/* ---------------------------------------------------------------------
   3) SCHEDA DI UNA PARTICELLA DI OGGI: riga «📜 Storia» (dentro #modal, anche agganciata)
   --------------------------------------------------------------------- */
#modal .uxs-storia{ margin:0 0 10px; }
#modal .uxs-storia-b{
  width:100%; display:flex; align-items:center; gap:8px; text-align:left; box-sizing:border-box;
  border:1px solid #c9d9ee; background:#eef4fb; color:#0d47a1; border-radius:12px; padding:8px 10px;
  font-size:13.5px; line-height:1.35; cursor:pointer; min-height:44px; font-family:inherit;
}
#modal .uxs-storia-ico{ font-size:18px; flex:none; }
#modal .uxs-storia-tx{ flex:1; min-width:0; }
#modal .uxs-storia-az{ flex:none; font-weight:800; font-size:12px; background:#1565c0; color:#fff; border-radius:999px; padding:4px 10px; }
#modal .uxs-storia.uxs-on .uxs-storia-az{ background:#37474f; }
#modal .uxs-storia-det{ font-size:12.5px; color:#455a64; padding:6px 4px 0; line-height:1.45; }
html.ux-mouse #modal .uxs-storia-b:hover{ background:#e3eefa; }