/* Filtri "ibridi" delle SmartTable (parametro UseFilterBar, spento di default).
   Vive sopra smart-table-bar.css: tutte le regole sono sotto .smart-table-filter-bar, classe che SmartTable
   aggiunge alla sezione solo con il flag acceso. Senza il flag nessuna tabella cambia.
   Per tornare indietro basta togliere UseFilterBar dalla pagina (o rimuovere questo file). */

.smart-table-filter-bar {
  --nhf-ink: #334155;          /* titoli di gruppo e testo dei segmenti (stesso valore di forms-v2.css, non e' un token) */
  --nhf-field-border: #94a3b8; /* bordo di campi e segmenti (il sito usa --muted #64748b) */
  --nhf-soft-line: #eef2f7;    /* filetti leggeri */
  --nhf-ring: 0 0 0 3px rgba(var(--primary-rgb), .25);
  --nhf-star-on: #d97706;      /* il token --warning del sito e' #f59e0b */
}

/* I pannelli escono dal bordo della scheda: il contenitore non deve tagliarli (il sito mette overflow:hidden su .work-surface).
   Classe ripetuta per battere le regole con :has() di site.css. */
.smart-table-filter-bar.smart-table-filter-bar.smart-table-filter-bar.smart-table-filter-bar.smart-table-filter-bar.smart-table-filter-bar { overflow: visible; }

/* -- Barra: ritocchi ai pulsanti di smart-table-bar.css -- */
.smart-table-filter-bar .stb-row { gap: 6px; }
.smart-table-filter-bar .stb-btn { gap: 7px; }
.smart-table-filter-bar .stb-btn.active > svg:first-child,
.smart-table-filter-bar .stb-btn.open > svg:first-child { color: currentColor; }
.smart-table-filter-bar .stb-count { background: var(--primary); } /* nel sito il badge e' --primary-strong */
.smart-table-filter-bar .nhf-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.smart-table-filter-bar .stb-actions { gap: 6px; }

/* -- Campi DevExpress (ricerca e pannelli): raggio 8, bordo, anello di focus -- */
.smart-table-filter-bar .dxbl-text-edit {
  --dxbl-text-edit-border-radius: 8px;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  border: 1px solid var(--nhf-field-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  box-shadow: none;
  transition: border-color .12s, box-shadow .12s;
}
.smart-table-filter-bar .dxbl-text-edit:hover:not(.dxbl-disabled) { border-color: var(--nhf-ink); }
.smart-table-filter-bar .dxbl-text-edit:focus-within { border-color: var(--primary); box-shadow: var(--nhf-ring); }
.smart-table-filter-bar .dxbl-text-edit input,
.smart-table-filter-bar .dxbl-text-edit .dxbl-text-edit-input {
  height: 30px;
  padding: 0 10px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.2;
}
.smart-table-filter-bar .dxbl-text-edit input { min-width: 0; }
.smart-table-filter-bar .dxbl-text-edit input::placeholder { color: var(--muted); }
.smart-table-filter-bar .stb-search .dxbl-text-edit { font-size: 14px; height: 34px; min-height: 34px; border-color: var(--border-strong); }
.smart-table-filter-bar .stb-search .dxbl-text-edit input { height: 32px; font-size: 14px; padding-left: 32px !important; /* DevExpress azzera il padding con !important */ }
.smart-table-filter-bar .stb-search { flex: 1 1 150px; min-width: 150px; max-width: 300px; }
.smart-table-filter-bar .dxbl-text-edit .dxbl-edit-btn-dropdown,
.smart-table-filter-bar .dxbl-text-edit .dxbl-edit-btn-clear { color: var(--muted); }

/* -- Pannelli (popover) -- */
.smart-table-filter-bar .stb-popover {
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.smart-table-filter-bar .stb-popover.nhf-wide { gap: 18px; overflow: auto; }
.smart-table-filter-bar .stb-popover.nhf-pop-select { width: max-content; min-width: 260px; max-width: min(520px, calc(100vw - 32px)); }
.smart-table-filter-bar .stb-popover.nhf-pop-range { width: 360px; }
.smart-table-filter-bar .stb-popover.nhf-pop-bool { width: 260px; }
.smart-table-filter-bar .stb-popover.nhf-pop-text { width: 300px; }
.smart-table-filter-bar .stb-popover.nhf-pop-panel { width: 380px; max-height: 600px; }
.smart-table-filter-bar .nhf-title {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 7px; color: var(--nhf-ink); font-size: 12.5px; font-weight: 600; line-height: 1.3;
}
.smart-table-filter-bar .stb-popover > .nhf-title { margin: 0; }
.smart-table-filter-bar .nhf-form { display: flex; flex-direction: column; gap: 18px; }
.smart-table-filter-bar .nhf-sec { min-width: 0; }
.smart-table-filter-bar .stb-popover .nh-form { display: flex; flex-direction: column; gap: 14px; }

/* Etichette piccole dei campi (Dal/Al, Da/A) */
.smart-table-filter-bar .nhf-row2 { display: flex; gap: 10px; }
.smart-table-filter-bar .nhf-row2 > label.field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.smart-table-filter-bar .nhf-row2 > label.field > span:first-child { color: var(--muted); font-size: 12.5px; font-weight: 400 !important; line-height: 1.2; } /* "body label" del sito forza il peso con !important */
.smart-table-filter-bar .stb-popover .dxbl-text-edit { width: 100%; }
.smart-table-filter-bar .nhf-row2 :is(dxbl-date-edit, dxbl-spin-edit, dxbl-input-editor) { min-width: 0; width: 100%; }
.smart-table-filter-bar .nhf-row2 .dxbl-text-edit { min-width: 0; overflow: hidden; }
.smart-table-filter-bar .nhf-row2 .dxbl-text-edit input { min-width: 0; flex: 1 1 0; width: 1px; }
.smart-table-filter-bar .nhf-row2 .dxbl-text-edit .dxbl-edit-btn { flex: none; }

/* -- Gruppo segmentato -- */
.smart-table-filter-bar .nhf-seg { display: flex; flex-wrap: wrap; }
.smart-table-filter-bar .nhf-seg button {
  box-sizing: border-box; height: 32px; padding: 0 13px; margin-left: -1px;
  border: 1px solid var(--nhf-field-border); background: var(--surface); color: var(--nhf-ink);
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; cursor: pointer;
}
.smart-table-filter-bar .nhf-seg button:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.smart-table-filter-bar .nhf-seg button:last-child { border-radius: 0 8px 8px 0; }
.smart-table-filter-bar .nhf-seg button.on { position: relative; z-index: 1; background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); }
.smart-table-filter-bar .nhf-seg button:focus-visible, .smart-table-filter-bar .nhf-pre:focus-visible, .smart-table-filter-bar .nhf-star:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* -- Scorciatoie di periodo -- */
.smart-table-filter-bar .nhf-pres { display: flex; flex-wrap: wrap; gap: 8px; }
.smart-table-filter-bar .nhf-pre {
  box-sizing: border-box; height: 30px; padding: 0 12px; border-radius: 15px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--nhf-ink);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
}
.smart-table-filter-bar .nhf-pre.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); }

/* -- Stella (fissa il filtro nella barra) -- */
.smart-table-filter-bar .nhf-star {
  width: 26px; height: 26px; margin: -4px 0; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: #94a3b8; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.smart-table-filter-bar .nhf-star:hover { background: #eef2f7; color: var(--nhf-ink); }
.smart-table-filter-bar .nhf-star.on { color: var(--nhf-star-on); }

/* -- Piede del pannello e testi di servizio -- */
.smart-table-filter-bar .nhf-foot { display: flex; justify-content: space-between; align-items: center; margin-top: -4px; padding-top: 12px; border-top: 1px solid var(--nhf-soft-line); }
.smart-table-filter-bar .nhf-hint { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.smart-table-filter-bar .stb-link { font-size: 13px; font-weight: 500; }

/* -- Chip dei filtri attivi: un solo pulsante-pillola, etichetta e valore con lo stesso peso -- */
.smart-table-filter-bar .stb-chips { padding: 0; margin: 0 0 4px; gap: 8px; }
.smart-table-filter-bar .stb-chip { height: 26px; min-height: 26px; padding: 0 6px 0 10px; gap: 6px; border-radius: 13px; font-size: 13px; font-weight: 500; }
.smart-table-filter-bar .stb-chip-label { font-weight: 500; }
.smart-table-filter-bar .stb-chip-remove { width: 18px; height: 18px; font-size: 13px; font-weight: 500; }
.smart-table-filter-bar .stb-chips .stb-link { margin-left: 4px; }

/* -- Telefono: il pannello diventa foglio dal basso, la barra si riduce a ricerca + pulsante Filtri -- */
.smart-table-filter-bar .nhf-mbtn, .smart-table-filter-bar .nhf-scrim, .smart-table-filter-bar .nhf-sheet { display: none; }
@media (max-width: 480px) {
  .smart-table-filter-bar .stb { gap: 12px; }
  .smart-table-filter-bar .stb-row { flex-wrap: nowrap; gap: 8px; }
  .smart-table-filter-bar .stb-row > .stb-item, .smart-table-filter-bar .nhf-sep, .smart-table-filter-bar .stb-actions { display: none; }
  .smart-table-filter-bar .stb-search { flex: 1; max-width: none; min-width: 0; order: 0; }
  .smart-table-filter-bar .stb-search .dxbl-text-edit { height: 44px; min-height: 44px; border-radius: 10px; border-color: var(--border-strong); }
  .smart-table-filter-bar .stb-search .dxbl-text-edit input { height: 42px; font-size: 15px; padding-left: 38px !important; }
  .smart-table-filter-bar .stb-search::before { left: 12px; width: 16px; height: 16px; }
  .smart-table-filter-bar .nhf-mbtn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); padding: 0; cursor: pointer;
  }
  .smart-table-filter-bar .nhf-mbtn.active { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 28%, #fff); color: var(--primary-strong); }
  .smart-table-filter-bar .nhf-mbtn .stb-count { position: absolute; top: -6px; right: -6px; }
  .smart-table-filter-bar .stb-chips { padding: 0; margin-top: 12px; }
  .smart-table-filter-bar .stb-chips .stb-link { display: none; } /* su telefono "Azzera tutto" sta nel foglio */
  .smart-table-filter-bar .stb-chip { height: 30px; min-height: 30px; padding: 0 8px 0 12px; border-radius: 15px; }

  .smart-table-filter-bar .nhf-scrim { display: block; position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, .42); }
  .smart-table-filter-bar .nhf-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; height: min(640px, 100dvh - 24px);
    display: flex; flex-direction: column; background: var(--surface); border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .22); animation: nhf-sheet-in .22s cubic-bezier(.16, 1, .3, 1);
  }
  .smart-table-filter-bar .nhf-handle { display: flex; justify-content: center; padding-top: 8px; }
  .smart-table-filter-bar .nhf-handle::before { content: ""; width: 38px; height: 4px; border-radius: 2px; background: var(--border-strong); }
  .smart-table-filter-bar .nhf-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; }
  .smart-table-filter-bar .nhf-sheet-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
  .smart-table-filter-bar .nhf-sheet-head .stb-link { height: 44px; padding: 0 4px; font-size: 14px; font-weight: 600; }
  .smart-table-filter-bar .nhf-sheet-body { flex: 1; overflow-y: auto; padding: 4px 16px; display: flex; flex-direction: column; gap: 20px; }
  .smart-table-filter-bar .nhf-sheet-body .nhf-title { margin-bottom: 8px; font-size: 13px; }
  .smart-table-filter-bar .nhf-sheet-body .nhf-seg button { flex: 1; height: 44px; font-size: 14px; padding: 0 4px; }
  .smart-table-filter-bar .nhf-sheet-body .nhf-seg button:first-child { border-radius: 10px 0 0 10px; }
  .smart-table-filter-bar .nhf-sheet-body .nhf-seg button:last-child { border-radius: 0 10px 10px 0; }
  .smart-table-filter-bar .nhf-sheet-body .nhf-pre { height: 36px; border-radius: 18px; padding: 0 14px; font-size: 13.5px; }
  .smart-table-filter-bar .nhf-sheet-body .dxbl-text-edit { height: 44px; min-height: 44px; border-radius: 10px; }
  .smart-table-filter-bar .nhf-sheet-body .dxbl-text-edit input { height: 42px; font-size: 15px; padding: 0 12px; }
  .smart-table-filter-bar .nhf-sheet-foot { display: flex; gap: 10px; padding: 12px 16px 18px; border-top: 1px solid var(--nhf-soft-line); }
  .smart-table-filter-bar .nhf-sheet-foot button {
    box-sizing: border-box; height: 48px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface);
    color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  .smart-table-filter-bar .nhf-sheet-foot .nhf-apply { flex: 1; background: var(--primary); border-color: var(--primary); color: #fff; }
}
@keyframes nhf-sheet-in { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .smart-table-filter-bar .nhf-sheet { animation: none; } }

/* -- Elenco a tendina dei campi DevExpress: il popup e' un portale fuori dalla tabella (figlio di <body>),
      quindi si usa la classe .nhf-dd data con DropDownCssClass. !important su bordo, raggio, ombra e font:
      il tema Fluent li fissa sul dialogo con specificita' piu' alta -- */
dxbl-dropdown-dialog.nhf-dd.nhf-dd {
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 32px -10px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .06) !important;
  font-family: var(--app-font-family) !important;
  overflow: hidden;
}
dxbl-dropdown-dialog.nhf-dd .dxbl-list-box-render-container ul { padding: 4px; margin: 0; }
dxbl-dropdown-dialog.nhf-dd .dxbl-list-box-render-container li {
  min-height: 32px; display: flex; align-items: center; padding: 0 8px; border-radius: 8px;
  font-family: var(--app-font-family); font-size: 14px; font-weight: 400; color: var(--text);
}
dxbl-dropdown-dialog.nhf-dd .dxbl-list-box-render-container li:hover { background: #f1f5f9; }
dxbl-dropdown-dialog.nhf-dd .dxbl-list-box-render-container li[aria-selected="true"] { background: var(--primary-soft); color: var(--primary-strong); font-weight: 500; }