/* ============================================================
   Sublima 2026 — Componenti (pilota ac_Articolo)
   TUTTO scoped sotto .s2026 → zero impatto sulle altre pagine.
   Dipende da sublima2026_tokens.css.
   ============================================================ */

.s2026 {
  font-family: var(--s2026-font-sans);
  color: var(--s2026-ink);
  background: var(--s2026-bg);
  margin-left: 0;
  margin-right: 0;
}
.s2026 .code-mono { font-family: var(--s2026-font-mono); font-size: var(--s2026-fs-sm); }
.s2026 .tnum { font-variant-numeric: tabular-nums; }

/* ---------- Card contenitore ---------- */
/* il margin (non padding sul wrapper) crea il "gutter" grigio attorno alla card:
   così in edit (card display:none) la .s2026 collassa e non resta una barra grigia.
   Gutter ridotto al minimo per massimizzare lo spazio tabella/anteprima. */
.s2026 .card {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule-strong);
  border-radius: var(--s2026-radius-lg);
  box-shadow: var(--s2026-shadow-card);
  margin: 6px;
}
/* azzera il gutter Bootstrap della colonna (ridondante: c'è già il margin card) */
.s2026 > .col-xs-12,
.s2026 > [class*="col-"] { padding-left: 0; padding-right: 0; }
/* la pane lista: togli il padding del wrapper interno così toolbar e tabella
   sfruttano tutta la larghezza della card */
.s2026 #nav-lista > .col-sm-12 { padding-left: 0; padding-right: 0; }
/* Bootstrap .row mette il gutter (padding) su TUTTI i figli diretti (.row > *),
   non solo sulle .col: azzeralo nelle pane così la bootstrap-table va edge-to-edge */
.s2026 #nav-tabContent .row { --bs-gutter-x: 0; }
/* Sezione sotto l'header come BOX con bordo grigio (inset come il box header):
   così ha il suo bordo su tutti i lati, top compreso (il bordo della card è solo
   il perimetro esterno e non chiuderebbe l'interno). */
.s2026 #nav-tabContent {
  padding: 4px;
  border: 1px solid var(--s2026-rule-strong);
  border-radius: var(--s2026-radius-md);
  margin: 0 6px 6px;
}

/* ---------- Page header + KPI strip ---------- */
.s2026 .page-header {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-lg);
  box-shadow: var(--s2026-shadow-card);
  margin-bottom: 12px;
}
/* Header come banda superiore DENTRO la card (così edit/chiusura lo nascondono
   insieme alla lista via $(".card").hide()/.show() — vedi sublima.js edit_row) */
.s2026 .page-header--incard {
  /* chrome strutturale: bordo neutro; il brand resta solo sul filetto del titolo */
  border: 1px solid var(--s2026-rule-strong);
  border-radius: var(--s2026-radius-md);
  box-shadow: none;
  margin: 6px 6px 2px;          /* gutter card visibile in alto/lati + 2px distacco sotto */
  background: var(--s2026-bg-raised);
}
/* filetto burgundy d'accento accanto al titolo */
.s2026 .page-header__title {
  border-left: 3px solid var(--s2026-brand);
  padding-left: 12px;
}
.s2026 .page-header__eyebrow {
  display: block;
  font-size: var(--s2026-fs-micro);
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
}
.s2026 .page-header__h1 {
  margin: 2px 0 0;
  font-size: var(--s2026-fs-2xl);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--s2026-ink);
}
/* Riga di contesto sotto il titolo (es. il periodo analizzato di un report).
   NB: per questo NON usare .filtri-badge, che e' il contatore dei filtri attivi
   (min-width 18px, tarato su un numero: un intervallo di date ci esce schiacciato). */
.s2026 .page-header__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: var(--s2026-fs-sm);
  color: var(--s2026-ink-3);
  font-variant-numeric: tabular-nums;
}
.s2026 .kpi-strip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
/* KPI come box con tint pastello per stato + bordino a sinistra */
.s2026 .kpi {
  padding: 6px 12px;
  border-radius: var(--s2026-radius-md);
  border: 1px solid var(--s2026-rule);
  border-left: 3px solid var(--s2026-ink-4);
  background: var(--s2026-bg-panel);
}
.s2026 .kpi--brand   { background: var(--s2026-brand-tint); border-left-color: var(--s2026-brand); }
.s2026 .kpi--success { background: var(--s2026-success-bg); border-left-color: var(--s2026-success); }
.s2026 .kpi--warning { background: var(--s2026-warning-bg); border-left-color: var(--s2026-warning); }
.s2026 .kpi--danger  { background: var(--s2026-danger-bg);  border-left-color: var(--s2026-danger); }
.s2026 .kpi__label {
  display: block;
  font-size: var(--s2026-fs-micro);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
}
.s2026 .kpi__value {
  display: block;
  font-size: var(--s2026-fs-xl);
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--s2026-ink);
}
.s2026 .kpi__value--brand   { color: var(--s2026-brand-text); }
.s2026 .kpi__value--success { color: var(--s2026-success-fg); }
.s2026 .kpi__value--warning { color: var(--s2026-warning-fg); }
.s2026 .kpi__value--danger  { color: var(--s2026-danger-fg); }

/* ---------- Segmented control (DESIGN.md §4.4) — tab nell'header ---------- */
.s2026 .segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 3px;
  background: var(--s2026-bg-raised);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-md);
  flex-wrap: nowrap;
}
.s2026 .segmented .nav-item { margin: 0; }
.s2026 .segmented .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: var(--s2026-radius-sm);
  color: var(--s2026-ink-2);
  font-size: var(--s2026-fs-sm);
  font-weight: 600;
  padding: 5px 14px;
  white-space: nowrap;
  transition: var(--s2026-transition);
}
/* !important: sublima_new.css ha ".nav>li>a:hover{background-color:#aa0000 !important}"
   che altrimenti tinge di rosso pieno i tab del segmented al passaggio del mouse. */
.s2026 .segmented .nav-link:hover { color: var(--s2026-ink) !important; background: transparent !important; }
.s2026 .segmented .nav-link.active:hover {
  color: var(--s2026-brand) !important;
  background: var(--s2026-bg-panel) !important;
}
.s2026 .segmented .nav-link.active {
  color: var(--s2026-brand);
  background: var(--s2026-bg-panel);
  box-shadow: var(--s2026-shadow-tab);
}
/* Override: sublima_new.css usa "#anagraficatab li a(.active)" con !important → serve !important.
   Non-active: nessun bordo (elimina il bordo inset nero spurio) + nessuna ombra.
   Active: bordo bordeaux + testo bordeaux + ombra → indicatore inequivocabile. */
.s2026 #anagraficatab.segmented .nav-link {
  background: transparent !important;
  color: var(--s2026-ink-2) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.s2026 #anagraficatab.segmented .nav-link:hover { background: transparent !important; color: var(--s2026-ink) !important; }
.s2026 #anagraficatab.segmented .nav-link.active {
  background: var(--s2026-brand) !important;
  color: #fff !important;
  border: 1px solid var(--s2026-brand-deep) !important;
  box-shadow: var(--s2026-shadow-tab) !important;
}

/* ---------- Bottoni ---------- */
.s2026 .btn-brand {
  background: var(--s2026-brand);
  border: 1px solid var(--s2026-brand-deep);
  color: #fff;
  font-weight: 600;
  border-radius: var(--s2026-radius);
  transition: var(--s2026-transition);
}
.s2026 .btn-brand:hover { background: var(--s2026-brand-hover); color: #fff; }
.s2026 .btn-ghost {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  color: var(--s2026-ink-2);
  font-weight: 600;
  border-radius: var(--s2026-radius);
  transition: var(--s2026-transition);
}
.s2026 .btn-ghost:hover { background: var(--s2026-bg-raised); color: var(--s2026-ink); }

/* Override scoped dei bottoni della toolbar condivisa (#toolbar) */
.s2026 #toolbar .btn { border-radius: var(--s2026-radius); font-weight: 600; }
.s2026 #toolbar .btn-warning,
.s2026 #toolbar .add_row_button {
  background: var(--s2026-brand);
  border-color: var(--s2026-brand-deep);
  color: #fff;
}
.s2026 #toolbar .btn-warning:hover,
.s2026 #toolbar .add_row_button:hover { background: var(--s2026-brand-hover); }
.s2026 #toolbar .btn-info,
.s2026 #toolbar .btn-primary,
/* .btn-secondary = "Azioni" (dropdown) + bottoni bootstrap-table dopo la ricerca
   (refresh/colonne/export): stesso trattamento tematizzato di "Report" (btn-info)
   → bianco in light, scuro in dark. */
.s2026 #toolbar .btn-secondary {
  background: var(--s2026-bg-panel);
  border-color: var(--s2026-rule);
  color: var(--s2026-ink-2);
}
.s2026 #toolbar .btn-info:hover,
.s2026 #toolbar .btn-primary:hover,
.s2026 #toolbar .btn-secondary:hover { background: var(--s2026-bg-raised); color: var(--s2026-ink); }
/* .btn-success = "Inserimento rapido" (⚡): sibling di "+ Nuovo" → NON neutro. Distinto
   dal "+" pieno: brand outline (tinta + bordo brand), diventa pieno all'hover. */
.s2026 #toolbar .btn-success,
.s2026 #toolbar .add_row_button_fast {
  background: var(--s2026-brand-tint);
  border-color: var(--s2026-brand);
  color: var(--s2026-brand-text);
}
.s2026 #toolbar .btn-success:hover,
.s2026 #toolbar .add_row_button_fast:hover {
  background: var(--s2026-brand);
  border-color: var(--s2026-brand-deep);
  color: #fff;
}

/* ---------- Status badge (DESIGN.md §4.6) ---------- */
.s2026 .c-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 7px;
  border-radius: var(--s2026-radius-pill);
  font-size: var(--s2026-fs-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.s2026 .c-status-badge__dot { width: 6px; height: 6px; border-radius: 50%; }
/* Sfondo pieno col colore di stato "base" (non la tinta -bg pastello) + testo/dot
   bianchi: richiesto colori pieni per gli stati, non pastello. I token base non
   cambiano tra i due temi quindi nessun gating dark serve. */
.s2026 .c-status-badge--success { background: var(--s2026-success-bg); color: var(--s2026-success-fg); }
.s2026 .c-status-badge--success .c-status-badge__dot { background: var(--s2026-success-fg); }
.s2026 .c-status-badge--warning { background: var(--s2026-warning-bg); color: var(--s2026-warning-fg); }
.s2026 .c-status-badge--warning .c-status-badge__dot { background: var(--s2026-warning-fg); }
.s2026 .c-status-badge--info    { background: var(--s2026-info-bg);    color: var(--s2026-info-fg); }
.s2026 .c-status-badge--info .c-status-badge__dot    { background: var(--s2026-info-fg); }
.s2026 .c-status-badge--danger  { background: var(--s2026-danger-bg);  color: var(--s2026-danger-fg); }
.s2026 .c-status-badge--danger .c-status-badge__dot  { background: var(--s2026-danger-fg); }
.s2026 .c-status-badge--purple  { background: var(--s2026-purple-bg);  color: var(--s2026-purple-fg); }
.s2026 .c-status-badge--purple .c-status-badge__dot  { background: var(--s2026-purple-fg); }
.s2026 .c-status-badge--neutral { background: var(--s2026-neutral-bg); color: var(--s2026-neutral-fg); }
.s2026 .c-status-badge--neutral .c-status-badge__dot { background: var(--s2026-neutral-fg); }

/* ---------- Category badge ---------- */
.s2026 .c-cat-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--s2026-radius-xs);
  background: var(--s2026-neutral-bg);
  color: var(--s2026-neutral-fg);
  font-size: var(--s2026-fs-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ---------- Data-table: theming output bootstrap-table ---------- */
/* #toolbar è la barra azioni reale (bottoni + ricerca + icone): banda raised */
.s2026 #toolbar {
  background: var(--s2026-bg-raised);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-md);
  padding: 6px 8px;
  margin-bottom: 6px;
}
/* la .fixed-table-toolbar nativa qui è vuota (ricerca/colonne spostate in #toolbar) */
.s2026 .fixed-table-toolbar { padding: 0; border: 0; }
.s2026 .search input,
.s2026 #toolbar .form-control {
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius);
  background: var(--s2026-bg-input);
  font-size: var(--s2026-fs-sm);
  padding: 6px 10px;
}
.s2026 .search input:focus,
.s2026 #toolbar .form-control:focus {
  border-color: var(--s2026-brand);
  box-shadow: var(--s2026-focus-ring);
  outline: none;
}
/* Search più evidente: icona lente burgundy, bordo marcato, più larga.
   La larghezza sta sul CONTENITORE .search (l'input la riempie) → stabile
   con o senza il bottone "pulisci" (data-show-search-clear-button). */
.s2026 #toolbar .search { min-width: 320px; max-width: 520px; }
.s2026 #toolbar .search .input-group { width: 100%; flex-wrap: nowrap; }
.s2026 #toolbar .search { align-self: center; }
.s2026 #toolbar .search .search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;          /* allinea l'altezza ai bottoni della toolbar */
  border: 1px solid var(--s2026-rule-strong);
  background-color: #fff;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B1538' stroke-width='2' stroke-linecap='round'><circle cx='7' cy='7' r='4.5'/><line x1='10.6' y1='10.6' x2='14.5' y2='14.5'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px 15px;
  padding-left: 32px;
}
.s2026 #toolbar .search .search-input::placeholder { color: var(--s2026-ink-3); opacity: 1; }
/* Specificità pari alla regola :focus generica sopra, ma dichiarata dopo: senza
   questa il bordo a riposo (uguale specificità) vince sempre e resta grigio. */
.s2026 #toolbar .search .search-input:focus { border-color: var(--s2026-brand); }
.s2026 #toolbar .search .btn[name="clearSearch"] {
  border: 1px solid var(--s2026-rule-strong);
  background: var(--s2026-bg-raised);
  color: var(--s2026-ink-3);
}
.s2026 #toolbar .search .btn[name="clearSearch"]:hover { color: var(--s2026-brand); }

/* Scrollbar neutra condivisa: tabella (.fixed-table-body) + anteprima
   (#nav-tabContent) + filtri (offcanvas). La scrollbar è chrome funzionale,
   non superficie di brand: thumb grigio, più marcato su hover. Stesso stile
   in light e dark: i token cambiano da soli col tema. */
.s2026 .fixed-table-body,
.s2026 #nav-tabContent,
#filtriOffcanvas .offcanvas-body {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: var(--s2026-rule-strong) var(--s2026-bg-raised);
}
.s2026 .fixed-table-body::-webkit-scrollbar,
.s2026 #nav-tabContent::-webkit-scrollbar,
#filtriOffcanvas .offcanvas-body::-webkit-scrollbar { width: 12px; height: 12px; }
.s2026 .fixed-table-body::-webkit-scrollbar-track,
.s2026 #nav-tabContent::-webkit-scrollbar-track,
#filtriOffcanvas .offcanvas-body::-webkit-scrollbar-track { background: var(--s2026-bg-raised); }
.s2026 .fixed-table-body::-webkit-scrollbar-thumb,
.s2026 #nav-tabContent::-webkit-scrollbar-thumb,
#filtriOffcanvas .offcanvas-body::-webkit-scrollbar-thumb {
  background: var(--s2026-rule-strong);
  border-radius: 6px;
  border: 2px solid var(--s2026-bg-raised);    /* "padding" attorno al thumb */
}
.s2026 .fixed-table-body::-webkit-scrollbar-thumb:hover,
.s2026 #nav-tabContent::-webkit-scrollbar-thumb:hover,
#filtriOffcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover { background: var(--s2026-ink-4); }
.s2026 .fixed-table-body::-webkit-scrollbar-corner,
.s2026 #nav-tabContent::-webkit-scrollbar-corner,
#filtriOffcanvas .offcanvas-body::-webkit-scrollbar-corner { background: var(--s2026-bg-raised); }

/* Icone azione riga: "flat" (niente sfondo/bordo), solo glifo colorato per tipo */
.s2026 .fixed-table-body td .btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
  font-size: 15px;
}
.s2026 .fixed-table-body td .btn:hover {
  background: var(--s2026-rule-2) !important;
  border-radius: var(--s2026-radius-sm);
}
.s2026 .fixed-table-body td .dropdown-toggle { color: var(--s2026-ink-2) !important; }
.s2026 .fixed-table-body td .btn-info,
.s2026 .fixed-table-body td .btn-primary,
.s2026 .fixed-table-body td .btn-ante    { color: var(--s2026-info) !important; }
.s2026 .fixed-table-body td .btn-success { color: var(--s2026-success) !important; }
.s2026 .fixed-table-body td .btn-danger,
.s2026 .fixed-table-body td .btn-remove  { color: var(--s2026-danger) !important; }
.s2026 .fixed-table-body td .btn-warning { color: var(--s2026-warning) !important; }
/* Lettere M/V/P (master/variante/plus): <i class="fa">, non un'immagine — a differenza
   della maglietta qui basta il color token, nessuna gated dark serve perché il token
   risolve già giusto per tema. Prima non era tra le classi ricolorate qui sopra, quindi
   restava il colore nativo btn-default (scuro) → invisibile sulla riga scura in dark. */
.s2026 .fixed-table-body td .btn-default { color: var(--s2026-ink-2) !important; }
/* Icona Moda (tshirt-solid.svg): è un <img>, non un font-icon — "color" sul bottone
   non la raggiunge (currentColor dentro un SVG caricato via src non eredita dalla
   pagina), resta sempre nera. In light è comunque leggibile sulla riga chiara; in
   dark il bottone è "flat" (sfondo trasparente qui sopra) quindi il nero sparisce
   sulla riga scura → la sbianco con un filter. */
[data-theme="dark"] .s2026 .fixed-table-body td .btn-moda img { filter: invert(1); }
/* Stato web (globo): colori storici (verde = pubblicato, rosa = non pubblicato) */
.webb-link .webb-on  { color: LightSeaGreen; }
.webb-link .webb-off { color: LightPink; }
/* Icona web uniforme: la riga principale usava bi bi-globe (default ~13px), le sotto-righe
   fa fa-globe fa-2x (backend, ~26px) → glifo e taglia diversi. Uniformata su fa-globe (come
   le sotto-righe) a una dimensione unica; la specificità (3 classi) batte fa-2x senza
   !important. La riga principale ora emette fa fa-globe (vedi ac_Articolo.js webformatter). */
.s2026 .webb-link .fa-globe { font-size: 1.15rem; line-height: 1; vertical-align: middle; }

.s2026 table.table {
  margin-bottom: 0;
  font-size: var(--s2026-fs-sm);
  color: var(--s2026-ink);
}
/* Bootstrap: `.table > :not(:first-child)` mette un border-top 2px "currentColor"
   sul tbody → in dark currentColor = ink chiaro = fastidiosa linea bianca sotto
   l'header. Il separatore reale è già il border-bottom brand dell'header th,
   quindi azzero questo bordo ridondante (light e dark). */
.s2026 table.table > :not(:first-child) { border-top: 0 !important; }
/* NB: NON usare position:sticky qui — bootstrap-table in fixed-header mode
   crea già .fixed-table-header sovrapposto; lo sticky sul thead del body
   genererebbe un doppio header. Lo styling raggiunge entrambi (il clone
   .fixed-table-header eredita class .table). */
.s2026 table.table > thead th {
  /* Stesso sfondo della riga selezionata (tinta brand) invece del neutro bg-raised */
  background: var(--s2026-bg-row-sel);
  border-bottom: 1px solid var(--s2026-rule-strong);
  color: var(--s2026-ink-2);
  font-size: var(--s2026-fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 8px 10px;
}
/* Il label interno deve ereditare il colore del th (no bianco su chiaro) */
.s2026 table.table > thead th .header_label { color: inherit; }
/* Sub-righe (detail-view annidate: mezzipadri/figli in ac_Articolo.js) hanno il
   thead con background inline hardcoded (#d8ffb6/#ffdeb6, residuo pre-s2026): in
   dark il testo chiaro (safety-net body color) finiva su quel pastello chiaro →
   illeggibile. Stesso trattamento del thead principale; !important necessario per
   battere lo style inline. */
.s2026 .fixed-table-body .detail-view table thead,
.s2026 .fixed-table-body .detail-view table thead th {
  background: var(--s2026-bg-row-sel) !important;
  color: var(--s2026-ink-2) !important;
}
/* Corpo delle sub-tabelle annidate: sono .table-bordered .table-sm (bootstrap), quindi
   celle con bordo --bs-table-border-color chiaro e sfondo default → in dark bordi bianchi
   e testo poco contrastato. Le allineo alla lista: superficie panel, testo ink, bordi
   token. Il contenitore td.detail-view ottiene lo stesso fondo così l'intera area
   espansa è una superficie coerente invece del bianco/trasparente bootstrap. */
.s2026 .fixed-table-body td.detail-view {
  background: var(--s2026-bg-panel) !important;
}
.s2026 .fixed-table-body .detail-view table,
.s2026 .fixed-table-body .detail-view table > :not(caption) > * > * {
  border-color: var(--s2026-rule) !important;
}
.s2026 .fixed-table-body .detail-view table tbody td {
  background: var(--s2026-bg-panel) !important;
  color: var(--s2026-ink) !important;
}
.s2026 .fixed-table-body .detail-view table tbody tr:nth-of-type(even) td {
  background: var(--s2026-bg-raised) !important;
}
/* Icona "+"/"–" di espansione delle RIGHE PADRE (bootstrap-table detailView): più grande e
   marcata. Scope solo al top-level di #tabble (tr non-.detail-view direttamente sotto il suo
   tbody) così le sotto-tabelle annidate restano con l'icona di default. text-stroke ispessisce
   il glifo (glyphicon/fa non hanno un peso variabile). */
.s2026 #tabble > tbody > tr:not(.detail-view) > td .detail-icon,
.s2026 #tabble > tbody > tr:not(.detail-view) > td .detail-icon i,
.s2026 #tabble > tbody > tr:not(.detail-view) > td .detail-icon:hover,
.s2026 #tabble > tbody > tr:not(.detail-view) > td .detail-icon:hover i,
.s2026 #tabble > tbody > tr:not(.detail-view) > td .detail-icon:focus,
.s2026 #tabble > tbody > tr:not(.detail-view) > td .detail-icon:focus i {
  font-size: 1.2rem;
  font-weight: 700;
  -webkit-text-stroke: 0.6px currentColor;
  color: var(--s2026-brand-text) !important;
  text-decoration: none;
}
/* Freccette di ordinamento: neutre a riposo (.both), brand solo sulla colonna
   ordinata (.asc/.desc) — è l'unico segnale cromatico ammesso nel thead neutro.
   ECCEZIONE ALLA PALETTE: l'hex vive DENTRO il documento SVG del data-URI, dove le custom
   property non arrivano. Cambiare --s2026-brand NON aggiorna queste icone: vanno riscritte
   a mano (%23 = '#' url-encoded). Stessa cosa per la lente della ricerca. */
.s2026 .th-inner.sortable.both {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16'><path fill='%239AA1AC' d='M5 2 8 6 2 6Z'/><path fill='%239AA1AC' d='M5 14 8 10 2 10Z'/></svg>") !important;
}
.s2026 .th-inner.sortable.asc {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16'><path fill='%238B1538' d='M5 2 8 6 2 6Z'/><path fill='%238B1538' fill-opacity='.25' d='M5 14 8 10 2 10Z'/></svg>") !important;
}
.s2026 .th-inner.sortable.desc {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16'><path fill='%238B1538' fill-opacity='.25' d='M5 2 8 6 2 6Z'/><path fill='%238B1538' d='M5 14 8 10 2 10Z'/></svg>") !important;
}
/* Dark: sfondo e bordo bottom arrivano da soli via token (bg-raised/rule-strong).
   Restano necessari il colore del testo (ink pieno per leggibilità) e i divisori
   verticali/top, che erano #e8e8e8: sul fondo scuro diventavano linee bianche
   fastidiose. */
[data-theme="dark"] .s2026 table.table > thead th {
  color: var(--s2026-ink);
  border-left-color: var(--s2026-rule) !important;
  border-top-color: var(--s2026-rule) !important;
}
/* Frecce colonna ordinata in dark: il brand light #8B1538 hardcoded nell'SVG non
   si legge sul thead scuro → riscritte col brand dark #C8344A (stesso vincolo
   data-URI di sopra). Le .both neutre #9AA1AC leggibili su entrambi i temi. */
[data-theme="dark"] .s2026 .th-inner.sortable.asc {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16'><path fill='%23C8344A' d='M5 2 8 6 2 6Z'/><path fill='%23C8344A' fill-opacity='.25' d='M5 14 8 10 2 10Z'/></svg>") !important;
}
[data-theme="dark"] .s2026 .th-inner.sortable.desc {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16'><path fill='%23C8344A' fill-opacity='.25' d='M5 2 8 6 2 6Z'/><path fill='%23C8344A' d='M5 14 8 10 2 10Z'/></svg>") !important;
}
/* Dark: l'overlay di loading di bootstrap-table (.fixed-table-loading) ha sfondo
   bianco fisso → durante il refresh (ricerca/pagina/reload dati) la tabella
   lampeggiava bianca. Lo scurisco e porto i puntini dello spinner al brand.
   Usa bg-raised (non bg-panel) per restare allo stesso tono dell'header/toolbar
   della card: con bg-panel il rettangolo del loader risultava percettibilmente
   più scuro del resto della card. */
[data-theme="dark"] .s2026 .fixed-table-loading {
  background: var(--s2026-bg-raised) !important;
  color: var(--s2026-ink);
}
[data-theme="dark"] .s2026 .fixed-table-loading .loading-text { color: var(--s2026-ink); }
[data-theme="dark"] .s2026 .fixed-table-loading .animation-dot,
[data-theme="dark"] .s2026 .fixed-table-loading .animation-dot::before,
[data-theme="dark"] .s2026 .fixed-table-loading .animation-dot::after {
  background-color: var(--s2026-brand) !important;
}
/* Dark: #preview_div (anteprima articolo, sublima_new.css) ha background+border
   #FFFFFF fissi → in dark restava un contorno bianco attorno alla card di
   anteprima. Il vero antenato opaco è .card (bg-panel), non lo sfondo pagina:
   uso bg-panel così #preview_div si fonde con la card che lo contiene invece
   di risultare più scuro. Includo l'id per battere la specificità (1,0,0). */
[data-theme="dark"] .s2026 #preview_div {
  background-color: var(--s2026-bg-panel) !important;
  border-color: var(--s2026-bg-panel) !important;
}
/* Light: sublima.js inietta .preview-loader con color/spinner hardcoded #8B1538
   (bordeaux di default) → non rispetta il brand del tenant (es. verde per questo
   schema, vedi --s2026-brand). */
.s2026 .preview-loader { color: var(--s2026-brand) !important; }
.s2026 .preview-loader__spinner { border-top-color: var(--s2026-brand) !important; }
/* Dark: il loader dell'anteprima (.preview-loader iniettato da sublima.js) ha
   background bianco fisso rgba(255,255,255,.96) e anello spinner rosa chiaro →
   stesso bg-panel di #preview_div che lo contiene, così il rettangolo del
   loader non stacca dal proprio contenitore durante il caricamento. */
[data-theme="dark"] .s2026 .preview-loader {
  background: var(--s2026-bg-panel) !important;
  color: var(--s2026-ink) !important;
}
[data-theme="dark"] .s2026 .preview-loader__spinner {
  border-color: var(--s2026-rule) !important;
  border-top-color: var(--s2026-brand) !important;
}
[data-theme="dark"] .s2026 .th-inner.sortable.both {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16'><path fill='%23C8344A' fill-opacity='.55' d='M5 2 8 6 2 6Z'/><path fill='%23C8344A' fill-opacity='.55' d='M5 14 8 10 2 10Z'/></svg>") !important;
}
[data-theme="dark"] .s2026 .th-inner.sortable.asc {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16'><path fill='%23C8344A' d='M5 2 8 6 2 6Z'/><path fill='%23C8344A' fill-opacity='.3' d='M5 14 8 10 2 10Z'/></svg>") !important;
}
[data-theme="dark"] .s2026 .th-inner.sortable.desc {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='16'><path fill='%23C8344A' fill-opacity='.3' d='M5 2 8 6 2 6Z'/><path fill='%23C8344A' d='M5 14 8 10 2 10Z'/></svg>") !important;
}
.s2026 table.table > tbody td {
  padding: 7px 10px;
  vertical-align: middle;
  border-top: 1px solid var(--s2026-rule-2);
}
/* bootstrap-table mette di default un border-top: 2px solid (colore ink, quasi nero)
   sul tfoot — visibile come riga nera marcata sotto l'ultima riga quando la lista
   riempie tutta l'altezza (data-show-footer). La riportiamo in tinta con le altre righe. */
.s2026 table.table > tfoot {
  border-top: 1px solid var(--s2026-rule-2);
}
/* Zebra dai token (sovrascrive table-striped) */
.s2026 table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background: transparent;
  color: var(--s2026-ink);
}
.s2026 table.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-accent-bg: transparent;
  background: var(--s2026-bg-row);
}
.s2026 table.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  background: var(--s2026-bg-row-hover);
  color: var(--s2026-ink);   /* testo leggibile sul tint (evita colori ereditati poco contrastati) */
}
/* Riga selezionata. NB: al click l'app aggiunge la classe `sfondoriga`, che in
   sublima_new.css è grigio scuro #565656 + testo bianco !important (icone/testo
   sparivano). La rendiamo chiara e leggibile, con accento burgundy a sinistra. */
.s2026 .fixed-table-body tbody tr.selected > *,
.s2026 .fixed-table-body tbody tr.sfondoriga > td,
.s2026 .fixed-table-body tbody tr.sfondoriga > th {
  --bs-table-accent-bg: transparent;
  background-color: var(--s2026-bg-row-sel) !important;
  color: var(--s2026-ink) !important;
}
.s2026 .fixed-table-body tbody tr.selected > td:first-child,
.s2026 .fixed-table-body tbody tr.sfondoriga > td:first-child {
  box-shadow: inset 3px 0 0 var(--s2026-brand);
}
/* Nessun override dark per la selezione: le regole sopra usano già token che si
   risolvono per tema (--s2026-bg-row-sel, --s2026-ink, --s2026-brand). */

/* Stati riga: solo badge nella colonna numero, niente sfondo a tutta riga né
   filetto (il filetto è riservato alla selezione, regole sopra). Solo il
   cancellato mantiene la tinta piena (è uno stato "forte") ma con testo attenuato. */
.s2026 table.table > tbody > tr.is-deleted > * { background: var(--s2026-danger-bg) !important; color: var(--s2026-ink-3); }
/* Badge di stato riga nella colonna numero (stessa resa del badge KIT storico) */
.s2026 .c-row-badge { display:inline-block; color:#fff; font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px; }
.s2026 .c-row-badge--kit    { background: var(--s2026-success); }
.s2026 .c-row-badge--assoc  { background: var(--s2026-warning); }
.s2026 .c-row-badge--gruppo { background: var(--s2026-purple); }

/* Paginazione */
.s2026 .fixed-table-pagination {
  padding: 10px 4px;
  font-size: var(--s2026-fs-sm);
  color: var(--s2026-ink-3);
}
.s2026 .fixed-table-pagination .pagination > li > a,
.s2026 .fixed-table-pagination .pagination .page-link {
  height: 34px;
  display: flex;
  align-items: center;
  border-radius: var(--s2026-radius-sm);
  border: 1px solid var(--s2026-rule);
  background: var(--s2026-bg-panel);   /* sostituisce il gradiente legacy */
  box-shadow: none;                    /* rimuove la striscia bianca (inset #fff di style.css) */
  color: var(--s2026-ink-2);
  font-size: var(--s2026-fs-sm);
  margin: 0 1px;
}
.s2026 .fixed-table-pagination .pagination .active .page-link,
.s2026 .fixed-table-pagination .pagination > li.active > a {
  background: var(--s2026-brand);
  border-color: var(--s2026-brand-deep);
  color: #fff;
}
.s2026 .fixed-table-pagination .pagination .page-link:hover {
  background: var(--s2026-bg-raised);
  border-color: var(--s2026-rule-strong);
  color: var(--s2026-brand);
}

/* Controlli paginazione (page-size "20", input + VAI del jump-to) allineati ai
   .page-link: stessa altezza 34px, stesso font e stesso colore. */
.s2026 .fixed-table-pagination .page-list .btn,
.s2026 .fixed-table-pagination .btn-secondary,
.s2026 .fixed-table-pagination .page-jump-to .form-control,
.s2026 .fixed-table-pagination input.form-control {
  height: 34px;
  padding: 6px 12px;
  font-size: var(--s2026-fs-sm);
  line-height: 20px;
  font-weight: 600;
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-sm);
  background: var(--s2026-bg-panel);
  color: var(--s2026-ink-2);
  box-shadow: none;
}
/* sublima_new.css colora lo span interno .page-size di #aa0000 (fuori palette,
   illeggibile in dark): dentro .s2026 deve ereditare il colore tematizzato del .btn. */
.s2026 .fixed-table-pagination .page-size { color: inherit; font-weight: inherit; }
/* il jump-to è un .input-group: stacca input e VAI con un gap, niente bordi fusi */
.s2026 .fixed-table-pagination .page-jump-to.input-group { gap: 4px; align-items: center; }
.s2026 .fixed-table-pagination .page-jump-to.input-group > * { margin-left: 0; }
.s2026 .fixed-table-pagination .page-jump-to .form-control { width: 64px; flex: 0 0 auto; text-align: center; }

.s2026 .fixed-table-pagination .page-list .btn:hover,
.s2026 .fixed-table-pagination .page-list .btn:focus,
.s2026 .fixed-table-pagination .page-list .open > .btn,
.s2026 .fixed-table-pagination .page-list .btn[aria-expanded="true"],
.s2026 .fixed-table-pagination .page-jump-to .btn:hover {
  background: var(--s2026-bg-raised);
  border-color: var(--s2026-rule-strong);
  color: var(--s2026-brand);
}
.s2026 .fixed-table-pagination .page-list .dropdown-menu {
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-sm);
  box-shadow: 0 4px 14px rgba(15,23,42,0.10);
  font-size: var(--s2026-fs-sm);
  min-width: auto;
}
.s2026 .fixed-table-pagination .page-list .dropdown-item.active,
.s2026 .fixed-table-pagination .page-list .dropdown-item:active {
  background: var(--s2026-brand);
  color: #fff;
}
.s2026 .fixed-table-pagination input.form-control:focus {
  border-color: var(--s2026-brand);
  box-shadow: var(--s2026-focus-ring);
  outline: none;
}

/* ============================================================================
   MOBILE (F9) — sotto 576px il footer di paginazione va su più righe (page-size +
   info + bottoni non stanno più su una riga sola): s2026ResizeTable (ac_Articolo.js)
   sottrae dall'altezza disponibile solo la toolbar, non ricalcola quella (maggiore)
   della paginazione andata a capo, quindi l'altezza risultante di .fixed-table-body
   può arrivare a 0 e la lista sparisce sotto lo strip KPI. Sotto il breakpoint
   disabilitiamo l'altezza fissa/scroll interno (impostata via JS con height inline,
   quindi serve !important) e lasciamo scorrere la pagina intera: la card-view di
   bootstrap-table (già attiva qui sotto i 562px, estensione mobile) non ha bisogno
   di un riquadro ad altezza fissa.
   ============================================================================ */
@media (max-width: 575.98px) {
  .s2026 .tab-content,
  .s2026 .fixed-table-container,
  .s2026 .fixed-table-body {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}

/* navbar.html ha uno <style> inline che forza ".dropdown-menu{border:1px solid
   #AA0000 !important}" per TUTTI i dropdown del sito (non solo la navbar):
   serve !important per batterlo anche qui. sublima_new.css aggiunge inoltre due
   leak sotto i 992px: ".dropdown-menu li a:hover{color:#aa0000 !important}"
   (@media max-width:1024px) e ".dropdown-menu a:hover{border-color:
   var(--sublima-burgundy)}" (@media max-width:992px, bordeaux legacy #8B0000).
   Neutralizzato: testo e bordo restano neutri, l'hover prende come sfondo lo
   stesso token brand (al 18%) già usato dal thead della tabella (--s2026-bg-row-sel). */
.s2026 .dropdown-menu { border-color: var(--s2026-rule) !important; }
/* sublima_new.css:4951 ".dropdown-menu li{padding-left:10px}" (asimmetrico, 0 a
   destra): l'ancora ha già il suo padding Bootstrap simmetrico, quindi quel 10px
   extra creava uno scalino a sinistra sull'hover assente a destra. */
.s2026 .dropdown-menu li { padding-left: 0; }
.s2026 .dropdown-menu li a:hover {
  color: var(--s2026-ink) !important;
  background: var(--s2026-bg-row-sel) !important;
  border-color: var(--s2026-rule) !important;
}

/* ---------- Dropdown nativi BS5 in dark ---------- */
/* Toolbar "Azioni", menu azioni di riga e page-list restano bianchi col default BS:
   in dark li porto su superficie sollevata + testo/hover tokenizzati. In light
   resta il default BS. I menu native restano in-place dentro .s2026. */
[data-theme="dark"] .s2026 .dropdown-menu {
  background: var(--s2026-bg-raised);
  border-color: var(--s2026-rule-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
[data-theme="dark"] .s2026 .dropdown-item { color: var(--s2026-ink); }
[data-theme="dark"] .s2026 .dropdown-item:hover,
[data-theme="dark"] .s2026 .dropdown-item:focus {
  background: var(--s2026-bg-panel);
  color: var(--s2026-ink);
}
[data-theme="dark"] .s2026 .dropdown-divider { border-top-color: var(--s2026-rule); }
[data-theme="dark"] .s2026 .dropdown-header { color: var(--s2026-ink-soft, var(--s2026-ink)); }

/* ---------- Form ricerca (fk_articolo) ---------- */
/* Neutralizza il wrapper alert-info blu della tab Ricerca */
.s2026 #filter_div.alert {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  color: var(--s2026-ink);
}
.s2026 .fk-panel {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-lg);
  padding: 12px 16px 16px;
}
.s2026 .fk-panel__head { margin-bottom: 10px; }
.s2026 .fk-panel__eyebrow {
  font-size: var(--s2026-fs-micro);
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
}
.s2026 .fk-panel__form { padding: 4px 0 0; }
.s2026 #fk_form .control-label,
.s2026 .field__label {
  display: block;
  font-size: var(--s2026-fs-micro);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
  margin-bottom: 3px;
}
.s2026 .form-control,
.s2026 .form-select {
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius);
  background: var(--s2026-bg-input);
  color: var(--s2026-ink);
  font-size: var(--s2026-fs-sm);
}
.s2026 .form-control:focus,
.s2026 .form-select:focus {
  /* mantieni la superficie del campo: BS forza background:#fff + color:#212529 sul
     :focus → in dark alcuni campi filtro diventavano bianchi. In light bg-input=#fff
     quindi nessun cambiamento. */
  background: var(--s2026-bg-input);
  color: var(--s2026-ink);
  border-color: var(--s2026-brand);
  box-shadow: var(--s2026-focus-ring);
  outline: none;
}

/* ---------- Select2 multiple: altezza coerente con i form-select ---------- */
/* Il tema bootstrap-5 rende la ricerca inline come `display:block; width:100%`.
   Essendo un <li> dentro .select2-selection__rendered (che e' flex-wrap), quel 100%
   le riserva SEMPRE una riga tutta sua sotto i tag: il multiselect nasce alto il
   doppio di un form-select accanto. Qui torna in linea con i tag.
   NB: la TAGLIA la decide il tema dal <select> originale via selettore fratello
   (.form-select-sm ~ .select2-container), quindi la classe di taglia va li', non qui. */
.s2026 .select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
  display: inline-flex;
  width: auto;
  flex: 1 1 4rem;
  min-width: 4rem;
}
.s2026 .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  align-items: center;
  row-gap: 4px;
}
.s2026 .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  margin-bottom: 0;
}
/* Bordo/focus allineati al design system (il tema li fa blu Bootstrap) */
.s2026 .select2-container--bootstrap-5 .select2-selection {
  border-color: var(--s2026-rule);
  background: var(--s2026-bg-input);
}
.s2026 .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.s2026 .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--s2026-brand);
  box-shadow: var(--s2026-focus-ring);
}

/* ---------- Barra filtri inline (stampe/report) ---------- */
/* Alternativa all'offcanvas per i report, dove i filtri devono restare a vista.
   Regola d'uso: nessun campo applica da solo, si conferma con il bottone in fondo. */
.s2026 .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-lg);
}
.s2026 .filter-bar__field {
  display: flex;
  flex-direction: column;
  min-width: 8.5rem;
}
.s2026 .filter-bar__field--wide { flex: 1 1 14rem; min-width: 14rem; }
.s2026 .filter-bar__label {
  margin-bottom: 3px;
  font-size: var(--s2026-fs-micro);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
  white-space: nowrap;
}
.s2026 .filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ---------- Offcanvas filtri (sinistra) ---------- */
/* padding:0 → l'offcanvas è annidato in un <div class="row"> e da Bootstrap eredita
   ".row > * { padding: calc(var(--bs-gutter-x) * .5) }" = 12px per lato: essendo
   position:fixed non gli serve il gutter del grid, che però gli rientrava header e body
   dai bordi (evidente solo sull'header, l'unico con sfondo colorato). */
.s2026 #filtriOffcanvas { --bs-offcanvas-width: 400px; padding: 0; }
/* Header neutro (chrome, non superficie di brand): il brand resta solo sull'icona.
   Gli altri offcanvas dell'app (menu mobile, notifiche) hanno già header neutro. */
.s2026 #filtriOffcanvas .offcanvas-header {
  background: var(--s2026-bg-raised);
  color: var(--s2026-ink);
  border-bottom: 1px solid var(--s2026-rule);
}
.s2026 #filtriOffcanvas .offcanvas-title { color: var(--s2026-ink); font-size: var(--s2026-fs-md); font-weight: 700; }
.s2026 #filtriOffcanvas .offcanvas-title .bi { color: var(--s2026-brand-text); }
/* X di chiusura = stesso look del bottone chiusura di SublimaUI.panel (.s2026-panel__close):
   quadrato brand pieno + X bianca. Sostituisce l'icona neutra Bootstrap (btn-close). */
.s2026 #filtriOffcanvas .btn-close {
  box-sizing: border-box; width: 30px; height: 30px;
  border: 1px solid var(--s2026-brand-deep); border-radius: var(--s2026-radius);
  background-color: var(--s2026-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: .8em;
  opacity: 1; transition: var(--s2026-transition);
}
.s2026 #filtriOffcanvas .btn-close:hover { background-color: var(--s2026-brand-hover); opacity: 1; }
/* niente padding-bottom: lo fornisce la barra azioni sticky (ultimo figlio), altrimenti
   resterebbe sotto di essa una fascia da cui il contenuto in scroll traspare */
.s2026 #filtriOffcanvas .offcanvas-body { padding: 14px 16px 0; display: flex; flex-direction: column; }
/* etichette campi filtro in stile s2026 (micro uppercase) — opt-in via classe
   Bootstrap .form-label nei fk_*.html migrati (i legacy usano .control-label) */
.s2026 #filtriOffcanvas .form-label {
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--s2026-ink-3); margin-bottom: 3px;
}
/* pannello stretto: i campi col-* si impilano a tutta larghezza */
.s2026 #filtriOffcanvas .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-bottom: 8px; }
/* appiattisci il pannello del form dentro l'offcanvas (no doppio box/titolo) */
.s2026 #filtriOffcanvas .fk-panel { border: 0; padding: 0; background: transparent; }
.s2026 #filtriOffcanvas .fk-panel__head { display: none; }

/* Modificatore .fk-wide: form filtri a griglia invece che impilato.
   Opt-in per anagrafica (classe sull'#filtriOffcanvas nel .html della lista) +
   classi Bootstrap col-* sui campi nel fk_*.html. Disattiva lo stacking di default
   (riga 845) lasciando decidere alla griglia Bootstrap.
   NB larghezza del pannello: NON qui. In BS 5.1.1 .offcanvas-start ha width:400px
   hardcoded e --bs-offcanvas-width non esiste ancora (introdotta in 5.2). Per
   allargare si usa la utility Bootstrap w-50/w-75 sull'offcanvas nel file. */
.s2026 #filtriOffcanvas.fk-wide .row > [class*="col-"] { flex: 0 0 auto; max-width: none; margin-bottom: 0; }

/* Barra azioni (Filtra/Pulisci) ancorata in fondo: scorre solo l'elenco dei campi.
   Sticky e non un flex-layout sul .offcanvas-body perché i 19 fk_*.html hanno wrapper
   eterogenei sopra la barra (.fk-panel, form, clearfix): non si può isolare un singolo
   figlio scrollabile senza toccarli tutti. Lo scroller resta .offcanvas-body → conserva
   la scrollbar tematizzata già definita sopra. :has() individua la barra sia nella variante
   .row.w-100 (18 file) sia .d-flex (fk_e_fattura). Lo sfondo è opaco e sul token del tema
   (NON --bs-offcanvas-bg: con BS 5.1.1 quella variabile non esiste ancora → resterebbe
   trasparente e il contenuto trasparirebbe scorrendo sotto la barra). */
.s2026 #filtriOffcanvas .offcanvas-body > :has(#CercaButton_n) {
  margin-top: auto;            /* offcanvas-body e' flex-column: ancora la barra in fondo */
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding-top: 10px;
  padding-bottom: 14px;
  background: var(--s2026-bg-panel);
  border-top: 1px solid var(--s2026-rule);
  /* i bottoni sono col-md-6 + .mb-md-0 (pensati affiancati), ma qui la regola del pannello
     stretto li impila a tutta larghezza: il margine azzerato da .mb-md-0 (!important) li
     farebbe combaciare → spaziatura via row-gap del flex, che !important non intercetta. */
  row-gap: 8px;
}
/* "Filtra" è una CTA (come "Aggiungi"), non chrome: btn-primary nativo restava blu
   Bootstrap in entrambi i temi, mai referenziato prima da nessuna regola s2026. */
.s2026 #filtriOffcanvas #CercaButton_n {
  background: var(--s2026-brand);
  border-color: var(--s2026-brand-deep);
  color: #fff;
}
.s2026 #filtriOffcanvas #CercaButton_n:hover,
.s2026 #filtriOffcanvas #CercaButton_n:focus {
  background: var(--s2026-brand-hover);
  border-color: var(--s2026-brand-deep);
  color: #fff;
}

/* datepicker (Eonasdan) dentro l'offcanvas: la vista giorni risulta collassata
   (display:none) → forzala visibile così il calendario si vede */
.s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget { width: auto; }
.s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget .datepicker-days { display: block !important; }

/* Badge contatore filtri attivi sul bottone "Filtri" */
.s2026 .filtri-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--s2026-radius-pill);
  background: var(--s2026-brand);
  color: #fff;
  font-size: var(--s2026-fs-micro);
  font-weight: 700;
  line-height: 1;
}
.s2026 .filtri-badge[hidden] { display: none; }

/* Chips dei filtri attivi, mostrate sopra la tabella.
   Basate sul componente nativo .badge (+ .rounded-pill, + .btn-close per la rimozione),
   solo ricolorate in tinta brand: niente shape custom da zero. */
.s2026 .filtri-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 4px;
}
.s2026 .filtri-chips:empty { display: none; padding: 0; }
.s2026 .filtri-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--s2026-brand-tint);
  color: var(--s2026-brand);
  border: 1px solid color-mix(in srgb, var(--s2026-brand) 35%, transparent);
  font-size: var(--s2026-fs-sm, 12px);
  font-weight: 600;
  padding: .45em .55em .45em .85em;
}
.s2026 .filtri-chip__label { opacity: .65; font-weight: 700; margin-right: 2px; }
.s2026 .filtri-chip .btn-close {
  width: .6em;
  height: .6em;
  padding: 0;
  background-size: .6em;
  opacity: .55;
}
.s2026 .filtri-chip .btn-close:hover { opacity: 1; }

/* ===== Modale Anteprima (widget riusabile s2026) =====
   Apre l'anteprima di un record (frammento HTML di /Preview) in una modale
   responsive — fullscreen su touch, modale grande su desktop — invece di
   switchare sulla tab ANTEPRIMA. Markup: tpl/pg/_s2026_anteprima_modal.html;
   apertura: openAnteprimaModal() in sublima.js. */
.s2026-preview-modal { z-index: 100000; }
/* header neutro: un solo segnale brand (l'icona nel titolo), niente doppio accento */
.s2026-preview-modal .modal-header { border-bottom: 1px solid var(--s2026-rule); }
.s2026-preview-modal .modal-title { color: var(--s2026-ink); }
.s2026-preview-modal .modal-title .bi { color: var(--s2026-brand-text); }
.s2026-preview-modal .modal-body { padding: 0; }
.s2026-preview-modal .modal-body .loading { text-align: center; padding: 60px 0; color: var(--s2026-brand); }
/* Fix centratura orizzontale: lo shim BS3 (bootstrap.css) forza margin/width sul
   .modal-dialog e annulla l'auto-centering BS5 → la modale si appoggia a sinistra.
   Qui ripristiniamo le auto-margins (specificità più alta dello shim) sopra il
   breakpoint md, dove la modale è "a finestra" (sotto md è fullscreen). */
@media (min-width: 768px) {
  .s2026-preview-modal .modal-dialog { margin-right: auto; margin-left: auto; }
}

/* ===== SUBLIMA 2026 · EDIT · stile "Card Strutturate" =====
   Riusabile per tutte le pagine di edit: avvolgere il contenuto in
   <div class="artedit2026"> … </div>.
   Variante header-only (per liste): <div class="artedit2026 artedit2026--bare">.
   Consuma i token --s2026-* da :root: non serve la classe .s2026 sullo stesso
   elemento, e il dark arriva da sé via [data-theme] sull'<html>. */
.artedit2026{
    background:var(--s2026-bg); padding:1px 1px; border-radius:var(--s2026-radius-xl);
    color:var(--s2026-ink); font-size:12px;
}
/* Native controls (input date/select, scrollbar) seguono il tema */
[data-theme="dark"] .s2026, [data-theme="dark"] .artedit2026{ color-scheme: dark; }

/* Dark mode totale: estende lo sfondo scuro a html/body attorno al wrapper
   (fasce bianche esterne alla card, sotto la paginazione, ai lati). :has() limita
   l'effetto alle SOLE pagine che contengono davvero un wrapper .s2026/.artedit2026:
   le pagine legacy e il frame navbar non matchano → restano invariati. L'attributo
   data-theme sta sull'<html>, quindi il match sull'html usa la forma con attributo. */
html[data-theme="dark"]:has(.s2026),
html[data-theme="dark"]:has(.artedit2026),
[data-theme="dark"] body:has(.s2026),
[data-theme="dark"] body:has(.artedit2026),
/* .page-wrapper è il wrapper di layout legacy (bg chiaro #f8f9fa a piena larghezza)
   che stava sopra al body: il suo chiaro trapelava nelle fasce esterne perché il
   wrapper .s2026 è rientrato dai 6px di padding del .container-fluid. Lo scuriamo
   SOLO quando contiene una pagina .s2026/.artedit2026 → legacy invariato. */
[data-theme="dark"] .page-wrapper:has(.s2026),
[data-theme="dark"] .page-wrapper:has(.artedit2026){
  /* !important: il bg chiaro di .page-wrapper (classi bg1/sidebar-bg) e lo style
     inline legacy sull'<html> batterebbero un selettore normale. Resta comunque
     circoscritto alle pagine .s2026/.artedit2026 in dark. */
  background: var(--s2026-bg) !important;
  /* Rete di sicurezza: il body legacy resta #212529 anche in dark → qualsiasi
     elemento non tematizzato erediterebbe testo scuro su fondo scuro. */
  color: var(--s2026-ink);
  color-scheme: dark;
}

/* Il placeholder "nessuna immagine" è un PNG chiaro: in dark è il punto più
   luminoso della pagina. Lo si attenua senza toccare le foto prodotto reali. */
[data-theme="dark"] .s2026 img[src*="noImg"] { filter: brightness(.45); }

/* ---------- Dark mode: Select2 (widget chiuso + dropdown) ---------- */
/* Bootstrap-5 theme dipinge bianco: rimappiamo sui token s2026 scuri.
   Scopo sotto .s2026[data-theme=dark]: i dropdown vengono montati dentro l'offcanvas/.s2026. */
[data-theme="dark"] .s2026 .select2-selection{
  background: var(--s2026-bg-input); border-color: var(--s2026-rule); color: var(--s2026-ink);
}
/* Il container select2 è dipinto bianco (quadrato); la .select2-selection interna è
   arrotondata (radius 4px) → gli angoli bianchi spuntano dietro. In dark rendo il
   container trasparente: la selection scura fa già da superficie. */
[data-theme="dark"] .s2026 .select2-container{ background-color: transparent !important; }
[data-theme="dark"] .s2026 .select2-selection__rendered{ color: var(--s2026-ink); }
[data-theme="dark"] .s2026 .select2-selection__placeholder{ color: var(--s2026-ink-4); }
[data-theme="dark"] .s2026 .select2-selection__arrow b{ border-color: var(--s2026-ink-3) transparent transparent transparent; }
/* Chip delle multi-select (.s2026, es. filtro "Articoli Moda" nell'offcanvas): questi
   select2 usano theme:"bootstrap4" (vedi ac_Articolo.js), che stila il chip con
   .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice
   = (0,3,0), testo scuro su fondo chiaro → in dark scuro su scuro (illeggibile) e bordo
   grigio, non brand. La mia (0,2,0) perdeva → serve !important. De-gated: i token
   risolvono per tema, fondo raised + testo ink leggibili in entrambi, bordo primario. */
.s2026 .select2-selection__choice{
  background: var(--s2026-bg-raised) !important;
  border-color: var(--s2026-brand) !important;
  color: var(--s2026-ink) !important;
}
[data-theme="dark"] .s2026 .select2-dropdown{
  background: var(--s2026-bg-panel); border-color: var(--s2026-rule); color: var(--s2026-ink);
}
/* Le opzioni: il tema bootstrap-5 usa selettori a 5 classi (0,5,0) che forzano color:#000
   sull'opzione evidenziata. Prefissiamo i selettori esatti del tema per vincere in specificità. */
.s2026 .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option{
  color: var(--s2026-ink); background: transparent;
}
/* Hover neutro, selezione a tinta brand: stessa gerarchia in ENTRAMBI i temi.
   Prima era gated solo dark → in light restava il blu nativo del tema bs5
   ("selezionato blu in light, rossastro in dark" — segnalato dall'utente).
   Le var risolvono già da sole al valore giusto per tema. */
.s2026 .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted{
  background: var(--s2026-bg-raised); color: var(--s2026-ink);
}
.s2026 .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.s2026 .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted){
  background: var(--s2026-bg-row-sel); color: var(--s2026-ink);
}
/* fallback per altri temi/uso senza bootstrap-5 */
.s2026 .select2-results__option{ color: var(--s2026-ink); }
.s2026 .select2-results__option--highlighted[aria-selected]{ background: var(--s2026-bg-raised); color: var(--s2026-ink); }
/* ---------- Select2: altezza massima della finestra risultati ---------- */
/* Ogni select (regime fiscale, nazioni, causali, ecc.) puo' avere decine di opzioni:
   senza un limite il dropdown puo' superare l'altezza della viewport e uscire dallo
   schermo. Il default di Select2 e' 200px fisso; qui lo rendiamo dipendente dalla
   viewport (mai piu' del 45% dell'altezza visibile) cosi' resta sempre raggiungibile
   e scrollabile. Duplicato sui due selettori perche' il dropdown a volte resta dentro
   un antenato .s2026 (dropdownParent esplicito, es. offcanvas) e a volte monta su
   <body> (default Select2, pagine edit .artedit2026) — stesso schema delle altre
   regole select2 qui sopra. */
.s2026 .select2-dropdown .select2-results__options,
html:has(.artedit2026) .select2-container--bootstrap-5 .select2-dropdown .select2-results__options,
html:has(.s2026) .select2-container--bootstrap-5 .select2-dropdown .select2-results__options{
  max-height: min(240px, 45vh);
  overflow-y: auto;
}
.s2026 .select2-search--dropdown .select2-search__field,
.s2026 .select2-search__field{
  background: var(--s2026-bg-input); border-color: var(--s2026-rule); color: var(--s2026-ink);
}
/* Focus della ricerca-in-dropdown: il tema bs5 usa il glow celeste nativo Bootstrap
   in entrambi i temi → uniformato allo stesso trattamento di .form-control/.search. */
.s2026 .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus,
.s2026 .select2-search--dropdown .select2-search__field:focus,
.s2026 .select2-search__field:focus{
  border-color: var(--s2026-brand) !important; box-shadow: var(--s2026-focus-ring) !important; outline: none;
}
/* La ricerca INLINE delle multiple (il campo dove si digita accanto ai chip) NON è
   un input a riquadro: solo la ricerca-in-dropdown lo è. I blocchi sopra + il dark
   override (bg-input/border) la colpiscono lasciando il cursore dentro un rettangolo.
   Reset a trasparente/borderless come da nativo; specificità (0,4,x) per battere anche
   la regola dark con !important. Theme-agnostic. */
.s2026 .select2-selection .select2-search--inline .select2-search__field,
html:has(.artedit2026) .select2-selection .select2-search--inline .select2-search__field{
  background: transparent !important; border: none !important; box-shadow: none !important;
}

/* ---------- Dark mode: offcanvas filtri + input con bg inline ---------- */
[data-theme="dark"] .s2026 #filtriOffcanvas{
  --bs-offcanvas-bg: var(--s2026-bg-panel); --bs-offcanvas-color: var(--s2026-ink);
  background: var(--s2026-bg-panel); color: var(--s2026-ink);
}
/* la X ora e' brand + glifo bianco (vedi regola .btn-close sopra): niente invert in dark */
[data-theme="dark"] .s2026 #filtriOffcanvas .btn-close{ filter: none; }
/* fk_fullsearch ha background verde inline (style=""): riportalo a superficie scura */
[data-theme="dark"] .s2026 #fk_fullsearch{ background: var(--s2026-bg-input) !important; color: var(--s2026-ink); }

/* Search principale toolbar: bg #fff hardcoded + lente SVG brand chiaro → versione scura.
   La lente in bordeaux scuro su sfondo quasi nero risultava poco leggibile: bianca su
   richiesta utente (in light resta bordeaux, lì il contrasto sul bianco è già ottimo). */
[data-theme="dark"] .s2026 #toolbar .search .search-input{
  background-color: var(--s2026-bg-input);
  color: var(--s2026-ink);
  border-color: var(--s2026-rule-strong);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'><circle cx='7' cy='7' r='4.5'/><line x1='10.6' y1='10.6' x2='14.5' y2='14.5'/></svg>");
}

/* Griglia tabella lista in dark: i bordi cella legacy sono chiari (#dee2e6 sotto,
   #e8e8e8 a sinistra) → in dark stonano come "contorni bianchi". Uniformati su un
   unico tono scuro. !important per battere ".widget .table *{border-color:#e8e8e8!important}". */
[data-theme="dark"] .s2026 .fixed-table-body td,
[data-theme="dark"] .s2026 .fixed-table-body th{
  border-color: var(--s2026-rule) !important;
}

/* ===== SUBLIMA 2026 · ANTEPRIMA (.art-shell) — blocco condiviso =====
   Regole dell'anteprima, tokenizzate. Prima vivevano duplicate in un <style> inline
   dentro ogni frammento; qui ci sta la copia di riferimento.

   ⚠️ NON SCOPARE QUESTO BLOCCO sotto .s2026 (né sotto altro).
   Gli altri frammenti di anteprima (fornitore, vettore, movimento, stoccaggio,
   listino_articolo, fornitura, fornitura_lotto, testatacart, anagraficasecondaria,
   emailstore, cms_preview) portano ancora la PROPRIA copia di queste regole inline.
   Essendo iniettati via AJAX, il loro <style> finisce più avanti nel documento di
   questo <link>: a parità di specificità vincono per ORDINE DEL DOCUMENTO e restano
   invariati. Aggiungere .s2026 qui porterebbe la specificità da (0,1,0) a (0,2,0),
   batterebbe le loro copie inline e li cambierebbe tutti in silenzio.
   La correttezza dipende dall'ordine, non dalla specificità: è fragile, va lasciato così.
   Migrare un frammento = cancellare il SUO <style> inline. Questo blocco non si tocca. */
#anteprima.art-shell {
  font-family: var(--s2026-font-sans);
  font-size:13px; color:var(--s2026-ink);
  background:var(--s2026-bg);
  padding:14px 14px 28px;
  border-radius:var(--s2026-radius-2xl);
}
#anteprima.art-shell.in-iframe { padding:10px 10px 18px; background:transparent; }

/* Type bar (PW father/son/uncle) — il colore arriva da --c inline, per riga */
.articolo-type-thin-wrapper { margin:0 0 10px; display:flex; align-items:center; gap:10px; }
.articolo-type-thin-bar { flex:1; height:5px; border-radius:4px; background:var(--c,#666); box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; }
.articolo-type-thin-text { font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--c,#333); white-space:nowrap; text-transform:uppercase; }

/* Toolbar */
.art-toolbar { position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:10px 14px; margin-bottom:14px; background:linear-gradient(180deg,var(--s2026-bg-panel),var(--s2026-bg)); border:1px solid var(--s2026-rule); border-radius:var(--s2026-radius-2xl); box-shadow:var(--s2026-shadow-raised); }
.art-shell.in-iframe .art-toolbar { position:static; }
.art-type-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--s2026-brand-fg); flex-shrink:0; }
.art-type-pill::before { content:""; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.85); box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.art-toolbar .art-title { flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.art-toolbar .art-title .art-codice { font-size:11px; color:var(--s2026-ink-3); letter-spacing:.6px; text-transform:uppercase; font-weight:600; }
.art-toolbar .art-title .art-denom { font-size:16px; font-weight:700; color:var(--s2026-ink); line-height:1.25; word-break:break-word; }
.art-toolbar .art-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.art-toolbar .art-actions .btn-group { gap:4px; }
.art-toolbar .art-actions .btn-group .btn { border-radius:var(--s2026-radius-lg) !important; margin:0 !important; }
/* Uniform square icon buttons */
.art-toolbar .art-actions .btn { width:36px; height:36px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; border-radius:var(--s2026-radius-lg); flex:0 0 auto; }
.art-toolbar .art-actions .btn i { font-size:16px; line-height:1; vertical-align:0; margin:0; }
/* Wider variant for buttons with text label (e.g. Veloce) */
.art-toolbar .art-actions .btn.has-label { width:auto; padding:0 12px !important; gap:6px; font-size:12px; font-weight:600; }

/* Web indicator */
.art-web-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:600; cursor:pointer; border:1px solid transparent; user-select:none; }
.art-web-badge.is-on { background:var(--s2026-success-bg); color:var(--s2026-success-fg); border-color:var(--s2026-success); }
.art-web-badge.is-off { background:var(--s2026-danger-bg); color:var(--s2026-danger-fg); border-color:var(--s2026-danger); }
.art-web-badge i { font-size:14px; }

/* KPI strip */
.art-kpi-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:14px; }
.art-kpi { background:var(--s2026-bg-panel); border:1px solid var(--s2026-rule); border-radius:var(--s2026-radius-xl); padding:10px 12px; position:relative; overflow:hidden; }
.art-kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--s2026-brand); }
.art-kpi.kpi-accent::before { background:var(--s2026-accent); }
.art-kpi.kpi-success::before { background:var(--s2026-success); }
.art-kpi.kpi-info::before { background:var(--s2026-info); }
.art-kpi.kpi-warning::before { background:var(--s2026-warning); }
.art-kpi .kpi-label { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--s2026-ink-3); font-weight:600; margin-bottom:3px; }
.art-kpi .kpi-value { font-size:16px; font-weight:700; color:var(--s2026-ink); line-height:1.2; }
.art-kpi.kpi-accent .kpi-value { color:var(--s2026-accent); }

/* Card — regola condivisa con .artedit2026-card (F9): stessa dichiarazione,
   nomi separati per non toccare i template (12 frammenti anteprima + tab edit). */
.art-card, .artedit2026 .artedit2026-card { background:var(--s2026-bg-panel); border:1px solid var(--s2026-rule); border-radius:var(--s2026-radius-2xl); box-shadow:var(--s2026-shadow-card); margin-bottom:14px; overflow:hidden; }
/* Edit più compatto: stacco tra card ridotto (l'anteprima .art-card resta a 14px).
   Stessa specificità della regola sopra → vince perché dichiarata dopo. */
.artedit2026 .artedit2026-card { margin-bottom:8px; }
/* … anche in orizzontale: SOLO per le row che contengono card, annidate incluse.
   Qui le row hanno margin 0 (niente negativi BS) → i padding col si sommano su due
   livelli di nesting: gutter 4px ⇒ 2+2 per lato ⇒ 8px di gap tra card, come il
   verticale. Le row DENTRO i card body ridefiniscono --bs-gutter-x da sole
   (ogni .row la dichiara) → i campi interni mantengono il gutter standard. */
.artedit2026 .row:has(.artedit2026-card) { --bs-gutter-x: 4px; }
.art-card-header, .artedit2026 .artedit2026-card__head { padding:10px 14px; background:linear-gradient(180deg,var(--s2026-bg-raised),var(--s2026-rule-2)); border-bottom:1px solid var(--s2026-rule); display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--s2026-ink-2); }
.art-card-header i, .artedit2026 .artedit2026-card__head i { font-size:15px; }
.art-card-body, .artedit2026 .artedit2026-card__body { padding:14px; }
.art-card-body.no-pad { padding:0; }

/* Definition list */
.art-dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 18px; margin:0; }
.art-dl > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.art-dl dt { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--s2026-ink-3); font-weight:600; margin:0; }
.art-dl dd { margin:0; font-size:13px; font-weight:600; color:var(--s2026-ink); word-break:break-word; }

/* Image card */
.art-img-wrap { background:var(--s2026-bg-panel); border:1px solid var(--s2026-rule); border-radius:var(--s2026-radius-xl); padding:8px; display:flex; align-items:center; justify-content:center; min-height:180px; cursor:pointer; transition:border-color .15s, box-shadow .15s; text-decoration:none; }
.art-img-wrap:hover { border-color:var(--s2026-brand); box-shadow:var(--s2026-focus-ring); }
.art-img-wrap img { max-width:100%; max-height:220px; object-fit:contain; }

/* Tabs — underline, componente distinto da .segmented (pill) delle liste */
.art-tabs.nav-tabs { border-bottom:2px solid var(--s2026-rule); margin-bottom:14px; gap:4px; flex-wrap:wrap; }
.art-tabs.nav-tabs .nav-link { border:none !important; border-bottom:3px solid transparent !important; border-radius:var(--s2026-radius-lg) var(--s2026-radius-lg) 0 0; padding:8px 14px; font-size:12px; font-weight:600; color:var(--s2026-ink-3) !important; background:transparent !important; }
.art-tabs.nav-tabs .nav-link:hover,
.art-tabs.nav-tabs .nav-link:focus { color:var(--s2026-brand-text) !important; background:var(--s2026-bg) !important; border-bottom-color:transparent !important; }
.art-tabs.nav-tabs .nav-link.active,
.art-tabs.nav-tabs .nav-item .nav-link.active { color:var(--s2026-brand-text) !important; border-bottom-color:var(--s2026-brand) !important; background:var(--s2026-bg-panel) !important; }
.art-tabs.nav-tabs .nav-link i { margin-right:5px; font-size:14px; vertical-align:-1px; }

/* Tables — thead allineato ad ac_Articoli (tinta bg-row-sel + testo ink-2), non più
   gradiente brand pieno. Vale per Fornitori/Magazzino in anteprima (table.art-table).
   Token theme-agnostici → stesso colore in light e dark. */
.art-table-wrap { overflow-x:auto; }
table.art-table { width:100%; margin:0; border-collapse:separate; border-spacing:0; font-size:12px; }
table.art-table thead th { background:var(--s2026-bg-row-sel); color:var(--s2026-ink-2); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:9px 11px; position:sticky; top:0; z-index:1; border:none; border-bottom:1px solid var(--s2026-rule-strong); white-space:nowrap; }
table.art-table tbody td { padding:8px 11px; border-bottom:1px solid var(--s2026-rule-2); vertical-align:middle; }
table.art-table tbody tr:nth-child(even) td { background:var(--s2026-bg-raised); }
table.art-table tbody tr:hover td { background:var(--s2026-bg-row-hover); }
table.art-table .num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
table.art-table .accent { color:var(--s2026-brand-text); font-weight:700; }

/* ADR */
.art-adr-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 14px; }
.art-adr-grid .adr-item { display:flex; align-items:center; gap:8px; font-size:12px; padding:6px 0; }
.art-adr-grid .adr-item .badge { background:var(--s2026-success); color:var(--s2026-brand-fg); font-size:10px; font-weight:600; padding:4px 8px; border-radius:var(--s2026-radius-md); }
.art-adr-grid .adr-item.is-info .badge { background:var(--s2026-info); }

/* Lists */
.art-list { list-style:none; padding:0; margin:0; }
.art-list li { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--s2026-bg-panel); border:1px solid var(--s2026-rule); border-radius:var(--s2026-radius-lg); margin-bottom:6px; font-size:12px; }
.art-list li .badge { background:var(--s2026-brand); color:var(--s2026-brand-fg); font-size:11px; padding:4px 8px; border-radius:var(--s2026-radius-md); font-weight:600; }

/* Back to top */
.art-back-top { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--s2026-ink-3); text-decoration:none; padding:6px 12px; border-radius:var(--s2026-radius-lg); }
.art-back-top:hover { background:var(--s2026-rule-2); color:var(--s2026-brand-text); }

@media (max-width: 991px){
  .art-toolbar { position:static; }
  .art-kpi .kpi-value { font-size:14px; }
}
@media print {
  .art-toolbar, .art-tabs { display:none !important; }
  #anteprima.art-shell { background:#fff; padding:0; }
}

/* Sidebar laterale — .art-sb-btn è un bottone-lista, non una CTA: non fondere con .btn-brand */
.art-sidebar { position:sticky; top:8px; display:flex; flex-direction:column; gap:5px; }
.art-sb-btn { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; font-size:12px; font-weight:600; text-align:left; background:var(--s2026-bg-panel); border:1px solid var(--s2026-rule); border-radius:var(--s2026-radius-lg); color:var(--s2026-ink); cursor:pointer; transition:background .15s, border-color .15s, color .15s; line-height:1.3; text-decoration:none; }
.art-sb-btn:hover { background:var(--s2026-brand-tint); border-color:var(--s2026-brand); color:var(--s2026-brand-text); }
.art-sb-btn i { font-size:15px; flex-shrink:0; }
.art-sb-btn.is-warning { background:var(--s2026-warning-bg); border-color:var(--s2026-warning); color:var(--s2026-warning-fg); }
.art-sb-btn.is-warning:hover { background:var(--s2026-warning-bg); border-color:var(--s2026-warning-fg); }
.art-sb-section { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--s2026-brand-text); padding:8px 0 2px 2px; margin-top:4px; border-top:1px solid var(--s2026-rule); }

/* ---------- Dark mode: Anteprima (.art-shell) — modal + tab ----------
   I frammenti /Preview (fornitore.html, vettore.html, ...) NON ancora migrati
   condividono le classi .art-* con la propria copia inline hardcoded: per loro questo
   blocco resta l'unica sorgente dark. Si potrà cancellare quando tutti e 12 avranno
   perso il <style> inline. Per articolo.html è ridondante (i token risolvono già il
   dark da soli) ma innocuo.
   Il modal .s2026-preview-modal è montato dentro .s2026, quindi lo scoping arriva. */
/* le --art-* chiare sono dichiarate su #anteprima.art-shell (ID, 1,1,0): serve !important per vincere */
[data-theme="dark"] .s2026 .art-shell{
  --art-bg:#1A1D23 !important; --art-card-bg:#22262E !important; --art-border:#343A46 !important; --art-border-strong:#414855 !important;
  --art-muted:#8b93a3 !important; --art-text:#E3E7EE !important; --art-burgundy:#D44A60 !important; --art-burgundy-dk:#9A1F32 !important;
}
[data-theme="dark"] .s2026 .s2026-preview-modal .modal-content{ background:#1A1D23; color:#E3E7EE; border:1px solid #343A46; }
[data-theme="dark"] .s2026 .s2026-preview-modal .modal-header{ border-bottom-color:var(--s2026-rule); }
[data-theme="dark"] .s2026 .s2026-preview-modal .modal-title{ color:var(--s2026-ink); }
[data-theme="dark"] .s2026 .s2026-preview-modal .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); }
[data-theme="dark"] .s2026 .art-toolbar{ background:linear-gradient(180deg,#262B34,#22262E); border-color:#343A46; box-shadow:none; }
[data-theme="dark"] .s2026 .art-toolbar .art-title .art-codice{ color:#8b93a3; }
[data-theme="dark"] .s2026 .art-toolbar .art-title .art-denom{ color:#E3E7EE; }
[data-theme="dark"] .s2026 .art-kpi{ background:#22262E; border-color:#343A46; }
[data-theme="dark"] .s2026 .art-kpi .kpi-label{ color:#8b93a3; }
[data-theme="dark"] .s2026 .art-kpi .kpi-value{ color:#E3E7EE; }
[data-theme="dark"] .s2026 .art-card, [data-theme="dark"] .s2026 .artedit2026-card{ background:#22262E; border-color:#343A46; box-shadow:none; }
[data-theme="dark"] .s2026 .art-card-header, [data-theme="dark"] .s2026 .artedit2026-card__head{ background:linear-gradient(180deg,#262B34,#1E2229); border-bottom-color:#343A46; color:var(--s2026-ink-2); }
[data-theme="dark"] .s2026 .art-dl dt{ color:#8b93a3; }
[data-theme="dark"] .s2026 .art-dl dd{ color:#E3E7EE; }
[data-theme="dark"] .s2026 .art-img-wrap{ background:#1E2128; border-color:#343A46; }
/* placeholder raster "nessuna immagine" (fondo bianco): invertito solo lui, non le foto reali */
[data-theme="dark"] .s2026 .art-img-wrap img[src*="noImg"]{ filter:invert(0.9); opacity:.9; }
[data-theme="dark"] .s2026 .art-list li{ background:#22262E; border-color:#343A46; }
[data-theme="dark"] .s2026 .art-back-top{ color:#8b93a3; }
[data-theme="dark"] .s2026 .art-back-top:hover{ background:#262B34; color:var(--s2026-brand-text); }
[data-theme="dark"] .s2026 .art-web-badge.is-on{ background:#0F2A1B; color:#7CE5A6; border-color:#1f5a37; }
[data-theme="dark"] .s2026 .art-web-badge.is-off{ background:#2D1310; color:#FFA39B; border-color:#5a241f; }
[data-theme="dark"] .s2026 .art-sb-btn{ background:#22262E; }
[data-theme="dark"] .s2026 .art-sb-btn.is-warning{ background:#2A1E0A; border-color:#7a5a1a; color:#F2C97F; }
[data-theme="dark"] .s2026 .art-sb-section{ border-top-color:#343A46; color:#E68BA0; }
[data-theme="dark"] .s2026 .img_btn_edit{ background:#22262E; border-color:#343A46; color:#E3E7EE; }
[data-theme="dark"] .s2026 .art-tabs.nav-tabs{ border-bottom-color:#343A46; }
[data-theme="dark"] .s2026 .art-tabs.nav-tabs .nav-link:hover,
[data-theme="dark"] .s2026 .art-tabs.nav-tabs .nav-link:focus{ background:#262B34 !important; color:var(--s2026-brand-text) !important; }
[data-theme="dark"] .s2026 .art-tabs.nav-tabs .nav-link.active,
[data-theme="dark"] .s2026 .art-tabs.nav-tabs .nav-item .nav-link.active{ background:#22262E !important; color:var(--s2026-brand-text) !important; border-bottom-color:var(--s2026-brand) !important; }
[data-theme="dark"] .s2026 table.art-table tbody td{ border-bottom-color:#262B34; }
[data-theme="dark"] .s2026 table.art-table tbody tr:nth-child(even) td{ background:#262B34; }
[data-theme="dark"] .s2026 table.art-table tbody tr:hover td{ background:var(--s2026-bg-row-hover); }

/* variante senza cornice grigia esterna (header dentro card/liste) */
.artedit2026.artedit2026--bare{ background:transparent; padding:0; border-radius:0; }
/* header edit in stile lista (.s2026 .page-header): i molti tab possono andare a capo */
.artedit2026 .s2026 #myTab.segmented{ flex-wrap:wrap; }
/* header edit più compatto (solo qui): meno padding verticale e titolo più piccolo → banda più bassa.
   Selettori a specificità maggiore per vincere sui globali .s2026 .page-header / __h1. */
.artedit2026 .ae-header.page-header{ padding:4px 14px; gap:16px; flex-wrap:nowrap; }
/* Titolo lungo (es. figli moda "…38 ANTRACITE"): deve RESTRINGERSI e troncare con
   ellissi, non spingere i tab a capo. min-width:0 permette lo shrink sotto il contenuto;
   il blocco tab (.ms-auto) resta a larghezza fissa (flex-shrink:0). Tooltip col testo pieno
   via attributo title sull'h1 (template). */
.artedit2026 .ae-header .page-header__title{ flex:1 1 auto; min-width:0; }
.artedit2026 .ae-header .page-header__h1{ font-size:var(--s2026-fs-xl); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artedit2026 .ae-header > .ms-auto{ flex:0 0 auto; }
/* tab dell'header più grandi (solo qui): più padding e font. */
.artedit2026 .ae-header .segmented .nav-link{ padding:8px 18px!important; font-size:var(--s2026-fs-md); }
/* spaziatura icona/testo dei tab. NB: NON si può usare il gap di .s2026 .segmented .nav-link
   (display:inline-flex): sublima_new.css ha "#myTab > li > a{display:block}" che, avendo un id,
   vince sui 3 selettori di classe → i tab non sono flex e il gap non si applica. Margine sull'<i>. */
.artedit2026 .ae-header .segmented .nav-link > i.bi{ margin-right:5px; }
/* tab attivo: sfondo burgundy + testo bianco (override del globale che usa bg-panel). */
.artedit2026 .ae-header .segmented .nav-link.active{
    background:var(--s2026-brand); color:#fff; box-shadow:none;
}
/* l'active:hover generico di .s2026 .segmented (bg-panel !important) qui non va bene:
   il tab attivo dell'edit è a sfondo brand e deve restarlo anche sotto il mouse. */
.artedit2026 .ae-header .segmented .nav-link.active:hover{
    background:var(--s2026-brand) !important; color:#fff !important;
}

/* ===== Edit "app-shell": card nidificata a tutta altezza, scroll interno alla tab
   (replica dell'approccio .s2026 .card + #nav-tabContent della lista ac_Articolo) ===== */
.artedit2026.ae-shell > .card{ margin:6px; }
/* sublima_new.css ha #ae_form{background-color:white} (ID, batte .s2026 .card):
   annulla per lasciar vedere lo sfondo tema-aware della .card sottostante. */
.artedit2026 #ae_form{ background:transparent; }
/* stessa causa (sublima_ae_form.css): #ae_form .form-label ha color:var(--gray-800,#343a40)
   fisso, illeggibile su sfondo scuro. Sostituito con l'ink token tema-aware (stesso peso
   visivo di #343a40 in light, leggibile in dark). */
.artedit2026 #ae_form .form-label,
.artedit2026 #ae_form label.form-label{ color:var(--s2026-ink-2); }
/* terza occorrenza della stessa causa (sublima_ae_form.css): #ae_form .form-check.form-switch
   .form-check-input{width:2.8em;height:1.4em} (ID) batte .artedit2026 .form-switch .form-check-input
   (90x32px, pill con Sì/No interno) rimpicciolendo lo switch alle dimensioni BS5 di default. */
.artedit2026 #ae_form .form-check.form-switch .form-check-input{ width:90px; height:32px; }
/* box contenuto inset con scroll interno: header e footer nel flusso naturale,
   scorre solo la .tab-content (altezza impostata via JS in ae_articolo.js, come la lista) */
.artedit2026.ae-shell .tab-content{
    /* position:relative rende lo scroller il containing block degli elementi position:absolute
       al suo interno — in particolare i <select> nascosti da Select2 (.select2-hidden-accessible):
       senza questo il loro containing block sarebbe la .card (position:relative) e sfuggirebbero
       al clipping dell'overflow, posizionandosi alla loro quota naturale (~altezza del tab-pane)
       e allungando la pagina → seconda scrollbar verticale sul documento. */
    position:relative;
    overflow-y:auto; overflow-x:hidden;
    border:1px solid var(--s2026-rule); border-radius:8px;
    margin:0 6px 6px; padding:10px 12px;
    scrollbar-width:thin;                        /* Firefox */
    scrollbar-color:var(--s2026-rule-strong) var(--s2026-bg-raised);
}
/* scrollbar neutra come la lista ac_Articolo (.s2026 .fixed-table-body) */
.artedit2026.ae-shell .tab-content::-webkit-scrollbar{ width:12px; height:12px; }
.artedit2026.ae-shell .tab-content::-webkit-scrollbar-track{ background:var(--s2026-bg-raised); }
.artedit2026.ae-shell .tab-content::-webkit-scrollbar-thumb{
    background:var(--s2026-rule-strong); border-radius:6px;
    border:2px solid var(--s2026-bg-raised);           /* "padding" attorno al thumb */
}
.artedit2026.ae-shell .tab-content::-webkit-scrollbar-thumb:hover{ background:var(--s2026-ink-4); }
.artedit2026.ae-shell .tab-content::-webkit-scrollbar-corner{ background:var(--s2026-bg-raised); }
/* footer statico in fondo alla card (fuori dall'area di scroll) */
.artedit2026.ae-shell .artedit2026-actions{
    position:static; bottom:auto; margin:0 6px 6px; box-shadow:none;
}
/* CARD — dichiarazione condivisa con .art-card, vedi blocco "Card" sopra */
.artedit2026 .artedit2026-card__body h3,
.artedit2026 .artedit2026-card__body h4{
    font-size:10.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
    color:var(--s2026-ink-3); border-bottom:1px solid var(--s2026-rule-2);
    padding-bottom:5px; margin:6px 0 10px; width:100%;
}
/* FORM FIELDS */
.artedit2026 .control-label{
    font-size:10.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
    /* !important: molte label hanno anche .red-sublima (burgundy con !important) — es.
       tab MODA. Neutralizzate su richiesta; (0,2,0)+!important batte .red-sublima (0,1,0). */
    color:var(--s2026-ink-3) !important; margin-bottom:4px;
}
.artedit2026 .info-label-popup-icon{ color:var(--s2026-ink-4)!important; font-size:11px; cursor:pointer; margin-left:4px; }
.artedit2026 .form-control{
    font-size:12px; border:1px solid var(--s2026-rule); border-radius:6px; color:var(--s2026-ink);
}
/* Altezza uniforme dei campi edit — base = select (select2 single-line = 38px). Gli input
   erano 32px (font 12px) e gli switch 28px: allineo tutto a 38px in modo globale su ogni
   pagina .artedit2026. min-height (non height) → la textarea resta libera di crescere e gli
   input-group button ereditano l'altezza via align-items:stretch di BS5. */
.artedit2026 .form-control,
.artedit2026 .form-select,
#filtriOffcanvas .form-control,
#filtriOffcanvas .form-select{ min-height:38px; }
/* Nota: l'altezza dello switch (pill custom) è definita più in basso nel blocco
   "Switch BS5 nativi ingranditi" — allineata anch'essa a 38px, sia in edit che nei filtri. */
/* Focus: bordo brand in ENTRAMBI i temi (BS/legacy metterebbero azzurro #86b7fe).
   !important per battere override legacy. Esteso a form-select. */
.artedit2026 .form-control:focus,
.artedit2026 .form-select:focus{
    border-color:var(--s2026-brand)!important; box-shadow:0 0 0 2px var(--s2026-brand-tint); outline:0;
}
/* Dark: BS ".form-control:focus" forza background:#fff + color:#212529 → alcuni input
   diventavano bianchi al focus. Blocco superficie/testo scuri sia a riposo che al
   focus, e il bordo a riposo su rule (una regola legacy lo dipingeva chiaro). Al
   focus il bordo passa a brand (regola più specifica sotto). Light invariato. */
/* Superficie #1E2128 = --s2026-bg-input (dark): stessa dei campi filtro di ac_articoli,
   così input e select dell'edit combaciano con quelli del filtro. */
[data-theme="dark"] .artedit2026 .form-control,
[data-theme="dark"] .artedit2026 .form-select{
    background:#1E2128!important; color:var(--s2026-ink)!important; border-color:var(--s2026-rule)!important;
}
[data-theme="dark"] .artedit2026 .form-control:focus,
[data-theme="dark"] .artedit2026 .form-select:focus{
    background:#1E2128!important; color:var(--s2026-ink)!important; border-color:var(--s2026-brand)!important;
}

/* ---------- Dark mode: Summernote (campo Note in ae_cliente e altri edit) ----------
   summernote-bs4 dipinge editor/toolbar/editable di bianco (.note-editable{background:#fff})
   → in dark restava un box bianco nella tab Contatti. Superfici scure con i token s2026. */
[data-theme="dark"] .artedit2026 .note-editor.note-frame{ border-color:var(--s2026-rule); }
[data-theme="dark"] .artedit2026 .note-editor .note-toolbar{ background:var(--s2026-bg-raised); border-bottom:1px solid var(--s2026-rule); }
[data-theme="dark"] .artedit2026 .note-editor .note-editable{ background:#1E2128; color:var(--s2026-ink); }
[data-theme="dark"] .artedit2026 .note-editor .note-placeholder{ color:var(--s2026-ink-3); }
[data-theme="dark"] .artedit2026 .note-editor .note-statusbar{ background:var(--s2026-bg-raised); border-top:1px solid var(--s2026-rule); }
[data-theme="dark"] .artedit2026 .note-editor .note-btn{ background:var(--s2026-bg-panel); border-color:var(--s2026-rule); color:var(--s2026-ink-2); }
[data-theme="dark"] .artedit2026 .note-editor .note-btn:hover{ background:var(--s2026-bg-raised); color:var(--s2026-ink); }
[data-theme="dark"] .artedit2026 .note-editor .note-dropdown-menu{ background:var(--s2026-bg-panel); border-color:var(--s2026-rule); color:var(--s2026-ink); }

/* ---------- Dark mode: Select2 (pagine edit .artedit2026) ---------- */
/* Box chiuso: resta dentro il wrapper. */
[data-theme="dark"] .artedit2026 .select2-selection{
    background:#1E2128; border-color:var(--s2026-rule); color:var(--s2026-ink);
}
[data-theme="dark"] .artedit2026 .select2-container{ background-color:transparent!important; }
[data-theme="dark"] .artedit2026 .select2-selection__rendered{ color:var(--s2026-ink); }
[data-theme="dark"] .artedit2026 .select2-selection__placeholder{ color:var(--s2026-ink-3); }
[data-theme="dark"] .artedit2026 .select2-selection__arrow b{ border-color:var(--s2026-ink-3) transparent transparent transparent; }
/* Chip delle select multiple: il tema bootstrap-5 le dipinge con testo scuro (#212529,
   illeggibile sul chip scuro) e bordo grigio chiaro, con specificità pari alla mia →
   serve !important. Testo chiaro leggibile + bordo brand (rosso principale) come richiesto. */
[data-theme="dark"] .artedit2026 .select2-selection__choice{
    background:var(--s2026-bg-raised) !important; border-color:var(--s2026-brand) !important; color:var(--s2026-ink) !important;
}
[data-theme="dark"] .artedit2026 .select2-selection__choice__remove{ color:var(--s2026-brand) !important; }
/* note .red-sublima (es. "Opzione per Bo…" tab HORECA): il rosso su fondo scuro è poco
   leggibile → testo chiaro in dark. .red-sublima usa color !important, il selettore qui
   è più specifico e vince. Light invariato (resta rosso). L'hover legacy forza anche
   background-color:#f8f9fa (lampo bianco): lo annullo in dark. */
[data-theme="dark"] .artedit2026 .red-sublima,
[data-theme="dark"] .artedit2026 .red-sublima:hover{ color:var(--s2026-ink) !important; }
[data-theme="dark"] .artedit2026 .red-sublima:hover{ background-color:transparent !important; }

/* Loader generale dell'edit (#sublima-edit-loader, iniettato da sublima.js su <body>
   fuori dal wrapper): bg bianco + ring/label chiari hardcoded → in dark lampeggia
   bianco. Lo scurisco con valori letterali. Attivo solo con html in dark (il toggle
   esiste solo su pagine s2026/artedit → loader legacy invariato). */
[data-theme="dark"] #sublima-edit-loader{ background:#1A1D23 !important; }
[data-theme="dark"] #sublima-edit-loader .sublima-edit-loader-spinner{ border-color:#343A46; border-top-color:var(--s2026-brand); }
/* Mentre il loader è attivo (overlay fixed a tutto schermo) la lista sottostante e il
   nuovo contenuto dell'edit coesistono per un istante → la pagina supera il viewport e
   la scrollbar compare/sparisce (flicker fastidioso). Blocco lo scroll finché il loader
   è mostrato; quando inizia a sfumare (.sublima-loader-hiding) o è nascosto, torna
   normale. Vale in entrambi i temi. */
html:has(#sublima-edit-loader:not(.sublima-loader-hiding)){ overflow:hidden; }
/* Tabella "Gestione Listini Preferenziali" (#listino_preferenziale_table): è una
   Tabulator, non una <table> standard. Lo skin di sublima_new.css (header burgundy,
   righe rgb(240,240,240)/white, testo nero) usa selettori globali con !important →
   in dark resta chiara. Le SUPERFICI DELLE RIGHE e il container restano dark-gated
   (token scuri); l'HEADER invece è de-gated e allineato ad ac_Articoli (bg-row-sel +
   ink-2) → stesso colore in light e dark, non più burgundy legacy. Serve !important e
   specificità ≥ delle regole globali di sublima_new.css (contatore selettori replicato). */
[data-theme="dark"] .artedit2026 .tabulator{
    background-color:var(--s2026-bg-panel) !important;
    border:1px solid var(--s2026-rule);
    color:var(--s2026-ink);
}
.artedit2026 .tabulator .tabulator-header,
.artedit2026 .tabulator .tabulator-headers{
    background-color:var(--s2026-bg-row-sel) !important;
    border-bottom:1px solid var(--s2026-rule-strong);
    color:var(--s2026-ink-2) !important;
}
.artedit2026 .tabulator .tabulator-col{
    background-color:var(--s2026-bg-row-sel) !important;
    border-color:var(--s2026-rule) !important;
    color:var(--s2026-ink-2) !important;
}
.artedit2026 .tabulator .tabulator-col .tabulator-col-title{
    color:var(--s2026-ink-2) !important;
}
/* freccette di ordinamento Tabulator (border-based): neutre, leggibili sulla tinta */
.artedit2026 .tabulator .tabulator-col .tabulator-arrow{
    border-bottom-color:var(--s2026-ink-3) !important;
    border-top-color:var(--s2026-ink-3) !important;
}
/* righe: base/odd = panel, even = raised (zebra sottile), testo ink. NB: il colore
   base bianco arriva dal CSS della libreria Tabulator via .tabulator-row-odd/even
   (l'holder è .tabulator-tableholder, h minuscola) → targetto quelle classi. */
[data-theme="dark"] .artedit2026 .tabulator .tabulator-row{
    background-color:var(--s2026-bg-panel) !important;
    color:var(--s2026-ink) !important;
    border-color:var(--s2026-rule) !important;
}
[data-theme="dark"] .artedit2026 .tabulator .tabulator-row.tabulator-row-even{
    background-color:var(--s2026-bg-raised) !important;
}
[data-theme="dark"] .artedit2026 .tabulator .tabulator-row:hover,
[data-theme="dark"] .artedit2026 .tabulator .tabulator-row.tabulator-selectable:hover{
    background-color:var(--s2026-brand-tint) !important;
}
[data-theme="dark"] .artedit2026 .tabulator .tabulator-row .tabulator-cell{
    border-color:var(--s2026-rule) !important;
    color:var(--s2026-ink);
}
/* Dropdown aperto: select2 lo monta su <body>, fuori dal wrapper → le regole .s2026 non
   lo intercettano. Replico gli STESSI selettori profondi del tema bootstrap-5 usati per i
   filtri, così vinco in specificità. I token invece ci arrivano: stanno su :root, quindi
   valgono anche fuori dal wrapper. Attivo solo con html in dark (il toggle esiste solo su
   pagine s2026/artedit → legacy intatto). */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown{
    background:var(--s2026-bg-panel); border-color:var(--s2026-rule); color:var(--s2026-ink);
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option{
    color:var(--s2026-ink); background:transparent;
}
/* hover neutro / selezione a tinta brand — ENTRAMBI i temi (era gated solo dark →
   in light restava il blu nativo bs5, stessa incoerenza segnalata per i filtri).
   Gated su :has(.artedit2026) invece che sul tema: qui non c'è un antenato .s2026/
   .artedit2026 da referenziare (il dropdown monta su <body>), quindi mi appoggio
   alla presenza del wrapper edit in pagina per non toccare il select2 delle pagine
   legacy non-s2026 (che condividono lo stesso tema bootstrap-5 globale). */
html:has(.artedit2026) .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--highlighted{
    background:var(--s2026-bg-raised); color:var(--s2026-ink);
}
html:has(.artedit2026) .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--selected,
html:has(.artedit2026) .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted){
    background:var(--s2026-bg-row-sel) !important; color:var(--s2026-ink) !important;
}
/* Stesso trattamento ma DARK-globale (non solo :has(.artedit2026)): la dashboard e altre
   pagine senza wrapper edit montano il dropdown su <body> e in dark mostravano ancora il
   blu primary di bootstrap-5. Gated solo su tema scuro → il legacy in light resta intatto. */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--highlighted{
    background:var(--s2026-bg-raised) !important; color:var(--s2026-ink) !important;
}
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--selected,
[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted){
    background:var(--s2026-bg-row-sel) !important; color:var(--s2026-ink) !important;
}
/* campo di ricerca dentro il dropdown: il tema lo dipinge bianco → scuro come i filtri */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field,
[data-theme="dark"] .select2-container--bootstrap-5 .select2-search__field{
    background:var(--s2026-bg-input) !important; border-color:var(--s2026-rule) !important; color:var(--s2026-ink) !important;
}
/* Info-popup (icona ℹ accanto ai label): legacy sublima_new.css lo dipinge fisso
   background:#fff senza color → in dark il testo chiaro del tema cade su bianco ed è
   illeggibile. Superfici scure coi token; specificità (0,2,0) batte il legacy (0,1,0). */
[data-theme="dark"] .info-popup{
    background:var(--s2026-bg-panel); border-color:var(--s2026-rule); color:var(--s2026-ink); box-shadow:var(--s2026-shadow-raised);
}
[data-theme="dark"] .info-popup strong{ color:var(--s2026-brand-text); }
/* Info-popup "generale" della lista (bottone ℹ toolbar): creato via JS con stili INLINE
   (background:#fff): servono !important per vincere sull'inline. Il testo dei <p>/<b>
   eredita il colore chiaro del tema → su fondo bianco è slavato. */
[data-theme="dark"] .info-popup-generale{
    background:var(--s2026-bg-panel) !important; border-color:var(--s2026-rule) !important;
    color:var(--s2026-ink) !important; box-shadow:var(--s2026-shadow-raised) !important;
}
/* la parola evidenziata in giallo chiaro (span con background inline) manterrebbe testo
   chiaro ereditato su fondo giallo → forzo testo scuro per contrasto. */
[data-theme="dark"] .info-popup-generale span[style*="background"]{ color:#1F2227 !important; }
/* Focus della ricerca-in-dropdown: glow celeste nativo Bootstrap in entrambi i temi
   → uniformato al brand, stesso trattamento del blocco .s2026 sopra. */
html:has(.artedit2026) .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus,
html:has(.artedit2026) .select2-container--bootstrap-5 .select2-search__field:focus{
    border-color:var(--s2026-brand) !important; box-shadow:var(--s2026-focus-ring) !important; outline:none;
}

/* ---------- Switch: acceso = brand in ENTRAMBI i temi ---------- */
/* Lo stato "acceso" è un accento di stato (come tab attiva/CTA), non chrome: deve
   restare brand in light quanto in dark. Prima era brand solo in dark (gated su
   [data-theme="dark"]) → in light restava il blu nativo Bootstrap (#007bff /
   #0d6efd), incoerente col resto della UI. Le var token fanno il resto: risolvono
   da sole al valore brand del tema attivo, quindi una sola regola basta per entrambi. */
.artedit2026 .form-check-input:checked{
    background-color:var(--s2026-brand); border-color:var(--s2026-brand);
}
.artedit2026 .form-switch .form-check-input:checked{
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23fff'/></svg>");
}
.artedit2026 .form-check-input:focus{ border-color:var(--s2026-brand); box-shadow:0 0 0 2px var(--s2026-brand-tint); }
.artedit2026 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.s2026 .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary{
    background:var(--s2026-brand); color:#fff;
}
/* Al click il plugin aggiunge .bootstrap-switch-focused sul wrapper con un glow
   celeste hardcoded (retaggio Bootstrap 3, tpl/assets/css/bootstrap-switch.min.css:
   "0 0 8px rgba(102,175,233,.6)") — mai passato dal design system. Uniformato al
   brand come gli altri focus ring. !important sul border-color: a parità di
   specificità la regola dark "lato spento" più sotto (border-color: --s2026-rule)
   viene dopo nel file e altrimenti vince lei in dark. */
.artedit2026 .bootstrap-switch.bootstrap-switch-focused,
.s2026 .bootstrap-switch.bootstrap-switch-focused{
    border-color:var(--s2026-brand) !important; box-shadow:var(--s2026-focus-ring); outline:none;
}

/* ---------- Dark mode: switch (solo lato SPENTO — resta tematizzato) ---------- */
/* BS5 form-switch: track/knob chiari su fondo scuro. */
[data-theme="dark"] .artedit2026 .form-check-input{
    background-color:var(--s2026-bg); border-color:var(--s2026-rule);
}
[data-theme="dark"] .artedit2026 .form-switch .form-check-input{
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(255,255,255,.55)'/></svg>");
}
/* bootstrap-switch (widget legacy): wrapper/label/lato spento chiari → scuri. */
[data-theme="dark"] .artedit2026 .bootstrap-switch{ border-color:var(--s2026-rule); }
[data-theme="dark"] .artedit2026 .bootstrap-switch .bootstrap-switch-label{ background:var(--s2026-bg-raised); color:var(--s2026-ink); }
[data-theme="dark"] .artedit2026 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default{
    background:var(--s2026-rule-2); color:var(--s2026-ink-2);
}
/* Stesso trattamento per le pagine lista (.s2026): gli switch dei filtri usano solo il
   widget legacy bootstrap-switch. La manopola spenta usa --s2026-rule-strong, che sul
   widget legge meglio di --s2026-rule-2. */
[data-theme="dark"] .s2026 .bootstrap-switch{ border-color:var(--s2026-rule); }
[data-theme="dark"] .s2026 .bootstrap-switch .bootstrap-switch-label{ background:var(--s2026-bg-raised); color:var(--s2026-ink); }
[data-theme="dark"] .s2026 .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default{
    background:var(--s2026-rule-strong); color:var(--s2026-ink-2);
}
.artedit2026 .input-group .btn,
.artedit2026 .input-group .btn-default{
    border:1px solid var(--s2026-rule); background:var(--s2026-bg-panel); color:var(--s2026-ink-2); border-radius:6px;
}
.artedit2026 .input-group .btn:hover{ background:var(--s2026-bg-raised); color:var(--s2026-ink); }
/* SIDEBAR COLLEGAMENTI */
.artedit2026 .artedit2026-grid > .col-sm-2{ padding-left:16px !important; }
.artedit2026 .list-group.hidden-xs,
.artedit2026 .list-group.ae-sidebar{ background:transparent!important; padding:0!important; border-radius:0!important; }
.artedit2026 .ae-sidebar-btn{
    display:flex!important; align-items:center; gap:8px; width:100%;
    background:var(--s2026-bg-panel); border:1.5px solid var(--s2026-rule); color:var(--s2026-ink);
    border-radius:7px; padding:8px 11px; margin-bottom:7px;
    font-size:12px; font-weight:600; box-shadow:var(--s2026-shadow-card); text-align:left;
}
.artedit2026 .ae-sidebar-btn i{ color:var(--s2026-ink-2); font-size:14px; }
/* Alcuni ae-sidebar-btn (es. extra_horeca_* nella tab HORECA) sono mostrati/nascosti dal
   JS via jQuery .hide() (display:none inline). Il display:flex!important sopra lo
   annullerebbe → qui l'inline display:none torna a vincere. */
.artedit2026 .ae-sidebar-btn[style*="display: none"],
.artedit2026 .ae-sidebar-btn[style*="display:none"]{ display:none !important; }
.artedit2026 .ae-sidebar-btn .list-group-item{
    background:transparent; border:0; padding:0; color:inherit; font-size:12px; font-weight:600; flex:1;
}
.artedit2026 .ae-sidebar-btn .artedit2026-count{
    margin-left:auto; background:var(--s2026-brand-tint); color:var(--s2026-brand);
    font-size:10px; font-weight:700; border-radius:6px; padding:1px 7px;
}
/* Riposo neutro (bordo rule + testo/icona ink). Hover/focus/active: evidenziazione
   leggera, non marcata — sfondo brand-tint ("primario spento"), bordo e testo brand.
   I token risolvono per tema; il dark rifinisce solo il background (vedi sotto). */
.artedit2026 .ae-sidebar-btn:hover,
.artedit2026 .ae-sidebar-btn:focus,
.artedit2026 .ae-sidebar-btn.active{
    background:var(--s2026-brand-tint); border-color:var(--s2026-brand); color:var(--s2026-brand-text);
}
.artedit2026 .ae-sidebar-btn:hover i, .artedit2026 .ae-sidebar-btn:focus i, .artedit2026 .ae-sidebar-btn.active i,
.artedit2026 .ae-sidebar-btn:hover .list-group-item, .artedit2026 .ae-sidebar-btn:focus .list-group-item, .artedit2026 .ae-sidebar-btn.active .list-group-item{ color:var(--s2026-brand-text); }
.artedit2026 .ae-sidebar-btn:hover .artedit2026-count, .artedit2026 .ae-sidebar-btn.active .artedit2026-count{ background:var(--s2026-brand); color:var(--s2026-brand-fg); }
/* Dark: i bottoni sidebar seguono lo stile dei bottoni anteprima. A riposo:
   superficie leggermente più chiara del fondo (raised), testo/icona chiari, bordo
   grigio (rule). Hover/focus/active: evidenziazione leggera come in light — sfondo
   brand-tint (primario spento), bordo e testo brand. Serve l'override esplicito del bg
   di hover perché altrimenti la regola dark "a riposo" (pari specificità, dichiarata
   dopo l'hover base) vincerebbe e reimporrebbe raised. */
[data-theme="dark"] .artedit2026 .ae-sidebar-btn{
    background:var(--s2026-bg-raised); border-color:var(--s2026-rule); color:var(--s2026-ink);
}
[data-theme="dark"] .artedit2026 .ae-sidebar-btn i{ color:var(--s2026-ink); }
[data-theme="dark"] .artedit2026 .ae-sidebar-btn:hover,
[data-theme="dark"] .artedit2026 .ae-sidebar-btn:focus,
[data-theme="dark"] .artedit2026 .ae-sidebar-btn.active{
    background:var(--s2026-brand-tint); border-color:var(--s2026-brand); color:var(--s2026-brand-text);
}
[data-theme="dark"] .artedit2026 .ae-sidebar-btn:hover i,
[data-theme="dark"] .artedit2026 .ae-sidebar-btn:focus i,
[data-theme="dark"] .artedit2026 .ae-sidebar-btn.active i,
[data-theme="dark"] .artedit2026 .ae-sidebar-btn:hover .list-group-item,
[data-theme="dark"] .artedit2026 .ae-sidebar-btn:focus .list-group-item,
[data-theme="dark"] .artedit2026 .ae-sidebar-btn.active .list-group-item{ color:var(--s2026-brand); }
[data-theme="dark"] .artedit2026 .ae-sidebar-btn:hover .artedit2026-count,
[data-theme="dark"] .artedit2026 .ae-sidebar-btn.active .artedit2026-count{ background:var(--s2026-brand-tint); color:var(--s2026-brand); }
/* FOOTER AZIONI */
.artedit2026 .artedit2026-actions{
    display:flex; align-items:center; gap:10px;
    background:var(--s2026-bg-panel); border:1px solid var(--s2026-rule); border-radius:8px;
    padding:12px 14px; margin-top:8px;
    position:sticky; bottom:8px; z-index:20;
    box-shadow:0 -2px 14px rgba(15,23,42,.10);
}
.artedit2026 .artedit2026-btn{
    display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
    border-radius:7px; padding:9px 20px; border:1.5px solid var(--s2026-rule-strong);
    background:var(--s2026-bg-panel); color:var(--s2026-ink); cursor:pointer; white-space:nowrap;
    box-shadow:var(--s2026-shadow-card);
}
.artedit2026 .artedit2026-btn:hover{ background:var(--s2026-bg-raised); border-color:var(--s2026-ink-3); color:var(--s2026-ink); box-shadow:var(--s2026-shadow-raised); }
.artedit2026 .artedit2026-btn--primary{ background:var(--s2026-brand); border-color:var(--s2026-brand-deep); color:#fff; font-weight:700; }
.artedit2026 .artedit2026-btn--primary:hover{ background:var(--s2026-brand-hover); border-color:var(--s2026-brand-deep); color:#fff; }
.artedit2026 .artedit2026-btn--close{ margin-left:auto; }
@media (max-width:575.98px){
    .artedit2026 .artedit2026-actions{ flex-direction:column; align-items:stretch; }
    .artedit2026 .artedit2026-btn--close{ margin-left:0; }
}

/* ============================================================================
   ALERT — NON scoped (F7): $.smkAlert monta <div class="alert alert-*"> su
   <body>, fuori da ogni wrapper .s2026. Tocca ogni pagina, legacy incluso: e'
   l'unico modo per tematizzare in un colpo sia gli alert statici sia smkAlert.
   Solo background/color/border-color, nessuna proprieta' di layout.
   ============================================================================ */
.alert-success{ background:var(--s2026-success-bg); color:var(--s2026-success-fg); border-color:var(--s2026-success); }
.alert-warning{ background:var(--s2026-warning-bg); color:var(--s2026-warning-fg); border-color:var(--s2026-warning); }
.alert-info{ background:var(--s2026-info-bg); color:var(--s2026-info-fg); border-color:var(--s2026-info); }
.alert-danger{ background:var(--s2026-danger-bg); color:var(--s2026-danger-fg); border-color:var(--s2026-danger); }

/* ============================================================================
   SWEETALERT2 (F8) — NON scoped, stesso motivo degli alert: SweetAlert2 monta
   su <body>. sweetalert2-11.10.6 non espone custom property --swal2-*: questa
   build non le definisce (verificato su sweetalert2.min.css/.js). L'unica leva
   e' il default di classe .swal2-confirm/.swal2-cancel (blu/grigio SweetAlert
   stock), che vince ovunque un chiamante NON passi confirmButtonColor/
   cancelButtonColor inline — l'inline resta più specifico e va rimosso solo
   nei call site in scope (delete_row + area articoli).
   ============================================================================ */
.swal2-confirm{ background-color:var(--s2026-brand) !important; }
.swal2-confirm:focus{ box-shadow:var(--s2026-focus-ring) !important; }
.swal2-cancel{ background-color:var(--s2026-ink-3) !important; }

/* Dark: il popup stock resta bianco (bg #fff, titolo/testo scuri, input bianchi).
   SweetAlert2 monta su <body>, sotto <html data-theme="dark"> -> il gate ancestor
   funziona. Solo superfici/testo, nessun layout. Le icone di stato (warning/
   question/...) hanno colore proprio, leggibili anche su fondo scuro. */
[data-theme="dark"] .swal2-popup{ background:var(--s2026-bg-raised); color:var(--s2026-ink); border:1px solid var(--s2026-rule-strong); }
[data-theme="dark"] .swal2-title{ color:var(--s2026-ink); }
[data-theme="dark"] .swal2-html-container{ color:var(--s2026-ink); }
[data-theme="dark"] .swal2-close{ color:var(--s2026-ink-3); }
[data-theme="dark"] .swal2-close:hover{ color:var(--s2026-danger); }
[data-theme="dark"] .swal2-radio,
[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select{ background:var(--s2026-bg-panel); color:var(--s2026-ink); border-color:var(--s2026-rule); }

/* ============================================================================
   SMK-OFFCANVAS (F8) — NON scoped, stesso motivo di alert/SweetAlert2:
   smkOffcanvas() (sublima.js) fa $('body').append($oc), fuori da ogni wrapper
   .s2026. Aggiunta la classe marker "smk-offcanvas" in sublima.js come hook
   stabile (l'id e' generato random ad ogni istanza, non e' un selettore valido).
   Header gia' bordeaux in entrambi i temi (accentColor = var(--s2026-brand)
   risolto inline, i custom property sono leggibili ovunque). Footer e loader
   invece portano background HEX inline (default #f8f9fa / #fff): l'inline
   vince sempre su una regola esterna senza !important, quindi qui serve. */
[data-theme="dark"] .smk-offcanvas{ background:var(--s2026-bg-panel); color:var(--s2026-ink); }
[data-theme="dark"] .smk-offcanvas .offcanvas-footer{ background:var(--s2026-bg-raised) !important; border-top-color:var(--s2026-rule); }
[data-theme="dark"] .smk-offcanvas .smk-oc-loader{ background:var(--s2026-bg-panel) !important; }

/* ============================================================================
   PANNELLO "AZIONI/DUPLICA ARTICOLO" (.action_area) — mostrato come north-pane di
   jquery.layout dentro .s2026 (#azioni, toggle da outerLayout). Fondo/bordo chiari
   NON sono elementi s2026 senza stile: arrivano da CSS legacy theme-unaware —
   layout-default-latest (.ui-layout-pane #FFF/#BBB) e sublima_new (.action_area
   #f9f9f9 + bordo bordeaux). Nessuna regola s2026 li tocca, quindi l'hex vince.
   Qui li riportiamo al design: card raised (stacca per tono+elevazione, non col
   bordo rosso), bottoni tematizzati come #toolbar, gutter ripristinato. Scoped
   .s2026 per non toccare le pagine non migrate. */
[data-theme="dark"] .s2026 .ui-layout-pane{ background:var(--s2026-bg-panel); border-color:var(--s2026-rule); }
/* Card del form: niente bordo bordeaux, stacca via bg-raised (su pane bg-panel)
   + ombra in light / delta-tono in dark. Entrambi i temi via token. */
.s2026 .action_area{
    background: var(--s2026-bg-raised);
    border: 1px solid var(--s2026-rule);
    border-radius: var(--s2026-radius-md);
    box-shadow: var(--s2026-shadow-raised);
    margin-bottom: 16px;   /* stacco tra card e tabella sottostante */
}
/* Gutter collassati nel markup legacy: i due input in alto si toccavano. */
.s2026 .action_area .row > [class*="col-"]{ padding-left: .5rem; padding-right: .5rem; }
.s2026 .action_area .form-group{ margin-bottom: .75rem; }
/* Bottoni allineati al design (come #toolbar): Crea = brand pieno, Crea+Apri =
   brand outline, Chiudi = neutro ghost. Rimappa le classi bootstrap legacy. */
.s2026 .action_area .btn{ border-radius: var(--s2026-radius); font-weight: 600; }
.s2026 .action_area .btn-info{ background: var(--s2026-brand); border-color: var(--s2026-brand-deep); color: #fff; }
.s2026 .action_area .btn-info:hover{ background: var(--s2026-brand-hover); color: #fff; }
.s2026 .action_area .btn-success{ background: var(--s2026-brand-tint); border-color: var(--s2026-brand); color: var(--s2026-brand-text); }
.s2026 .action_area .btn-success:hover{ background: var(--s2026-brand); border-color: var(--s2026-brand-deep); color: #fff; }
.s2026 .action_area .btn-danger{ background: var(--s2026-bg-panel); border-color: var(--s2026-rule); color: var(--s2026-ink-2); }
.s2026 .action_area .btn-danger:hover{ background: var(--s2026-bg-raised); color: var(--s2026-ink); }

/* ============================================================================
   SUBLIMA UI — PANEL (SublimaUI.panel, BS5 Offcanvas nativo)
   Rimpiazza smkOffcanvas e i dialog di sola visualizzazione (BootstrapDialog.show).
   Montato su <body> fuori da .s2026 -> stile via token globali (dark-aware senza
   gating). Header NEUTRO con titolo a sinistra e X ACCENTATA (brand) a destra;
   nessun footer. Il body ospita iframe/contenuto e un loader finche' carica.
   ============================================================================ */
.s2026-panel{ display:flex; flex-direction:column; max-width:100%; max-height:100%;
    background:var(--s2026-bg-panel); color:var(--s2026-ink); font-family:var(--s2026-font-sans); }
.s2026-panel__header{ flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.55rem .9rem; background:var(--s2026-bg-raised); border-bottom:1px solid var(--s2026-rule); }
.s2026-panel__title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:var(--s2026-fs-md); font-weight:600; color:var(--s2026-ink); }
.s2026-panel__close{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border:1px solid var(--s2026-brand-deep); border-radius:var(--s2026-radius);
    background:var(--s2026-brand); color:#fff; font-size:.95rem; line-height:1; cursor:pointer;
    transition:var(--s2026-transition); }
.s2026-panel__close:hover{ background:var(--s2026-brand-hover); color:#fff; }
.s2026-panel__body{ flex:1; overflow-y:auto; padding:0; position:relative; background:var(--s2026-bg-panel); }
.s2026-panel__loader{ position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center;
    background:var(--s2026-bg-panel); }
.s2026-panel__loader .spinner-border{ width:3rem; height:3rem; color:var(--s2026-brand); }

/* Popover info (icona "i" accanto alle label) — BS5 Popover nativo temizzato.
   Montato su <body> (container:'body'): token globali, dark via [data-theme] su
   <html>. Superficie e bordo in due var locali cosi' il riempimento (::after) e
   il bordo (::before) della freccia restano in sync col fondo in OGNI direzione
   (popper auto-place: top/bottom/left/right) e in entrambi i temi. */
.s2026-info-popover{
    --pop-surface: var(--s2026-bg-panel);
    --pop-border:  var(--s2026-rule);
    font-family:var(--s2026-font-sans); max-width:340px;
    background:var(--pop-surface); border-color:var(--pop-border);
    box-shadow:0 6px 24px rgba(15,23,42,.14);
}
.s2026-info-popover .popover-header{ display:none; }   /* nessun header */
.s2026-info-popover .popover-body{ font-size:.85rem; line-height:1.5; color:var(--s2026-ink); }
.s2026-info-popover .popover-body strong{ color:var(--s2026-brand-text); }
/* dark: superficie piu' chiara del pannello (#16191F) per staccare dallo sfondo */
[data-theme="dark"] .s2026-info-popover{
    --pop-surface:#252A33; --pop-border:var(--s2026-rule-strong);
    box-shadow:0 10px 30px rgba(0,0,0,.6);
}
/* freccia: bordo = --pop-border, riempimento = --pop-surface; tutte le direzioni */
.s2026-info-popover[data-popper-placement^="top"] .popover-arrow::before{ border-top-color:var(--pop-border); }
.s2026-info-popover[data-popper-placement^="top"] .popover-arrow::after{ border-top-color:var(--pop-surface); }
.s2026-info-popover[data-popper-placement^="bottom"] .popover-arrow::before{ border-bottom-color:var(--pop-border); }
.s2026-info-popover[data-popper-placement^="bottom"] .popover-arrow::after{ border-bottom-color:var(--pop-surface); }
.s2026-info-popover[data-popper-placement^="left"] .popover-arrow::before{ border-left-color:var(--pop-border); }
.s2026-info-popover[data-popper-placement^="left"] .popover-arrow::after{ border-left-color:var(--pop-surface); }
.s2026-info-popover[data-popper-placement^="right"] .popover-arrow::before{ border-right-color:var(--pop-border); }
.s2026-info-popover[data-popper-placement^="right"] .popover-arrow::after{ border-right-color:var(--pop-surface); }

/* ============================================================================
   SUBLIMA UI — TOAST (SublimaUI.toast, BS5 nativo)
   Anatomia design 2026: card piatta su fondo pannello, accento a barra a
   sinistra (::before, inset+rounded), icona in pastiglia tinta, titolo +
   testo, etichetta di stato in alto a destra, barra di durata in basso.
   Dark-aware coi token senza gating [data-theme]: i colori solidi di stato non
   si invertono, mentre pannello/-bg/-fg si adattano da soli. Unica eccezione:
   la X di .btn-close, la cui icona SVG scura va invertita su fondo scuro.
   ============================================================================ */
/* top offset: la navbar e' fixed in alto, i toast devono scendere SOTTO di essa
   e non sovrapporsi ai controlli (campanella/tema/utente) sul lato destro. */
.s2026-toast-host{ z-index:1090; top:58px !important; max-width:calc(100vw - 24px); background:transparent !important; }

.s2026-toast{
    position:relative; overflow:hidden;
    background:var(--s2026-bg-raised);       /* superficie sollevata: si stacca dai pannelli sotto */
    color:var(--s2026-ink);
    border:1px solid var(--s2026-rule-strong);
    border-radius:var(--s2026-radius-lg);
    /* elevazione marcata: il toast deve "galleggiare" sopra la UI, non fondersi. */
    box-shadow:0 10px 30px -6px rgba(15,23,42,.28), 0 4px 10px -4px rgba(15,23,42,.16);
    font-family:var(--s2026-font-sans);
    min-width:320px; max-width:400px;
}
/* Dark: le ombre non si leggono su fondo scuro → separazione con superficie piu'
   chiara (gia' bg-raised), bordo lume e un alone scuro ampio per dare profondita'. */
[data-theme="dark"] .s2026-toast{
    border-color:#4A5262;
    box-shadow:0 12px 34px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.03);
}
/* accento a barra: inset e arrotondato, colore pieno di stato (fallback info) */
.s2026-toast::before{
    content:""; position:absolute; left:9px; top:12px; bottom:12px;
    width:3px; border-radius:2px; background:var(--s2026-info);
}
.s2026-toast__main{ display:flex; align-items:flex-start; gap:11px; padding:12px 12px 12px 22px; }

/* pastiglia a colore pieno + glifo bianco: stacca sul fondo pastello della card */
.s2026-toast__icon{
    flex:0 0 auto; width:32px; height:32px; border-radius:9px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.05rem; background:var(--s2026-info); color:#fff;
}
.s2026-toast__content{ flex:1 1 auto; min-width:0; }
.s2026-toast__head{ display:flex; align-items:baseline; gap:10px; }
.s2026-toast__title{ flex:1 1 auto; min-width:0; font-size:var(--s2026-fs-md); font-weight:600; line-height:1.3; color:var(--s2026-ink); }
.s2026-toast__text{ margin-top:2px; font-size:var(--s2026-fs-base); line-height:1.4; color:var(--s2026-ink-3); }
.s2026-toast__badge{
    flex:0 0 auto; font-size:var(--s2026-fs-micro); font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; color:var(--s2026-info);
    transition:opacity 120ms ease;
}
/* X e badge condividono l'angolo: a riposo il badge, in hover la X (swap). */
.s2026-toast:hover .s2026-toast__badge{ opacity:0; }
.s2026-toast__close{ position:absolute; top:8px; right:10px; padding:.3rem; opacity:0; transition:opacity 120ms ease; }
.s2026-toast:hover .s2026-toast__close{ opacity:.7; }
.s2026-toast__close:hover{ opacity:1 !important; }
[data-theme="dark"] .s2026-toast__close{ filter:invert(1) grayscale(100%) brightness(200%); }

/* barra di durata: scala da piena a zero nel tempo di autochiusura */
.s2026-toast__timer{
    position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--s2026-info); transform-origin:left;
    animation-name:s2026-toast-timer; animation-timing-function:linear; animation-fill-mode:forwards;
}
@keyframes s2026-toast-timer{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }

/* per-tipo: fondo pastello (-bg, tema-aware) + barra accento/durata, pastiglia
   piena, etichetta a colore pieno */
.s2026-toast--success{ background:var(--s2026-success-bg); }
.s2026-toast--success::before,
.s2026-toast--success .s2026-toast__timer,
.s2026-toast--success .s2026-toast__icon{ background:var(--s2026-success); }
.s2026-toast--success .s2026-toast__badge{ color:var(--s2026-success-fg); }

.s2026-toast--warning{ background:var(--s2026-warning-bg); }
.s2026-toast--warning::before,
.s2026-toast--warning .s2026-toast__timer,
.s2026-toast--warning .s2026-toast__icon{ background:var(--s2026-warning); }
.s2026-toast--warning .s2026-toast__badge{ color:var(--s2026-warning-fg); }

.s2026-toast--danger{ background:var(--s2026-danger-bg); }
.s2026-toast--danger::before,
.s2026-toast--danger .s2026-toast__timer,
.s2026-toast--danger .s2026-toast__icon{ background:var(--s2026-danger); }
.s2026-toast--danger .s2026-toast__badge{ color:var(--s2026-danger-fg); }

.s2026-toast--info{ background:var(--s2026-info-bg); }
.s2026-toast--info::before,
.s2026-toast--info .s2026-toast__timer,
.s2026-toast--info .s2026-toast__icon{ background:var(--s2026-info); }
.s2026-toast--info .s2026-toast__badge{ color:var(--s2026-info-fg); }

.s2026-toast--neutral{ background:var(--s2026-neutral-bg); }
.s2026-toast--neutral::before,
.s2026-toast--neutral .s2026-toast__timer,
.s2026-toast--neutral .s2026-toast__icon{ background:var(--s2026-neutral); }
.s2026-toast--neutral .s2026-toast__badge{ color:var(--s2026-neutral-fg); }

/* ============================================================
   Switch BS5 nativi ingranditi, rettangolari e con SCRITTA INTERNA (stile
   vecchio bootstrapSwitch) — senza cambiare il markup .form-check.form-switch.
   L'<input> non può contenere testo: la scritta è uno ::after del wrapper,
   sovrapposto alla traccia sul lato opposto al knob (Popper: knob a sx=OFF,
   a dx=ON). Testo default Sì/No; casi speciali via :has(#id). Ambito ristretto:
   scheda articolo (.artedit2026) e pannello Filtri articoli (#filtriOffcanvas),
   così non tocca gli switch di altre pagine .s2026. Stato via :has(:checked).
   ============================================================ */
.artedit2026 .form-check.form-switch,
#filtriOffcanvas .form-check.form-switch{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding-left:0; min-height:38px; margin:0;   /* 38px = altezza uniforme campi edit (select/input) */
}
.artedit2026 .form-switch .form-check-input,
#filtriOffcanvas .form-switch .form-check-input{
  flex:0 0 auto; float:none; margin:0;
  width:90px; height:32px; border-radius:999px;   /* pill nativo BS5, non rettangolare; 32px (<38) per non risultare tozzo, centrato nel wrapper da 38 */
}
/* scritta interna (stato corrente), lato opposto al knob.
   height resta 38px (= min-height wrapper): il centro verticale coincide col pill da 32px centrato */
.artedit2026 .form-switch::after,
#filtriOffcanvas .form-switch::after{
  content:"No"; position:absolute; left:0; top:0; width:90px; height:38px;
  display:flex; align-items:center; justify-content:flex-end; padding-right:12px;
  font-family:var(--s2026-font-sans); font-size:.74rem; font-weight:700;
  color:var(--s2026-ink-3); white-space:nowrap; pointer-events:none;
}
.artedit2026 .form-switch:has(:checked)::after,
#filtriOffcanvas .form-switch:has(:checked)::after{
  content:"Sì"; justify-content:flex-start; padding-right:0; padding-left:12px; color:#fff;
}
/* etichette speciali come nel vecchio widget */
.artedit2026 .form-switch:has(#web)::after{ content:"NO WEB"; }
.artedit2026 .form-switch:has(#web):has(:checked)::after{ content:"WEB"; }
/* "NO WEB" è l'etichetta OFF più larga (47px): nel pill da 90px il testo arriva a toccare
   il knob a sinistra. Allargo SOLO questo switch così resta un leggero spazio tra cerchio
   e scritta; gli altri switch (label corte) restano a 90px. */
.artedit2026 .form-switch:has(#web) .form-check-input,
.artedit2026 .form-switch:has(#web)::after{ width:104px; }
.artedit2026 .form-switch:has(#tipo_art_moda)::after{ content:"PLUS"; }
.artedit2026 .form-switch:has(#tipo_art_moda):has(:checked)::after{ content:"PADRE"; }
.artedit2026 .form-switch:has(#add_gruppo_per_padre)::after,
.artedit2026 .form-switch:has(#add_colori_std)::after{ content:"NO"; }
.artedit2026 .form-switch:has(#add_gruppo_per_padre):has(:checked)::after,
.artedit2026 .form-switch:has(#add_colori_std):has(:checked)::after{ content:"SI"; }
/* colore ON + focus per i filtri (prima erano widget legacy) — l'edit è già
   tematizzato dalle regole .artedit2026 più su */
#filtriOffcanvas .form-switch .form-check-input:checked{
  background-color:var(--s2026-brand); border-color:var(--s2026-brand);
}
#filtriOffcanvas .form-switch .form-check-input:focus{
  border-color:var(--s2026-brand); box-shadow:0 0 0 2px var(--s2026-brand-tint);
}
[data-theme="dark"] #filtriOffcanvas .form-switch .form-check-input{
  background-color:var(--s2026-bg); border-color:var(--s2026-rule);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(255,255,255,.55)'/></svg>");
}
/* dark + ON: brand anche in scuro. Serve :checked (specificità maggiore) e
   posizione più in basso, altrimenti la regola dark "lato spento" qui sopra
   (pari specificità, senza :checked) vincerebbe pure da attivo. Knob bianco pieno. */
[data-theme="dark"] .artedit2026 .form-switch .form-check-input:checked,
[data-theme="dark"] #filtriOffcanvas .form-switch .form-check-input:checked{
  background-color:var(--s2026-brand); border-color:var(--s2026-brand);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23fff'/></svg>");
}
/* Focus: BS5 dipinge il knob di azzurro (#86b7fe) sullo stato OFF. Lo neutralizzo
   mantenendo il knob del tema (grigio in light, chiaro in dark). Solo :not(:checked):
   da attivo il knob resta bianco delle regole :checked qui sopra. */
.artedit2026 .form-switch .form-check-input:focus:not(:checked),
#filtriOffcanvas .form-switch .form-check-input:focus:not(:checked){
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(0,0,0,.25)'/></svg>");
}
[data-theme="dark"] .artedit2026 .form-switch .form-check-input:focus:not(:checked),
[data-theme="dark"] #filtriOffcanvas .form-switch .form-check-input:focus:not(:checked){
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(255,255,255,.55)'/></svg>");
}
/* Card "Duplica articolo" (__duplica_articolo.html, caricata in #azioni di
   ac_Articolo): stessi switch pill del pannello Filtri, scope proprio. */
#duplica_form .form-check.form-switch{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding-left:0; min-height:0; margin:0;
}
#duplica_form .form-switch .form-check-input{
  flex:0 0 auto; float:none; margin:0;
  width:90px; height:28px; border-radius:999px;
}
#duplica_form .form-switch::after{
  content:"No"; position:absolute; left:0; top:0; width:90px; height:28px;
  display:flex; align-items:center; justify-content:flex-end; padding-right:12px;
  font-family:var(--s2026-font-sans); font-size:.74rem; font-weight:700;
  color:var(--s2026-ink-3); white-space:nowrap; pointer-events:none;
}
#duplica_form .form-switch:has(:checked)::after{
  content:"Sì"; justify-content:flex-start; padding-right:0; padding-left:12px; color:#fff;
}
#duplica_form .form-switch .form-check-input:checked{
  background-color:var(--s2026-brand); border-color:var(--s2026-brand);
}
#duplica_form .form-switch .form-check-input:focus{
  border-color:var(--s2026-brand); box-shadow:0 0 0 2px var(--s2026-brand-tint);
}
[data-theme="dark"] #duplica_form .form-switch .form-check-input{
  background-color:var(--s2026-bg); border-color:var(--s2026-rule);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(255,255,255,.55)'/></svg>");
}
[data-theme="dark"] #duplica_form .form-switch .form-check-input:checked{
  background-color:var(--s2026-brand); border-color:var(--s2026-brand);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23fff'/></svg>");
}
#duplica_form .form-switch .form-check-input:focus:not(:checked){
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(0,0,0,.25)'/></svg>");
}
[data-theme="dark"] #duplica_form .form-switch .form-check-input:focus:not(:checked){
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba(255,255,255,.55)'/></svg>");
}