/* Layout "Barra" delle SmartTable (parametro UseBarLayout, spento di default).
   Tutte le regole vivono sotto .smart-table-bar-layout: senza il flag nessuna tabella cambia.
   Per tornare indietro basta togliere UseBarLayout dalla pagina (o rimuovere questo file). */

.smart-table-bar-layout .stb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
  min-width: 0;
}

.smart-table-bar-layout .stb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.smart-table-bar-layout .stb-item {
  position: relative;
}

.smart-table-bar-layout .stb-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Pulsanti della barra */
.smart-table-bar-layout .stb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.smart-table-bar-layout .stb-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.smart-table-bar-layout .stb-btn-icon {
  width: 34px;
  padding: 0;
  justify-content: center;
}

.smart-table-bar-layout .stb-icon {
  flex: none;
}

.smart-table-bar-layout .stb-btn:hover:not(:disabled) {
  background: var(--surface-soft);
}

.smart-table-bar-layout .stb-btn.active,
.smart-table-bar-layout .stb-btn.open {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 28%, #fff);
  color: var(--primary-strong);
}

.smart-table-bar-layout .stb-btn-label {
  color: var(--muted);
}

.smart-table-bar-layout .stb-view-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.smart-table-bar-layout .stb-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary-strong);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.smart-table-bar-layout .stb-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.smart-table-bar-layout :is(.stb-btn, .stb-icon-btn, .stb-link, .stb-preset-name, .stb-chip-remove, .stb-colmenu-toggle, .stb-colmenu-item):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Ricerca */
.smart-table-bar-layout .stb-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 200px;
  max-width: 340px;
  min-width: 160px;
}

.smart-table-bar-layout .stb-search .stb-search-input {
  width: 100%;
  height: 34px;
  min-height: 34px;
  padding-right: 28px;
}

.smart-table-bar-layout .stb-search-clear {
  position: absolute;
  right: 2px;
}

/* Popover */
.smart-table-bar-layout .stb-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: transparent;
}

.smart-table-bar-layout .stb-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  color: var(--text);
  font-size: 0.875rem;
}

.smart-table-bar-layout .stb-popover-wide {
  width: 300px;
}

.smart-table-bar-layout .stb-popover-end {
  left: auto;
  right: 0;
}

.smart-table-bar-layout .stb-pop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.smart-table-bar-layout .stb-pop-title {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
}

.smart-table-bar-layout .stb-pop-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: flex-end;
}

.smart-table-bar-layout .stb-pop-scroll {
  /* lo scroll e' sul popover (max-height 70vh), non su ogni lista */
  max-height: none;
}

.smart-table-bar-layout .stb-pop-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.smart-table-bar-layout .stb-hint,
.smart-table-bar-layout .stb-empty {
  margin: 4px 0 8px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.smart-table-bar-layout .stb-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.smart-table-bar-layout .stb-group + .stb-group {
  margin-top: 10px;
}

.smart-table-bar-layout .stb-group-label {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
}

.smart-table-bar-layout .stb-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}

.smart-table-bar-layout .stb-field-label {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 500;
}

.smart-table-bar-layout .stb-row-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
}

.smart-table-bar-layout .stb-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.smart-table-bar-layout .stb-move {
  display: inline-flex;
  gap: 2px;
}

.smart-table-bar-layout .stb-move .stb-icon-btn {
  width: 22px;
  min-width: 22px;
  height: 22px;
}

/* Viste salvate */
.smart-table-bar-layout .stb-preset {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius);
}

.smart-table-bar-layout .stb-preset.applied {
  background: var(--primary-soft);
}

.smart-table-bar-layout .stb-preset-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.smart-table-bar-layout .stb-preset-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 0;
}

.smart-table-bar-layout .stb-preset-title {
  font-size: 0.84rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-table-bar-layout .stb-preset-sub {
  color: var(--muted);
  font-size: 0.75rem;
}

.smart-table-bar-layout .stb-save {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.smart-table-bar-layout .stb-save-actions {
  display: flex;
  gap: 8px;
}

/* Link e pulsanti-icona */
.smart-table-bar-layout .stb-link {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.smart-table-bar-layout .stb-link:hover:not(:disabled) {
  text-decoration: underline;
}

.smart-table-bar-layout .stb-link:disabled {
  color: var(--muted);
  cursor: default;
}

.smart-table-bar-layout .stb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.smart-table-bar-layout .stb-icon-btn:hover:not(:disabled) {
  background: var(--surface-soft);
  color: var(--text);
}

.smart-table-bar-layout .stb-icon-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Chip dei filtri attivi */
.smart-table-bar-layout .stb-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.smart-table-bar-layout .stb-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-height: 26px;
  padding: 0 2px 0 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.8125rem;
}

.smart-table-bar-layout .stb-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-table-bar-layout .stb-chip-label {
  font-weight: 600;
}

.smart-table-bar-layout .stb-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary-strong);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.smart-table-bar-layout .stb-chip-remove:hover {
  background: var(--surface);
  color: var(--text);
}

/* Menu nell'intestazione di colonna */
.smart-table-bar-layout th > .smart-table-sort-button {
  display: inline-flex;
  max-width: calc(100% - 26px);
  vertical-align: middle;
}

.smart-table-bar-layout .stb-colmenu {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.smart-table-bar-layout .stb-colmenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  opacity: 0.7;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.smart-table-bar-layout .stb-colmenu-toggle:hover,
.smart-table-bar-layout .stb-colmenu-toggle:focus-visible,
.smart-table-bar-layout .stb-colmenu-toggle.open {
  background: var(--border);
  color: var(--text);
  opacity: 1;
}

/* Intestazione: ripetizione di .data-table per battere la specificita' delle regole di tabella in site.css
   (solo sfondo, bordo, colore, peso e altezza: dimensione e maiuscole restano quelle della tabella). */
body .smart-table-bar-layout .data-table.data-table.data-table.data-table thead th {
  height: 40px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
}

body .smart-table-bar-layout .data-table.data-table.data-table.data-table thead th .smart-table-sort-button {
  font-weight: 500;
}

.smart-table-bar-layout th[aria-sort="ascending"] .smart-table-sort-button > span:nth-child(2),
.smart-table-bar-layout th[aria-sort="descending"] .smart-table-sort-button > span:nth-child(2) {
  color: var(--primary-strong);
}

.smart-table-bar-layout .stb-colmenu-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: transparent;
}

.smart-table-bar-layout .stb-colmenu-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.smart-table-bar-layout .stb-colmenu-list.end {
  left: auto;
  right: 0;
}

.smart-table-bar-layout .stb-colmenu-item {
  display: block;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.smart-table-bar-layout .stb-colmenu-item:hover {
  background: var(--surface-soft);
}

.smart-table-bar-layout .stb-colmenu-item[aria-checked="true"] {
  background: var(--primary-soft);
  font-weight: 600;
}

/* Schermi stretti: i popover si ancorano alla barra e restano nel viewport */
@media (max-width: 640px) {
  .smart-table-bar-layout .stb-item {
    position: static;
  }

  .smart-table-bar-layout .stb-popover,
  .smart-table-bar-layout .stb-popover-wide,
  .smart-table-bar-layout .stb-popover-end {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }

  .smart-table-bar-layout .stb-search {
    flex-basis: 100%;
    max-width: none;
    order: -1;
  }
}

/* Caselle dei popover: la casella unificata del sito (dxbl-check) mette l'etichetta prima del riquadro e in grassetto;
   qui la casella va a sinistra e l'etichetta resta normale. */
.smart-table-bar-layout .stb-popover dxbl-check {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.smart-table-bar-layout .stb-popover dxbl-check .dxbl-text {
  font-size: 0.875rem;
  font-weight: 400 !important; /* body label ha font-weight con !important */
  color: var(--text);
}

.smart-table-bar-layout .stb-popover .stb-row-option {
  display: flex;
  align-items: center;
  min-height: 30px;
}

.smart-table-bar-layout .stb-popover dxbl-check {
  min-height: 30px;
}

.smart-table-bar-layout .stb-popover .smart-table-multiselect {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Il th ha overflow:hidden per troncare i titoli lunghi: con il menu colonna aperto il menu veniva tagliato e non si vedeva. */
.smart-table-bar-layout thead th:has(.stb-colmenu-list) {
  overflow: visible;
}

/* Ricerca con lente come nel prototipo; separatori sottili tra le intestazioni di colonna. */
.smart-table-bar-layout .stb-search::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round'><circle cx='7' cy='7' r='4.5'/><path d='M10.5 10.5L14 14'/></svg>") no-repeat center;
  pointer-events: none;
  z-index: 2;
}

.smart-table-bar-layout .stb-search input {
  padding-left: 32px !important; /* il campo DevExpress azzera il padding con !important */
}

.smart-table-bar-layout thead th + th::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--border-strong);
}

/* ---- Rifinitura grafica esterna (Impeccable): barra su fondo bianco, controlli quieti, intestazione e piede come bande ---- */
.smart-table-bar-layout .standard-table-top-content {
  padding: 12px 12px 10px;
  background: var(--surface);
}

.smart-table-bar-layout .stb {
  gap: 10px;
  margin: 0;
}

.smart-table-bar-layout .stb-row {
  gap: 6px;
}

/* Solo Vista, ricerca ed Esporta hanno il bordo a riposo; Filtri, Raggruppa e Colonne compaiono al passaggio o quando sono attivi. */
.smart-table-bar-layout .stb-btn {
  min-height: 34px;
  border-color: transparent;
  background: transparent;
  transition: background-color .16s ease-out, border-color .16s ease-out;
}

.smart-table-bar-layout .stb-btn:hover {
  background: var(--surface-soft);
  border-color: var(--border);
}

.smart-table-bar-layout .stb-btn.active,
.smart-table-bar-layout .stb-btn.open {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 28%, #fff);
  color: var(--primary-strong);
}

.smart-table-bar-layout .stb-row > .stb-item:first-child .stb-btn,
.smart-table-bar-layout .stb-actions .stb-btn {
  border-color: var(--border-strong);
  background: var(--surface);
}

.smart-table-bar-layout .stb-search {
  flex: 1 1 260px;
  max-width: 420px;
}

/* Filtro, raggruppamento e colonne formano un gruppo, separato da una linea sottile. */
.smart-table-bar-layout .stb-search + .stb-item {
  margin-left: 8px;
  padding-left: 8px;
}

.smart-table-bar-layout .stb-search + .stb-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--border);
}

.smart-table-bar-layout .stb-count {
  font-variant-numeric: tabular-nums;
}

/* Intestazione e piede come bande: bordo sopra e sotto, numeri incolonnati. */
body .smart-table-bar-layout .data-table.data-table.data-table.data-table thead th {
  border-top: 1px solid var(--border);
}

.smart-table-bar-layout td.text-end,
.smart-table-bar-layout th.text-end {
  font-variant-numeric: tabular-nums;
}

.smart-table-bar-layout .table-pager {
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

.smart-table-bar-layout .table-responsive {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Il menu di colonna sta dentro lo scorrimento della tabella: con poche righe verrebbe tagliato, quindi gli si lascia spazio. */
.smart-table-bar-layout .table-responsive:has(.stb-colmenu-list) {
  min-height: 330px;
}

.smart-table-bar-layout ::selection {
  background: color-mix(in srgb, var(--primary) 22%, #fff);
}

/* Popover e menu: ombra con offset, ingresso breve che mostra da dove arrivano. */
.smart-table-bar-layout .stb-popover,
.smart-table-bar-layout .stb-colmenu-list {
  border-radius: 12px;
  box-shadow: 0 14px 32px -10px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.06);
  animation: stb-pop-in .16s cubic-bezier(.16, 1, .3, 1);
}

@keyframes stb-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-table-bar-layout .stb-popover,
  .smart-table-bar-layout .stb-colmenu-list {
    animation: none;
  }
}

@media (max-width: 640px) {
  .smart-table-bar-layout .stb-search + .stb-item {
    margin-left: 0;
    padding-left: 0;
  }

  .smart-table-bar-layout .stb-search + .stb-item::before {
    display: none;
  }
}

/* ---- Righe di raggruppamento: fascia neutra al primo livello, riga bianca rientrata ai livelli successivi, chevron al posto di +/-, conteggio in pillola ---- */
.smart-table-bar-layout .smart-table-group-row > td {
  padding: 0 12px;
  height: 40px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft) !important; /* il sito fissa lo sfondo dei gruppi con !important */
  transition: background-color .16s ease-out;
}

.smart-table-bar-layout .smart-table-group-row:hover > td {
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--border)) !important;
}

.smart-table-bar-layout .smart-table-group-row > td:has(> .smart-table-group-toggle:not([style*="margin-left:0px"])) {
  background: var(--surface) !important;
  border-top-color: transparent;
}

.smart-table-bar-layout .smart-table-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 6px 0 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.smart-table-bar-layout .smart-table-group-toggle:hover {
  background: transparent;
}

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

.smart-table-bar-layout .smart-table-group-toggle strong {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}

.smart-table-bar-layout .smart-table-group-row > td:has(> .smart-table-group-toggle:not([style*="margin-left:0px"])) strong {
  font-weight: 500;
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
}

.smart-table-bar-layout .smart-table-group-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: transparent;
  font-size: 0; /* nasconde il + / - del markup di base: il segno e' disegnato qui sotto */
  color: var(--muted);
  transition: background-color .16s ease-out;
}

.smart-table-bar-layout .smart-table-group-toggle:hover .smart-table-group-arrow {
  background: var(--border);
}

.smart-table-bar-layout .smart-table-group-arrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform .16s ease-out;
}

.smart-table-bar-layout .smart-table-group-row.collapsed .smart-table-group-arrow::before {
  transform: rotate(-45deg);
}

.smart-table-bar-layout .stb-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.smart-table-bar-layout .smart-table-group-row em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-left: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .smart-table-bar-layout :is(.stb-btn, .smart-table-group-row > td, .smart-table-group-arrow, .smart-table-group-arrow::before) {
    transition: none;
  }
}

/* ---- Pulsanti: icone attenuate che si accendono su hover/attivo, chevron che ruota quando il popover e' aperto,
   frecce di spostamento disegnate al posto dei caratteri, righe con hover ---- */
.smart-table-bar-layout .stb-btn > svg:first-child {
  color: var(--muted);
  transition: color .16s ease-out;
}

.smart-table-bar-layout .stb-btn:hover > svg:first-child,
.smart-table-bar-layout .stb-btn.active > svg:first-child,
.smart-table-bar-layout .stb-btn.open > svg:first-child {
  color: currentColor;
}

.smart-table-bar-layout .stb-item > .stb-btn > svg:last-child {
  color: var(--muted);
  transition: transform .16s ease-out, color .16s ease-out;
}

.smart-table-bar-layout .stb-item > .stb-btn.open > svg:last-child {
  transform: rotate(180deg);
  color: currentColor;
}

.smart-table-bar-layout .stb-move .stb-icon-btn {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 0; /* nasconde le frecce testuali del markup: il segno e' disegnato sotto */
}

.smart-table-bar-layout .stb-move .stb-icon-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
}

.smart-table-bar-layout .stb-move .stb-icon-btn:first-child::before {
  transform: translate(-50%, -35%) rotate(-135deg);
}

.smart-table-bar-layout .stb-move .stb-icon-btn:last-child::before {
  transform: translate(-50%, -65%) rotate(45deg);
}

.smart-table-bar-layout .stb-row-option {
  margin: 0 -6px;
  padding: 0 6px;
  border-radius: 8px;
  transition: background-color .16s ease-out;
}

.smart-table-bar-layout .stb-row-option:hover {
  background: var(--surface-soft);
}

@media (prefers-reduced-motion: reduce) {
  .smart-table-bar-layout :is(.stb-btn > svg, .stb-row-option) {
    transition: none;
  }
}