/* #GIGI 2026-08-19 — oesisTable · ASPETTO.
 *
 * Densita' da tabella d'ufficio (riga 28px, testo 12) e colori istituzionali,
 * gli stessi che aveva il motore precedente: chi usa l'applicazione non deve
 * accorgersi che sotto e' cambiata la libreria, se non per le funzioni in piu'.
 *
 * Le proporzioni di serie di Tabulator sono generose: su un elenco di 156
 * canoni si vedrebbero meno di venti righe per schermata e si scorrerebbe in
 * continuazione.
 *
 * ⚠️ SI SCRIVE `.ot-box.tabulator`, ATTACCATO — non `.ot-box .tabulator`.
 * Tabulator mette la propria classe SULLO STESSO elemento che gli si passa,
 * non su un figlio: con lo spazio si descrive un discendente che non esiste e
 * l'intero foglio di stile non ha effetto. E' cio' che teneva le caselle dei
 * filtri con l'aspetto di serie e impediva al pulsante «Filtri» di
 * nasconderle.
 */

/* ⚠️ NESSUN PADDING QUI. `.ot-wrap` sta DENTRO la card del modulo
   (`.dem-card` / `.prt-card`), che i suoi 8px ce li ha gia': aggiungerne altri
   qui li raddoppia e la tabella rientra rispetto a tutto il resto della
   pagina. Il respiro appartiene al CONTENITORE, mai al contenuto — la stessa
   ragione per cui `.bs-main` mette 8px e i moduli non li ridefiniscono.
   #GIGI 2026-08-19 */
.ot-wrap { position: relative; }

/* ── barra degli strumenti ─────────────────────────────────────────────── */
.ot-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0 0 8px;
}
.ot-conta { font-size: .78rem; color: #5a6772; }
.ot-az { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ── «Azzera» e «Cerca», portati qui da `eo_filtri` ───────────────────────
   Stanno PRIMA degli strumenti e se ne staccano con una linea sottile: sono
   comandi di natura diversa — vanno a chiedere le righe al server, mentre
   Filtri e Colonne lavorano su quelle gia' arrivate. */
.ot-az .ot-cerca {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 8px 0 0;
    padding-right: 10px;
    border-right: 1px solid #dbe1e9;
}
/* ⚠️ QUI NON SI RIDEFINISCE PIU' LA MISURA DEI PULSANTI. #GIGI 2026-08-20
   L'altezza copriva SOLO i due pulsanti dentro `.ot-cerca` («Azzera» e
   «Cerca», che arrivano da `eo_filtri`), mentre quelli nati qui — Filtri,
   Colonne, Raggruppa, CSV, Excel — restavano alla misura di serie: nella
   STESSA barra convivevano due altezze, con le stesse identiche classi.
   Adesso la taglia Xs la porta `.btn-it-sm` in `agid-buttons.css`, una volta
   sola per tutta l'applicazione. */

/* ── SCHERMI STRETTI: I PULSANTI A COPPIE ─────────────────────────────────
   Sotto i 700px i sei comandi non ci stanno in fila e andrebbero a capo uno
   per volta, lasciando righe con un pulsante solo. Qui vanno a DUE per riga
   nell'ordine in cui si usano: prima si cerca, poi si restringe, poi si
   esporta.
        [ Azzera ][ Cerca  ]
        [ Filtri ][ Colonne]
        [  CSV   ][ Excel  ]                              #GIGI 2026-08-19 */
@media (max-width: 700px) {
    .ot-bar { flex-wrap: wrap; }
    .ot-conta { flex: 1 1 100%; margin-bottom: 4px; }

    .ot-az {
        margin-left: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    /* i due della ricerca occupano la prima riga intera, uno per colonna */
    .ot-az .ot-cerca {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0 0 2px;
        padding: 0 0 6px;
        border-right: 0;
        border-bottom: 1px solid #dbe1e9;
    }
    /* ogni comando riempie la propria mezza riga: pulsanti di larghezze
       diverse su una griglia a due colonne si leggono come un errore */
    .ot-az > .btn-it,
    .ot-az > a.btn-it,
    .ot-az .ot-cerca .btn-it,
    .ot-az .ot-colmenu,
    .ot-az .ot-colmenu > .btn-it {
        width: 100%;
        justify-content: center;
    }
}

.ot-sel {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 2px 10px; border-radius: 20px;
    background: #e0ecf8; border: 1px solid #b8d4f0;
}
.ot-sel-n { font-size: .78rem; color: #17324d; }

/* Il richiamo «seleziona tutte le NN righe»: un collegamento, non un pulsante.
   E' un'alternativa a cio' che si e' appena fatto, non l'azione principale. */
.ot-sel-tutte,
.ot-sel-no {
    font-size: .78rem;
    color: #06c;
    text-decoration: underline;
    cursor: pointer;
}
.ot-sel-tutte:hover,
.ot-sel-no:hover { color: #04c; }
.ot-sel-no { color: #5a6772; }
.ot-sel .btn-it { padding: 1px 8px; font-size: 11px; }

/* Il pulsante che resta premuto — «Filtri» acceso, «Raggruppa» attivo: senza
   un segno visibile non si capisce perche' l'elenco sia piu' corto del solito. */
.ot-bar .btn-it.on {
    background: #e0ecf8;
    border-color: #0059b3;
    color: #17324d;
    font-weight: 600;
}

/* ── la tabella ────────────────────────────────────────────────────────── */
.ot-box.tabulator {
    font-family: 'Titillium Web', 'Segoe UI', Arial, sans-serif;
    font-size: 12px;
    border: 1px solid #e3e7ee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

/* ⚠️ IL FONDO SOTTO LE RIGHE VA DIPINTO DI BIANCO. Tabulator lascia
   trasparente l'area che avanza, e con poche righe in una tabella alta si
   vede il GRIGIO della pagina sotto — un rettangolo sporco che sembra un
   errore di caricamento. Su un elenco pieno non si nota, su uno scadenzario
   con una riga sola occupa mezza schermata. #GIGI 2026-08-19 */
.ot-box.tabulator .tabulator-tableholder { background: #fff; }

/* intestazione */
.ot-box.tabulator .tabulator-header {
    background: #f5f7fa;
    border-bottom: 1px solid #e3e7ee;
    color: #17324d;
}
.ot-box.tabulator .tabulator-col {
    background: #f5f7fa;
    border-right: 1px solid #e3e7ee;
}
.ot-box.tabulator .tabulator-col-title {
    font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: .02em;
    padding: 6px 8px;
}

/* righe */
.ot-box.tabulator .tabulator-row {
    min-height: 28px;
    border-bottom: 1px solid #eef1f6;
}
.ot-box.tabulator .tabulator-row.tabulator-row-even { background: #fbfcfe; }
.ot-box.tabulator .tabulator-row:hover { background: #f2f8ff; }
.ot-box.tabulator .tabulator-row.tabulator-selected { background: #e0ecf8; }

/* ⚠️ `inline-flex`, MAI `flex`. Il contenuto va centrato in verticale — con la
   sola `line-height` il testo si centra ma un badge o un gruppo di icone no,
   perche' hanno un'altezza propria e resterebbero appoggiati in alto — ma
   `display:flex` e' un blocco: ogni cella prendeva tutta la larghezza e andava
   a capo, una per riga, con le colonne che non esistevano piu'.
   Tabulator affianca le celle come `inline-block`: `inline-flex` tiene quel
   comportamento e in piu' centra il contenuto. */
.ot-box.tabulator .tabulator-cell {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;          /* le larghezze le decide Tabulator */
    vertical-align: middle;          /* celle di altezza diversa restano in riga */
    padding: 0 8px;
    border-right: 1px solid #eef1f6;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
}
/* la cella numerica resta a destra: il flex azzererebbe l'allineamento */
.ot-box.tabulator .tabulator-cell.ot-num { justify-content: flex-end; }

/* Il testo dentro la cella si taglia con i puntini invece di sbordare: senza,
   una denominazione lunga spingerebbe fuori posto la colonna accanto. */
.ot-box.tabulator .tabulator-cell > * { min-width: 0; }

.ot-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ot-neg { color: #dc3545; font-weight: 600; }

.ot-cod {
    font-family: Consolas, 'Courier New', monospace; font-size: 11.5px;
    background: #f5f7fa; border-radius: 4px; padding: 1px 6px;
}

.ot-badge {
    display: inline-block; padding: 0 7px; border-radius: 20px;
    font-size: 10px; font-weight: 700; line-height: 16px; color: #fff;
    white-space: nowrap;
}

.ot-si { color: #008758; }
.ot-no { color: #cbd2d9; }

/* le icone-azione dentro la cella: in riga, senza essere ritagliate */
.ot-box.tabulator .tabulator-cell .eo-az-group {
    display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
}
.ot-box.tabulator .tabulator-cell .eo-az { width: 26px; height: 26px; font-size: 16px; }

/* ── DETTAGLIO DI RIGA (opzione `dettaglio`) ─────────────────────────────
   Il riquadro che si apre SOTTO la riga scelta, dentro la riga stessa.
   ⚠️ `width:100%` e non una larghezza fissa: la riga di Tabulator è larga
   quanto la somma delle colonne, e su una tabella che scorre di lato il
   dettaglio deve seguirla — altrimenti scorrendo si vedrebbe il riquadro
   restare indietro rispetto alla riga che lo contiene. #GIGI 2026-08-21 */
.ot-box.tabulator .ot-dett {
    width: 100%;
    box-sizing: border-box;
    background: #f8fbff;
    border-top: 2px solid #0059b3;
    padding: 8px 10px;
    overflow: auto;
    cursor: default;
}
/* La riga che ha il dettaglio aperto si riconosce: senza, scorrendo l'elenco
   non si capisce più a CHI appartenga il riquadro che si sta guardando. */
.ot-box.tabulator .tabulator-row:has(> .ot-dett),
.ot-box.tabulator .tabulator-row.ot-riga-aperta {
    background: #eef5fd;
}
.ot-box.tabulator .tabulator-row:has(> .ot-dett) > .tabulator-cell,
.ot-box.tabulator .tabulator-row.ot-riga-aperta > .tabulator-cell {
    font-weight: 600;
}

/* ⛔ LA RIGA CHE SI STA GUARDANDO — #GIGI 2026-09-03
   Federico: «quando seleziono una riga nelle analisi, la devo evidenziare ..
   altrimenti non capisco chi stò vedendo». Aprendo un pannello laterale la
   riga di partenza si perde: il drawer copre metà schermo e l'elenco continua
   a scorrere sotto.

   ⚠️ Più marcata di `ot-riga-aperta`, e per una ragione: quel riquadro si apre
   SOTTO la riga e sta a schermo con lei, questo pannello sta ALTROVE. La
   barretta a sinistra si vede anche con l'occhio sul drawer.

   ⚠️ Il colore non è l'unico segnale (una riga evidenziata solo dal colore
   sparisce per chi non lo distingue): c'è anche il bordo e il grassetto. */
.ot-box.tabulator .tabulator-row.ot-riga-attiva {
    background: #dbeafe;
    box-shadow: inset 3px 0 0 0 #0059b3;
}
.ot-box.tabulator .tabulator-row.ot-riga-attiva > .tabulator-cell {
    font-weight: 600;
}
/* Il passaggio del mouse non deve cancellare l'evidenziazione: la riga
   attiva resta riconoscibile anche mentre si scorre l'elenco col cursore. */
.ot-box.tabulator .tabulator-row.ot-riga-attiva:hover {
    background: #cfe3fb;
}

/* ── L'ICONA CHE HA APERTO IL DETTAGLIO ─────────────────────────────────
   Diventa VERDE e si porta dietro una freccia verso il basso: dice due cose
   insieme — «è questa che hai premuto» e «il riquadro si apre sotto». Senza,
   scorrendo un elenco lungo si perde di vista quale riga si stia guardando,
   e premendo di nuovo non si sa se si sta aprendo o richiudendo.
   ⚠️ Vale per la PRIMA icona-azione della riga, che è quella che apre il
   dettaglio per convenzione. Le altre (matita, cestino) restano come sono:
   colorarle tutte direbbe che sono tutte attive.

   ⚠️ `> .tabulator-cell` NON E' PIGNOLERIA: dentro il dettaglio c'è un'ALTRA
   tabella, con le sue righe e le sue icone. Senza il figlio diretto la regola
   le prendeva tutte, e la matita del primo periodo diventava verde con la
   freccia — cioè sembrava anche lei un pulsante «apri», che non è.
   #GIGI 2026-08-21 */
.ot-box.tabulator .tabulator-row:has(> .ot-dett) > .tabulator-cell .eo-az-group .eo-az:first-child,
.ot-box.tabulator .tabulator-row.ot-riga-aperta > .tabulator-cell .eo-az-group .eo-az:first-child {
    color: #15803d;
    position: relative;
}
.ot-box.tabulator .tabulator-row:has(> .ot-dett) > .tabulator-cell .eo-az-group .eo-az:first-child:hover,
.ot-box.tabulator .tabulator-row.ot-riga-aperta > .tabulator-cell .eo-az-group .eo-az:first-child:hover {
    color: #14532d;
}
/* La freccia: disegnata in CSS, non è un carattere — così non dipende dal
   font delle icone e non sposta la riga.
   ⚠️ Sta DENTRO il pulsante (26px con un glifo da 18): messa fuori
   allargherebbe la cella e la colonna delle azioni si sposterebbe di qualche
   pixel aprendo e chiudendo il dettaglio. */
.ot-box.tabulator .tabulator-row:has(> .ot-dett) > .tabulator-cell .eo-az-group .eo-az:first-child::after,
.ot-box.tabulator .tabulator-row.ot-riga-aperta > .tabulator-cell .eo-az-group .eo-az:first-child::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #15803d;
    pointer-events: none;
}
/* Il glifo si alza di un filo per fare posto alla freccia, senza cambiare
   l'altezza del pulsante. */
.ot-box.tabulator .tabulator-row:has(> .ot-dett) > .tabulator-cell .eo-az-group .eo-az:first-child i,
.ot-box.tabulator .tabulator-row.ot-riga-aperta > .tabulator-cell .eo-az-group .eo-az:first-child i {
    position: relative;
    top: -2px;
}

/* ── riga dei totali ─────────────────────────────────────────────────────
   ⚠️ IL CONTENITORE DEI TOTALI DEVE POTER SCORRERE, o i numeri non stanno
   sotto le loro colonne. Tabulator lo tiene allineato in JS
   (`scrollHorizontal` → `botElement.scrollLeft = e`), ma il suo CSS gli dà
   `overflow: hidden`: il valore si può ancora assegnare, però le colonne
   BLOCCATE — che sono `position: sticky` — non hanno più un contenitore di
   scorrimento a cui ancorarsi e perdono la posizione. Risultato: la riga dei
   totali slitta rispetto all'intestazione, di quanto misurano le colonne
   bloccate a sinistra.
   Con `overflow-x: auto` lo sticky ritrova il suo riferimento; la barra si
   nasconde perché a scorrere è già il corpo della tabella e due barre
   sovrapposte si darebbero fastidio. #GIGI 2026-08-20 */
.ot-box.tabulator .tabulator-footer .tabulator-calcs-holder,
.ot-box.tabulator .tabulator-calcs-holder {
    border-top: 2px solid #cfd6de;
    background: #f5f7fa;
    overflow-x: auto;
    scrollbar-width: none;              /* Firefox */

    /* ⚠️ ⚠️ LA BARRA VERTICALE — LA VERA CAUSA DEL DISALLINEAMENTO.
       Il corpo della tabella (`.tabulator-tableholder`) è `overflow: auto`:
       appena le righe superano l'altezza compare la barra di scorrimento
       VERTICALE, che si mangia una quindicina di pixel della sua larghezza
       interna. La riga dei totali quella barra non ce l'ha, quindi è più
       larga di altrettanto — e i numeri finiscono a sinistra delle colonne
       che totalizzano, con l'ultima tagliata a metà.

       Si riserva lo stesso spazio a destra. ⚠️ NON con `scrollbar-gutter`:
       quella proprietà riserva il posto solo sull'asse che può traboccare, e
       qui è la X — sulla Y non farebbe nulla. La larghezza vera della barra
       la misura il JS e la scrive in `--ot-barra`; questo è il ripiego per
       il primo disegno e per i browser che non la calcolano.
       #GIGI 2026-08-20 */
    padding-right: var(--ot-barra, 15px);
    box-sizing: border-box;
}
.ot-box.tabulator .tabulator-footer .tabulator-calcs-holder::-webkit-scrollbar,
.ot-box.tabulator .tabulator-calcs-holder::-webkit-scrollbar {
    height: 0; display: none;           /* Chrome, Safari */
}
/* ⚠️ LA RIGA DEI TOTALI NON SEGUE L'ALTEZZA DELLE RIGHE DI DATI. Tabulator le
   dà la `rowHeight` dichiarata per la griglia: su una tabella con celle a più
   righe (la scrivania IDS: insegna, stato, apertura) il footer diventava alto
   come loro pur contenendo UNA riga di numeri, e sotto l'elenco restava una
   fascia grigia sproporzionata.

   ⚠️ SI FISSA L'ALTEZZA, NON SI METTE `auto`. Con `height:auto` Tabulator —
   che posiziona le celle in assoluto e calcola lui le altezze — perde il
   riferimento e la riga si espande a tutto il contenitore: una fascia vuota
   alta mezza pagina con i numeri in fondo. Un valore fisso è l'unica forma
   che la libreria rispetta. #GIGI 2026-08-20 */
.ot-box.tabulator .tabulator-row.tabulator-calcs,
.ot-box.tabulator .tabulator-row.tabulator-calcs .tabulator-cell {
    height: 30px !important; min-height: 30px !important;
}
.ot-box.tabulator .tabulator-row.tabulator-calcs {
    background: #f5f7fa; font-weight: 700; color: #17324d;
}
/* ⚠️ IL PADDING ORIZZONTALE E' QUELLO DELLE ALTRE CELLE — 8px — E NON SI
   TOCCA. Dichiarando solo `padding-top/bottom` si sovrascrive la scorciatoia
   `padding: 0 8px` della cella normale: i lati vanno a zero, il numero si
   incolla al bordo e la colonna sembra disallineata rispetto a quella sopra.
   Qui il padding si scrive PER INTERO, così i due valori restano allineati.

   ⚠️ E il bordo destro resta 1px TRASPARENTE, non `0`: le celle hanno
   `box-sizing: border-box`, quindi togliere il bordo restituisce quel pixel
   al contenuto e ogni cella si sposta di uno rispetto all'intestazione —
   uno scarto che a fine riga diventa visibile. Si toglie il COLORE, non lo
   spazio. #GIGI 2026-08-20 */
.ot-box.tabulator .tabulator-row.tabulator-calcs .tabulator-cell {
    padding: 0 8px;
    border-right: 1px solid transparent;
}


/* ── colonne bloccate a lato ──────────────────────────────────────────────
   ⚠️ Di serie Tabulator segna la colonna ferma con `border-right: 2px solid
   #aaa`: un grigio scuro che non appartiene alla nostra tavolozza. Sulle righe
   piene si confonde con il contenuto, ma nella riga dei TOTALI — dove le celle
   a sinistra sono vuote — resta un segmento verticale isolato, che sembra un
   difetto di allineamento e non un separatore.
   Qui diventa una linea sottile dello stesso grigio degli altri bordi. */
.ot-box.tabulator .tabulator-frozen-left {
    border-right: 1px solid #dbe1e9;
}
.ot-box.tabulator .tabulator-frozen-right {
    border-left: 1px solid #dbe1e9;
}
/* nell'intestazione il separatore segue il colore delle altre colonne */
.ot-box.tabulator .tabulator-header .tabulator-frozen-left {
    border-right: 1px solid #e3e7ee;
}

/* ── raggruppamenti ────────────────────────────────────────────────────── */
.ot-box.tabulator .tabulator-row.tabulator-group {
    background: #eef3f9;
    border-bottom: 1px solid #d6e0ea;
    font-weight: 600; color: #17324d;
    padding: 4px 8px;
}
.ot-box.tabulator .tabulator-row.tabulator-group:hover { background: #e4ecf5; }
.ot-grp-t { color: #5a6772; font-weight: 400; font-size: 11px;
            text-transform: uppercase; letter-spacing: .02em; }
.ot-grp-n { color: #5a6772; font-weight: 400; font-size: 11px; margin-left: 6px; }

/* ── filtri per colonna: nascosti finche' non si preme «Filtri» ────────── */
.ot-box.tabulator .tabulator-header-filter { display: none; }
.ot-wrap.ot-filtri-on .ot-box.tabulator .tabulator-header-filter {
    display: block;
    /* ⚠️ MISURE UGUALI PER TUTTI I FILTRI. Ogni tipo di controllo — casella di
       testo, numero, elenco a caselle — ha di serie altezze e margini propri:
       affiancati sulla stessa riga si vedevano scalini di due o tre pixel a
       colonna, e la riga dei filtri sembrava storta. Qui si fissano le misure
       una volta sola e valgono per tutti. */
    box-sizing: border-box;
    height: 28px;                    /* la stessa altezza della cella */
    padding: 3px 4px;
    margin: 0;
    background: #fdfdfe;
    border-top: 1px solid #e3e7ee;
}

/* Tutti i controlli di filtro, di qualunque tipo, hanno lo stesso aspetto:
   stessa altezza, stesso bordo, stesso testo della cella che filtrano. */
.ot-box.tabulator .tabulator-header-filter input,
.ot-box.tabulator .tabulator-header-filter select,
.ot-box.tabulator .tabulator-header-filter .ot-setf-btn,
.ot-box.tabulator .tabulator-header-filter .ot-numf-op,
.ot-box.tabulator .tabulator-header-filter .ot-numf-v {
    box-sizing: border-box;
    width: 100%;
    height: 22px;
    margin: 0;
    /* 8px ai lati, la misura unica delle caselle in tutta l'applicazione */
    padding: 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 20px;               /* 22 meno i due bordi: testo centrato */
    color: #1b2733;
    vertical-align: top;
}
.ot-box.tabulator .tabulator-header-filter input:focus,
.ot-box.tabulator .tabulator-header-filter .ot-setf-btn:focus {
    outline: none;
    border-color: #0059b3;
    box-shadow: 0 0 0 2px rgba(0, 89, 179, .12);
}
/* la crocetta di serie del campo «search»: occupa spazio e non serve, il
   filtro si azzera dal pulsante «Filtri» */
.ot-box.tabulator .tabulator-header-filter input[type=search]::-webkit-search-cancel-button {
    display: none;
}

/* ── filtro dei numeri con i criteri in italiano ─────────────────────────
   Disposizione:  [   valore   ][=]     e con «compreso fra»:  [da][a][⇔]

   ⚠️ IL VALORE VIENE PRIMA E PRENDE LO SPAZIO. Sulla colonna importo ci sono
   112px in tutto: con l'elenco a tendina largo — che deve contenere «maggiore
   o uguale» — la casella del valore restava schiacciata a destra, larga pochi
   pixel, e non si capiva nemmeno dove scrivere. Il valore si scrive ogni
   volta, il criterio si sceglie una volta: quindi il criterio si riduce al
   simbolo e il nome per esteso resta nel menu e nel `title`. */
.ot-numf {
    display: flex;
    gap: 2px;
    width: 100%;
    align-items: center;
}

.ot-numf-v {
    flex: 1 1 auto;
    min-width: 0;                    /* senza, il flex non lascia rimpicciolire */
    text-align: right;               /* come la colonna che filtra */
    font-variant-numeric: tabular-nums;
}

/* il pulsantino del criterio: quadrato, il simbolo al centro */
.ot-numf-op {
    flex: 0 0 auto;
    /* ⚠️ `!important`: la regola comune di TUTTI i filtri impone `width:100%`
       — serve alle caselle di testo, che devono riempire la colonna — e senza
       forzatura vincerebbe anche qui, rendendo il pulsantino largo quanto
       l'intera intestazione e ributtando il valore fuori vista. */
    width: 22px !important;
    padding: 0 !important;
    text-align: center;
    cursor: pointer;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #5a6772;
    font-weight: 700;
}
.ot-numf-op:hover { background: #f2f8ff !important; border-color: #0059b3 !important; }
/* criterio attivo: si vede che la colonna e' filtrata */
.ot-numf-op.on {
    border-color: #0059b3 !important;
    background: #0059b3 !important;
    color: #fff !important;
}

/* «vuoto» e «valorizzato» non hanno valore da scrivere: il pulsantino prende
   tutta la riga e mostra il criterio per esteso, non un simbolo solitario */
.ot-numf.ot-numf-0 .ot-numf-op {
    flex: 1 1 auto;
    width: auto !important;
    text-align: left;
    padding: 0 6px !important;
    font-weight: 600;
    font-size: 11px !important;
}

/* con «compreso fra» le due caselle si dividono lo spazio in parti uguali */
.ot-numf.ot-numf-2 .ot-numf-v { flex: 1 1 50%; }

/* ── il menu dei criteri ──────────────────────────────────────────────────
   Sta in <body>: dentro l'intestazione verrebbe tagliato dall'overflow della
   tabella e si vedrebbero due voci su nove. */
.ot-numf-menu {
    position: absolute; z-index: 3000; display: none;
    width: 190px; background: #fff;
    border: 1px solid #d1d5db; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
    padding: 4px 0;
    font-family: 'Titillium Web', 'Segoe UI', Arial, sans-serif;
}
.ot-numf-menu button {
    display: flex; align-items: center; gap: 9px;
    width: 100%; box-sizing: border-box;
    padding: 4px 12px; margin: 0;
    border: 0; background: none; cursor: pointer;
    font-size: 12.5px; color: #1b2733; text-align: left;
    font-family: inherit;
}
.ot-numf-menu button:hover { background: #f2f8ff; }
/* la riga di stacco fra i confronti e i criteri che rispondono da soli
   («scadute», «scadono oggi»): sono due famiglie diverse di domande */
.ot-numf-menu hr {
    border: 0; border-top: 1px solid #e3e7ee;
    margin: 4px 0;
}
.ot-numf-menu button.on { background: #e0ecf8; font-weight: 700; }
/* il simbolo incolonnato a sinistra: si riconosce il criterio a colpo d'occhio */
.ot-numf-menu button i {
    flex: 0 0 16px; text-align: center;
    font-style: normal; font-weight: 700; color: #0059b3;
}

/* ── filtro a elenco con le caselle (stile Excel) ──────────────────────── */
.ot-setf { width: 100%; display: block; }
/* Le misure (altezza, bordo, testo) arrivano dalla regola comune dei filtri
   qui sopra: qui resta solo cio' che distingue questo controllo dagli altri —
   il testo a sinistra, la punta a destra, il taglio con i puntini. */
.ot-setf-btn {
    text-align: left;
    padding-right: 18px;             /* lo spazio della punta */
    cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    position: relative;
}
.ot-setf-btn::after {
    content: '\25BE';                      /* la punta verso il basso */
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    color: #5a6772; font-size: 9px;
}
.ot-setf-btn.on { border-color: #0059b3; background: #f2f8ff; font-weight: 600; }
.ot-setf-vuoto { color: #64748b; font-style: italic; }

/* Il pannello sta in <body>: dentro l'intestazione verrebbe tagliato
   dall'overflow della tabella. */
.ot-setf-pan {
    position: absolute; z-index: 3000; display: none;
    width: 240px; background: #fff;
    border: 1px solid #d1d5db; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
    font-family: 'Titillium Web', 'Segoe UI', Arial, sans-serif;
}
.ot-setf-cerca { padding: 7px 8px 4px; }
.ot-setf-q {
    width: 100%; box-sizing: border-box;
    border: 1px solid #d1d5db; border-radius: 4px;
    padding: 3px 8px; font-size: 12px;
}
.ot-setf-tut {
    display: flex; gap: 12px; padding: 0 10px 6px;
    border-bottom: 1px solid #e3e7ee;
}
.ot-setf-tut a { font-size: 11.5px; color: #0059b3; font-weight: 700; text-decoration: none; }
.ot-setf-tut a:hover { text-decoration: underline; }

.ot-setf-lista { max-height: 260px; overflow: auto; padding: 4px 0; }
.ot-setf-lista label {
    display: flex; align-items: center; gap: 7px;
    padding: 3px 10px; font-size: 12px; color: #1b2733;
    cursor: pointer; margin: 0;
}
.ot-setf-lista label:hover { background: #f2f8ff; }
.ot-setf-lista input { flex: none; margin: 0; }
.ot-setf-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* il conteggio non deve pesare quanto il valore che accompagna */
.ot-setf-n { color: #5c6f82; font-size: 10.5px; flex: none; }
.ot-setf-col {
    width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block;
}

/* ── menu colonne e raggruppamento ─────────────────────────────────────── */
.ot-colmenu { position: relative; }
.ot-colbox {
    position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 60;
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
    max-height: 60vh; overflow: auto; min-width: 236px; display: none;
    padding: 0 0 4px;
}
.ot-colbox.on { display: block; }

/* ⚠️ UNA VOCE PER RIGA, NELL'ORDINE DELLE COLONNE. Le voci sono `flex` ma
   senza `display:block` sul contenitore si affiancano a due a due in modo
   irregolare: l'elenco diventa illeggibile e non si capisce piu' quale
   casella corrisponda a quale colonna. */
.ot-colbox .ot-collista { display: block; }
.ot-colbox label {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 12px; font-size: 12.5px; color: #1b2733;
    cursor: pointer; white-space: nowrap; margin: 0;
    width: 100%; box-sizing: border-box;
}
.ot-colbox label:hover { background: #f2f8ff; }
.ot-colbox label input { flex: none; margin: 0; }
/* la colonna nascosta si distingue a colpo d'occhio dalle attive */
.ot-colbox label.off span { color: #64748b; }

/* l'intestazione resta ferma in cima mentre si scorre l'elenco */
.ot-colbox .ot-coltit {
    position: sticky; top: 0; background: #f8fafc;
    border-bottom: 1px solid #e3e7ee; padding: 7px 12px; z-index: 1;
    display: flex; align-items: center; gap: 8px;
}
.ot-colbox .ot-coltit b {
    font-size: 11px; color: #5a6772; text-transform: uppercase;
    letter-spacing: .03em; font-weight: 700;
}
.ot-colbox .ot-tut {
    font-size: 11.5px; color: #0059b3; font-weight: 700;
    cursor: pointer; margin-left: auto; white-space: nowrap;
}
.ot-colbox .ot-tut:hover { text-decoration: underline; }

/* ── selezione a blocchi di celle ──────────────────────────────────────── */
.ot-box.tabulator .tabulator-range-overlay .tabulator-range {
    border: 2px solid #0059b3;
}
.ot-box.tabulator .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected) {
    background: rgba(0, 89, 179, .10);
}

/* ── paginazione ───────────────────────────────────────────────────────── */
/* ⚠️ IL PADDING DEL FOOTER E' PER LA PAGINAZIONE, NON PER I TOTALI.
   `padding: 4px 8px` serviva a staccare i pulsanti delle pagine dai bordi,
   ma il footer contiene ANCHE la riga dei totali: quegli 8px la rientravano
   da tutti e due i lati, e i numeri finivano spostati rispetto alle colonne
   che totalizzano. Il padding resta, e lo si annulla sul solo contenitore
   dei totali (piu' sotto). #GIGI 2026-08-20 */
.ot-box.tabulator .tabulator-footer {
    background: #f8fafc; border-top: 1px solid #e3e7ee;
    padding: 4px 8px; font-size: 12px;
}
/* La riga dei totali deve filare a filo delle colonne: i margini del footer
   qui non valgono. I `-8px` rendono i 8px del padding di sopra. */
.ot-box.tabulator .tabulator-footer .tabulator-calcs-holder {
    margin-left: -8px; margin-right: -8px;
    width: calc(100% + 16px);
}
.ot-box.tabulator .tabulator-page {
    border: 1px solid #d1d5db; border-radius: 4px;
    padding: 1px 8px; font-size: 11.5px; margin: 0 1px;
}
.ot-box.tabulator .tabulator-page.active {
    background: #0059b3; color: #fff; border-color: #0059b3;
}

/* ── vuoto e caricamento ───────────────────────────────────────────────── */
.ot-box.tabulator .tabulator-placeholder {
    color: #5c6f82; font-size: 13px;
}
/* #Gigi 2026-10-02 22:00 — Tabulator di serie scrive «nessun dato» in #ccc (1,6:1) */
.ot-box.tabulator .tabulator-placeholder .tabulator-placeholder-contents { color: #5c6f82; }

/* ═══════════════════════════════════════════════════════════════════════════
   ATTESA — i tre puntini standard, sopra la tabella. #GIGI 2026-08-20
   ═══════════════════════════════════════════════════════════════════════════
   Finche' le righe non arrivano la tabella mostrava il testo «Nessun dato da
   mostrare»: dice il FALSO — i dati stanno arrivando — e su un elenco lento
   sembra che la pagina sia rotta.

   Sono gli stessi tre puntini del velo di attesa del layout (`eo-wait-bounce`),
   non un `fa-spinner` e non una GIF: lo standard e' quello (claude.md).
   ⚠️ Qui NON si usa `eoWait()`: quello e' un velo su TUTTA la pagina, giusto
   per un salvataggio, sbagliato per il caricamento di un elenco — bloccherebbe
   anche i filtri e la barra mentre si guarda.
   ══════════════════════════════════════════════════════════════════════════ */
.ot-wrap { position: relative; }
.ot-attesa {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: rgba(255, 255, 255, .72);
}
.ot-attesa.is-on { display: flex; }
.ot-attesa-punti { display: flex; gap: 7px; }
.ot-attesa-punti span {
    width: 9px; height: 9px; border-radius: 50%;
    background: #0059b3;
    animation: ot-attesa-bounce 1.1s infinite ease-in-out both;
}
.ot-attesa-punti span:nth-child(1) { animation-delay: -.32s; }
.ot-attesa-punti span:nth-child(2) { animation-delay: -.16s; }
.ot-attesa-msg { font-size: 12.5px; font-weight: 600; color: #17324d; }
@keyframes ot-attesa-bounce {
    0%, 80%, 100% { transform: scale(.6); opacity: .55; }
    40%           { transform: scale(1);  opacity: 1; }
}

/* ── RIGA BARRATA (documento sostituito/annullato) ─────────────────────────
   I dati si vedono ma sono FUORI GIOCO: barrati e attenuati. Le colonne dei
   comandi (azioni, doc, pay) restano leggibili: il PDF di una sostituita si
   deve poter riaprire. #GIGI 2026-08-25 */
/* #Gigi 2026-10-04 13:45 — Tolta `opacity:.75` (WCAG 1.4.3). L'opacità
   schiariva TUTTO ciò che sta nella cella — testo, link, badge — e una riga
   sostituita o annullata scendeva a 2,6–4,2:1: non è un comando disattivato,
   è un dato che l'ufficio deve poter leggere. «Fuori gioco» lo dicono il
   barrato e il grigio, che da solo regge 5,3:1 anche sulle righe alterne. */
.ot-box.tabulator .tabulator-row.ot-riga-barrata .tabulator-cell {
    text-decoration: line-through;
    color: #5b6472;
}
.ot-box.tabulator .tabulator-row.ot-riga-barrata .tabulator-cell[tabulator-field="azioni"],
.ot-box.tabulator .tabulator-row.ot-riga-barrata .tabulator-cell[tabulator-field="doc"],
.ot-box.tabulator .tabulator-row.ot-riga-barrata .tabulator-cell[tabulator-field="pay"] {
    text-decoration: none;
}

/* ── LA SELEZIONE A BLOCCHI RESTA, IL RIQUADRO NO ─────────────────────
   Tabulator disegna attorno alla cella su cui si e' cliccato un bordo blu
   con un pallino nell'angolo (`.tabulator-range`, e il suo `::after`):
   e' il segno della selezione a rettangolo, quella che permette di copiare
   un blocco di celle e incollarlo in Excel con le colonne al posto giusto.

   ⛔ Su un ELENCO pero' non si sta selezionando niente: si sta leggendo. Il
   riquadro compare al primo clic su una riga qualunque e sembra uno stato
   dell'applicativo — «questa riga e' scelta» — che non esiste (Federico,
   10/09/2026: «non voglio il riquadro blu con la seleziona»).

   ⚠️ Si spegne il DISEGNO, non la funzione: `selectableRange` resta acceso e
   il copia-incolla verso il foglio di calcolo continua a funzionare. Mettere
   `blocchi: false` l'avrebbe tolto davvero, su tutte le 189 griglie.
   #GIGI 2026-09-10 */
.ot-box.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range {
    border-color: transparent;
}
.ot-box.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active::after {
    display: none;
}