/* Filtri sotto le colonne delle SmartTable (parametro UseColumnFilterRow, spento di default).
   Si appoggia a smart-table-bar.css e smart-table-filters.css (la sezione porta anche .smart-table-bar-layout e
   .smart-table-filter-bar) e aggiunge solo cio' che cambia: tutte le regole sono sotto .smart-table-column-filters, classe
   che SmartTable aggiunge alla sezione solo con il flag acceso. Senza il flag nessuna tabella cambia.
   Per tornare indietro basta togliere UseColumnFilterRow dalla pagina (o rimuovere questo file).

   Disposizione: una barra su una riga (ricerca, conteggio, pulsante Filtri, Azzera filtri; a destra Vista, Raggruppa, Colonne,
   Aggiorna, Esporta come icone) e, nell'intestazione della tabella, la riga filtri allineata alle colonne. La barra di selezione
   righe prende il posto della barra con la stessa altezza. Solo token di site.css; solo desktop e portatile.

   Movimento: uno solo, la comparsa della riga filtri (dissolvenza e piccolo scorrimento, ease-out esponenziale). Con
   prefers-reduced-motion niente. Lo scheletro di caricamento e' statico. */

.smart-table-column-filters {
  --nhc-h: 36px;       /* altezza dei controlli */
  --nhc-bar-h: 56px;   /* barra e barra di selezione: uguali, la tabella non si sposta */
  --nhc-head-h: 40px;  /* intestazione colonne: la riga filtri si appoggia sotto quando la tabella scorre */
  --nhc-ring: 0 0 0 3px rgba(var(--primary-rgb), .25);
  --nhc-tint: color-mix(in srgb, var(--primary) 55%, transparent);
  --nhc-press: color-mix(in srgb, var(--primary) 14%, var(--surface));
  --nhc-ease: cubic-bezier(.16, 1, .3, 1);
}

/* La classe e' ripetuta tre volte di proposito: alza la specificita' sopra le regole delle tabelle di site.css, che usano
   :is() molto specifici. Non toglierla: le regole qui sotto smetterebbero di vincere. */
.smart-table-column-filters.smart-table-column-filters.smart-table-column-filters {

  /* -- Barra: gruppi stretti (ricerca e conteggio; Filtri e Azzera), separazioni larghe -- */
  .stb { gap: 0; }
  /* Il contenitore della barra (e della barra di selezione) aggiunge padding e il gap da 12px della griglia sopra la tabella:
     qui la barra si appoggia alla tabella da sola, a tutta larghezza. */
  .standard-table-top-content { padding: 0; margin-bottom: -12px; }
  .nhc-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    box-sizing: border-box; min-height: var(--nhc-bar-h); padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }
  .nhc-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
  .nhc-right { display: flex; align-items: center; gap: 2px; flex: none; }

  .stb-search.nhc-search { flex: 0 1 300px; min-width: 180px; max-width: none; }
  .nhc-search .dxbl-text-edit {
    height: var(--nhc-h); min-height: var(--nhc-h);
    border: 1px solid var(--muted); border-radius: var(--radius); background: var(--surface);
  }
  .nhc-search .dxbl-text-edit input { height: calc(var(--nhc-h) - 2px); color: var(--text); }
  .nhc-search .dxbl-text-edit input::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }
  .nhc-search .dxbl-text-edit:hover:not(.dxbl-disabled) { border-color: var(--text); }
  .nhc-search .dxbl-text-edit:focus-within { border-color: var(--primary); box-shadow: var(--nhc-ring); }

  .nhc-count { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

  .nhc-toggle {
    display: inline-flex; align-items: center; gap: 7px; flex: none; margin-left: 6px;
    height: var(--nhc-h); padding: 0 12px;
    border: 1px solid var(--muted); border-radius: var(--radius); background: var(--surface); color: var(--text);
    font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer;
  }
  .nhc-toggle .stb-count { font-variant-numeric: tabular-nums; }
  .nhc-toggle:hover { background: var(--surface-soft); border-color: var(--text); }
  .nhc-toggle:active { background: var(--nhc-press); }
  .nhc-toggle.active { background: var(--primary-soft); border-color: var(--nhc-tint); color: var(--primary-ink); }
  .nhc-toggle.active:hover { border-color: var(--primary); }
  .nhc-toggle.active:active { background: var(--nhc-press); }
  .nhc-toggle:disabled { opacity: .45; cursor: default; }
  .nhc-toggle > svg:last-child { transition: rotate .16s var(--nhc-ease); }
  .nhc-toggle[aria-expanded="false"] > svg:last-child { rotate: -90deg; }

  .nhc-reset { flex: none; height: var(--nhc-h); padding: 0 8px; border-radius: var(--radius); white-space: nowrap; }
  .nhc-reset:hover { background: var(--primary-soft); }
  .nhc-reset:active { background: var(--nhc-press); }

  /* Focus da tastiera come i campi del form v2: linea blu piena e anello da 3px */
  :is(.nhc-toggle, .nhc-reset, .nhc-icon, .nhc-actions .stb-btn):focus-visible {
    outline: 2px solid var(--primary); outline-offset: 0; box-shadow: var(--nhc-ring);
  }

  /* Icone a destra: senza contorno, riempimento --primary-soft in hover */
  :is(.nhc-icon, .nhc-actions .stb-btn-icon) {
    display: inline-grid; place-items: center; box-sizing: border-box;
    width: var(--nhc-h); height: var(--nhc-h); min-height: var(--nhc-h); padding: 0;
    border: 0; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer;
  }
  :is(.nhc-icon, .nhc-actions .stb-btn-icon):hover:not(:disabled) { background: var(--primary-soft); color: var(--primary-ink); }
  :is(.nhc-icon, .nhc-actions .stb-btn-icon):active:not(:disabled) { background: var(--nhc-press); color: var(--primary-ink); }
  :is(.nhc-icon.active, .nhc-icon.open) { background: var(--primary-soft); color: var(--primary-ink); }
  .nhc-icon > svg, .nhc-actions .stb-btn-icon > svg { width: 18px; height: 18px; }
  .nhc-actions .stb-btn-icon:disabled { opacity: .45; cursor: default; }
  .nhc-actions { display: inline-flex; align-items: center; gap: 2px; }
  .nhc-sep { width: 1px; height: 20px; margin: 0 8px; background: var(--border); }

  /* Pannelli allineati al bordo destro della barra */
  .nhc-right .stb-popover { left: auto; right: 0; }
  .nhc-right .nhc-item > .stb-btn { height: var(--nhc-h); border-color: var(--muted); }

  /* -- Barra di selezione: stesso posto e stessa altezza della barra -- */
  .smart-table-selection-bar {
    box-sizing: border-box; min-height: var(--nhc-bar-h); margin: 0; padding: 10px 16px; flex-wrap: nowrap;
    border: 0; border-bottom: 1px solid var(--nhc-tint); border-radius: 0; background: var(--primary-soft);
  }
  .smart-table-selection-count { font-size: 14px; font-weight: 650; color: var(--primary-ink); font-variant-numeric: tabular-nums; }

  /* -- Riga filtri nell'intestazione: una cella per colonna, controlli da 36px -- */
  .data-table thead tr:first-child th { height: var(--nhc-head-h); }
  /* Titolo che non entra (colonna stretta, badge di priorita'): si tronca a destra con ellissi, mai a sinistra */
  .data-table thead .smart-table-sort-button > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .data-table thead .smart-table-sort-button > span:not(:first-child) { flex: none; }
  /* Focus da tastiera degli ordinamenti e delle opzioni colonna: lo stesso anello dei campi */
  .data-table thead :is(.smart-table-sort-button, .stb-colmenu-toggle):focus-visible {
    outline: 2px solid var(--primary); outline-offset: 0; border-radius: 4px; box-shadow: var(--nhc-ring);
  }
  .data-table thead tr.nhc-filter-row th {
    position: sticky; top: var(--nhc-head-h); z-index: 4;
    box-sizing: border-box; height: 52px; padding: 7px 8px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    overflow: visible; overflow-x: clip; vertical-align: middle;
  }
  .data-table thead tr.nhc-filter-row th.smart-table-sticky-col { z-index: 5; }
  .data-table thead tr.nhc-filter-row th:empty { padding: 0; }

  .nhc-filter-row .nhc-cell { min-width: 0; }
  .nhc-filter-row .nhc-cell .dxbl-text-edit {
    box-sizing: border-box; width: 100%; height: var(--nhc-h); min-height: var(--nhc-h); padding: 0;
    border: 1px solid var(--muted); border-radius: var(--radius); background: var(--surface);
    font-size: 13.5px; font-weight: 400; line-height: 1.2; color: var(--text);
  }
  .nhc-filter-row .nhc-cell :is(dxbl-combo-box, dxbl-text-box, dxbl-date-range-picker, dxbl-spin-edit, dxbl-input-editor) { display: flex; align-items: center; width: 100%; min-width: 0; }
  .nhc-filter-row .nhc-cell .dxbl-text-edit input {
    flex: 1 1 0; width: 1px; min-width: 0; /* il pulsante del calendario/tendina resta dentro la cella */
    height: calc(var(--nhc-h) - 2px); min-height: 0; padding: 0 8px; font-size: 13.5px; font-weight: 400; text-overflow: ellipsis;
    color: var(--text); font-variant-numeric: tabular-nums; /* importi e date si leggono in colonna */
  }
  .nhc-filter-row .nhc-cell .dxbl-text-edit input::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }
  .nhc-filter-row .nhc-cell .dxbl-text-edit:hover:not(.dxbl-disabled) { border-color: var(--text); }
  .nhc-filter-row .nhc-cell .dxbl-text-edit:focus-within { border-color: var(--primary); box-shadow: var(--nhc-ring); }
  .nhc-filter-row .nhc-cell .dxbl-text-edit :is(.dxbl-edit-btn-dropdown, .dxbl-edit-btn-clear) { min-height: 0; color: var(--muted); }
  .nhc-filter-row .nhc-cell .dxbl-text-edit :is(.dxbl-edit-btn-dropdown, .dxbl-edit-btn-clear):hover { color: var(--primary-ink); }
  .nhc-filter-row .nhc-cell .dxbl-text-edit.dxbl-disabled {
    border: 1px dashed var(--border-strong); background: var(--surface-soft); cursor: not-allowed;
  }
  .nhc-filter-row .nhc-cell .dxbl-text-edit.dxbl-disabled input { color: var(--muted); -webkit-text-fill-color: var(--muted); cursor: not-allowed; }

  /* Filtro attivo: sfondo --primary-soft, bordo --primary pieno (>= 3:1 sullo sfondo), testo --primary-ink: il valore resta leggibile, non solo il colore */
  .nhc-filter-row .nhc-cell.is-active .dxbl-text-edit { background: var(--primary-soft); border-color: var(--primary); }
  .nhc-filter-row .nhc-cell.is-active .dxbl-text-edit input { color: var(--primary-ink); font-weight: 550; }
  .nhc-filter-row .nhc-cell.is-active .nhf-seg button.on { color: var(--primary-ink); }

  .nhc-filter-row .nhc-cell .nhf-seg { flex-wrap: nowrap; }
  .nhc-filter-row .nhc-cell .nhf-seg button { height: var(--nhc-h); padding: 0 10px; border-color: var(--muted); }

  /* Unico movimento: la riga filtri compare con dissolvenza e uno scorrimento di 4px */
  .data-table thead tr.nhc-filter-row th > * { animation: nhc-open .22s var(--nhc-ease) both; }

  /* Superfici del browser riprese dal tema: selezione del testo (solo barra e riga filtri) e barra di scorrimento della tabella */
  .nhc-bar ::selection, .nhc-filter-row ::selection { background: rgba(var(--primary-rgb), .22); color: inherit; }
  .table-responsive { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

  /* -- Stati: caricamento a scheletro (statico) e riga fantasma (nessuna frase) -- */
  .nhc-skeleton-row td { box-sizing: border-box; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--border); }
  .nhc-skeleton-row i { display: block; height: 12px; border-radius: 6px; background: var(--bg-soft); }
  .smart-table-state-row:has(.nhc-ghost) > td { padding: 10px 12px; }
  .nhc-ghost {
    box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px;
    border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: none;
    color: var(--primary-ink); font: inherit; font-weight: 650;
  }
  button.nhc-ghost { cursor: pointer; }
  button.nhc-ghost:hover { background: var(--primary-soft); border-color: var(--primary); }
  button.nhc-ghost:active { background: var(--nhc-press); }
  button.nhc-ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 0; box-shadow: var(--nhc-ring); }
  .nhc-ghost--content { height: auto; min-height: 56px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .smart-table-column-filters .nhc-toggle > svg:last-child { transition: none; }
  .smart-table-column-filters.smart-table-column-filters.smart-table-column-filters .data-table thead tr.nhc-filter-row th > * { animation: none; }
}

/* Con un pannello della barra aperto la superficie che contiene la tabella non taglia piu' (site.css le da' overflow:hidden):
   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-column-filters .nhc-bar .stb-popover) { overflow: visible; }