/* Regole CONDIVISE tra tutti i motori "smart" (TabellaSmart, RaggruppamentoSmart, e futuri —
 * es. un motore grafico) — estratte da tabella-smart.css (2026-09-24) perché quel file, nonostante
 * il nome, era già usato anche da raggruppamento-smart.js: segnalato dal vivo ("se vuoi tenere un
 * solo css cambia nome oppure dividi quello in comune dagli altri"). Regole davvero specifiche di UN
 * solo motore restano nel CSS di quel motore (tabella-smart.css per ora — raggruppamento-smart.js
 * non ha ancora bisogno di un CSS proprio, tutto quel che gli serve è qui).
 */

/* SelettoreViste (selettore-viste.js) — motore-agnostico anche lui, usato da qualunque pagina con
 * viste nominate, non solo Tabella: flex invece di pull-right (float) — il float andava a capo su
 * nomi lunghi in un menu stretto (bug reale segnalato dal vivo). Il cestino ha un colore/sfondo-hover
 * suo, ben distinto dal resto della voce (nome = applica, cestino = elimina, azioni diverse una
 * accanto all'altra vanno distinte bene, non solo per posizione). */
.ts-selettore-viste .ts-sv-menu > li > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; white-space: nowrap; }
.ts-selettore-viste .ts-sv-nome { overflow: hidden; text-overflow: ellipsis; }
.ts-selettore-viste .ts-sv-azioni-riga { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ts-selettore-viste .ts-sv-elimina-item,
.ts-selettore-viste .ts-sv-aggiorna-item,
.ts-selettore-viste .ts-sv-pin-item {
  padding: 3px 5px; border-radius: 3px; opacity: .55;
  transition: opacity .1s, background-color .1s, color .1s;
}
.ts-selettore-viste .ts-sv-elimina-item,
.ts-selettore-viste .ts-sv-aggiorna-item { color: #d9534f; }
.ts-selettore-viste .ts-sv-elimina-item:hover,
.ts-selettore-viste .ts-sv-aggiorna-item:hover { opacity: 1; background: rgba(217, 83, 79, .12); }
.ts-selettore-viste .ts-sv-lock-icon { color: #999; }
.ts-selettore-viste .ts-sv-menu-ambiti > li > a { white-space: nowrap; }
.ts-selettore-viste .ts-sv-menu-ambiti .fa { width: 16px; text-align: center; margin-right: 4px; }
.ts-selettore-viste .ts-sv-menu > li.disabled > a { color: #999; cursor: default; }
/* Pin (tab, vedi self._disegnaTabs() in selettore-viste.js): grigio spento se non pinnata, arancione
   pieno se pinnata — stesso colore del badge "Colonne" di TabellaSmart, nessun significato preso in
   prestito da altrove, solo un colore in più nella stessa famiglia. */
.ts-selettore-viste .ts-sv-pin-item { color: #999; }
.ts-selettore-viste .ts-sv-pin-item:hover { opacity: 1; background: rgba(243, 156, 18, .12); }
.ts-selettore-viste .ts-sv-pin-item.ts-sv-pin-attivo { color: #f39c12; opacity: 1; }
.ts-selettore-viste .ts-sv-tab { white-space: nowrap; }

/* Decorazioni header colonna Tabulator (icona ordinamento, badge priorità, bordi) — qualunque motore
 * basato su Tabulator con colonne ordinabili/i bordi standard ne ha bisogno, non solo TabellaSmart.
 * Frecce/icone di ordinamento nostre, non quelle native di Tabulator (troppo sottili/poco chiare). */
.tabella-smart-tabella .tabulator-col-sorter { display: none; }
.tabella-smart-tabella .tabulator-col, .tabella-smart-tabella .tabulator-cell { border-right: 1px solid #eee; }
.tabella-smart-tabella .tabulator-col-title { text-align: center; }
.tabella-smart-tabella .tabulator-col, .tabella-smart-tabella .tabulator-col-title { position: relative; cursor: default; }
.tabella-smart-tabella .tabulator-col.tabulator-sortable:hover { background-color: transparent; }
.tabella-smart-tabella .ordine-header-icona { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #ccc; }
.tabella-smart-tabella .ordine-header-icona.ordine-attivo { color: #0073b7; font-weight: bold; }
.tabella-smart-tabella .ordine-header-priorita { position: absolute; left: 20px; top: 6px; font-size: 9px; color: #0073b7; font-weight: bold; }

/* Bug noto Tabulator (calcolo altezza di 1px in meno del contenuto): mostra comunque una scrollbar
 * verticale interna anche senza vero overflow, mangiandosi spazio orizzontale utile — bug reale
 * segnalato dal vivo, scoperto dall'utente in devtools. hidden invece di auto: nessun motore smart
 * imposta un'altezza esplicita a Tabulator, quindi non serve mai uno scroll verticale interno. */
.tabella-smart-tabella .tabulator-tableholder { overflow-y: hidden; }

/* Footer nativo di Tabulator (controlli di paginazione propri) sempre nascosto: ogni motore smart
 * gestisce la propria paginazione (o l'assenza di paginazione) fuori da Tabulator. */
.tabella-smart-tabella .tabulator-footer-contents { display: none !important; }

/* Riga di aggregazione (bottomCalc) — condivisa: entrambi i motori con colonne "aggregabile"
 * (TabellaSmart) o "aggregato" (Raggruppamento) la mostrano in fondo, stesso Tabulator sotto. */
.tabella-smart-tabella .tabulator-calcs-holder { border-top: 1px solid #ddd; }
.tabella-smart-tabella .tabulator-calcs-bottom { background-color: #f9f9f9; }
.tabella-smart-tabella .tabulator-calcs-bottom .tabulator-cell { height: auto; white-space: normal; }
/* Raggruppamento: senza colonne/righe (primo caricamento) il Tabulator ha altezza ~0 e l'overlay
 * "Caricamento..." (table.alert) non si vedrebbe — altezza minima solo per lui. */
.tabella-smart-tabella.rg-tabella .tabulator { min-height: 90px; }

/* Raggruppamento: piede con 4 linee (Σ μ ▼ ▲) per colonna aggregato — stessa idea del piede di
 * TabellaSmart (.ts-agg-grid in tabella-smart.css) ma a 2 colonne (simbolo, numero): qui non c'è la
 * coppia filtrato/pagina, un solo valore per funzione. */
.tabella-smart-tabella .rg-agg-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: 16px; row-gap: 0; align-items: center; font-size: 12px; line-height: 16px; }
.tabella-smart-tabella .rg-agg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 16px; }
/* Titoli delle fasce (prima colonna): grigio chiaro, tooltip con la nota (es. la media non pesata). */
.tabella-smart-tabella .rg-agg-lbl { color: #aaa; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }

/* Checkbox del popup Filtri (liste "è tra i seguenti", FiltriSmart — filtri-smart.js, condiviso):
 * nativa, nascosta ma sempre nel flusso normale (cliccabile/raggiungibile da tastiera, non
 * display:none) — sostituisce iCheck, troppo lento con liste lunghe (bug reale segnalato dal vivo,
 * "Svuota" freezava la pagina). Ogni opzione è un "boxino"/chip a sé (bordo + sfondo chiaro), più per
 * riga; selezionato -> sfondo verde. Tutto via :has(), supportato da tutti i browser correnti
 * (Chrome/Edge/Firefox aggiornati). */
.ts-modal-filtri .valore-lista-caselle { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.ts-modal-filtri .valore-lista-box {
  position: relative; display: inline-flex; align-items: center; margin: 0;
  padding: 5px 10px; border: 1px solid #d9dfe4; border-radius: 4px; background: #f7f8fa;
  font-weight: normal; line-height: 1.2; cursor: pointer; user-select: none;
  transition: background-color .1s, border-color .1s;
}
.ts-modal-filtri .valore-lista-box:hover { background: #eef1f4; }
.ts-modal-filtri .valore-lista-opzione { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ts-modal-filtri .valore-lista-box:has(.valore-lista-opzione:checked) {
  background: #00a65a; border-color: #00a65a; color: #fff;
}
.ts-modal-filtri .valore-lista-box:has(.valore-lista-opzione:focus-visible) { box-shadow: 0 0 0 2px rgba(60,141,188,0.5); }

/* Modal "Esporta" (EsportazioneSmart, esportazione-smart.js — condiviso): elenco dei campi su due colonne,
 * scorrevole se lungo. */
.ts-modal-esporta .ts-esporta-campi { display: flex; flex-wrap: wrap; max-height: 40vh; overflow-y: auto; border: 1px solid #eee; padding: 6px 10px; border-radius: 3px; }
.ts-modal-esporta .ts-esporta-campo { flex: 0 0 50%; margin: 2px 0; font-weight: normal; cursor: pointer; }
.ts-modal-esporta .ts-esporta-sezione-campi { margin-top: 12px; }

/* Colori badge sui pulsanti toolbar — un colore per concetto, condiviso da qualunque motore che
 * abbia quel concetto (Filtri/Ordine esistono già in più di un motore; Colonne/Raggruppamenti/
 * Aggregazioni sono per ora specifici di un motore solo, ma il colore resta qui insieme agli altri:
 * è un gruppo piccolo e coeso, non vale la pena separarlo di nuovo per motore).
 * Specificità alzata (.btn .badge): Bootstrap ha .btn-default .badge {background:#333} che altrimenti
 * vince sui colori sotto. */
.btn .badge.tabella-smart-badge-colonne { background-color: #f39c12; color: #fff; }
.btn .badge.tabella-smart-badge-filtri { background-color: #00a65a; color: #fff; }
.btn .badge.tabella-smart-badge-ordine { background-color: #0073b7; color: #fff; }
.btn .badge.tabella-smart-badge-raggruppamenti { background-color: #605ca8; color: #fff; }
.btn .badge.tabella-smart-badge-aggregazioni { background-color: #00c0ef; color: #fff; }

/* Contenitore di TabellaSmart/Raggruppamento (markupBox() in entrambi i motori) — volutamente NEUTRO,
 * niente sfondo/bordo/ombra/border-radius da "card": è un div, non un box — segnalato dal vivo
 * ("togliamo sto concetto della tabella legata ad un box primary... rendiamola più neutra possibile
 * anche solo un div, poi se la voglio mettere in un box ce la metto"). Chi la usa può ancora
 * incapsularla in un box suo (AdminLTE o altro) da fuori, senza che il motore lo imponga. Restano solo
 * le regole FUNZIONALI: header/toolbar sono flex-row che vanno a capo da soli (titolo sopra, toolbar
 * sotto se non ci sta affiancato). */
/* Funzionale, non decorativo: senza, un div senza contenuto "largo" può restare stretto al proprio
 * contenuto invece di riempire il contenitore che lo ospita — Tabulator (TabellaSmart, layout
 * fitDataFill) e RaggruppamentoSmart calcolano QUANTO spazio residuo c'è da distribuire sulle colonne
 * misurando QUESTO contenitore: se lui stesso non arriva alla larghezza vera disponibile, non c'è
 * spazio residuo da distribuire e l'ultima colonna (spesso "_menu") resta stretta/sproporzionata.
 * Segnalato dal vivo. */
.ts-box, .ts-box-body, .ts-tabella, .rg-tabella {
  width: 100%;
  box-sizing: border-box;
}
.ts-box-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ts-box-title {
  margin: 0;
  text-align: left;
  flex: 0 1 auto;
  font-size: 18px;
  line-height: 1;
  color: #444;
}
.ts-box-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}