/* ================================================================
   Griglia analisi — stesso linguaggio visivo della tabella vasche/registro di Genio
   (tema chiaro vanilla, header sticky, colonne ridimensionabili).
   ================================================================ */
:root {
  --g-bg:        #ffffff;
  --g-bg-2:      #f8f9fa;
  --g-surface:   #f0f4f8;
  --g-hover:     #e3f2fd;
  --g-border:    #e9ecef;
  --g-border-2:  #dee2e6;
  --g-text:      #212529;
  --g-text-2:    #495057;
  --g-muted:     #6c757d;
  --g-focus:     #2c3e50;
  --g-accent:    #C8175C;
}

/* Sezione tabella a tutta larghezza finestra (esce dal contenitore centrato) */
.vp-fullbleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.vp-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  background: var(--g-bg);
  border: 1px solid var(--g-border-2);
  border-radius: 6px;
}

.vp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;   /* le larghezze dei <th> comandano; il contenuto non allarga */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: var(--g-text);
}
/* le celle non devono allargarsi per il contenuto.
   NB SOLO td: overflow:hidden su un elemento sticky rompe lo sticky in
   Safari (bug WebKit noto) — i th ne restano fuori. */
.vp-table td { overflow: hidden; }

/* THEAD */
.vp-table thead th {
  position: -webkit-sticky; /* Safari datati */
  position: sticky;
  /* NIENTE position:relative dopo lo sticky: l'ultima dichiarazione vince e
     lo annullava (era il motivo per cui l'header scorreva via). Lo sticky fa
     già da contesto di posizionamento per la maniglia ::after del resize. */
  top: 0;
  z-index: 5;
  padding: 6px 8px;
  background: var(--g-bg-2);
  border-bottom: 1px solid var(--g-border-2);
  border-right: 1px solid var(--g-border);
  color: var(--g-text-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.2;
  text-align: center;
  vertical-align: bottom;
  white-space: normal;
  user-select: none;
}
.vp-table thead th .th-unit {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: #8a8f96;
  margin-top: 2px;
  letter-spacing: 0;
}
.vp-table thead th .th-calc {
  color: var(--g-accent);
  font-size: 9px;
}
/* zona di resize sul bordo destro */
.vp-table thead th.col-resizable::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 6px; height: 100%;
  cursor: col-resize;
}

/* TBODY */
.vp-table tbody td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--g-border);
  border-right: 1px solid var(--g-border);
  vertical-align: middle;
}
.vp-table tbody tr.riga-analisi:hover td { background: var(--g-surface); }

/* Cella evidenziata (doppio click) — giallo chiaro, visibile anche in hover */
.vp-table tbody td.vp-ev,
.vp-table tbody tr.riga-analisi:hover td.vp-ev { background: #fef3a8; }
.vp-table tbody td.vp-ev .vp-cell--calc { background: transparent; }
.vp-table tbody tr.riga-note td {
  background: var(--g-bg-2);
  border-bottom: 2px solid var(--g-border-2);
}

/* input dentro le celle: occupano tutta la colonna, niente bordo doppio */
.vp-cell {
  width: 100%;
  min-width: 0;            /* fondamentale: permette alla colonna di stringersi */
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 4px;
  font: inherit;
  color: inherit;
  border-radius: 3px;
  text-align: center;
}
.vp-cell:focus {
  outline: none;
  border-color: var(--g-focus);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(44,62,80,0.12);
}
.vp-cell--text { text-align: left; }
.vp-cell--calc { background: rgba(200,23,92,0.05); color: #555; }
.vp-cell--sel  { text-align: left; cursor: pointer; background: #fff; border-color: var(--g-border-2); }

/* Colonna contabilizzazione inline (SOLO admin): tinta ambra per distinguerla.
   Contiene N linee "pacchetto + prezzo" (multi-pacchetto per riga analisi). */
.vp-table thead th.cc-th { background: #fff8ec; border-left: 2px solid #f0d9a8; }
.vp-table tbody td.cc-cell { background: #fffcf5; border-left: 2px solid #f6e6c4; vertical-align: top; }
.cc-list { display: flex; flex-direction: column; gap: 4px; }
.cc-line { display: flex; align-items: center; gap: 4px; }
.cc-line .cc-voce { flex: 1 1 auto; min-width: 0; background: #fff; }
.cc-line .cc-prezzo { flex: 0 0 66px; width: 66px; background: #fff; }
.cc-line-del {
  flex: 0 0 auto; width: 20px; height: 24px; line-height: 22px; text-align: center;
  border: none; background: transparent; color: #c0392b; cursor: pointer; font-size: 12px; padding: 0;
}
.cc-line-del:hover { color: #922b21; }
.cc-line-del:disabled { color: #ccc; cursor: default; }
.cc-add {
  margin-top: 5px; border: 1px dashed #d9b878; background: #fffdf7; color: #9a6b1e;
  border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.cc-add:hover { background: #fff5e2; }
.cc-add:disabled { opacity: .5; cursor: default; }

.vp-note-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--g-border-2);
  background: #fff;
  padding: 3px 6px;
  font: inherit;
  border-radius: 3px;
}
.vp-note-input:focus { outline: none; border-color: var(--g-focus); box-shadow: 0 0 0 2px rgba(44,62,80,0.12); }

.vp-del {
  color: var(--g-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 13px;
}
.vp-del:hover { color: #c94545; }

/* Lista campioni in stile griglia, con riga filtri */
.vp-list thead th { text-align: left; } /* sticky ereditato da .vp-table (2026-07-13) */
.vp-list tbody td { padding: 7px 10px; }
/* Righe a UNA riga di testo: il contenuto lungo si tronca con "…" invece di
   andare a capo, così tutte le righe hanno la STESSA altezza (2026-07-15).
   (l'overflow:hidden arriva già da .vp-table td; come #cont-grid) */
.vp-list tbody td { white-space: nowrap; text-overflow: ellipsis; }
.vp-list .filtri th { padding: 4px 6px; background: #fff; border-bottom: 1px solid var(--g-border-2); }
.vp-list .f-col {
  width: 100%;
  border: 1px solid var(--g-border-2);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--g-text);
}
.vp-list .f-col:focus { outline: none; border-color: var(--g-focus); }

/* Bottone Salva layout — stati come in Genio */
.btn-layout {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--g-border-2); border-radius: 4px;
  background: #fff; color: var(--g-text-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.btn-layout[disabled] { opacity: .55; cursor: default; }
.btn-layout.is-changed { border-color: #c99a1b; color: #8a6a10; background: #fdf9e8; }
.btn-layout.is-saved   { border-color: #3a9d5d; color: #1e7a40; background: #eafaf0; }
.layout-status { font-size: 12px; color: var(--g-muted); }

/* ================================================================
   Mobile (≤640px): la griglia analisi del form campione (#tab-analisi)
   diventa SCHEDE per analisi — UN PARAMETRO PER RIGA (etichetta a
   sinistra, valore a destra), per la massima leggibilità. Riusa gli
   stessi input: recalc, selezione colonne e "aggiungi riga" restano
   validi. Scoped su #tab-analisi / .vp-analisi-wrap: la LISTA campioni
   resta con lo scroll orizzontale.
   IMPORTANTE: si azzerano tutte le larghezze salvate dal desktop
   (width:auto !important) così il layout desktop NON influenza il mobile.
   ================================================================ */
@media (max-width: 640px) {
  /* il wrapper del form: niente cornice/scroll, le card fanno da sé */
  .vp-analisi-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  #save-layout-btn { display: none; }              /* larghezze colonne: senza senso a schede */

  /* azzera ogni larghezza/min-width salvata dal layout desktop */
  #tab-analisi { min-width: 0 !important; width: 100% !important; table-layout: auto; display: block; }
  #tab-analisi th, #tab-analisi td { width: auto !important; overflow: visible; }
  #tab-analisi thead { display: none; }
  #tab-analisi tbody { display: block; }

  /* scheda: parte alta (codice + parametri, uno per riga) */
  #tab-analisi tr.riga-analisi {
    display: block; position: relative;
    padding: 8px 14px 10px;
    margin-top: 14px;
    background: #fff;
    border: 1px solid var(--g-border-2);
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
  }
  #tab-analisi tr.riga-analisi:hover td { background: transparent; }   /* annulla hover desktop */
  #tab-analisi tr.riga-analisi td.vp-ev,
  #tab-analisi tr.riga-analisi:hover td.vp-ev { background: #fef3a8; border-radius: 6px; padding-left: 6px; padding-right: 6px; }

  /* riga parametro: etichetta a sinistra, valore a destra */
  #tab-analisi tr.riga-analisi td {
    display: flex; align-items: center; gap: 12px;
    border: 0; border-bottom: 1px solid var(--g-border); padding: 9px 0;
  }
  #tab-analisi tr.riga-analisi td:last-of-type { border-bottom: 0; }
  #tab-analisi tr.riga-analisi td[data-label]::before {
    content: attr(data-label);
    flex: 1 1 auto; min-width: 0;
    color: var(--g-text-2); font-weight: 500; font-size: .9rem; line-height: 1.25;
  }
  #tab-analisi tr.riga-analisi td .vp-cell { flex: 0 0 42%; max-width: 160px; }

  /* iOS Safari: un campo focusato con font < 16px fa zoommare TUTTA la pagina
     (e le etichette escono dallo schermo). 16px reali su input/select/note del
     form = si digita a dimensione costante, niente auto-zoom. */
  #tab-analisi .vp-cell,
  .vp-note-input { font-size: 16px; }

  /* codice: prima riga in evidenza, campo a tutta larghezza con etichetta sopra */
  #tab-analisi tr.riga-analisi td:first-child {
    display: block; padding: 2px 34px 12px 0; border-bottom: 1px solid var(--g-border-2);
  }
  #tab-analisi tr.riga-analisi td:first-child::before {
    display: block; margin-bottom: 4px;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--g-muted); font-weight: 600;
  }
  #tab-analisi tr.riga-analisi td:first-child .vp-cell { flex: none; max-width: none; width: 100%; font-weight: 600; }

  /* cestino in alto a destra */
  #tab-analisi tr.riga-analisi td:last-child {
    display: block; position: absolute; top: 6px; right: 8px; padding: 0; border: 0;
  }

  /* input leggibili al tocco; numeri allineati a destra */
  #tab-analisi .vp-cell {
    text-align: left; border: 1px solid var(--g-border-2); background: #fff;
    padding: 9px 10px; border-radius: 6px;
  }
  #tab-analisi .vp-cell:not(.vp-cell--text):not(.vp-cell--sel) { text-align: right; }
  #tab-analisi .vp-cell--calc { background: rgba(200,23,92,0.05); }

  /* Cella contabilità (multi-pacchetto): etichetta sopra, linee a tutta larghezza */
  #tab-analisi tr.riga-analisi td.cc-cell { display: block; padding: 9px 0; }
  #tab-analisi tr.riga-analisi td.cc-cell::before { display: block; margin-bottom: 6px; flex: none; }
  #tab-analisi td.cc-cell .cc-line .cc-voce { flex: 1 1 auto; max-width: none; }
  #tab-analisi td.cc-cell .cc-line .cc-prezzo { flex: 0 0 84px; max-width: 84px; }

  /* scheda: parte bassa (nota) */
  #tab-analisi tr.riga-note {
    display: block; margin: 0 0 4px; padding: 10px 14px 14px;
    background: #fff; border: 1px solid var(--g-border-2); border-top: 0;
    border-radius: 0 0 10px 10px;
  }
  #tab-analisi tr.riga-note td { display: block; padding: 0; border: 0; background: transparent; }
  #tab-analisi tr.riga-note td:first-child { display: none; }          /* etichetta "Note:" desktop */
  #tab-analisi tr.riga-note td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 4px;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; color: var(--g-muted);
  }
  #tab-analisi .vp-note-input { padding: 9px 10px; border-radius: 6px; }
}

/* ================================================================
   Mobile (≤640px): la LISTA campioni (#tab-campioni, sezione "Campioni")
   diventa SCHEDE — una card per campione. Anche qui si azzerano le
   larghezze salvate dal desktop e si nascondono toolbar + filtri.
   Scoped su #tab-campioni / .vp-campioni-wrap.
   ================================================================ */
/* barra di ricerca della lista campioni: nascosta su desktop, mostrata solo
   su mobile (dove le colonne-filtro spariscono con le schede) */
.vp-mobile-search { display: none; }

@media (max-width: 640px) {
  .vp-campioni-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .vp-list-toolbar { display: none; }              /* "Salva layout": inutile a schede */
  .vp-mobile-search { display: block; }

  #tab-campioni { min-width: 0 !important; width: 100% !important; table-layout: auto; display: block; }
  #tab-campioni thead { display: none; }            /* intestazioni ordinabili + riga filtri */
  #tab-campioni tbody { display: block; }
  #tab-campioni th, #tab-campioni td { width: auto !important; overflow: visible; white-space: normal; }

  #tab-campioni tr.riga-apri {
    display: block; position: relative;
    padding: 14px 14px 12px; margin-top: 10px;
    background: #fff; border: 1px solid var(--g-border-2); border-radius: 10px;
  }
  #tab-campioni tr.riga-apri td { display: block; border: 0; padding: 0; text-align: left; }

  /* 1 Cliente = titolo della scheda */
  #tab-campioni tr.riga-apri td:nth-child(1) {
    font-size: 1.02rem; font-weight: 600; line-height: 1.25;
    padding-right: 96px; margin-bottom: 2px;       /* spazio per il badge stato */
  }
  /* 2 Descrizione */
  #tab-campioni tr.riga-apri td:nth-child(2) { color: var(--g-text-2); margin-bottom: 8px; }
  #tab-campioni tr.riga-apri td:nth-child(2) a { color: inherit; }
  /* 3 Data + 4 Analisi = riga meta compatta */
  #tab-campioni tr.riga-apri td:nth-child(3),
  #tab-campioni tr.riga-apri td:nth-child(4) {
    display: inline-block; font-size: .85rem; color: var(--g-muted); margin-right: 16px;
  }
  #tab-campioni tr.riga-apri td:nth-child(3)::before { content: "Data: "; }
  #tab-campioni tr.riga-apri td:nth-child(4)::before { content: "Analisi: "; }
  /* 5 Stato = badge in alto a destra */
  #tab-campioni tr.riga-apri td:nth-child(5) { position: absolute; top: 12px; right: 12px; }
  /* 6 Azioni = riga in fondo alla scheda */
  #tab-campioni tr.riga-apri td:nth-child(6) {
    display: flex; align-items: center; gap: 18px; white-space: normal;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--g-border);
  }
  #tab-campioni tr.riga-apri td:nth-child(6) form { margin: 0; }
  #tab-campioni tr.riga-apri td:nth-child(6) .ml-2 { margin-left: 0; }  /* gap uniforme */
}

/* ============================================================ CONTABILITÀ */
/* Griglia movimenti (solo admin) — riusa .vp-table; qui solo gli extra.    */

#cont-grid { width: 100%; table-layout: fixed; }
#cont-grid td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Colori riga per stato consegna (decisione 2026-07-13):
   ambra = da consegnare · verde = pronta per l'invio · azzurro = ordinato */
#cont-grid tbody tr.cont-attesa td   { background: #fef3c7; }
#cont-grid tbody tr.cont-pronta td   { background: #dcfce7; }
#cont-grid tbody tr.cont-ordinato td { background: #dbeafe; }
#cont-grid tbody tr.cont-daordinare td { background: #fce7f3; }
#cont-grid tbody tr:hover td { filter: brightness(0.97); }

#cont-grid .cont-td-num { text-align: right; }
#cont-grid .cont-td-center { text-align: center; }
#cont-grid .cont-val { display: block; min-height: 1.2em; cursor: text; padding: 1px 2px; }
#cont-grid td[data-col="consegna"] .cont-val { cursor: default; }
#cont-grid td[data-col="magazzino"] .cont-val { cursor: default; }

.cont-truck {
  border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1;
}
.cont-truck-na { color: #bbb; }
/* 📦 spento: la riga non scala la giacenza. Il simbolo ∅ è un glifo di testo,
   non un'emoji, quindi va portato alla stessa resa visiva del 📦 acceso. */
.cont-truck.cont-nomag { color: #b9b3c2; font-size: 14px; font-weight: 700; }

.cont-editor {
  width: 100%; box-sizing: border-box; font: inherit;
  border: 1px solid var(--g-focus, #2c3e50); border-radius: 4px; padding: 2px 4px;
  background: #fff;
}
.cont-editor:focus { outline: none; box-shadow: 0 0 0 2px rgba(44,62,80,0.15); }

.cont-badge { color: #c99a1b; font-weight: 700; margin-left: 3px; cursor: help; }

.cont-ro { display: block; text-align: right; padding: 1px 2px; }

#cont-grid tr.cont-draft td { background: #f0fdf4; border-bottom: 2px solid #16a34a; }
.cont-draft-save, .cont-draft-cancel {
  border: 0; cursor: pointer; border-radius: 4px; padding: 2px 6px; font-size: 13px; margin: 0 1px;
}
.cont-draft-save { background: #16a34a; color: #fff; }
.cont-draft-cancel { background: #eee; }

#cont-grid tfoot td {
  font-weight: 600; background: var(--g-surface, #f7f7f9);
  border-top: 2px solid var(--g-border-2, #d6d9de); padding: 6px 8px; font-size: 12.5px;
}

.cont-x-del { cursor: pointer; color: #c94545; font-size: 11px; margin-left: 4px; }
th.cont-drop { outline: 2px dashed var(--g-focus, #2c3e50); outline-offset: -2px; }

/* ============================================================ VP-STICKY */
/* Header fissi allo scroll: il wrapper scorre (max-height via vp-sticky.js) */

/* La riga FILTRI (2ª riga del thead) si incolla sotto la riga titoli.
   Il ripiego serve solo se il JS non ha ancora misurato: vale 26px come la
   riga titoli su una riga sola, ed e' lo STESSO numero dell'altra regola piu'
   in basso — due ripieghi diversi si notano solo quando il JS non gira. */
.vp-table thead tr:nth-child(2) th { top: var(--vp-h1, 26px); }

/* Tabelle Tailwind semplici (es. Setup → Parametri): wrapper .vp-sticky */
.vp-sticky { overflow: auto; }
.vp-sticky thead th {
  position: -webkit-sticky; /* Safari datati */
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f6efe6; /* cream pieno: lo sticky richiede sfondo opaco */
}

/* Fallback CSS (2026-07-13): il cap d'altezza NON dipende dal JS — il wrapper
   scorre sempre internamente su desktop, quindi lo sticky ingaggia sempre.
   vp-sticky.js poi rifinisce il valore esatto (inline style vince sul CSS). */
@media (min-width: 769px) {
  .vp-table-wrap { overflow-y: auto; max-height: calc(100vh - 240px); }
  .vp-sticky     { max-height: calc(100vh - 240px); }
}

/* "Salva layout" da cliccare: evidenziazione quando il layout è cambiato
   (larghezze/ordine colonne modificati e non ancora salvati). Vale per i
   bottoni di Contabilità, Clienti, Listino e per i .btn-layout esistenti. */
button.is-changed {
  border-color: #c99a1b !important;
  background: #fdf3d0 !important;
  color: #7a5c05 !important;
  font-weight: 600;
  animation: vp-layout-pulse 1.5s ease-in-out infinite;
}
@keyframes vp-layout-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 154, 27, 0.15); }
  50%      { box-shadow: 0 0 0 7px rgba(201, 154, 27, 0.35); }
}

/* Pannello "Colonne ▾" della griglia contabilità */
#cont-cols-panel {
  position: absolute;
  z-index: 60;
  width: 230px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--g-border-2);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 8px;
}
#cont-cols-panel .cont-cols-title {
  font-size: 11px; font-weight: 700; color: var(--g-muted);
  text-transform: uppercase; letter-spacing: .4px; margin: 2px 6px 6px;
}
#cont-cols-panel .cont-cols-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 4px 6px; border-radius: 5px; cursor: pointer;
}
#cont-cols-panel .cont-cols-item:hover { background: var(--g-surface); }

/* Modale "Ordine rapido" (contabilità) */
#cont-ordine-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(20, 20, 25, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
}
#cont-ordine-panel {
  background: #fff; border-radius: 12px; width: min(880px, 96vw);
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  padding: 16px 18px;
  font-size: 13px;
}
#cont-ordine-panel .ord-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; }
/* Campi di testa: UNIFORMI e COMPATTI (il Cliente si allarga/stringe, gli altri
   hanno larghezza fissa). Safari renderizza select/date/input con altezze
   diverse → appearance:none + freccia custom.
   Stavano tutti su una riga sola; con l'aggiunta di "Scarica dal magazzino"
   (2026-07-28) a 880px non ci starebbero senza schiacciare il Cliente sotto il
   suo minimo, quindi si lascia andare a capo quando serve. */
#cont-ordine-panel .ord-campi { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: flex-end; }
#cont-ordine-panel .ord-campi label { font-size: 10.5px; color: var(--g-muted); font-weight: 600; white-space: nowrap; }
#cont-ordine-panel .ord-campi label:nth-child(1) { flex: 1 1 auto; min-width: 150px; } /* Cliente */
#cont-ordine-panel .ord-campi label:nth-child(2) { flex: 0 0 122px; } /* Data */
#cont-ordine-panel .ord-campi label:nth-child(3) { flex: 0 0 112px; } /* Categoria */
#cont-ordine-panel .ord-campi label:nth-child(4) { flex: 0 0 92px; }  /* DDT */
#cont-ordine-panel .ord-campi label:nth-child(5) { flex: 0 0 92px; }  /* Fattura */
/* "Scarica dal magazzino": casella in linea, allineata al fondo come gli altri
   campi (non ha l'etichetta sopra, quindi l'altezza la dà il campo stesso). */
#cont-ordine-panel .ord-campi .ord-check {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  height: 29px; padding: 0 2px;
  font-size: 11.5px; font-weight: 600; color: var(--g-text);
  cursor: pointer; user-select: none;
}
#cont-ordine-panel .ord-campi .ord-check input { margin: 0; cursor: pointer; }
/* categoria diversa da Prodotto: niente giacenza, la scelta non si applica */
#cont-ordine-panel .ord-campi .ord-check.ord-off { opacity: .45; cursor: default; }
#cont-ordine-panel .ord-campi .ord-check.ord-off input { cursor: default; }
#cont-ordine-panel .ord-campi .cont-editor {
  width: 100%;
  min-width: 0;
  margin-top: 2px;
  height: 29px;
  box-sizing: border-box;
  padding: 2px 7px;
  font-size: 12.5px;
  border: 1px solid var(--g-border-2);
  border-radius: 6px;
  background: #fff;
  color: var(--g-text);
  -webkit-appearance: none;
  appearance: none;
}
#cont-ordine-panel .ord-campi select.cont-editor {
  padding-right: 22px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236c757d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
#cont-ordine-panel .ord-campi .cont-editor:focus {
  outline: none;
  border-color: var(--g-focus);
  box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.12);
}
/* schermi stretti: torna a capo piuttosto che schiacciare i campi */
@media (max-width: 720px) {
  #cont-ordine-panel .ord-campi { flex-wrap: wrap; }
  #cont-ordine-panel .ord-campi label { flex: 1 1 45% !important; }
}
#cont-ordine-panel .ord-table { width: 100%; border-collapse: collapse; }
#cont-ordine-panel .ord-table th {
  text-align: left; font-size: 11px; color: var(--g-muted);
  padding: 4px 6px; border-bottom: 1px solid var(--g-border-2);
}
#cont-ordine-panel .ord-table td { padding: 3px 4px; vertical-align: top; }
/* Giacenza sotto la descrizione: un aiuto, non un dato — grigio chiaro come
   gli altri testi di suggerimento. Vuoto non occupa nessuna riga. */
#cont-ordine-panel .ord-gia {
  font-size: 11px; line-height: 1.35; color: var(--g-muted);
  padding: 1px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cont-ordine-panel .ord-gia-avviso { color: #9a6a10; }
#cont-ordine-panel .ord-gia-rosso  { color: #b32424; font-weight: 600; }
#cont-ordine-panel .ord-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--g-border-2);
}
#cont-ordine-panel .ord-save-btn {
  background: var(--g-accent); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 18px; font-weight: 600; cursor: pointer; font-size: 14px;
}
#cont-ordine-panel .ord-save-btn[disabled] { opacity: .5; cursor: default; }

/* Riga aperta da un link esterno (?mov=<id>, es. dalla scheda Fine mese):
   lampeggia e resta evidenziata qualche secondo, poi torna normale. */
#cont-grid tbody tr.cont-focus td {
  background: #fde68a !important;
  animation: cont-focus-flash 1.1s ease-out 2;
}
@keyframes cont-focus-flash {
  0%, 100% { background: #fde68a; }
  50%      { background: #fff7d6; }
}

/* Selezione righe in griglia contabilità + barra azioni flottante */
#cont-grid tbody tr.cont-selr td { background: #e8f1fd; }
#cont-grid tbody tr.cont-selr.cont-attesa td { background: #f3ecc9; }
#cont-grid tbody tr.cont-selr.cont-pronta td { background: #cde8d5; }
#cont-grid tbody tr.cont-selr.cont-ordinato td { background: #cfe3f7; }
#cont-grid tbody tr.cont-selr.cont-daordinare td { background: #edd2e4; }

#cont-selbar {
  position: fixed;
  left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 65;
  /* righe impilate: testata (info+Duplica+✕), fattura, DDT, nota, stato */
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  max-width: calc(100vw - 24px);
  background: #1f2530; color: #f5f2ec;
  border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  max-width: 94vw; flex-wrap: wrap;
}
#cont-selbar .cont-editor {
  height: 30px; border-radius: 6px; border: 0; padding: 2px 8px; font-size: 12.5px;
  background: #fff; color: #1f2530;      /* barra scura: forza testo scuro leggibile */
  -webkit-appearance: none; appearance: none;
}
#cont-selbar input[type="date"].cont-editor { color-scheme: light; } /* icona calendario scura */
#cont-selbar .cont-selbar-btn {
  background: var(--g-accent); color: #fff; border: 0; border-radius: 8px;
  padding: 7px 14px; font-weight: 600; cursor: pointer; font-size: 13px;
}
#cont-selbar .cont-selbar-link {
  background: transparent; color: #cfd6e0; border: 0; cursor: pointer; font-size: 12.5px;
  text-decoration: underline;
}
#cont-selbar .cont-selbar-link:hover { color: #fff; }

/* Selezione a intervallo (Shift+click): niente selezione testo sulla colonna ☑ */
#cont-grid td[data-col="sel"], #cont-grid th[data-col="sel"] {
  -webkit-user-select: none; user-select: none;
}

/* Frecce di riordino nel pannello Colonne */
#cont-cols-panel { width: 260px; }
#cont-cols-panel .cont-cols-item { display: flex; align-items: center; gap: 4px; }
#cont-cols-panel .cont-cols-mv {
  border: 1px solid var(--g-border-2); background: #fff; border-radius: 4px;
  width: 22px; height: 20px; line-height: 1; font-size: 9px; cursor: pointer;
  color: var(--g-text-2); flex: 0 0 auto;
}
#cont-cols-panel .cont-cols-mv:hover { background: var(--g-surface); border-color: var(--g-focus); }

/* Barra selezione: separatore e bottone secondario (Duplica) */
#cont-selbar .cont-selbar-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.25); }
#cont-selbar .cont-selbar-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
#cont-selbar .cont-selbar-head #cont-selbar-info { margin-right: auto; }
/* La testata è la maniglia: il pannello copriva le ultime righe della griglia,
   ora lo si trascina dove non dà fastidio (posizione ricordata dal browser). */
#cont-selbar .cont-selbar-head { cursor: move; touch-action: none; }
#cont-selbar .cont-selbar-head button,
#cont-selbar .cont-selbar-head input { cursor: pointer; }
#cont-selbar .cont-selbar-grip {
  color: #7f8b9c; font-size: 15px; line-height: 1; letter-spacing: -1px;
  -webkit-user-select: none; user-select: none;
}
#cont-selbar.cont-selbar-drag {
  opacity: 0.96; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none; user-select: none;
}
/* input | bottone | link incolonnati tra riga fattura e riga DDT
   (tutte le colonne a larghezza fissa: "auto" varierebbe tra le righe) */
#cont-selbar .cont-selbar-row {
  display: grid; grid-template-columns: 175px 150px 90px;
  gap: 10px; align-items: center;
}
/* riga della nota: input | assegna | aggiungi in coda | togli */
#cont-selbar .cont-selbar-row.cont-selbar-row4 { grid-template-columns: 175px 150px 130px 90px; }
#cont-selbar .cont-selbar-row .cont-selbar-btn { width: 100%; padding-left: 4px; padding-right: 4px; }
#cont-selbar .cont-selbar-row .cont-selbar-link { justify-self: start; }
#cont-selbar .cont-selbar-btn2 {
  background: #3b4453; color: #f0f3f8; border: 1px solid #55607280; border-radius: 8px;
  padding: 6px 12px; font-weight: 600; cursor: pointer; font-size: 12.5px;
}
#cont-selbar .cont-selbar-btn2:hover { background: #47536580; background: #475365; }

/* Mini-dialog "Duplica" centrato (calendario con spazio attorno) */
#cont-dup-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,20,25,0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#cont-dup-panel {
  background: #fff; color: var(--g-text); border-radius: 12px;
  width: min(380px, 94vw); padding: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
}
#cont-dup-panel .cont-dup-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
#cont-dup-panel .cont-dup-sub { font-size: 12.5px; color: var(--g-muted); margin-bottom: 14px; line-height: 1.4; }
#cont-dup-panel .cont-dup-lab { display: block; font-size: 11px; font-weight: 600; color: var(--g-muted); margin-bottom: 4px; }
#cont-dup-panel #cont-dup-data {
  width: 100%; height: 36px; box-sizing: border-box; padding: 4px 8px;
  border: 1px solid var(--g-border-2); border-radius: 8px; font-size: 14px;
  color: var(--g-text); background: #fff; color-scheme: light;
}
#cont-dup-panel .cont-dup-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; }

/* Modale "Contabilizza campione" (cont-campioni.js) — riusa lo stile del
   modale ordine rapido: overlay centrato, pannello, tabella, footer. */
#cont-camp-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,20,25,0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
}
/* Allargato il 28/08/2026: dentro c'è la tabellina delle analisi fatte, e
   dodici parametri in 760 px non ci stavano. */
#cont-camp-panel {
  background: #fff; border-radius: 12px; width: min(1240px, 96vw);
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
  padding: 16px 18px; font-size: 13px;
}
#cont-camp-panel .ord-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 15px; }
#cont-camp-panel .ord-table { width: 100%; border-collapse: collapse; }
#cont-camp-panel .ord-table th { text-align: left; font-size: 11px; color: var(--g-muted); padding: 4px 6px; border-bottom: 1px solid var(--g-border-2); }
#cont-camp-panel .ord-table td { padding: 4px 6px; vertical-align: middle; }
#cont-camp-panel .cont-editor {
  width: 100%; box-sizing: border-box; height: 30px; padding: 2px 7px;
  border: 1px solid var(--g-border-2); border-radius: 6px; font: inherit;
  background: #fff; color: var(--g-text); -webkit-appearance: none; appearance: none;
}
#cont-camp-panel select.cont-editor {
  padding-right: 22px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236c757d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
#cont-camp-panel .cont-editor:focus { outline: none; border-color: var(--g-focus); box-shadow: 0 0 0 2px rgba(44,62,80,0.12); }
#cont-camp-panel .ord-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--g-border-2); }

/* Modale contabilizza campione: banner e riga vino editabile */
#cont-camp-panel .cc-banner { font-size: 12.5px; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; }
#cont-camp-panel .cc-banner-red { background: #fde8e8; color: #b02a2a; }
#cont-camp-panel .cc-banner-amber { background: #fdf3d0; color: #7a5c05; }
#cont-camp-panel .cc-vino { width: 100%; }

/* Sentinella del rendering a finestre (griglia Contabilità): riga in fondo
   che carica il blocco successivo allo scroll */
.cont-more-td { padding: 12px 14px; text-align: center; color: #8f8c99; font-size: 12.5px; background: #fafafa; }
.cont-more-td a { color: #C8175C; text-decoration: underline; }

/* Autocomplete descrizioni (sostituisce i datalist nativi, rotti con
   option.label e ~2.000 voci): pannello unico, sopra i modali (z 70-80).
   Deve stare sopra ANCHE al modale del widget Scan referto, che vive fuori da
   questa scala (.scan-overlay z 10000, scan-widget.js): a z 120 il pannello
   finiva dietro il velo scuro e la tendina dei clienti sembrava non aprirsi. */
#cont-ac {
  position: fixed; z-index: 10050;
  background: #fff; border: 1px solid #d9d6e0; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(35, 33, 44, .22);
  max-height: 264px; overflow-y: auto; max-width: 480px;
}
#cont-ac .ac-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 6px 10px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
#cont-ac .ac-item.on, #cont-ac .ac-item:hover { background: #faeef3; }
#cont-ac .ac-nome { overflow: hidden; text-overflow: ellipsis; }
#cont-ac .ac-forn { color: var(--g-muted); font-size: 10.5px; flex: 0 0 auto; }
#cont-ac .ac-more { padding: 5px 10px; font-size: 10.5px; color: var(--g-muted); border-top: 1px solid #eee; }

/* Form nuova voce Listino: select Categoria alta e allineata come gli input
   a fianco (la select nativa ha metriche diverse, specie su Safari) */
#lst-add-form input, #lst-add-form select { height: 34px; box-sizing: border-box; }
#lst-add-form select {
  -webkit-appearance: none; appearance: none;
  padding-right: 26px; background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236c757d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}

/* Mobile: i campi filtro delle griglie a 16px per evitare lo ZOOM automatico
   di iOS/Safari al focus (succede quando il testo è < 16px). Non tocca il
   pinch-zoom, solo l'auto-zoom sul campo. Vale per tutte le tabelle con .f-col
   (contabilità, campioni, clienti, preventivi, protocolli). */
@media (max-width: 640px) {
  .f-col { font-size: 16px !important; }
}

/* ─── Magazzino (magazzino.js): modale rettifica + anteprima DDT letto dall'AI.
   Stessa impostazione dei modali di Contabilità (overlay scuro, pannello
   bianco centrato); z-index 80 come gli altri, sotto l'autocomplete. */
.mag-ov {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,20,25,0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
}
.mag-ov .mag-panel {
  background: #fff; border-radius: 12px; width: min(420px, 96vw);
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
  padding: 18px 20px; font-size: 13px; color: var(--g-text);
}
.mag-ov.mag-ov-wide .mag-panel { width: min(920px, 96vw); }
.mag-ov.mag-ov-load { align-items: center; }
.mag-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mag-x { border: none; background: none; font-size: 16px; color: var(--g-muted); cursor: pointer; line-height: 1; }
.mag-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.mag-sub { font-size: 12.5px; color: var(--g-muted); margin-bottom: 14px; line-height: 1.4; }
.mag-hint { font-size: 11.5px; color: var(--g-muted); margin: 4px 0 0; }
.mag-lab { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.mag-lab.mt { margin-top: 14px; }
.mag-banner { background: #fdf3d0; color: #7a5c05; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; }
.mag-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--g-border-2); }
.mag-foot .mag-hint { margin-right: auto; }
.mag-btn { background: #C8175C; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; font-size: 13px; }
.mag-btn:disabled { opacity: .6; cursor: default; }
.mag-btn-ghost { background: #fff; color: var(--g-text); border: 1px solid var(--g-border-2); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; }
.mag-testata { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.mag-testata label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--g-muted); }
.mag-testata label.grow { flex: 1 1 220px; }
.mag-table { width: 100%; border-collapse: collapse; }
.mag-table th { text-align: left; font-size: 11px; color: var(--g-muted); padding: 4px 6px; border-bottom: 1px solid var(--g-border-2); font-weight: 600; }
.mag-table td { padding: 4px 6px; vertical-align: top; border-bottom: 1px solid #f2f0ec; }
.mag-table .w-q { width: 90px; }
.mag-table .mag-td-desc { font-size: 12px; line-height: 1.35; max-width: 260px; }
.mag-table .mag-cod { display: block; font-size: 10.5px; color: var(--g-muted); }
.mag-table .mag-del-riga { border: none; background: none; color: var(--g-muted); cursor: pointer; font-size: 13px; }
.mag-table .mag-del-riga:hover { color: #c94545; }
.mag-warn { font-size: 10.5px; color: #b02a2a; margin-top: 2px; }
.mag-spin {
  width: 26px; height: 26px; margin: 4px auto 0;
  border: 3px solid #eee; border-top-color: #C8175C; border-radius: 50%;
  animation: mag-spin 0.9s linear infinite;
}
@keyframes mag-spin { to { transform: rotate(360deg); } }

/* ---- gestione colonne (vp-cols.js) ------------------------------------- */
/* Alias storico: alcune viste usano .vp-wrap. Senza questa regola la tabella
   non ha un contenitore che scorre, la pagina scorre di lato e l'intestazione
   nera resta indietro (larga quanto la finestra, non quanto il contenuto). */
.vp-wrap { overflow-x: auto; overflow-y: visible; background: var(--g-bg);
           border: 1px solid var(--g-border-2); border-radius: 6px; }

.vpcols-pan { position: absolute; z-index: 60; margin-top: 6px; width: 290px; max-height: 60vh;
              overflow: auto; background: #fff; border: 1px solid var(--g-border-2);
              border-radius: 8px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); padding: 8px; }
.vpcols-testa { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
                color: var(--g-muted); padding: 2px 4px 6px; display: flex; justify-content: space-between; gap: 8px; }
.vpcols-hint { font-weight: 500; text-transform: none; letter-spacing: 0; }
.vpcols-lista { list-style: none; margin: 0; padding: 0; }
.vpcols-lista li { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 5px;
                   font-size: 13px; cursor: grab; }
.vpcols-lista li:hover { background: var(--g-bg-2); }
.vpcols-lista li.vpcols-preso { opacity: .45; background: var(--g-hover); }
.vpcols-lista label { display: flex; align-items: center; gap: 6px; flex: 1; cursor: pointer; min-width: 0; }
.vpcols-lista label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpcols-maniglia { color: var(--g-muted); font-size: 11px; letter-spacing: -2px; cursor: grab; }
.vpcols-piede { display: flex; gap: 6px; justify-content: space-between; padding-top: 8px; margin-top: 6px;
                border-top: 1px solid var(--g-border); }
.vpcols-piede button { font-size: 12px; border: 1px solid var(--g-border-2); background: #fff;
                       border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.vpcols-piede button:hover { background: var(--g-bg-2); }

/* ---- griglie a tutto schermo (Vinificazione) ---------------------------- */
/* Il contenitore prende tutta l'altezza che resta: scorrono le righe, non la
   pagina. Il numero e' l'ingombro di intestazione + barra strumenti sopra. */
.vp-piena { overflow: auto; height: calc(100vh - var(--vp-sopra, 300px));
            background: var(--g-bg); border: 1px solid var(--g-border-2); border-radius: 6px; }
/* NIENTE width qui: la mette vp-lite.js sommando le larghezze dichiarate.
   Con `max-content` la tabella veniva dimensionata sul contenuto e
   `table-layout: fixed` ridistribuiva l'eccedenza su tutte le colonne, che
   diventavano molto piu' larghe del dichiarato. */

/* Ordinamento cliccando l'intestazione: la freccia dice colonna e verso. */
.vp-table th.vp-ordinabile { cursor: pointer; }
.vp-table th.vp-ord-su::after  { content: ' \\25B2'; font-size: 8px; opacity: .85; }
.vp-table th.vp-ord-giu::after { content: ' \\25BC'; font-size: 8px; opacity: .85; }

/* Colonne bloccate a sinistra: i «riquadri bloccati» del foglio. Lo scostamento
   lo calcola vp-cols.js, perche' dipende dalle larghezze correnti e da quali
   colonne sono nascoste o spostate. */
.vp-table td.vp-fix, .vp-table th.vp-fix { position: sticky; z-index: 3; background: var(--g-bg); }
.vp-table thead th.vp-fix { z-index: 6; background: var(--g-surface); }
.vp-table tfoot td.vp-fix { z-index: 5; }
.vp-table .vp-fix-ultima { border-right: 2px solid var(--g-border-2); }
/* Le righe colorate devono restare colorate anche nella parte bloccata,
   altrimenti scorrendo si vede una striscia bianca dove il resto e' verde. */
.vp-table tbody tr.sched-spezz td.vp-fix { background: #f3f7f4; }
.vp-table tbody tr.sched-blocco td.vp-fix { background: #fdf0f0; }
.vp-table tbody tr.sched-sub td.vp-fix { background: #edf3ec; }
.vp-table tbody tr.cant-venduta td.vp-fix { background: #f4f6f8; }
.vp-table tbody tr:hover td.vp-fix { background: var(--g-hover); }
.vp-table tfoot tr td.vp-fix { background: #fdf0e2; }

/* Filtri compatti dentro l'intestazione, come in Contabilita. Prima gli stili
   stavano solo sotto .vp-list e le griglie della Vinificazione, che non hanno
   quella classe, mostravano input grezzi del browser. */
.vp-table .filtri th { padding: 3px 4px; background: var(--g-bg); border-bottom: 1px solid var(--g-border-2); }
.vp-table .filtri .f-col { width: 100%; border: 1px solid var(--g-border-2); border-radius: 4px;
                           padding: 2px 5px; font-size: 11.5px; font-weight: 400; color: var(--g-text);
                           background: #fff; min-width: 0; }
.vp-table .filtri .f-col:focus { outline: none; border-color: var(--g-focus); }
/* Il `top` viene dalla misura della riga titoli: --vp-h1, che vp-sticky.js
   (caricato dal layout su OGNI pagina) scrive sul wrapper della tabella;
   vp-cols.js la rimette anche sui th quando cambiano le colonne.
   ⚠️ Qui c'era `top: 30px` fisso. Stessa specificita' della regola gemella piu'
   in alto (.vp-table thead tr:nth-child(2) th) ma piu' in basso nel file,
   quindi vinceva la costante e ANNULLAVA la misura: con l'intestazione alta
   26px restava una fessura di 4px fra le due righe fisse, e le righe della
   tabella si vedevano scorrere li' dentro (segnalato dall'utente il
   21/08/2026 su Incassi). Mai rimettere un numero fisso qui dentro. */
.vp-table thead tr.filtri th { top: var(--vp-h1, 26px); }

/* Colonna di riempimento: nessuna larghezza dichiarata, quindi con
   table-layout:fixed si prende tutto lo spazio che avanza. Serve a far
   arrivare la tabella al bordo destro senza allargare le colonne vere. */
.vp-table th.vp-riempi, .vp-table td.vp-riempi { width: auto; padding: 0; border-right: 0; }
.vp-table thead th.vp-riempi { background: var(--g-bg-2); }

/* ---- tendina dei valori nei filtri di colonna (vp-filtri.js) ------------ */
/* NIENTE position qui: il th e' gia' posizionato dallo sticky di base
   (thead th sticky, e vp-fix per le colonne bloccate), quindi la freccia
   assoluta si ancora comunque. Metterci position:relative — stessa
   specificita' dello sticky ma piu' in basso nel file — SPEGNEVA lo sticky
   su tutte le intestazioni: l'header non restava piu' fisso e i `left`
   delle colonne bloccate diventavano SPOSTAMENTI relativi (fg a 44+44,
   supvit a 146+146): i buchi bianchi a sinistra venivano da qui. */
.vp-table th.vpf-cella .f-col { padding-right: 15px; }
.vpf-freccia { position: absolute; right: 6px; bottom: 6px;
               width: 12px; height: 12px; padding: 0; border: 0; background: none; cursor: pointer;
               opacity: .55; }
.vpf-freccia::after { content: ''; position: absolute; left: 2px; top: 4px;
                      border-left: 4px solid transparent; border-right: 4px solid transparent;
                      border-top: 4px solid var(--g-text-2); }
.vpf-freccia:hover { opacity: 1; }

.vpf-pop { position: fixed; z-index: 95; min-width: 190px; max-width: 340px; max-height: 320px;
           overflow-y: auto; background: #fff; border: 1px solid var(--g-border-2);
           border-radius: 8px; box-shadow: 0 12px 34px -14px rgba(0,0,0,.4); padding: 4px; }
.vpf-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px;
             font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--g-muted);
             padding: 2px 6px 5px; border-bottom: 1px solid var(--g-border); }
.vpf-testa button { font-size: 10px; text-transform: none; letter-spacing: 0; border: 0;
                    background: none; color: var(--g-accent); cursor: pointer; padding: 0; }
.vpf-testa button:hover { text-decoration: underline; }
.vpf-voce { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
            border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px;
            padding: 2px 6px; border-radius: 5px; }
.vpf-voce span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpf-voce i { font-style: normal; font-size: 10px; color: var(--g-muted);
              font-variant-numeric: tabular-nums; }
.vpf-voce:hover, .vpf-voce.on { background: var(--g-hover); }
.vpf-vuoto { padding: 8px 6px; font-size: 12px; color: var(--g-muted); }

/* ---- vp-fitto: regole condivise delle griglie compatte (Vinificazione) ----
   Stavano nello <style> della pagina Schedario: la pagina Vinificazione, che
   usa la stessa classe, non le riceveva — e i titoli restavano GRIGI sulla
   fascia colorata, quasi illeggibili. Le regole di pagina possono solo
   aggiungere, mai essere il posto dove vive il colore del testo. */
.vp-fitto { font-size: 11.5px; }
.vp-fitto td { padding: 0 4px; }
.vp-fitto thead th { padding: 2px 3px 3px; font-size: 10.5px; font-weight: 700; line-height: 1.1;
                     white-space: normal; vertical-align: bottom; color: #fff; }
.vp-fitto thead th .th-titolo { min-height: 22px; display: flex; align-items: flex-end;
                                justify-content: center; text-align: center; }
.vp-fitto thead th .f-col { display: block; margin-top: 3px; }
.vp-fitto select, .vp-fitto input { appearance: none; -webkit-appearance: none; }
.vp-fitto input[type=checkbox] { appearance: auto; -webkit-appearance: checkbox;
                                 width: 12px; height: 12px; margin: 0 auto; display: block; }


/* ================================================================
   Pagina a griglia piena (classe messa da vp-sticky.js quando sotto
   la tabella non c'è contenuto vero): la tabella arriva in fondo.
   Il piè di pagina è decorativo — dice solo il nome del gestionale —
   e insieme ai margini bassi si prendeva ~130px, cioè due o tre righe
   di tabella su ogni lista. Sulle pagine con un modulo sotto la
   griglia la classe non viene messa e il piè di pagina resta.
   ================================================================ */
html.griglia-piena > body > footer { display: none; }
html.griglia-piena main            { padding-bottom: .5rem; }


/* La tabellina delle ANALISI FATTE nel modale di contabilizzazione (28/08/2026):
   la stessa lettura della scheda campione — titoli sopra, una riga per vino —
   ma con le sole colonne valorizzate. Compatta, e se i parametri sono davvero
   tanti scorre di lato invece di stringere i numeri fino a non leggerli. */
#cont-camp-panel .cc-an-wrap { overflow-x: auto; margin-bottom: 12px; border: 1px solid var(--g-border-2); border-radius: 8px; }
#cont-camp-panel table.cc-an { border-collapse: collapse; width: 100%; font-size: 12px; }
#cont-camp-panel table.cc-an th,
#cont-camp-panel table.cc-an td { padding: 4px 8px; white-space: nowrap; text-align: right; }
#cont-camp-panel table.cc-an thead th { font-size: 10.5px; font-weight: 600; color: var(--g-muted);
  background: var(--g-paper, #faf9f7); border-bottom: 1px solid var(--g-border-2); position: sticky; top: 0; }
#cont-camp-panel table.cc-an thead th:first-child,
#cont-camp-panel table.cc-an tbody th { text-align: left; font-weight: 600; }
#cont-camp-panel table.cc-an tbody th { color: var(--g-ink, #1c1917); background: #fff; position: sticky; left: 0; }
#cont-camp-panel table.cc-an tbody tr + tr th,
#cont-camp-panel table.cc-an tbody tr + tr td { border-top: 1px solid var(--g-border-2); }


/* Le VOCI da fatturare sotto la loro analisi (28/08/2026): la riga occupa tutta
   la larghezza della tabella e si stacca da quella sopra con un rientro e uno
   sfondo appena diverso — si deve vedere a colpo d'occhio che appartiene al
   vino di sopra, non che è una riga come le altre. */
#cont-camp-panel table.cc-an tbody tr.cc-an-riga th,
#cont-camp-panel table.cc-an tbody tr.cc-an-riga td { border-top: 2px solid var(--g-border-2); }
#cont-camp-panel table.cc-an tbody tr:first-child th,
#cont-camp-panel table.cc-an tbody tr:first-child td { border-top: 0; }
#cont-camp-panel tr.cc-an-voci > td { padding: 6px 8px 10px 22px; background: var(--g-paper, #faf9f7); text-align: left; white-space: normal; }
#cont-camp-panel table.cc-voci { border-collapse: collapse; width: 100%; }
#cont-camp-panel table.cc-voci td { padding: 3px 6px 3px 0; vertical-align: middle; text-align: left; white-space: nowrap; }
#cont-camp-panel table.cc-voci td:nth-child(1) { width: 22%; }
#cont-camp-panel table.cc-voci td:nth-child(2) { width: 40%; }
#cont-camp-panel table.cc-voci td:nth-child(3) { width: 14%; }
#cont-camp-panel table.cc-voci td:nth-child(4) { width: 16%; font-size: 11px; color: #888; }
#cont-camp-panel table.cc-voci td:nth-child(5) { width: 8%; text-align: center; }
#cont-camp-panel .cc-add { margin-top: 4px; font-size: 11.5px; }