/* ============================================================
   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;
}

/* Toggle tema: disattiva il cross-fade di default della View Transitions API,
   l'onda circolare la anima SublimaTheme.toggle() via clip-path su root(new). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.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: #fff !important;
  background: var(--s2026-brand) !important;
}
.s2026 .segmented .nav-link.active {
  color: #fff;
  background: var(--s2026-brand);
  border-color: var(--s2026-brand-deep);
  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;
}
/* Bordo inset (chiaro sotto/a destra) delle tab edit di ac_Articolo: viene da
   "#myTab>li>a{border:black;border-style:inset}" in sublima_new.css, che vince
   sulle classi di .segmented per specificità dell'id. Lo stile piace ed è voluto:
   qui lo si riproduce anche sulle tab .segmented senza id "myTab" (es. as_Pos),
   che altrimenti restano col bordo transparent della regola generica sopra. */
.s2026 .segmented:not(#myTab) .nav-link {
  border: thin inset black;
}

/* ---------- 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,
.s2026 #table_operazioni_primanota_container .btn-secondary,
.s2026 #table_pagamenti_container .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,
.s2026 #table_operazioni_primanota_container .btn-secondary:hover,
.s2026 #table_pagamenti_container .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; position: relative; }
.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;
  padding-left: 32px;
}
/* Lente = pseudo-elemento mascherato: chrome neutro (stesso grigio delle
   frecce di sort non attive, --s2026-ink-4), non brand — coerente con la
   policy "chrome neutro" del design system. */
.s2026 #toolbar .search::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  background-color: var(--s2026-ink-4);
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' 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>");
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' 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>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 15px 15px;
  mask-size: 15px 15px;
  pointer-events: none;
  z-index: 3;
}
.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,
.s2026 #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,
.s2026 #filtriOffcanvas .offcanvas-body::-webkit-scrollbar { width: 12px; height: 12px; }
.s2026 .fixed-table-body::-webkit-scrollbar-track,
.s2026 #nav-tabContent::-webkit-scrollbar-track,
.s2026 #filtriOffcanvas .offcanvas-body::-webkit-scrollbar-track { background: var(--s2026-bg-raised); }
.s2026 .fixed-table-body::-webkit-scrollbar-thumb,
.s2026 #nav-tabContent::-webkit-scrollbar-thumb,
.s2026 #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,
.s2026 #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,
.s2026 #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; }
/* Bottone "+" componenti/kit-moda (componenti_riga): unica eccezione al flat puro qui sopra,
   segnala l'azione di espandere i componenti della riga padre — sfondo tenue + glifo pieno
   per distinguerlo dagli altri glifi sottili edit/elimina/lavorazione. */
.s2026 .fixed-table-body td .btn-warning.componenti_riga {
  background: var(--s2026-warning-bg) !important;
  border-radius: var(--s2026-radius-sm);
  font-weight: 700;
}
.s2026 .fixed-table-body td .btn-warning.componenti_riga i { -webkit-text-stroke: 0.4px currentColor; }
.s2026 .fixed-table-body td .btn-warning.componenti_riga:hover { background: var(--s2026-warning) !important; color: #fff !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); }
/* Colonna SALDATO: stesso trattamento flat delle icone azione, solo un filo più
   marcato (font-weight) per restare leggibile come indicatore di stato. */
.s2026 .fixed-table-body td .btn.saldato-pill {
  font-weight: 700;
}
/* 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; }

/* ============================================================================
   VISTA CARD — bottone toggle di bootstrap-table (name="toggle")
   Vale per OGNI tabella dentro .s2026: nessun selettore è legato a una pagina o
   a un campo specifico.

   Markup generato dalla libreria (bootstrap-table.js, cardView):
     <tr><td colspan="N"><div class="card-views">
       <div class="card-view"><span class="card-view-title">Label</span>
                              <span class="card-view-value">valore</span></div> …
     </div></td></tr>
   La classe .has-card-view la mette la libreria sul .fixed-table-container.

   Il tbody diventa una griglia: ogni <tr> è una card. I campi con trattamento
   speciale (immagine / badge / azioni) sono riconosciuti per CONTENUTO via :has(),
   mai per posizione: l'ordine e la visibilità delle colonne cambiano per tenant
   (pageData["syb"]) e da tabella a tabella.

   NOTA SPECIFICITÀ: bootstrap-table.css ha
   `.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title`
   = (0,5,2). I selettori qui sotto includono `table.table > tbody > tr` per
   superarla senza ricorrere a !important.
   ============================================================================ */
/* bootstrap-table.min.css: ".bootstrap-table .fixed-table-container.fixed-height
   .has-card-view{border-top/bottom:1px solid #dee2e6}" (fisso, non tema-aware) —
   in vista card diventa una riga chiara sopra/sotto l'elenco, visibile come
   linea bianca sul fondo scuro della card-view. Le card hanno gia' il loro
   bordo (table.table > tbody > tr sopra), il contenitore non ne ha bisogno.
   Serve pari specificita' (4 classi) per batterla senza !important. */
.s2026 .bootstrap-table .fixed-table-container.fixed-height.has-card-view {
  border-top: none;
  border-bottom: none;
}
.s2026 .fixed-table-container.has-card-view table.table > tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px;
  padding: 4px;
}
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr {
  display: flex;
  flex-direction: column;
  /* !important: sublima_new.css ha `.has-card-view #tabble tr:nth-child(2n+1)`,
     un selettore con ID che batte qualunque combinazione di classi qui sopra
     (zebrato bianco residuo sulle righe dispari, sia in light che in dark). */
  background: var(--s2026-bg-panel) !important;
  border: 1px solid var(--s2026-rule-strong);
  border-radius: var(--s2026-radius-lg);
  box-shadow: var(--s2026-shadow-card);
  overflow: hidden;
  transition: var(--s2026-transition);
}
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr:hover {
  border-color: var(--s2026-brand);
  box-shadow: var(--s2026-shadow-raised, var(--s2026-shadow-card));
}
/* riga selezionata: barra brand a sinistra come nella vista tabella */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr.selected { border-color: var(--s2026-brand); }
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr.is-deleted { border-color: var(--s2026-danger); }
/* la riga "nessun risultato" non è un record: occupa tutta la griglia, niente look da card */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr.no-records-found {
  grid-column: 1 / -1;
  border: 0;
  box-shadow: none;
  background: none;
}
/* colonna flex: il corpo (.card-views) è flex:1 e spinge la barra azioni — che
   SublimaUI sposta qui come fratello — sul fondo della card */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr > td {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border: 0 !important;
  padding: 0;
  width: 100%;
}

/* Corpo: due campi per riga. I campi che devono stare su tutta la riga (titolo,
   azioni) lo dichiarano con grid-column: 1 / -1; tutti gli altri si auto-dispongono
   a coppie. Perché le coppie restino leggibili la card deve essere larga: vedi il
   minmax del tbody qui sopra — con card strette il valore finiva troncato
   dall'ellissi ("DENOMINAZIONE A."). */
.s2026 .fixed-table-container.has-card-view .card-views {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 10px;
  align-content: start;
  flex: 1;
  padding: 8px 10px;
  height: auto;
  overflow: visible;
  background: transparent;
  /* sublima_new.css mette su .card-views un bordo+radius+margin-top propri
     (era pensato per stare da solo, senza footer azioni): dentro la card unica
     .s2026 crea l'effetto "card dentro la card". Il bordo/ombra li dà già il
     <tr> (vedi sopra). */
  border: none;
  border-radius: 0;
  margin-top: 0;
}
/* Campo: label sopra, valore sotto. In colonna il valore dispone di tutta la
   larghezza della cella (~145px), mentre con la label inline gliene restavano ~70
   e finiva sempre in ellissi. */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 3px 0;
  font-size: var(--s2026-fs-sm);
  line-height: 1.3;
  height: auto;
  background: none;
}
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:empty { display: none; }
/* micro-label: sopra il valore, tono attenuato */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view .card-view-title {
  display: block;
  min-width: 0;
  width: auto !important;
  font-size: 9px;
  font-weight: 700;
  color: var(--s2026-ink-4, var(--s2026-ink-3));
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* valore su una riga sola con ellissi: è ciò che rende l'altezza della card prevedibile */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view .card-view-value {
  min-width: 0;
  width: auto !important;
  color: var(--s2026-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Immagine → prima cella in alto a sinistra, label muta ---
   Nessuno span di righe: la thumb è una cella come le altre, così accanto le si
   affianca il primo campo (di norma il badge di stato) e sotto non resta la
   colonna da 56px vuota. */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(img) {
  order: -3;
  align-items: start;
  justify-content: flex-start;
  padding: 0 0 2px;
}
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(img) .card-view-title { display: none; }
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(img) .card-view-value { overflow: visible; }
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(img) img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--s2026-bg-raised);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius);
}

/* --- Titolo del record → nessuna label, testo grande, 2 righe max ---
   data-field lo espone SublimaUI (sublima2026_ui.js, handler post-body.bs.table):
   la libreria non lo emette sulle .card-view. I nomi qui sotto sono le convenzioni
   di naming delle anagrafiche Sublima — una tabella che non ne usa nessuno resta
   leggibile lo stesso, semplicemente senza titolo in evidenza. Match ESATTO: i vari
   denominazione_breve_categoria/_reparto/_famiglia non devono diventare titoli. */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view[data-field="denominazione"],
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view[data-field="ragione_sociale"],
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view[data-field="descrizione"] {
  order: -1;
  grid-column: 1 / -1;                     /* il titolo prende tutta la riga, non va in coppia */
  padding-bottom: 4px;
}
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view[data-field="denominazione"] .card-view-title,
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view[data-field="ragione_sociale"] .card-view-title,
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view[data-field="descrizione"] .card-view-title { display: none; }
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view[data-field="denominazione"] .card-view-value,
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view[data-field="ragione_sociale"] .card-view-value,
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view[data-field="descrizione"] .card-view-value {
  display: -webkit-box;
  -webkit-line-clamp: 2;                 /* niente ellissi a 1 riga: il titolo va letto */
  -webkit-box-orient: vertical;
  white-space: normal;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--s2026-ink);
}

/* --- Codice → sotto il titolo, mono, tono secondario, senza label --- */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.code-mono) { order: 0; }
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.code-mono) .card-view-title { display: none; }
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.code-mono) .code-mono { color: var(--s2026-ink-3); }

/* --- Badge stato/categoria → riga pill sotto l'immagine, senza label --- */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.c-status-badge),
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.c-cat-badge) {
  order: -2;
  flex-direction: row;                     /* il campo base è in colonna: i pill vanno in riga */
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
}
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.c-status-badge) .card-view-title,
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.c-cat-badge) .card-view-title { display: none; }

/* --- Azioni → footer ancorato in fondo, allineate a destra --- */
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.btn),
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.btn-group) {
  order: 99;
  flex-direction: row;                     /* il campo base è in colonna: qui serve la riga */
  justify-content: flex-end;
  align-items: center;
  margin: 0;                               /* fratello di .card-views, non più dentro il suo padding */
  padding: 6px 10px;
  border-top: 1px solid var(--s2026-rule);
  background: var(--s2026-bg-raised);
}
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.btn) .card-view-title,
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.btn-group) .card-view-title { display: none; }
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.btn) .card-view-value,
.s2026 .fixed-table-container.has-card-view table.table > tbody > tr .card-view:has(.btn-group) .card-view-value { overflow: visible; }
/* (griglia a colonna singola su mobile: vedi sublima2026_responsive.css) */

.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;
}
/* bootstrap-table.min.css ".bootstrap-table .fixed-table-container.fixed-height
   .table thead th" ha 4 classi contro le 2 della regola sopra: vince lui e impone
   il suo border-bottom chiaro (#dee2e6) anche in dark, ridando la linea bianca
   sotto l'header che la regola sopra dovrebbe già eliminare. Stessa specificità
   del selettore bootstrap-table per riprendere il controllo. */
.s2026 .bootstrap-table .fixed-table-container.fixed-height .table thead th {
  border-bottom: 1px solid var(--s2026-rule-strong);
}
/* bootstrap-table.min.css ".fixed-table-container.fixed-height:not(.has-footer)" mette un
   border-bottom: 1px solid #dee2e6 sul CONTENITORE stesso (non sulle celle) → stessa linea
   bianca in fondo alla tabella quando non c'è footer (es. tabelle in modale). */
.s2026 .bootstrap-table .fixed-table-container.fixed-height:not(.has-footer) {
  border-bottom: 1px solid var(--s2026-rule-strong);
}
/* Il label interno deve ereditare il colore del th (no bianco su chiaro) */
.s2026 table.table > thead th .header_label { color: inherit; }
/* Footer bootstrap-table (riga TOTALE): il markup clona in .fixed-table-footer una
   <table class="table"> propria (fitFooter copia le classi da $el), quindi eredita già
   lo sfondo dell'header sopra. Restano però i bordi default Bootstrap (--bs-table-border-color,
   chiaro/bianco) su tutti e 4 i lati di ogni th → griglia di linee bianche ben visibile sul
   fondo scuro. Le azzero tutte tranne un unico bottom-rule, stesso trattamento dell'header. */
.s2026 .fixed-table-footer table.table > thead th {
  border: 0;
  border-bottom: 1px solid var(--s2026-rule-strong);
}
[data-theme="dark"] .s2026 .fixed-table-footer table.table > thead th {
  border-bottom-color: var(--s2026-rule);
}
/* 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/#table_row (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,
.s2026 #table_row > tbody > tr:not(.detail-view) > td .detail-icon,
.s2026 #table_row > tbody > tr:not(.detail-view) > td .detail-icon i,
.s2026 #table_row > tbody > tr:not(.detail-view) > td .detail-icon:hover,
.s2026 #table_row > tbody > tr:not(.detail-view) > td .detail-icon:hover i,
.s2026 #table_row > tbody > tr:not(.detail-view) > td .detail-icon:focus,
.s2026 #table_row > tbody > tr:not(.detail-view) > td .detail-icon:focus i,
.s2026 #tabble_inventario > tbody > tr:not(.detail-view) > td .detail-icon,
.s2026 #tabble_inventario > tbody > tr:not(.detail-view) > td .detail-icon i,
.s2026 #tabble_inventario > tbody > tr:not(.detail-view) > td .detail-icon:hover,
.s2026 #tabble_inventario > tbody > tr:not(.detail-view) > td .detail-icon:hover i,
.s2026 #tabble_inventario > tbody > tr:not(.detail-view) > td .detail-icon:focus,
.s2026 #tabble_inventario > 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-right-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);
  border-bottom-color: 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); }
/* Bootstrap .table-warning è fisso su sfondo chiaro (#fcf8e3): in dark resta una riga
   crema in mezzo a righe scure. La rimappiamo sui token tema, in tono neutro
   (non è uno stato di allerta, solo una riga da evidenziare). */
.s2026 table.table > tbody > tr.table-warning > * {
  background: var(--s2026-neutral-bg) !important;
  color: var(--s2026-neutral-fg) !important;
  border-color: var(--s2026-rule) !important;
}
.s2026 table.table-hover > tbody > tr.table-warning:hover > * {
  background: var(--s2026-neutral-bg) !important;
  color: var(--s2026-neutral-fg) !important;
  border-color: var(--s2026-rule) !important;
}
/* 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); }
/* Pastiglie a lettera singola (B/S = bene o servizio, F = fiscale). Il nowrap sul
   contenitore e' obbligatorio: la colonna N° e' data-width="1%", quindi larga
   quanto il numero, e senza le due lettere finiscono una sotto l'altra. */
.s2026 .c-row-tipi { display: inline-flex; gap: 3px; white-space: nowrap; }
.s2026 .c-row-badge--lettera { min-width: 15px; padding: 1px 3px; text-align: center; }
.s2026 .c-row-badge--bene     { background: var(--s2026-neutral); }
.s2026 .c-row-badge--servizio { background: var(--s2026-info); }
.s2026 .c-row-badge--fisc     { background: var(--s2026-success); }
.s2026 .c-row-badge--nofisc   { background: var(--s2026-danger); }

/* 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;
}

/* 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;
}
/* sublima_new.css:696 (@media max-width:992px, pensata per il menu navbar mobile)
   forza ".dropdown-menu{position:static!important; width:100%}" per TUTTI i
   dropdown del sito: sotto i 992px il menu "Azioni" (Popper, position:absolute)
   finisce nel flusso normale dentro il suo .btn-group (position:relative),
   gonfiandone l'altezza e sovrapponendosi alla toolbar sottostante. Ripristinato
   il posizionamento assoluto standard BS5. */
.s2026 .dropdown-menu {
  position: absolute !important;
  width: auto !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; }

/* ---------- Riga di campi di un .fk-panel: altezze uniformi ----------
   Nel pannello Price Tags i quattro campi (Select2, input number, Select2,
   bootstrapSwitch) nascevano con quattro altezze diverse e attaccati fra loro:
   ogni widget porta la propria. Qui li si porta tutti a 38px, l'altezza dei
   campi s2026, e si allinea in verticale la riga. Ambito ristretto a .pt-camp
   per non toccare i pannelli filtri esistenti. */
.s2026 .fk-panel .pt-camp > [class*="col-"] { display: flex; flex-direction: column; }
.s2026 .fk-panel .pt-camp .form-control,
.s2026 .fk-panel .pt-camp .form-select { height: 38px; }
/* Select2 (tema bootstrap4): il container si dimensiona da solo e resta piu' basso */
.s2026 .fk-panel .pt-camp .select2-container .select2-selection--single { height: 38px; }
.s2026 .fk-panel .pt-camp .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
}
.s2026 .fk-panel .pt-camp .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { height: 36px; }
/* il widget legacy bootstrapSwitch: stessa altezza degli altri campi, e niente
   fascia bianca residua a destra (la larghezza la decide l'etichetta piu' lunga) */
.s2026 .fk-panel .pt-campo-switch { display: flex; align-items: center; min-height: 38px; }
.s2026 .fk-panel .pt-campo-switch .bootstrap-switch { margin: 0; }
.s2026 .fk-panel .pt-campo-switch .bootstrap-switch,
.s2026 .fk-panel .pt-campo-switch .bootstrap-switch .bootstrap-switch-container,
.s2026 .fk-panel .pt-campo-switch .bootstrap-switch .bootstrap-switch-handle-on,
.s2026 .fk-panel .pt-campo-switch .bootstrap-switch .bootstrap-switch-handle-off,
.s2026 .fk-panel .pt-campo-switch .bootstrap-switch .bootstrap-switch-label {
  height: 38px; line-height: 26px;
}
/* il testo di aiuto sotto ai campi si appoggia in fondo, cosi' i bordi inferiori
   delle colonne restano allineati anche quando una nota va a capo */
.s2026 .fk-panel .pt-camp .form-text { margin-top: auto; padding-top: 4px; }
.s2026 #fk_form .control-label,
.s2026 .field__label {
  display: block;
  font-size: var(--s2026-fs-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--s2026-ink-2);
  margin-bottom: 3px;
}
.s2026 .form-control,
.s2026 .form-select {
  border: 1px solid var(--s2026-rule-strong);
  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-strong);
  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);
}
/* min-height in calc(1.5em + ...) del tema resta sotto ai 38px standard di
   input/select del progetto -> il multiselect nasce visibilmente piu' basso
   quando e' vuoto. Altezza fissa qui, non piu' legata al font-size. */
.s2026 .select2-container--bootstrap-5 .select2-selection,
.s2026 .select2-container--bootstrap-5 .select2-selection--multiple {
  min-height: 38px;
}
/* Single del #toolbar (es. il magazzino di fatture emesse): col min-height qui
   sopra il tema lascia il valore incollato in alto, disallineato rispetto agli
   altri controlli della barra. Centrato in verticale, non allungato. */
.s2026 #toolbar .select2-container--bootstrap-5 .select2-selection--single {
  display: flex;
  align-items: center;
}
.s2026 #toolbar .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  line-height: 1.2;
}
/* Il "tag" scelto porta il padding/font-size di default del tema (~30px da solo),
   che sfonda i 38px del contenitore anche con un solo valore dentro. Riducendolo
   il tag torna a stare su una riga sola dentro i 38px; se il testo e' troppo
   lungo per starci va comunque a capo (min-height, non height fissa). */
.s2026 .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  padding: 2px 8px;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* ---------- 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-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--s2026-ink-2);
  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,
.s2026 #guidaOffcanvas .offcanvas-header {
  background: var(--s2026-bg-raised);
  color: var(--s2026-ink);
  border-bottom: 1px solid var(--s2026-rule);
}
.s2026 #filtriOffcanvas .offcanvas-title,
.s2026 #guidaOffcanvas .offcanvas-title { color: var(--s2026-ink); font-size: var(--s2026-fs-md); font-weight: 700; }
.s2026 #filtriOffcanvas .offcanvas-title .bi,
.s2026 #guidaOffcanvas .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).
   Vale anche per la modale di anteprima (.s2026-preview-modal), che prima teneva il
   btn-close nero di BS5 schiarito in dark da un filter:invert (ora rimosso). */
.s2026 #filtriOffcanvas .btn-close,
.s2026 #guidaOffcanvas .btn-close,
.s2026 .s2026-preview-modal .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,
.s2026 #guidaOffcanvas .btn-close:hover,
.s2026 .s2026-preview-modal .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: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--s2026-ink-2); 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; }

/* dark: la card .dropdown-menu del widget viene già scurita dalla regola generica
   sopra, ma la toolbar today/pulisci/chiudi (.picker-switch) e gli stati di
   hover/giorni-adiacenti/disabilitati del plugin restano coi colori chiari
   hardcoded (bootstrap-datetimepicker.css) → riga bianca sotto il calendario. */
.s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget .picker-switch,
.s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget .picker-switch table,
.s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget .picker-switch td,
.s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget .picker-switch a {
  background: transparent;
}
/* Il plugin dimensiona le icone della toolbar (oggi/pulisci/chiudi) come le celle
   ora/minuti (regola generica "table td span{width:54px;height:54px}"): qui le
   restringo alla dimensione dell'icona, sovrascrivendo anche l'hover chiaro
   hardcoded (#eceeef, invisibile in dark) con un token del tema. */
.s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget .picker-switch table td span {
  width: 32px; height: 32px; line-height: 32px; margin: 0 auto;
}
.s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget .picker-switch table td:hover,
.s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget .picker-switch table td span:hover {
  background: var(--s2026-bg-panel);
}
[data-theme="dark"] .s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget .picker-switch a {
  color: var(--s2026-ink);
}
[data-theme="dark"] .s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget table td.day:hover {
  background: var(--s2026-bg-panel);
}
[data-theme="dark"] .s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget table td.old,
[data-theme="dark"] .s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget table td.new,
[data-theme="dark"] .s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget table td.disabled,
[data-theme="dark"] .s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget table td.disabled:hover {
  color: var(--s2026-ink-3);
}
[data-theme="dark"] .s2026 #filtriOffcanvas .bootstrap-datetimepicker-widget table th:hover {
  background: var(--s2026-bg-panel);
}

/* 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 sotto 992px, modale grande sopra — 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); }
/* Sotto lg (992px) l'anteprima è a tutto schermo: nella fascia 768-992 Bootstrap
   terrebbe il dialog a 500px e la scheda si strizza. Il markup ha già
   .modal-fullscreen-lg-down, ma sublima_new.css è caricato DOPO bootstrap e a
   parità di specificità rimette width/margin su .modal-lg (#scontrinoModal):
   qui riaffermiamo il fullscreen con 0,2,0.
   Agganciate alla classe fullscreen e non al widget: #noteModal in
   ac_StoricoScontrino riusa .s2026-preview-modal ma resta volutamente piccola. */
@media (max-width: 991.98px) {
  .s2026-preview-modal .modal-fullscreen-lg-down { width: 100vw; max-width: none; height: 100%; margin: 0; }
  .s2026-preview-modal .modal-fullscreen-lg-down .modal-content { height: 100%; border: 0; border-radius: 0; }
}
/* Sopra lg torna "a finestra": stesso override di .modal-lg da neutralizzare,
   altrimenti la modale nasce larga tutto e appoggiata a sinistra. */
@media (min-width: 992px) {
  .s2026-preview-modal .modal-fullscreen-lg-down { width: auto; margin: 1.75rem 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;
}

/* Stessa uniformità anche in light (di norma non serve: #f8f9fa vs --s2026-bg
   #F6F7F9 sono 2 unità per canale, invisibili). Ma su pagine .s2026 più corte
   della viewport (es. un form singolo dentro un pannello a tutta altezza) sotto
   al wrapper resta nudo il <body> bianco, ben visibile contro il grigio: stessa
   ricetta del dark, stesso !important (batte l'inline style di .page-wrapper). */
html:has(.s2026), html:has(.artedit2026),
body:has(.s2026), body:has(.artedit2026),
.page-wrapper:has(.s2026), .page-wrapper:has(.artedit2026){
  background: var(--s2026-bg) !important;
}

/* 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; }
/* Select disabled (es. Magazzino bloccato in ac_Stoccaggio quando si entra dalla
   scheda di un magazzino): il tema bootstrap-5 ha una regola dedicata
   (.select2-container--bootstrap-5.select2-container--disabled .select2-selection
   {background-color:#e9ecef}) a parita' di specificita' con quella sopra -> a
   parita' vince l'ordine nel foglio, e restava un riquadro chiaro nel form scuro. */
[data-theme="dark"] .s2026 .select2-container--disabled .select2-selection{
  background: var(--s2026-bg-input) !important; color: var(--s2026-ink-3) !important; border-color: var(--s2026-rule) !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;
}
/* Bordo finestra risultati select2 = brand (il tema bootstrap-5 usa il blu nativo
   #86b7fe); mount sia dentro .s2026 (dropdownParent esplicito) sia su <body>
   (default Select2, pagine .artedit2026) — stesso doppio selettore delle altre
   regole select2 qui sopra/sotto. */
.s2026 .select2-dropdown,
html:has(.artedit2026) .select2-container--bootstrap-5 .select2-dropdown,
html:has(.s2026) .select2-container--bootstrap-5 .select2-dropdown{
  border-color: var(--s2026-brand) !important;
}
[data-theme="dark"] .s2026 .select2-dropdown{
  background: var(--s2026-bg-panel); border-color: var(--s2026-brand); 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; }
/* guidaOffcanvas (cu_Inventario): stesso trattamento di filtriOffcanvas, BS 5.1.1 non ha
   --bs-offcanvas-bg nativa → senza override resta bg bianco hardcoded in dark. */
[data-theme="dark"] .s2026 #guidaOffcanvas{
  --bs-offcanvas-bg: var(--s2026-bg-panel); --bs-offcanvas-color: var(--s2026-ink);
  background: var(--s2026-bg-panel); color: var(--s2026-ink);
}
[data-theme="dark"] .s2026 #guidaOffcanvas .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 → versione scura.
   La lente (::before) è già neutra e risolve il grigio giusto per tema via
   --s2026-ink-4, nessun override necessario qui. */
[data-theme="dark"] .s2026 #toolbar .search .search-input{
  background-color: var(--s2026-bg-input);
  color: var(--s2026-ink);
  border-color: var(--s2026-rule-strong);
}

/* 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,
   fornitura, fornitura_lotto, anagraficasecondaria,
   emailstore, cms_preview) portano ancora la PROPRIA copia di queste regole inline.
   (listino_articolo migrato 2026-08-04, testatacart migrato 2026-08-27: nessuno
   <style> locale del blocco condiviso, usano questo blocco.)
   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-listino-tag { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:600; background:var(--s2026-brand-tint); color:var(--s2026-brand-text); border:1px solid var(--s2026-rule); flex-shrink:0; }
.art-toolbar .art-listino-tag i { font-size:13px; }
.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; }
/* L'anteprima è dentro #nav-tabContent, dove ".s2026 #nav-tabContent .row" azzera
   --bs-gutter-x (edge-to-edge per la bootstrap-table). Le card affiancate (col-lg-6
   + col-lg-6, anagrafica + immagine) restavano così "attaccate" in orizzontale:
   ripristina il gutter g-3 solo per le row dell'anteprima (specificità più alta). */
.s2026 #nav-tabContent .art-shell .row.g-3 { --bs-gutter-x: 1rem; }
/* 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:12px; }
/* … 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, meno del
   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; }
/* Row di card affiancate (es. ae_categoriaArticolo: .tab-pane > .row > .col-lg-* >
   card). Qui NON basta alzare --bs-gutter-x: la regola
   ".s2026 .tab-content .tab-pane > .row > [class*=col-]" azzera padding-left/right
   delle colonne, quindi il gutter non produce nessuno spazio e le card si toccano.
   Il gap va quindi dato come padding sulla colonna successiva; serve !important
   perche' .s2026 e .artedit2026 stanno sullo STESSO elemento (la ae-shell), quindi
   un selettore discendente non li puo' incatenare per pareggiare la specificita'.
   Le colonne diventano flex-column cosi' le card della riga hanno la stessa altezza. */
.artedit2026 .row.artedit2026-row--cards { align-items: stretch; }
.artedit2026 .row.artedit2026-row--cards > [class*="col-"] { display: flex; flex-direction: column; }
.artedit2026 .row.artedit2026-row--cards > [class*="col-"] > .artedit2026-card { flex: 1 1 auto; }
.artedit2026 .row.artedit2026-row--cards > [class*="col-"] + [class*="col-"] { padding-left: 12px !important; }

.art-card-header, .artedit2026 .artedit2026-card__head { padding:6px 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; }
/* Head accentata — distingue card sorelle nella stessa riga (es. Partenza vs
   Destinazione in __pre_trasmissione) senza cambiarne la forma: barra a sinistra,
   titolo e icona a colore, fondo appena tinto. Il colore arriva da --acc, cosi'
   basta una classe per tutte le tinte: style="--acc:var(--s2026-success)".
   Selettore .s2026.artedit2026 (classi sullo STESSO elemento, non discendenti —
   vedi nota a :1738): serve a pareggiare la specificita' della regola dark di
   .artedit2026-card__head, che essendo piu' avanti nel file vincerebbe sul colore. */
.s2026.artedit2026 .artedit2026-card__head--accent{
    border-left:3px solid var(--acc, var(--s2026-brand));
    color:var(--acc, var(--s2026-brand));
    background:linear-gradient(180deg, color-mix(in srgb, var(--acc, var(--s2026-brand)) 8%, var(--s2026-bg-raised)), var(--s2026-rule-2));
}
.s2026.artedit2026 .artedit2026-card__head--accent i{ color:var(--acc, var(--s2026-brand)); }
.art-card-body, .artedit2026 .artedit2026-card__body { padding:8px; }
.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; }
.art-dl dd.accent { color:var(--s2026-brand-text); font-weight:700; font-size:15px; }

/* 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; }
/* Segno movimento (stoccaggio.html, movimento.html): + verde successo, - blu info
   (un'uscita non e' un errore, non e' danger). Token theme-agnostici. */
table.art-table .qty-pos { color:var(--s2026-success); font-weight:700; }
table.art-table .qty-neg { color:var(--s2026-info); font-weight:700; }
/* Link doc/movimento (stoccaggio.html): <a> senza href, serve il cursore esplicito */
table.art-table .docudocu, table.art-table .movmov { cursor:pointer; }

/* 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 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 */
/* --art-burgundy passa dal token di brand (per-tenant via ex_color): il valore fisso
   #D44A60 teneva l'anteprima bordeaux anche su aziende con un altro brand, e vinceva
   sul var(--s2026-brand) messo in cms_preview.html. In dark il --art-burgundy resta
   usato solo per SFONDI (la pill e la barretta .art-kpi::before): .art-denom e
   .art-card-header sono gia' riscritti a ink piu' sotto in questo stesso blocco.
   Percio' serve il tono pieno --s2026-brand-deep, non --s2026-brand che in dark e'
   una tinta chiara e lascerebbe il testo bianco della pill illeggibile. */
[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:var(--s2026-brand-deep, #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 .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; }
/* Checkbox semplici (non-switch) ingrandite per coerenza col resto dei controlli s2026:
   il default BS5 (1em) e' minuscolo accanto a switch/select da 32-38px. */
.artedit2026 .form-check:not(.form-switch) .form-check-input[type="checkbox"],
.artedit2026 .form-check:not(.form-switch) .form-check-input[type="radio"]{
    width:1.35em; height:1.35em; margin-top:0.15em;
}
.artedit2026 .form-check:not(.form-switch) .form-check-label{ padding-top:0.1em; }
/* 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:5px 6px;
    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;
}
/* Editor ACE (#corpo, ae_escposstore) in dark mode. I temi ACE (ace/theme/*)
   non sono scaricabili: sul server manca tpl/assets/js/ajax/theme-*.js, esiste
   solo il core ace1.32.7.js. Farli dipendere da un fetch che 404 silenziosamente
   e' fragile: si sovrascrive direttamente il tema di default (chiaro) via CSS
   scoped, stessa strategia gia' usata per il resto della pagina. */
[data-theme="dark"] .artedit2026 .ace_editor{
    background:var(--s2026-bg-input, #1e222a); color:var(--s2026-ink, #e3e7ee);
}
[data-theme="dark"] .artedit2026 .ace_gutter{
    background:var(--s2026-bg-raised, #2b303a); color:var(--s2026-ink-3, #7b8392);
}
[data-theme="dark"] .artedit2026 .ace_gutter-active-line{ background:var(--s2026-bg-row-hover, #3a2830); }
[data-theme="dark"] .artedit2026 .ace_marker-layer .ace_active-line{ background:var(--s2026-bg-raised, #2b303a); }
[data-theme="dark"] .artedit2026 .ace_cursor{ border-left-color:var(--s2026-ink, #e3e7ee); }
[data-theme="dark"] .artedit2026 .ace_print-margin{ background:var(--s2026-rule, #3c4250); }
[data-theme="dark"] .artedit2026 .ace_marker-layer .ace_selection{ background:var(--s2026-bg-row-sel, #4a333c); }
[data-theme="dark"] .artedit2026 .ace_indent-guide{ background:none; border-right:1px dotted var(--s2026-rule, #3c4250); }
/* Sintassi: le tinte del tema chiaro (blu/verde scuri) restano leggibili su
   fondo scuro tranne i commenti e le stringhe, troppo simili all'ink. */
[data-theme="dark"] .artedit2026 .ace_comment{ color:var(--s2026-ink-3, #7b8392); }
[data-theme="dark"] .artedit2026 .ace_string{ color:var(--s2026-success-fg, #7ce5a6); }
[data-theme="dark"] .artedit2026 .ace_keyword,
[data-theme="dark"] .artedit2026 .ace_meta.ace_tag{ color:var(--s2026-info-fg, #a6ccff); }
/* 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:11.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-2) !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:var(--s2026-fs-md); border:1px solid var(--s2026-rule-strong); border-radius:6px; color:var(--s2026-ink);
}
/* Select alla stessa misura degli input. select2 rende markup proprio e non
   eredita da .form-control: senza questa regola resterebbe alla misura del
   body (12px) e nella stessa riga Provincia/Regione risulterebbero piu' piccoli
   di Localita' e CAP. Vale per entrambi i temi (bootstrap4 e bootstrap-5). */
.artedit2026 .form-select,
.artedit2026 .select2-container .select2-selection__rendered{
    font-size:var(--s2026-fs-md);
}
/* Campo "titolo" della scheda (denominazione articolo): alla misura degli altri
   campi il dato piu' importante non si distingue. Specificita' (0,3,0) → batte sia
   il font-size qui sopra sia il min-height:38px piu' in basso. */
.artedit2026 .form-control.artedit2026-input--lead{
    font-size:18px; font-weight:600; letter-spacing:.2px; min-height:46px; padding:6px 12px;
}
/* Campi non modificabili (readonly/disabled): ".s2026 .form-control/.form-select" più sotto
   forza sempre background:var(--s2026-bg-input) (stesso di un campo attivo) senza escludere
   :disabled/[readonly] → lo stile nativo del browser (sfondo grigiastro) spariva e i campi
   risultavano indistinguibili. Qui ripristino un aspetto "disabilitato" (sfondo/testo attenuati,
   cursor not-allowed) + icona lucchetto inline, colore fisso identico in light/dark. */
.artedit2026 .form-control[readonly],
.artedit2026 .form-control:disabled,
.artedit2026 .form-select:disabled{
    background-color:var(--s2026-bg-raised) !important;
    color:var(--s2026-ink-3) !important;
    cursor:not-allowed;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238B1538'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:14px 14px;
    padding-right:32px;
}
/* Il .form-select con input-group (rotellina accanto) ha già l'icona vicino al bordo destro
   del campo: nessun conflitto perché la rotellina è un elemento separato fuori dall'input. */
.artedit2026 .select2-container--disabled .select2-selection{
    background-color:var(--s2026-bg-raised) !important;
    color:var(--s2026-ink-3) !important;
    cursor:not-allowed !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238B1538'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 28px center !important;
    background-size:14px 14px !important;
}
/* 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,
.s2026 #filtriOffcanvas .form-control,
.s2026 #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-strong)!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;
}
[data-theme="dark"] .artedit2026 .form-control-plaintext{
    color:var(--s2026-ink)!important;
}
/* Le regole dark sopra usano "background" (shorthand) con !important → azzerano sia il colore
   "disabilitato" sia il background-image del lucchetto per .form-control[readonly]/.form-select:disabled.
   Riapplicati qui, dopo, per vincere la cascata: sfondo bg-raised (diverso da bg-input dei
   campi attivi, come lo stile nativo browser) + testo attenuato + icona. */
[data-theme="dark"] .artedit2026 .form-control[readonly],
[data-theme="dark"] .artedit2026 .form-control:disabled,
[data-theme="dark"] .artedit2026 .form-select:disabled{
    background-color:var(--s2026-bg-raised) !important;
    color:var(--s2026-ink-3) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238B1538'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 10px center !important;
    background-size:14px 14px !important;
}
/* Stessa cosa per le select2 in sola lettura. sublima_new.css ha
   "select[readonly].select2-hidden-accessible + .select2-container .select2-selection
   { background:#eee }" (0,4,1): un grigio chiaro fisso che in dark diventa un rettangolo
   bianco col testo chiaro sopra = illeggibile (visto su ae_operazione, i campi bloccati
   delle operazioni "core"). Il prefisso .s2026/.artedit2026 porta la specificità a 0,5,1
   e allinea l'aspetto a quello di .form-control[readonly] qui sopra. */
.s2026 select[readonly].select2-hidden-accessible + .select2-container .select2-selection,
.artedit2026 select[readonly].select2-hidden-accessible + .select2-container .select2-selection{
    background-color:var(--s2026-bg-raised);
    /* stesso lucchetto di .form-control[readonly], AL POSTO della freccia del dropdown
       (che su un campo bloccato non apre nulla): il tema select2 la disegna come
       background-image sulla .select2-selection--single, quindi va sovrascritta qui. */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238B1538'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:14px 14px;
    border-color:var(--s2026-rule);
    cursor:not-allowed;
}
.s2026 select[readonly].select2-hidden-accessible + .select2-container .select2-selection__rendered,
.artedit2026 select[readonly].select2-hidden-accessible + .select2-container .select2-selection__rendered{
    color:var(--s2026-ink-3);
}

/* input[type=file]: il pulsante nativo "Scegli file" è un pseudo-elemento a parte,
   non colorato dal background dello shorthand .form-control sopra → restava bianco. */
[data-theme="dark"] .artedit2026 .form-control[type="file"]::file-selector-button,
[data-theme="dark"] .artedit2026 .form-control[type="file"]::-webkit-file-upload-button{
    background:var(--s2026-bg-raised); color:var(--s2026-ink); border:1px solid var(--s2026-rule-strong);
}
[data-theme="dark"] .artedit2026 .form-control[type="file"]::file-selector-button:hover,
[data-theme="dark"] .artedit2026 .form-control[type="file"]::-webkit-file-upload-button:hover{
    background:var(--s2026-bg-panel);
}
/* Progress bar (Magic Import): BS5 .progress ha traccia grigio chiaro fissa (#e9ecef)
   → resta chiara anche in dark. Traccia sui token; il riempimento resta brand. */
[data-theme="dark"] .artedit2026 .progress{
    background-color:var(--s2026-bg-raised);
}
[data-theme="dark"] .artedit2026 .progress-bar{
    background-color:var(--s2026-brand); color:var(--s2026-brand-fg);
}

/* ---------- 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; }
/* Select disabled (es. causale/tipologia quando lo scontrino è readonly): il tema
   bootstrap-5 ha una regola dedicata (.select2-container--bootstrap-5.select2-container--disabled
   .select2-selection{background-color:#e9ecef}) a parità di specificità con quella sopra →
   a parità vince l'ordine nel foglio, e restava un riquadro chiaro nel form scuro. !important. */
[data-theme="dark"] .artedit2026 .select2-container--disabled .select2-selection{
    background:var(--s2026-bg-raised) !important; color:var(--s2026-ink-3) !important; border-color:var(--s2026-rule) !important;
}
/* "background" sopra è shorthand → azzera anche qui il background-image dell'icona
   lucchetto: riapplicata. */
[data-theme="dark"] .artedit2026 .select2-container--disabled .select2-selection{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238B1538'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 28px center !important;
    background-size:14px 14px !important;
}
/* 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);
}
/* Editor a tendina Tabulator (editor "select"/list): come il dropdown select2 sotto,
   monta la lista su <body> fuori da .artedit2026 → niente ancestor da scopare, mi
   appoggio solo a [data-theme="dark"] (il toggle esiste solo su pagine s2026/artedit). */
[data-theme="dark"] .tabulator-edit-list{
    background:var(--s2026-bg-panel);
    border:1px solid var(--s2026-rule);
    color:var(--s2026-ink);
}
[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item,
[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-placeholder,
[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-group{
    color:var(--s2026-ink);
    border-color:var(--s2026-rule);
}
[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item.active,
[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item.active.focused,
[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item.focused,
[data-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item:hover{
    background:var(--s2026-brand);
    color:#fff;
}
/* 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;  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. */
#tabs-3.s2026 .form-check-input:checked,
#tabs-4.s2026 .form-check-input:checked,
#tabs-13.s2026 .form-check-input:checked,
#tabs-10.s2026 .form-check-input:checked,
#tabs-19.s2026 .form-check-input:checked,
#tabs-20.s2026 .form-check-input:checked,
.s2026.setup-scheda-wrap .form-check-input:checked,
.artedit2026 .form-check-input:checked{
    background-color:var(--s2026-brand); border-color:var(--s2026-brand);
}
#tabs-3.s2026 .form-check-input:checked,
#tabs-4.s2026 .form-check-input:checked,
#tabs-13.s2026 .form-check-input:checked,
#tabs-10.s2026 .form-check-input:checked,
#tabs-19.s2026 .form-check-input:checked,
#tabs-20.s2026 .form-check-input:checked,
.s2026.setup-scheda-wrap .form-check-input:checked,
#tabs-3.s2026 .form-switch .form-check-input:checked,
#tabs-4.s2026 .form-switch .form-check-input:checked,
#tabs-13.s2026 .form-switch .form-check-input:checked,
#tabs-10.s2026 .form-switch .form-check-input:checked,
#tabs-19.s2026 .form-switch .form-check-input:checked,
#tabs-20.s2026 .form-switch .form-check-input:checked,
.s2026.setup-scheda-wrap .form-switch .form-check-input:checked,
.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>");
}
#tabs-3.s2026 .form-check-input:focus,
#tabs-4.s2026 .form-check-input:focus,
#tabs-13.s2026 .form-check-input:focus,
#tabs-10.s2026 .form-check-input:focus,
#tabs-19.s2026 .form-check-input:focus,
#tabs-20.s2026 .form-check-input:focus,
.s2026.setup-scheda-wrap .form-check-input:focus,
.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.
   :not(:checked) e' necessario: a parita' di specificita' con la regola
   ":checked{ background-color:var(--s2026-brand) }" qui sopra, questa vince perche'
   viene dopo nel file — senza l'esclusione lo stato "acceso" perdeva il brand in dark. */
[data-theme="dark"] .artedit2026 .form-check-input:not(:checked){
    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);
    /* La classe si usa anche su <a> (5 template: sticky bar del Setup, riporto giacenze,
       le tre pagine ticket) e BS5 ha "a{text-decoration:underline}": senza questa riga
       quei bottoni escono col testo sottolineato, i <button> no. Un bottone non e' mai
       sottolineato, quindi la regola sta qui sulla base e non sulle singole pagine. */
    text-decoration:none;
}
.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; }
/* Il Chiudi delle anagrafiche s2026 prendeva il bordo grigio del bottone base
   (--s2026-rule-strong) e accanto al Salva pieno non si vedeva. Ora si borda col
   colore azienda: --s2026-brand e' il token che tpl/pg/index.html deriva da
   ex_color, quindi il bordo segue il brand del profilo da solo, senza toccare i
   template. Sfondo e testo restano quelli del bottone neutro: si vede, ma non
   diventa un secondo bottone pieno in gara col Salva.
   Vale per tutti e 18 i .artedit2026-btn--close delle anagrafiche nuove.
   NB: .artedit2026-btn--outline, che sta nel markup accanto a --close, non ha
   nessuna regola - e' inerte, non e' li' che si cambia l'aspetto. */
.artedit2026 .artedit2026-btn--close{ margin-left:auto; border-color:var(--s2026-brand); }
/* hover: il bordo NON cambia (in tema scuro --s2026-brand-deep e' la tinta
   grezza, scura, e su fondo scuro il bordo si spegnerebbe invece di accendersi);
   si accende un velo di brand-tint, che in entrambi i temi e' il brand sfumato
   sullo sfondo del tema. */
.artedit2026 .artedit2026-btn--close:hover{
    background:var(--s2026-brand-tint); border-color:var(--s2026-brand); color:var(--s2026-ink);
}
/* Azione distruttiva o straordinaria (es. i riallineamenti Amazon del Setup
   Marketplace): bordo e testo nel rosso del tema, pieno solo in hover, cosi' in
   una fila di bottoni non urla ma resta riconoscibile. */
.artedit2026 .artedit2026-btn--danger{
    border-color:var(--s2026-danger); color:var(--s2026-danger-fg); background:var(--s2026-bg-panel);
}
.artedit2026 .artedit2026-btn--danger:hover{
    background:var(--s2026-danger); border-color:var(--s2026-danger); color:#fff;
}
/* Bottone generico brand fuori dagli shell edit/list (es. browse fileinput) */
.s2026 .s2026-brand-btn{ background:var(--s2026-brand); border-color:var(--s2026-brand-deep); color:var(--s2026-brand-fg); }
.s2026 .s2026-brand-btn:hover{ background:var(--s2026-brand-hover); border-color:var(--s2026-brand-deep); color:var(--s2026-brand-fg); }
/* FOOTER AZIONI ANCORATO — opt-in per gli edit caricati dentro SublimaUI.panel
   (es. ac_FamigliaArticolo): il wrapper riempie il corpo scrollabile del pannello
   e la barra resta a filo del fondo anche con form piu' corto dell'area visibile.
   Il contenitore passato a SublimaUI.panel deve portare .s2026-panel-fill: senza
   di esso la catena delle altezze si spezza e la barra torna a fine contenuto. */
.s2026-panel__body > .s2026-panel-fill{
    display:flex; flex-direction:column; min-height:100%;
}
.s2026-panel-fill > .artedit2026--dockactions{ flex:1; }
.artedit2026--dockactions{
    display:flex; flex-direction:column; padding-bottom:0 !important;
}
/* Stesso look della barra Filtra/Pulisci di #filtriOffcanvas: fondo opaco sul token
   del tema, separatore solo sopra, bottoni a larghezza uguale. */
.artedit2026--dockactions .artedit2026-actions{
    margin:auto -1rem 0; bottom:0; gap:16px;
    padding:10px 16px 14px;
    background:var(--s2026-bg-panel);
    border:0; border-top:1px solid var(--s2026-rule); border-radius:0;
    box-shadow:none;
}
.artedit2026--dockactions .artedit2026-btn{ flex:1; justify-content:center; }
.artedit2026--dockactions .artedit2026-btn--close{ margin-left:0; }

/* CARD IMMAGINE (articolo rapido, add_fast_articolo.html) — la resa e' la stessa
   di prima, ma espressa qui invece che con le utility BS5 nel markup: d-flex,
   flex-column, flex-grow-1 e mb-2 sono tutte !important, quindi la riga compatta
   sotto md (sublima2026_responsive.css) non avrebbe potuto girare la card. */
.artedit2026 .artedit2026-img-card{ display:flex; flex-direction:column; }
.artedit2026 .artedit2026-img-card .artedit2026-card__body{
    display:flex; flex-direction:column; flex:1 1 auto; text-align:center;
}
.artedit2026 .artedit2026-img-box{
    display:flex; align-items:center; justify-content:center;
    flex:1 1 auto; min-height:90px; margin-bottom:8px;
    border-radius:var(--s2026-radius-lg); background:var(--s2026-bg-raised); overflow:hidden;
}
.artedit2026 .artedit2026-img-actions{ display:grid; }
.artedit2026 .artedit2026-img-empty{ max-width:40%; max-height:40%; object-fit:contain; opacity:.5; }

/* ============================================================================
   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); }

/* Utility di colore testo di Bootstrap. `text-warning` e' il #ffc107 di serie: su
   fondo chiaro e' praticamente invisibile (ed e' un colore pensato per stare su
   sfondo pieno, non per il testo). `text-success` e `text-info` hanno il problema
   opposto in dark: verde e azzurro scuri su fondo scuro. I token `-fg` sono
   proprio le versioni per il testo, e cambiano da soli fra i due temi.
   Qui scoped .s2026 — fuori restano quelle di Bootstrap. `!important` perche' le
   utility di colore di BS5 lo dichiarano. */
.s2026 .text-warning{ color:var(--s2026-warning-fg) !important; }
.s2026 .text-success{ color:var(--s2026-success-fg) !important; }
.s2026 .text-info{    color:var(--s2026-info-fg)    !important; }
.s2026 .text-danger{  color:var(--s2026-danger-fg)  !important; }

/* ============================================================================
   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; }

/* Taglia dei bottoni di conferma. Con buttonsStyling:false SweetAlert lascia
   cadere il suo padding e restano quelli di .btn, tarati per le toolbar: dentro
   una modale, dove sono l'unica cosa cliccabile e decidono un'azione, "Si"/"No"
   diventano due francobolli al centro di un popup vuoto. Qui si allineano ai
   bottoni-azione degli edit (artedit2026-btn): stessa altezza, stesso peso,
   e una min-width che dia un bersaglio decente anche alle etichette corte. */
.swal2-actions .swal2-confirm,
.swal2-actions .swal2-cancel,
.swal2-actions .swal2-deny{
    padding:10px 22px;
    font-size:var(--s2026-fs-md);
    font-weight:600;
    min-width:110px;
    border-radius:var(--s2026-radius-md);
}

/* 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; }

/* ============================================================================
   BOOTSTRAP-FILEINPUT (kartik, tema fa5) — nessuna variabile propria: bordi/
   sfondi hardcoded chiari (fileinput.min.css: .file-preview #ddd, .file-preview-frame
   rgba(0,0,0,.2), .file-drop-zone #aaa, .file-footer-caption #999). Scoped sotto
   .s2026 perche' il plugin e' usato anche in pagine non migrate (light-only).
   Il file-zoom-dialog e' un modal Bootstrap montato su <body> come SweetAlert2/
   smk-offcanvas sopra: stesso motivo, stessa non-scopatura sotto .s2026. */
[data-theme="dark"] .s2026 .file-preview{ background:var(--s2026-bg-panel); border-color:var(--s2026-rule); }
[data-theme="dark"] .s2026 .file-preview-frame{ background:var(--s2026-bg-raised); border-color:var(--s2026-rule-strong); box-shadow:none; }
[data-theme="dark"] .s2026 .file-preview-frame:hover{ box-shadow:0 0 6px 0 rgba(0,0,0,.4); }
[data-theme="dark"] .s2026 .file-footer-caption{ color:var(--s2026-ink-3); }
[data-theme="dark"] .s2026 .file-drop-zone{ border-color:var(--s2026-rule-strong); color:var(--s2026-ink-3); }
[data-theme="dark"] .s2026 .file-drop-zone-title{ color:var(--s2026-ink-3); }
[data-theme="dark"] .s2026 .file-caption-name{ background:var(--s2026-bg-input); color:var(--s2026-ink); border-color:var(--s2026-rule); }
[data-theme="dark"] .s2026 .input-group-text{ background:var(--s2026-bg-raised); color:var(--s2026-ink-2); border-color:var(--s2026-rule); }
[data-theme="dark"] .file-zoom-dialog .modal-content{ background:var(--s2026-bg-panel); color:var(--s2026-ink); border-color:var(--s2026-rule-strong); }
[data-theme="dark"] .file-zoom-dialog .modal-header{ border-bottom-color:var(--s2026-rule); }
[data-theme="dark"] .file-zoom-dialog .close,
[data-theme="dark"] .file-zoom-dialog .btn-close{ filter:invert(1) grayscale(1) brightness(1.6); }

/* ============================================================================
   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 — MODAL (.s2026-modal, BS5 Modal nativo)
   Generico: qualsiasi contenuto (form riga, conferma custom, dettaglio...) —
   non solo edit. Il markup resta il modal BS5 standard (modal-dialog >
   modal-content > modal-header/body/footer), qui solo temizzato coi token.
   Il modal-content resta dentro il DOM di pagina (BS5 non lo sposta, solo il
   backdrop va su <body>): se la pagina e' .s2026 i token risolvono comunque
   perche' le custom property sono globali; nessuno scoping richiesto.
   Uso: <div class="modal s2026-modal" id="..."> ... </div>, bottoni azione con
   artedit2026-btn (--primary/--outline) come nel resto delle superfici edit.
   ============================================================================ */
.s2026-modal .modal-content{
    background:var(--s2026-bg-panel); color:var(--s2026-ink);
    border:1px solid var(--s2026-rule); border-radius:var(--s2026-radius-lg);
}
.s2026-modal .modal-header{
    background:var(--s2026-bg-panel); border-bottom-color:var(--s2026-rule);
}
.s2026-modal .modal-header .modal-title{ color:var(--s2026-ink); }
.s2026-modal .modal-header .modal-title .bi{ color:var(--s2026-brand-text); }
.s2026-modal .modal-footer{ background:var(--s2026-bg-panel) !important; border-top:none !important; border-bottom:none !important; box-shadow:none !important; }
/* sublima_new: .modal-body ha margin-bottom 30px globale da annullare qui */
.s2026-modal .modal-body{ margin-bottom:0; }
.s2026-modal .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-modal .btn-close:hover{ background-color:var(--s2026-brand-hover); opacity:1; }

/* Scale-in riusabile per modal BS5 (al posto dello slide-down di default):
   applicare .s2026-modal-scale sullo stesso elemento .modal che ha .fade. */
.s2026-modal-scale.fade .modal-dialog{
    transition:transform .2s ease-out, opacity .2s ease-out;
    transform:scale(.95); opacity:0;
}
.s2026-modal-scale.show .modal-dialog{ transform:scale(1); opacity:1; }

/* sublima_new azzera il backdrop di ogni modal BS (body.modal-open div.modal-backdrop
   {z-index:0}): sotto elementi con stacking proprio (es. .search/.columns di
   bootstrap-table spostati nel #toolbar) il backdrop non li oscura piu' e il
   fondo appare "a chiazze". Stessa specificita' del selettore originale: qui
   vince per ordine di caricamento (sublima2026.css dopo sublima_new.css). */
body.modal-open div.modal-backdrop{ z-index:1040; }

/* Boilerplate ".mainbar{position:relative;z-index:50}" copiato in decine di
   <style> per-pagina (tpl/pg, modules/*): crea uno stacking context che
   intrappola sotto al backdrop di cui sopra qualunque .modal figlio (es.
   print_modal.html), perche' lo z-index del modal (1055) viene confrontato
   al livello dell'antenato (50) invece che con quello del backdrop (1040),
   appeso invece direttamente a <body>. Fix generale qui (vince per ordine di
   caricamento sulle <style> di pagina) invece che file per file: vedi
   commit 16468, fatto a mano solo su iframe_pricetags.html. */
.mainbar{ z-index:auto !important; }

/* ============================================================================
   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);
    scrollbar-width:thin; scrollbar-color:var(--s2026-rule-strong) var(--s2026-bg-raised); }
.s2026-panel__body::-webkit-scrollbar{ width:12px; height:12px; }
.s2026-panel__body::-webkit-scrollbar-track{ background:var(--s2026-bg-raised); }
.s2026-panel__body::-webkit-scrollbar-thumb{
    background:var(--s2026-rule-strong); border-radius:20px; border:3px solid var(--s2026-bg-raised); }
.s2026-panel__body::-webkit-scrollbar-thumb:hover{ background:var(--s2026-ink-4); }
.s2026-panel__body::-webkit-scrollbar-corner{ background:var(--s2026-bg-raised); }
.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); }

/* X di chiusura nell'header di una pagina aperta con SublimaUI.panel({header:false}):
   la x del panel non c'e' piu', la fornisce il contenuto stesso. Stesso look di
   .s2026-panel__close (quadrato brand pieno + X bianca) cosi' l'occhio non nota
   la differenza rispetto all'header standard del panel. */
.s2026 .page-header .btn-close{
    box-sizing:border-box; width:38px; height:38px;
    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:1.3em;
    opacity:1; transition:var(--s2026-transition);
}
.s2026 .page-header .btn-close:hover{ background-color:var(--s2026-brand-hover); opacity:1; }

/* 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;
    /* sfondo invertito rispetto al tema: scuro su light, bianco su dark — massimo contrasto col resto della UI */
    background:#1e293b;
    color:#f1f5f9;
    border:none;
    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, bordo lume e un alone scuro ampio per dare profondita'. */
[data-theme="dark"] :where(.s2026-toast){
    background:#ffffff;
    color:#0f172a;
    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:inherit; }
.s2026-toast__text{ margin-top:2px; font-size:var(--s2026-fs-base); line-height:1.4; color:inherit; opacity:.72; }
.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; }
.s2026-toast__close{ filter:invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .s2026-toast__close{ filter:none; }

/* barra di durata: scala da piena a zero nel tempo di autochiusura */
.s2026-toast__timer{
    position:absolute; left:0; right:0; bottom:0px; height:4px;
    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 neutro (invariato dalla base), bordi laterali e superiore a
   colore semantico, barra accento/durata (bottom, invariata) + pastiglia
   piena, etichetta a colore pieno */
.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::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::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::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::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,
.s2026 #filtriOffcanvas .form-check.form-switch,
#tabs-3.s2026 .form-check.form-switch,
#tabs-4.s2026 .form-check.form-switch,
#tabs-13.s2026 .form-check.form-switch,
#tabs-10.s2026 .form-check.form-switch,
#tabs-19.s2026 .form-check.form-switch,
#tabs-20.s2026 .form-check.form-switch,
.s2026.setup-scheda-wrap .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,
.s2026 #filtriOffcanvas .form-switch .form-check-input,
#tabs-3.s2026 .form-switch .form-check-input,
#tabs-4.s2026 .form-switch .form-check-input,
#tabs-13.s2026 .form-switch .form-check-input,
#tabs-10.s2026 .form-switch .form-check-input,
#tabs-19.s2026 .form-switch .form-check-input,
#tabs-20.s2026 .form-switch .form-check-input,
.s2026.setup-scheda-wrap .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.
   top:0/bottom:0 + height:auto (invece di un'altezza fissa ancorata in alto) cosi'
   la scritta resta centrata verticalmente anche quando la label va a capo su piu'
   righe e il wrapper .form-switch cresce oltre i 38px canonici. */
.artedit2026 .form-switch::after,
.s2026 #filtriOffcanvas .form-switch::after,
#tabs-3.s2026 .form-switch::after,
#tabs-4.s2026 .form-switch::after,
#tabs-13.s2026 .form-switch::after,
#tabs-10.s2026 .form-switch::after,
#tabs-19.s2026 .form-switch::after,
#tabs-20.s2026 .form-switch::after,
.s2026.setup-scheda-wrap .form-switch::after{
  content:"No"; position:absolute; left:0; top:0; bottom:0; width:90px; height:auto;
  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,
.s2026 #filtriOffcanvas .form-switch:has(:checked)::after,
#tabs-3.s2026 .form-switch:has(:checked)::after,
#tabs-4.s2026 .form-switch:has(:checked)::after,
#tabs-13.s2026 .form-switch:has(:checked)::after,
#tabs-10.s2026 .form-switch:has(:checked)::after,
#tabs-19.s2026 .form-switch:has(:checked)::after,
#tabs-20.s2026 .form-switch:has(:checked)::after,
.s2026.setup-scheda-wrap .form-switch:has(:checked)::after{
  content:"Sì"; justify-content:flex-start; padding-right:0; padding-left:12px; color:#fff;
}
/* ⚠ Dentro #ae_form la scritta "Sì/No" restava 3px SOPRA il centro della pillola.
   Non e' un caso: sublima_ae_form.css mette `#ae_form .form-check.form-switch
   {padding-top:6px}` (selettore con ID, quindi vince su queste regole). Quel
   padding sposta in basso i figli in flusso - la pillola - ma NON lo ::after, che
   essendo assoluto si ancora al PADDING BOX e quindi parte 6px piu' su. Risultato:
   pillola centrata a 22px, scritta a 19px.
   Si ricentra la scritta invece di togliere il padding: togliendolo cambierebbe
   l'altezza di ogni switch di ogni scheda artedit2026, e a disallinearsi e' solo
   il testo. Il 6px e' lo stesso di sublima_ae_form.css: se cambia la', cambia qui. */
.artedit2026 #ae_form .form-check.form-switch::after{ padding-top:6px; }

/* MagicImport: stato già mostrato dal badge DOCUMENTI/ARTICOLI a fianco, niente Sì/No sul pill */
.artedit2026 .form-switch:has(#tipo_import)::after{ content:none; }
/* 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; }
/* Nel Setup l'etichetta sta DENTRO il wrapper e va spesso a capo. Con
   align-items:center la pillola scende verso il centro del blocco mentre la
   scritta interna (::after, ancorata in alto e alta 38px) resta su: le due si
   separano, ed e' quello che si vede a video. Qui si allinea tutto in alto e si
   porta la scritta all'altezza della pillola, cosi' pillola, "Si'/No" e prima
   riga dell'etichetta stanno sulla stessa linea, in ogni cella della griglia. */
#tabs-3.s2026 .form-check.form-switch,
#tabs-4.s2026 .form-check.form-switch,
#tabs-13.s2026 .form-check.form-switch,
#tabs-10.s2026 .form-check.form-switch,
#tabs-19.s2026 .form-check.form-switch,
#tabs-20.s2026 .form-check.form-switch,
.s2026.setup-scheda-wrap .form-check.form-switch{
  /* padding-top e font-size sono dichiarati APPOSTA anche se sembrano superflui:
     il form del Setup si chiama #ae_form, quindi sublima_ae_form.css:79-95 gli
     applica un padding e una dimensione testo che nel pannello — dove il form ha
     un altro id — non arriverebbero. Senza, lo stesso partial si vedrebbe in due
     modi diversi a seconda da dove lo apri. */
  align-items:flex-start; min-height:32px; padding-top:0;
}
#tabs-3.s2026 .form-switch::after,
#tabs-4.s2026 .form-switch::after,
#tabs-13.s2026 .form-switch::after,
#tabs-10.s2026 .form-switch::after,
#tabs-19.s2026 .form-switch::after,
#tabs-20.s2026 .form-switch::after,
.s2026.setup-scheda-wrap .form-switch::after{ height:32px; }
#tabs-3.s2026 .form-check.form-switch .form-check-label,
#tabs-4.s2026 .form-check.form-switch .form-check-label,
#tabs-13.s2026 .form-check.form-switch .form-check-label,
#tabs-10.s2026 .form-check.form-switch .form-check-label,
#tabs-19.s2026 .form-check.form-switch .form-check-label,
#tabs-20.s2026 .form-check.form-switch .form-check-label,
.s2026.setup-scheda-wrap .form-check.form-switch .form-check-label{
  padding-top:7px; line-height:1.3; font-size:.88rem; font-weight:400; cursor:pointer;
}

.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(#singola_multipla)::after{ content:"Multipla"; }
.artedit2026 .form-switch:has(#singola_multipla):has(:checked)::after{ content:"Singola"; }
.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"; }

/* ============================================================
   Scelta A/B a due pulsanti (btn-check BS5). Serve dove uno switch non va bene
   perche' nessuna delle due opzioni e' un "acceso/spento": leggendo lo stato
   corrente non si indovina l'alternativa (caso reale: formato etichette, a
   rullo vs foglio A4). Qui entrambe le voci restano scritte e si evidenzia
   quella attiva. Altezza 38px = quella degli altri campi della riga.
   BS5 da sola userebbe i colori di default: tematizzato coi token s2026, che
   sono gia' tema-aware e quindi valgono anche in dark.
   ============================================================ */
.artedit2026 .btn-group > .btn-check + .btn{
  height:38px; display:inline-flex; align-items:center; gap:6px;
  padding:0 14px; white-space:nowrap;
  font-family:var(--s2026-font-sans); font-size:var(--s2026-fs-md); font-weight:600;
  color:var(--s2026-ink-2);
  background:var(--s2026-bg-raised); border:1px solid var(--s2026-rule);
  box-shadow:none;
}
.artedit2026 .btn-group > .btn-check + .btn:hover{ border-color:var(--s2026-rule-strong); }
.artedit2026 .btn-group > .btn-check:checked + .btn,
.artedit2026 .btn-group > .btn-check:checked + .btn:hover{
  background:var(--s2026-brand); border-color:var(--s2026-brand); color:#fff;
}
.artedit2026 .btn-group > .btn-check:focus-visible + .btn{
  box-shadow:var(--s2026-focus-ring); outline:none;
}
/* colore ON + focus per i filtri (prima erano widget legacy) — l'edit è già
   tematizzato dalle regole .artedit2026 più su */
.s2026 #filtriOffcanvas .form-switch .form-check-input:checked{
  background-color:var(--s2026-brand); border-color:var(--s2026-brand);
}
.s2026 #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"] .s2026 #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"] .s2026 #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),
.s2026 #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"] .s2026 #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>");
}
/* Pannello "Genera etichetta" listino (__listinoarticolo_pricetags.html, in
   #azioni di ac_ListinoArticolo): stessi switch pill, scope proprio. Etichetta
   Multipla/Singola come lo switch #singola_multipla nella scheda articolo
   (.artedit2026), qui però di default ON = Singola. */
/* #azioni sta dentro #nav-tabContent, dove ".s2026 #nav-tabContent .row" azzera
   --bs-gutter-x (edge-to-edge per la bootstrap-table): senza questo override i
   campi della riga .pt-camp restano attaccati nonostante gy-4/gx-5 sul markup.
   Doppio ID per battere la specificità di quella regola. */
.s2026 #nav-tabContent #pricetags_form .pt-camp{ --bs-gutter-x: 2rem; --bs-gutter-y: 1.5rem; }
#pricetags_form .form-check.form-switch{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding-left:0; min-height:0; margin:0;
}
#pricetags_form .form-switch .form-check-input{
  flex:0 0 auto; float:none; margin:0;
  width:90px; height:28px; border-radius:999px;
}
#pricetags_form .form-switch::after{
  content:"Multipla"; 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;
}
#pricetags_form .form-switch:has(:checked)::after{
  content:"Singola"; justify-content:flex-start; padding-right:0; padding-left:12px; color:#fff;
}
#pricetags_form .form-switch .form-check-input:checked{
  background-color:var(--s2026-brand); border-color:var(--s2026-brand);
}
#pricetags_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"] #pricetags_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"] #pricetags_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>");
}
#pricetags_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"] #pricetags_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>");
}

/* =============================================================================
   CAMPANELLA E PANNELLO DELLE NOTIFICHE
   -----------------------------------------------------------------------------
   Arrivano da due <style> inline dentro tpl/pg/navbar.html. Stanno qui, IN FONDO
   al foglio: un blocco inline nel body vince a parita' di specificita', quindi
   spostandolo piu' in alto qualche regola avrebbe smesso di applicarsi.
   I nomi delle classi della campanella non sono cambiati.
   ========================================================================== */

/* ---------------------------------------------------------------- campanella */
.bell-container { display: inline-block; }
.bell-link      { display: inline-block; }
.bell-icon      { transition: transform .2s; transform-origin: 50% 0%; display: block; }

/* Il riferimento del badge e' la campanella, non il link: .nav-link ha un
   padding suo, e ancorarsi a quello faceva galleggiare il numero sopra
   l'icona invece che sul suo angolo. */
.bell-wrap { position: relative; display: inline-block; line-height: 0; }

.bell-badge {
  position: absolute; top: -5px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; line-height: 1; letter-spacing: 0;
  color: #fff !important;
  background: var(--s2026-danger);
  border-radius: var(--s2026-radius-pill);
  border: 2px solid var(--s2026-brand-deep);
  z-index: 2; pointer-events: none; user-select: none;
  box-shadow: 0 1px 3px #0004;
}

.bell-swing { animation: bell-swing .7s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes bell-swing {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(15deg); }
  20%  { transform: rotate(-10deg); }
  30%  { transform: rotate(7deg); }
  40%  { transform: rotate(-5deg); }
  50%  { transform: rotate(3deg); }
  60%  { transform: rotate(-2deg); }
  70%,100% { transform: rotate(0deg); }
}

/* ------------------------------------------------------------------ pannello */
#notificheOffcanvas { width: 380px; max-width: 90vw; }

#notificheOffcanvas .offcanvas-header {
  background: linear-gradient(90deg, var(--s2026-brand-deep) 0%, #444 100%);
  color: #fff;
}
#notificheOffcanvas .offcanvas-header .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);
}
#notificheOffcanvas .offcanvas-header .btn-close:hover { background-color: var(--s2026-brand-hover); }

.s2026-notif-lista { list-style: none; padding: 0; margin: 0; }

/* La riga. Tutta cliccabile quando c'e' dove andare: prima l'unico <a> della
   card era la X per cancellarla, cioe' l'unica cosa che si poteva fare con un
   avviso era buttarlo via. */
.s2026-notif {
  position: relative;
  display: flex; align-items: stretch;
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-left: 3px solid var(--s2026-neutral);
  border-radius: var(--s2026-radius-md);
  box-shadow: var(--s2026-shadow-flat);
  margin: 0 2px 8px 2px;
  transition: var(--s2026-transition);
}
.s2026-notif:hover { box-shadow: var(--s2026-shadow-card); border-color: var(--s2026-rule-strong); }

/* La priorita' si vede dal bordo, non da una cifra dentro un cerchio: un "2" non
   dice niente a nessuno, una barra rossa si legge senza pensarci. */
.s2026-notif--p0 { border-left-color: var(--s2026-rule-strong); }
.s2026-notif--p1 { border-left-color: var(--s2026-warning); }
.s2026-notif--p2 { border-left-color: var(--s2026-danger); }
.s2026-notif--p3 { border-left-color: var(--s2026-danger); }

.s2026-notif__link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 4px 10px 12px;
  text-decoration: none; color: inherit;
}
a.s2026-notif__link:hover { text-decoration: none; color: inherit; }

.s2026-notif__icona {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--s2026-radius-sm);
  background: var(--s2026-brand-tint);
  color: var(--s2026-brand-text);
  font-size: 1rem;
}
.s2026-notif--p2 .s2026-notif__icona,
.s2026-notif--p3 .s2026-notif__icona { background: var(--s2026-danger-bg); color: var(--s2026-danger-fg); }
.s2026-notif--p1 .s2026-notif__icona { background: var(--s2026-warning-bg); color: var(--s2026-warning-fg); }

.s2026-notif__testi { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.s2026-notif__titolo {
  font-size: var(--s2026-fs-md); font-weight: 600; color: var(--s2026-ink);
  line-height: 1.3; overflow-wrap: anywhere;
}
/* Il testo si vede: prima era mandato dal server, scritto con cura da ogni
   produttore, e reso solo se il titolo mancava. */
.s2026-notif__testo {
  font-size: var(--s2026-fs-sm); color: var(--s2026-ink-3); line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.s2026-notif__meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--s2026-fs-xs); color: var(--s2026-ink-4); margin-top: 2px;
}
.s2026-notif__tag {
  padding: 1px 6px; border-radius: var(--s2026-radius-pill);
  background: var(--s2026-neutral-bg); color: var(--s2026-neutral-fg);
  font-weight: 600; font-size: var(--s2026-fs-micro); text-transform: uppercase; letter-spacing: .02em;
}
.s2026-notif__apri { margin-left: auto; color: var(--s2026-brand-text); font-weight: 600; }

.s2026-notif__x {
  flex: 0 0 auto; align-self: flex-start;
  width: 30px; padding: 10px 0 0 0;
  background: none; border: 0; line-height: 1;
  color: var(--s2026-ink-4); opacity: .55;
  transition: var(--s2026-transition); cursor: pointer;
}
.s2026-notif__x:hover, .s2026-notif__x:focus { opacity: 1; color: var(--s2026-danger); }

.s2026-notif-vuoto, .s2026-notif-altre {
  text-align: center; color: var(--s2026-ink-4);
  font-size: var(--s2026-fs-sm); padding: 18px 8px; margin: 0;
}
.s2026-notif-altre { padding: 4px 8px 12px; font-size: var(--s2026-fs-xs); }

/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR DOCUMENTO SEMPLIFICATO — .doc-light2
   Le 13 classi che il frammento `tpl/pg/light/fattura_light2.html` prendeva da
   `custom_light2.css`, il foglio della vecchia shell light (ora cancellato): 3.351 righe di
   override GLOBALI su .btn, .row, .container, .nav-tabs, .table-striped, .col-sm-*, che in
   una pagina .s2026 non si possono caricare senza sporcare tutto. Finora quel foglio veniva
   iniettato all'apertura dell'editor e rimosso alla chiusura, a mano.
   Misurato: delle 96 classi usate dal frammento, 26 sono coperte anche dai fogli moderni e
   28 solo da quelli; queste 13 erano l'unica dipendenza vera.
   Le soglie restano 576 / 600 / 768 / 1024 come nell'originale: la geometria non si muove.
   I colori passano da una variabile locale invece di essere cablati (#efefef, #fff): nel tema
   chiaro il valore e' identico a prima, e il tema SCURO — dove l'editor era illeggibile,
   pannelli bianchi su fondo scuro — ora prende i token.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Le cinque variabili locali (--doc-light2-pannello/-pieno/-ok/-ko/-ko-bordo) NON ci sono
   piu': erano il ponte che teneva i colori cablati del vecchio Bootstrap (#efefef, #fff,
   #5cb85c, #d9534f, #d18588) nel tema chiaro, mentre il tema scuro prendeva gia' i token.
   Con il restyle il ponte non serve: entrambi i temi leggono i --s2026-*, ed e' un blocco di
   dichiarazioni in meno da tenere allineato in due copie.
   ⚠ Nel tema chiaro i verdi e i rossi cambiano tinta: erano quelli di Bootstrap 3. */

.doc-light2 .app-w100 { width: 100% !important; flex: auto !important; max-width: inherit !important; }

/* Qui c'erano due regole per gli accessi veloci sotto i 768px. `.no-width` serviva allo
   <span> che avvolgeva il fulmine, sparito con il passaggio a Bootstrap 5.
   ⚠ L'altra, `#articoli_veloci_div .fast-btn { background-color: ... }`, aveva un ID nel
   selettore: vinceva su qualunque regola a sole classi e ridipingeva di bianco i bottoni
   PROPRIO sul telefono, dove servono riconoscibili. Ora lo stile sta tutto nel blocco
   ACCESSI VELOCI, senza id. */

/* TESTATA DELL'EDITOR — la disegna la pagina ospite (ac_Documento.html, apriDocLight), ma
   vive solo qui, quindi lo stile sta con il resto dell'editor.
   Prima erano tre pezzi senza stile in fila: un bottone grigio "Torna alla lista",
   l'etichetta in text-muted e un link "Versione completa".
   ⚠ NON e' scoped sotto .doc-light2: la barra sta FUORI dal frammento, e' sorella di
   #edit_new_box. Il gancio e' la classe .s2026 che le mette apriDocLight. */
.s2026.doc-testata {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(90deg, var(--s2026-brand) 0%, var(--s2026-brand-deep) 100%);
  color: #fff;
}
.s2026.doc-testata .doc-testata__indietro,
.s2026.doc-testata .doc-testata__uscita {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
}
.s2026.doc-testata .doc-testata__indietro { flex: 0 0 auto; width: 40px; height: 40px; font-size: 20px; line-height: 1; }
.s2026.doc-testata .doc-testata__uscita {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.45);
  white-space: nowrap;
}
.s2026.doc-testata .doc-testata__indietro:hover,
.s2026.doc-testata .doc-testata__uscita:hover { background: rgba(255,255,255,.16); }
.s2026.doc-testata .doc-testata__titoli { flex: 1; min-width: 0; }
/* titolo e sottotitolo tagliano invece di andare a capo: la barra deve restare alta una riga */
.s2026.doc-testata .doc-testata__h {
  font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2026.doc-testata .doc-testata__sub {
  font-size: var(--s2026-fs-xs, 11px); color: rgba(255,255,255,.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s2026.doc-testata .doc-testata__sub:empty { display: none; }

/* Protocollo + Data appaiati: il protocollo e' una sigla, la data si prende il resto */
.doc-light2 .doc-coppia { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
/* Proporzioni ROVESCIATE per N. Doc / Data Doc del fornitore: li' il primo campo e' un numero
   di documento lungo e con un bottone accanto, il secondo una data — il contrario della
   coppia Protocollo/Data, dove il primo e' una sigla di tre lettere. */
.doc-light2 .doc-coppia--rif { grid-template-columns: 1fr 150px; }

/* Cliente e Fornitore: la select2 deve riempire il gruppo, non fermarsi al testo.
   ⚠ Allargare la colonna non basta. Le due select sono inizializzate con `width:"style"`,
   che copia la larghezza dall'attributo `style` dell'elemento: non essendoci, select2 non
   scrive nessuna larghezza e il contenitore resta un flex item con base `auto`, cioe' largo
   quanto la ragione sociale. Da 768px in su si vedeva un campo di ~200px in una card da 700,
   con il resto vuoto. `flex: 1 1 auto` + `width: 1%` e' il modo con cui Bootstrap stesso
   tratta i figli di un `.input-group`: la larghezza la decide il flex, non il contenuto.
   Niente `!important`: qui si vince per specificita' (0,3,0 contro lo 0,1,0 delle regole di
   tema), e select2 con `width:"style"` non scrive stili inline da battere. */
.doc-light2 .input-group > .select2-container {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.doc-light2 .doc-titolo-op { font-size: 17px; margin: 0 0 6px; padding: 0 12px; }

/* INTESTATARIO — didascalia sotto la select: localita' e partita IVA, cioe' come si
   distingue un'anagrafica da una omonima.
   ⚠ Era un riquadro tinto con dentro un bottone per svuotare: pesava quanto il campo e
   quel bottone rifaceva la croce che la select ha gia'. Ora e' testo e basta. */
.doc-light2 .doc-entita {
  display: block;
  margin: 4px 0 0 2px;
  font-size: var(--s2026-fs-xs, 11px);
  color: var(--s2026-ink-3);
}
.doc-light2 .doc-entita__testo {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* I cinque pannelli avevano in origine la stessa regola ripetuta cinque volte. */
@media (min-width: 576px) {
  .doc-light2 .area_ritenuta,
  .doc-light2 .area_cassa_previdenziale,
  .doc-light2 .area_trasporto,
  .doc-light2 .area_pagamento,
  .doc-light2 .righee {
    background-color: var(--s2026-bg-raised);
    display: inline-block;
    padding: 11px;
    border: 1px solid var(--s2026-rule-strong);
    border-radius: 20px;
    margin-top: 18px;
  }
  .doc-light2 .righee .btn-group { width: 100%; padding: 0 !important; }
  /* Le tre regole che vestivano `.modifica_riga` e `.cancella_riga` da quadratini verde e
     rosso non ci sono piu': la modifica ora e' tutta la card della riga e il cestino e' un
     bottone da 44px (vedi il blocco LISTA RIGHE piu' sotto). #tooltip.right non esiste in
     nessun template. */
}

@media only screen and (min-width: 1024px) {
  .doc-light2 .area_ritenuta,
  .doc-light2 .area_cassa_previdenziale,
  .doc-light2 .area_trasporto,
  .doc-light2 .area_pagamento,
  .doc-light2 .righee {
    background-color: var(--s2026-bg-panel);
    width: 100%;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   La pianta nuova: barra fissa, sezioni di "Altri dati", foglio della riga.
   Tutto sui token --s2026-*: qui non nascono variabili locali nuove.
   ─────────────────────────────────────────────────────────────────────────── */

/* BARRA ANCORATA IN BASSO — totale e Salva sotto il pollice da qualsiasi scheda.
   `fixed` e non `sticky`: sticky avrebbe pinnato la barra solo finche' il contenuto e' piu'
   alto dello schermo, e su una scheda corta (Azioni ha tre bottoni) sarebbe rimasta a meta'
   pagina invece che in fondo. Qui deve stare in fondo SEMPRE.
   ⚠ `fixed` cambia riferimento se un antenato ha `transform`, `filter` o `perspective`:
   la catena e' #edit_new_div > #edit_new_box > .row.s2026 > .card di ac_Documento.html, e
   oggi nessuno dei quattro li imposta — verificato. Se un domani succedesse, la barra si
   ancorerebbe a quell'antenato senza nessun errore in console.
   z-index 1030 e' il valore di Bootstrap per gli elementi fissi: sopra il contenuto, ma
   SOTTO il backdrop dell'offcanvas (1040), cosi' il foglio della riga la copre. */
.doc-light2 .doc-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  /* sempre, non solo sul telefono: il riepilogo e' largo 100% e deve andare a capo,
     sopra la riga di totale e bottoni */
  flex-wrap: wrap;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--s2026-bg-panel);
  border-top: 1px solid var(--s2026-rule);
  box-shadow: 0 -2px 14px rgba(15, 23, 42, .10);
}
/* La barra e' fuori dal flusso: senza questo spazio coprirebbe gli ultimi campi del form,
   e sul telefono l'ultimo campo di "Altri dati" non si riuscirebbe a compilare. */
.doc-light2 { padding-bottom: 96px; }
/* Il totale e' il maniglione del riepilogo: e' un <button>, quindi va spogliato dello stile
   di sistema. */
.doc-light2 .doc-barra__totale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.doc-light2 .doc-barra__etichetta {
  font-size: var(--s2026-fs-xs, 11px);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--s2026-ink-3);
}
.doc-light2 .doc-barra__freccia { transition: transform .18s ease; }
/* Bootstrap toglie .collapsed quando il pannello e' aperto */
.doc-light2 .doc-barra__totale:not(.collapsed) .doc-barra__freccia { transform: rotate(180deg); }
.doc-light2 .doc-barra__valore {
  font-size: 20px;
  font-weight: 700;
  color: var(--s2026-ink);
  font-variant-numeric: tabular-nums;
}

/* RIEPILOGO — sta dentro la barra e occupa tutta la sua larghezza, sopra il totale.
   Era una tabella di 13 righe in fondo alla pagina; qui e' una lista di coppie compatte,
   e le righe a zero non si stampano affatto (aggiornaRiepilogo). */
.doc-light2 .doc-barra__riepilogo {
  flex: 1 0 100%;
  order: -1;                 /* sopra la riga di totale e bottoni */
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--s2026-rule);
  /* su uno schermo largo la barra e' larga quanto la finestra: senza questo limite
     l'etichetta finirebbe a un capo e il numero all'altro */
  max-width: 560px;
  max-height: 55vh;
  overflow-y: auto;
}
.doc-light2 .doc-riepilogo { margin: 0; }
.doc-light2 .doc-riepilogo__riga {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: var(--s2026-fs-sm, 13px);
}
.doc-light2 .doc-riepilogo__riga dt { font-weight: 400; color: var(--s2026-ink-2); }
.doc-light2 .doc-riepilogo__riga dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--s2026-ink);
  white-space: nowrap;
}
.doc-light2 .doc-riepilogo__riga--forte {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--s2026-rule);
  font-weight: 700;
}
.doc-light2 .doc-riepilogo__riga--forte dt,
.doc-light2 .doc-riepilogo__riga--forte dd { color: var(--s2026-ink); font-weight: 700; }

/* SCONTO DI TESTATA — fuori dal riepilogo apribile: si compila, non si consulta.
   Larghezza limitata perche' e' un campo breve: a piena riga sembrava una barra di ricerca. */
.doc-light2 .doc-sconto-testata { width: 100%; max-width: 420px; margin: 14px 0 0; }
.doc-light2 .doc-sconto-testata__campo { display: flex; gap: 6px; align-items: stretch; }
/* il campo si prende lo spazio, il bottone resta della sua misura */
.doc-light2 .doc-sconto-testata__campo .form-control { flex: 1 1 auto; width: auto; min-width: 0; }
.doc-light2 .doc-sconto-testata__campo .btn { flex: 0 0 auto; white-space: nowrap; }
/* Chip: come la stringa e' stata letta, voce per voce. Il tono e' quello del brand, non
   un colore nuovo. */
.doc-light2 .doc-sconto-chip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.doc-light2 .doc-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  background: var(--s2026-brand-tint);
  border: 1px solid var(--s2026-brand);
  color: var(--s2026-brand);
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
  white-space: nowrap;
}
.doc-light2 .doc-chip--ko {
  background: transparent;
  border-color: var(--s2026-danger);
  color: var(--s2026-danger);
  white-space: normal;
  height: auto;
  padding: 4px 10px;
}
.doc-light2 .doc-chip__nota { font-size: var(--s2026-fs-xs, 11px); color: var(--s2026-ink-3); }

/* Conteggio righe sulla linguetta "Righe" */
.doc-light2 .doc-conta-righe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--s2026-bg-raised);
  color: var(--s2026-ink-2);
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
}
.doc-light2 .segmented .nav-link.active .doc-conta-righe { background: var(--s2026-brand); color: #fff; }

/* CARD DELLA SCHEDA "DATI" — i campi della testata erano dodici controlli in fila senza
   gerarchia. Raggruppati in tre riquadri con un occhiello che dice cosa sono.
   ⚠ `.row` costa 12px per lato veri: il padding orizzontale della card e' ridotto di
   conseguenza, altrimenti i campi rientrerebbero il doppio. */
.doc-light2 .doc-card {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-2xl, 8px);
  padding: 12px 2px 4px;
  margin-bottom: 12px;
}
.doc-light2 .doc-card__eyebrow {
  padding: 0 12px 8px;
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
}

/* ELENCO DELLA RICERCA ARTICOLO — nome sopra, codice e prezzo sotto e in piccolo.
   ⚠ Il menu di jQuery UI e' agganciato al <body>, NON dentro .doc-light2: per questo queste
   regole non sono scoped come il resto del blocco. Il gancio e' `.doc-art-menu`, che il JS
   mette SOLO su questo menu: la classe `.ui-autocomplete` ce l'hanno tutti e sedici gli
   autocomplete del gestionale, e vestirla li cambierebbe tutti. */
.ui-autocomplete.doc-art-menu {
  padding: 6px;
  border: 1px solid var(--s2026-rule-strong);
  border-radius: var(--s2026-radius-2xl, 8px);
  background: var(--s2026-bg-panel);
  box-shadow: var(--s2026-shadow-card);
  max-height: 60vh;
  overflow-y: auto;
}
/* jQuery UI 1.14 da' alle voci `padding:3px 1em 3px .4em` piu' un `padding-left:2em` per
   l'icona che qui non c'e': stavano incollate ai bordi e strette in altezza. */
.doc-art-menu .ui-menu-item-wrapper {
  padding: 9px 12px;
  margin: 0;
  border: 0;
  border-radius: var(--s2026-radius-lg, 8px);
}
/* La banda della voce attiva era `#007fff` con bordo `#003eff` e `margin:-1px` (che la
   faceva debordare): blu di sistema, fuori dalla tavolozza. Ora e' il brand, e i testi
   dentro diventano bianchi — prima il nome restava scuro su fondo blu. */
.doc-art-menu .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  border: 0;
  background: var(--s2026-brand);
  color: var(--s2026-brand-fg);
}
.doc-art-menu .ui-state-active .doc-art__nome,
.doc-art-menu .ui-state-active .doc-art__meta,
.doc-art-menu .ui-state-active .doc-art__prezzo { color: var(--s2026-brand-fg); }

.doc-art-menu .doc-art { display: flex; flex-direction: column; gap: 2px; }
.doc-art-menu .doc-art__nome { font-weight: 600; color: var(--s2026-ink); line-height: 1.25; }
.doc-art-menu .doc-art__meta {
  display: flex; gap: 10px; align-items: baseline;
  font-size: var(--s2026-fs-xs, 11px);
  color: var(--s2026-ink-3);
}
.doc-art-menu .doc-art__prezzo { margin-left: auto; font-weight: 700; color: var(--s2026-ink-2); white-space: nowrap; }

/* RICERCA ARTICOLO — fissa in cima alla scheda Righe. Prima stava dietro a un bottone
   lente: sul telefono il gesto piu' frequente costava un tocco in piu' ogni volta. */
.doc-light2 .doc-cerca { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.doc-light2 .doc-cerca .form-control { flex: 1 1 auto; min-width: 0; }
.doc-light2 .doc-cerca .btn { flex: 0 0 auto; }

/* ACCESSI VELOCI — reparti come chip scorrevoli e articoli in griglia a due colonne.
   Prima: linguette che si stringevano sotto i 400px e bottoni a piena larghezza, uno per
   riga, che mangiavano tutto lo schermo. */
.doc-light2 .doc-veloci {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-2xl, 8px);
  overflow: hidden;
  margin-bottom: 12px;
}
.doc-light2 .doc-veloci__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 12px 0 14px;
  border: 0;
  background: transparent;
  color: var(--s2026-ink-2);
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.doc-light2 .doc-veloci__freccia { transition: transform .18s ease; color: var(--s2026-ink-3); }
.doc-light2 .doc-veloci__testa:not(.collapsed) .doc-veloci__freccia { transform: rotate(180deg); }
/* I reparti scorrono in orizzontale invece di stringersi.
   ⚠ Il contenitore porta anche la classe `.nav`, che serve al componente Tab di Bootstrap
   per riconoscerlo (vedi il commento nel template). Ma `.nav` impone `flex-wrap: wrap`:
   senza il `nowrap` qui sotto i chip andrebbero a capo invece di scorrere, e la fila
   orizzontale — il motivo per cui esistono — sparirebbe. */
.doc-light2 .doc-veloci__reparti {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 0 14px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.doc-light2 .doc-chip-reparto {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  border: 1px solid var(--s2026-rule-strong);
  background: var(--s2026-bg-panel);
  color: var(--s2026-ink-3);
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.doc-light2 .doc-chip-reparto.active {
  background: var(--s2026-brand);
  border-color: var(--s2026-brand);
  color: #fff;
}
.doc-light2 .doc-veloci__griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 14px 14px;
}
/* Un bottone per articolo, e basta: il fulmine accanto a ognuno raddoppiava gli elementi
   della griglia e rubava 44px al nome, che e' l'unica cosa da leggere. */
.doc-light2 .fast-btn {
  display: flex;
  align-items: center;              /* centrato anche quando il nome sta su una riga sola */
  min-width: 0;
  min-height: 48px;
  padding: 6px 10px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;              /* il nome puo' andare a capo */
  background: var(--s2026-brand-tint);
  border: 1px solid var(--s2026-bg-row-sel);
  border-radius: var(--s2026-radius-xl, 10px);
  color: var(--s2026-ink);
  cursor: pointer;
  overflow: hidden;
}
/* Due righe e poi i puntini: prima il nome veniva TAGLIATO a 22 caratteri dal server, e
   "V STAGIONALI OFFERTA" e "V STAGIONALI OFFERTE" si leggevano identici. Il clamp vuole
   -webkit-box sull'elemento del testo, per questo lo span dentro al bottone. */
.doc-light2 .fast-btn > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.doc-light2 .fast-btn:hover { background: var(--s2026-bg-row-hover); border-color: var(--s2026-brand); }
.doc-light2 .fast-btn:active { background: var(--s2026-bg-row-sel); }

@media (max-width: 400px) {
  /* sotto i 400px due colonne di bottoni con il fulmine accanto non ci stanno */
  .doc-light2 .doc-veloci__griglia { grid-template-columns: 1fr; }
}

/* LISTA RIGHE — card a due livelli, non piu' una tabella a cinque colonne.
   La forma viene dal mock "Documento Mobile" (Claude Design); i COLORI no: quello usa un
   arancione suo, qui si resta sui token --s2026-*, altrimenti nascerebbe un terzo sistema
   di colore accanto ai due che stiamo togliendo. */
.doc-light2 .righe-lista {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-2xl, 8px);
  overflow: hidden;
}
.doc-light2 .righe-lista__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--s2026-rule);
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
}
.doc-light2 .righe-lista__somma {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--s2026-fs-sm, 13px);
  color: var(--s2026-ink);
  font-variant-numeric: tabular-nums;
}
/* Tutta la card e' il bersaglio della modifica: l'icona matita da 20px spariva sotto il dito */
.doc-light2 .riga-doc {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid var(--s2026-rule);
  cursor: pointer;
}
.doc-light2 .riga-doc:last-child { border-bottom: 0; }
.doc-light2 .riga-doc:hover,
.doc-light2 .riga-doc:focus-visible { background: var(--s2026-bg-raised); outline: none; }
.doc-light2 .riga-doc__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
/* la descrizione sta su una riga intera: prima divideva lo spazio con quattro colonne */
.doc-light2 .riga-doc__descr {
  font-weight: 700;
  color: var(--s2026-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-light2 .riga-doc__dettaglio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--s2026-fs-sm, 13px);
  color: var(--s2026-ink-3);
}
.doc-light2 .riga-doc__totale {
  margin-left: auto;
  font-weight: 700;
  color: var(--s2026-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.doc-light2 .riga-doc__elimina {
  flex: 0 0 auto;
  width: 44px;                 /* bersaglio da pollice, non un'icona da 20px */
  border: 0;
  border-radius: var(--s2026-radius-2xl, 8px);
  background: transparent;
  color: var(--s2026-danger);
  font-size: 17px;
  cursor: pointer;
}
.doc-light2 .riga-doc__elimina:hover { background: var(--s2026-bg-raised); }

/* La riga appena salvata resta ACCESA finche' la lista non si ricarica di nuovo: "l'ho
   aggiunta o no?" era la domanda ricorrente, perche' la lista si ridisegna tutta e niente
   diceva quale riga fosse quella nuova. Un lampo iniziale attira l'occhio, poi si posa su
   una tinta tenue con la barretta del brand a sinistra, che regge anche dopo. */
.doc-light2 .riga-doc--nuova {
  background: var(--s2026-brand-tint);
  box-shadow: inset 3px 0 0 var(--s2026-brand);
  animation: doc-riga-nuova 1.4s ease-out 1;
}
@keyframes doc-riga-nuova {
  0%   { background: var(--s2026-bg-row-sel); }
  100% { background: var(--s2026-brand-tint); }
}
/* chi ha chiesto meno animazioni vede solo lo stato finale */
@media (prefers-reduced-motion: reduce) {
  .doc-light2 .riga-doc--nuova { animation: none; }
}

/* Stato vuoto: era un <h2> nudo con scritto NESSUNA RIGA PRESENTE */
.doc-light2 .righe-vuoto {
  padding: 28px 16px;
  text-align: center;
  color: var(--s2026-ink-3);
  background: var(--s2026-bg-panel);
  border: 1px dashed var(--s2026-rule-strong);
  border-radius: var(--s2026-radius-2xl, 8px);
}
.doc-light2 .righe-vuoto .bi { font-size: 26px; display: block; margin-bottom: 6px; }
.doc-light2 .righe-vuoto__titolo { font-weight: 700; color: var(--s2026-ink-2); }
.doc-light2 .righe-vuoto__aiuto { font-size: var(--s2026-fs-sm, 13px); margin-top: 2px; }

/* SEZIONI di "Altri dati" — l'interruttore diventa l'intestazione della sua sezione.
   ⚠ E' un `div`, NON un `<header>`: sublima_new.css veste ogni <header> del gestionale con
   sei regole di elemento nudo — bordo sopra, bordo sotto, uno sfondo con texture (:829) e,
   sotto i 767px, `padding-top:0 !important; padding-bottom:20px !important` (:2034).
   Quell'ultima vinceva su qualunque regola a classi e schiacciava il contenuto in alto
   PROPRIO sul telefono: era la causa del disallineamento, non un margine da ritoccare.
   Usare un elemento diverso toglie di mezzo tutte e sei senza una gara di !important. */
.doc-light2 .doc-sezione {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;          /* tutte le intestazioni della stessa altezza */
  margin: 14px 0 0;
  padding: 9px 14px;
  background: var(--s2026-bg-raised);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-2xl, 8px);
}
.doc-light2 .doc-sezione__titolo {
  display: flex;
  align-items: center;
  gap: 8px;                  /* l'icona si centra sul titolo, non sulla riga di testo */
  margin-right: auto;
  line-height: 1.2;
  font-weight: 600;
  font-size: var(--s2026-fs-sm, 13px);
  color: var(--s2026-ink-2);
}
.doc-light2 .doc-sezione--collassabile { cursor: pointer; }
.doc-light2 .doc-sezione__freccia { color: var(--s2026-ink-3); transition: transform .18s ease; }
/* Bootstrap toglie .collapsed quando il pannello e' aperto: la freccia segue lo stato */
.doc-light2 .doc-sezione--collassabile:not(.collapsed) .doc-sezione__freccia { transform: rotate(180deg); }

/* FOGLIO DELLA RIGA — l'articolo si compila in un pannello che sale dal basso,
   invece di aprirsi fra i comandi di ricerca e la lista, spingendola fuori schermo. */
.doc-light2 .foglio-riga { height: 88vh; }
.doc-light2 .foglio-riga .offcanvas-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--s2026-rule);
  background: var(--s2026-bg-raised);
}
.doc-light2 .foglio-riga .offcanvas-body { padding-bottom: 4px; }

/* I campi della riga a coppie: quantita' con l'unita' di misura, prezzo con lo sconto.
   Erano dieci `col-sm-12`, cioe' dieci blocchi impilati da scorrere per cambiare una
   quantita'. `.fr-largo` e' quello che occupa tutte e due le colonne. */
.doc-light2 .foglio-riga__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.doc-light2 .foglio-riga__campi > .fr-largo { grid-column: 1 / -1; }
/* Etichette di altezza fissa: due campi affiancati devono avere il CONTROLLO alla stessa
   quota, e basta un'etichetta piu' lunga che va a capo perche' si sfalsino. */
.doc-light2 .foglio-riga__campi .form-label,
.doc-light2 .doc-coppia .form-label,
.doc-light2 .fr-qta .form-label { display: block; min-height: 18px; margin-bottom: 3px; }

/* Quantita' e U.M.: NON meta' e meta'. La quantita' porta anche i due bottoni +/− e a
   mezza riga restava schiacciata; l'unita' di misura e' una sigla di due lettere. */
.doc-light2 .fr-qta { display: grid; grid-template-columns: 1fr 88px; gap: 0 10px; }
/* i bottoni del contatore si allineano all'altezza del campo, non la superano */
.doc-light2 .spinner .btn { padding-left: .7rem; padding-right: .7rem; }

/* Croce svuota-campo: stretta, non deve rubare spazio al numero */
.doc-light2 .doc-svuota { flex: 0 0 auto; padding-left: .65rem; padding-right: .65rem; color: var(--s2026-ink-3); }
.doc-light2 .doc-svuota:hover { color: var(--s2026-danger); }

/* Il netto si legge come un RISULTATO — fondo pieno, bordo tratteggiato, numero grande —
   ma resta scrivibile: sovrascriverlo e' sempre stato possibile e non si toglie. */
.doc-light2 .fr-netto .form-control {
  background: var(--s2026-bg-raised);
  border-style: dashed;
  font-size: 20px;
  font-weight: 700;
  color: var(--s2026-ink);
}
.doc-light2 .fr-netto .form-label { color: var(--s2026-ink-3); }
.doc-light2 .fr-netto__nota {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--s2026-bg-row-sel);
  color: var(--s2026-ink-3);
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Tre interruttori su una riga, etichetta accanto e non sopra */
.doc-light2 .fr-interruttori {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 2px 0 12px;
  padding: 10px 12px;
  background: var(--s2026-bg-raised);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-lg, 8px);
}
/* (il margine e l'allineamento dei .form-check li governa il blocco INTERRUTTORI qui sotto,
   una regola sola per tutti invece di una eccezione per contenitore) */

/* ───────────────────────────────────────────────────────────────────────────
   INTERRUTTORI — nativi di Bootstrap 5, non piu' il plugin bootstrapSwitch.
   Quel plugin costruiva un widget suo (Bootstrap 3 sotto sotto), con il glow celeste
   cablato e le etichette "Si/No" dentro il comando: un componente estraneo al design
   system, che s2026 poteva solo ritoccare dall'esterno.
   ⚠ Il tema brand qui e' scoped a `.doc-light2` e NON a `.s2026`: sotto .s2026 esiste
   solo dentro #filtriOffcanvas, e allargarlo a tutto il design system toccherebbe pagine
   su cui stanno lavorando altri. Quando si generalizza, queste tre regole spariscono.
   ─────────────────────────────────────────────────────────────────────────── */
.doc-light2 .form-check-input:checked {
  background-color: var(--s2026-brand);
  border-color: var(--s2026-brand);
}
.doc-light2 .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>");
}
.doc-light2 .form-check-input:focus {
  border-color: var(--s2026-brand);
  box-shadow: 0 0 0 2px var(--s2026-brand-tint);
}

/* ⚠ ALLINEAMENTO — Bootstrap 5.1.3 mette `float:left` sull'interruttore e gli riserva lo
   spazio con `padding-left` sul contenitore piu' un margine negativo. Essendo FLUORI DAL
   FLUSSO, il comando si incolla in cima alla riga: nessun `align-items` del genitore lo
   tocca, ed e' il motivo per cui interruttori ed etichette risultavano allineati in alto
   invece che centrati fra loro.
   Qui il float si annulla e `.form-check` diventa una riga flex vera: allora il centraggio
   verticale funziona, e cadono anche il padding e il margine negativo che servivano solo a
   fare posto al float. */
.doc-light2 .form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding-left: 0;
}
.doc-light2 .form-check .form-check-input { float: none; flex: 0 0 auto; margin: 0; }

/* Bersaglio da pollice. Il nativo e' 2em × 1em: su un telefono e' un francobollo, e questi
   interruttori accendono intere sezioni del documento. In px e non in em perche' devono
   restare della stessa misura ovunque, anche dove il testo e' piu' piccolo. */
.doc-light2 .form-switch .form-check-input { width: 52px; height: 30px; cursor: pointer; }

/* ⚠ Bootstrap dichiara `.form-check-label{opacity:.5}`: le etichette nascono mezze
   trasparenti, ed e' il motivo per cui si leggevano sbiadite. */
.doc-light2 .form-check-label {
  opacity: 1;
  margin: 0;
  cursor: pointer;
  font-size: var(--s2026-fs-sm, 13px);
  font-weight: 600;
  color: var(--s2026-ink-2);
}

/* ───────────────────────────────────────────────────────────────────────────
   CARD INTERNE (.doc-subcard) e RATE.
   Il blocco pagamenti era una riga di Bootstrap con due select, un bottone spinto giu' da
   due <br> e una tabella a due colonne: niente diceva che le prime due cose PRODUCONO la
   terza. Due card in sequenza lo dicono da sole.
   ─────────────────────────────────────────────────────────────────────────── */
.doc-light2 .doc-subcard {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-2xl, 8px);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.doc-light2 .doc-subcard__eyebrow {
  margin-bottom: 8px;
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
}

.doc-light2 .rate__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--s2026-rule);
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
}
/* Congruo o no: prima la pagina scriveva "I VALORI sono / non sono congrui", cioe' tutte e
   due le possibilita', perche' non aveva il dato per scegliere. */
.doc-light2 .rate__stato { text-transform: none; letter-spacing: 0; font-weight: 600; }
.doc-light2 .rate__stato--ok { color: var(--s2026-success); }
.doc-light2 .rate__stato--ko { color: var(--s2026-danger); }
.doc-light2 .rate__vuoto {
  padding: 14px 2px;
  font-size: var(--s2026-fs-sm, 13px);
  color: var(--s2026-ink-3);
}
/* Una rata per riga: numero, scadenza, importo. Erano due colonne di una tabella. */
.doc-light2 .rata {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--s2026-rule);
}
.doc-light2 .rata:last-child { border-bottom: 0; }
.doc-light2 .rata__n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 12px;
  background: var(--s2026-bg-row-sel);
  color: var(--s2026-ink-2);
  font-size: var(--s2026-fs-xs, 11px);
  font-weight: 700;
}
.doc-light2 .rata__corpo { flex: 1; min-width: 0; }
.doc-light2 .rata__data { font-weight: 600; color: var(--s2026-ink); }
.doc-light2 .rata__banca {
  font-size: var(--s2026-fs-xs, 11px);
  color: var(--s2026-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-light2 .rata__importo {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--s2026-ink);
}
/* Il pie' e' fisso: SALVA RIGA non si cerca scorrendo i campi. */
.doc-light2 .foglio-riga__footer {
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--s2026-rule);
  background: var(--s2026-bg-panel);
}
.doc-light2 .foglio-riga__footer .btn { flex: 1 1 0; }

/* Chiudi ridotto a icona quadrata: il primario della barra e' uno solo, Salva.
   ⚠ ALTEZZA: Salva e' `.btn-lg` (~48px) e questo un `.btn` normale (~38px), per giunta con
   `padding:0` che gli toglierebbe anche quel poco — si vedevano due bottoni affiancati di
   altezza diversa. `align-self:stretch` la prende dal fratello piu' alto della riga invece di
   fissarla a un numero, quindi resta pareggiata anche se domani Salva cambia taglia; il flex
   interno ricentra l'icona, e il `font-size` serve perche' `sublima_new.css:230` veste
   l'elemento `button` a 12px.
   COLORE: il bordo `--s2026-rule` era grigio chiaro su fondo chiaro e accanto al pieno del
   brand spariva. Ora e' brand: presente ma secondario, senza contendere l'azione principale.
   `-tint`/`-text`/`-fg` hanno tutti la variante notte nei token, quindi il tema scuro viene
   da se'. */
.doc-light2 .doc-barra__chiudi {
  flex: 0 0 auto;
  align-self: stretch;
  width: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--s2026-brand-tint);
  border-color: var(--s2026-brand);
  color: var(--s2026-brand-text);
}
.doc-light2 .doc-barra__chiudi:hover {
  background: var(--s2026-brand);
  border-color: var(--s2026-brand-deep);
  color: var(--s2026-brand-fg);
}

@media (max-width: 575.98px) {
  /* Sul telefono il totale sta sopra e la riga sotto ha Chiudi (icona) e Salva (largo). */
  .doc-light2 .doc-barra__totale { flex: 1 0 100%; margin-bottom: 6px; }
  .doc-light2 .doc-barra .salva_doc_class { flex: 1 1 auto; }
  .doc-light2 .doc-barra .salva_doc_class .btn { width: 100%; }
  .doc-light2 { padding-bottom: 140px; }
  .doc-light2 .foglio-riga { height: 92vh; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SETUP SUBLIMA — contenuto delle schede
   ═══════════════════════════════════════════════════════════════════════
   Stava in un <style> dentro `tpl/pg/setup/_setup_common_styles.html` e
   girava per meta' sulle classi di `sublima_ae_form.css` (`ae-section`,
   `ae-section-header`, `ae-field-note`): due sistemi per la stessa cosa, e
   il Setup si vedeva diverso da scheda a scheda. Ora il markup usa una sola
   famiglia (`setup-card`) e le regole stanno qui.

   Scope `.s2026` e non `.setup2026`: gli stessi partial `_setup_tab_*.html`
   si aprono anche nella scheda inline dell'anagrafica
   (`_setup_scheda_inline.html`, wrapper `.s2026 .setup-scheda-wrap`), e
   devono vedersi identici nei due posti. */

/* ── Titolo di scheda ─────────────────────────────────────────────────── */
.s2026 .setup-page-title{
    display:flex; align-items:center; gap:8px;
    margin:0 0 16px; padding-bottom:10px;
    font-size:var(--s2026-fs-xl); font-weight:700; letter-spacing:-0.3px;
    color:var(--s2026-ink);
    border-bottom:1px solid var(--s2026-rule);
}
.s2026 .setup-page-title i{ font-size:0.9em; color:var(--s2026-brand-text); }

/* ── Card di sezione ──────────────────────────────────────────────────────
   Niente ombra in hover: una card di form non e' cliccabile e l'ombra che si
   alza diceva il contrario. Niente `overflow:hidden`: tagliava le tendine
   select2 aperte sull'ultima riga. */
.s2026 .setup-card{
    margin-bottom:16px;
    border:1px solid var(--s2026-rule);
    border-radius:8px;
    background:var(--s2026-bg-panel);
    box-shadow:var(--s2026-shadow-card);
}
.s2026 .setup-card-body{ padding:16px; }

.s2026 .setup-card-head{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    padding:10px 16px;
    background:var(--s2026-bg-raised);
    border-bottom:1px solid var(--s2026-rule);
    border-radius:8px 8px 0 0;
}
.s2026 .setup-card-head__title{
    border-left:3px solid var(--s2026-brand);
    padding-left:12px;
}
.s2026 .setup-card-head__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 .setup-card-head__h{
    margin:2px 0 0;
    font-size:var(--s2026-fs-lg); font-weight:700; letter-spacing:-0.2px;
    color:var(--s2026-ink);
}
.s2026 .setup-card-head__h i{ margin-right:6px; font-size:0.9em; color:var(--s2026-brand-text); }

/* ── Chip di identita' nella testata ─────────────────────────────────── */
.s2026 .setup-chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 12px;
    border:1px solid var(--s2026-rule-strong); border-radius:999px;
    background:var(--s2026-bg-panel);
    font-size:var(--s2026-fs-sm); color:var(--s2026-ink-2);
}
/* Il codice licenza si copia e si detta al telefono: il monospaziato a
   0.875em del <code> di Bootstrap lo lasciava sotto gli 11px, e 1/l/I e 0/O
   non si distinguevano. */
.s2026 .setup-chip code{
    padding:0; background:transparent;
    font-family:var(--s2026-font-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size:1rem; font-weight:700; letter-spacing:0.06em;
    color:var(--s2026-ink);
}
.s2026 .setup-chip--avviso{
    border-color:var(--s2026-warning);
    background:var(--s2026-warning-bg);
    color:var(--s2026-warning-fg);
}
.s2026 .setup-chip--ok{
    border-color:var(--s2026-success);
    background:var(--s2026-success-bg);
    color:var(--s2026-success-fg);
}
.s2026 .setup-chip--ko{
    border-color:var(--s2026-danger);
    background:var(--s2026-danger-bg);
    color:var(--s2026-danger-fg);
}

/* ── Riquadro informativo dentro una card ─────────────────────────────────
   Sostituisce gli `alert alert-info` di Bootstrap: l'azzurro di serie non sta
   nella tavolozza e in dark mode restava un rettangolo chiaro in mezzo alla
   pagina scura. Qui e' un riquadro neutro col filetto brand a sinistra. */
.s2026 .setup-info{
    padding:14px 16px;
    border:1px solid var(--s2026-rule);
    border-left:3px solid var(--s2026-brand);
    border-radius:8px;
    background:var(--s2026-bg-raised);
    color:var(--s2026-ink-2);
    font-size:var(--s2026-fs-sm);
}
/* ── CONFIG-FIELD — schede di configurazione del Setup VD ──────────────
   Lo stesso <style> stava copiato in cinque partial (_setup_vd_5, 6_2, 6_3,
   6_4, 6_5) con i colori scritti a mano: #f8f9fa di fondo, #fff all'hover,
   #212529 sull'etichetta. In tema scuro restavano riquadri bianchi con dentro
   controlli scuri. Qui una volta sola e sui token, cosi' il chiaro e lo scuro
   vengono da soli. */
.s2026 .config-section{ display:flex; flex-direction:column; gap:1.5rem; }
.s2026 .config-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
    gap:2rem;
}
.s2026 .config-field{
    background:var(--s2026-bg-raised);
    border:1px solid var(--s2026-rule);
    border-radius:0.375rem;
    padding:1.25rem;
    transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.s2026 .config-field:hover{
    border-color:var(--s2026-rule-strong);
    background:var(--s2026-bg-panel);
    box-shadow:0 2px 4px rgba(0,0,0,0.05);
}
.s2026 .config-field .form-group{ margin-bottom:0.75rem; }
.s2026 .config-field label{
    display:block;
    margin-bottom:0.5rem;
    font-weight:600; font-size:0.95rem;
    color:var(--s2026-ink);
}
.s2026 .config-field select,
.s2026 .config-field input{
    border:1px solid var(--s2026-rule-strong);
    border-radius:0.25rem;
    padding:0.5rem 0.75rem;
    font-size:0.9rem;
}
.s2026 .config-field .form-control:focus{
    border-color:var(--s2026-brand);
    box-shadow:0 0 0 0.2rem var(--s2026-brand-tint);
}
.s2026 .config-description{
    margin-top:0.75rem;
    padding-top:0.75rem;
    border-top:1px solid var(--s2026-rule);
    font-size:0.85rem;
    color:var(--s2026-ink-3);
    line-height:1.4;
    font-style:italic;
}

/* Variante a interruttori della stessa scheda (_setup_vd_6_1): stessa cornice,
   il pill al posto del campo. Anche questa aveva i colori scritti a mano. */
.s2026 .card-toggles{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:1.5rem;
}
.s2026 .config-toggle{
    background:var(--s2026-bg-raised);
    border:1px solid var(--s2026-rule);
    border-radius:0.375rem;
    padding:1.25rem;
    transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.s2026 .config-toggle:hover{
    border-color:var(--s2026-rule-strong);
    background:var(--s2026-bg-panel);
    box-shadow:0 2px 4px rgba(0,0,0,0.05);
}
.s2026 .config-toggle label{
    display:block;
    margin-bottom:0.75rem;
    font-weight:600; font-size:0.95rem;
    color:var(--s2026-ink);
}
.s2026 .config-toggle .form-control{ max-width:80px; }

/* L'etichetta di un interruttore sta sotto il pill ed e' `display:block`: si
   prende tutta la larghezza della colonna, e siccome un <label for> e' cliccabile
   per tutta la sua area, bastava colpire il vuoto a destra del testo per
   accendere l'interruttore. `fit-content` la restringe al testo restando un
   blocco, quindi resta anche a capo rispetto al pill. */
.s2026 .form-check.form-switch + .control-label{
    width:fit-content;
    max-width:100%;
}

/* ── SETUP-TABLE — tabella semplice dentro una scheda di Setup ─────────
   Le tabelle del form di registrazione erano `table table-bordered
   table-striped table-responsive table-sm` con l'intestazione scritta a mano
   `style="color: whitesmoke"`: testo bianco su fondo bianco, quindi in tema
   chiaro le intestazioni non si leggevano. (E `table-responsive` su <table> non
   fa niente: in BS5 e' una classe da mettere sul contenitore.) */
.s2026 .setup-table{
    margin-bottom:0;
    /* senza un tetto la prima colonna si prende tutto lo spazio avanzato e le due
       colonne di scelta finiscono isolate al bordo destro */
    max-width:760px;
    color:var(--s2026-ink);
    --bs-table-bg:transparent;
    --bs-table-color:var(--s2026-ink);
    --bs-table-border-color:var(--s2026-rule);
}
.s2026 .setup-table > thead > tr > th{
    padding:8px 12px;
    background:var(--s2026-bg-raised);
    border-bottom:1px solid var(--s2026-rule-strong);
    font-size:var(--s2026-fs-micro); font-weight:700;
    letter-spacing:0.7px; text-transform:uppercase;
    color:var(--s2026-ink-3);
    white-space:nowrap;
}
.s2026 .setup-table > tbody > tr > td,
.s2026 .setup-table > tbody > tr > th{
    padding:8px 12px;
    border-bottom:1px solid var(--s2026-rule);
    vertical-align:middle;
    background:transparent;
}
/* sublima_new.css:4752 mette `border-left: 1px solid #e8e8e8` e
   `border-top: 1px solid #eceeef` su OGNI .table th/td: due grigi chiari fissi,
   che in tema scuro diventano le linee chiare fra le colonne. Qui la tabella si
   separa solo con la riga orizzontale, sul token. */
.s2026 .setup-table th,
.s2026 .setup-table td{
    border-left:0;
    border-right:0;
}
.s2026 .setup-table > thead > tr > th,
.s2026 .setup-table > tbody > tr:not(.setup-table__gruppo) > th,
.s2026 .setup-table > tbody > tr:not(.setup-table__gruppo) > td{
    border-top:0;
}
/* Riga-titolo di gruppo: separa le aree senza ripetere l'intestazione */
/* Riga-titolo di gruppo. Era in micro-maiuscolo su fondo trasparente: alla stessa
   quota visiva dei nomi dei campi, quindi non separava niente. Ora e' una fascia
   piena con il filetto brand a sinistra, come la testata di una setup-card: si
   vede a colpo d'occhio dove comincia un'area. */
/* La colonna piu' lunga del selettore serve: `.setup-table > tbody > tr > th`,
   la regola delle tabelle chiave/valore, e' (0,2,3) e batteva un (0,2,1),
   riportando fondo trasparente, peso 600 e colore ink-2. Con `tr.` davanti
   questo diventa (0,3,3) e vince. */
.s2026 .setup-table > tbody > tr.setup-table__gruppo > th{
    padding:11px 12px;
    background:var(--s2026-bg-raised);
    border-top:1px solid var(--s2026-rule-strong);
    border-bottom:1px solid var(--s2026-rule-strong);
    box-shadow:inset 3px 0 0 var(--s2026-brand);
    /* 14px contro i 12px dei campi: la differenza di corpo e' quello che li
       distingueva davvero poco */
    font-size:var(--s2026-fs-md); font-weight:700;
    letter-spacing:0.6px; text-transform:uppercase;
    color:var(--s2026-ink);
    white-space:nowrap;
}
/* il primo gruppo tocca l'intestazione: la riga sopra la disegna gia' lei */
.s2026 .setup-table > tbody > tr.setup-table__gruppo:first-child > th{ border-top:0; }
.s2026 .setup-table > tbody > tr:last-child > td{ border-bottom:0; }
/* tabelle chiave/valore (niente <thead>, l'etichetta e' il <th> di riga) */
.s2026 .setup-table > tbody > tr > th{
    font-weight:600; color:var(--s2026-ink-2); white-space:nowrap;
}
/* Variante larga: quando una colonna contiene una select invece di un SI/NO,
   760px stanno stretti (metodi di pagamento). */
.s2026 .setup-table--larga{ max-width:none; }
.s2026 .setup-table--larga .setup-table__scelta{ width:90px; }
/* le colonne di scelta stanno strette: dentro c'e' un SI/NO */
.s2026 .setup-table__scelta{ width:1%; white-space:nowrap; }
.s2026 .setup-table .select2-container{ min-width:96px; }
.s2026 .setup-table .setup-field-description{ margin-top:4px; }

/* Respiro tra due righe di campi consecutive: senza questo gli interruttori della
   seconda riga stanno appiccicati sotto i campi della prima. Solo tra righe
   (`+ .row`), cosi' l'ultima non aggiunge spazio in fondo alla scheda. */
.s2026 .setup-card-body .row + .row{ margin-top:22px; }
/* SETUP-GROUP — raggruppa piu' righe di campi dentro una scheda, quando i
   riquadri sarebbero troppi (Template base: Filtri, Elenco, Scheda prodotto).
   Stesso trattamento delle righe-titolo delle setup-table: filetto brand a
   sinistra e maiuscoletto, cosi' il titolo non si confonde con le etichette
   dei campi. */
.s2026 .setup-group + .setup-group{ margin-top:26px; }
.s2026 .setup-group__title{
    margin-bottom:14px;
    padding:8px 12px;
    background:var(--s2026-bg-raised);
    border-top:1px solid var(--s2026-rule-strong);
    border-bottom:1px solid var(--s2026-rule-strong);
    box-shadow:inset 3px 0 0 var(--s2026-brand);
    font-size:var(--s2026-fs-md);
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--s2026-ink);
}
/* dentro un gruppo la prima riga non ha bisogno dello stacco delle .row + .row */
.s2026 .setup-group > .row:first-of-type{ margin-top:0; }
/* Elenco di rimandi ad altre sezioni: la <ul> nuda erediterebbe il rientro del
   browser e il corpo del testo del gestionale. */
.s2026 .setup-elenco{
    margin:0;
    padding-left:20px;
    color:var(--s2026-ink-2);
    font-size:var(--s2026-fs-md);
    line-height:1.7;
}
.s2026 .setup-elenco li + li{ margin-top:6px; }

/* Etichette di lunghezza diversa nella stessa riga: quella che va a capo occupa
   due righe e si porta giu' il proprio campo, sfalsando la riga. Riservando due
   righe a tutte le etichette della scheda, i campi partono dalla stessa quota.

   Perche' non col flex: rendere flex la colonna affianca gli elementi dove la
   colonna contiene piu' di un blocco (titolo + testo + <hr>), e allungare il
   .form-group a height:100% lo fa sbordare nelle quattordici colonne dove ha un
   <p> come fratello. Il min-height non ha nessuno dei due effetti.

   Sono escluse le etichette degli interruttori, che stanno SOTTO il pill: la',
   una riga in piu' sarebbe solo spazio vuoto. */
.s2026 .setup-card-body .row > [class*="col-"] > .form-group > .control-label:first-child{
    display:block;
    min-height:2.4em;   /* due righe alla dimensione dell'etichetta */
}

/* Stacco dal contenuto che segue. Solo se il riquadro NON e' l'ultimo figlio:
   quando sta da solo dentro un pannello non deve aggiungere spazio in fondo. */
.s2026 .setup-info:not(:last-child){ margin-bottom:20px; }
.s2026 .setup-info__h{
    display:flex; align-items:center; gap:8px;
    margin:0 0 10px;
    font-size:var(--s2026-fs-lg); font-weight:700; letter-spacing:-0.2px;
    color:var(--s2026-ink);
}
.s2026 .setup-info__h i{ color:var(--s2026-brand-text); }
/* Varianti di stato del riquadro: cambia solo il filetto a sinistra, piu' un
   fondo appena tinto. Nate col Setup Vendita Dettaglio, che aveva sei
   `alert alert-info/warning/success` di Bootstrap — colori fuori tavolozza e, in
   tema scuro, rettangoli chiari in mezzo alla pagina. */
.s2026 .setup-info--avviso{ border-left-color:var(--s2026-warning); background:var(--s2026-warning-bg); }
.s2026 .setup-info--ok{     border-left-color:var(--s2026-success); background:var(--s2026-success-bg); }
.s2026 .setup-info--ko{     border-left-color:var(--s2026-danger);  background:var(--s2026-danger-bg);  }
.s2026 .setup-info__sub{
    display:flex; align-items:center; gap:8px;
    margin:16px 0 8px;
    font-size:var(--s2026-fs-micro); font-weight:600;
    letter-spacing:0.7px; text-transform:uppercase;
    color:var(--s2026-ink-3);
}

/* ── Sotto-sezione dentro la stessa card ─────────────────────────────── */
.s2026 .setup-sezione{
    margin-top:20px; padding-top:16px;
    border-top:1px solid var(--s2026-rule-2);
}
.s2026 .setup-sezione__titolo{
    margin-bottom:12px;
    font-size:var(--s2026-fs-micro); font-weight:600;
    letter-spacing:0.7px; text-transform:uppercase;
    color:var(--s2026-ink-3);
}

/* ── Campi ────────────────────────────────────────────────────────────────
   Erano le regole `#ae_form ...` di sublima_ae_form.css: stessi valori, ma
   agganciate al wrapper della pagina invece che all'id del form, cosi' il
   Setup non dipende piu' da quel foglio. */
.s2026 .setup2026 .form-label,
.s2026 .setup-scheda-wrap .form-label{
    font-size:0.88rem; font-weight:600; letter-spacing:0.02em;
    margin-bottom:4px; color:var(--s2026-ink);
}
.s2026 .setup2026 .form-control,
.s2026 .setup2026 .form-select,
.s2026 .setup-scheda-wrap .form-control,
.s2026 .setup-scheda-wrap .form-select{ font-size:0.95rem; }

.s2026 .setup2026 .form-check.form-switch,
.s2026 .setup-scheda-wrap .form-check.form-switch{ padding-top:6px; }
.s2026 .setup2026 .form-check.form-switch .form-check-input,
.s2026 .setup-scheda-wrap .form-check.form-switch .form-check-input{
    width:2.8em; height:1.4em; cursor:pointer;
}
.s2026 .setup2026 .form-check.form-switch .form-check-label,
.s2026 .setup-scheda-wrap .form-check.form-switch .form-check-label{
    font-size:0.88rem; font-weight:400; padding-top:2px; cursor:pointer;
}

/* Spiegazione sotto un campo. `display:block` non e' decorativo: <small> e
   <span> sono inline e il wrapper degli interruttori e' inline-flex, quindi
   la spiegazione si accodava sulla stessa riga dell'etichetta. */
.s2026 .setup-field-description{
    display:block;
    font-size:0.8rem; line-height:1.35;
    margin-top:4px;
    color:var(--s2026-ink-3);
}
.s2026 .setup-field-warning{
    display:block;
    font-size:0.8rem; line-height:1.35; font-weight:500;
    margin-top:4px;
    color:var(--s2026-danger-text, var(--s2026-danger));
}

/* ── Ponte per le schede in idioma BS3 ────────────────────────────────────
   Prima Nota, Marketplace, Franchising, Trasmissioni, Ticket, API e CLD
   usano ancora `form-group` + `control-label`. Finche' il markup non si
   riscrive, qui si allineano al vestito delle altre. */
.s2026 .form-group{ margin-bottom:16px; }
.s2026 .form-group > .control-label,
.s2026 label.control-label{
    display:block; margin-bottom:4px;
    font-size:0.88rem; font-weight:600; letter-spacing:0.02em;
    color:var(--s2026-ink);
}
/* La (i) delle info sta nel DOM subito DOPO la <label>, che la regola qui sopra rende
   `display:block`: l'icona finiva a capo, SOTTO l'etichetta invece che di fianco.
   `:has(+ ...)` colpisce le sole label che hanno davvero l'icona accanto, cosi' le
   etichette degli interruttori (che stanno sotto il pill) e quelle delle setup-card
   restano blocchi come prima. Specificita' (0,3,0) — il `:has` conta come una classe —
   quindi batte `.s2026 label.control-label` (0,2,1). Senza supporto a :has() si ricade
   nel comportamento attuale (icona a capo), non in un layout rotto. */
.s2026 .control-label:has(+ .info-label-popup-icon),
.artedit2026 .control-label:has(+ .info-label-popup-icon){
    display:inline-block; margin-right:2px;
}
/* `red-sublima` era il rosso dei campi del vecchio tema: su fondo scuro era
   illeggibile. `!important` serve perche' la regola legacy in
   sublima_new.css dichiara gia' `color` con `!important`. */
.s2026 .control-label.red-sublima,
.s2026 .col-sm-12.red-sublima{
    color:var(--s2026-ink) !important;
    font-weight:600;
}
/* `input-sm` e' BS3 e in BS5 non esiste piu': i campi che ce l'hanno
   restavano alti mentre i vicini erano compatti. */
.s2026 .form-control.input-sm{ font-size:0.875rem; padding:4px 10px; }
/* Titoli scritti come <h3> nudi dentro la colonna. */
.s2026 .tab-pane > .row h3,
.s2026 .tab-pane > .row > .col-sm-12 > h3{
    font-size:var(--s2026-fs-lg); font-weight:700; letter-spacing:-0.2px;
    color:var(--s2026-ink);
}

/* ── Rientro orizzontale ──────────────────────────────────────────────────
   Le schede sono nate in momenti diversi e si incapsulano in modo diverso:
   chi in `container-fluid` + `row` + `col`, chi in una sola `row`, chi in
   niente. Coi padding di Bootstrap le card partivano da quattro ascisse
   diverse e cambiando voce si vedeva il contenuto spostarsi. Si azzerano
   solo gli incapsulamenti che stanno FRA il pannello e le card: le `row`
   dentro le card, che impaginano i campi, restano quelle di Bootstrap. */
/* :has(...card) OBBLIGATORIO (aggiunto il 2026-08-28). Senza, la regola azzerava
   il padding di OGNI colonna figlia di una row a ridosso del pannello, comprese
   quelle che impaginano i campi: in ae_dati_azienda (tab 1 anagrafica, tab 3
   dati/FE) gli input finivano attaccati, senza un pixel di gutter fra una
   colonna e l'altra. L'allineamento che questa regola vuole ottenere riguarda
   solo gli incapsulamenti FRA il pannello e le card, quindi si limita alle row
   che una card la contengono davvero. */
.s2026 .tab-content .container-fluid{ padding-left:0; padding-right:0; }
.s2026 .tab-content .tab-pane > .row:has(.artedit2026-card),
.s2026 .tab-content .tab-pane > .row:has(.art-card),
.s2026 .tab-content .tab-pane > div > .row:has(.artedit2026-card),
.s2026 .tab-content .tab-pane > div > .row:has(.art-card),
.s2026 .tab-content .tab-pane > .container-fluid > .row:has(.artedit2026-card),
.s2026 .tab-content .tab-pane > .container-fluid > .row:has(.art-card),
.s2026 .tab-content .tab-pane > div > .container-fluid > .row:has(.artedit2026-card),
.s2026 .tab-content .tab-pane > div > .container-fluid > .row:has(.art-card){
    margin-left:0; margin-right:0;
}
.s2026 .tab-content .tab-pane > .row:has(.artedit2026-card) > [class*="col-"],
.s2026 .tab-content .tab-pane > .row:has(.art-card) > [class*="col-"],
.s2026 .tab-content .tab-pane > div > .row:has(.artedit2026-card) > [class*="col-"],
.s2026 .tab-content .tab-pane > div > .row:has(.art-card) > [class*="col-"],
.s2026 .tab-content .tab-pane > .container-fluid > .row:has(.artedit2026-card) > [class*="col-"],
.s2026 .tab-content .tab-pane > .container-fluid > .row:has(.art-card) > [class*="col-"],
.s2026 .tab-content .tab-pane > div > .container-fluid > .row:has(.artedit2026-card) > [class*="col-"],
.s2026 .tab-content .tab-pane > div > .container-fluid > .row:has(.art-card) > [class*="col-"]{
    padding-left:0; padding-right:0;
}

/* Le sotto-schede di Documenti e Articoli aggiungono un altro giro di
   `row` + `col` fra il pannello e le card: senza questo restavano rientrate
   di 8px rispetto a tutte le altre voci. Le colonne li' sono sempre a tutta
   larghezza, quindi azzerarne il gutter non affianca niente. */
.s2026 .documenti-subtab > div > .row,
.s2026 .articoli-subtab > div > .row{ margin-left:0; margin-right:0; }

/* Il respiro fra le card lo da' il loro `margin-bottom:16px`. Le sotto-schede
   di Documenti mettono ogni card in una colonna di una `row g-3`, e il
   gutter verticale della riga (16px) si sommava a quel margine: li' le card
   stavano a 32px l'una dall'altra contro i 16px di tutte le altre voci.
   Si azzera il gutter SOLO su queste righe di primo livello — quelle dentro
   le card, che impaginano i campi, tengono il loro. */
.s2026 .tab-content .tab-pane > .row,
.s2026 .tab-content .tab-pane > div > .row,
.s2026 .tab-content .tab-pane > .container-fluid > .row,
.s2026 .tab-content .tab-pane > div > .container-fluid > .row,
.s2026 .documenti-subtab > div > .row,
.s2026 .articoli-subtab > div > .row{ --bs-gutter-y:0; }
.s2026 .documenti-subtab > div > .row > [class*="col-"],
.s2026 .articoli-subtab > div > .row > [class*="col-"]{ padding-left:0; padding-right:0; }

@media (max-width:768px){
    .s2026 .setup-page-title{ font-size:var(--s2026-fs-lg); }
}

/* ============================================================================
   SETUP SUBLIMA — shell della pagina (sidebar + colonne + testata)
   ============================================================================
   Erano un <style> inline in setup_sublima.html. Spostate qui quando il Setup
   Vendita Dettaglio (setup_sublima_vd.html) e' stato portato sulla stessa shell:
   due pagine con lo stesso guscio non possono avere il CSS nel template di una
   delle due. Stesso motivo, e stessa destinazione, di _setup_common_styles.html.
   Tutto scoped .setup2026 / .setup2026-side: fuori da quel wrapper e' inerte.
   ============================================================================ */
/* setup_sublima — shell s2026, sidebar accordion (rif. ae_ruolo), scoped .setup2026-side */
/* La sidebar scorre per conto suo: l'altezza la fissa syncSide() (custom_js)
   allineandola a quella della .tab-content, cosi' la riga non cresce oltre la
   card e la pagina non prende una seconda scrollbar. */
.setup2026-side {
    position: sticky;
    top: 0;
    border-right: 1px solid var(--s2026-rule-2);
    padding-right: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;                       /* Firefox */
    scrollbar-color: var(--s2026-rule-strong) var(--s2026-bg-raised);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--s2026-rule-2);
}
/* scrollbar neutra, stessa della .tab-content (sublima2026.css) */
.setup2026-side::-webkit-scrollbar { width: 12px; }
.setup2026-side::-webkit-scrollbar-track { background: var(--s2026-bg-raised); }
.setup2026-side::-webkit-scrollbar-thumb {
    background: var(--s2026-rule-strong);
    border-radius: 6px;
    border: 2px solid var(--s2026-bg-raised);
}
.setup2026-side::-webkit-scrollbar-thumb:hover { background: var(--s2026-ink-4); }
/* ---- Assetto gia' al PRIMO PAINT (niente scrollbar di pagina che sparisce dopo) ----
   Misurato prima di questa regola: documento 8910px su viewport 900 (+8010 di scroll),
   riassorbito solo quando partiva il JS. Due cause, entrambe pre-JS:
   1) i 10 .tab-pane sono tutti visibili finche' showTab() non chiama .hide() — qui la
      visibilita' e' gestita in jQuery, non con .active di Bootstrap, quindi il CSS di
      BS5 (.tab-content > .tab-pane{display:none}) non li copre tutti;
   2) la .tab-content non ha altezza finche' non gliela mette fitEditShell().
   Sotto: default nascosto + tab Generale aperto, e altezza di partenza a viewport.
   Sono entrambi valori di partenza: showTab() usa .show()/.hide(), che scrivono
   display inline e battono queste regole, e fitSetup() sovrascrive height al pixel. */
.setup2026 .tab-content > .tab-pane,
.setup2026 .tab-content .tab-pane { display: none; }
.setup2026 .tab-content #tabs-1 { display: block; }
/* 150px NON e' un valore a occhio: e' esattamente quello che fitSetup() calcola a
   regime (top della .tab-content 134 + margine sotto la card 16 -> 750px su viewport
   900). Tenerli allineati e' cio' che evita il salto: con 250px la card nasceva a
   737px e si allungava a 837 al primo frame utile. Se il layout cambia, il JS
   corregge comunque al pixel subito dopo. */
.setup2026 .tab-content,
.setup2026-col { height: calc(100vh - 150px); }
/* Il footer azioni sta sotto la sidebar, dentro la colonna di sinistra: a tutta
   larghezza in fondo alla card rubava ~74px di altezza alla colonna di destra.
   L'altezza la porta la colonna; la sidebar si prende quel che avanza sopra il
   footer (min-height:0 e' necessario perche' un flex item scrolli davvero). */
/* La colonna porta l'altezza e la sidebar, unico flex:1, si prende quel che avanza
   sopra il Salva. min-height:0 e' cio' che le permette di scrollare davvero: senza,
   un flex item non scende sotto la sua altezza di contenuto. La separazione dalla
   colonna di destra la fa il border-right della sidebar (regola in cima). */
/* ---- Distanza sidebar <-> contenuto ----
   Erano 55px dal bordo della sidebar al primo box, sommati da cinque contributi
   indipendenti: padding-right sidebar (14) + padding-right colonna sx (12) +
   padding-left colonna dx (12) + margin-left .tab-content (6) + padding-left (6).
   Nessuno era abbastanza grande da saltare all'occhio da solo, ma sommati si'.
   Il margine destro della .tab-content resta com'e': li' serve, e' il bordo card. */
.setup2026 .row > .setup2026-col { padding-right: 4px; }
.setup2026 .row > .col-lg-9 { padding-left: 4px; }
.setup2026-side { padding-right: 8px; }
.setup2026.ae-shell .tab-content { margin-left: 0; padding-left: 4px; }

.setup2026-col { display: flex; flex-direction: column; }
.setup2026-col > .setup2026-side {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    /* Chiude la sidebar e la stacca dal Salva: senza, l'elenco delle voci e il
       bottone si toccavano senza niente in mezzo. Sta sulla sidebar e non sul
       bottone perche' un border-top li' sarebbe letto come bordo del bottone.
       La sidebar scrolla, ma il bordo appartiene al box e non scorre col
       contenuto: resta una linea ferma sopra il Salva. */
    border-bottom: 1px solid var(--s2026-rule);
}
.setup2026-col #submitButton2 {
    flex: 0 0 auto;
    /* Il margine sotto non e' decorativo: la colonna e' alta quanto la
       .tab-content, quindi senza questo il bottone finiva appoggiato al
       bordo inferiore della card, senza respiro. */
    margin: 14px 0 14px;
    justify-content: center;
    padding: 12px 20px;
}
.setup2026-side .accordion-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--s2026-rule-2);
}
.setup2026-side .accordion-item:last-child { border-bottom: none; }
/* fs-md (14px) invece di fs-xs (11px): la sidebar e' l'unica navigazione della
   pagina e a 11px si leggeva peggio del contenuto che indicizza. Il padding sale
   con il testo per non stringere le voci. */
.setup2026-side .accordion-button {
    padding: 8px 10px;
    color: var(--s2026-ink);
    background: transparent;
    font-weight: 600;
    font-size: var(--s2026-fs-md);
    min-height: 0;
    box-shadow: none;
}
/* La freccia dell'expander: cresce col testo e soprattutto SEGUE IL COLORE DEL TESTO.
   L'icona di default di BS5 e' una background-image SVG con il fill scritto dentro
   l'URL (#212529 fisso): non eredita nulla, quindi spariva sul fondo scuro del dark
   e sul brand pieno della voce attiva. Qui l'SVG diventa una mask e il colore lo da'
   background-color:currentColor, cosi' e' sempre in contrasto con la voce, in
   entrambi i temi e in ogni stato. Il tratto e' anche piu' spesso (2px) del chevron
   BS5 originale, che a 14px risultava esile. */
.setup2026-side .accordion-button::after {
    width: 1.05rem;
    height: 1.05rem;
    background-image: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 1;
}
/* !important: sublima_new.css ha ".nav>li>a:hover{background-color:#aa0000 !important}"
   che altrimenti tinge di rosso pieno le voci della sidebar al passaggio del mouse. */
.setup2026-side .accordion-button:hover { background: var(--s2026-bg-row-hover) !important; color: var(--s2026-brand-text) !important; }
.setup2026-side .accordion-button:focus { box-shadow: none; }
.setup2026-side .accordion-button:not(.collapsed) {
    color: var(--s2026-brand-text);
    background: transparent;
}
.setup2026-side .accordion-button--flat::after { display: none; }
.setup2026-side .accordion-body {
    padding: 0 0 4px;
}
/* Sottovoci alla stessa misura delle principali (14px): la gerarchia la reggono
   il peso (500 contro 600), il rientro e il colore piu' tenue, che bastano —
   il mezzo punto di differenza in meno non si vedeva comunque. */
.setup2026-side .nav-second-level a {
    display: block;
    font-weight: 500;
    font-size: var(--s2026-fs-md);
    color: var(--s2026-ink-2, var(--s2026-ink));
    padding: 6px 10px 6px 24px;
    border-radius: var(--s2026-radius-xs);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
}
.setup2026-side .nav-second-level a:hover {
    background: var(--s2026-brand) !important;
    color: var(--s2026-brand-fg) !important;
}
/* "Base" apre un terzo livello ma era scritta esattamente come "Web20", che
   invece e' una voce semplice: stessa misura, stesso rientro, nessun segno che
   ci fosse qualcosa sotto. Qui prende il chevron delle voci di gruppo (stessa
   mask, stesso spessore) che ruota all'apertura; le voci semplici restano
   pulite, cosi' la freccia distingue le due cose. */
.setup2026-side .nav-second-level a.nav-link-collapse {
    display: flex;
    align-items: center;
    gap: 6px;
}
.setup2026-side .nav-second-level a.nav-link-collapse::after {
    content: "";
    width: .95rem;
    height: .95rem;
    margin-left: auto;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .2s ease-in-out;
}
/* BS5 tiene aria-expanded aggiornato sul comando, non una classe sul terzo
   livello: e' quello il gancio giusto per la rotazione. */
.setup2026-side .nav-second-level a.nav-link-collapse[aria-expanded="true"]::after {
    transform: rotate(-180deg);
}
/* Le sottovoci di "Base" stavano nello stesso rientro di "Base" stessa (la ul
   annidata e' anch'essa .nav-second-level, quindi ereditava il padding del
   secondo livello): il quarto livello ora rientra, e la linea verticale tiene
   insieme il gruppo. */
.setup2026-side .nav-second-level .nav-second-level {
    margin-left: 22px;
    border-left: 1px solid var(--s2026-rule);
}
.setup2026-side .nav-second-level .nav-second-level a {
    padding-left: 14px;
    font-size: var(--s2026-fs-sm);
}
.setup2026-side .accordion-button--flat {
    display: block;
    text-decoration: none;
    cursor: pointer;
}
.setup2026-side .active_setupp,
.setup2026-side .active_articoli_subtab,
.setup2026-side .active_documenti_subtab {
    background: var(--s2026-brand) !important;
    color: var(--s2026-brand-fg) !important;
}
/* I link agli altri Setup (Vendita Dettaglio, Web, Gusto) sono la sola via
   per passare da un profilo all'altro: alla misura base del bottone
   (13px / 9px 20px) si perdevano nella testata. Qui stanno piu' larghi. */
.setup2026 .page-header__actions .artedit2026-btn {
    font-size: 14.5px;
    padding: 11px 24px;
    gap: 9px;
}
.setup2026 .page-header__actions .artedit2026-btn i {
    font-size: 1.1em;
}
/* Outline nel colore azienda: sono link di navigazione fra profili, non
   azioni di scrittura, quindi bordo e testo brand su fondo pieno; il pieno
   arriva solo al passaggio del mouse. */
.setup2026 .page-header__actions .artedit2026-btn--outline {
    border-color: var(--s2026-brand);
    color: var(--s2026-brand-text);
    background: var(--s2026-bg-panel);
}
.setup2026 .page-header__actions .artedit2026-btn--outline:hover {
    background: var(--s2026-brand);
    border-color: var(--s2026-brand-deep);
    color: var(--s2026-brand-fg);
}

/* ============================================================================
   PASTIGLIA DI TINTA — colore di una categoria / famiglia / reparto articolo
   ----------------------------------------------------------------------------
   La tinta arriva UNA sola, dal blob `ui` del record (lib/ui_anagrafica.py), e
   la si passa come custom property inline:

       <span class="s2026-tinta" style="--s2026-tinta-c:#2C5F8A">Bevande</span>

   Non esiste un colore per il tema chiaro e uno per il tema scuro: fondo,
   testo e bordo si RICAVANO dalla stessa tinta con color-mix(), e il blocco
   [data-theme="dark"] qui sotto rifà gli stessi tre conti con percentuali
   diverse. È la ricetta con cui il colore azienda genera i token --s2026-brand-*
   in tpl/pg/head.html.

   NON è scopata sotto .s2026: la pastiglia esce anche dai formatter di
   bootstrap-table su pagine che quel contenitore non ce l'hanno. Il prefisso
   nel nome della classe è già il suo spazio dei nomi.

   Contrasti misurati sul PEGGIOR caso delle 24 tinte di lib/colori_azienda.py
   (script rifatto il 2026-08-28, non stimato):

                              testo/fondo   fondo/riga   bordo/riga
     tema chiaro                 5,56:1       1,15:1       1,80:1
     tema scuro                  5,02:1       1,49:1       4,21:1

   Il fondo si stacca poco dalla riga in entrambi i temi — è voluto: in una
   lista di venti righe una pastiglia a tinta piena urla. A dare il contorno è
   il bordo, e a portare l'identità è il testo, che sta sopra 4,5:1 ovunque.
   ========================================================================== */
.s2026-tinta {
    /* Fallback per chi non ha color-mix (< Chrome 111 / Safari 16.2): tinta
       piena e testo bianco. Le 24 tinte stanno tutte a >= 4,5:1 dal bianco,
       quindi il ripiego si legge — è solo più acceso. */
    --s2026-tinta-c: #4A4A4A;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    max-width: 100%;
    padding: .12em .6em;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: var(--s2026-fs-xs, .78rem);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--s2026-tinta-c);
    color: #fff;

    background: color-mix(in srgb, var(--s2026-tinta-c) 15%, #FFFFFF);
    color: color-mix(in srgb, var(--s2026-tinta-c) 85%, #000000);
    border-color: color-mix(in srgb, var(--s2026-tinta-c) 40%, #FFFFFF);
}

/* Il neutro del fondo scuro è #454D5C e NON --s2026-bg-panel: mescolare una
   tinta scura (L* 28-46) dentro un pannello altrettanto scuro lascia la
   pastiglia a 1,0:1 dalla riga, cioè invisibile se non per la sfumatura. Il
   neutro più chiaro è ciò che la fa sedere SOPRA la riga. */
[data-theme="dark"] .s2026-tinta {
    background: color-mix(in srgb, var(--s2026-tinta-c) 25%, #454D5C);
    color: color-mix(in srgb, var(--s2026-tinta-c) 30%, #FFFFFF);
    border-color: color-mix(in srgb, var(--s2026-tinta-c) 55%, #FFFFFF);
}

/* Il pallino: la pastiglia con la sola tinta, senza testo, per le liste strette
   e per le celle dove il nome del record c'è già nella colonna accanto. */
.s2026-tinta--pallino {
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 50%;
    background: var(--s2026-tinta-c);
    border-color: color-mix(in srgb, var(--s2026-tinta-c) 70%, #000000);
}
[data-theme="dark"] .s2026-tinta--pallino {
    background: var(--s2026-tinta-c);
    border-color: color-mix(in srgb, var(--s2026-tinta-c) 45%, #FFFFFF);
}

/* Figura del record nelle liste e nell'anteprima della scheda. */
.s2026-figura {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: var(--s2026-radius-sm, 4px);
    border: 1px solid var(--s2026-rule, #E4E6EB);
    background: var(--s2026-bg-raised, #FAFAFC);
}

/* Barra di avanzamento in navigazione — filo appena sotto l'header, fra il click
   su un link e il primo disegno della pagina nuova. Creata e pilotata da
   SublimaUI.navProgress (sublima2026_ui.js), nessuna pagina la include a mano.
   `top` lo scrive il JS misurando l'inizio della pagina: la barra scende da sola
   quando sopra c'e' anche la banda DEMO, senza costanti da mantenere.
   z-index sopra la navbar (1030), sotto l'overlay a 100000. */
.s2026-navprogress {
    position: fixed;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    /* Brand pieno: la barra corre sul fondo pagina (sotto tutte le fasce), dove
       la tinta dell'azienda si legge sia sul chiaro sia sullo scuro. Non spostarla
       fra navbar e banda DEMO: li' finirebbe su bordeaux e sparirebbe. */
    background: var(--s2026-brand, #2563EB);
    box-shadow: 0 0 6px color-mix(in srgb, var(--s2026-brand, #2563EB) 55%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: width .18s ease-out, opacity .25s ease;
}

.s2026-navprogress.is-attiva {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .s2026-navprogress { transition: none; }
}