/* Faccette delle SmartTable (parametro UseFacetPanel, spento di default): i filtri sono piccoli grafici dei dati, cliccabili, dentro un
   pannello a comparsa sotto la barra. Si appoggia a smart-table-column-filters.css (la sezione porta anche .smart-table-column-filters per
   la barra su una riga) e aggiunge solo cio' che cambia: tutte le regole sono sotto .smart-table-facets, classe che SmartTable aggiunge
   alla sezione solo con il flag acceso. Senza il flag nessuna tabella cambia. Per tornare indietro basta togliere UseFacetPanel dalla
   pagina (o rimuovere questo file).

   Un'idea sola: i filtri mostrano i dati (stato, mesi, utenti, importi) e si scelgono toccando il grafico. Tutto il resto resta quieto:
   stessi token, font e raggio di 8px del sito; righe e celle della tabella invariate. Solo token di site.css; solo desktop e portatile.

   Movimento: uno solo, la comparsa del pannello (dissolvenza e scorrimento di 4px, ease-out esponenziale) con l'altezza delle colonne
   che segue i conteggi. Con prefers-reduced-motion niente. */

.smart-table-facets {
  --sf-ease: cubic-bezier(.16, 1, .3, 1);
  --sf-ink2: color-mix(in srgb, var(--text) 74%, var(--surface));
  /* Colori degli stati: gli stessi dei badge di site.css (.chip.success, .warning, .neutral, .danger) */
  --sf-ok: #047857;
  --sf-wait: #b45309;
  --sf-draft: #475569;
  --sf-no: #b91c1c;
  /* Parti attenuate (non scelte) e guide delle barre: grigio-azzurro con contrasto >= 3:1 sullo sfondo del pannello (le informazioni non spariscono) */
  --sf-dim: color-mix(in srgb, var(--muted) 82%, var(--surface));
  --sf-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}

/* Classe ripetuta tre volte di proposito (come smart-table-column-filters.css): batte i selettori :is() molto specifici di site.css. */
.smart-table-facets.smart-table-facets.smart-table-facets {

  /* -- Barra: al massimo due gettoni (dal terzo c'e' "+N"); ricerca e gettoni si stringono (i gettoni troncano il testo con i puntini) invece di
        andare a capo: da ~970px di larghezza in su tutto sta su una riga e la barra non cambia altezza. Sotto, gettoni e "Azzera filtri" vanno
        a capo (mai Filtri e Gestisci filtri) e le icone di destra restano allineate alla prima riga -- */
  .nhc-bar { container: sfbar / inline-size; }
  .nhc-left { flex-wrap: nowrap; row-gap: 6px; }
  .nhc-right { align-self: flex-start; }
  @container sfbar (max-width: 937px) { .nhc-left { flex-wrap: wrap; } }
  .stb-search.nhc-search { flex: 0 1 200px; min-width: 150px; }
  /* La barra sta sopra lo strato trasparente che chiude il pannello: Gestisci filtri, ricerca e le altre icone restano cliccabili a pannello aperto */
  .nhc-bar { flex-wrap: nowrap; position: relative; z-index: 55; }
  .sf-manage-btn { flex: none; }
  /* Il contatore dei filtri attivi e' un badge sull'angolo: la larghezza di "Filtri" non cambia e "Gestisci filtri" non slitta quando compare */
  /* Il conteggio ("5 risultati" / "400 risultati") riserva la larghezza fino a tre cifre: filtrando i pulsanti a destra non scorrono */
  .nhc-count { min-width: 10ch; }
  .nhc-toggle { position: relative; }
  .nhc-toggle .stb-count { position: absolute; top: -7px; right: -7px; box-shadow: 0 0 0 2px var(--surface); }
  .nhc-toggle.open { background: var(--primary-soft); border-color: var(--nhc-tint); color: var(--primary-ink); }
  .nhc-toggle.open > svg:last-child { rotate: 0deg; }

  .sf-tok {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 88px; max-width: 180px;
    height: 30px; padding: 0 4px 0 12px; border-radius: 99px;
    background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .sf-tok-label { flex: none; font-weight: 500; }
  .sf-tok-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sf-tok button {
    display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 99px; background: none; color: inherit; cursor: pointer;
  }
  .sf-tok button:hover { background: rgba(var(--primary-rgb), .18); }

  /* "+N": gli altri gettoni stanno in un piccolo elenco sotto al pulsante */
  .sf-tok-more-wrap { flex: none; }
  .sf-tok-more {
    display: inline-grid; place-items: center; height: 30px; min-width: 34px; padding: 0 10px; border: 0; border-radius: 99px;
    background: var(--primary-soft); color: var(--primary-ink); font: inherit; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer;
  }
  .sf-tok-more:hover, .sf-tok-more.open { background: rgba(var(--primary-rgb), .18); }
  .sf-tok-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .sf-tok-pop { width: auto; min-width: 200px; max-width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .sf-tok-pop .sf-tok { max-width: 100%; }
  .nhc-toggle:disabled, .sf-manage-btn:disabled { opacity: .5; cursor: default; }

  :is(.sf-tok button, .sf-manage-btn):focus-visible {
    outline: 2px solid var(--primary); outline-offset: 0; box-shadow: var(--nhc-ring);
  }

  /* -- Pannello a comparsa, a larghezza tabella sotto la barra -- */
  .sf-panel {
    position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
    /* Superficie piena (mai trasparente): il pannello sta sopra la tabella e niente deve intravedersi. Anche l'animazione non tocca l'opacita'. */
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: visible;
    box-shadow: 0 18px 40px -10px rgba(15, 23, 42, .28), 0 4px 10px -2px rgba(15, 23, 42, .10);
    color: var(--text); font-size: 13.5px; line-height: 1.45;
    container: sfpanel / inline-size;
    animation: sf-open .2s var(--sf-ease);
  }
  .sf-panel:focus { outline: none; }
  .sf-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-radius: var(--radius); background: var(--surface-soft); }
  /* Sotto ~900px il pannello va su due colonne (2x2): ogni faccetta tiene almeno ~230px di larghezza utile */
  @container sfpanel (max-width: 899px) {
    .sf-grid:not([data-n="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-grid:not([data-n="1"]) > .sf-col + .sf-col { border-left: 0; }
    .sf-grid:not([data-n="1"]) > .sf-col:nth-child(even) { border-left: 1px solid var(--border); }
    .sf-grid:not([data-n="1"]) > .sf-col:nth-child(n+3) { border-top: 1px solid var(--border); }
    .sf-grid:not([data-n="1"]) > .sf-col:last-child:nth-child(odd) { grid-column: 1 / -1; }
  }
  /* La colonna e' il contenitore: l'asse dei mesi e quello delle fasce si adattano alla sua larghezza (container query, non al viewport) */
  .sf-col { container: sfcol / inline-size; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 18px 16px; }
  .sf-col + .sf-col { border-left: 1px solid var(--border); }

  .sf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 24px; }
  .sf-head h3 { margin: 0; padding: 0; font-size: 13px; font-weight: 650; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text); }
  .sf-tools { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  .sf-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary-ink); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

  /* Tutti i controlli del pannello sono pulsanti senza aspetto di pulsante: stessa base, poi ognuno il suo disegno.
     :where() porta la specificita' del reset a zero, cosi' colore, font e margini negativi delle singole classi vincono sempre. */
  :where(.sf-clr, .sf-nav button, .sf-seg, .sf-lg, .sf-row, .sf-col-btn, .sf-more, .sf-pick) {
    box-sizing: border-box; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
    appearance: none; -webkit-appearance: none;
  }
  :where(.sf-clr, .sf-nav button, .sf-seg, .sf-lg, .sf-row, .sf-col-btn, .sf-more, .sf-pick):focus-visible {
    outline: none; box-shadow: var(--sf-focus);
  }

  .sf-clr { padding: 2px 8px; margin: 0 -4px 0 0; border-radius: 6px; color: var(--primary-strong); font-size: 12.5px; font-weight: 600; }
  .sf-clr:hover { background: var(--primary-soft); }

  .sf-nav { display: inline-flex; gap: 2px; }
  .sf-nav button { display: grid; place-items: center; width: 24px; height: 22px; padding: 0; border-radius: 6px; color: var(--sf-ink2); }
  .sf-nav button:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary-strong); }
  .sf-nav button:disabled { opacity: .35; cursor: default; }

  /* Stato: barra a segmenti e legenda. Ogni stato ha colore, simbolo, nome e conteggio; le rifiutate sono a righe: il colore da solo non basta */
  .sf-stack { display: flex; gap: 2px; height: 12px; }
  .sf-seg { min-width: 4px; padding: 0; border-radius: 4px; transition: opacity .16s, filter .16s; }
  .tone-ok { --sf-tone: var(--sf-ok); }
  .tone-wait { --sf-tone: var(--sf-wait); }
  .tone-draft { --sf-tone: var(--sf-draft); }
  .tone-no { --sf-tone: var(--sf-no); }
  .tone-done { --sf-tone: var(--text); }
  .tone-none { --sf-tone: var(--primary); }
  /* Il riempimento batte la regola comune dei pulsanti del pannello (piu' specifica per via di ".sf-nav button") */
  .sf-seg.sf-seg { background-image: linear-gradient(var(--sf-tone), var(--sf-tone)); }
  .sf-seg.tone-no { background: repeating-linear-gradient(135deg, var(--sf-no) 0 3px, var(--surface) 3px 5px); outline: 1.5px solid var(--sf-no); outline-offset: -1.5px; }
  .sf-seg.tone-no:focus-visible { outline: 1.5px solid var(--sf-no); box-shadow: var(--sf-focus); }
  /* Parti non scelte: meno colore ma non grigio uniforme, cosi' la barra a righe (Rifiutata) e quella piena scura (Chiusa) restano distinte */
  .sf-stack.has .sf-seg:not(.on) { filter: saturate(.3); opacity: .72; }
  /* Hover: la barra e' cliccabile col mouse, quindi risponde (leggermente piu' scura, con un filo del suo colore); la legenda sotto fa da controllo da tastiera */
  .sf-seg:hover { filter: brightness(.9); outline: 2px solid color-mix(in srgb, var(--sf-tone) 40%, transparent); outline-offset: 1px; }
  .sf-stack.has .sf-seg:not(.on):hover { filter: none; opacity: 1; }

  .sf-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 14px; }
  .sf-lg { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px; margin: 0 -8px; min-width: 0; border-radius: 6px; font-weight: 500; }
  .sf-lg:hover { background: var(--bg-soft); }
  .sf-gl { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 99px; background: var(--sf-tone); color: #fff; }
  .sf-lg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf-lg-count { margin-left: auto; font-weight: 600; color: var(--sf-ink2); font-variant-numeric: tabular-nums; }
  .sf-lg.on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 650; }
  .sf-lg.on .sf-lg-count { color: var(--primary-ink); }
  /* Voci a zero: restano leggibili (il "0" e' il segnale), solo piu' leggere nel peso e senza barra */
  :is(.sf-lg, .sf-row, .sf-pick).zero :is(.sf-lg-name, .sf-row-name, .sf-pick-name) { font-weight: 400; }

  /* Utenti, aziende e altri elenchi: barre orizzontali */
  .sf-rows { display: flex; flex-direction: column; gap: 2px; }
  .sf-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 28px; align-items: center; gap: 8px; height: 28px; padding: 0 8px; margin: 0 -8px; border-radius: 6px; }
  .sf-row:hover { background: var(--bg-soft); }
  .sf-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  /* Guida e riempimento: una linea sottile per il 100%, la barra piena sopra */
  .sf-row-track { height: 6px; border-radius: 99px; background: linear-gradient(var(--sf-dim), var(--sf-dim)) center / 100% 2px no-repeat; }
  .sf-row-track i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
  .sf-row-count { text-align: right; font-weight: 600; color: var(--sf-ink2); font-variant-numeric: tabular-nums; }
  .sf-row.on { background: var(--primary-soft); color: var(--primary-ink); }
  .sf-row.on .sf-row-name { font-weight: 650; }
  .sf-row.on .sf-row-count { color: var(--primary-ink); }

  /* Righe senza valore: ci sono e fanno tornare i conti, ma non si possono filtrare da qui (nessun cursore, nessun hover) */
  .sf-row-empty, .sf-lg-empty { cursor: default; color: var(--sf-ink2); }
  .sf-row-empty:hover, .sf-lg-empty:hover { background: none; }
  .sf-row-empty .sf-row-track i { background: var(--sf-dim); }
  .sf-lg-empty { --sf-tone: var(--sf-draft); }
  .sf-more { align-self: flex-start; padding: 2px 8px; margin: 2px -8px 0; border-radius: 6px; color: var(--primary-strong); font-size: 12.5px; font-weight: 600; }
  .sf-more:hover { background: var(--primary-soft); }
  .sf-more-inline { margin: 0 -8px 0 0; flex: none; }
  .sf-foot > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* Mesi e importi: colonne cliccabili. Il colore azienda resta pieno; senza la scelta attiva tutto e' a pieno colore, con una scelta le altre si attenuano */
  .sf-cols { display: flex; align-items: flex-end; gap: 6px; height: 76px; }
  /* Le colonne sono sempre alte 49px e si scalano dal fondo (--r = altezza/49, scritto dal markup): l'animazione e' solo transform, mai layout.
     Il raggio verticale e' diviso per --r perche' la scala non schiacci gli angoli; il valore sopra la colonna scende della stessa quantita'. */
  .sf-col-btn { --sf-barh: 49px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; flex: 1; min-width: 0; height: 100%; padding: 0; border-radius: 6px; }
  .sf-col-v { font-size: 12px; font-weight: 600; line-height: 1; color: var(--sf-ink2); font-variant-numeric: tabular-nums; translate: 0 calc((1 - var(--r, 1)) * var(--sf-barh)); transition: translate .2s var(--sf-ease); }
  .sf-col-bar { width: 100%; height: var(--sf-barh); flex: none; border-radius: 4px 4px 0 0 / min(calc(4px / var(--r, 1)), var(--sf-barh)) min(calc(4px / var(--r, 1)), var(--sf-barh)) 0 0; background: var(--primary);
    transform: scaleY(var(--r, 1)); transform-origin: bottom; transition: transform .2s var(--sf-ease), background .16s; }
  .sf-col-btn:hover .sf-col-bar { background: var(--primary-strong); }
  .sf-cols.has .sf-col-btn:not(.on) .sf-col-bar { background: var(--sf-dim); }
  .sf-cols.has .sf-col-btn:not(.on) .sf-col-v { color: var(--sf-ink2); }
  .sf-col-btn.on .sf-col-v { color: var(--primary-ink); }
  /* Colonne a zero: solo un filo chiaro, nessun peso (piu' chiaro anche delle colonne attenuate dalla scelta) */
  .sf-cols.sf-cols .sf-col-btn.zero:not(.on) .sf-col-bar { background: color-mix(in srgb, var(--sf-dim) 38%, var(--surface)); }
  .sf-cols.sf-cols .sf-col-btn.zero:not(.on) .sf-col-v { color: var(--muted); font-weight: 500; }
  .sf-col-btn.on .sf-col-bar { background: var(--primary); }

  /* Asse dei mesi: una colonna per mese, mese in tre lettere e anno sotto gennaio; le etichette possono sporgere dalla cella (niente taglio) */
  .sf-axis { display: flex; gap: 6px; }
  .sf-axis:not(.sf-axis-edges) span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; white-space: nowrap; line-height: 1.2; color: var(--sf-ink2); font-size: 11.5px; font-weight: 500; }
  .sf-axis:not(.sf-axis-edges) span b { font-weight: 500; }
  .sf-axis:not(.sf-axis-edges) span i { height: 12px; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
  /* Fasce: l'etichetta parte dal bordo sinistro della colonna (n colonne uguali con 6px di spazio: il bordo i e' i*(100% + 6px)/n - 3px); allineate
     a sinistra su tutte, cosi' due etichette vicine ("-500" e "0") non si toccano mai */
  .sf-axis-edges { position: relative; display: block; height: 16px; }
  .sf-axis-edges .sf-edge { position: absolute; top: 0; left: calc(var(--i) * (100% + 6px) / var(--n) - 3px); font-size: 11.5px; font-weight: 500; line-height: 1.4; color: var(--sf-ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .sf-axis-edges .sf-edge:first-child { left: 0; }
  @container sfcol (max-width: 330px) {
    .sf-axis:not(.few):not(.sf-axis-edges) span:not([data-m="1"], [data-m="3"], [data-m="5"], [data-m="7"], [data-m="9"], [data-m="11"]) { visibility: hidden; }
  }
  /* Valori dei mesi: con meno di ~18px per colonna se ne mostra uno ogni due (le colonne scelte restano sempre etichettate) */
  @container sfcol (max-width: 209px) {
    .sf-cols-m .sf-col-btn:nth-child(even):not(.on) .sf-col-v { visibility: hidden; }
  }
  @container sfcol (max-width: 205px) {
    .sf-axis-edges .sf-edge:nth-child(even) { visibility: hidden; }
  }
  @container sfcol (max-width: 150px) {
    .sf-axis:not(.few):not(.sf-axis-edges) span:not([data-m="1"], [data-m="4"], [data-m="7"], [data-m="10"]) { visibility: hidden; }
  }
  .sf-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; white-space: nowrap; font-size: 12px; color: var(--sf-ink2); font-variant-numeric: tabular-nums; }

  /* -- Elenco con ricerca (anche sopra la finestra Gestisci filtri) -- */
  .sf-combo-backdrop { position: fixed; inset: 0; z-index: 1079; background: transparent; }
  .sf-combo {
    position: fixed; z-index: 1080; display: flex; flex-direction: column; width: 340px; max-height: min(440px, 70vh);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
    font-size: 13.5px; line-height: 1.45;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06);
  }
  .sf-combo-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 4px; }
  .sf-combo-head h4 { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.4; letter-spacing: 0; text-transform: none; }
  .sf-combo-sum { color: var(--primary-ink); font-size: 12.5px; font-weight: 600; }
  .sf-combo-search { padding: 4px 12px 8px; }
  .sf-combo-search .dxbl-text-edit { width: 100%; height: var(--nhc-h); min-height: var(--nhc-h); border: 1px solid var(--muted); border-radius: var(--radius); background: var(--surface); }
  .sf-combo-search .dxbl-text-edit input { height: calc(var(--nhc-h) - 2px); padding: 0 10px; color: var(--text); }
  .sf-combo-search .dxbl-text-edit:focus-within { border-color: var(--primary); box-shadow: var(--nhc-ring); }
  .sf-combo-list { flex: 1 1 auto; overflow: auto; padding: 0 6px 6px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  .sf-combo-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); color: var(--sf-ink2); font-size: 12.5px; }
  .sf-combo-foot .stb-link { padding: 2px 8px; border-radius: 6px; font-weight: 600; }
  .sf-combo-foot .stb-link:hover { background: var(--primary-soft); text-decoration: none; }

  /* Nessun risultato: una riga fantasma, alta come una voce, al posto del vuoto bianco */
  .sf-pick-ghost { height: 34px; margin: 2px 0; border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 6px; }
  .sf-pick { display: grid; grid-template-columns: 18px minmax(0, 1fr) 56px 30px; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px; border-radius: 6px; }
  .sf-pick:hover { background: var(--bg-soft); }
  .sf-pick-box { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 5px; color: #fff; }
  .sf-pick.on .sf-pick-box { background: var(--primary); border-color: var(--primary); }
  .sf-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .sf-pick-track { height: 6px; border-radius: 99px; background: linear-gradient(var(--sf-dim), var(--sf-dim)) center / 100% 2px no-repeat; }
  .sf-pick-track i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
  .sf-pick-count { text-align: right; font-weight: 600; color: var(--sf-ink2); font-variant-numeric: tabular-nums; }
  .sf-pick.on { background: var(--primary-soft); color: var(--primary-ink); }
  .sf-pick.on .sf-pick-count { color: var(--primary-ink); }

  /* -- Finestra Gestisci filtri: una riga per filtro, a due colonne se c'e' spazio (senza @media: la griglia si adatta da sola) -- */
  .sf-manage-wrap { container: sfm / inline-size; }
  .sf-manage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); column-gap: 32px; align-items: start; }
  /* Titolo della colonna degli interruttori (le due copie hanno la stessa griglia delle righe; la seconda solo con due colonne) */
  .sf-mhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) 44px; gap: 12px; height: 28px; align-items: center; color: var(--sf-ink2); font-size: 12px; font-weight: 600; }
  .sf-mhead span { grid-column: 3; justify-self: end; white-space: nowrap; }
  @container sfm (max-width: 871px) { .sf-mhead-2 { display: none; } }
  .sf-mrange { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sf-mnote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; margin-right: auto; }
  .sf-mstatus { color: var(--sf-ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
  .sf-mhint { color: var(--sf-ink2); font-size: 12px; }
  .sf-mrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) 44px; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--border); }
  .sf-mname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .sf-mrow.active .sf-mname { color: var(--primary-ink); }
  .sf-mctl { min-width: 0; }
  .sf-mctl .dxbl-text-edit { width: 100%; height: 34px; min-height: 34px; }
  /* Campo e testo (anche il segnaposto) centrati: senza padding verticale sul contenitore l'input stava ~3px sotto il centro */
  :is(.sf-mctl, .sf-combo-search) .dxbl-text-edit { padding-block: 0; align-items: center; }
  .sf-mctl .dxbl-text-edit input { height: 100%; }
  .sf-mbtn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 96px; text-align: left; font-weight: 550; }
  .sf-mbtn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sf-mbtn.on { background: var(--primary-soft); border-color: var(--nhc-tint); color: var(--primary-ink); font-weight: 650; }
  .sf-mswitch { display: flex; justify-content: flex-end; }

  /* -- Intestazione piena: sotto .smart-table-facets l'intestazione della tabella e' nel colore azienda (UserThemeColor garantisce >= 4,5:1
        col bianco); righe e celle restano come sono, solo l'hover prende --primary-soft -- */
  .data-table thead tr:first-child th {
    background: var(--primary); color: #fff; border-bottom: 0;
  }
  .data-table thead tr:first-child th :is(.smart-table-sort-button, .stb-colmenu-toggle, .smart-table-header-with-actions, span) { color: inherit; }
  .data-table thead tr:first-child th .stb-caret { border-top-color: #fff; }
  .data-table thead tr:first-child th :is(.smart-table-sort-button, .stb-colmenu-toggle):hover { background: rgba(255, 255, 255, .16); }
  /* Anello di focus bianco sui pulsanti dell'intestazione (su fondo colore azienda quello blu non si vedrebbe) */
  .data-table thead tr:first-child th :is(.smart-table-sort-button, .stb-colmenu-toggle, .smart-table-header-actions button):focus-visible {
    outline: none; border-radius: 4px; box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px #fff;
  }
  /* Maniglia di ridimensionamento: area di presa di 12px addossata al bordo destro della colonna (la th ha overflow:hidden, quindi non puo'
     sporgere sulla vicina), con una linea di 1px ben visibile a riposo (alta poco piu' della meta' dell'intestazione) che al passaggio e durante il trascinamento diventa piena da 2px.
     Una colonna elastica senza vicina a cui cedere spazio (site.js, data-resize-inert) non si afferra: niente linea, cursore normale. */
  .data-table thead tr:first-child th .smart-table-resize-handle { width: 12px; right: 0; }
  /* Il divisorio grigio tra le intestazioni (th + th::before di smart-table-bar.css) affiancato alla linea della maniglia sembrava un "||": nell'intestazione piena il divisorio e' la linea della maniglia */
  .data-table thead tr:first-child th + th::before { display: none; }
  .data-table thead tr:first-child th .smart-table-resize-handle::after {
    top: 22%; bottom: 22%; right: 3px; left: auto; width: 1px; border-radius: 2px;
    background: rgba(255, 255, 255, .42); transition: background .12s;
  }
  .data-table thead tr:first-child th:hover .smart-table-resize-handle::after { background: rgba(255, 255, 255, .62); }
  .data-table thead tr:first-child th .smart-table-resize-handle:is(:hover, :active)::after,
  .data-table thead tr:first-child th.is-resizing .smart-table-resize-handle::after {
    top: 10%; bottom: 10%; right: 2px; width: 2px; background: #fff;
  }
  /* Limite raggiunto (la vicina non puo' cedere altro): la linea vira al rosa chiaro, il bordo non salta */
  .data-table thead tr:first-child th .smart-table-resize-handle.is-limit::after { background: #fecaca; }
  .data-table thead tr:first-child th .smart-table-resize-handle[data-resize-inert] { cursor: default; }
  .data-table thead tr:first-child th .smart-table-resize-handle[data-resize-inert]::after { display: none; }
  .smart-table-resizing { user-select: none; -webkit-user-select: none; }
  .smart-table-resizing, .smart-table-resizing * { cursor: col-resize !important; }
  .data-table tbody tr:hover td { background: var(--primary-soft); }
  /* Righe uniformi: un pulsante da 28px (es. "Invia per approvazione") con il padding standard faceva la riga di 35px contro i 31 delle altre,
     e l'altezza a righe intere del corpo (sotto) sbagliava il conto: l'ultima riga restava tagliata. Con 1px sopra e sotto la riga resta di 31px. */
  .data-table tbody td.actions-col { padding-block: 1px; }

  /* -- Corpo scorrevole: barra sottile senza pulsanti-freccia, un'ombra sul bordo inferiore finche' ci sono altre righe e altezza a righe intere.
        L'altezza replica il budget della pagina (barra, intestazione, piede, margini) invece dei 340px pensati per la tabella senza barra -- */
  .table-responsive { scrollbar-width: auto; scrollbar-color: auto; }
  .table-responsive::-webkit-scrollbar { width: 10px; height: 10px; }
  .table-responsive::-webkit-scrollbar-track { background: transparent; }
  .table-responsive::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid var(--surface); border-radius: 99px; }
  .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--muted); }
  .table-responsive::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  .table-responsive::-webkit-scrollbar-corner { background: transparent; }
  .table-responsive::after {
    content: ""; display: block; position: sticky; bottom: 0; height: 18px; margin-top: -18px; z-index: 5; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(15, 23, 42, .11)); opacity: 0;
  }
  @supports (animation-timeline: scroll()) {
    .table-responsive::after { animation: sf-more linear both; animation-timeline: scroll(self block); animation-range: calc(100% - 28px) 100%; }
  }

  /* -- Piede unito alla tabella: niente stacco, un'unica linea sopra, fondo --surface-soft, angoli inferiori del contenitore. Essenziale come
        da progetto: niente "risultati" ne' "Righe" a vista (restano per i lettori di schermo); a sinistra la dimensione pagina, a destra la
        navigazione senza contorno; pagina corrente su --primary-soft -- */
  .standard-table-shell > .table-pager {
    box-sizing: border-box; min-height: 0; margin-top: -13px; padding: 8px 12px; gap: 12px;
    border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface-soft); box-shadow: none; color: var(--sf-ink2); font-variant-numeric: tabular-nums;
  }
  .table-pager-controls { flex: 1 1 auto; justify-content: space-between; gap: 12px; }
  .table-pager-size-select {
    flex: 0 0 auto; width: auto; min-width: 0; height: 30px; padding: 0 22px 0 10px;
    border: 1px solid transparent; border-radius: 6px; background-color: transparent;
    color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
  }
  .table-pager-size-select:hover:not(:disabled) { background-color: var(--surface); border-color: var(--border-strong); }
  .table-pager-size-select:focus-visible { border-color: var(--primary); box-shadow: var(--sf-focus); }
  .table-pager-navigation { gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .table-pager-navigation .table-pager-button {
    width: 30px; min-width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent;
    color: var(--text); font-size: 20px; box-shadow: none; transition: background-color .12s, color .12s;
  }
  .table-pager-navigation .table-pager-button:hover:not(.dxbl-disabled, :disabled) { background: var(--primary-soft); color: var(--primary-ink); }
  .table-pager-navigation .table-pager-button:focus-visible { outline: none; box-shadow: var(--sf-focus); }
  .table-pager-navigation .table-pager-button:is(.dxbl-disabled, :disabled) { opacity: .35; }
  .table-pager-page {
    min-width: 48px; height: 28px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 6px;
    background: var(--primary-soft); color: var(--primary-ink); font-size: 13px; font-weight: 650;
  }
  /* Una sola pagina: le frecce disabilitate non servono, resta solo la pagina corrente */
  .table-pager-navigation:not(:has(.table-pager-button:not(.dxbl-disabled, :disabled))) .table-pager-button { display: none; }
}

@keyframes sf-more { 0% { opacity: 1; } 100% { opacity: 0; } }

/* Altezza del corpo: intestazione + righe intere (--sf-row-h: altezza reale della riga, 31px da `tr` di site.css) dentro il budget della pagina, cosi' l'ultima riga
   non e' tagliata e la pagina non ha un secondo scorrimento. Stessa condizione di site.css, che dava 100dvh - 340px alla tabella senza barra.
   Il minimo di 260px di site.css (pensato per la tabella senza barra) su schermi bassi (circa 1280x720) superava il budget e faceva scorrere la
   pagina con una riga tagliata: qui il minimo non supera mai il budget. */
@media (min-width: 900px) and (min-height: 560px) {
  .smart-table-facets.smart-table-facets.smart-table-facets .table-responsive {
    --sf-head-h: 40px; --sf-row-h: 31px;
    max-height: calc(100dvh - 351px);
    max-height: calc(var(--sf-head-h) + round(down, 100dvh - 351px - var(--sf-head-h), var(--sf-row-h)));
    min-height: min(260px, calc(100dvh - 351px));
    min-height: min(260px, calc(var(--sf-head-h) + round(down, 100dvh - 351px - var(--sf-head-h), var(--sf-row-h))));
  }
}

@keyframes sf-open { from { translate: 0 -4px; } }

@media (prefers-reduced-motion: reduce) {
  .smart-table-facets.smart-table-facets.smart-table-facets .sf-panel { animation: none; }
  .smart-table-facets.smart-table-facets.smart-table-facets :is(.sf-seg, .sf-col-bar, .sf-col-v, .sf-edge) { transition: none; }
}

/* Con il pannello aperto la superficie che contiene la tabella non taglia: il pannello resta intero anche con poche righe.
   Classe ripetuta per battere i selettori :has() di site.css. */
.work-surface.work-surface.work-surface:has(.smart-table-facets .sf-panel) { overflow: visible; }
.work-surface.work-surface.work-surface:has(.smart-table-facets .nhc-bar .stb-popover) { overflow: visible; }