/* =====================================================================
   ux-gruppi.css — 🎨 GRUPPI COLORATI nella «Somma» delle particelle (va con ux-gruppi.js; prefisso uxg-)
   Classi su #fascsomma (da ux-gruppi.js):
     uxg-semplice = un solo gruppo: la pillola di oggi (HTML dell'app) con i ritocchi D2/D3
     uxg-multi    = scheda a gruppi (chip, Σ totale, menu)        uxg-mini = scheda ridotta a pillola
   Classe su <html>: uxg-on = barra visibile; variabile --uxg-h = sua altezza (px locali): avvisi, somma del
   catasto e carburanti salgono sopra di lei (D1). 4.05: uxg-fin = finestra del dettaglio aperta (avviso in alto);
   --uxg-sx-min / --uxg-su = barra spostata a destra / alzata per non coprire i comandi in basso a sinistra;
   --uxg-dx-min = barra alzata sul telefono: si ferma a sinistra della colonna di destra.
   Fuori da #map i px sono "locali" (la scala dell'interfaccia fa da sola); le etichette sulla mappa usano em
   (ux-catasto le ingrandisce con la scala).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) PILLOLA DI OGGI (un solo gruppo)
   D3: larga quanto serve (con left:50% la larghezza "si adattava" solo alla meta' destra dello schermo: iPad 1180 su
   2 righe). Va a capo per BLOCCHI (testo / pulsanti), mai parola per parola.
   --------------------------------------------------------------------- */
html body #fascsomma.uxg-semplice{
  width:max-content;
  flex-wrap:wrap; justify-content:center; row-gap:6px;
}
#fascsomma.uxg-semplice .uxg-testo{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
#fascsomma.uxg-semplice .uxg-testo b{ white-space:nowrap; }
#fascsomma.uxg-semplice > button{ white-space:nowrap; flex:0 0 auto; }
#fascsomma.uxg-semplice .uxg-ripr{ background:#ffb300; color:#3e2723; }
#fascsomma.uxg-semplice .uxg-ripr small{ font-weight:600; opacity:.8; }
/* 4.05: «↺ Riprendi» resta anche dopo il primo tocco, corto (i gruppi salvati non spariscono dalla vista) */
#fascsomma.uxg-semplice .uxg-ripr-c{ background:rgba(255,179,0,.9); }
/* telefono in verticale: solo «↺» (con la scritta la riga dei pulsanti andava su 3 righe) */
html.ux-phone.ux-portrait #fascsomma.uxg-semplice .uxg-ripr-c{ min-width:40px; font-size:15px; }
html.ux-phone.ux-portrait #fascsomma.uxg-semplice .uxg-ripr-t{ display:none; }
/* schermo largo / telefono in orizzontale: la colonna di destra arriva in fondo -> la pillola (centrata sulla mappa)
   resta piu' stretta della mappa meno la colonna da entrambi i lati */
html.ux-wide body #fascsomma.uxg-semplice,
html.ux-phone.ux-landscape body #fascsomma.uxg-semplice{
  max-width:calc(100vw / var(--ux-z,1) - var(--ux-rail-w,0px) - var(--ux-panel-w,0px) - 2 * var(--ux-dx-w) - 28px);
}
/* D2 telefono in verticale: testo sopra, pulsanti sotto («✓ Fine» sempre dentro lo schermo) */
html.ux-phone.ux-portrait body #fascsomma.uxg-semplice{ border-radius:18px; max-width:calc(100vw - 20px); padding:8px 12px; }
html.ux-phone.ux-portrait #fascsomma.uxg-semplice .uxg-testo{ flex:1 0 100%; justify-content:center; flex-wrap:wrap; row-gap:2px; }
html.ux-phone.ux-portrait #fascsomma.uxg-semplice .uxg-quando{ display:none; }

/* ---------------------------------------------------------------------
   2) SCHEDA A GRUPPI: centrata tra la barra a sinistra e la colonna di destra (mai sotto la colonna), sempre
   sopra «Valvola qui» / «Tocca mappa» (stesso bottom della pillola di oggi), cresce verso l'alto
   --------------------------------------------------------------------- */
html body #fascsomma.uxg-multi{
  /* bordi sinistro e destro (px locali): la scheda si centra tra i due e non e' mai piu' larga dello spazio
     (con i chip che scorrono la larghezza "naturale" sarebbe quella di tutti i chip in fila: iPhone fuori schermo).
     4.05: --uxg-sx-min (ux-gruppi.js) = a destra della pillola «🗺️ Catasto» / delle legende in basso a sinistra
     quando stanno alla stessa altezza; --uxg-su = barra alzata sopra di loro se a destra non c'e' posto (telefono) */
  --uxg-sx:max(calc(var(--ux-rail-w,0px) + env(safe-area-inset-left,0px) + 10px), var(--uxg-sx-min,0px));
  bottom:calc(var(--ux-b) + var(--ux-fab-h) + 12px + var(--uxg-su,0px));
  --uxg-dx:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + var(--ux-dx-w) + 16px);
  --uxg-max:760px;
  left:var(--uxg-sx); right:var(--uxg-dx);
  transform:none; width:fit-content; margin:0 auto;
  max-width:min(var(--uxg-max), calc(100vw / var(--ux-z,1) - var(--uxg-sx) - var(--uxg-dx)));
  flex-direction:column; align-items:stretch; gap:6px;
  border-radius:16px; padding:7px; background:rgba(38,50,56,.96); font-size:13px;
  -webkit-tap-highlight-color:transparent;
}
/* pannellino storico a destra: la scheda resta alla sua sinistra (come «Valvola qui») */
html.uxs-pannello-on body #fascsomma.uxg-multi{
  --uxg-dx:calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + var(--ux-dx-w) + 26px + var(--ux-storico-w,340px));
}
/* misura col pannellino a destra fino in basso (--uxm-occ = spazio occupato dal bordo destro) */
html.ux-misura.uxm-occ body #fascsomma.uxg-multi{ --uxg-dx:calc(var(--uxm-occ,0px) + 10px); }
#fascsomma.uxg-multi button{ touch-action:manipulation; font-family:inherit; }
#fascsomma.uxg-multi button:focus-visible,
#fascsomma.uxg-semplice button:focus-visible{ outline:2px solid #ffb300; outline-offset:2px; }

/* pallino col numero (barra, menu, dettaglio) */
.uxg-sw{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  font-style:normal; font-weight:800; font-size:14px; line-height:1;
  box-shadow:0 0 0 2px rgba(255,255,255,.85);
}
/* su fondo chiaro (chip attivo, menu, dettaglio) l'anello e' scuro: il ③ Bianco resta visibile (T3) */
#fascsomma .uxg-chip.uxg-att .uxg-sw, .uxg-menu .uxg-sw, .uxg-det .uxg-sw{ box-shadow:0 0 0 2px #37474f; }

/* chip dei gruppi */
#fascsomma .uxg-chips{
  position:relative; display:flex; gap:6px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding:1px;
}
#fascsomma .uxg-chips::-webkit-scrollbar{ display:none; }
#fascsomma .uxg-chip{
  flex:0 0 auto; display:flex; align-items:center; gap:7px; min-height:44px; padding:4px 11px 4px 6px;
  border:0; border-radius:12px; background:rgba(255,255,255,.10); color:#fff; text-align:left; cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14); font-weight:700;
}
html.ux-mouse #fascsomma .uxg-chip:not(.uxg-att):hover{ background:rgba(255,255,255,.18); }
/* gruppo attivo: fondo bianco e contorno AMBRA (come «✓ Somma» accesa), non il colore del gruppo (T3) */
#fascsomma .uxg-chip.uxg-att{ background:#fff; color:#263238; box-shadow:inset 0 0 0 3px #ffb300, 0 2px 8px rgba(0,0,0,.35); }
#fascsomma .uxg-tx{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; min-width:0; }
#fascsomma .uxg-tx b{ font-size:13px; display:block; white-space:nowrap; }
#fascsomma .uxg-tx small{ font-size:11.5px; font-weight:600; opacity:.85; }
#fascsomma .uxg-nm{ display:inline-block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
#fascsomma .uxg-chip.uxg-add{ padding:4px 15px; font-size:21px; font-weight:700; justify-content:center; }

/* 4.05: segni dei gruppi scorsi fuori dalla fila (telefono, iPad verticale): «‹ ••» a sinistra, «•• ›» a destra
   (un pallino col colore di ogni gruppo nascosto); tocco = la fila scorre da quella parte */
#fascsomma .uxg-chips-w{ position:relative; min-width:0; }
#fascsomma .uxg-fr{
  position:absolute; top:1px; bottom:1px; z-index:2; display:flex; align-items:center; gap:4px;
  padding:0 7px; border:0; border-radius:12px; background:#3c4a50; color:#fff; cursor:pointer;
  font-size:22px; font-weight:800; line-height:1;
}
#fascsomma .uxg-fr[hidden]{ display:none; }
#fascsomma .uxg-fr-sx{ left:0; box-shadow:10px 0 10px -2px rgba(38,50,56,.95); }
#fascsomma .uxg-fr-dx{ right:0; box-shadow:-10px 0 10px -2px rgba(38,50,56,.95); }
#fascsomma .uxg-fr-p{ display:grid; grid-template-columns:repeat(2, 9px); gap:3px; }
#fascsomma .uxg-fr-p i{ display:block; width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(255,255,255,.85); }
/* importo del Σ dentro «📋»: si vede solo col telefono in orizzontale (sotto) */
#fascsomma .uxg-sig{ display:none; }

/* riga sotto: Σ totale, Annulla, dettaglio, menu, Fine */
#fascsomma .uxg-riga{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
#fascsomma .uxg-tot{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:4px; font-size:13.5px; }
#fascsomma .uxg-tot .uxg-corto{ display:none; }
#fascsomma .uxg-riga button{ min-height:36px; flex:0 0 auto; white-space:nowrap; }
html.ux-touch #fascsomma .uxg-riga button{ min-height:40px; min-width:40px; }
#fascsomma .uxg-riga .uxg-tre{ display:inline-flex; align-items:center; justify-content:center; line-height:1; padding:6px 11px; }
#fascsomma .uxg-ico{ display:block; }
#fascsomma .uxg-riga .uxg-ann{ background:#ffb300; color:#3e2723; }

/* chip che scorrono: «＋» resta sempre in vista in fondo alla fila */
#fascsomma .uxg-chips .uxg-add{ position:sticky; right:0; z-index:1; background:#3c4a50; box-shadow:-10px 0 10px -2px rgba(38,50,56,.95); }
/* schermo largo con molti gruppi: i chip vanno a capo (al massimo 2 righe) invece di scorrere */
html.ux-wide body #fascsomma.uxg-multi{ --uxg-max:1100px; }
html.ux-wide #fascsomma .uxg-chips .uxg-add{ position:static; background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14); }
html.ux-wide #fascsomma .uxg-chips{ flex-wrap:wrap; overflow:visible; }

/* telefono: chip piu' bassi, pulsanti a sola icona, Σ abbreviato */
html.ux-phone #fascsomma .uxg-chip{ min-height:40px; padding:3px 9px 3px 5px; }
html.ux-phone #fascsomma .uxg-sw{ width:24px; height:24px; font-size:13px; }
html.ux-phone #fascsomma .uxg-nm{ max-width:110px; }
html.ux-phone #fascsomma .uxg-lungo{ display:none; }
html.ux-phone #fascsomma .uxg-tot .uxg-corto{ display:inline; }
/* telefono in verticale: la colonna destra non arriva in fondo -> la scheda usa tutta la larghezza */
html.ux-phone.ux-portrait body #fascsomma.uxg-multi{ --uxg-dx:max(calc(var(--ux-panel-w,0px) + env(safe-area-inset-right,0px) + 10px), var(--uxg-dx-min,0px)); }
/* telefono in orizzontale (mappa libera ~80 px): UNA riga sola. 4.05: sui chip non attivi gli ettari (senza tumoli),
   il Σ totale dentro «📋» (prima non si vedeva mai) */
html.ux-phone.ux-landscape body #fascsomma.uxg-multi{ flex-direction:row; align-items:center; padding:5px; gap:6px; }
html.ux-phone.ux-landscape #fascsomma .uxg-chips-w{ flex:1 1 auto; min-width:0; }
html.ux-phone.ux-landscape #fascsomma .uxg-chip:not(.uxg-att) .uxg-tm,
html.ux-phone.ux-landscape #fascsomma .uxg-chip:not(.uxg-att) .uxg-al{ display:none; }
html.ux-phone.ux-landscape #fascsomma .uxg-tot{ display:none; }
html.ux-phone.ux-landscape #fascsomma .uxg-riga{ flex:0 0 auto; }
html.ux-phone.ux-landscape #fascsomma .uxg-sig{ display:inline; margin-left:5px; font-size:13px; font-weight:800; }

/* scheda ridotta (telefono a mano, misura accesa): pillola [(3) Lotto limoni · Σ 13,96 ha ▴] */
html body #fascsomma.uxg-multi.uxg-mini{ padding:3px; border-radius:999px; }
#fascsomma .uxg-mini-b{
  display:flex; align-items:center; gap:8px; min-height:40px; padding:3px 14px 3px 5px; border:0; border-radius:999px;
  background:transparent; color:#fff; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer;
}
#fascsomma .uxg-mini-b .uxg-sw{ width:26px; height:26px; }
#fascsomma .uxg-mini-f{ opacity:.8; font-size:12px; }

/* ---------------------------------------------------------------------
   3) MENU DEL GRUPPO: dentro la barra, sopra di lei (sparisce con lei nelle altre sezioni);
   l'altezza massima la mette ux-gruppi.js (spazio fino all'header), poi scorre
   --------------------------------------------------------------------- */
#fascsomma .uxg-menu{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; box-sizing:border-box;
  width:max-content; min-width:250px; max-width:min(340px, calc(100vw / var(--ux-z,1) - 20px));
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:6px; border-radius:14px; background:#fff; color:#263238; text-align:left; font-size:14px; font-weight:600;
  box-shadow:0 10px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);
}
#fascsomma .uxg-menu button{
  display:block; width:100%; min-height:42px; padding:9px 12px; border:0; border-radius:9px;
  background:transparent; color:#263238; text-align:left; font-size:14px; font-weight:600; cursor:pointer;
}
html.ux-touch #fascsomma .uxg-menu button{ min-height:44px; }
html.ux-mouse #fascsomma .uxg-menu button:not([disabled]):hover{ background:#eceff1; }
#fascsomma .uxg-menu button:active{ background:#e0e6e9; }
#fascsomma .uxg-menu button[disabled]{ opacity:.4; cursor:default; }
#fascsomma .uxg-m-tit{
  display:flex; align-items:center; gap:9px; padding:6px 8px 9px; margin-bottom:3px;
  border-bottom:1px solid #eceff1; font-size:13.5px; line-height:1.3; font-weight:600;
}
#fascsomma .uxg-m-tit small{ color:#607d8b; font-weight:600; }
#fascsomma .uxg-m-sep{
  padding:9px 12px 3px; margin-top:3px; border-top:1px solid #eceff1;
  font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#78909c;
}

/* ---------------------------------------------------------------------
   4) DETTAGLIO (finestra mobile dell'app): una sezione per gruppo + totale generale, Copia / CSV
   --------------------------------------------------------------------- */
.uxg-det .uxg-sw{ width:24px; height:24px; font-size:13px; }
.uxg-det-g{ display:flex; align-items:center; gap:9px; margin:16px 0 4px; font-size:14px; line-height:1.3; color:#263238; }
.uxg-det-g:first-child{ margin-top:2px; }
.uxg-det-g small{ color:#78909c; font-weight:600; }
.uxg-det-vuoto{ color:#90a4ae; font-size:13px; padding:4px 0 2px 33px; }
.uxg-det-tot{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:14px; padding-top:9px; border-top:3px double #37474f; font-size:16px;
}
.uxg-det-az{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.uxg-det-az button{
  border:0; border-radius:10px; background:#eceff1; color:#263238; padding:9px 14px; min-height:40px;
  font-weight:700; font-size:13px; cursor:pointer; font-family:inherit;
}
html.ux-mouse .uxg-det-az button:hover{ background:#dfe5e8; }

/* titolo della finestra del dettaglio di un gruppo: pallino piccolo */
.finestra-head .uxg-sw{ width:22px; height:22px; font-size:12px; vertical-align:middle; margin:0 2px; }

/* ---------------------------------------------------------------------
   5) ETICHETTE SULLA MAPPA: pallino col numero del gruppo prima del testo (em: segue la scala).
   4.05: l'etichetta dell'app non si riscrive piu' (era lentissimo con migliaia di particelle): ux-gruppi.js mette
   data-uxg="N" sull'elemento e il pallino lo disegna ::before, FUORI dal riquadro (a sinistra): la misura
   dell'etichetta non cambia e Leaflet non deve ricentrarla. (L'app nasconde il ::before delle sue etichette: qui
   la regola e' piu' specifica.)
   --------------------------------------------------------------------- */
.fasc-etichetta[data-uxg]::before{
  content:attr(data-uxg); display:block; position:absolute; right:100%; top:50%; transform:translateY(-50%);
  box-sizing:border-box; min-width:1.45em; height:1.45em; padding:0 .2em; margin-right:.3em;
  border:0; border-radius:.75em; line-height:1.45em; text-align:center;
  font-size:.95em; font-weight:800; font-style:normal; box-shadow:0 0 0 1.5px #fff; pointer-events:none;
}
.fasc-etichetta[data-uxg="1"]::before{ background:#1a237e; color:#fff; }
.fasc-etichetta[data-uxg="2"]::before{ background:#ffd600; color:#212121; }
.fasc-etichetta[data-uxg="3"]::before{ background:#ffffff; color:#212121; }
.fasc-etichetta[data-uxg="4"]::before{ background:#00b8d4; color:#212121; }
.fasc-etichetta[data-uxg="5"]::before{ background:#e91e63; color:#fff; }
.fasc-etichetta[data-uxg="6"]::before{ background:#64dd17; color:#212121; }
.fasc-etichetta[data-uxg="7"]::before{ background:#7c4dff; color:#fff; }
.fasc-etichetta[data-uxg="8"]::before{ background:#ff8a80; color:#212121; }

/* ---------------------------------------------------------------------
   6) CON LA BARRA VISIBILE (html.uxg-on, --uxg-h = sua altezza)
   D1: l'avviso finiva SOTTO la pillola (stessa altezza, z-index 2000 contro 4101): ora sta sopra di lei.
   Somma del catasto e carburanti salgono sopra la barra (prima quote fisse +60 / +108 pensate per 46 px:
   con la pillola alta 46 restano identiche).
   La finestrella del dettaglio non scende sotto la barra.
   --------------------------------------------------------------------- */
html.uxg-on .toast{ bottom:calc(var(--ux-b) + var(--ux-fab-h) + var(--uxg-h,0px) + 20px); }
html.uxg-on.ux-barra-conferma .toast{
  bottom:calc(var(--ux-b) + max(var(--ux-pb-h,0px) + 20px, var(--ux-fab-h) + var(--uxg-h,0px) + 20px));
}
/* 4.05: finestra del dettaglio aperta (html.uxg-fin): tra la finestra e la barra non c'e' posto, l'avviso copriva
   «📋 Copia» / «⬇️ CSV» in fondo alla finestra -> va in alto, sopra l'header e sopra la barra degli elenchi
   (z-index 4100) ma sotto gli allarmi (4200); non prende i tocchi */
html.uxg-on.uxg-fin .toast,
html.uxg-on.uxg-fin.ux-barra-conferma .toast{ top:calc(env(safe-area-inset-top,0px) + 8px); bottom:auto; z-index:4150; }
html.uxg-on body #catsomma{ bottom:calc(var(--ux-b) + var(--ux-fab-h) + var(--uxg-h,46px) + 14px); }
html.uxg-on body #carbbar{ bottom:calc(var(--ux-b) + var(--ux-fab-h) + var(--uxg-h,46px) + 62px); }
html.uxg-on .finestra-body{
  max-height:max(140px, min(calc(62vh / var(--ux-z,1)), 520px, calc(100vh / var(--ux-z,1) - var(--ux-t) - var(--ux-tb,0px) - var(--ux-b) - var(--ux-fab-h) - var(--uxg-h,0px) - 110px)));
}
@supports (height:100dvh){
  html.uxg-on .finestra-body{
    max-height:max(140px, min(calc(62vh / var(--ux-z,1)), 520px, calc(100dvh / var(--ux-z,1) - var(--ux-t) - var(--ux-tb,0px) - var(--ux-b) - var(--ux-fab-h) - var(--uxg-h,0px) - 110px)));
  }
}