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

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

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

/* ---------- Page header + KPI strip ---------- */
.s2026 .page-header {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-lg);
  box-shadow: var(--s2026-shadow-card);
  margin-bottom: 12px;
}
/* Header come banda superiore DENTRO la card (così edit/chiusura lo nascondono
   insieme alla lista via $(".card").hide()/.show() — vedi sublima.js edit_row) */
.s2026 .page-header--incard {
  border: 1px solid var(--s2026-brand);
  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);
}
.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); }
.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);
}
.s2026 .segmented .nav-link:hover { color: var(--s2026-ink); }
.s2026 .segmented .nav-link.active {
  color: var(--s2026-brand);
  background: var(--s2026-bg-panel);
  box-shadow: var(--s2026-shadow-tab);
}
/* Override: sublima_new.css usa "#anagraficatab li a(.active)" con !important → serve !important.
   Non-active: nessun bordo (elimina il bordo inset nero spurio) + nessuna ombra.
   Active: bordo bordeaux + testo bordeaux + ombra → indicatore inequivocabile. */
.s2026 #anagraficatab.segmented .nav-link {
  background: transparent !important;
  color: var(--s2026-ink-2) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.s2026 #anagraficatab.segmented .nav-link:hover { background: transparent !important; color: var(--s2026-ink) !important; }
.s2026 #anagraficatab.segmented .nav-link.active {
  background: var(--s2026-bg-panel) !important;
  color: var(--s2026-brand) !important;
  border: 1px solid var(--s2026-brand) !important;
  box-shadow: var(--s2026-shadow-tab) !important;
}

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

/* Override scoped dei bottoni della toolbar condivisa (#toolbar) */
.s2026 #toolbar .btn { border-radius: var(--s2026-radius); font-weight: 600; }
.s2026 #toolbar .btn-warning,
.s2026 #toolbar .add_row_button {
  background: var(--s2026-brand);
  border-color: var(--s2026-brand-deep);
  color: #fff;
}
.s2026 #toolbar .btn-warning:hover,
.s2026 #toolbar .add_row_button:hover { background: var(--s2026-brand-hover); }
.s2026 #toolbar .btn-info,
.s2026 #toolbar .btn-primary {
  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 { background: var(--s2026-bg-raised); color: var(--s2026-ink); }

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

/* ---------- 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: 0 0 0 3px rgba(139,0,0,0.12);
  outline: none;
}
/* Search più evidente: icona lente burgundy, bordo marcato, più larga.
   La larghezza sta sul CONTENITORE .search (l'input la riempie) → stabile
   con o senza il bottone "pulisci" (data-show-search-clear-button). */
.s2026 #toolbar .search { min-width: 320px; max-width: 520px; }
.s2026 #toolbar .search .input-group { width: 100%; flex-wrap: nowrap; }
.s2026 #toolbar .search { align-self: center; }
.s2026 #toolbar .search .search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;          /* allinea l'altezza ai bottoni della toolbar */
  border: 1px solid var(--s2026-rule-strong);
  background-color: #fff;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B0000' stroke-width='2' stroke-linecap='round'><circle cx='7' cy='7' r='4.5'/><line x1='10.6' y1='10.6' x2='14.5' y2='14.5'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px 15px;
  padding-left: 32px;
}
.s2026 #toolbar .search .search-input::placeholder { color: var(--s2026-ink-3); opacity: 1; }
.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 bordeaux della tabella (overflow x/y di .fixed-table-body) */
.s2026 .fixed-table-body {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: var(--s2026-brand) var(--s2026-bg-raised);
}
.s2026 .fixed-table-body::-webkit-scrollbar { width: 12px; height: 12px; }
.s2026 .fixed-table-body::-webkit-scrollbar-track { background: var(--s2026-bg-raised); }
.s2026 .fixed-table-body::-webkit-scrollbar-thumb {
  background: var(--s2026-brand);
  border-radius: 6px;
  border: 2px solid var(--s2026-bg-raised);    /* "padding" attorno al thumb */
}
.s2026 .fixed-table-body::-webkit-scrollbar-thumb:hover { background: var(--s2026-brand-hover); }
.s2026 .fixed-table-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; }

.s2026 table.table {
  margin-bottom: 0;
  font-size: var(--s2026-fs-sm);
  color: var(--s2026-ink);
}
/* 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 {
  background: #f8d7da;                          /* pantone-bs5 --danger-light (rosa tenue) */
  border-bottom: 1px solid var(--s2026-brand);
  color: var(--s2026-brand);
  font-size: var(--s2026-fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 8px 10px;
}
/* Il label interno deve ereditare il colore del th (no bianco su chiaro) */
.s2026 table.table > thead th .header_label { color: inherit; }
/* Freccette di ordinamento in burgundy (le PNG grigie di bootstrap-table sparivano sul rosa) */
.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='%238B0000' fill-opacity='.45' d='M5 2 8 6 2 6Z'/><path fill='%238B0000' fill-opacity='.45' 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='%238B0000' d='M5 2 8 6 2 6Z'/><path fill='%238B0000' 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='%238B0000' fill-opacity='.25' d='M5 2 8 6 2 6Z'/><path fill='%238B0000' 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);
}
/* Zebra dai token (sovrascrive table-striped) */
.s2026 table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background: transparent;
}
.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-brand-tint);
}
/* 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 {
  background-color: #f3dada !important;   /* tinta burgundy chiara, distinta dalla zebra */
  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);
}

/* Stati riga (sostituiscono i background hard-coded di cellStyle) */
.s2026 table.table > tbody > tr.is-deleted > * { background: var(--s2026-danger-bg) !important; color: var(--s2026-danger-fg); }
.s2026 table.table > tbody > tr.is-kit > *     { background: var(--s2026-success-bg) !important; }
.s2026 table.table > tbody > tr.is-assoc > *   { background: var(--s2026-warning-bg) !important; }

/* 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 {
  border-radius: var(--s2026-radius-sm);
  border: 1px solid var(--s2026-rule);
  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;
}

/* ---------- Form ricerca (fk_articolo) ---------- */
/* Neutralizza il wrapper alert-info blu della tab Ricerca */
.s2026 #filter_div.alert {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  color: var(--s2026-ink);
}
.s2026 .fk-panel {
  background: var(--s2026-bg-panel);
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius-lg);
  padding: 12px 16px 16px;
}
.s2026 .fk-panel__head { margin-bottom: 10px; }
.s2026 .fk-panel__eyebrow {
  font-size: var(--s2026-fs-micro);
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
}
.s2026 .fk-panel__form { padding: 4px 0 0; }
.s2026 #fk_form .control-label,
.s2026 .field__label {
  display: block;
  font-size: var(--s2026-fs-micro);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--s2026-ink-3);
  margin-bottom: 3px;
}
.s2026 .form-control,
.s2026 .form-select {
  border: 1px solid var(--s2026-rule);
  border-radius: var(--s2026-radius);
  background: var(--s2026-bg-input);
  color: var(--s2026-ink);
  font-size: var(--s2026-fs-sm);
}
.s2026 .form-control:focus,
.s2026 .form-select:focus {
  border-color: var(--s2026-brand);
  box-shadow: 0 0 0 3px rgba(139,0,0,0.12);
  outline: none;
}

/* ---------- Offcanvas filtri (sinistra) ---------- */
.s2026 #filtriOffcanvas { --bs-offcanvas-width: 400px; }
.s2026 #filtriOffcanvas .offcanvas-header {
  background: var(--s2026-brand);
  color: #fff;
  border-bottom: 1px solid var(--s2026-brand-deep);
}
.s2026 #filtriOffcanvas .offcanvas-title { color: #fff; font-size: var(--s2026-fs-md); font-weight: 700; }
.s2026 #filtriOffcanvas .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.s2026 #filtriOffcanvas .offcanvas-body { padding: 14px 16px; }
/* 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; }
/* eccezione: campi marcati .fk-col-half affiancati 50/50 (es. Solo Art. web + Catalogo) */
.s2026 #filtriOffcanvas .row > [class*="col-"].fk-col-half { flex: 0 0 calc(50% - 4px); max-width: calc(50% - 4px); }
/* 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; }

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

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