: la riga viene sostituita (innerHTML) ad
ogni cambio filtro per ricalcolare le medie sul sottoinsieme visibile, un top inline sui vecchi
andrebbe perso. Padding orizzontale 14px = stesso della regola generica "td" (riga 137,
usata dalle righe dati in tbody): un valore diverso (avevamo 10px) sfasava i valori allineati a
destra vs le righe dati. */
#au-sit-list .sit-avg td { position: sticky; top: var(--sit-avg-top, 0); z-index: 2; background: var(--navy); color: #fff;
font-weight: 700; font-size: 12px; padding: 6px 14px; border-bottom: 2px solid var(--navy); white-space: nowrap; }
/* Stima Rese: riga Totale (tfoot) fissa in basso durante lo scroll interno (solo la SR ha tfoot) */
.au-res-table tfoot td { position: sticky; bottom: 0; background: var(--gray-1); z-index: 1; }
/* Ricezione Uve > Lista lotti: riga TOTALI sticky IN ALTO (2a riga , come Confronto Campagne
.cf-tot / Giacenza .c-gia-tot: sfondo navy, testo bianco grassetto, top calcolato a runtime via
--ru-lotti-tot-top = altezza dell'header, così non si sovrappone alla riga dei titoli colonne). */
#ru-lotti-tablewrap .au-res-table thead th { z-index: 4; }
#ru-lotti-tablewrap .au-res-table .ru-lotti-tot td {
position: sticky; top: var(--ru-lotti-tot-top, 34px); z-index: 3;
background: var(--navy); color: #fff; font-weight: 700; white-space: nowrap;
border-bottom: 2px solid var(--navy); }
/* Giacenza legale (#c-leg-tablewrap) e Cruscotto Δ% (#c-crus-tablewrap): riga TOTALI sticky sotto
l'header — STESSO pattern di Giacenza RC (.c-gia-tot) e Lista lotti (.ru-lotti-tot): 2a riga del
, sfondo navy/testo bianco grassetto, top calcolato a RUNTIME (--tot-top = altezza della riga
dei titoli, che su schermi stretti puo' andare a capo). Serve il wrapper con max-height: senza un
contesto di scroll interno lo sticky non ha nulla rispetto a cui restare fermo (e' il motivo per cui
in Lista lotti la riga totali non si vedeva). */
#c-leg-tablewrap .au-res-table thead th,
#c-crus-tablewrap .au-res-table thead th { z-index: 4; }
#c-leg-tablewrap .au-res-table .tot-row td,
#c-crus-tablewrap .au-res-table .tot-row td {
position: sticky; top: var(--tot-top, 34px); z-index: 3;
background: var(--navy); color: #fff; font-weight: 700; white-space: nowrap;
border-bottom: 2px solid var(--navy); }
/* Lista lotti: celle compatte. Di default UNA riga (nowrap) per altezze uniformi + scroll
orizzontale. Le colonne corte (.ru-c-narrow: Data, Ora, N°Vend., Netto, Resa %, hl, Babo°)
restano strette. Le tre larghe (.ru-c-wrap: Campo, Clone, Cod. origine) invece VANNO A CAPO
oltre una max-width ragionevole (tarata sulla lunghezza media dei valori reali), spezzando a
PAROLA e mai lettera-per-lettera (overflow-wrap:break-word + word-break:normal). */
#ru-lotti-tablewrap .au-res-table th,
#ru-lotti-tablewrap .au-res-table td { padding: 6px 8px; }
#ru-lotti-tablewrap .au-res-table tbody td { white-space: nowrap; }
#ru-lotti-tablewrap .au-res-table th.ru-c-narrow,
#ru-lotti-tablewrap .au-res-table td.ru-c-narrow { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
#ru-lotti-tablewrap .au-res-table th.ru-c-wrap,
#ru-lotti-tablewrap .au-res-table td.ru-c-wrap {
white-space: normal; word-break: normal; overflow-wrap: break-word; }
/* CAMPO: colonna a larghezza NATURALE come nella tabella Riepilogo Vendemmia (font default, nessun
cap/wrap) — vedi lista_lotti_campo_width_check.js che MISURA l'uguaglianza. (Prima aveva
.ru-c-campo con max-width:150px + wrap + font 12px, piu' stretta del Riepilogo.) */
#ru-lotti-tablewrap .au-res-table td.ru-c-clone { max-width: 120px; }
#ru-lotti-tablewrap .au-res-table td.ru-c-cod { max-width: 180px; }
#ru-lotti-tablewrap .au-res-table td.ru-c-cod .vorigine {
display: inline; white-space: normal; word-break: normal; overflow-wrap: break-word; }
/* Cruscotto > Controllo: SOLO la cella nome-vasca e' cliccabile (-> dettaglio vasca); il resto
della riga non e' cliccabile, cosi' lo scroll orizzontale resta libero. */
/* colonna Vasca/Origine un po' piu' larga (~2 caratteri) cosi' il codice origine ci sta meglio;
se comunque non entra, va a capo (word-break sul contenuto, nessun troncamento). */
.au-res-table td.ctrl-vasca-cell { cursor: pointer; min-width: 11ch; }
.au-res-table td.ctrl-vasca-cell:hover { background: var(--gray-1); }
.ctrl-vasca-link { color: var(--navy); text-decoration: underline; }
.au-res-table td.ctrl-vasca-cell:hover .ctrl-vasca-link { text-decoration: none; }
/* Controllo (Cruscotto): 1a colonna Vasca/Origine FISSA durante lo scroll orizzontale (scoped a
#riep-view per non toccare le altre au-res-table). Header sticky-top gia' esistente (z 2); la
cella d'angolo prende z 4, le celle corpo z 3, cosi' restano sopra alle altre colonne. Sfondo
opaco per non far trasparire le celle sotto; l'hover di riga colora anche la cella fissa. */
#riep-view .au-res-table thead th:first-child { position: sticky; left: 0; z-index: 4; }
#riep-view .au-res-table tbody td.ctrl-vasca-cell { position: sticky; left: 0; z-index: 3; background: var(--white); }
#riep-view .au-res-table tbody tr:hover td.ctrl-vasca-cell { background: var(--blue-mid); }
/* Header ordinabili (Vasca / Inizio FA): cursore + hover; indicatore ▲/▼ gestito via JS. */
#riep-view .au-res-table th.ctrl-sortable { cursor: pointer; user-select: none; }
#riep-view .au-res-table th.ctrl-sortable:hover { background: var(--gray-1); }
/* Controllo (Cruscotto): tabella un po' piu' compatta — padding/font ridotti (senza tagliare i
contenuti); colonna "Ultima temp" un filo piu' stretta (header su 2 righe via ). */
#riep-view .au-res-table thead th { padding: 6px 6px; }
#riep-view .au-res-table tbody td { padding: 6px 6px; font-size: 12px; }
#riep-view .au-res-table th.ctrl-col-temp { min-width: 58px; width: 58px; }
/* Registro Cantina > Giacenza: tabella vera — header sticky (base .au-res-table) + riga
TOTALI sticky subito sotto l'header (2a riga , stile .sit-avg/.cf-tot: sfondo navy,
top calcolato a runtime via --c-gia-tot-top) + 1a colonna (Vasca) sticky in orizzontale
(stesso pattern di #riep-view/Controllo, qui su classe dedicata .c-gia-vcell invece di
:first-child perche' la riga TOTALI usa
, non
, e non deve essere toccata da questa
regola). Scala z-index (angolo header piu' in alto di tutto, poi angolo TOTALI, poi le celle
"semplici" di ciascuna riga sticky, poi la colonna Vasca del corpo): replica ed estende
l'ordine gia' validato in #riep-view (dove basta un solo livello extra, header 4 > colonna
corpo 3) con un livello in piu' per la riga TOTALI.
Testato: scroll verticale+orizzontale con le 3 sticky attive insieme, desktop e mobile. */
#c-gia-tablewrap .au-res-table thead tr:first-child th:first-child { position: sticky; left: 0; z-index: 6; }
#c-gia-tablewrap .au-res-table thead th { z-index: 4; padding: 6px 8px; white-space: nowrap; }
#c-gia-tablewrap .au-res-table .c-gia-tot td {
position: sticky; top: var(--c-gia-tot-top, 0); z-index: 3;
background: var(--navy); color: #fff; font-weight: 700; white-space: nowrap;
border-bottom: 2px solid var(--navy);
}
#c-gia-tablewrap .au-res-table .c-gia-tot td:first-child { left: 0; z-index: 5; }
#c-gia-tablewrap .au-res-table tbody td.c-gia-vcell { position: sticky; left: 0; z-index: 2; background: var(--white); font-weight: 600; }
#c-gia-tablewrap .au-res-table tbody tr:hover td.c-gia-vcell { background: var(--blue-mid); }
#c-gia-tablewrap .au-res-table th.ctrl-sortable { cursor: pointer; user-select: none; }
#c-gia-tablewrap .au-res-table th.ctrl-sortable:hover { background: var(--gray-1); }
#c-gia-tablewrap .au-res-table tbody td { padding: 6px 8px; font-size: 12px; white-space: nowrap; }
#c-gia-tablewrap .c-gia-fill { font-size: 11px; font-weight: 600; }
#c-gia-tablewrap .c-gia-fill-vuota { color: var(--gray-4); }
#c-gia-tablewrap .c-gia-fill-scolma { color: var(--gray-5); }
#c-gia-tablewrap .c-gia-fill-piena { color: var(--red); }
#c-gia-tablewrap .c-gia-fill-errore { color: #fff; background: var(--red); padding: 2px 6px; border-radius: 4px; }
#c-gia-tablewrap .c-gia-analisi-link, #c-gia-tablewrap .c-gia-op-link { color: var(--navy); text-decoration: underline; }
/* Codice origine: puo' essere molto lungo (es. componenti aggregati con '+' e '%') — va a capo
dentro una larghezza massima invece di allargare tutta la tabella (le altre colonne restano
nowrap, vedi regola sopra; questa la sovrascrive solo per questa colonna). Condivisa con lo
Storico (stessa classe .c-gia-codice, riusata li' per lo stesso motivo). Larghezza raddoppiata
(400px->800px) su richiesta di Hayo, sessione 15. */
#c-gia-tablewrap .au-res-table td.c-gia-codice, #c-st-tablewrap .au-res-table td.c-gia-codice { white-space: normal; max-width: 800px; word-break: break-word; overflow-wrap: anywhere; }
/* Cap a 24 CARATTERI sulla colonna Codice origine della GIACENZA [richiesta di Hayo, 26/07]: oltre
quella misura il testo va a capo invece di dilatare la colonna.
⚠️ Il cap sta sullo SPAN, non sul
: una max-width su una cella in `table-layout:auto` la
decide il browser come vuole (lezione gia' pagata su questo progetto — il layout si MISURA, non si
greppa), mentre un inline-block la rispetta sempre. Il
si stringe da solo, perche' il suo
contenuto non puo' piu' superare i 24ch.
Lo Storico condivide la classe .c-gia-codice ma NON lo span: resta com'era (800px), non e' stato
chiesto di toccarlo. */
#c-gia-tablewrap .au-res-table td.c-gia-codice .c-gia-cod-cap { display: inline-block; max-width: 24ch; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
/* Sub-tab Riepilogo (matrice vino×annata), montato nello STESSO #c-gia-tablewrap: eredita header/
totali/1a-colonna sticky. Extra: righe-gruppo cliccabili col caret, sotto-riga "n vasche" tenue,
righe-vasca (espansione) con sfondo leggero + testo piccolo per distinguerle dalle righe-gruppo. */
#c-gia-tablewrap .c-riep-grow { cursor: pointer; }
#c-gia-tablewrap .c-riep-grow:hover td { background: var(--gray-1); }
#c-gia-tablewrap .c-riep-grow:hover td.c-gia-vcell { background: var(--blue-mid); }
/* Colonna Vino: il nome va SEMPRE a capo (mai troncare/sforare su Massa). La specificita' DEVE battere
"#c-gia-tablewrap .au-res-table tbody td { white-space: nowrap }" (1,1,2) -> uso la stessa forma
con la classe .c-riep-vino in piu' (1,2,2). */
#c-gia-tablewrap .au-res-table tbody td.c-riep-vino { font-weight: 600; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
#c-gia-tablewrap .au-res-table thead th.c-riep-vino-th { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
#c-gia-tablewrap .au-res-table .c-gia-tot td#c-riep-tot-label { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
/* Riepilogo — colonna Vino: LARGHEZZA RESPONSIVE (richiesta Hayo). Desktop (>700px) = larghezza
naturale, nessun vincolo. Mobile (<=700px) = 12ch = "BRUNELLO DI ", col nome che va a capo.
🔴 PERCHE' IL VINCOLO STA SULLE
E NON SULLE CELLE — non rifarlo "piu' semplice" sulle celle:
in `table-layout: auto` (il default) `width`/`max-width` su
/
sono SUGGERIMENTI che
l'algoritmo di distribuzione delle larghezze puo' ignorare, e li ignorava. La versione precedente
aveva `th.c-riep-vino-th, td.c-riep-vino { width:12ch; max-width:12ch }` dentro questa stessa media
query: applicata all'elemento (computed max-width = 79.94px) ma la colonna si renderizzava a
82.3px, cioe' PIU' LARGA del proprio max-width. Misurato a 375px: togliendo del tutto la regola il
rendering non cambiava di un pixel -> era INERTE. L'unica leva che il browser onora e'
+
`table-layout: fixed` (misurato: 79.94px = 12ch esatti, delta -0.01px).
⚠️ SCOPING OBBLIGATORIO su .c-riep-table: #c-gia-tablewrap ospita ANCHE la tabella Giacenza
(cDrawGiacenzaTable), che NON ha
— un `table-layout: fixed` non scopato la
spaccherebbe (colonne tutte uguali).
⚠️ font-size/font-weight sulle
: `ch` si risolve sul font DELL'ELEMENTO. Senza questi, il `ch`
della
userebbe il font della TABELLA (14px, normale) e non quello della CELLA (12px, 600) ->
colonna sbagliata di ~10px (misurato: 106.6px invece di 95.9px). Devono restare allineati a
`#c-gia-tablewrap .au-res-table tbody td` (12px) e a `td.c-riep-vino` (600).
`width: max-content` + `min-width: 100%`: con fixed la tabella non si auto-dimensiona sul contenuto,
quindi max-content la tiene larga quanto le colonne (scroll orizzontale preservato) e min-width la
fa comunque riempire il contenitore quando le annate sono poche. */
@media (max-width: 700px) {
#c-gia-tablewrap .au-res-table.c-riep-table { table-layout: fixed; width: max-content; min-width: 100%; }
#c-gia-tablewrap .au-res-table.c-riep-table col.c-riep-col-vino { font-size: 12px; font-weight: 600; width: calc(12ch + 16px); }
#c-gia-tablewrap .au-res-table.c-riep-table col.c-riep-col-ms { font-size: 12px; width: 8ch; }
#c-gia-tablewrap .au-res-table.c-riep-table col.c-riep-col-ann,
#c-gia-tablewrap .au-res-table.c-riep-table col.c-riep-col-tot { font-size: 12px; width: 14ch; }
}
#c-gia-tablewrap .c-riep-caret { display: inline-block; width: 1.1em; color: var(--gray-4); }
#c-gia-tablewrap .c-riep-nv { font-size: 10px; color: var(--gray-4); font-weight: 400; }
#c-gia-tablewrap .c-riep-vrow td { background: var(--gray-1); font-size: 11px; color: var(--gray-6); }
#c-gia-tablewrap .c-riep-vrow td.c-gia-vcell { background: var(--gray-1); }
#c-gia-tablewrap .c-riep-vcelltxt { white-space: nowrap; }
#c-gia-tablewrap .c-riep-vmeta { font-size: 10px; color: var(--gray-4); }
/* Colonna «Totale» (somma di tutte le annate): leggermente enfatizzata (grassetto + separatore a sx). */
#c-gia-tablewrap .au-res-table td.c-riep-gtot { font-weight: 600; border-left: 1px solid var(--gray-2); }
#c-gia-tablewrap .au-res-table thead tr:first-child th:last-child { border-left: 1px solid var(--gray-2); }
/* Colonna MS. (Massa) = 2a colonna STICKY, congelata insieme a Vino durante lo scroll orizzontale.
left = larghezza REALE della colonna Vino misurata a runtime (--c-riep-massa-left), fallback 12ch.
z-index appena SOTTO la colonna Vino corrispondente (header 6>5, tot 5>4, corpo 3>2) cosi' Vino
copre MS. se mai si toccassero; bg opaco per non far trasparire le celle-annata sotto. */
#c-gia-tablewrap .au-res-table thead tr:first-child th.c-riep-massa { position: sticky; left: var(--c-riep-massa-left, 12ch); z-index: 5; background: var(--white); }
#c-gia-tablewrap .au-res-table .c-gia-tot td.c-riep-massa { left: var(--c-riep-massa-left, 12ch); z-index: 4; }
#c-gia-tablewrap .au-res-table tbody td.c-riep-massa { position: sticky; left: var(--c-riep-massa-left, 12ch); z-index: 3; background: var(--white); }
#c-gia-tablewrap .au-res-table tbody tr.c-riep-grow:hover td.c-riep-massa { background: var(--gray-1); }
#c-gia-tablewrap .au-res-table tbody tr.c-riep-vrow td.c-riep-massa { background: var(--gray-1); }
/* Registro Cantina > Storico: stesso stile tabellare della Giacenza (header sticky base
.au-res-table + 1a colonna Data/Ora sticky in orizzontale), MA senza riga TOTALI — sommare
hl di carichi/scarichi/travasi eterogenei non e' un aggregato sensato — quindi un solo
livello sticky extra (stesso principio semplice di #riep-view: header 4 > colonna corpo 3). */
#c-st-tablewrap .au-res-table thead th:first-child { position: sticky; left: 0; z-index: 4; }
#c-st-tablewrap .au-res-table thead th { padding: 6px 8px; white-space: nowrap; }
#c-st-tablewrap .au-res-table tbody td.c-st-datacell { position: sticky; left: 0; z-index: 3; background: var(--white); font-weight: 600; white-space: nowrap; }
#c-st-tablewrap .au-res-table tbody tr:hover td.c-st-datacell { background: var(--blue-mid); }
#c-st-tablewrap .au-res-table th.ctrl-sortable { cursor: pointer; user-select: none; }
#c-st-tablewrap .au-res-table th.ctrl-sortable:hover { background: var(--gray-1); }
#c-st-tablewrap .au-res-table tbody td { padding: 6px 8px; font-size: 12px; white-space: nowrap; }
/* Note: stessa larghezza della colonna Operazione (sessione 16c, poi corretta in 16d — vedi sotto).
Storia: 180px in max-width non bastava (Operazione, nowrap, ignora un max-width piu' piccolo del
suo contenuto piu' lungo) -> passate a `width:320px` su entrambe in 16c. **Su MOBILE pero'
`width` su una
in table-layout:auto e' solo un candidato fra tanti nell'algoritmo di
auto-layout: il browser puo' IGNORARLO quasi del tutto quando il contenuto reale e' piu' corto
(verificato con un repro statico caricato nella preview a 375px con lo STESSO style.css: Note
renderizzava a ~31-47px reali, non 320px, nonostante width:320px dichiarato — Operazione a
~189px). Fix 16d: **`min-width` invece di `width`** — un min-width e' un pavimento che
l'auto-layout rispetta sempre (stesso repro: 320px esatti, verificato sia per Note sia per
Operazione). `width:auto` esplicito per non lasciare il vecchio `width:320px` a fare da tetto
involontario. Secondo problema visto nello screenshot di Hayo da mobile: le parole si
spezzavano A META' ("Primo"->"Prim/o") perche' `overflow-wrap:anywhere` spezza ovunque pur di
riempire la riga, anche quando basterebbe andare a capo fra una parola e l'altra — sostituito
con `word-break:normal` (default, mai spezzare dentro una parola per scelta) +
`overflow-wrap:break-word` (valore standard: spezza SOLO se una singola parola e' piu' larga
dell'intera colonna, ultima risorsa anti-overflow, non un comportamento "greedy"). */
/* Sessione 22 (richiesta Hayo): Operazione dimezzata (320->160px: la descrizione piu' lunga,
es. "Scarico x Uso Alternativo Sottoprodotti", va a capo su ~2 righe) e Note ridotta di un
terzo (320->213px). Non piu' larghezze uguali. Il cap e' min-width+max-width alla stessa
misura (il solo `width` su td in auto-layout e' inaffidabile, vedi sopra; `max-width` su td
funziona nei browser reali — stesso precedente di .c-st-prod qui sotto, gia' in produzione).
Wrap SOLO fra parole intere: word-break:normal + overflow-wrap:break-word (mai spezzare a
meta' parola, stessa regola anti "Prim/o" del fix mobile sopra). */
#c-st-tablewrap .au-res-table td.c-st-opwidth { white-space: normal; width: auto; min-width: 160px; max-width: 160px; word-break: normal; overflow-wrap: break-word; }
#c-st-tablewrap .au-res-table td.c-st-note { white-space: normal; width: auto; min-width: 213px; max-width: 213px; word-break: normal; overflow-wrap: break-word; }
/* Prodotti aggiunti: descrizione+dose puo' essere lunga (piu' prodotti uniti da '+') — stesso
principio di wrap, larghezza intermedia fra Note e Codice origine. */
#c-st-tablewrap .au-res-table td.c-st-prod { white-space: normal; max-width: 220px; word-break: break-word; overflow-wrap: anywhere; }
/* ─── Piano Operazioni: colonne Stato (descr. lavorazione) e Codice origine ───────
Desktop: Codice origine largo (codici aggregati di piu' vasche in un travaso, es.
"5CH+KE08MB+LA 5CH07MB+..."); vanno a capo a TOKEN grazie ai dopo '+'/spazi
nel markup. Stato = descrizione lavorazione (es. "Vino feccioso dopo travaso post FML").
Wrap SOLO fra parole/token: word-break:normal + overflow-wrap:break-word. Vale per
entrambi i sub-tab (stessa tabella). La colonna Prodotti e materiali contiene ora anche
dose+totale per ogni prodotto. */
#c-piano-tablewrap .au-res-table th.c-piano-cod, #c-piano-tablewrap .au-res-table td.c-piano-cod {
white-space: normal; word-break: normal; overflow-wrap: break-word; min-width: 200px; max-width: 340px; }
#c-piano-tablewrap .au-res-table th.c-piano-stato, #c-piano-tablewrap .au-res-table td.c-piano-stato {
white-space: normal; word-break: normal; overflow-wrap: break-word; min-width: 150px; max-width: 240px; }
#c-piano-tablewrap .au-res-table td.c-st-prod {
white-space: normal; word-break: normal; overflow-wrap: break-word; min-width: 200px; max-width: 300px; }
#c-piano-tablewrap .au-res-table th.c-piano-note, #c-piano-tablewrap .au-res-table td.c-piano-note {
white-space: normal; word-break: normal; overflow-wrap: break-word; min-width: 160px; max-width: 260px; }
@media (max-width: 640px) {
/* Mobile: la tabella scrolla in orizzontale -> meglio colonne un po' piu' larghe e leggibili
che schiacciate. Min-width sensato + wrap a parola/token (mai carattere-per-carattere). */
#c-piano-tablewrap .au-res-table th.c-piano-cod, #c-piano-tablewrap .au-res-table td.c-piano-cod { min-width: 150px; max-width: 220px; }
#c-piano-tablewrap .au-res-table th.c-piano-stato, #c-piano-tablewrap .au-res-table td.c-piano-stato { min-width: 140px; max-width: 200px; }
}
/* ─── ALERTS ─────────────────────────────────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 12px; }
.alert-error { background: var(--red-lt); color: var(--red); }
.alert-warn { background: var(--orange-lt); color: var(--orange); }
.alert-success { background: var(--green-lt); color: var(--green); }
.alert-info { background: var(--blue-lt); color: var(--navy); }
/* ─── TOAST ──────────────────────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
background: var(--gray-5); color: var(--white); padding: 12px 18px; border-radius: var(--radius);
font-size: 13.5px; box-shadow: var(--shadow-lg); min-width: 220px; max-width: 360px;
animation: slideUp .2s ease; display: flex; align-items: center; gap: 8px;
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
/* ─── CALIBRATION TABLE (vasche) ─────────────────────────────────────────────── */
.calib-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.calib-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.calib-row input { padding: 7px 10px; border: 1px solid var(--gray-2); border-radius: var(--radius); font-size: 13px; }
/* ─── ANIMATIONS ─────────────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* ─── HAMBURGER / MOBILE NAV ─────────────────────────────────────────────────── */
.hamburger-btn {
display: none;
background: none; border: none; font-size: 22px; cursor: pointer;
color: var(--navy); padding: 4px 8px; line-height: 1; margin-right: 8px;
}
.nav-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99;
opacity: 0; pointer-events: none; transition: opacity .25s;
}
.nav-overlay.visible { opacity: 1; pointer-events: all; }
/* ─── PESATA CARD ─────────────────────────────────────────────────────────────── */
.pesata-card {
background: white;
border: 1px solid var(--gray-2);
border-radius: var(--radius);
margin-bottom: 16px;
overflow: hidden;
box-shadow: var(--shadow);
}
.pesata-card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px;
background: var(--navy); color: white;
font-weight: 600; font-size: 15px;
}
.btn-card-remove {
background: rgba(255,255,255,.15); border: none; color: white;
cursor: pointer; padding: 5px 12px; border-radius: 4px; font-size: 13px;
}
.btn-card-remove:hover { background: rgba(255,255,255,.3); }
.pesata-card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card-section-label {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .8px; color: var(--gray-4);
border-bottom: 1px solid var(--gray-2); padding-bottom: 4px; margin-top: 4px;
}
.netto-display {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
background: var(--blue-mid);
border-radius: var(--radius);
border: 2px solid var(--navy);
}
.netto-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-4); }
.netto-value { font-size: 24px; font-weight: 800; font-family: monospace; color: var(--navy); }
.tipo-radio-lbl {
cursor: pointer; display: flex; align-items: center; gap: 6px;
padding: 8px 16px; border: 2px solid var(--gray-2); border-radius: var(--radius);
font-size: 14px; background: white; transition: border-color .15s;
}
.tipo-radio-lbl:has(input:checked) { border-color: var(--blue); background: var(--blue-mid); font-weight: 600; }
/* Annate da confrontare (Andamento): niente bordo vino sul checked — sembrava una
validazione "rossa". Stato selezionato indicato da sfondo tenue + grassetto + checkbox. */
.au-vint-lbl, .au-vint-lbl:has(input:checked) { border-color: var(--gray-2); }
/* ─── TOPBAR: selettori azienda + annata ─────────────────────────────────────── */
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; max-width: 100%; box-sizing: border-box; }
.topbar > * { min-width: 0; } /* i selettori possono restringersi senza forzare overflow orizzontale */
#company-selector select, .vintage-select, .vintage-label {
max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#company-selector select, .vintage-select {
padding: 7px 10px; border: 1px solid var(--gray-2); border-radius: var(--radius);
background: var(--white); color: var(--navy); font-weight: 600; font-size: 14px; cursor: pointer;
}
.vintage-select { min-width: 90px; }
.vintage-label {
display: inline-flex; align-items: center; gap: 4px;
padding: 7px 12px; border: 1px solid var(--gray-2); border-radius: var(--radius);
background: var(--white); color: var(--navy); font-weight: 700; font-size: 14px;
}
.vintage-label.chiusa { color: var(--gray-4); background: var(--gray-1); }
.vintage-empty-btn {
padding: 7px 12px; border: 1px dashed var(--blue); border-radius: var(--radius);
background: var(--blue-mid); color: var(--navy); font-weight: 600; font-size: 14px; cursor: pointer;
}
#vintage-banner:empty { display: none; }
.vintage-banner-chiusa {
padding: 6px 16px; background: #fff4e0; color: #8a5a00;
border-bottom: 1px solid #f0d28a; font-size: 13px; font-weight: 600; text-align: center;
}
.wiz-step { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-4); margin-bottom: 12px; }
/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
:root { --sidebar-w: 0px; }
.hamburger-btn { display: inline-flex; }
.sidebar {
position: fixed; left: -260px; top: 0; height: 100%; width: 240px;
z-index: 100; transition: left .25s ease; box-shadow: none;
}
.sidebar.open { left: 0; box-shadow: 4px 0 16px rgba(0,0,0,.3); }
.topbar { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
/* Su mobile i due selettori (azienda + campagna) restano nella topbar senza overflow */
#company-selector select, .vintage-select, .vintage-label { max-width: 42vw; }
.page { padding: 16px; }
.au-flt-panel { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.form-row { grid-template-columns: 1fr; }
/* Pesate: campi a coppia (2 col) anche su cellulare, in nuova registrazione e modifica */
.pesata-card .form-row { grid-template-columns: 1fr 1fr; gap: 8px; }
.mf-pesata .form-row { grid-template-columns: 1fr 1fr; gap: 8px; }
/* Modal: mantieni 2 colonne su mobile — le righe sono gia a 2 col max */
.modal .form-row { grid-template-columns: 1fr 1fr; gap: 8px; }
.variety-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.parcel-row { grid-template-columns: 1fr 1fr; }
/* Font input >=16px: elimina l'auto-zoom iOS al focus */
input, select, textarea,
.field-group input, .field-group select, .field-group textarea,
.cantina-filters input, .cantina-filters select,
.variety-row input, .variety-row select,
.parcel-row input, .parcel-row select,
.tag-input, .calib-row input, .pick-row select, .pick-hl, .sr-resa { font-size: 16px; }
/* Tap target >=44px sulle azioni. NB: .btn-icon è ora 44px nella regola BASE (#29) -> qui basta .btn. */
.btn { min-height: 44px; }
}
/* ─── ORG CARD ───────────────────────────────────────────────────────────────── */
.info-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; max-width: 500px; }
.info-card label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-4); }
.info-card .info-val { font-size: 16px; color: var(--navy); font-weight: 600; margin-top: 2px; margin-bottom: 16px; }
/* ─── Soglie/Parametri: selettore azienda FISSO (Hayo — sicurezza d'uso: senza, scrollando in
basso non si capisce più se si sta modificando il valore globale o l'override di un'azienda).
position:sticky in .main (il contenitore che scrolla, vedi .main{overflow-y:auto}), stesso
pattern collaudato di .group-head/.c-codice-preview (top:0, nessuna misura runtime necessaria:
qui non c'è un header sopra di cui compensare l'altezza, a differenza di --tot-top/--c-gia-tot-top
che sticky-ano DENTRO una tabella sotto una thead). z-index sotto ai popup/modal (che partono da
1000+) ma sopra al contenuto della pagina. */
.sog-sticky-company { position: sticky; top: 0; z-index: 5; max-width: none; padding: 14px 20px; }
/* ─── CONFIRM DIALOG ─────────────────────────────────────────────────────────── */
.confirm-body { text-align: center; padding: 8px 0 4px; }
.confirm-body p { font-size: 15px; color: var(--gray-5); margin-bottom: 24px; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
/* ─── CALCOLATORE CONTENUTO ────────────────────────────────────────────────────── */
.tab-bar { display: flex; gap: 4px; border-bottom: 2px solid var(--gray-2); }
.tab-btn {
background: none; border: none; padding: 8px 16px; font-size: 13px;
color: var(--gray-4); cursor: pointer; border-bottom: 2px solid transparent;
margin-bottom: -2px; font-family: var(--font);
}
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.tab-btn:hover:not(.active) { color: var(--gray-5); }
.calc-tab { animation: fadeIn .15s ease; }
/* Template tab principale (Analisi Uve + moduli Vendemmia / Resa Uve / Affinamento): pari larghezza,
font 13px, tab attivo navy pieno e contiguo.
🔴 #affin-tabs si AGGIUNGE agli elenchi che ci sono [06/08]: le tre viste dell'Affinamento sono
SCHEDE DI MODULO, non sub-tab. Erano nate come pill `.au-stab` — lo stile della SECONDA riga, che
dice «sotto-sezione di ciò che stai guardando» — e dicevano la cosa sbagliata: quelle tre sono
allo stesso livello dei tab in alto di Vendemmia. Nessuna regola nuova, nessun colore nuovo: si
entra nel template che esiste, cosi' un domani cambiarlo li cambia tutti insieme. */
#au-tabs, #vd-tabs, #resa-tabs, #affin-tabs { flex-wrap: nowrap; }
#au-tabs .tab-btn, #vd-tabs .tab-btn, #resa-tabs .tab-btn, #vinif-tabs .tab-btn, #affin-tabs .tab-btn { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
#au-tabs .tab-btn.active, #vd-tabs .tab-btn.active, #resa-tabs .tab-btn.active, #vinif-tabs .tab-btn.active, #affin-tabs .tab-btn.active { color: #fff; border-bottom-color: var(--navy); background: var(--navy); border-radius: 6px 6px 0 0; }
/* ── Registro Cantina (Fase B) ─────────────────────────────────────────────── */
/* Tab RC: stesso aspetto del Template AU (#au-tabs .tab-btn) — underline baseline, attivo navy,
tab contigui (gap:0), pari larghezza, font 13px. */
.cantina-tabs { display:flex; flex-wrap:nowrap; gap:0; margin:8px 0 16px; border-bottom:2px solid var(--gray-2); }
.ctab { flex:1 1 0; min-width:0; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
padding:8px 4px; cursor:pointer; font-size:13px; font-weight:600; color:var(--gray-4);
text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font); }
.ctab:hover:not(.active) { color:var(--gray-5); }
.ctab.active { background:var(--navy); color:#fff; border-bottom-color:var(--navy); border-radius:6px 6px 0 0; }
.cantina-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cantina-filters select, .cantina-filters input { padding:7px 9px; border:1px solid var(--gray-2); border-radius:6px; }
.cantina-row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:680px){ .cantina-row3 { grid-template-columns:1fr; } }
.btn-wizard { border: 2px solid var(--navy) !important; color: var(--navy) !important; background: var(--white) !important; font-size: 16px; }
.cantina-summary { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
/* righe pill filtro Giacenza: stesso stile/scroll orizzontale del picker (.pk-filters) */
.gia-pillrow { display:flex; flex-wrap:nowrap; gap:6px; margin-bottom:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.gia-pillrow::-webkit-scrollbar { display:none; }
.gia-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--gray-2); }
.gia-foot-cap { font-size:12px; color:var(--gray-4); }
.pill-stat { background:var(--gray-1); border:1px solid var(--gray-2); border-radius:20px; padding:4px 12px; font-size:13px; color:var(--gray-5); }
.pill-stat.warn { background:var(--orange-lt); color:#935116; border-color:#f5cba7; }
/* Variante "filtro attivo": stesso accento navy del pallino su .btn-icon.flt-active, cosi' il chip
che NOMINA il filtro e il pulsante ☰ si leggono come lo stesso segnale. */
.pill-stat.flt { background:var(--blue-mid); color:var(--navy); border-color:var(--navy); }
.pill-stat strong { color:var(--navy); }
.cantina-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.vcard { background:var(--white); border:1px solid var(--gray-2); border-left:4px solid var(--blue); border-radius:var(--radius); padding:10px 12px; box-shadow:var(--shadow); }
.vcard.full { border-left-color:var(--red); }
.vcard.overfull { border-left-color:var(--red); background:var(--red-lt); }
.vcard.vuota { border-left-color:var(--gray-3); opacity:.7; }
.vcard-head { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.vcode { font-weight:700; color:var(--navy); font-size:15px; }
.vqta { font-size:13px; color:var(--gray-5); display:flex; align-items:center; gap:6px; }
.vqta .pct { color:var(--gray-4); }
.vwine { font-size:13px; margin-top:6px; color:var(--gray-5); }
.vwine .annata { color:var(--gray-4); }
.vorigine { font-family:monospace; font-size:12px; color:var(--navy); background:var(--blue-mid); border-radius:4px; padding:1px 5px; margin-top:4px; display:inline-block; word-break:break-all; }
.vstato { font-size:12px; color:var(--gray-4); margin-top:4px; }
.vmeta { font-size:11px; color:var(--gray-4); margin-top:4px; }
.vbar { height:5px; background:var(--gray-2); border-radius:3px; margin-top:8px; overflow:hidden; }
.vbar-fill { height:100%; background:var(--blue); }
.vcard.full .vbar-fill, .vcard.overfull .vbar-fill { background:var(--red); }
.colore-chip { display:inline-block; font-size:10px; text-transform:uppercase; font-weight:700; padding:1px 6px; border-radius:4px; margin-right:5px; }
.colore-chip.rosso { background:#FDEDEC; color:#922B21; }
.colore-chip.bianco { background:#FEF9E7; color:#7D6608; }
.colore-chip.rosato { background:#FDEDEC; color:#943126; }
.linea-row { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-bottom:1px solid var(--gray-1); }
.linea-row:last-child { border-bottom:none; }
.l-name { font-weight:600; color:var(--gray-5); font-size:14px; }
.l-meta { font-size:12px; color:var(--gray-4); }
/* Titolo+sottotitolo dei sub-tab (omogeneizzato su AU/Vendemmia, rif. "Situazione"): il blocco
titolo/sottotitolo sta SEMPRE a sinistra del gruppo filtri, sulla stessa riga se c'e' spazio,
altrimenti va a capo su una riga propria (mai sopra al gruppo filtri). */
.subtab-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px; margin:0 0 8px; }
.subtab-head-text { display:flex; flex-direction:column; gap:2px; line-height:1.2; }
.subtab-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-4); }
.subtab-sub { font-size:11px; color:#999; }
/* Il gruppo filtri/pulsanti (quando presente, dopo .subtab-head-text) resta ancorato a destra anche
se va a capo da solo sulla sua riga: con un solo item per riga "space-between" lo lascerebbe a
sinistra (bug segnalato su Stima Rese/Riepilogo). Non tocca i sub-tab senza gruppo filtri (titolo
unico figlio: nessun elemento successivo a .subtab-head-text, regola inerte). */
.subtab-head-text + * { margin-left: auto; }
.l-qta { font-weight:700; color:var(--navy); }
.op-card { background:var(--white); border:1px solid var(--gray-2); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow); }
.op-head { display:flex; justify-content:space-between; align-items:center; }
.op-code { font-weight:700; color:#fff; background:var(--navy); border-radius:4px; padding:2px 7px; font-size:12px; }
.op-desc { color:var(--gray-5); font-size:14px; }
.op-date { font-size:12px; color:var(--gray-4); }
.op-line { font-size:13px; color:var(--gray-5); margin-top:5px; }
.op-note { font-style:italic; color:var(--gray-4); }
.op-actions { display:flex; gap:6px; justify-content:flex-end; margin-top:8px; }
.pick-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.pick-row select { flex:1; padding:6px 8px; border:1px solid var(--gray-2); border-radius:6px; }
.pick-hl { width:80px; padding:6px 8px; border:1px solid var(--gray-2); border-radius:6px; }
.btn-sm { padding:4px 10px; font-size:12px; }
/* Storico RC — colonne Da/A: elenco vasche a capo ogni 3, hl fra parentesi in grigio piccolo.
L'unita' "vasca (hl)" e' INDIVISIBILE: .c-st-vunit e' inline-block + nowrap, quindi il codice vasca e
i suoi hl non finiscono MAI su righe diverse (prima si spezzavano perche' la cella aveva white-space
normal e nessuna larghezza minima). La cella .c-st-vcell ha una min-width dimensionata su 3 unita':
lo Storico e' una TABELLA VERA che scrolla in orizzontale (#c-st-tablewrap ha overflow:auto), quindi
su schermo stretto si scorre invece di collassare la colonna in un elenco verticale illeggibile.
Le regole vivono sotto #c-st-tablewrap per battere il "td { white-space: nowrap }" di quella tabella. */
#c-st-tablewrap .au-res-table td.c-st-vcell {
white-space: normal; width: auto; min-width: 250px; max-width: 250px; line-height: 1.5; vertical-align: top;
}
.c-st-vunit { display: inline-block; white-space: nowrap; }
.c-st-hl { color: var(--gray-4); font-size: 11px; }
.sr-pos { color:var(--green); font-weight:600; }
.sr-neg { color:var(--red); font-weight:600; }
.sr-resa { padding:4px 6px; border:1px solid var(--gray-2); border-radius:6px; }
/* ── Fermentazione Alcolica (M3) ────────────────────────────────────────────── */
.ferm-card { cursor:pointer; transition:box-shadow .15s; }
.ferm-card:hover { box-shadow:var(--shadow-lg); }
.ferm-card.has-alert { border-left-color:var(--red); }
.ferm-last { font-size:12px; color:var(--gray-5); margin-top:6px; }
.ferm-last .muted { color:var(--gray-4); }
.ferm-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ferm-badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; white-space:nowrap; }
.ferm-badge.temp { background:var(--red-lt); color:var(--red); }
.ferm-badge.stallo { background:var(--orange-lt); color:var(--orange); }
.ferm-badge.ok { background:var(--green-lt); color:var(--green); }
.ferm-badge.fa { background:var(--green); color:#fff; }
/* Cronologia salassi/carichi (tab Pre-FA): [🗑] [% effettiva] [hl] [data+anno a destra], una riga */
.ferm-mov-hist { margin-top:4px; }
.ferm-mov-row { display:flex; align-items:center; gap:10px; padding:6px 4px; border-top:1px solid var(--gray-2); font-size:13px; flex-wrap:nowrap; white-space:nowrap; }
.ferm-mov-row .ferm-mov-del { flex:0 0 auto; background:none; border:none; cursor:pointer; font-size:14px; line-height:1; padding:2px 4px; color:var(--red); }
.ferm-mov-row .mov-pct { font-weight:700; color:var(--navy); min-width:54px; }
.ferm-mov-row .mov-hl { color:var(--gray-5); }
.ferm-mov-row .mov-data { margin-left:auto; color:var(--gray-4); }
/* Notice informativo sotto i pulsanti Salassa/Carica */
.ferm-mov-notice { margin-top:8px; font-size:12px; color:var(--gray-4); }
.ferm-charts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
@media (max-width:700px){ .ferm-charts { grid-template-columns:1fr; } }
.ferm-form-grid { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.ferm-subhead { font-size:12px; font-weight:700; color:var(--gray-4); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 6px; }
.ferm-check { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--gray-5); padding:8px 0; }
.ferm-check input { width:20px; height:20px; }
/* Avvio FA — sottogruppi del form (M4 Vinificazione) */
.avvio-card { background:var(--gray-1); }
.avvio-check-list { display:flex; flex-direction:column; gap:2px; }
.avvio-lavro { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--gray-2); border-radius:var(--radius); background:var(--white); min-width:0; }
.avvio-lavro .lbl { font-size:13px; font-weight:600; color:var(--gray-5); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avvio-lavro .pct { font-size:13px; font-weight:700; color:var(--navy); font-family:monospace; white-space:nowrap; flex-shrink:0; }
.avvio-lavro.off { background:var(--gray-1); }
.avvio-lavro.off .lbl, .avvio-lavro.off .pct { color:var(--gray-4); font-weight:600; }
.ferm-tabs { display:flex; flex-wrap:nowrap; gap:0; margin-bottom:12px; border-bottom:2px solid var(--gray-2);
overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ferm-tab { background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
padding:7px 10px; cursor:pointer; font-weight:600; font-size:12px; color:var(--gray-4); flex:0 0 auto;
white-space:nowrap; border-radius:6px 6px 0 0; transition:background .12s,color .12s; }
.ferm-tab.active { background:var(--navy); color:#fff; border-bottom-color:var(--navy); }
.ferm-tab:hover:not(.active) { background:var(--blue-lt); color:var(--gray-5); }
.ferm-tab.ferm-tab-done { color:var(--green); }
.ferm-tab.ferm-tab-done.active { background:var(--green); color:#fff; border-bottom-color:var(--green); }
/* Sub-tab a "pillola" — stesso stile dei sub-tab di Analisi Uve (.au-ris-stab/.au-and-stab,
che sono inline): pill arrotondata, attivo = navy pieno. Classe condivisa, usata dai sub-tab
delle LISTE di Vinificazione (Pre FA/…) e Svinatura (In attesa/…). */
.au-stab-bar { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 14px; }
.au-stab { padding:5px 14px; border-radius:20px; font-size:13px; font-weight:600;
border:1px solid var(--gray-2); cursor:pointer; background:var(--white); color:var(--navy);
outline:none; }
.au-stab.active { border-color:var(--navy); background:var(--navy); color:#fff; }
.au-stab:hover:not(.active) { background:var(--gray-1); }
/* Sub-tab Vendemmia: solo testo, tutti su UNA riga anche su mobile (no wrap; scroll-x se serve). */
#vd-subtabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#vd-subtabs .au-stab { white-space:nowrap; }
@media (max-width:480px){ #vd-subtabs { gap:4px; } #vd-subtabs .au-stab { padding:5px 10px; font-size:12px; } }
/* Tab dei modali (es. Utenti: Anagrafica | Permessi aziende/moduli) — resi come vero tab-bar. */
.modal-tabs { display:flex; gap:4px; margin:0 0 16px; border-bottom:2px solid var(--gray-2); flex-wrap:wrap; }
.modal-tab { padding:8px 14px; border:none; background:none; cursor:pointer; font-size:14px; font-weight:600;
color:var(--gray-5); border-bottom:3px solid transparent; margin-bottom:-2px; }
.modal-tab.active { color:var(--navy); border-bottom-color:var(--navy); }
.modal-tab:hover:not(.active) { color:var(--navy); }
/* Analisi e Degustazioni: 3 tab principali come Template AU (pari larghezza, font 13px, full-width). Scoped a #an-tabs per non toccare Vinificazione. */
#an-tabs { overflow-x:visible; }
#an-tabs .ferm-tab { flex:1 1 0; min-width:0; text-align:center; font-size:13px; padding:8px 4px; overflow:hidden; text-overflow:ellipsis; }
/* Dettaglio vasca (Vinificazione): i 5 tab restano a LARGHEZZA NATURALE (etichette intere,
niente ellissi), con scroll orizzontale se non entrano (utile su mobile). overflow-y:hidden
ESPLICITO evita che overflow-x:auto forzi overflow-y:auto -> niente barra verticale spuria a
destra (causata anche dal margin-bottom:-2px dei tab, ora clippato). */
#vinif-detail-tabs { overflow-x:auto; overflow-y:hidden; }
.st-over { color:var(--red); font-weight:700; }
.stato-hint { font-weight:400; font-size:11px; color:var(--gray-4); font-style:italic; text-transform:none; letter-spacing:0; }
/* ── Tabella responsive: su mobile ogni riga diventa una card ───────────────── */
/* Uso:
con data-label="…" su ogni
. Desktop invariato. */
@media (max-width:700px){
.rtable, .rtable tbody { display:block; width:100%; }
.rtable thead { display:none; }
/* ogni riga = card compatta a 2 colonne (~meta' altezza) */
.rtable tr {
display:flex; flex-wrap:wrap; column-gap:10px;
background:var(--white); border:1px solid var(--gray-2); border-left:3px solid var(--blue);
border-radius:var(--radius); box-shadow:var(--shadow); padding:5px 10px; margin-bottom:5px;
}
.rtable td {
flex:1 1 40%; min-width:0; border:none; padding:1px 0; font-size:12.5px; line-height:1.3;
display:flex; justify-content:space-between; align-items:center; gap:6px;
}
.rtable td::before {
content:attr(data-label); font-weight:600; color:var(--gray-4); font-size:10.5px;
text-align:left; flex:0 0 auto; white-space:nowrap;
}
.rtable td:empty { display:none; }
/* azioni in linea (non a tutta larghezza) per risparmiare una riga */
.rtable td.rt-actions { flex:1 1 40%; justify-content:flex-end; padding:1px 0; gap:4px; }
.rtable td.rt-actions::before { display:none; }
.rtable td.rt-actions .btn { padding:4px 8px; }
}
/* ── Primo Stoccaggio: riga/card selezionabile ──────────────────────────────── */
.st-row { cursor:pointer; }
.st-row.selected { background:var(--blue-mid); }
.st-chk, .st-chk-all { width:20px; height:20px; cursor:pointer; }
@media (max-width:700px){
.st-row.selected { border-left-color:var(--green); background:var(--blue-mid); }
.rtable td.rt-chk { justify-content:flex-start; }
.rtable td.rt-chk::before { display:none; }
/* area tap >=44px attorno alla checkbox */
.st-chk { width:24px; height:24px; margin:10px 0; }
}
/* ════════════════════════════════════════════════════════════════════════════
PICKER MODALE RIUSABILE (bottom-sheet, stile vecchio RC)
════════════════════════════════════════════════════════════════════════════ */
/* Bottone che apre il picker */
.picker-btn {
width:100%; padding:12px 14px; border:1px solid var(--gray-3); border-radius:var(--radius);
background:var(--white); color:var(--gray-5); font-size:15px; text-align:left; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--font);
}
.picker-btn:hover { border-color:var(--navy); }
.picker-btn.placeholder { color:var(--gray-4); }
.picker-btn::after { content:'＋'; color:var(--navy); font-weight:700; }
/* Chip delle voci selezionate (vasche / prodotti) */
.pk-chips { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.pk-chip {
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
background:var(--white); border:1px solid var(--gray-3); border-left-width:4px;
border-radius:8px; padding:8px 10px; font-size:14px; color:var(--gray-5);
}
.pk-chip.arrivo { border-left-color:var(--green); background:var(--green-lt); }
.pk-chip.partenza { border-left-color:var(--navy); background:var(--blue-mid); }
.pk-chip .code { font-weight:700; min-width:60px; }
.pk-chip .cap-ref { color:var(--gray-4); font-size:11px; }
.pk-chip .qta-wrap { margin-left:auto; display:flex; align-items:center; gap:4px; }
.pk-chip .qta-input {
width:84px; padding:6px 8px; font-size:15px; border:1px solid var(--gray-3); border-radius:6px;
background:var(--white); color:var(--gray-5); text-align:right; font-family:var(--font);
}
.pk-chip .qta-input:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 2px rgba(91,26,26,.12); }
.pk-chip .unit { font-size:12px; color:var(--gray-4); font-weight:600; }
.pk-chip .x { background:rgba(0,0,0,.08); color:var(--gray-5); border:none; border-radius:50%;
width:24px; height:24px; font-size:14px; line-height:1; cursor:pointer; padding:0; flex-shrink:0; }
.pk-chip .pk-cal { background:var(--blue-mid); color:var(--navy); border:1px solid var(--gray-3);
border-radius:6px; padding:4px 8px; font-size:13px; line-height:1; cursor:pointer; flex-shrink:0; }
.pk-chip .pk-cal:hover { background:var(--blue-lt); border-color:var(--navy); }
.pk-chip-warn { flex:1 1 100%; font-size:11px; font-weight:600; padding:4px 8px; border-radius:6px; margin-top:-2px; }
.pk-chip-warn.under { background:var(--red-lt); color:var(--red); }
.pk-chip-warn.over { background:var(--orange-lt); color:var(--orange); }
.pk-chip-warn.ok { background:var(--green-lt); color:var(--green); }
/* RC Nuovo — card prodotto a 2 righe: nome sopra, Dose|Unità|Qta sotto */
.pk-chip.c-prod-card { flex-direction:column; align-items:stretch; gap:8px; }
.c-prod-head { display:flex; align-items:center; gap:8px; }
.c-prod-head .code { flex:1; min-width:0; }
.c-prod-fields { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.c-prod-f { display:flex; flex-direction:column; gap:3px; font-size:10px; font-weight:700; color:var(--gray-4); text-transform:uppercase; letter-spacing:.4px; }
.c-prod-f .qta-input { width:100%; }
.c-prod-f select.qta-input { text-align:left; }
.pk-total { margin-top:6px; padding:8px 12px; background:var(--gray-1); border-radius:8px;
font-size:13px; color:var(--gray-4); display:flex; justify-content:space-between; align-items:center; }
.pk-total strong { font-size:15px; color:var(--gray-5); }
.pk-total.ok { background:var(--green-lt); color:var(--green); } .pk-total.ok strong { color:var(--green); }
.pk-total.warn { background:var(--red-lt); color:var(--red); } .pk-total.warn strong { color:var(--red); }
/* Modale bottom-sheet */
.pk-overlay { position:fixed; inset:0; background:rgba(43,26,20,.5); z-index:1100; display:none; align-items:flex-end; justify-content:center; }
.pk-overlay.show { display:flex; }
.pk-modal { background:var(--gray-1); width:100%; max-width:560px; max-height:85vh; border-radius:16px 16px 0 0;
display:flex; flex-direction:column; animation:pkUp .22s ease; }
@keyframes pkUp { from{transform:translateY(100%);} to{transform:translateY(0);} }
@media(min-width:600px){ .pk-overlay{ align-items:center; } .pk-modal{ border-radius:16px; max-height:80vh; } }
/* Picker montato inline (es. "Vasche da caricare" nel Salasso): no overlay, espande
sotto la pill a tutta altezza (lo scroll lo gestisce il modal contenitore, niente
scroll annidato che mostra una vasca alla volta). */
.pk-modal.pk-inline { max-width:none; max-height:none; border-radius:12px; border:1px solid var(--gray-2);
animation:none; margin-top:8px; box-shadow:0 2px 8px rgba(43,26,20,.10); }
.pk-modal.pk-inline .pk-body { max-height:none; overflow:visible; flex:none; }
.pk-head { padding:14px 16px; border-bottom:1px solid var(--gray-2); display:flex; align-items:center; gap:12px; }
.pk-head h3 { margin:0; font-size:16px; flex:1; color:var(--navy); }
.pk-head .count { background:var(--navy); color:#fff; font-size:12px; padding:2px 8px; border-radius:10px; }
.pk-close { background:none; border:none; font-size:22px; color:var(--gray-4); cursor:pointer; padding:4px 8px; }
.pk-search { padding:10px 16px; border-bottom:1px solid var(--gray-2); }
.pk-search input { width:100%; padding:10px 14px; border:1px solid var(--gray-3); border-radius:8px; font-size:16px; background:var(--white); font-family:var(--font); }
.pk-filters { display:flex; flex-wrap:nowrap; gap:6px; padding:10px 16px 12px; border-bottom:1px solid var(--gray-2); background:#FAF6EF; overflow-x:auto; overflow-y:hidden; flex:0 0 auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pk-filters::-webkit-scrollbar { display:none; }
.pk-fchip { padding:6px 12px; font-size:13px; border:1px solid var(--gray-3); border-radius:16px; background:var(--white); color:var(--gray-5); cursor:pointer; font-family:var(--font); flex:0 0 auto; white-space:nowrap; }
.pk-fchip.active { background:var(--navy); color:#F4E9D8; border-color:var(--navy); }
.pk-captot { padding:6px 16px; font-size:12px; color:var(--gray-4); text-align:left; }
.pk-body { flex:1; overflow-y:auto; padding:4px 0; -webkit-overflow-scrolling:touch; }
.pk-foot { padding:10px 16px; border-top:1px solid var(--gray-2); background:var(--white); }
.pk-item { padding:12px 16px; border-bottom:1px solid var(--gray-2); cursor:pointer; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pk-item:active { background:#EDE2D0; }
.pk-item.disabled { opacity:0.45; cursor:default; }
.pk-item.disabled .code { font-weight:400; }
.pk-item.disabled:active { background:transparent; }
.pk-item.selected { background:var(--blue-mid); }
.pk-item .check { width:22px; height:22px; border-radius:50%; border:2px solid var(--gray-3); flex-shrink:0;
display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:700; }
.pk-item.selected .check { background:var(--navy); border-color:var(--navy); }
.pk-item .code { font-weight:700; color:var(--navy); font-size:15px; min-width:70px; flex-shrink:0; }
.pk-item .meta { flex:1; font-size:13px; color:var(--gray-4); min-width:0; line-height:1.25; }
.pk-item .meta span { display:block; font-weight:400; }
.pk-item .cap { font-size:13px; font-weight:600; color:var(--gray-5); background:#EDE2D0; padding:3px 8px; border-radius:4px; flex-shrink:0; }
.pk-item .fill-badge { font-size:10px; font-weight:700; padding:3px 7px; border-radius:12px; white-space:nowrap; text-transform:uppercase; letter-spacing:.3px; flex-shrink:0; }
.pk-item .fill-badge.vuota { background:var(--green-lt); color:var(--green); }
.pk-item .fill-badge.scolma { background:var(--orange-lt); color:var(--orange); }
.pk-item .fill-badge.piena { background:var(--red-lt); color:var(--red); }
.pk-item .fill-badge.errore { background:var(--red); color:#fff; }
.pk-item-sub { flex:1 1 100%; font-size:11px; color:var(--gray-4); padding-left:32px; margin-top:-2px; line-height:1.3; }
.pk-item-sub .v-name { font-weight:600; color:var(--navy); } .pk-item-sub .v-orig { font-family:Consolas,ui-monospace,monospace; }
.pk-empty { padding:30px; text-align:center; color:var(--gray-4); }
.group-head { padding:8px 16px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-4); background:#EDE4D6; position:sticky; top:0; z-index:1; }
/* ── Pannelli di inserimento/consultazione: sfondo crema, campi bianchi (stile RC)
Ogni card che contiene campi (.field-group) o una barra filtri (.cantina-filters)
diventa crema, così i campi bianchi risaltano nettamente. */
/* ── Svinatura — step indicator del wizard */
.svi-steps { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.svi-step { font-size:13px; font-weight:600; color:var(--gray-4); padding:4px 12px; border-radius:12px; background:var(--gray-2); white-space:nowrap; }
.svi-step.active { background:var(--navy); color:#fff; }
.svi-step.done { background:var(--green-lt); color:var(--green); }
.table-card:has(.field-group),
.table-card:has(.cantina-filters) { background:var(--gray-1); }
.table-card:has(.field-group) input,
.table-card:has(.field-group) select,
.table-card:has(.field-group) textarea,
.table-card:has(.field-group) .picker-btn,
.table-card:has(.cantina-filters) input,
.table-card:has(.cantina-filters) select { background:var(--white); }
/* ── Wizard Codice Origine ──────────────────────────────────────────────────── */
.cwiz-section { background:var(--white); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.cwiz-section h4 { margin:0 0 10px 0; font-size:12px; color:var(--gray-4); text-transform:uppercase; letter-spacing:.5px; font-weight:700; display:flex; align-items:center; gap:6px; }
.cwiz-step { background:var(--navy); color:var(--white); font-size:11px; font-weight:700; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; min-width:22px; flex-shrink:0; }
.cwiz-toggle-pills { display:flex; gap:6px; margin-bottom:8px; }
.cwiz-pill { flex:1; padding:8px 12px; border-radius:8px; background:var(--gray-1); color:var(--gray-4); border:1px solid var(--gray-3); cursor:pointer; text-align:center; font-size:13px; }
.cwiz-pill.active { background:var(--navy); color:var(--white); border-color:var(--navy); }
.cwiz-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; min-height:24px; }
.cwiz-chip { background:var(--navy); color:var(--white); border-radius:14px; padding:4px 4px 4px 10px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.cwiz-chip .cwiz-x { background:rgba(255,255,255,.2); color:var(--white); border:none; border-radius:50%; width:18px; height:18px; font-size:12px; cursor:pointer; padding:0; line-height:1; }
.cwiz-add-btn { background:var(--gray-1); color:var(--navy); border:1px dashed var(--gray-3); border-radius:14px; padding:4px 12px; font-size:12px; cursor:pointer; }
.cwiz-hint { font-size:11px; color:var(--gray-4); margin-top:4px; line-height:1.4; }
.cwiz-warn { font-size:12px; font-weight:600; color:var(--orange); background:var(--orange-lt); border:1px solid var(--orange); border-radius:6px; padding:7px 10px; margin-top:8px; line-height:1.4; }
.cwiz-cc-row { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:15px; margin-bottom:2px; }
.cwiz-section input,.cwiz-section select { width:100%; padding:12px 14px; border:1px solid var(--gray-3); border-radius:8px; font-size:16px; background:var(--white); color:var(--gray-5); outline:none; transition:border-color .15s; margin-top:0; }
.cwiz-section input:focus,.cwiz-section select:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(91,26,26,.12); }
.c-codice-preview { background:linear-gradient(135deg,var(--navy) 0%,#7a2828 100%); color:var(--white); border-radius:12px; padding:14px; margin-bottom:12px; text-align:center; position:sticky; top:0; z-index:5; box-shadow:0 4px 14px rgba(0,0,0,.28); }
.c-codice-preview-label { font-size:11px; opacity:.8; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.c-codice-preview-code { font-family:Consolas,ui-monospace,monospace; font-size:22px; font-weight:700; word-break:break-all; }
.c-codice-preview-code.empty { color:rgba(255,255,255,.5); font-size:14px; font-weight:400; }
/* Sub-picker overlay (campo / aggiunte dentro il wizard) */
.sub-picker-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1100; display:none; align-items:flex-end; }
.sub-picker-overlay.show { display:flex; }
.sub-picker-list { background:var(--gray-1); max-height:70vh; width:100%; border-radius:16px 16px 0 0; overflow-y:auto; padding:16px; }
.sub-picker-grp { font-size:11px; font-weight:700; color:var(--gray-4); text-transform:uppercase; letter-spacing:.5px; padding:10px 4px 6px; }
.sub-picker-item { background:var(--white); border:1px solid var(--gray-2); border-radius:8px; padding:10px 12px; margin-bottom:6px; cursor:pointer; display:flex; align-items:center; gap:10px; }
.sub-picker-item.selected { background:#f8edec; border-color:var(--navy); }
.sub-picker-item .spi-code { background:var(--navy); color:var(--white); padding:3px 8px; border-radius:4px; font-family:Consolas,ui-monospace,monospace; font-weight:700; font-size:13px; min-width:50px; text-align:center; }
.sub-picker-item .spi-desc { flex:1; font-size:13px; color:var(--gray-5); display:flex; flex-direction:column; gap:1px; line-height:1.2; }
.sub-picker-item .spi-desc small { font-size:11px; color:var(--gray-4); }
/* ── Modal form inputs — stile coerente su tutti i modal ──────────────────── */
.modal-body .field-group input,
.modal-body .field-group select,
.modal-body .field-group textarea {
padding: 10px 12px;
font-size: 15px;
border-radius: 8px;
border-color: var(--gray-3);
}
.modal-body .btn-primary { background: var(--navy); }
.modal-body .btn-secondary { border-color: var(--navy); color: var(--navy); font-weight: 600; }
/* Analisi M6 — lista checkbox parametri condivisa (form richiesta e pacchetto) */
.an-par-list { max-height: 200px; overflow: auto; border: 1px solid var(--gray-2); border-radius: var(--radius); padding: 8px; }
.an-par-cat { font-weight: 600; font-size: 11px; color: var(--gray-5); margin: 4px 0 2px; }
.an-par-check { display: inline-flex; align-items: center; gap: 4px; margin: 0 12px 4px 0; font-size: 13px; }
/* Pagina dedicata laboratorio: selezione parametri a griglia multi-colonna (usa la larghezza,
niente lista scroll da 200px in colonna stretta). */
.an-par-checks { border: 1px solid var(--gray-2); border-radius: var(--radius); padding: 10px 12px; background: var(--white); }
.an-par-checks .an-par-cat { margin-top: 10px; }
.an-par-checks .an-par-cat:first-child { margin-top: 0; }
.an-par-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 16px; margin: 2px 0 6px; }
.an-par-grid .an-par-check { margin: 0 0 4px; }
/* ── Scheda di degustazione (SOP-DEG-01) ────────────────────────────────────────────────
Strumento da telefono, in piedi davanti a una vasca con un bicchiere in mano: bersagli
grandi (min 44px, la soglia di tocco), tutto in colonna, zero menu obbligatori.
Dimensionata sul caso peggiore reale: 375px (iPhone SE/mini). */
.degu-info { background: var(--gray-1, #F7F2EC); border-radius: var(--radius); padding: 8px 10px;
margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--navy); }
.degu-info .degu-cod { font-family: monospace; font-size: 11px; font-weight: 400;
color: var(--gray-4); margin-top: 2px; word-break: break-all; }
.degu-avviso { background: var(--red-lt); color: var(--red); border-radius: var(--radius);
padding: 8px 10px; margin-bottom: 12px; font-size: 12px; line-height: 1.35; }
.degu-perche { font-size: 11px; color: var(--gray-4); margin-top: 4px; line-height: 1.3; }
.degu-kpi-box { border: 1px solid var(--gray-2); border-radius: var(--radius); padding: 10px; margin-bottom: 14px; }
.degu-kpi + .degu-kpi { margin-top: 12px; border-top: 1px solid var(--gray-2); padding-top: 12px; }
.degu-kpi-lbl { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.degu-kpi-row { display: flex; gap: 6px; }
/* i 4 bottoni voto si dividono la riga: a 375px restano ~76px l'uno, ben sopra i 44px di tocco */
.degu-v { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 17px; font-weight: 700;
border: 1.5px solid var(--gray-2); border-radius: var(--radius); background: #fff;
color: var(--gray-4); cursor: pointer; }
.degu-v.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.degu-kpi-help { font-size: 11px; color: var(--gray-4); margin-top: 5px; min-height: 15px; line-height: 1.3; }
/* Nessun valore predefinito sui KPI: finche' non si vota, si vede che manca (il 2 = "conforme",
un default lo farebbe dire a una scheda mai compilata). */
.degu-req { color: var(--red); font-weight: 600; }
.degu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.degu-chip { min-height: 36px; padding: 6px 10px; font-size: 12px; text-align: left;
border: 1.5px solid var(--gray-2); border-radius: 999px; background: #fff;
color: var(--gray-4); cursor: pointer; max-width: 100%; }
.degu-chip b { font-family: monospace; color: var(--navy); margin-right: 3px; }
.degu-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.degu-chip.on b { color: #fff; }
.degu-codifica { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--navy);
background: var(--gray-1, #F7F2EC); border-radius: var(--radius); padding: 8px 10px;
margin: 4px 0 12px; text-align: center; word-break: break-all; }
@media (max-width: 420px) {
.degu-form .form-row { display: block; }
.degu-form .form-row .field-group { margin-bottom: 12px; }
}
/* Etichetta accorciata sotto i 420px: il pulsante «+ Nuova degustazione» diventa «+ Nuova» per far
spazio al ℹ️ nell'header senza andare a capo (misurato a 375px). NON e' una troncatura: si
scambiano due etichette intere, la corta e' una parola vera. Il pulsante resta sopra i 44px di
tocco. .only-narrow di default nascosto (desktop mostra la lunga), si accende nella @media. */
.only-narrow { display: none; }
@media (max-width: 420px) {
.hide-narrow { display: none; }
.only-narrow { display: inline; }
}
/* Barra selezione Giacenza a schermo stretto (Hayo, 18/07): sopra il breakpoint conteggio · [3
pulsanti] · ✕ stanno su UNA riga con la ✕ all'estremita' destra; sotto — dove 3 pulsanti + ✕ non
ci starebbero (MISURATO a 375px, si troncherebbe «Nuova operazione») — la ✕ resta in alto a destra
sulla riga del conteggio e i 3 pulsanti scendono su una riga tutta loro. order/flex-basis, niente
troncature. */
@media (max-width: 560px) {
#c-gia-selbar-count { order: 1; }
#c-gia-selbar-clear { order: 2; margin-left: auto !important; }
#c-gia-selbar-actions { order: 3; flex-basis: 100%; margin-left: 0 !important; }
}
/* Tabella Degustazioni — il CODICE ORIGINE e' lungo e in passato ha gia' dato problemi di
larghezza (allargato due volte nel Piano Operazioni, mandato a capo nella Lista lotti).
Si riusa il trattamento GIA' CONCORDATO li': la colonna va a capo oltre una max-width tarata
sui valori reali, spezzando a PAROLA e MAI lettera-per-lettera (overflow-wrap:break-word +
word-break:normal), col codice nel badge .vorigine. Le altre celle restano su una riga.
La min-width NON e' cosmetica: MISURATA a 375px, senza di essa la cella si schiacciava a 78px e
il codice andava a capo su SEI righe -- le celle che vanno a capo si lasciano comprimere per far
stare la tabella nello schermo, invece di lasciarla scrollare. Con la min-width la tabella supera
i 375px e scrolla dentro il suo contenitore (che e' gia' overflow-x:auto), come deve. */
.degu-tab td { white-space: nowrap; vertical-align: top; }
.degu-tab td.degu-c-vino { white-space: normal; word-break: normal; overflow-wrap: break-word;
min-width: 130px; max-width: 200px; font-size: 12px; }
.degu-tab td.degu-c-cod { white-space: normal; word-break: normal; overflow-wrap: break-word;
min-width: 140px; max-width: 180px; }
.degu-tab td.degu-c-cod .vorigine { display: inline; white-space: normal; word-break: normal;
overflow-wrap: break-word; }
/* Fase: sigla + nome del SOP sotto, in colonna stretta che va a capo. Il nome per esteso nella
cella ("A — Vinificazione e Fine Fermentazione") sarebbe ~230px e farebbe esplodere una tabella
che gia' scrolla: sigla sopra, nome sotto piccolo, focus del SOP nel tooltip. */
.degu-tab td.degu-c-fase { white-space: normal; min-width: 118px; max-width: 130px; }
.degu-tab .degu-fase-desc { font-size: 10px; color: var(--gray-4); line-height: 1.25; margin-top: 3px; }
/* I 4 KPI: colonne strette, il numero e' il dato (il colore, se arrivera', sara' un rinforzo). */
.degu-tab th.degu-c-kpi, .degu-tab td.degu-c-kpi { text-align: center; padding-left: 4px; padding-right: 4px; }
.degu-tab td.degu-c-kpi { font-weight: 700; font-size: 14px; }
/* ── Colori dei voti: il SEMAFORO viene dalla scala 0-3 del SOP, non da un'invenzione ──────────
0 azione correttiva immediata -> rosso pieno (l'UNICO che grida: se tutto grida non si sente
niente) · 1 da monitorare -> ambra · 2 standard aziendale -> verde TENUE su fondo chiaro
(la normalita' si vede, non festeggia) · 3 eccellente -> verde pieno.
Tavolozza gia' in casa (--red/--orange/--green + le loro varianti chiare), nessun colore nuovo.
⚠️ Il colore non porta MAI l'informazione da solo: il numero 0/1/2/3 resta sempre scritto. Chi
non distingue i colori legge esattamente le stesse cose. */
.degu-v.on.v0 { background: var(--red); border-color: var(--red); color: #fff; }
.degu-v.on.v1 { background: var(--orange-lt); border-color: var(--orange); color: var(--orange); }
.degu-v.on.v2 { background: var(--green-lt); border-color: var(--green); color: var(--green); }
.degu-v.on.v3 { background: var(--green); border-color: var(--green); color: #fff; }
/* Stessa scala nelle colonne KPI della tabella (Vini, Storia, Schede: una regola sola -> non
possono divergere). I voti intermedi hanno il fondo tenue, il numero resta sempre leggibile.
⚠️ LO ZERO NO: fondo ROSSO PIENO, identico a .degu-v.on.v0 dentro la scheda. Hayo, 17/07/2026:
«per un voto 0 anche il colore rosso marrone come all'interno della scheda, non quel rosso
chiaro. Anche nel tab Vini. E nella storia del vino. Ovunque insomma.»
Prima qui c'era var(--red-lt) — una MIA scelta ("fondo tenue" uniforme per tutte e quattro le
colonne), che faceva sembrare lo 0 in tabella meno grave di quanto la scheda lo dicesse: lo
STESSO voto con due pesi diversi a seconda di dove lo guardavi. Lo zero e' l'unico che chiede
un'azione correttiva immediata, e si deve vedere allo stesso modo dappertutto.
Il pattern e' quello della scheda: 0 e 3 pieni (i due estremi), 1 e 2 tenui. */
.degu-tab td.degu-c-kpi.v0 { background: var(--red); color: #fff; }
.degu-tab td.degu-c-kpi.v1 { background: var(--orange-lt); color: var(--orange); }
.degu-tab td.degu-c-kpi.v2 { background: var(--green-lt); color: var(--green); }
.degu-tab td.degu-c-kpi.v3 { background: var(--green); color: #fff; }
/* Il voto FUORI da una tabella (la riga degli Interventi). ⚠️ Serve una regola propria: quelle qui
sopra sono `.degu-tab td.degu-c-kpi.vN`, cioe' vogliono un TD dentro .degu-tab — su uno
non mordono, e il voto restava NERO. Hayo l'ha visto subito: «magari riesci a mettere allo 0 o
all'1 il suo colore». La classe era quella giusta, ma in quel contesto non portava l'aspetto.
⚠️ STESSI COLORI, stessa scala: se un giorno cambiano, cambiano QUI E SOPRA — o i due voti
divergono e nessuno se ne accorge (i due rossi divergenti erano gia' sfuggiti una volta). */
.degu-kpi-badge { display: inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 700; font-size: 12px; }
.degu-kpi-badge.v0 { background: var(--red); color: #fff; }
.degu-kpi-badge.v1 { background: var(--orange-lt); color: var(--orange); }
.degu-kpi-badge.v2 { background: var(--green-lt); color: var(--green); }
.degu-kpi-badge.v3 { background: var(--green); color: #fff; }
/* Descrizioni dei codici scelti: si imparano scegliendo. Testo preso dall'ANAGRAFICA (se Hayo
cambia una descrizione cambia qui da sola), mai riscritto. */
.degu-desc { margin-top: 6px; font-size: 11px; color: var(--gray-4); line-height: 1.4; }
.degu-desc div { margin-top: 2px; }
.degu-desc b { font-family: monospace; color: var(--navy); }
.degu-tab td.degu-c-codifica { cursor: pointer; }
.degu-tab td.degu-c-codifica:hover { background: var(--gray-1); }
/* Tabella Vini: una riga per vasca, tocca per la storia del vino. Stesse regole di larghezza
della tabella Degustazioni (vino e codice origine che vanno a capo fra parole, con min-width
perche' altrimenti si schiacciano invece di far scrollare la tabella — misurato). */
.degu-panoramica-row { cursor: pointer; }
.degu-panoramica-row:hover { background: var(--gray-1); }
.degu-panoramica td:first-child { white-space: nowrap; }
/* Colonna "Ultima degu." in Giacenza: pallino (voto PEGGIORE) + data. La codifica completa e'
lunga (4 voti + difetti + azioni multiple) e la Giacenza ha gia' 21 colonne -> qui sta il
minimo, il resto si legge aprendo la scheda al clic. Compromesso approvato da Hayo.
Il pallino NON porta l'informazione da solo: la data e' sempre scritta e la codifica e' nel
titolo. Stessa scala/tavolozza dei voti. */
.c-gia-degu { white-space: nowrap; }
.c-gia-degu-link { color: var(--navy); text-decoration: none; }
.c-gia-degu-link:hover { text-decoration: underline; }
.degu-pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
margin-right: 5px; vertical-align: baseline; border: 1px solid rgba(0,0,0,.15); }
/* ─── Colonna "Azioni enologiche" (Hayo 17/07/2026: «dopo colonna PROSPETTIVA», «in chiaro»,
«minimo su 2 righe la descrizione») — in Vini, Storia e Schede.
Il testo sta NELLA cella e non in un tooltip: su telefono i tooltip non esistono, e questo e' uno
strumento da telefono. Percio' la colonna e' larga per scelta, non per sbaglio.
min-height ~2 righe: e' il "minimo su 2 righe" chiesto da Hayo. Le azioni sono MULTIPLE: ognuna
e' un .degu-voce a se', quindi piu' azioni = piu' righe, senza troncare niente.
white-space:normal serve perche' le celle della tabella altrove sono nowrap: qui il testo DEVE
andare a capo. */
.degu-tab td.degu-c-az { white-space: normal; min-width: 210px; max-width: 320px;
font-size: 12px; line-height: 1.35; min-height: 2.7em; vertical-align: top; padding-top: 6px; }
/* Nota della degustazione: dopo «Azioni enologiche», testo libero che VA A CAPO dentro una colonna
limitata (la tabella gia' scrolla, una colonna senza tetto la farebbe esplodere). Vuota = cella
vuota, non "—" ne' testo di ripiego. */
.degu-tab td.degu-c-note { white-space: normal; overflow-wrap: break-word; word-break: break-word;
min-width: 140px; max-width: 220px; font-size: 12px; color: var(--gray-4); }
.degu-voce + .degu-voce { margin-top: 4px; }
.degu-voce-d { color: var(--gray-4); }
.degu-pallino.v0 { background: var(--red); }
.degu-pallino.v1 { background: var(--orange); }
.degu-pallino.v2 { background: var(--green); }
.degu-pallino.v3 { background: var(--green); }
/* ── Modo "riordina" delle card della Dashboard (deferred #12) ────────────────────────────────
⚠️ CONDIZIONE DI HAYO: le frecce vanno bene SOLO se appaiono quando si vuole spostare e poi
spariscono — «se rimangono sempre visibili o stringono le card di continuo, allora serve il drag
and drop». Due garanzie qui:
1. fuori dal modo riordina le frecce NON esistono nel DOM (non e' un display:none: proprio non
vengono create) -> ingombro zero;
2. anche accese NON stringono la card: position:absolute -> sono FUORI dal flusso, la card non
cambia di un pixel. Verificato a 375px misurando la card con e senza.
Frecce grandi (36px, sopra la soglia di tocco): si usano col dito in cantina. */
.dash-card { position: relative; }
.dash-mv { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; z-index: 2; }
.dash-mv-btn { width: 36px; height: 36px; padding: 0; font-size: 15px; line-height: 1;
border: 1.5px solid var(--navy); border-radius: var(--radius); background: #fff;
color: var(--navy); cursor: pointer; }
.dash-mv-btn:disabled { opacity: .35; cursor: default; }
.dash-mv-btn:not(:disabled):hover { background: var(--navy); color: #fff; }
/* Nel modo riordina la card non e' cliccabile-per-navigare: lo si vede. */
.dash-grid.dash-riordino .dash-card { cursor: default; }
.dash-grid.dash-riordino .dash-card:hover { transform: none; box-shadow: var(--shadow); }
/* ─── Riordino: la barra sta in FONDO, sotto l'ultima card (Hayo 17/07/2026) ───────────────
Centrata sotto la griglia: e' un'azione della griglia intera, non di una card. .dash-grid ha
gia' margin-bottom:28px, che e' l'aria — non aggiungerne altra sopra. */
.dash-rbar { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ACCESO: si incolla in fondo allo scrollport cosi' "Fatto" resta raggiungibile anche dopo aver
spostato una card in cima (senza risalire in fondo: su telefono era il punto dolente).
position:sticky nel contenitore che scrolla (.main{overflow-y:auto}), stesso pattern collaudato
di .sog-sticky-company; sticky in BASSO c'e' gia' in .au-res-table tfoot. Full-bleed oltre il
padding laterale di .page (28px) come .au-flt-panel, altrimenti le card scorrerebbero visibili
ai lati della barra. Sfondo pieno = var(--gray-1), lo sfondo del body.
Esiste SOLO nel modo riordina: a riordino spento questa classe non c'e' e la barra e' un
normale pulsante nel flusso — nessun ingombro fisso, nessun costo. */
.dash-rbar-on {
position: sticky; bottom: 0; z-index: 5; background: var(--gray-1);
border-top: 1px solid var(--gray-2); padding: 12px 28px;
margin-left: -28px; margin-right: -28px; margin-bottom: -24px;
}
/* Il full-bleed deve inseguire il padding di .page, che a <=700px scende da 28px a 16px (vedi la
@media piu' su). Senza questo la barra sbordava di 12px per lato e faceva scorrere la pagina in
ORIZZONTALE — misurato a 375px, non ipotizzato.
⚠️ L'override sta QUI e non accanto a quello di .au-flt-panel dentro la @media a riga ~612: le
media query NON aggiungono specificita', vince la regola che viene DOPO nel file. .au-flt-panel
se lo puo' permettere perche' la sua regola base sta a riga ~113, prima della @media; la nostra
base e' qui sotto in fondo al file, quindi vincerebbe lei e l'override non morderebbe.
Se cambia il padding di .page, vanno aggiornati ENTRAMBI i punti. */
@media (max-width: 700px) {
.dash-rbar-on { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
margin-bottom: -16px; }
}
.dash-rbar-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
color: var(--navy); text-transform: uppercase; letter-spacing: .4px; }
/* ── PRE-IMBOTTIGLIAMENTO — tabella dei candidati ──────────────────────────────────────────────
Colonne: VASCA · VINO · Codice origine · una colonna per PROVA · ✕
🔴 IL BLOCCO FISSO SONO DUE COLONNE, VASCA e VINO — e basta [correzione di Hayo, 29/07].
Prima erano tre colonne larghe e ferme che si mangiavano lo schermo del telefono: le colonne
delle prove, a destra, non si raggiungevano piu'. Ora «Codice origine» SCORRE con le prove, e
restano ancorate solo le due che servono a sapere QUALE RIGA si sta leggendo mentre si scorre.
🔴 LE LARGHEZZE STANNO SULLE
+ `table-layout: fixed`, non sulle celle. In `table-layout:auto`
`width`/`max-width` su
/
sono SUGGERIMENTI che l'algoritmo puo' ignorare, e li ignora: e'
la lezione gia' pagata sulla colonna Vino del Riepilogo RC, dove la regola sulle celle era stata
MISURATA come completamente inerte (memoria layout-css-si-misura-non-si-greppa).
⚠️ font-size/font-weight vanno ripetuti sulla
: `ch` si risolve sul font DELL'ELEMENTO, e
senza questi la
userebbe il font della tabella (14px) invece di quello della cella (12px).
⚠️ `width: max-content` (non 100%): la tabella DEVE poter essere piu' larga del contenitore,
altrimenti non c'e' niente da scorrere e lo sticky non serve a nulla.
DIMENSIONAMENTO, dai DATI VERI (261 vasche in produzione):
VASCA max 6 caratteri (SB0038) -> 7ch
VINO prima riga SEMPRE 5 (BDM25), massa sotto max 3 -> 6ch (era 9ch quando erano attaccati)
ORIGINE mediana 25, massimo 191 caratteri -> 24ch x 3 righe (~72 caratteri),
la larghezza che era stata misurata prima e che Hayo ha chiesto di non toccare */
.au-res-table.pimb-cand-table { table-layout: fixed; width: max-content; min-width: 100%; }
.au-res-table.pimb-cand-table td,
.au-res-table.pimb-cand-table th { font-size: 12px; padding: 6px 6px; vertical-align: top; }
.au-res-table.pimb-cand-table col.pimb-col-chk { width: 34px; }
.au-res-table.pimb-cand-table col.pimb-col-vasca { font-size: 12px; font-weight: 600; width: 7ch; }
.au-res-table.pimb-cand-table col.pimb-col-vino { font-size: 12px; font-weight: 600; width: 6ch; }
/* ⚠️ 30ch e non 24: Hayo ha chiesto di NON cambiare la larghezza del codice origine, e
quella misurata prima era ~196px (~72 caratteri nelle tre righe). MISURANDO, 24ch qui
rendevano 155px (~52 caratteri): il `ch` di questo font vale ~6,5px, non 8. 30ch riportano
la colonna dov'era. E' esattamente il motivo per cui le larghezze si misurano. */
.au-res-table.pimb-cand-table col.pimb-col-orig { font-size: 12px; width: 30ch; }
.au-res-table.pimb-cand-table col.pimb-col-prova { width: 62px; }
.au-res-table.pimb-cand-table col.pimb-col-az { width: 40px; }
/* ── LE DUE COLONNE FISSE ──────────────────────────────────────────────────────────────────────
VASCA a `left: 0`, VINO subito dopo. Il `left` di VINO e' la larghezza REALE di VASCA, misurata
a runtime in `--pimb-vino-left` (vedi _pimbMisuraSticky): `7ch` scritto qui e la larghezza che il
browser assegna davvero non coincidono, e un pixel di troppo lascerebbe una fessura da cui si
vede passare il testo che scorre sotto. Fallback 7ch se la misura non e' ancora arrivata.
z-index: VASCA sopra VINO (4>3 nel corpo, 6>5 nell'header) cosi' se mai si toccassero e' VASCA a
coprire; l'header sta sopra il corpo perche' scorre anche in verticale. Sfondo OPACO obbligatorio:
senza, le celle che passano sotto si vedrebbero in trasparenza. */
.au-res-table.pimb-cand-table thead th.pimb-vasca { position: sticky; left: 0; z-index: 6; background: var(--white); }
.au-res-table.pimb-cand-table thead th.pimb-vino { position: sticky; left: var(--pimb-vino-left, 7ch); z-index: 5; background: var(--white); }
.au-res-table.pimb-cand-table tbody td.pimb-vasca { position: sticky; left: 0; z-index: 4; background: var(--white); }
.au-res-table.pimb-cand-table tbody td.pimb-vino { position: sticky; left: var(--pimb-vino-left, 7ch); z-index: 3; background: var(--white); }
.au-res-table.pimb-cand-table td.pimb-vasca,
.au-res-table.pimb-cand-table td.pimb-vino { font-weight: 600; white-space: nowrap; }
/* La MASSA sotto al codice: seconda riga, piu' piccola e tenue — si legge come un dettaglio del
vino, non come un secondo dato di pari rango. Se la massa non c'e' la riga non si stampa affatto
(nessuno spazio vuoto a occupare posto). */
.au-res-table.pimb-cand-table .pimb-massa { font-size: 10px; font-weight: 400; color: var(--gray-4); line-height: 1.2; }
/* 🔴 IL GAP fra VINO e «Codice origine» [Hayo: «ora si toccano»]. Sta sul BORDO DESTRO della
colonna fissa e non come padding della successiva: il bordo viaggia con la colonna ferma, quindi
segna sempre il confine fra il blocco fisso e la parte che scorre — e si vede anche mentre il
contenuto ci passa sotto. Il padding da solo scorrerebbe via insieme al testo. */
.au-res-table.pimb-cand-table thead th.pimb-vino,
.au-res-table.pimb-cand-table tbody td.pimb-vino { border-right: 1px solid var(--gray-2); }
.au-res-table.pimb-cand-table td.pimb-orig,
.au-res-table.pimb-cand-table th.pimb-orig { padding-left: 12px; }
/* ── «Codice origine»: A CAPO fino a TRE righe, poi l'ellissi ─────────────────────────────────
[decisione Hayo: niente troncamento a una riga sola]. `-webkit-line-clamp` mette l'ellissi da
solo alla terza riga: e' il solo meccanismo che il browser onora per «N righe e poi …» (un
max-height a occhio taglierebbe le lettere a meta' senza dirlo).
🔴 `overflow-wrap: anywhere` e NON `break-all`: i codici origine sono catene senza spazi e senza
questo non andrebbero a capo affatto — resterebbero su una riga sbordando dalla colonna. Provato
con un codice vero di 34 caratteri senza un solo spazio (quello da 191 ne ha, e non lo dimostrava). */
.au-res-table.pimb-cand-table td.pimb-orig { white-space: normal; }
.au-res-table.pimb-cand-table .pimb-orig-txt {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
overflow-wrap: anywhere; word-break: normal; line-height: 1.25;
}
/* ALLARGA il codice: la colonna prende tutto lo spazio che le serve e il clamp sparisce — si legge
l'INTERA catena. Le due fisse restano al loro posto e continuano a fare da ancora. */
.au-res-table.pimb-cand-table.pimb-orig-wide col.pimb-col-orig { width: auto; }
.au-res-table.pimb-cand-table.pimb-orig-wide .pimb-orig-txt {
display: block; -webkit-line-clamp: none; overflow: visible;
}
/* ── Le colonne delle PROVE (Tappa 3) ─────────────────────────────────────────────────────────
Una per prova, a destra del codice origine: in cella i ml da prelevare e sotto la percentuale.
Sono la parte che si raggiunge SCORRENDO, ed e' per loro che le due colonne di sinistra restano
ferme. Numeri a destra: si confrontano in colonna. */
.au-res-table.pimb-cand-table td.pimb-prova,
.au-res-table.pimb-cand-table th.pimb-prova { text-align: right; white-space: nowrap; }
.au-res-table.pimb-cand-table .pimb-prova-sub { font-size: 10px; font-weight: 400; color: var(--gray-4); line-height: 1.2; }
.au-res-table.pimb-cand-table .pimb-prova-no { color: var(--gray-2); }
/* Gli HL della vasca SOTTO al nome, nella matrice candidati x prove [richiesta di Hayo]: stesso
trattamento del form della prova (riga propria, piu' piccola e tenue), cosi' le due schermate
raccontano la stessa cosa nello stesso modo. */
.au-res-table.pimb-cand-table .pimb-hl { font-size: 10px; font-weight: 400; color: var(--gray-4); line-height: 1.2; }
/* La riga TOTALI in fondo: per ogni colonna-prova la somma degli hl delle vasche coinvolte.
⚠️ Lo sticky in BASSO e lo sfondo NON si ridichiarano: ce li mette gia' `.au-res-table tfoot td`,
la regola generale dell'app. Nella prima versione li avevo riscritti qui, ed erano una copia
inerte — scoperta perche' una mutazione che li toglieva NON cambiava niente a schermo. Qui resta
solo cio' che e' specifico di questa tabella.
⚠️ Le due colonne di sinistra restano FISSE anche nei totali, o scorrendo la riga perderebbe
l'etichetta e si leggerebbero numeri senza sapere di cosa sono. z-index sopra il corpo (5>4, 4>3):
il tfoot passa sopra le righe che gli scorrono sotto. */
.au-res-table.pimb-cand-table tfoot tr.pimb-tot td {
border-top: 1px solid var(--gray-2); font-weight: 600; z-index: 2; }
.au-res-table.pimb-cand-table tfoot tr.pimb-tot td.pimb-vasca { left: 0; z-index: 5; }
.au-res-table.pimb-cand-table tfoot tr.pimb-tot td.pimb-vino { left: var(--pimb-vino-left, 7ch); z-index: 4; }
/* Una vasca candidata che nel frattempo si e' SVUOTATA: resta in lista (sparire da sola sarebbe
peggio) ma si vede che non e' piu' viva. */
.au-res-table.pimb-cand-table tr.pimb-vuota td { color: var(--gray-4); font-style: italic; }
.au-res-table.pimb-cand-table td.pimb-del { text-align: right; }
/* ── PRE-IMBOTTIGLIAMENTO — la tabella dentro il form «prova di taglio» ────────────────────────
Colonne: ☐ · VASCA (hl sotto) · VINO (massa sotto) · Q.TA' (editabile) · % (derivata) · ml
Stessa disciplina della tabella candidati: larghezze sulle
+ `table-layout: fixed`, perche'
su
sarebbero suggerimenti che l'algoritmo puo' ignorare (memoria layout-css-si-misura).
Qui la tabella sta dentro un MODALE stretto sul telefono, quindi le sei colonne devono entrare
nella larghezza disponibile senza spingere fuori la colonna dei ml — che e' quella per cui si
apre il form. Misurate a 375px.
⚠️ font-size sulle
: `ch` si risolve sul font dell'elemento, e senza questo userebbe quello
della tabella (14px) invece della cella (12px). */
.au-res-table.pimb-prova-table { table-layout: fixed; width: 100%; }
.au-res-table.pimb-prova-table td,
.au-res-table.pimb-prova-table th { font-size: 12px; padding: 5px 4px; vertical-align: top; }
.au-res-table.pimb-prova-table col.pimb-pcol-chk { width: 28px; }
.au-res-table.pimb-prova-table col.pimb-pcol-vasca { font-size: 12px; font-weight: 600; width: 7ch; }
.au-res-table.pimb-prova-table col.pimb-pcol-vino { font-size: 12px; font-weight: 600; width: 6ch; }
.au-res-table.pimb-prova-table col.pimb-pcol-q { width: 62px; }
.au-res-table.pimb-prova-table col.pimb-pcol-pct { font-size: 12px; width: 7ch; }
.au-res-table.pimb-prova-table col.pimb-pcol-ml { font-size: 12px; width: 8ch; }
.au-res-table.pimb-prova-table td.pimb-pvasca,
.au-res-table.pimb-prova-table td.pimb-pvino { font-weight: 600; white-space: nowrap; }
/* gli HL della vasca SOTTO al nome, e la massa sotto al codice del vino: seconda riga piu' piccola
e tenue, si leggono come dettaglio della riga sopra e non come un dato di pari rango. */
.au-res-table.pimb-prova-table .pimb-phl { font-size: 10px; font-weight: 400; color: var(--gray-4); line-height: 1.2; }
/* numeri a destra e in cifre tabellari: le colonne Q.TA' / % / ml si leggono in verticale, e con le
cifre a larghezza variabile i decimali non si allineerebbero. */
.au-res-table.pimb-prova-table .pimb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-res-table.pimb-prova-table input.pimb-pinput {
width: 100%; box-sizing: border-box; text-align: right; padding: 4px 5px;
border: 1px solid #e0d5c8; border-radius: var(--radius); font-size: 12px;
font-family: var(--font); background-color: #fff;
}
/* Etichetta di una quota CdP. Nata con l'assemblaggio-dentro-il-taglio (rimosso il 29/07),
RESTA perche' le quote dei centri di profitto si mostreranno anche nel nuovo tab. */
.pimb-cdp {
display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px;
margin: 2px 2px 0 0; border-radius: 10px; background: var(--blue-lt); color: var(--navy);
white-space: nowrap;
}
/* ══ PERMANENZA — 5° sub-tab del Registro Cantina (02/08) ═══════════════════════════════════════
Dimensionata sul caso peggiore reale: 375px (iPhone SE/mini). Le due scelte che lo reggono:
(1) la BARRA 100% al posto della matrice a 6 colonne — a 375px sei colonne di percentuali si
schiacciano o costringono a scorrere per leggere UNA riga; una barra impilata dice la stessa
cosa in una riga sola e senza scroll. La tabella numerica resta, ma dentro il dettaglio.
(2) le CARD dei totali vanno a capo da sole (flex-wrap), non e' una griglia a N colonne fisse. */
.perm-cards { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.perm-card {
flex:1 1 150px; min-width:140px; cursor:pointer; border:1px solid #e0d5c8; border-radius:var(--radius);
background:#fff; padding:8px 10px; line-height:1.25;
}
.perm-card.sel { border-color:var(--navy); box-shadow:0 0 0 2px var(--blue-lt) inset; }
.perm-card-top { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--navy); }
.perm-card-top i { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.perm-card-hl { font-size:17px; font-weight:700; margin-top:2px; }
.perm-card-sub { font-size:11px; color:var(--gray-4); }
.perm-card-gg { font-size:11px; color:var(--gray-4); }
/* La barra 100%: altezza generosa (14px) perche' un segmento da 1% resti visibile e toccabile. */
.perm-bar { display:flex; width:100%; height:14px; border-radius:7px; overflow:hidden;
background:var(--gray-1); margin:6px 0 4px; }
.perm-seg { display:block; height:100%; min-width:2px; }
.perm-legenda, .perm-sub-riepilogo, .perm-mesi { display:flex; flex-wrap:wrap; gap:4px 12px; margin:2px 0 6px; }
.perm-lg { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--gray-5); }
.perm-lg i { width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
.perm-pill { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; }
.perm-mini { font-size:11px; color:var(--gray-4); line-height:1.2; }
.perm-anno { border-top:1px solid #e0d5c8; padding:8px 0 4px; }
.perm-anno-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px; }
.perm-anno-head strong { font-size:15px; }
.perm-anno-head .muted { font-size:11px; }
.perm-det > summary { cursor:pointer; font-size:12px; color:var(--navy); padding:4px 0; }
.perm-picker { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 0; }
.perm-picker select { flex:1 1 220px; min-width:0; padding:7px 10px; border:1px solid #e0d5c8;
border-radius:var(--radius); font-size:13px; font-family:var(--font); background:#fff; }
/* La tabella scorre DENTRO il suo contenitore: il body della pagina non deve mai scorrere in
orizzontale. `min-width` sulla 1a colonna perche' il nome vasca non si spezzi a meta'. */
.perm-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.perm-table { width:max-content; min-width:100%; }
.perm-table td { vertical-align:top; }
.perm-table td.perm-vasca { min-width:92px; }
/* 🔴 IL CODICE ORIGINE AGGREGATO E' LUNGHISSIMO (misurato: «GRAN LAREYN LAGREIN 2025 · 5LART16+MN+BR…»
spingeva questa colonna a 1242px e la tabella a 1888px). Il cap sta sul DIV INTERNO e non sul
:
in `table-layout:auto` un max-width sulla cella e' INERTE (memoria layout-css-si-misura-non-si-greppa),
e questa tabella per giunta e' `width:max-content`, dove il testo non va a capo da solo.
Misurato dopo: colonna 210px, tabella ~860px — scorre dentro il suo contenitore, meta' dello scroll. */
.perm-table td .perm-vino { max-width: 210px; overflow-wrap: anywhere; }
.perm-passblocco { margin-top: 8px; }
/* PERMANENZA / PREGRESSO (Fase 2): i tre passi, numerati. Uno sotto l'altro perche' e' l'ordine in
cui si fanno — a 375px una fila orizzontale di tre passi non ci sta, e spezzarla li slega. */
.perm-passo { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid #e0d5c8; }
.perm-passo-n {
flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff;
font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;
}
.perm-passo-c { flex:1 1 auto; min-width:0; }
.perm-riep { display:flex; flex-wrap:wrap; gap:6px 14px; margin:8px 0 4px; }
/* ══ PERMANENZA — LA TABELLA PER UNITA' (07/08) ══════════════════════════════════════════════════
TEMPLATE CLASSICO, non una variante: `table-card` + `au-res-table` come lo Storico, il Riepilogo
Giacenza e l'Affinamento. Qui sotto c'e' solo cio' che il template non ha gia': la 1a colonna
sticky (stessa classe .c-gia-vcell del Riepilogo, stesso pattern di z-index) e le poche celle
larghe. Nessuna regola sui COLORI: quelli li scrive il JS dalla mappa dei macro-gruppi, che e'
una sola in tutto il sub-tab.
⚠️ SCOPING OBBLIGATORIO su #perm-mat-tablewrap: `.c-gia-vcell` esiste anche in Giacenza e nel
Riepilogo, e una regola senza scope li toccherebbe entrambi. */
#perm-mat-tablewrap .au-res-table thead tr:first-child th:first-child { position: sticky; left: 0; z-index: 6; }
#perm-mat-tablewrap .au-res-table thead th { z-index: 4; padding: 6px 8px; white-space: nowrap; }
#perm-mat-tablewrap .au-res-table tbody td { padding: 6px 8px; font-size: 12px; vertical-align: top; }
#perm-mat-tablewrap .au-res-table tbody td.c-gia-vcell { position: sticky; left: 0; z-index: 2; background: var(--white); font-weight: 600; }
#perm-mat-tablewrap .au-res-table tbody tr:hover td.c-gia-vcell { background: var(--blue-mid); }
/* La riga TOTALI: 2a riga del , sticky SOTTO l'intestazione — identica per posizione e
stile a quella di Giacenza/Riepilogo (.c-gia-tot: sfondo navy, testo bianco, `top` calcolato a
runtime perche' l'intestazione puo' andare a capo). L'angolo in basso a sinistra resta agganciato
anche allo scroll orizzontale, come li'. */
#perm-mat-tablewrap .au-res-table .c-gia-tot td {
position: sticky; top: var(--c-gia-tot-top, 0); z-index: 3;
background: var(--navy); color: #fff; font-weight: 700; white-space: nowrap;
border-bottom: 2px solid var(--navy); vertical-align: top;
}
#perm-mat-tablewrap .au-res-table .c-gia-tot td:first-child { left: 0; z-index: 5; white-space: normal; }
/* 🔴 LA CELLA DEI MESI DEL TOTALE DEVE ANDARE A CAPO. Ereditava il `nowrap` della riga totali —
giusto per i numeri, sbagliato qui: e' l'unica cella che contiene TUTTI E CINQUE i gruppi, e in
una riga sola usciva dal suo riquadro e veniva tagliata a meta' parola. Con le sigle e questo
`normal` i chip vanno a capo dentro il cap di 150px del `.perm-mat-mesibox`: due righe. */
#perm-mat-tablewrap .au-res-table .c-gia-tot td#perm-tot-mesi { white-space: normal; }
/* ...e con lo spazio per DUE sigle per riga: con le sole sigle la colonna si stringeva a 124px e i
quattro chip finivano uno per riga (misurato). Il minimo sta SOLO sul box del totale — le
righe-unita' mostrano un gruppo alla volta e non ne hanno bisogno — ed e' l'unico caso in cui un
minimo qui e' una scelta di lettura: «due righe» e' la forma che Hayo ha chiesto. Costa 42px, e
la tabella resta sotto il budget di 1248. */
#perm-mat-tablewrap .c-gia-tot #perm-tot-mesi .perm-mat-mesibox { min-width: 150px; }
/* dentro la riga navy tutto deve restare leggibile: le etichette dei mesi e le note in piccolo
ereditano il grigio, che su navy non si legge. */
#perm-mat-tablewrap .au-res-table .c-gia-tot .perm-lg,
#perm-mat-tablewrap .au-res-table .c-gia-tot .perm-mini,
#perm-mat-tablewrap .au-res-table .c-gia-tot .muted { color: #fff; }
#perm-mat-tablewrap .au-res-table .c-gia-tot .perm-bar { border: 1px solid rgba(255,255,255,.35); }
/* 🔴 I TITOLI DEI 5 GRUPPI VANNO A CAPO [Hayo, 07/08]: «Legno grande», «Legno piccolo» e
«Cemento/Terracotta» su una riga sola rendevano quelle colonne piu' larghe del numero che
contengono (una percentuale sta in 6 caratteri). Il cap sta sullo SPAN interno e non sul
:
in `table-layout:auto` un max-width sulla cella e' un suggerimento che l'algoritmo ignora —
la stessa lezione gia' pagata sulla colonna Vino del Riepilogo e su questa vista.
`overflow-wrap:anywhere` serve a «Cemento/Terracotta», che non ha spazi dove spezzarsi. */
#perm-mat-tablewrap .au-res-table thead th.perm-mat-mth { white-space: normal; vertical-align: bottom; }
/* 🔴 NESSUN `max-width` E NESSUN `min-width`, ed e' il punto di tutta la regola. Misurato, in
quest'ordine:
· `max-width:9ch` + `overflow-wrap:anywhere` -> l'anywhere azzera la larghezza MINIMA
intrinseca (un carattere), `table-layout:auto` stringe la colonna a 59px e
«Cemento/Terracotta» finisce su QUATTRO righe;
· `min-width:10.5ch` -> la colonna sale a 86px (il minimo si somma al pallino e al padding) e
la tabella si ALLARGA: l'opposto di quello che serviva.
Senza `overflow-wrap`, la larghezza minima di una cella e' la sua PAROLA PIU' LUNGA: e' gia' la
misura giusta, e l'algoritmo la usa da solo. Il punto di rottura dopo la barra lo mette
`_permWbr`, cosi' «Terracotta» conta come parola e non come coda di una da 18 caratteri.
⚠️ Un'etichetta futura lunghissima senza spazi ne' separatori allargherebbe la sua colonna: e'
voluto — meglio una colonna larga che un titolo spezzato a caso. */
#perm-mat-tablewrap .perm-mat-mlab {
display: inline-block; line-height: 1.1; text-align: right; vertical-align: bottom;
}
/* Il segno «in parte uscito» sotto gli hl: un'annotazione, non un allarme — quel vino sta bene, ne
e' solo uscita una parte. Colore attenuato e `nowrap`, cosi' «↗ 45% uscito» non si spezza in due
righe dentro una colonna di numeri. */
#perm-mat-tablewrap .perm-mat-usc { color: var(--gray-5); white-space: nowrap; font-weight: 600; }
#perm-mat-tablewrap .perm-mat-row { cursor: pointer; }
#perm-mat-tablewrap .perm-mat-row:hover td { background: var(--gray-1); }
#perm-mat-tablewrap .perm-mat-row:hover td.c-gia-vcell { background: var(--blue-mid); }
#perm-mat-tablewrap .perm-mat-caret { color: var(--gray-4); margin-right: 4px; }
/* 🔴 IL VINCOLO DI LARGHEZZA STA SUL CONTENUTO, NON SUL
: in `table-layout:auto` (il default)
width/max-width su una cella sono SUGGERIMENTI e l'algoritmo li ignora — lezione gia' pagata sul
Riepilogo e sulla tabella dei soggiorni. Qui la 1a colonna e' sticky e non deve dilatare la
tabella: si limita il testo dentro, che e' l'unica cosa che il browser onora davvero. */
#perm-mat-tablewrap td.perm-mat-vino > strong,
#perm-mat-tablewrap td.perm-mat-vino > .perm-mini { display: block; max-width: 210px; overflow-wrap: anywhere; }
/* Il NOME del vino e' un