/* Stile di base della tabella condivisa (SmartTable, tabelle standard, paginazione, stati vuoti).
   Estratto da site.css senza cambiare valori: ogni sito che usa la RCL carica prima nh-tokens.css, poi il
   proprio site.css, poi questo foglio, e infine il proprio tema (che puo' sovrascrivere).

   Token di personalizzazione (NON dichiarati qui: senza definirli vale il fallback, identico al look storico).
   Definiscili nel foglio tema del prodotto, es. :root { --nh-table-head-bg: #eef2ff; }
     --nh-table-head-bg        sfondo intestazione (fallback #f8fafc)
     --nh-table-head-color     colore testo intestazione (#475569)
     --nh-table-row-hover      sfondo riga al passaggio del mouse (var(--primary-tint-3))
     --nh-table-row-stripe     sfondo righe pari, nessuna striscia se assente
     --nh-table-row-selected   sfondo riga selezionata (var(--primary-tint-4))
     --nh-table-border         bordi di intestazione e celle (var(--border) / #eef2f7 / #e8eef7)
     --nh-table-radius         raggio angoli bassi del paginatore (var(--radius))
     --nh-table-cell-padding-y / --nh-table-cell-padding-x   spaziatura celle (8px 10px; 3px 6px nelle tabelle compatte) */
.expense-note-table:has(thead th:nth-child(5)),
.expense-rows-table:has(thead th:nth-child(5)) {
  /* La tabella deve dimensionarsi sul contenuto e non riempire forzatamente il
     contenitore: con min-width:100% su schermi larghi lo spazio in eccesso veniva
     ridistribuito sulle colonne (soprattutto quella azioni) creando grossi vuoti. */
  min-width: 0;
}

.expense-header-table:has(thead th:nth-child(5)) {
  min-width: 0;
}

.settings-table:has(thead th:nth-child(5)) {
  min-width: 0;
}

.expense-header-table th,
.expense-header-table td {
  padding: var(--nh-table-cell-padding-y, 8px) var(--nh-table-cell-padding-x, 10px);
  vertical-align: middle;
}

.expense-header-table th,
.expense-header-table td,
.expense-rows-table th,
.expense-rows-table td {
  white-space: nowrap;
}

.expense-header-table td:nth-child(2),
.expense-rows-table td:nth-child(1),
.expense-rows-table td:nth-child(4) {
  white-space: normal;
}

.expense-header-table tbody td,
.expense-rows-table tbody td {
  font-size: 13px;
}

.expense-sort-header {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
}

.expense-sort-header.align-end {
  text-align: right;
  width: 100%;
}

.smart-table-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--primary-tint-10);
  border-radius: 9px;
  background: var(--primary-tint-4);
}

.smart-table-selection-count {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-strong);
  white-space: nowrap;
}

.smart-table-selection-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.smart-table-selection-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.smart-table-selection-clear {
  text-decoration: none;
}

.smart-table-group-toolbar select {
  min-width: 150px;
}

.smart-table-summary-footer td {
  background: #f1f5f9 !important;
  border-top: 2px solid #cbd5e1;
  color: #0f172a;
  font-weight: 900;
  padding: 10px 12px;
}

.smart-table-summary-label {
  color: #475569;
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.smart-table-summary-value {
  display: block;
  text-align: right;
}

.expense-sort-header {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  gap: 4px;
  font: inherit;
  font-weight: inherit;
  padding: 0;
  text-align: inherit;
  white-space: nowrap;
}

.expense-sort-header.align-end {
  justify-content: flex-end;
  width: 100%;
}

.expense-sort-header.align-center {
  justify-content: center;
  width: 100%;
}

.expense-header-table td:last-child {
  text-align: right;
}

.table-name-link:hover,
.table-name-link:focus-visible {
  color: var(--primary-strong);
  text-decoration: none;
}

.table-empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 190px;
  padding: 34px 20px;
  border: 1px dashed #cbd9ec;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, var(--primary-tint-1) 100%);
  color: var(--muted);
  text-align: center;
}

.table-empty-state span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--primary-tint-5);
  color: var(--primary-strong);
  font-size: 20px;
  font-weight: 950;
}

.table-empty-state strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
}

.table-empty-state p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.table-empty-row td {
  padding: 34px 18px !important;
  text-align: center;
  color: var(--muted);
  background: var(--primary-tint-1);
  border: 1px dashed var(--line);
}

.table-empty-row strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 16px;
}

.table-empty-row span {
  display: block;
  font-weight: 800;
}

.compact-management-table th,
.compact-management-table td {
  white-space: nowrap;
}

/* Rete di sicurezza per table-layout:fixed (vedi .data-table:is(...) piu' sotto):
   in fixed layout una colonna non si allarga mai oltre la larghezza assegnata, quindi
   un contenuto piu' lungo di quella larghezza andrebbe altrimenti a traboccare
   visivamente nella colonna accanto invece di restare dentro la propria cella. */
.compact-management-table th,
.compact-management-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-header-refresh {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.smart-table-export-error {
  color: var(--danger);
  font-size: 12px;
  margin-left: 6px;
  white-space: nowrap;
}

.smart-table-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: max-content;
  width: max-content;
}

.smart-table-header-with-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* Senza questo gap le icone della toolbar (aggiorna/esporta/impostazioni) e il titolo della
     colonna finiscono attaccati, senza respiro - capita in ogni tabella senza colonna azioni
     dedicata, dove la toolbar finisce nell'intestazione della prima colonna dati. */
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.smart-table-header-with-actions .smart-table-sort-button {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ridimensionamento colonne SmartTable (site.js gestisce il drag): l'header ospita l'handle come
   figlio assolutamente posizionato sul proprio bordo destro, quindi serve un contesto di
   posizionamento. Applicato solo alle th che espongono davvero l'handle (colonna con
   CanResize=true), non a tutte le th della tabella. */
.smart-table-th-resizable {
  position: relative;
}

.smart-table-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
  z-index: 1;
}

.smart-table-resize-handle::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 3px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
}

.smart-table-th-resizable:hover .smart-table-resize-handle::after {
  background: rgba(var(--primary-rgb), .35);
}

.smart-table-resize-handle:hover::after,
.smart-table-resize-handle:active::after {
  background: var(--primary, #2563eb);
}

/* Riordino colonne con Ctrl+trascinamento (site.js): nessun indizio visivo permanente (il gesto
   e' opt-in via Ctrl, non deve competere con l'hover del ridimensionamento o dell'ordinamento) -
   solo feedback mentre il trascinamento e' in corso. */
.smart-table-th-dragging {
  position: relative;
  opacity: .45;
  outline: 2px dashed var(--primary, #2563eb);
  outline-offset: -2px;
}

/* SetColumnPositionAsync inserisce sempre la colonna trascinata PRIMA di quella su cui viene
   rilasciata: la barra sul bordo sinistro indica esattamente il punto di inserimento, invece del
   precedente riquadro sull'intera cella (ambiguo: non diceva "prima" o "dopo"). */
.smart-table-th-drop-target {
  position: relative;
}

.smart-table-th-drop-target::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: -3px;
  width: 4px;
  border-radius: 2px;
  background: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .22);
  animation: smartTableDropPulse .9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes smartTableDropPulse {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
  }

  50% {
    opacity: .55;
    transform: scaleY(.85);
  }
}

.smart-table-header-action-button {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0;
  font-size: 12px;
}

.standard-table-shell {
  width: 100%;
  min-width: 0;
}

.table-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--nh-table-radius, var(--radius)) var(--nh-table-radius, var(--radius));
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #5f6f84;
  font-size: 13px;
}

.table-pager-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}

.table-pager-count,
.table-pager-total {
  color: #15243b;
  font-weight: 850;
}

.table-pager-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.table-pager-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.table-pager-size-label {
  margin: 0;
  color: #6b7a90;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.table-pager-size-select {
  /* 78px tagliava visivamente "100" a "10" (spazio insufficiente tra il testo e la freccia
     nativa del <select>, mai nascosta con appearance:none): 90px basta al valore a 3 cifre. */
  flex: 0 0 90px;
  width: 90px;
  min-width: 90px;
  height: 38px;
  padding: 6px 30px 6px 12px;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background-color: #fff;
  color: #15243b;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  outline: none;
}

.table-pager-navigation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.table-pager-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
}

.table-pager-page {
  min-width: 48px;
  text-align: center;
  font-weight: 800;
  color: #15243b;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .table-pager {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .table-pager-controls {
    justify-content: space-between;
    width: 100%;
  }

  .table-pager-actions {
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }

  .table-pager-navigation {
    margin-left: auto;
  }
}

.table {
  min-width: 860px;
  margin-bottom: 0;
}

.data-table th,
.table th {
  border-bottom-color: var(--nh-table-border, var(--border));
  background: var(--nh-table-head-bg, #f8fafc);
  color: var(--nh-table-head-color, #475569);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
}

.data-table th[data-sortable="true"] {
  cursor: pointer;
}

.data-table td,
.table td {
  border-color: var(--nh-table-border, #eef2f7);
  color: #1f2937;
  vertical-align: middle;
}

.data-table tbody tr:hover,
.table tbody tr:hover {
  background: var(--nh-table-row-hover, var(--primary-tint-3));
}

.data-table:is(.expense-note-table, .expense-rows-table, .commesse-rows-table, .settings-table, .absences-table, .compact-management-table) {
  border-collapse: separate;
  border-spacing: 0;
}

.data-table:is(.expense-note-table, .expense-rows-table, .commesse-rows-table, .settings-table, .absences-table, .compact-management-table) tbody tr {
  background: transparent;
}

.compact-management-table.data-table:is(.expense-note-table, .expense-rows-table, .commesse-rows-table, .settings-table, .absences-table, .compact-management-table) tbody tr > td {
  padding: var(--nh-table-cell-padding-y, 3px) var(--nh-table-cell-padding-x, 6px);
}

/* .smart-table-sort-button e .smart-table-header-with-actions sono flex:
   il text-align/text-end del <th> (colonne numeriche come "Spesa"/"KM") non
   si applica ai loro figli flex, quindi l'intestazione restava a sinistra
   mentre i valori sotto sono allineati a destra. Vince sulle regole sopra
   (comprese quelle scoped per portale) perche' l'allineamento dichiarato
   dalla colonna ha sempre priorita'. */
th.text-end .smart-table-sort-button,
th.text-end .smart-table-header-with-actions,
.text-end .smart-table-sort-button,
.text-end .smart-table-header-with-actions {
  justify-content: flex-end !important;
}

th.text-center .smart-table-sort-button,
th.text-center .smart-table-header-with-actions,
.text-center .smart-table-sort-button,
.text-center .smart-table-header-with-actions {
  justify-content: center !important;
}

.data-table:is(.expense-note-table, .expense-rows-table, .commesse-rows-table, .settings-table, .absences-table, .compact-management-table) tbody tr > td :where(a, button, span, strong, em, small) {
  line-height: inherit;
}

.data-table:is(.expense-note-table, .expense-rows-table, .commesse-rows-table, .settings-table, .absences-table, .compact-management-table) tbody tr > td:first-child {
  border-left: 1px solid var(--nh-table-border, #e8eef7);
  border-radius: 0;
}

.data-table:is(.expense-note-table, .expense-rows-table, .commesse-rows-table, .settings-table, .absences-table, .compact-management-table) tbody tr > td:last-child {
  border-right: 1px solid var(--nh-table-border, #e8eef7);
  border-radius: 0;
}

.data-table:is(.expense-note-table, .expense-rows-table, .commesse-rows-table, .settings-table, .absences-table, .compact-management-table) tbody tr:hover > td {
  border-color: var(--primary-tint-9);
  background: var(--nh-table-row-hover, var(--primary-tint-3));
}

.data-table:is(.expense-note-table, .expense-rows-table, .commesse-rows-table, .settings-table, .absences-table, .compact-management-table) tbody tr > td:first-child {
  box-shadow: inset 3px 0 #dbe3ee;
}

/* Righe alternate: livello trasparente di default, si vede solo se il tema definisce --nh-table-row-stripe. */
.data-table tbody tr:nth-child(even) {
  background-image: linear-gradient(var(--nh-table-row-stripe, transparent), var(--nh-table-row-stripe, transparent));
}

/* Le celle hanno sfondo pieno e coprirebbero la striscia della riga: la ripetiamo sulle celle (livello trasparente se il token manca). */
.data-table tbody tr:nth-child(even):not(:hover) > td {
  background-image: linear-gradient(var(--nh-table-row-stripe, transparent), var(--nh-table-row-stripe, transparent)) !important;
}

/* Stesso valore di .table-row-selected in site.css (che resta per il box-shadow): qui diventa personalizzabile. */
.table-row-selected {
  background: var(--nh-table-row-selected, var(--primary-tint-4)) !important;
}

.smart-table-surface {
  display: grid;
  gap: 14px;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.standard-table-shell.smart-table-shell {
  display: grid;
  gap: 12px;
}

.standard-table-top-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.smart-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.smart-table-toolbar-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: min(220px, 100%);
}

.smart-table-toolbar-actions {
  flex: 0 1 auto;
  justify-content: flex-end;
  max-width: 100%;
}

.smart-table-search,
.smart-table-filter-control {
  min-height: 38px;
}

.smart-table-search {
  flex: 1 1 auto;
  min-width: 0;
}

.smart-table-clear-search {
  flex: 0 0 auto;
}

.smart-table-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 12px;
}

.smart-table-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.smart-table-filter-modal .smart-table-filter-dialog {
  width: min(1280px, calc(100vw - 48px));
}

.smart-table-filter-modal {
  align-items: flex-start;
  overflow-y: auto;
  padding-top: 54px;
  padding-bottom: 54px;
}

.smart-table-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  margin: 0 32px 18px;
  padding: 0 16px;
  border: 1px solid #d8e4f2;
  border-radius: 8px;
  background: var(--primary-tint-1);
}

.smart-table-filter-summary-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #344256;
  font-size: 16px;
  font-weight: 750;
}

.smart-table-filter-summary-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: #65758a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7L3 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7L3 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.smart-table-reset-link {
  min-width: auto;
  padding-inline: 0;
  color: var(--primary);
  font-weight: 900;
}

.smart-table-filter-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 28px;
  align-items: stretch;
  padding: 0 32px 24px;
}

.smart-table-filter-presets,
.smart-table-filter-editor {
  min-width: 0;
  background: transparent;
}

.smart-table-filter-editor {
  display: grid;
  gap: 26px;
}

.smart-table-filter-group {
  display: grid;
  gap: 18px;
  padding-bottom: 26px;
  border-bottom: 1px solid #d8e4f2;
}

.smart-table-filter-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.smart-table-filter-group h3,
.smart-table-filter-presets h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.smart-table-filter-presets {
  display: grid;
  align-content: start;
  gap: 20px;
  padding-left: 28px;
  border-left: 1px solid #d8e4f2;
}

.smart-table-filter-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  margin-bottom: 8px;
}

.smart-table-preset-name {
  display: grid;
  gap: 8px;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
}

.smart-table-filter-preset-list {
  display: grid;
  gap: 8px;
}

.smart-table-filter-preset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid #d8e4f2;
  border-radius: 8px;
  background: #fff;
}

.smart-table-filter-preset-row > span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-table-filter-preset-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.smart-table-preset-apply {
  min-width: auto;
  padding-inline: 0;
  color: var(--primary);
  font-weight: 900;
}

.smart-table-advanced-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Etichetta a sinistra, campo da impostare a destra, un filtro per riga: prima era etichetta sopra
   + campo sotto, con due filtri affiancati per riga (grid auto-fit). */
.smart-table-filter-field {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-weight: 800;
}

.smart-table-filter-field > span {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  text-transform: none;
}

/* Filtro intervallo (Data/Numero) dentro la modal: i due input restano nella colonna di destra,
   uno sotto l'altro invece che affiancati, ciascuno con la propria etichetta "Da"/"A" visibile.
   Non tocca .smart-table-header-filters, che resta affiancato/compatto. */
.smart-table-filter-field .smart-table-range-filter {
  grid-template-columns: 1fr;
  gap: 8px;
}

.smart-table-range-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 700;
}

.smart-table-range-filter-item > span {
  flex: 0 0 auto;
  width: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.smart-table-range-filter-item .smart-table-filter-control {
  flex: 1 1 auto;
  min-width: 0;
}

.smart-table-header-filters th {
  background: #f8fafc;
  padding: 8px;
  overflow: visible;
  /* Colonna stretta a mano dall'utente: il filtro non deve uscire a destra, altrimenti fa comparire lo
     scroll orizzontale anche con lo scorrimento disattivato. */
  overflow-x: clip;
  vertical-align: middle;
}

.smart-table-range-filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.smart-table-multiselect-wrap {
  display: grid;
  gap: 6px;
}

.smart-table-multiselect-search {
  min-height: 30px;
}

.smart-table-multiselect {
  display: grid;
  gap: 6px;
  font-size: 13px;
  max-height: 220px;
  overflow-y: auto;
}

.smart-table-multiselect-empty {
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 2px;
}

.smart-table-columns-layout-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px solid #eef2f7;
  border-radius: 9px;
}

.smart-table-settings-inline-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.smart-table-column-options {
  display: grid;
  gap: 8px;
}

.smart-table-column-option {
  position: relative;
  display: grid;
  grid-template-columns: 30px 34px minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 8px;
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 8px;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, opacity .14s ease, transform .14s ease;
}

.smart-table-column-option::before {
  background: var(--primary);
  border-radius: 999px;
  content: "";
  height: 3px;
  left: 10px;
  opacity: 0;
  position: absolute;
  right: 10px;
  top: -2px;
  transition: opacity .14s ease;
}

.smart-table-column-option::after {
  background: var(--primary);
  border: 3px solid var(--primary-tint-9);
  border-radius: 999px;
  content: "";
  height: 13px;
  left: 10px;
  opacity: 0;
  position: absolute;
  top: -7px;
  transition: opacity .14s ease;
  width: 13px;
}

.smart-table-column-option.drop-target::before,
.smart-table-column-option.drop-target::after {
  opacity: 1;
}

.smart-table-column-drag-handle,
.smart-table-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--primary-tint-9);
  border-radius: 999px;
  background: var(--surface);
  color: #64748b;
  cursor: grab;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  user-select: none;
}

.smart-table-column-drag-handle:hover,
.smart-table-column-drag-handle:focus-visible,
.smart-table-drag-handle:hover,
.smart-table-drag-handle:focus-visible {
  border-color: var(--primary-tint-13);
  background: var(--primary-tint-4);
  color: var(--primary-strong);
  outline: none;
}

.smart-table-column-drag-handle:active,
.smart-table-drag-handle:active {
  cursor: grabbing;
}

/* Riordino righe via drag and drop (SmartTable.EnableRowReorder): maniglia di riga + marker di
   destinazione tra le righe, stesso linguaggio visivo del riordino colonne sopra. */
.smart-table-drag-handle-col {
  width: 32px;
}

.smart-table-select-col {
  width: 40px;
  text-align: center;
}

/* Colonne fisse a sinistra durante lo scroll orizzontale (selezione, maniglia riordino riga, colonna
   azioni): position:sticky con "left" calcolato lato server (SmartTable.razor) come stile inline. Serve
   uno sfondo opaco perche' una cella sticky non si "stacca" dal flusso della riga - senza sfondo proprio,
   il contenuto delle altre colonne che scorrono sotto resterebbe visibile in trasparenza. Nessuna riga
   selezionata ha oggi un colore proprio (solo la checkbox lo indica), quindi non serve una variante per
   quello stato; l'hover replica lo stesso colore gia' usato su .data-table tbody tr (niente righe
   alternate: rimosse ovunque su richiesta esplicita). */
.smart-table-sticky-col {
  position: sticky;
  z-index: 2;
  background: var(--surface);
}

.smart-table-drop-zone-row {
  height: 0;
}

.smart-table-drop-zone {
  position: relative;
  height: 6px;
  padding: 0 !important;
  border: none !important;
}

.smart-table-drop-zone.active::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 2px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
}

.smart-table-drop-zone.active::after {
  content: "";
  position: absolute;
  left: 4px;
  top: -3px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--primary-tint-9);
  border-radius: 999px;
  background: var(--primary);
}

.smart-table-column-meta {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.smart-table-column-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-table-column-required {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.smart-table-filter-option-tag {
  justify-self: start;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 1px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.smart-table-filter-options-intro {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.smart-table-column-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 120px;
}

/* Alternativa da tastiera al trascinamento della colonna (frecce su/giu'): stessa colonna di
   griglia dedicata accanto alla maniglia di drag, cosi' il layout resta coerente indipendentemente
   da quale dei due metodi si usa. Stesse frecce sottili (non triangoli pieni) e stessa logica
   colore/hover di .smart-table-sort-button, per non introdurre un linguaggio visivo nuovo: un
   bottone quadrato con triangolo pieno risultava sproporzionato accanto alla maniglia di drag. */
.smart-table-column-move-buttons {
  display: grid;
  gap: 0;
}

.smart-table-column-move-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.smart-table-column-move-btn:hover:not(:disabled),
.smart-table-column-move-btn:focus-visible:not(:disabled) {
  color: var(--primary-strong);
}

.smart-table-column-move-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.smart-table-column-switch {
  justify-content: flex-end;
}

.smart-table-small-button {
  min-width: 30px;
  width: 30px;
  height: 30px;
}

.smart-table-width-input {
  width: 96px;
}

.smart-table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.smart-table-sort-button:hover,
.smart-table-sort-button:focus-visible {
  color: var(--primary-strong);
}

/* Numero di priorita' nell'ordinamento multi-colonna (2, 3, ...): visibile solo quando sono attivi
   piu' criteri, per questo resta piccolo e discreto, non un badge "importante" come quello delle
   viste condivise. */
.smart-table-sort-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--primary-tint-7);
  color: var(--primary-strong);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

/* Stato vuoto della SmartTable (SmartTableEmptyState): icona a linea in un cerchio tenue, titolo e
   testo del contesto della tabella; senza riquadro tratteggiato, le intestazioni restano visibili sopra. */
.smart-table-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 28px 20px 30px;
  text-align: center;
}

.smart-table-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
}

.smart-table-empty-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.smart-table-empty strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.smart-table-empty p {
  max-width: 380px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.smart-table-empty-action {
  margin-top: 4px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--primary-strong);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.smart-table-empty-action:hover,
.smart-table-empty-action:focus-visible {
  text-decoration-thickness: 2px;
}

.smart-table-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 999px;
  animation: nethub-spin .75s linear infinite;
}

/* Modal unica "Impostazioni tabella" (SmartTableSettingsModal): sostituisce le tre modal
   separate Filtri/Colonne/Filtri visibili con un hub a sidebar, un solo pulsante toolbar.
   Riferimento: design handoff "Grafica Blazor per analisi", direzione 1c. */
.smart-table-settings-dialog {
  width: min(788px, 96vw);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.smart-table-settings-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 212px 1fr;
  overflow: hidden;
}

.smart-table-settings-sidebar {
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  background: #f8fafc;
  border-right: 1px solid #eef3f9;
  overflow-y: auto;
}

.smart-table-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smart-table-settings-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #475569;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.smart-table-settings-nav-item:hover {
  background: #eef2f7;
}

.smart-table-settings-nav-item.active {
  background: var(--primary-tint-4);
  color: var(--primary-strong);
  font-weight: 800;
  box-shadow: inset 2px 0 0 var(--primary);
}

.smart-table-settings-nav-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.smart-table-settings-nav-count.active {
  background: var(--primary);
  color: #fff;
}

.smart-table-settings-divider {
  height: 1px;
  margin: 14px 2px;
  background: #e5ebf3;
}

.smart-table-settings-presets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.smart-table-settings-presets-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #94a3b8;
}

.smart-table-settings-presets-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}

.smart-table-settings-preset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e8eef6;
  border-radius: 9px;
  background: #fff;
}

.smart-table-settings-preset-row.applied {
  border-color: var(--primary-tint-10);
  background: var(--primary-tint-4);
}

.smart-table-settings-preset-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.smart-table-settings-preset-count {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.smart-table-settings-preset-delete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.smart-table-settings-preset-delete:hover {
  background: #fef2f2;
  color: var(--danger);
}

.smart-table-settings-preset-shared-badge {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--primary-strong);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.smart-table-settings-preset-duplicate {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.smart-table-settings-preset-duplicate:hover,
.smart-table-settings-preset-duplicate:focus-visible {
  background: var(--primary-tint-4);
  color: var(--primary-strong);
}

.smart-table-settings-preset-share-toggle {
  align-self: flex-start;
}

.smart-table-settings-preset-save-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.smart-table-settings-preset-input {
  min-height: 34px;
}

.smart-table-settings-preset-save-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.smart-table-settings-preset-add {
  border: 1px dashed #bcd0ea;
  border-radius: 9px;
  padding: 8px;
  background: #fff;
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.smart-table-settings-preset-add:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.smart-table-settings-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
}

.smart-table-settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.smart-table-settings-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.smart-table-settings-section-intro {
  margin: -6px 0 14px;
  color: #94a3b8;
  font-size: 11.5px;
}

.smart-table-settings-chip {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--primary-tint-10);
  border-radius: 999px;
  background: var(--primary-tint-4);
  color: var(--primary-strong);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.smart-table-settings-group {
  margin-bottom: 20px;
}

.smart-table-settings-group-label {
  display: block;
  margin-bottom: 9px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.smart-table-settings-drag-handle {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  grid-auto-rows: 3px;
  gap: 3px;
  width: 14px;
  height: 15px;
  align-content: center;
  justify-content: center;
  cursor: grab;
}

.smart-table-settings-drag-handle span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #94a3b8;
}

.smart-table-settings-drag-handle:active {
  cursor: grabbing;
}

.smart-table-settings-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef3f9;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.smart-table-settings-tag.fixed {
  background: var(--primary-tint-4);
  color: var(--primary-strong);
}

.smart-table-settings-visibility-list {
  display: grid;
  gap: 8px;
}

.smart-table-settings-visibility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid #eef2f7;
  border-radius: 9px;
}

.smart-table-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.smart-table-settings-toggle:hover,
.smart-table-settings-toggle:focus-visible {
  border-color: var(--primary-tint-13);
  color: var(--primary-strong);
}

.smart-table-settings-toggle.open {
  border-color: var(--primary-tint-13);
  background: var(--primary-tint-4);
  color: var(--primary-strong);
}

.smart-table-settings-toggle.icon-only {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  justify-content: center;
}

/* Badge conteggio filtri attivi: ancorato in overlay sull'angolo dell'icona,
   non in linea con essa, altrimenti nei 24px del pulsante icon-only i due
   elementi si accavallano/deformano (segnalato dall'utente come pulsante
   "sminchiato"). Renderizzato solo quando il conteggio e' > 0. */
.smart-table-settings-toggle.icon-only .smart-table-settings-toggle-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border: 2px solid #fff;
  font-size: 9px;
  line-height: 10px;
}

.smart-table-settings-toggle-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.smart-table-settings-toggle-count.active {
  background: var(--primary);
  color: #fff;
}

/* Sotto ~520px il pulsante "Impostazioni tabella" diventa icona sola col solo count pill,
   coerente con gli altri icon-button del toolbar (stesso pattern di .smart-table-clear-search
   e affini). */
@media (max-width: 520px) {
  .smart-table-settings-toggle:not(.icon-only) {
    padding: 7px;
  }

  .smart-table-settings-toggle:not(.icon-only) .smart-table-settings-toggle-label {
    display: none;
  }
}

@media (max-width: 900px) {
  .smart-table-filter-modal-grid {
    grid-template-columns: 1fr;
  }

  .smart-table-filter-presets {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #d8e4f2;
    padding-top: 22px;
  }

  .smart-table-filter-save,
  .smart-table-filter-preset-row {
    grid-template-columns: 1fr;
  }

  .smart-table-filter-preset-actions {
    justify-content: flex-start;
  }

  .smart-table-settings-dialog {
    width: min(96vw, 720px);
  }

  .smart-table-settings-body {
    grid-template-columns: 1fr;
  }

  .smart-table-settings-sidebar {
    border-right: 0;
    border-bottom: 1px solid #eef3f9;
  }

  .smart-table-settings-nav {
    flex-direction: row;
    overflow-x: auto;
  }

  .smart-table-settings-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .smart-table-advanced-grid {
    grid-template-columns: 1fr;
  }

  .smart-table-settings-dialog {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  .smart-table-settings-nav-item,
  .smart-table-settings-preset-row,
  .smart-table-settings-visibility-row,
  .smart-table-column-option {
    min-height: 44px;
  }
}

.smart-table-settings-preset-shared-badge {
  background: #bfdbfe;
  color: #1e40af;
}

/* Paginazione tabelle: il gruppo ‹ pagina › non ha un secondo contorno attorno ai pulsanti, che hanno gia' il loro bordo.
   Specificita' alzata perche' diverse regole di superficie (note spese, tabelle standard e partner) lo ridefiniscono. */
body .table-pager-navigation.table-pager-navigation.table-pager-navigation {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Righe espandibili della SmartTable (ExpandedRowContent): chevron come prima colonna, contenuto a tutta
   larghezza sotto la riga. Solo token del sito; il chevron e' l'unico modo di aprire/chiudere. */
/* !important: le regole delle tabelle compatte (.compact-management-table ... tbody tr > td, overflow:hidden,
   white-space:nowrap) hanno specificita' piu' alta e darebbero padding alla cella del chevron (il pulsante
   sborderebbe) e la renderebbero contenitore di sticky/scroll per il corpo della riga espansa. */
.data-table th.smart-table-expand-col,
.data-table td.smart-table-expand-col {
  width: 44px;
  padding: 0 !important;
  box-sizing: border-box;
  text-align: center;
  overflow: visible !important;
}

.smart-table-expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.smart-table-expand-toggle:hover {
  background: var(--primary-tint-4);
  color: var(--primary);
}

.smart-table-expand-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.data-table tbody tr.smart-table-expand-row:hover {
  background: var(--surface-soft);
}

.data-table tbody tr > td.smart-table-expand-cell {
  padding: 12px 16px;
  background: var(--surface-soft);
  /* clip (non hidden): non crea un contenitore di scroll, cosi' lo sticky mobile resta legato al wrapper. */
  overflow: clip !important;
  white-space: normal;
  text-overflow: clip;
}

.smart-table-expand-body {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 760px), (pointer: coarse) {
  .smart-table-expand-toggle {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 760px) {

  /* La tabella ha una larghezza minima e scorre nel wrapper: il contenuto della riga espansa resta invece
     nella parte visibile del wrapper (sticky a sinistra, larghezza = larghezza del wrapper via container
     query), cosi' si legge senza scorrere di lato. La cella resta a colspan. */
  .table-responsive:has(.smart-table-expand-row) {
    container-type: inline-size;
  }

  .data-table tbody tr > td.smart-table-expand-cell {
    padding: 0 !important;
  }

  .smart-table-expand-body {
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    width: 100cqw;
    padding: 12px 16px;
    overflow-wrap: anywhere;
  }
}

/* Focus da tastiera visibile sul toggle dei gruppi di righe (prima cambiava solo il colore del testo). */
.smart-table-group-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}