/* =========================================================
   Tables.css
   Stile "flat moderno" condiviso per le tabelle senza la
   classe `toDatatable` nel progetto VehicleHubManagement.

   - Classe opt-in: .vhm-flat-table (aggiunta sul <table>
     accanto alle classi Bootstrap esistenti).
   - Bootstrap 5.3 applica lo sfondo delle celle tramite un
     `box-shadow: inset 0 0 0 9999px ...` su
     `.table > :not(caption) > * > *`. Per essere riconoscibile
     forziamo background/box-shadow/border con !important sui
     selettori cella, cosi' il look e' coerente a prescindere
     dalle classi BS gia' applicate (table-bordered/striped/hover).
   - Accent della mandante via --main-bg-color /
     --main-button-hover-bg-color (per ogni brand).
   ========================================================= */

/* =========================================================
   Titolo modulo/tabella condiviso (.vhm-module-title)
   Stile canonico UNICO per i titoli delle sezioni con "+"
   e tabella: grande, centrato, grassetto (come l'<h4> dei
   moduli JS "Movimenti"/"Importi messa su strada"...).
   Le variabili --vhm-module-title-* sono l'unica sorgente
   di verità: i titoli via ::before delle singole pagine
   pescano da qui, così tutte le pagine restano identiche.
   NB: le "intestazioni di gruppo" .od-section-title (con
   .od-section-hint + barra accent) NON usano questa classe
   e restano invariate.
   ========================================================= */
:root {
    --vhm-module-title-size: 1.5rem; /* = Bootstrap h4 */
    --vhm-module-title-mb: 1rem; /* stacco dal "+"; = .mb-3, come già
                                         forzato da VeicoloDetail (.tab-pane>h4),
                                         dai ::before di ContrattoDetail e dagli
                                         h5 mb-3 di Cespiti. Il raw .mb-5 (3rem)
                                         lasciava troppo spazio prima dell'icona. */
}

.vhm-module-title {
    /* [2026-07-21] Su richiesta utente il titolo di modulo va RIMOSSO da tutti i
     moduli (tab orizzontali e verticali): il nome della sezione resta la label
     della tab. display:none rimuove anche il box + margine → il "+" sottostante
     risale automaticamente. La classe/markup NON viene toccata (regola progetto:
     niente modifiche a ID/classi né al JS che inietta i titoli).
     Vecchio stile "titolo grande centrato" conservato qui sotto commentato. */
    display: none !important;
    /* text-align: center;
  font-weight: 700;
  font-size: var(--vhm-module-title-size);
  line-height: 1.2;
  margin-bottom: var(--vhm-module-title-mb) !important; */
}

.vhm-flat-table {
    --vhm-flat-surface: #ffffff;
    --vhm-flat-surface-2: #faf9f5;
    --vhm-flat-surface-3: #efeee8;
    --vhm-flat-border: #e7e4dc;
    --vhm-flat-ink: #1b1a17;
    --vhm-flat-ink-2: #43413c;
    --vhm-flat-muted: #797668;
    --vhm-flat-r: 10px;
    /* Sovrascrive le CSS variables di Bootstrap usate per il
     background delle celle (renderizzato via box-shadow inset). */
    --bs-table-bg: var(--vhm-flat-surface) !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-border-color: transparent !important;
    width: 100%;
    margin: 0 0 1rem 0;
    background: var(--vhm-flat-surface);
    border: 1px solid var(--vhm-flat-border);
    border-radius: var(--vhm-flat-r);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04), 0 4px 14px rgba(20, 18, 14, 0.05);
    border-collapse: separate;
    border-spacing: 0;
}

    /* Reset trasversale di TUTTE le celle (annulla box-shadow,
   background e border-bottom di Bootstrap) */
    .vhm-flat-table > :not(caption) > * > * {
        background-color: var(--vhm-flat-surface) !important;
        box-shadow: none !important;
        border-width: 0 !important;
        padding: 12px 14px !important;
    }

    /* HEAD: sfondo sabbia/beige chiaro + singola linea grigia sottile.
   Tono caldo neutro che riprende il design di riferimento.
   Il background va anche su thead e tr per coprire l'intera fascia
   inclusi gli angoli arrotondati e i margini laterali. */
    .vhm-flat-table > thead,
    .vhm-flat-table > thead > tr {
        background-color: var(--vhm-flat-surface-3) !important;
    }

        .vhm-flat-table > thead > tr > th {
            background-color: var(--vhm-flat-surface-3) !important;
            color: var(--vhm-flat-muted) !important;
            font-size: 11px !important;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 700 !important;
            border-bottom: 1px solid var(--vhm-flat-border) !important;
            white-space: nowrap;
            vertical-align: middle;
        }

    /* BODY: divider sottili tra le righe */
    .vhm-flat-table > tbody > tr > td {
        border-top: 1px solid var(--vhm-flat-border) !important;
        font-size: 13px !important;
        color: var(--vhm-flat-ink-2) !important;
        vertical-align: middle;
    }

    /* Prima riga del body: nessun bordo extra - la separazione visiva
   e' gia' garantita dal border-bottom "double" dell'header. */
    .vhm-flat-table > tbody > tr:first-child > td {
        border-top: 0 !important;
    }

    /* Hover row: tinta della mandante in versione tenue */
    .vhm-flat-table > tbody > tr:hover > td,
    .vhm-flat-table.table-hover > tbody > tr:hover > * {
        background-color: var(--main-button-hover-bg-color, var(--vhm-flat-surface-2)) !important;
        color: var(--vhm-flat-ink) !important;
    }

    /* Bottoni d'azione iniettati da JS dentro le celle:
   compatti, pill OUTLINE mandante (background trasparente, bordo e testo
   tinta mandante). Hover: riempimento mandante. Coerente con i bottoni
   ".al-search-secondary" e con i bottoni "+ Aggiungi" dei moduli. */
    .vhm-flat-table .btn.main-bg-button {
        padding: 4px 12px !important;
        font-size: 12px;
        border-radius: 999px !important;
        background-color: transparent !important;
        color: var(--main-bg-color, #006384) !important;
        border: 1.5px solid var(--main-bg-color, #006384) !important;
        box-shadow: none !important;
        transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    }

        .vhm-flat-table .btn.main-bg-button:hover,
        .vhm-flat-table .btn.main-bg-button:focus {
            background-color: var(--main-button-hover-bg-color, var(--main-bg-color, #006384)) !important;
            color: var(--main-button-hover-font-color, #ffffff) !important;
            border-color: var(--main-button-hover-border-color, var(--main-bg-color, #006384)) !important;
        }

        .vhm-flat-table .btn.main-bg-button > i {
            font-size: 12px;
            line-height: 1;
        }

    /* Bottoni "Elimina" (btn-outline-danger) e "Conferma" (btn-outline-success)
   iniettati dai moduli JS nelle celle: stessa forma pill compatta dei
   .main-bg-button qui sopra, ma conservano il colore semantico Bootstrap.
   Hover: riempimento del colore semantico con icona/testo bianco.
   Coerente cross-pagina (AnagraficheList, CespitiDetail, OrdineDetail,
   ContrattoDetail, VeicoloDetail, dashboard liste, ecc.).
   Esclusi: i bottoni del modulo Anomalie (.resolve-anomalia-button /
   .close-anomalia-button / .postpone-anomalia-button) hanno gia' il
   proprio look pill-tenue dedicato definito piu' sotto, con border: 0;
   sovrascrivere solo border-width qui lasciava border-style: none e
   spariva il contorno. */
    .vhm-flat-table .btn.btn-outline-danger:not(.close-anomalia-button),
    .vhm-flat-table .btn.btn-outline-success:not(.resolve-anomalia-button) {
        padding: 4px 12px !important;
        font-size: 12px;
        border-radius: 999px !important;
        background-color: transparent !important;
        border-width: 1.5px !important;
        border-style: solid !important;
        box-shadow: none !important;
        transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    }

    /* Force semantic color sui cestini outline-danger, anche su quelli
   che avevano una variante custom (es. .delete-button-cespite con
   color: #8a2828) che vinceva sulla specificita' del Bootstrap base. */
    .vhm-flat-table .btn.btn-outline-danger:not(.close-anomalia-button) {
        color: #dc3545 !important;
        border-color: #dc3545 !important;
    }

    .vhm-flat-table .btn.btn-outline-success:not(.resolve-anomalia-button) {
        color: #198754 !important;
        border-color: #198754 !important;
    }

    .vhm-flat-table .btn.btn-outline-danger:not(.close-anomalia-button):hover,
    .vhm-flat-table .btn.btn-outline-danger:not(.close-anomalia-button):focus {
        background-color: #dc3545 !important;
        color: #ffffff !important;
        border-color: #dc3545 !important;
    }

    .vhm-flat-table .btn.btn-outline-success:not(.resolve-anomalia-button):hover,
    .vhm-flat-table .btn.btn-outline-success:not(.resolve-anomalia-button):focus {
        background-color: #198754 !important;
        color: #ffffff !important;
        border-color: #198754 !important;
    }

    .vhm-flat-table .btn.btn-outline-danger:not(.close-anomalia-button) > i,
    .vhm-flat-table .btn.btn-outline-success:not(.resolve-anomalia-button) > i {
        font-size: 12px;
        line-height: 1;
    }

    /* Icone FontAwesome standalone nelle celle */
    .vhm-flat-table tbody .fa,
    .vhm-flat-table tbody .fas,
    .vhm-flat-table tbody .far {
        font-size: 13px;
    }

    /* =========================================================
   Override per neutralizzare le varianti Bootstrap rimaste
   sul <table> (table-bordered / table-striped / table-hover).
   ========================================================= */
    .vhm-flat-table.table-bordered > :not(caption) > *,
    .vhm-flat-table.table-bordered > :not(caption) > * > * {
        border-width: 0 !important;
    }

    /* Disattiva lo striping nativo di Bootstrap (rimpiazzato dal nostro). */
    .vhm-flat-table.table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-bg-type: transparent !important;
    }

    /* Striping alternato in tinta della mandante (color-mix: 6% del
   --main-bg-color sopra il bianco). Cosi' le righe pari sono dipinte
   con un velo leggero del brand attivo, su qualsiasi mandante. */
    .vhm-flat-table > tbody > tr:nth-of-type(even) > * {
        background-color: color-mix(in srgb, var(--main-bg-color, var(--vhm-flat-muted)) 6%, #ffffff) !important;
    }

    /* Hover sulle righe pari: deve vincere sullo striping definito sopra
   (stessa specificita' base ma striping arriva dopo). Aggiungiamo un
   selettore piu' specifico per garantire l'hover anche sulle even. */
    .vhm-flat-table > tbody > tr:nth-of-type(even):hover > * {
        background-color: var(--main-button-hover-bg-color, var(--vhm-flat-surface-2)) !important;
        color: var(--vhm-flat-ink) !important;
    }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 768px) {
    .vhm-flat-table > :not(caption) > * > * {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    .vhm-flat-table > thead > tr > th {
        font-size: 10.5px !important;
    }
}

/* =========================================================
   Fix artefatto DataTables con scrollX:true
   DataTables duplica il <thead> dentro .dataTables_scrollBody
   per allineamento colonne. Lo rendiamo visivamente "schiacciato"
   ma manteniamo la struttura per non rompere il calcolo width.
   NB: niente font-size:0 qui. Il testo del thead duplicato sta in
   un div .dataTables_sizing (height:0 + overflow:hidden, quindi
   gia' invisibile) e la sua larghezza naturale tiene il min-content
   del body pari a quello dell'header clone: se gli header nowrap
   superano il container, head e body traboccano insieme e
   .dataTables_scrollBody mostra la scrollbar orizzontale. Con
   font-size:0 il body resta al 100%, la scrollbar non compare mai
   e l'header clone viene clippato a destra (colonne tagliate).
   ========================================================= */
.dataTables_scrollBody > table.vhm-flat-table > thead > tr > th {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
    border: 0 !important;
    overflow: hidden;
}

/* =========================================================
   Fix artefatto angoli arrotondati con DataTables
   `overflow: hidden` su <table> non clippa i border interni
   delle celle. Inoltre con scrollX:true ci sono DUE <table>
   (scrollHead + scrollBody) ognuna con il proprio radius/border.
   Soluzione: spegniamo border/radius/shadow sulle <table>
   interne e li spostiamo sul .dataTables_wrapper esterno.
   ========================================================= */
.dataTables_wrapper .vhm-flat-table {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* La regola base .vhm-flat-table ha `margin: 0 0 1rem 0` per dare
     respiro tra tabelle "stand-alone" e contenuto successivo. Dentro
     un wrapper DataTables il margine bottom crea pero' una striscia
     beige visibile sotto l'ultima riga (margin che spinge la table
     verso l'alto dentro scrollBody, lasciando uno strip dove appare
     il bg sand del wrapper sotto i bordi arrotondati). La rimuoviamo:
     l'esterno del wrapper porta gia' il proprio margine/gap dal layout. */
    margin: 0 !important;
}

.dataTables_wrapper:has(.vhm-flat-table) {
    border: 1px solid #e7e4dc;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 18, 14, 0.04), 0 4px 14px rgba(20, 18, 14, 0.05);
    /* Sfondo sabbia: copre eventuali aree non riempite dallo scrollHead
     (angoli rotondi, micro-spazi laterali) cosi' la fascia dell'header
     appare uniforme senza zone bianche residue. */
    background: #efeee8;
}

    /* Anche scrollHead e scrollHeadInner in sabbia + border-bottom grigio
   per chiudere la fascia in modo netto verso il body. */
    .dataTables_wrapper:has(.vhm-flat-table) > .dataTables_scrollHead,
    .dataTables_wrapper:has(.vhm-flat-table) > .dataTables_scrollHead > .dataTables_scrollHeadInner {
        background-color: #efeee8 !important;
        border-bottom: 1px solid #e7e4dc;
    }

    /* Il body torna bianco esplicito: copre il sabbia del wrapper sotto
   l'header, mantenendo le righe a sfondo bianco/striped come prima. */
    .dataTables_wrapper:has(.vhm-flat-table) > .dataTables_scrollBody {
        background: #ffffff;
    }

/* =========================================================
   Refactor pill - modulo anomalie
   Trasforma i bottoni outline-success/warning/danger del
   modulo anomalie (resolve/postpone/close) in pill colorate
   con background tenue + icona piena + forma a pillola.
   Restano cliccabili: cambia solo il look.
   Il selettore .btn combinato con la classe univoca del
   bottone batte la specificita' delle classi Bootstrap
   .btn-outline-success/warning/danger.
   ========================================================= */
.btn.resolve-anomalia-button,
.btn.postpone-anomalia-button,
.btn.close-anomalia-button {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .btn.resolve-anomalia-button > i,
    .btn.postpone-anomalia-button > i,
    .btn.close-anomalia-button > i {
        font-size: 12px;
        line-height: 1;
    }

/* Verde - Risolvi */
.btn.resolve-anomalia-button {
    background-color: rgba(79, 138, 76, 0.15) !important;
    color: #2e5a2b !important;
}

    .btn.resolve-anomalia-button:hover,
    .btn.resolve-anomalia-button:focus {
        background-color: rgba(79, 138, 76, 0.55) !important;
        color: #1c3a1a !important;
    }

/* Giallo - Postponi */
.btn.postpone-anomalia-button {
    background-color: rgba(201, 139, 31, 0.18) !important;
    color: #8a5e10 !important;
}

    .btn.postpone-anomalia-button:hover,
    .btn.postpone-anomalia-button:focus {
        background-color: rgba(201, 139, 31, 0.6) !important;
        color: #5a3d0a !important;
    }

/* Rosso - Chiudi */
.btn.close-anomalia-button {
    background-color: rgba(198, 59, 59, 0.15) !important;
    color: #8a2828 !important;
}

    .btn.close-anomalia-button:hover,
    .btn.close-anomalia-button:focus {
        background-color: rgba(198, 59, 59, 0.55) !important;
        color: #5e1a1a !important;
    }

/* =========================================================
   Pill Elimina cespite - riusa lo stile pill rosso di
   .close-anomalia-button per coerenza visuale. Sovrascrive
   .btn-outline-danger sul bottone .delete-button-cespite
   (la classe resta nel markup per il JS event delegation).
   ========================================================= */
.btn.delete-button-cespite {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: rgba(198, 59, 59, 0.15) !important;
    color: #8a2828 !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .btn.delete-button-cespite:hover,
    .btn.delete-button-cespite:focus {
        background-color: rgba(198, 59, 59, 0.55) !important;
        color: #5e1a1a !important;
    }

    .btn.delete-button-cespite > i {
        font-size: 12px;
        line-height: 1;
    }

/* =========================================================
   Geometria pill per .main-bg-button dentro tabelle VHM.
   I COLORI restano da .main-bg-button (variabili mandante,
   regola fondamentale [[main-bg-button-rule]]) - qui solo
   radius/padding/dimensioni per coerenza visuale con le pill.
   ========================================================= */
.vhm-flat-table .btn.main-bg-button.dettaglio-veicolo,
.vhm-flat-table .btn.main-bg-button.dettaglio-veicolo-contratto {
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .vhm-flat-table .btn.main-bg-button.dettaglio-veicolo > i,
    .vhm-flat-table .btn.main-bg-button.dettaglio-veicolo-contratto > i {
        font-size: 12px;
        line-height: 1;
    }

/* =========================================================
   Indicatori di ordinamento (DataTables) nelle thead delle
   .vhm-flat-table. Sono pseudo-element ::after sui <th>
   con classi .sorting / .sorting_asc / .sorting_desc.

   Bootstrap 3 di default usa il font "Glyphicons Halflings"
   con un glifo "sort" stacked che a 11px del nostro thead
   appariva ammucchiato e illeggibile (vedi
   dataTables.bootstrap.css linee 168-194).

   Soluzione: sostituiamo il glifo Glyphicons con due triangoli
   Unicode separati (▲ via ::before, ▼ via ::after) stackati
   verticalmente. Pattern standard "sortable column": entrambi
   visibili sfumati nello stato idle, quello attivo evidenziato
   col colore mandante quando la colonna e' ordinata asc/desc.

   2026-07-16: INTERO BLOCCO DISATTIVATO (regole commentate) su
   richiesta utente — gli indicatori di ordinamento vanno rimossi
   da TUTTE le tabelle. NB: queste regole RISCRIVEVANO le frecce
   di default di DataTables (testo unicode via ::before/::after in
   Scripts/DataTables/datatables.css:172-217, iniettato via
   scriptLoader DOPO questo file): commentarle non basta, le
   frecce di default vanno spente esplicitamente — vedi la regola
   "kill indicatori sort" in coda a questo file.
   ========================================================= */

/* Annulliamo il glifo Glyphicons del file dataTables.bootstrap.css
   ridefinendo content/font/positioning sull'::after */
/* 2026-07-16: disattivato — indicatori sort rimossi, vedi coda file
.vhm-flat-table > thead > tr > th.sorting:after,
.vhm-flat-table > thead > tr > th.sorting_asc:after,
.vhm-flat-table > thead > tr > th.sorting_desc:after,
.vhm-flat-table > thead > tr > th.sorting_asc_disabled:after,
.vhm-flat-table > thead > tr > th.sorting_desc_disabled:after {
  content: "\25BC" !important;
  font-family: inherit !important;
  font-size: 9px !important;
  line-height: 1 !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  bottom: auto !important;
  margin-top: 1px !important;
  transform: none !important;
  opacity: 0.3 !important;
  color: var(--vhm-flat-muted, #797668) !important;
  pointer-events: none;
}
*/

/* ::before per la freccia su (▲), stackata sopra l'::after */
/* 2026-07-16: disattivato — indicatori sort rimossi, vedi coda file
.vhm-flat-table > thead > tr > th.sorting::before,
.vhm-flat-table > thead > tr > th.sorting_asc::before,
.vhm-flat-table > thead > tr > th.sorting_desc::before,
.vhm-flat-table > thead > tr > th.sorting_asc_disabled::before,
.vhm-flat-table > thead > tr > th.sorting_desc_disabled::before {
  content: "\25B2";
  font-family: inherit;
  font-size: 9px;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -10px;
  opacity: 0.3;
  color: var(--vhm-flat-muted, #797668);
  pointer-events: none;
}
*/

/* Stato attivo asc: evidenzia ▲ col colore mandante */
/* 2026-07-16: disattivato — indicatori sort rimossi, vedi coda file
.vhm-flat-table > thead > tr > th.sorting_asc::before {
  opacity: 1;
  color: var(--main-bg-color, #006384);
}
*/

/* Stato attivo desc: evidenzia ▼ col colore mandante */
/* 2026-07-16: disattivato — indicatori sort rimossi, vedi coda file
.vhm-flat-table > thead > tr > th.sorting_desc:after {
  opacity: 1 !important;
  color: var(--main-bg-color, #006384) !important;
}
*/

/* Hover sull'header idle: rendiamo le frecce piu' visibili */
/* 2026-07-16: disattivato — indicatori sort rimossi, vedi coda file
.vhm-flat-table > thead > tr > th.sorting:hover::before,
.vhm-flat-table > thead > tr > th.sorting:hover:after {
  opacity: 0.6 !important;
}
*/

/* Padding-right per fare spazio alle frecce di ordinamento. */
/* 2026-07-16: disattivato — indicatori sort rimossi, vedi coda file
.vhm-flat-table > thead > tr > th.sorting,
.vhm-flat-table > thead > tr > th.sorting_asc,
.vhm-flat-table > thead > tr > th.sorting_desc,
.vhm-flat-table > thead > tr > th.sorting_asc_disabled,
.vhm-flat-table > thead > tr > th.sorting_desc_disabled {
  padding-right: 26px !important;
  position: relative;
}
*/

/* Stessa logica per i container scoped in OrdineDetail e CespitiDetail
   dove le tabelle JS-rendered NON hanno .vhm-flat-table come classe HTML
   ma replicano lo stile via CSS scoped. */
/* 2026-07-16: disattivato — indicatori sort rimossi, vedi coda file
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting:after,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc:after,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc:after,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc_disabled:after,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc_disabled:after,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting:after,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc:after,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc:after,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc_disabled:after,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc_disabled:after {
  content: "\25BC" !important;
  font-family: inherit !important;
  font-size: 9px !important;
  line-height: 1 !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  bottom: auto !important;
  margin-top: 1px !important;
  transform: none !important;
  opacity: 0.3 !important;
  color: var(--vhm-flat-muted, #797668) !important;
  pointer-events: none;
}

.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting::before,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc::before,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc::before,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc_disabled::before,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc_disabled::before,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting::before,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc::before,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc::before,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc_disabled::before,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc_disabled::before {
  content: "\25B2";
  font-family: inherit;
  font-size: 9px;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -10px;
  opacity: 0.3;
  color: var(--vhm-flat-muted, #797668);
  pointer-events: none;
}

.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc::before,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc::before {
  opacity: 1;
  color: var(--main-bg-color, #006384);
}

.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc:after,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc:after {
  opacity: 1 !important;
  color: var(--main-bg-color, #006384) !important;
}

.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting:hover::before,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting:hover:after,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting:hover::before,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting:hover:after {
  opacity: 0.6 !important;
}

.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc_disabled,
.ordine-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc_disabled,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_asc_disabled,
.cespite-detail-app .dataTables_wrapper table.dataTable > thead > tr > th.sorting_desc_disabled {
  padding-right: 26px !important;
  position: relative;
}
*/

/* =========================================================
   Fix artefatto "riga empty / corner stretto" sulle tabelle
   DataTables con scrollX. DataTables imposta inline width sul
   <table> interno di .dataTables_scrollBody in base alla somma
   delle larghezze colonne calcolate. Quando la tabella e' vuota
   ("Nessun dato presente"), o quando le colonne hanno larghezza
   piccola, il <table> interno diventa piu' stretto del wrapper:
   la riga empty + i bordi arrotondati mostrano una striscia
   beige a destra che non e' coperta dal bianco del tbody.
   Fix: forziamo min-width: 100% sulle <table> interne di
   scrollHead E scrollBody (no effetto quando hanno gia' larghezza
   sufficiente per scrollX, perche' min-width non riduce). */
.dataTables_wrapper:has(.vhm-flat-table) .dataTables_scrollBody > table,
.dataTables_wrapper:has(.vhm-flat-table) .dataTables_scrollHead > .dataTables_scrollHeadInner > table {
    min-width: 100% !important;
}

/* Stessa logica per i container scoped in OrdineDetail e CespitiDetail
   dove le tabelle JS-rendered non hanno .vhm-flat-table come classe HTML
   ma replicano lo stile via CSS scoped (date/note/ticket/garanzie). */
.ordine-detail-app .dataTables_wrapper .dataTables_scrollBody > table,
.ordine-detail-app .dataTables_wrapper .dataTables_scrollHead > .dataTables_scrollHeadInner > table,
.cespite-detail-app .dataTables_wrapper .dataTables_scrollBody > table,
.cespite-detail-app .dataTables_wrapper .dataTables_scrollHead > .dataTables_scrollHeadInner > table {
    min-width: 100% !important;
}

/* =========================================================
   Fix artefatto "striscia beige a destra" su tutte le tabelle
   .vhm-flat-table dentro DataTables con scrollX:true.

   Problema: DataTables con scrollX:true imposta inline width
   sul <table> + width inline su ogni <col> / <th>, calcolate
   sommando il contenuto delle celle. Con header corti (es.
   "A", "Cc", "Ccn", "Stato", "Tipo") o con righe vuote la
   somma delle colonne resta MOLTO sotto la larghezza del
   wrapper. Sotto table-layout:fixed le colonne stanno ferme
   alla loro width inline -> la table totale e' piu' stretta
   del wrapper e si vede una striscia beige a destra (bg del
   wrapper). Min-width:100% sulla table non risolve perche'
   con fixed le colonne non si espandono.

   Fix: forziamo width:100% e table-layout:auto sia su scrollBody
   che scrollHead. Auto layout ignora le inline width delle col e
   distribuisce la larghezza proporzionalmente al contenuto,
   espandendosi sempre fino al 100% del wrapper. Mantiene scrollX
   per tabelle realmente piu' larghe (auto + width 100% e' minimo:
   se il contenuto serve piu' spazio, la table si espande). */
.dataTables_wrapper:has(.vhm-flat-table) .dataTables_scrollBody > table,
.dataTables_wrapper:has(.vhm-flat-table) .dataTables_scrollHead > .dataTables_scrollHeadInner > table,
.ordine-detail-app .dataTables_wrapper .dataTables_scrollBody > table,
.ordine-detail-app .dataTables_wrapper .dataTables_scrollHead > .dataTables_scrollHeadInner > table,
.cespite-detail-app .dataTables_wrapper .dataTables_scrollBody > table,
.cespite-detail-app .dataTables_wrapper .dataTables_scrollHead > .dataTables_scrollHeadInner > table {
    width: 100% !important;
    table-layout: auto !important;
}


/* =========================================================
   Rimozione del collassamento responsive di DataTables (il
   cerchietto verde "+" dtr-control) su TUTTO il progetto:
   le tabelle "no-render" (moduli custom *-table-container,
   pagine ListView generate *-listview-container, ordini THS
   #ordine-container, risultati ricerca THS, carrello gomme
   #cartContainer) hanno ora data-responsive="false" sul
   proprio <table> e mostrano SEMPRE tutte le colonne; se non
   entrano, scorrono in orizzontale dentro il contenitore.
   Il selettore ".dataTables_wrapper > table" (figlio DIRETTO)
   prende solo le tabelle inizializzate senza scrollX: quelle
   con scrollX (dataTableInit) hanno la table annidata dentro
   .dataTables_scroll* e gestiscono gia' lo scroll da sole. */
div[id$="-table-container"],
div[id$="-listview-container"],
#ordine-container,
#cartContainer,
#search-results-container {
    overflow-x: auto;
}

    div[id$="-table-container"] .dataTables_wrapper > table,
    div[id$="-listview-container"] .dataTables_wrapper > table,
    #ordine-container .dataTables_wrapper > table,
    #cartContainer .dataTables_wrapper > table,
    #search-results-container .dataTables_wrapper > table,
    div[id$="-table-container"] .dataTables_wrapper > .row > div > table,
    div[id$="-listview-container"] .dataTables_wrapper > .row > div > table,
    #ordine-container .dataTables_wrapper > .row > div > table,
    #cartContainer .dataTables_wrapper > .row > div > table,
    #search-results-container .dataTables_wrapper > .row > div > table {
        max-width: none;
    }

        div[id$="-table-container"] .dataTables_wrapper > table thead th,
        div[id$="-listview-container"] .dataTables_wrapper > table thead th,
        #ordine-container .dataTables_wrapper > table thead th,
        #cartContainer .dataTables_wrapper > table thead th,
        #search-results-container .dataTables_wrapper > table thead th,
        div[id$="-table-container"] .dataTables_wrapper > .row > div > table thead th,
        div[id$="-listview-container"] .dataTables_wrapper > .row > div > table thead th,
        #ordine-container .dataTables_wrapper > .row > div > table thead th,
        #cartContainer .dataTables_wrapper > .row > div > table thead th,
        #search-results-container .dataTables_wrapper > .row > div > table thead th {
            white-space: nowrap;
        }

    /* 2026-07-16: lo scroll orizzontale delle tabelle no-render deve avvenire
   sul .dataTables_wrapper, NON solo sul container: la regola generale
   ".dataTables_wrapper:has(.vhm-flat-table) { overflow: hidden }" (fix
   angoli arrotondati, piu' sopra) clippa la tabella dentro il wrapper,
   quindi il container non vede mai overflow e la scrollbar non compare
   (colonne tagliate). Il bundle DataTables e' "bs5" (styling Bootstrap 5):
   il dom di default e' "<'row'<'col-sm-12'tr>>", quindi la tabella senza
   scrollX NON e' figlia diretta del wrapper ma sta in
   .dataTables_wrapper > .row > .col-sm-12 > table. I selettori ":has(> table)"
   restano per robustezza (dom non-bootstrap), quelli ":has(> .row > div > table)"
   sono il caso reale. Con scrollX la tabella sta ancora piu' in fondo
   (dentro .dataTables_scroll) e nessuna delle due varianti matcha: quei
   wrapper gestiscono gia' lo scroll da soli. Specificita' + posizione dopo
   nel file -> vince sull'overflow:hidden (0,2,0). Sui browser senza :has()
   quella regola non si applica comunque e continua a scrollare il container.
   La scrollbar appare dentro il bordo arrotondato del wrapper, come
   nelle tabelle scrollX (es. Valutazioni). */
    div[id$="-table-container"] .dataTables_wrapper:has(> table),
    div[id$="-listview-container"] .dataTables_wrapper:has(> table),
    #ordine-container .dataTables_wrapper:has(> table),
    #cartContainer .dataTables_wrapper:has(> table),
    #search-results-container .dataTables_wrapper:has(> table),
    div[id$="-table-container"] .dataTables_wrapper:has(> .row > div > table),
    div[id$="-listview-container"] .dataTables_wrapper:has(> .row > div > table),
    #ordine-container .dataTables_wrapper:has(> .row > div > table),
    #cartContainer .dataTables_wrapper:has(> .row > div > table),
    #search-results-container .dataTables_wrapper:has(> .row > div > table) {
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Le .row del dom bs5 hanno i margini negativi del grid Bootstrap (±12px)
   e le col il padding compensativo: la tabella resta al posto giusto ma il
   box della row sborda SEMPRE di 12px oltre il wrapper -> con overflow-x:auto
   comparirebbe una scrollbar "fantasma" anche quando la tabella entra tutta.
   Azzeriamo margini e padding (net-zero sulla posizione della tabella: il
   CSS dt-bootstrap5 fa lo stesso dentro .table-responsive). Vale anche per
   i wrapper con scrollX negli stessi container: il netto non cambia. */
    div[id$="-table-container"] .dataTables_wrapper > .row,
    div[id$="-listview-container"] .dataTables_wrapper > .row,
    #ordine-container .dataTables_wrapper > .row,
    #cartContainer .dataTables_wrapper > .row,
    #search-results-container .dataTables_wrapper > .row {
        margin-left: 0;
        margin-right: 0;
    }

        div[id$="-table-container"] .dataTables_wrapper > .row > div[class*="col-"],
        div[id$="-listview-container"] .dataTables_wrapper > .row > div[class*="col-"],
        #ordine-container .dataTables_wrapper > .row > div[class*="col-"],
        #cartContainer .dataTables_wrapper > .row > div[class*="col-"],
        #search-results-container .dataTables_wrapper > .row > div[class*="col-"] {
            padding-left: 0;
            padding-right: 0;
        }

/* =========================================================
   2026-07-16: KILL INDICATORI SORT — su richiesta utente le
   freccette di ordinamento vanno rimosse da TUTTE le tabelle.
   Il blocco triangoli ▲▼ custom piu' sopra e' stato commentato,
   ma sotto ci sono le frecce di DEFAULT di DataTables (testo
   unicode ↑/↓ via ::before/::after + padding-right:30px, in
   Scripts/DataTables/datatables.css:172-217): quel file viene
   iniettato via scriptLoader DOPO questo, quindi serve !important.
   Il click di ordinamento resta funzionante: dipende dalle classi
   .sorting sui th e dagli handler JS, non dai pseudo-elementi. */
table.dataTable > thead > tr > th.sorting::before,
table.dataTable > thead > tr > th.sorting::after,
table.dataTable > thead > tr > th.sorting_asc::before,
table.dataTable > thead > tr > th.sorting_asc::after,
table.dataTable > thead > tr > th.sorting_desc::before,
table.dataTable > thead > tr > th.sorting_desc::after,
table.dataTable > thead > tr > th.sorting_asc_disabled::before,
table.dataTable > thead > tr > th.sorting_asc_disabled::after,
table.dataTable > thead > tr > th.sorting_desc_disabled::before,
table.dataTable > thead > tr > th.sorting_desc_disabled::after {
    content: none !important;
    display: none !important;
}

/* Niente piu' spazio riservato alle frecce: torna il padding base
   delle celle (12px 14px, regola .vhm-flat-table in testa al file);
   il default datatables.css metterebbe padding-right:30px. */
table.dataTable > thead > tr > th:not(.sorting_disabled) {
    padding-right: 14px !important;
}

/* =========================================================
   [2026-07-31 STATO-LABEL] Label testuale accanto ai pallini
   di stato — classi condivise.

   PERCHE': in tutto il progetto i "pallini di stato" colorati
   erano MUTI (l'utente vedeva un cerchio verde/giallo/rosso e
   doveva indovinare, o scoprirlo dal tooltip; in Allestimenti
   non c'era nemmeno il tooltip). Su richiesta utente accanto a
   OGNI pallino va il testo che ne spiega il significato: la
   label e' la cosa importante, il colore e' secondario.

   MODELLO: le due colonne gia' sistemate, Anomalie
   (.anomalia-stato-cell/-text, OrdineDetail.css:4338-4378) e
   Date (.date-stato-cell/-text, :4389-4421). Da quelle sono
   estratte geometria e tipografia. NON si replica il "velo" di
   sfondo colorato sulla riga: e' una regola separata che resta
   solo nel tab Anomalie di OrdineDetail (:4640-4696).

   DEVIAZIONE DICHIARATA dalla regola "no codice condiviso,
   duplica per-pagina": la TIPOGRAFIA della label sta qui perche'
   "uniformare" significa per definizione averla identica
   ovunque. Le LARGHEZZE di colonna restano invece per-tabella
   (vedi .small-cell piu' sotto). I due precedenti sopra restano
   scoped per-pagina e non vengono migrati: convivono quindi 3
   convenzioni di naming, ed e' una scelta, non una dimenticanza.

   DUE FORME DI PALLINO, non una — il markup esistente NON viene
   toccato (regola: le classi si aggiungono, non si sostituiscono):
     - <div> che colora con `background-color`  -> .vhm-stato-dot
     - <i class="fa fa-circle text-*"> che colora con `color`
                                                -> .vhm-stato-ico
   Forzare la stessa geometria su entrambe romperebbe i colori.
   ========================================================= */
:root {
    /* Verde "chiuso/riuscito" unificato. #4f8a4c e' il verde di fatto
     del progetto (identico in OrdineDetail/ContrattoDetail/
     CespitiDetail/VeicoloDetail/GestioneCategorie/GestioneFAQ +
     modal-restyle), scelto al posto delle 3 sfumature che
     convivevano: darkgreen #006400 (Ticket), #198754 (Bootstrap
     .text-success), #079400 (Date).
     ATTENZIONE: #4f8a4c su bianco da' 4.14:1 -> va bene per un
     pallino/icona ma NON per il testo. Per la label serve
     --vhm-success-ink (#2e5a2b = 8.04:1), coppia gia' usata in 5
     pill del progetto.
     Nessun verde del progetto e' per-mandante (verificate tutte le
     40 cartelle Content/GWTheme/), ma 4 mandanti hanno il brand
     verde (Agita #00ad4e, Arval/BPER #00885B, Rent2Go #97c225):
     mai usare questo verde sopra una superficie tinta dalla
     mandante, solo sulle superfici bianche/beige di contenuto. */
    --vhm-success: #4f8a4c;
    --vhm-success-ink: #2e5a2b;
}

/* Contenitore della cella: pallino + label affiancati.
   `gap` e `align-items` replicano .anomalia-stato-cell. */
.vhm-stato-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* La label. Tipografia identica a .anomalia-stato-text /
   .date-stato-text (11px / 700 / uppercase / letter-spacing .04em).
   `nowrap` sta QUI e non sulla cella: evita che "PRESO IN CARICO"
   vada a capo in mezzo alla parola, ma lascia al flex la
   possibilita' di mandare la label sotto il pallino se lo spazio
   e' davvero insufficiente. */
.vhm-stato-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: var(--vhm-flat-ink-2, #43413c);
}

/* Pallino forma <div> (Ticket, Gestione Ritiro): il COLORE continua
   ad arrivare dalle classi esistenti, qui solo geometria.
   9px + alone soft come in Anomalie; `flex: 0 0 auto` perche' non
   si schiacci accanto alla label.

   Selettore DISCENDENTE (0,2,0) e non `.vhm-stato-dot` da solo (0,1,0):
   le classi storiche dei pallini dichiarano width/height 15px con la
   stessa specificita' di una singola classe, e alcune vivono in CSS
   caricati DOPO Tables.css (es. .status-gestione-ritiro-block in
   Content/Ordini/GestioneRitiro.css, incluso dalla pagina) — a parita'
   di specificita' vincerebbero loro e il pallino resterebbe da 15px
   solo in quella tabella. Con (0,2,0) la geometria condivisa vince
   sempre, senza dover toccare GestioneRitiro.css, che e' un file
   GENERATO da .scss (vedi compilerconfig.json). */
.vhm-stato-cell > .vhm-stato-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--vhm-flat-surface-3, #efeee8);
}

/* Pallino forma <i class="fa fa-circle"> (Aggiornamenti Massivi,
   Allestimenti, FIF): qui il colore e' `color`, non
   `background-color`, quindi NIENTE width/height/border-radius —
   si regola la dimensione del glifo. */
.vhm-stato-ico {
    flex: 0 0 auto;
    font-size: 9px;
    line-height: 1;
}

/* Stato chiuso/riuscito -> verdino unificato.
   !important necessario: le utility Bootstrap (.text-success e co.)
   dichiarano `color: ... !important` (bootstrap.css:8512-8515), e
   per regola di progetto NON vengono rimosse dal markup. */
.vhm-stato-dot.vhm-stato--ok {
    background-color: var(--vhm-success) !important;
    border-color: var(--vhm-success) !important;
}

.vhm-stato-ico.vhm-stato--ok {
    color: var(--vhm-success) !important;
}
/* La label di uno stato chiuso: tono scuro leggibile, non il verdino. */
.vhm-stato--ok ~ .vhm-stato-text {
    color: var(--vhm-success-ink);
}

/* =========================================================
   [2026-07-31 STATO-LABEL] Colonne "Stato": fare spazio alla label
   SENZA rompere l'allineamento header/corpo.

   Il problema di partenza: main.css:313-315 impone
     .toDatatable:not(.fixedHeader-floating) .small-cell {
        width: 50px !important; }
   e il :not() e' SEMPRE vero perche' fixedHeader e' commentato in
   main-Functions.js:414. In 50px non entra "PRESO IN CARICO".

   DUE TENTATIVI SBAGLIATI, documentati per non ripeterli:

   1) `.vhm-stato-col { width: 132px !important }` — UNA classe (0,1,0)
      contro le TRE di main.css (0,3,0). Essendo entrambe !important
      decide la specificita': vinceva .small-cell, la colonna restava a
      50px e la label non compariva affatto.

   2) `.toDatatable:not(.fixedHeader-floating) .vhm-stato-col {
         width: auto !important; min-width: 150px !important }` —
      specificita' giusta, la label si vedeva, ma la TABELLA SI SFASAVA:
      il corpo slittava progressivamente a destra rispetto
      all'intestazione. Causa: con scrollX DataTables misura il contenuto
      e scrive le larghezze calcolate come STILI INLINE sui <th>/<td> di
      entrambe le tabelle, ed e' cosi' che le tiene sincronizzate. Un
      `width` con !important scavalca quello stile inline su UNA colonna
      sola: le somme delle due tabelle non tornano piu' e tutte le
      colonne successive slittano. Non si vince contro il calcolo di
      DataTables imponendo larghezze: si perde la sincronizzazione.

   SOLUZIONE (quella del precedente Date, date-module.js:362-363): non
   sovrascrivere nulla, TOGLIERE il vincolo. Levando `small-cell` dal
   <th>/<td> della colonna Stato, DataTables misura come contenuto
   naturale la label (che e' `white-space: nowrap`, quindi incomprimibile)
   e assegna da se' una larghezza che la contiene, sincronizzando header
   e corpo. Se lo spazio complessivo non basta la tabella si allarga e
   compare la barra orizzontale di scrollX — comportamento normale nel
   resto del progetto.

   Percio' qui NON c'e' nessuna regola di `width`: .vhm-stato-col resta
   solo come marcatore semantico della colonna (utile per ritrovarla) e
   come garanzia di nowrap sulle tabelle che non sono DataTable. */
.vhm-stato-col {
    white-space: nowrap;
}

/* =========================================================
   [2026-08-10 EMPTY-TABLE] Messaggio "tabella vuota": stile UNICO
   per tutto il VHM legacy -> NERO, TONDO, PESO NORMALE.

   Due sorgenti di markup, stesso stile:
   1) `td.dataTables_empty` -> generata da DataTables quando il
      dataset e' vuoto, con il testo di
      Content/Multilanguage/DataTables/it.json ("sEmptyTable":
      "Nessun dato presente nella tabella"). Il wiring e' globale
      (Scripts/main-Functions.js:314-322), quindi vale su ogni
      `.toDatatable` del progetto.
   2) `td.vhm-table-empty` -> classe marcatrice che aggiungiamo noi
      alle righe "nessun dato" che alcuni moduli iniettano a mano nel
      tbody (testi propri: "Nessun vincolo", "Nessun pagamento"...)
      bypassando DataTables. La classe si AFFIANCA a quelle esistenti
      (text-center / align-middle / pl-table-empty), non le sostituisce.

   QUESTO E' IL SOLO POSTO in cui si stila il messaggio: le pagine non
   devono ridichiarare color/font-style/font-weight sulla cella vuota.

   Perche' `!important` e questa specificita':
   - i concorrenti usano tutti `!important` (stessa situazione
     documentata a :955-958), quindi serve per pareggiare;
   - il concorrente globale e' :112-115 `.vhm-flat-table > tbody > tr > td`
     (0,1,3) che impone `color: var(--vhm-flat-ink-2)` (#43413c) a TUTTE
     le celle, empty inclusa; i selettori qui sotto sono (0,2,3) e lo
     battono. Battono anche `.ordine-detail-app .dataTables_empty` (0,2,0)
     nel caso qualche pagina reintroduca un colore proprio.
   - la variante `.table-hover ... tr:hover` serve perche' l'hover di
     :127-129 e' (0,3,2) e altrimenti al passaggio del mouse la cella
     tornerebbe a --vhm-flat-ink.
   NB: NON si tocca il `font-weight` degli ::before: le icone FontAwesome
   dell'empty state (OrdineDetail.css:4518-4534) stanno su selettori
   ::before distinti col loro `font-weight: 900` e restano intatte. */
table.dataTable > tbody > tr > td.dataTables_empty,
table.dataTable > tbody > tr > td.vhm-table-empty,
.vhm-flat-table > tbody > tr > td.dataTables_empty,
.vhm-flat-table > tbody > tr > td.vhm-table-empty,
table > tbody > tr > td.dataTables_empty,
table > tbody > tr > td.vhm-table-empty,
.vhm-flat-table.table-hover > tbody > tr:hover > td.dataTables_empty,
.vhm-flat-table.table-hover > tbody > tr:hover > td.vhm-table-empty {
    color: #000 !important;
    font-style: normal !important;
    font-weight: 400 !important;
}