/**
 * sm/lib_css/custom.mgaone.css
 *
 * Componenti condivisi delle schermate MGAONE, secondo DESIGN.md.
 * Colori solo via var(--brand-*) (sm/variabili.php). Caricato da sm/lib_page/_head.php.
 */

/* ---- Pannello: bordo, niente ombra (Bordo Non Ombra Rule) ---- */
.sm-panel {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    box-shadow: none;
}
.sm-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-surface-muted);
    border-radius: 8px 8px 0 0;
}
.sm-panel-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--brand-ink);
}
.sm-panel-body { padding: 16px; }
.sm-panel-body-flush { padding: 0; }
/* Lo skeleton sovrapposto copia il padding dell'ospite: su un corpo a filo partirebbe dal bordo */
.sm-panel-body-flush > .sk-skel-panel { padding: 16px 20px !important; }

/* ---- Badge di stato (pillola, alla Linear), mai solo colore: sempre la parola ----
   Stati di routine (Attivo, Disabilitato): fondo bianco, bordo sottile, testo scuro, pallino colorato con
   alone. Stati che chiedono attenzione (warning, danger) e informativi: fondo tinto e testo colorato, di
   solito con un'icona. Il tono imposta --b-c (colore) e --b-t (tinta); pallino e icona li leggono. */
.sm-badge {
    --b-c: var(--brand-muted);
    --b-t: var(--brand-surface-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px 0 8px;
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    background: var(--brand-surface);
    color: var(--brand-ink-body);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.sm-badge + .sm-badge { margin-left: 4px; }
.sm-badge-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--b-c);
    box-shadow: 0 0 0 3px var(--b-t);
}
.sm-badge i { font-size: 1.05rem; color: var(--b-c); }
.sm-badge .sm-ico { width: 14px; height: 14px; color: var(--b-c); }
.sm-badge-success { --b-c: var(--brand-success-strong); --b-t: var(--brand-success-tint); }
.sm-badge-warning { --b-c: var(--brand-warning-strong); --b-t: var(--brand-warning-tint); }
.sm-badge-danger  { --b-c: var(--brand-danger-strong);  --b-t: var(--brand-danger-tint); }
.sm-badge-info    { --b-c: var(--brand-info-strong);    --b-t: var(--brand-info-tint); }
.sm-badge-warning,
.sm-badge-danger,
.sm-badge-info,
.sm-badge-pieno.sm-badge-success {
    background: var(--b-t);
    border-color: transparent;
    color: var(--b-c);
    font-weight: 600;
}

/* ---- Icone disegnate (SVG) dove Keenicons non ha il soggetto ----
   Uso: <i class="sm-ico sm-ico-muletto"></i>. L'icona e' una maschera: prende colore (currentColor) e misura
   (1em) dal contesto, come le ki-outline. Tratto 1.5 per pesare quanto le Keenicons.
   Disegni di Lucide (lucide.dev, licenza ISC):
   sm-ico-muletto: carrello elevatore ("forklift"), per le matricole;
   sm-ico-cliente: sede aziendale ("building-2"), per i clienti;
   sm-ico-impianto: capannone ("warehouse"), per gli impianti (dove lavorano i carrelli);
   sm-ico-fornitore: stabilimento ("factory", file in sm/assets/media/lucide/), per i fornitori.
   Documenti di vendita, file in sm/assets/media/lucide/ (stessa licenza, tratto 1.5):
   sm-ico-fattura ("receipt-text"), sm-ico-acconto ("wallet"), sm-ico-accompagnatoria ("file-box": fattura che viaggia
   con la merce), sm-ico-nota-credito ("file-minus"), sm-ico-nota-debito ("file-plus"), sm-ico-ddt ("truck"),
   sm-ico-reso ("undo-2": merce che torna). */
.sm-ico {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--sm-ico) no-repeat center / contain;
    mask: var(--sm-ico) no-repeat center / contain;
}
.sm-ico-muletto { --sm-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 12H5a2 2 0 0 0-2 2v5%22/%3E%3Cpath d=%22M15 19h7%22/%3E%3Cpath d=%22M16 19V2%22/%3E%3Cpath d=%22M6 12V7a2 2 0 0 1 2-2h2.172a2 2 0 0 1 1.414.586l3.828 3.828A2 2 0 0 1 16 10.828%22/%3E%3Cpath d=%22M7 19h4%22/%3E%3Ccircle cx=%2213%22 cy=%2219%22 r=%222%22/%3E%3Ccircle cx=%225%22 cy=%2219%22 r=%222%22/%3E%3C/svg%3E"); }
.sm-ico-cliente { --sm-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 12h4%22/%3E%3Cpath d=%22M10 8h4%22/%3E%3Cpath d=%22M14 21v-3a2 2 0 0 0-4 0v3%22/%3E%3Cpath d=%22M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2%22/%3E%3Cpath d=%22M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16%22/%3E%3C/svg%3E"); }
/* Documenti di vendita (SM_SCHEDA.iconaDocumento, contatori dell'elenco, sidebar) */
.sm-ico-fattura        { --sm-ico: url("/sm/assets/media/lucide/receipt-text.svg"); }
.sm-ico-acconto        { --sm-ico: url("/sm/assets/media/lucide/wallet.svg"); }
.sm-ico-accompagnatoria { --sm-ico: url("/sm/assets/media/lucide/file-box.svg"); }
.sm-ico-nota-credito   { --sm-ico: url("/sm/assets/media/lucide/file-minus.svg"); }
.sm-ico-nota-debito    { --sm-ico: url("/sm/assets/media/lucide/file-plus.svg"); }
.sm-ico-ddt            { --sm-ico: url("/sm/assets/media/lucide/truck.svg"); }
.sm-ico-reso           { --sm-ico: url("/sm/assets/media/lucide/undo-2.svg"); }
.sm-ico-impianto { --sm-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 21V10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v11%22/%3E%3Cpath d=%22M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 1.132-1.803l7.95-3.974a2 2 0 0 1 1.837 0l7.948 3.974A2 2 0 0 1 22 8z%22/%3E%3Cpath d=%22M6 13h12%22/%3E%3Cpath d=%22M6 17h12%22/%3E%3C/svg%3E"); }
.sm-ico-fornitore { --sm-ico: url("/sm/assets/media/lucide/factory.svg"); }
/* Azioni sul piano di manutenzione (scadenze): segno di spunta ("check"), calendario con l'orologio
   ("calendar-clock": nuova data), divieto ("ban": non si fa), freccia indietro ("undo-2": rimetti da fare),
   frecce in cerchio ("refresh-cw": rigenera). Stesso tratto 1.5 delle altre. */
.sm-ico-fatta     { --sm-ico: url("/sm/assets/media/lucide/check.svg"); }
.sm-ico-sposta    { --sm-ico: url("/sm/assets/media/lucide/calendar-clock.svg"); }
.sm-ico-non-si-fa { --sm-ico: url("/sm/assets/media/lucide/ban.svg"); }
.sm-ico-riapri    { --sm-ico: url("/sm/assets/media/lucide/undo-2.svg"); }
.sm-ico-rigenera  { --sm-ico: url("/sm/assets/media/lucide/refresh-cw.svg"); }
/* Stati delle scadenze nei badge: calendario ("calendar": da fare), orologio con l'avviso ("clock-alert": in ritardo),
   frecce avanti e indietro ("arrow-right-left": sostituita); fatta e annullata riusano sm-ico-fatta e sm-ico-non-si-fa */
.sm-ico-da-fare    { --sm-ico: url("/sm/assets/media/lucide/calendar.svg"); }
.sm-ico-in-ritardo { --sm-ico: url("/sm/assets/media/lucide/clock-alert.svg"); }
.sm-ico-sostituita { --sm-ico: url("/sm/assets/media/lucide/arrow-right-left.svg"); }
/* Aggiungi alla copertura di un mezzo (tab Posizioni del contratto): scudo con il più ("shield-plus") */
.sm-ico-copertura-piu { --sm-ico: url("/sm/assets/media/lucide/shield-plus.svg"); }
/* Altre azioni della riga in un menu (tab Manutenzione del contratto): tre puntini ("ellipsis") */
.sm-ico-altro { --sm-ico: url("/sm/assets/media/lucide/ellipsis.svg"); }

/* Tipo di matricola in tabella: icona grigia + parola */
.sm-tipo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sm-tipo i { font-size: 1.15rem; color: var(--brand-muted); }
.sm-tipo .sm-ico { width: 1.25rem; height: 1.25rem; }

/* ---- Provenienza del dato (Da Dove Viene Rule) ---- */
.sm-fonte {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-info-strong);
}
.sm-fonte i { font-size: 1.1rem; color: inherit; }
.sm-fonte-nostra { color: var(--brand-ink-secondary); }

/* ---- Campi in sola lettura (dati da Mago): superficie tenue, nessun bordo controllo ---- */
.sm-campi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 16px;
    margin: 0;
}
.sm-campo { min-width: 0; }
.sm-campo dt {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-muted);
    margin-bottom: 4px;
}
.sm-campo dd {
    margin: 0;
    padding: 6px 10px;
    min-height: 34px;
    border-radius: 6px;
    background: var(--brand-surface-muted);
    color: var(--brand-ink-body);
    font-size: 1.075rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.sm-campo dd.sm-vuoto { color: var(--brand-muted); }
/* Riga sotto il valore: da dove viene il dato (es. "ricavata dal codice") */
.sm-campo dd .sm-campo-nota { display: block; font-size: 0.95rem; color: var(--brand-muted); }
.sm-campo dd a { color: var(--brand-primary); }
.sm-campo dd a:hover { color: var(--brand-primary-hover); text-decoration: underline; }
.sm-campo-largo { grid-column: 1 / -1; }


.sm-num { font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

/* ---- "Azzera filtri" accanto alla ricerca degli elenchi: bottone ghost, compare solo con filtri attivi ---- */
.btn.sm-btn-azzera {
    display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
    background: transparent; border: 0; color: var(--brand-ink-body); font-weight: 600;
}
.btn.sm-btn-azzera i { color: inherit; }
.btn.sm-btn-azzera:hover { background: var(--brand-shell); color: var(--brand-ink); }
.btn.sm-btn-azzera:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ---- Avanti e indietro fra le schede, accanto a "Torna all'elenco" (sm_scorri.js) ---- */
.sm-scorri { display: inline-flex; align-items: center; gap: 4px; }
.sm-scorri .btn.sm-scorri-btn { width: 32px; height: 32px; }
.sm-scorri .btn.sm-scorri-btn.disabled { opacity: .4 !important; background: transparent !important; border-color: transparent !important; cursor: default; }
.sm-scorri-pos { min-width: 4.5rem; padding: 0 4px; text-align: center; white-space: nowrap; font-size: 0.95rem; color: var(--brand-muted); }
@media (pointer: coarse), (max-width: 575.98px) { .sm-scorri .btn.sm-scorri-btn { width: 40px; height: 40px; } }

/* ---- Bottoni ghost (azioni di riga secondarie) e distruttivo (DESIGN.md, Buttons) ----
   Distruttivo: testo e filo rosso errore su bianco, pieno solo dentro la conferma. Il tema azzera bordo
   e ombra dei .btn con selettori piu' forti: qui il filo serve, quindi !important. */
.btn.sm-btn-ghost { background: none; border: 0; color: var(--brand-ink-body); }
.btn.sm-btn-ghost:hover { background: var(--brand-shell); color: var(--brand-ink); }
.btn.sm-btn-distruttivo { background: var(--brand-surface); border: 1px solid var(--brand-danger-strong) !important; color: var(--brand-danger-strong); }
.btn.sm-btn-distruttivo:hover { background: var(--brand-danger-tint); color: var(--brand-danger-strong); }
/* Focus da tastiera su ogni bottone: Metronic mette outline: none !important su .btn, senza !important
   l'anello rosso di DESIGN.md non si vede mai (WCAG 2.4.7) */
:root[data-sm2care-theme] .btn:focus-visible { outline: 2px solid var(--brand-primary) !important; outline-offset: 2px; }

/* Bottone a icona per le azioni di riga (sm_btn_icona in generic.js): quadrato ghost da 32px, 40px al tocco;
   nome in aria-label e nel suggerimento. Le azioni che tolgono qualcosa (.is-pericolo) si accendono di rosso errore. */
.btn.sm-btn-icona {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; padding: 0 !important; border: 0; border-radius: 6px;
    background: none; color: var(--brand-ink-body); transition: background-color 150ms ease-out, color 150ms ease-out;
}
:root[data-sm2care-theme] .btn.sm-btn-icona i { font-size: 1.35rem; line-height: 1; color: inherit; }
.btn.sm-btn-icona:hover { background: var(--brand-shell); color: var(--brand-ink); }
.btn.sm-btn-icona.is-pericolo:hover { background: var(--brand-danger-tint); color: var(--brand-danger-strong); }
/* Azione che conferma (es. "Fatta"): al passaggio verde, come il pericolo diventa rosso */
.btn.sm-btn-icona.is-ok:hover { background: var(--brand-success-tint); color: var(--brand-success-strong); }
/* Icona SVG del progetto nei bottoni: nel bottone icona 20px (la misura ottica delle Keenicons a 1.35rem), nei
   bottoni con testo 18px con lo stesso respiro delle Keenicons fs-3 */
.btn .sm-ico { width: 18px; height: 18px; vertical-align: -0.2em; }
.btn .sm-ico:first-child { margin-right: 4px; }
.btn.sm-btn-icona .sm-ico { width: 20px; height: 20px; margin: 0; }
.btn.sm-btn-icona + .btn.sm-btn-icona { margin-left: 2px; }
@media (pointer: coarse), (max-width: 575.98px) { .btn.sm-btn-icona { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .btn.sm-btn-icona { transition: none; } }

/* Placeholder: il tema lo mette a #9aa4b2 (2.52:1), sotto AA; DESIGN.md vuole Grigio Etichetta (4.67:1) */
:root[data-sm2care-theme] .form-control::placeholder,
:root[data-sm2care-theme] .select2-container .select2-selection__placeholder,
:root[data-sm2care-theme] .select2-search__field::placeholder { color: var(--brand-muted); }

/* ---- Segmented control (filtri a scelta singola) ---- */
.sm-segmenti {
    display: inline-flex;
    max-width: 100%;
    border: 1px solid var(--brand-border-control);
    border-radius: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sm-segmenti button { flex: 0 0 auto; white-space: nowrap; }
.sm-segmenti button {
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-right: 1px solid var(--brand-border);
    background: var(--brand-surface);
    color: var(--brand-ink-body);
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 150ms ease-out, color 150ms ease-out;
}
.sm-segmenti button:last-child { border-right: 0; }
.sm-segmenti-n {
    margin-left: 6px;
    font-weight: 500;
    color: var(--brand-ink-secondary);
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
}
.sm-segmenti button[aria-pressed="true"] .sm-segmenti-n { color: var(--brand-ink); }
.sm-segmenti button:hover { background: var(--brand-shell); color: var(--brand-ink); }
.sm-segmenti button[aria-pressed="true"] { background: var(--brand-primary-tint); color: var(--brand-ink); }
.sm-segmenti button:focus-visible,
.sm-link-riga:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}
/* Paginazione delle DataTable: il focus di Bootstrap e' un alone al 16% (sotto 3:1), da tastiera serve il contorno pieno */
.dt-paging .page-link:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---- Contatori-filtro sopra gli elenchi (.sm-kpif, pattern di dev_prometes; lib_scripts/sm_kpif.js) ----
   Ogni riquadro e' un <button aria-pressed>: conta e filtra. Piatto come il resto (bordo, niente ombra),
   raggio 8px, etichetta in chiaro (niente maiuscolo), numero Display a cifre tabulari. Il colore sta
   solo nel riquadro dell'icona e dice il significato; la selezione e' la tinta rossa, come nel menu. */
.sm-kpif {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.sm-kpif-c {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    background: var(--brand-surface);
    color: var(--brand-ink);
    text-align: left;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.sm-kpif-c:hover { background: var(--brand-canvas); border-color: var(--brand-border-control); }
.sm-kpif-c:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sm-kpif-c[aria-pressed="true"] {
    background: var(--brand-primary-tint);
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}
.sm-kpif-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sm-kpif-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 1.35rem;
}
/* Metronic da' alle ki-outline colore grigio e 13px: qui colore e misura vengono dal riquadro */
.sm-kpif-ic i { color: inherit; font-size: inherit; }
.sm-kpif-lab { font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--brand-ink-secondary); }
.sm-kpif-c[aria-pressed="true"] .sm-kpif-lab { color: var(--brand-ink); }
.sm-kpif-n {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
}
.sm-kpif-sub { margin-top: 2px; min-height: 1.45em; font-size: 0.95rem; line-height: 1.45; color: var(--brand-muted); }
.sm-kpif-c[aria-pressed="true"] .sm-kpif-sub { color: var(--brand-ink-secondary); }
.sm-kpif-c.is-success .sm-kpif-ic { background: var(--brand-success-tint); color: var(--brand-success-strong); }
.sm-kpif-c.is-info    .sm-kpif-ic { background: var(--brand-info-tint);    color: var(--brand-info-strong); }
.sm-kpif-c.is-warning .sm-kpif-ic { background: var(--brand-warning-tint); color: var(--brand-warning-strong); }
.sm-kpif-c.is-danger  .sm-kpif-ic { background: var(--brand-danger-tint);  color: var(--brand-danger-strong); }
.sm-kpif-c.is-neutro  .sm-kpif-ic { background: var(--brand-surface-muted); color: var(--brand-ink-secondary); }
/* Brand: categorie dell'elenco (es. tipi di profilo), non stati. Premuto, il riquadro dell'icona va su bianco per
   staccarsi dalla tinta rossa della selezione */
.sm-kpif-c.is-brand   .sm-kpif-ic { background: var(--brand-primary-tint); color: var(--brand-primary); }
.sm-kpif-c.is-brand[aria-pressed="true"] .sm-kpif-ic { background: var(--brand-surface); }
@media (max-width: 575.98px) { .sm-kpif { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .sm-kpif-c { transition: none; } }

/* ---- Tabelle dense ---- */
.sm-tabella { width: 100%; }
.sm-tabella thead th {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-muted);
    text-transform: none;
    border-bottom: 1px solid var(--brand-border) !important;
    padding: 8px 12px !important;
    white-space: nowrap;
}
.sm-tabella tbody td {
    font-size: 1rem;
    color: var(--brand-ink-body);
    padding: 9px 12px !important;
    vertical-align: middle;
}
/* Divisori orizzontali fra le righe (DESIGN.md, Tabelle dati). Metronic azzera il bordo delle celle,
   quindi serve !important; sull'ultima riga lo toglie Metronic stesso, con un selettore piu' specifico. */
.sm-tabella > tbody > tr > td,
.sm-tabella > tbody > tr > th { border-bottom: 1px solid var(--brand-border) !important; }
.sm-tabella tbody tr:hover td { background: var(--brand-canvas); }
.sm-tabella .sm-secondario { color: var(--brand-muted); font-size: 0.95rem; }
.sm-tabella-cliccabile tbody tr { cursor: pointer; }
/* Colonne di testo libero (descrizioni, nomi): larghezza minima, cosi' non vanno a capo a ogni parola */
.sm-tabella .sm-col-testo { min-width: 240px; }
/* Matricola del costruttore, codice della riga negli elenchi di matricole: su una riga sola (es. "MGA147/2026 MONT").
   Nell'elenco matricole le due colonne di testo cedono lo spazio, cosi' a 1440 px la tabella non scorre. */
.sm-tabella .sm-col-matricola { white-space: nowrap; }
#table_matricole .sm-col-testo { min-width: 180px; }
/* Testo lungo di Mago in elenco (descrizione dei documenti): al massimo due righe, intero nel title della cella */
.sm-tabella .sm-testo-2righe { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* Scheda del documento: le righe di solo testo (note, riferimenti, descrittive) restano nell'ordine di Mago ma in grigio,
   le righe con importo (servizi, merce) si leggono per prime. Bottone del PDF nella testata con l'icona del tipo di file */
:root[data-sm2care-theme] .sm-tabella > tbody > tr.sm-riga-testo > td { color: var(--brand-muted); }
.sm-documento-pdf { display: inline-flex; align-items: center; gap: 8px; }
/* Tipo di documento con la sua icona (SM_SCHEDA.tipoDocumentoHtml): icona grigia, il testo resta il dato */
.sm-tipo-doc { display: inline-flex; align-items: center; gap: 6px; }
.sm-tipo-doc .sm-ico { font-size: 1.15rem; color: var(--brand-muted); }
/* Elenco Fatture e DDT: numero su una riga, "Vs. rif." sotto a capo; le due colonne di testo cedono spazio
   cosi' a 1440 px la tabella non scorre */
#table_documenti .sm-col-documento { min-width: 110px; max-width: 140px; overflow-wrap: anywhere; }
#table_documenti .sm-col-documento a { white-space: nowrap; }
#table_documenti .sm-col-testo { overflow-wrap: anywhere; }   /* ragioni sociali con virgole e niente spazi */
@media (min-width: 576px) { #table_documenti .sm-col-testo { min-width: 180px; } }
/* Fatture e DDT sul telefono: il cliente prende lo spazio che resta accanto al numero, senza far scorrere la tabella */
@media (max-width: 575.98px) {
    #table_documenti .sm-col-testo { min-width: 0; overflow-wrap: anywhere; }
}
/* Nomi di fornitori senza spazi (es. "DONGGUANSHIYUELI...") sotto il possesso: vanno a capo invece di allargare la tabella */
#table_matricole td .sm-secondario { overflow-wrap: anywhere; }
.sm-tabella tbody tr.sm-riga-evidenza td { background: var(--brand-surface-muted); }
.sm-tabella tbody th[scope="row"] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-ink);
    padding: 9px 12px !important;
    vertical-align: top;
}
.sm-link-riga { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.sm-link-riga:hover { color: var(--brand-primary); text-decoration: underline; }
/* Codici delle entita' (codice cliente, numero impianto, matricola del costruttore): in Rosso MGA e grassetto,
   come i codici delle tabelle di dev_prometes. Solo il codice identificativo: nomi e codici secondari (sede,
   matricola MGA) restano neutri, cosi' il rosso resta un segnale. */
.sm-codice,
.sm-tabella .sm-codice,
.sm-link-riga.sm-codice {
    color: var(--brand-primary);
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
}
a.sm-codice:hover { color: var(--brand-primary-hover); text-decoration: underline; }
/* Sulle celle il tema (custom.themes.css: :root[...] .table > tbody > tr > td) e Metronic (font-weight: inherit)
   sono piu' specifici: stesso ancoraggio, un gradino in piu'. */
:root[data-sm2care-theme] .sm-tabella > tbody > tr > td.sm-codice { color: var(--brand-primary); font-weight: 600; }

/* ---- Allegati da Mago (tab Allegati della scheda matricola): icona del tipo di file, nome che apre il visore,
        azione di riga ghost "Scarica". ---- */
.sm-allegato { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.sm-allegato > .sm-file-ic { flex: none; }
.sm-allegato-nome {
    padding: 0; border: 0; background: none; text-align: left;
    color: var(--brand-ink); font-weight: 600; overflow-wrap: anywhere;
}
.sm-allegato-nome:hover { color: var(--brand-primary); text-decoration: underline; }
.sm-allegato-nome:focus-visible,
.btn.sm-allegato-scarica:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 4px; }
.sm-tabella td.sm-allegato-azioni { width: 1%; text-align: center; }
/* Contiene il testo per lo screen reader (visually-hidden e' assoluto): senza, esce dal box che scorre e allarga la pagina */
.sm-tabella th.sm-allegato-azioni { position: relative; }
@media (max-width: 575.98px) { .sm-allegato { min-width: 0; } }
/* Dita, non mouse: azioni di riga e chiusura del visore a 44 px */
@media (pointer: coarse) {
    .btn.btn-icon.sm-allegato-scarica,
    .btn.btn-icon.sm-allegato-chiudi { width: 44px; height: 44px; }
    .sm-allegato-azioni-testa .btn { min-height: 44px; }
}
.btn.btn-icon.sm-allegato-scarica {
    width: 36px; height: 36px; background: transparent; border: 0; color: var(--brand-ink-body);
}
.btn.btn-icon.sm-allegato-scarica i { color: inherit; }
.btn.btn-icon.sm-allegato-scarica:hover { background: var(--brand-shell); color: var(--brand-ink); }

/* Icona del tipo di file (sm_allegato_icona): foglio con angolo piegato e fascia colorata col tipo */
.sm-file-ic { --sm-file: var(--brand-file-altro); width: 30px; height: 38px; overflow: visible; }
.sm-file-ic.is-grande { width: 64px; height: 80px; }
.sm-file-ic.is-piccola { width: 20px; height: 25px; }
.sm-file-ic.is-pdf      { --sm-file: var(--brand-file-pdf); }
.sm-file-ic.is-word     { --sm-file: var(--brand-file-word); }
.sm-file-ic.is-excel    { --sm-file: var(--brand-file-excel); }
.sm-file-ic.is-csv      { --sm-file: var(--brand-file-csv); }
.sm-file-ic.is-slide    { --sm-file: var(--brand-file-slide); }
.sm-file-ic.is-immagine { --sm-file: var(--brand-file-immagine); }
.sm-file-ic.is-email    { --sm-file: var(--brand-file-email); }
.sm-file-ic.is-archivio { --sm-file: var(--brand-file-archivio); }
.sm-file-ic-foglio { fill: var(--brand-surface); stroke: var(--brand-border-control); stroke-width: 1; }
.sm-file-ic-piega  { fill: var(--brand-surface-muted); stroke: var(--brand-border-control); stroke-width: 1; stroke-linejoin: round; }
.sm-file-ic-fascia { fill: var(--sm-file); }
.sm-file-ic-glifo  { fill: none; stroke: var(--sm-file); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.sm-file-ic-testo  { fill: var(--brand-surface); font-family: inherit; font-size: 8.5px; font-weight: 700; letter-spacing: 0.02em; }

/* ---- Visore degli allegati (sm/lib_scripts/sm_allegato.js): modale con barra di avanzamento, poi il file ---- */
.sm-allegato-modal .modal-content {
    border: 1px solid var(--brand-border); border-radius: 8px; overflow: hidden;
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.16);
}
.sm-allegato-testa {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px;
    border-bottom: 1px solid var(--brand-border); background: var(--brand-surface);
}
.sm-allegato-testa-ic { flex: none; display: flex; }
.sm-allegato-testa-id { flex: 1; min-width: 0; }
.sm-allegato-titolo {
    margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: var(--brand-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sm-allegato-sub { margin: 2px 0 0; font-size: 0.95rem; color: var(--brand-muted); }
/* Bottoni secondari (DESIGN.md), come .sm-dialogo-annulla: il tema forza sfondo e bordo dei .btn, serve !important */
.btn.sm-allegato-btn,
.btn.sm-allegato-btn-secondario {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    background: var(--brand-surface) !important; border: 1px solid var(--brand-border-control) !important;
    color: var(--brand-ink-body) !important; font-weight: 600;
}
.btn.sm-allegato-btn i { color: inherit; }
.btn.sm-allegato-btn:hover:not(:disabled),
.btn.sm-allegato-btn-secondario:hover { background: var(--brand-shell) !important; color: var(--brand-ink) !important; }
.btn.sm-allegato-btn:disabled { color: var(--brand-muted) !important; border-color: var(--brand-border) !important; opacity: 1; }
.sm-allegato-azioni-testa { display: flex; align-items: center; gap: 8px; flex: none; }
.btn.btn-icon.sm-allegato-chiudi { flex: none; width: 36px; height: 36px; background: transparent; border: 0; color: var(--brand-ink-body); }
.btn.btn-icon.sm-allegato-chiudi i { color: inherit; }
.btn.btn-icon.sm-allegato-chiudi:hover { background: var(--brand-shell); color: var(--brand-ink); }
.sm-allegato-modal .btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sm-allegato-corpo { background: var(--brand-canvas); }
.sm-allegato-attesa-box {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 56px 24px 48px; max-width: 460px; margin: 0 auto;
}
.sm-allegato-attesa-box[hidden],
.sm-allegato-vista[hidden] { display: none; }
.sm-allegato-attesa-titolo { margin: 0 0 14px; font-size: 1.15rem; font-weight: 600; color: var(--brand-ink); }
.sm-allegato-attesa-info { margin: 10px 0 20px; color: var(--brand-ink-secondary); overflow-wrap: anywhere; }
.sm-allegato-barra {
    position: relative; width: 100%; height: 8px; border-radius: 999px; overflow: hidden;
    background: var(--brand-border);
}
.sm-allegato-barra-pieno {
    display: block; height: 100%; width: 100%; border-radius: inherit;
    background: var(--brand-primary); transform: scaleX(var(--sm-avanzamento, 0)); transform-origin: left center;
    transition: transform 0.25s ease-out;
}
.sm-allegato-barra.is-indeterminata .sm-allegato-barra-pieno {
    width: 35%; transform: none; animation: sm-allegato-scorre 1.2s ease-in-out infinite;
}
@keyframes sm-allegato-scorre { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.sm-allegato-pronto-ic { display: flex; margin-bottom: 14px; }
.sm-allegato-esito-ic {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 14px;
    background: var(--brand-danger-tint); color: var(--brand-danger-strong);
}
.sm-allegato-esito-ic i { font-size: 1.5rem; color: inherit; }
.sm-allegato-vista { height: min(80vh, 900px); display: flex; align-items: center; justify-content: center; }
.sm-allegato-vista iframe { width: 100%; height: 100%; border: 0; background: var(--brand-surface); }
.sm-allegato-vista img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 16px; }
/* Il focus arriva qui da programma quando il file si apre (screen reader), non serve l'anello */
.sm-allegato-vista:focus { outline: none; }
@media (max-width: 991.98px) {
    .sm-allegato-modal .modal-content { border-radius: 0; border: 0; }
    .sm-allegato-modal.is-vista .modal-body,
    .sm-allegato-modal.is-vista .sm-allegato-corpo { flex: 1; display: flex; }
    .sm-allegato-modal .sm-allegato-corpo { flex: 1; }
    .sm-allegato-vista { height: auto; flex: 1; }
}
@media (max-width: 575.98px) {
    .sm-allegato-testa { flex-wrap: wrap; padding: 12px 12px 12px 16px; }
    .sm-allegato-testa-id { flex-basis: calc(100% - 100px); }
    .sm-allegato-azioni-testa { order: 3; width: 100%; }
    .sm-allegato-azioni-testa .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-allegato-barra-pieno { transition: none; }
    .sm-allegato-barra.is-indeterminata .sm-allegato-barra-pieno { animation: none; width: 100%; opacity: 0.4; }
}

/* ---- Testata della scheda: identita' (icona dell'entita', nome, sottotitolo, stati a destra), poi i dati
        chiave in una striscia con divisori verticali (alla Stripe). La risposta prima del dettaglio. ---- */
.sm-hd { padding: 20px 24px; margin-bottom: 16px; }
.sm-hd-top { display: flex; align-items: flex-start; gap: 16px; }
.sm-hd-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--brand-primary-tint);
    color: var(--brand-primary);
}
.sm-hd-avatar i { font-size: 1.75rem; color: inherit; }
/* Le icone disegnate hanno piu' aria intorno delle Keenicons: un po' piu' grandi per pesare uguale */
.sm-hd-avatar .sm-ico { width: 28px; height: 28px; }
.sm-hd-id { flex: 1; min-width: 0; }
.sm-hd-nome {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--brand-ink);
    overflow-wrap: anywhere;
}
.sm-hd-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    margin: 6px 0 0;
    font-size: 1.075rem;
    color: var(--brand-ink-secondary);
}
/* Voci del sottotitolo separate da un punto mediano disegnato, non scritto nel testo */
.sm-hd-sub a { color: var(--brand-primary); }
.sm-hd-sub > span + span::before { content: "\00B7"; margin: 0 8px; color: var(--brand-muted); }
.sm-hd-stato { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-top: 4px; }
.sm-hd-stato .sm-badge + .sm-badge { margin-left: 0; }
.sm-hd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 0;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--brand-border);
}
.sm-hd-meta > div { padding: 0 28px; border-left: 1px solid var(--brand-border); }
.sm-hd-meta > div:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 767.98px) {
    .sm-hd-top { flex-wrap: wrap; }
    .sm-hd-avatar { width: 40px; height: 40px; }
    .sm-hd-stato { justify-content: flex-start; width: 100%; padding-top: 0; }
    /* Su schermo stretto il sottotitolo va a righe: niente punto mediano a inizio riga */
    .sm-hd-sub { display: block; }
    .sm-hd-sub > span { display: block; }
    .sm-hd-sub > span + span::before { content: none; }
    .sm-hd-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .sm-hd-meta > div { padding: 0; border-left: 0; }
}
.sm-hd-meta > div { min-width: 0; }
/* Nella testata i riferimenti (cliente, impianto, macchina) si riconoscono come link, come nei campi */
.sm-hd-meta dd a { color: var(--brand-primary); }
.sm-hd-meta dd a:hover { color: var(--brand-primary-hover); text-decoration: underline; }
.sm-hd-meta dt {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-muted);
    margin-bottom: 2px;
}
.sm-hd-meta dd {
    margin: 0;
    font-size: 1.075rem;
    font-weight: 600;
    color: var(--brand-ink);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ---- Tab della scheda: un solo livello, sottolineatura rossa sulla tab attiva ---- */
.sm-tabs-barra {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
    padding: 0 16px;
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-surface-muted);
    border-radius: 8px 8px 0 0;
}
.sm-tabs-barra .sm-fonte { padding: 10px 0; }
.sm-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border: 0;
}
.sm-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--brand-ink-secondary);
    font-size: 1.075rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color 150ms ease-out, border-color 150ms ease-out;
}
.sm-tabs .nav-link:hover { color: var(--brand-ink); border-bottom-color: var(--brand-border-control); }
.sm-tabs .nav-link.active { color: var(--brand-ink); border-bottom-color: var(--brand-primary); }
.sm-tabs .nav-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.sm-tabs-n {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--brand-shell);
    color: var(--brand-ink-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.sm-tabs-n:empty { display: none; }
/* Pallino "modifiche non salvate" sulla tab delle note (accompagnato dal testo nel pannello) */
.sm-tabs-segno {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-warning-strong);
}
.sm-sezione-staccata {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--brand-border);
}
/* Note interne a tutta larghezza del pannello: la provenienza la dice la barra delle tab ("MGAONE, modificabile") */
.sm-note-form { width: 100%; }
.sm-note-form .sm-textarea { min-height: 240px; }

/* ---- Note interne: il campo modificabile e' un controllo vero ---- */
.sm-textarea {
    width: 100%;
    min-height: 120px;
    padding: 8px 10px;
    border: 1px solid var(--brand-border-control);
    border-radius: 6px;
    background: var(--brand-surface);
    color: var(--brand-ink-body);
    font-size: 1.075rem;
    line-height: 1.5;
    resize: vertical;
}
.sm-textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.24);
}
/* Sola lettura (senza l'autorizzazione Modifica del programma): casella tenue come i dati non modificabili */
.sm-textarea[readonly] { background: var(--brand-surface-muted); border-color: var(--brand-border); resize: none; }
.sm-textarea[readonly]:focus { border-color: var(--brand-border-control); box-shadow: none; outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.sm-sezione + .sm-sezione {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--brand-border);
}
.sm-sezione-titolo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 1.075rem;
    font-weight: 600;
    color: var(--brand-ink);
}
.sm-sezione-titolo i { font-size: 1.35rem; color: var(--brand-muted); }
/* ---- Tab Tariffe delle schede (SM_SCHEDA.tariffe) ---- */
/* A tutta larghezza: la voce prende lo spazio, gli importi restano compatti a destra con aria fra le colonne */
.sm-tar-tabella td { vertical-align: top; }
.sm-tar-tabella td.text-end, .sm-tar-tabella th.text-end { width: 1%; white-space: nowrap; padding-left: 40px; }
@media (max-width: 767.98px) {
    .sm-tar-tabella td.text-end, .sm-tar-tabella th.text-end { padding-left: 16px; }
}
.sm-tar-nota { margin: 10px 0 0; max-width: 80ch; color: var(--brand-ink-secondary); }
.sm-tar-nota:first-child { margin: 0 0 12px; }
.sm-tar-nota:only-child { margin: 0; }
.sm-testo-mago {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--brand-surface-muted);
    color: var(--brand-ink-body);
    white-space: pre-line;
    max-width: 70ch;
}

/* Bottone disabilitato: deve sembrarlo (il tema lo lascia rosso pieno), anche nel piede dei modali dei form */
.sm-panel .btn.btn-primary:disabled,
.sm-panel .btn.btn-primary.disabled,
.sm-mod .modal-footer .btn.btn-primary:disabled {
    background-color: var(--brand-surface-muted) !important;
    border-color: var(--brand-border) !important;
    color: var(--brand-muted) !important;
    opacity: 1;
}
.sm-panel .btn.btn-primary:disabled i, .sm-mod .modal-footer .btn.btn-primary:disabled i { color: inherit !important; }

.sm-modificato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-warning-strong);
    font-weight: 600;
}

.sm-stato-vuoto {
    padding: 24px 16px;
    color: var(--brand-muted);
    text-align: center;
}
/* Ricerca sopra la tabella di una tab della scheda (SM_SCHEDA.cercaTabella): campo a destra, come la ricerca
   degli elenchi, "N di M" alla sua sinistra */
.sm-tab-cerca {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--brand-border);
}
.sm-tab-cerca .form-control { flex: 0 1 280px; min-width: 0; }
.sm-tab-cerca-n { white-space: nowrap; }
.sm-tab-cerca-corpo { margin: -16px -16px 16px; }   /* dentro .sm-panel-body (padding 16px) */
/* Con una ricerca in corso una sezione puo' sparire: il bordo di separazione resta solo fra sezioni visibili */
.sm-sezione.d-none + .sm-sezione { margin-top: 0; padding-top: 0; border-top: 0; }
.sm-sezione:not(.d-none) ~ .sm-sezione.d-none + .sm-sezione { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--brand-border); }
@media (max-width: 575.98px) { .sm-tab-cerca .form-control { flex: 1 1 auto; } }
/* DataTables dentro una tab della scheda (filtri "alla Excel"): via le righe e i gutter di Bootstrap che il layout di
   DataTables aggiunge, cosi' la tabella sta a filo come le altre tabelle delle tab */
.sm-tab-dt .dt-container > .row { margin: 0; }
.sm-tab-dt .dt-container > .row > * { padding: 0; }
.sm-tab-dt table.dataTable { width: 100% !important; }
/* "Togli la ricerca" nel messaggio senza risultati: un link di testo, ma e' un bottone */
.sm-tab-cerca-togli {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-ink-body);
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--brand-border-control);
    text-underline-offset: 2px;
}
.sm-tab-cerca-togli:hover,
.sm-tab-cerca-togli:focus-visible { color: var(--brand-primary); text-decoration-color: currentColor; }
.sm-tab-cerca-togli:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 2px; }

/* Scheda non disponibile: icona, messaggio del server, uscita verso l'elenco */
.sm-stato-icona { display: block; font-size: 1.75rem; color: var(--brand-muted); margin-bottom: 8px; }
.sm-stato-titolo { margin: 0 0 16px; font-size: 1.075rem; font-weight: 600; color: var(--brand-ink); }
/* Riga di spiegazione sotto il titolo (pagina "Non autorizzato", sm/lib_page/_403.php) */
.sm-stato-titolo:has(+ .sm-stato-testo) { margin-bottom: 4px; }
.sm-stato-testo { max-width: 60ch; margin: 0 auto 16px; color: var(--brand-ink-secondary); }

/* ---- Filtri a colonna "alla Excel" (ColumnControl, lib_scripts/dt_filtri_excel.js; la tabella
        porta la classe sm-dt-excel). Portati da dev_prometes, sui token di MGAONE. ---- */
table.dataTable.sm-dt-excel thead span.dtcc { margin-left: 4px; vertical-align: middle; }
table.dataTable.sm-dt-excel thead button.dtcc-button {
    --dtcc-button-icon_size: 13px;
    --dtcc-button-icon_color: currentColor;
    padding: 4px;
    border-radius: 4px;
    color: var(--brand-muted);
    opacity: 1;
    transition: background-color 150ms ease-out, color 150ms ease-out;
}
table.dataTable.sm-dt-excel thead button.dtcc-button:hover {
    background: var(--brand-shell);
    color: var(--brand-ink);
}
table.dataTable.sm-dt-excel thead button.dtcc-button:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}
/* Filtro attivo: pieno, cosi' chi torna sulla pagina vede subito che mancano delle righe. */
table.dataTable.sm-dt-excel thead button.dtcc-button.dtcc-button_active,
table.dataTable.sm-dt-excel thead button.dtcc-button.dtcc-button_active:hover {
    background: var(--brand-primary);
    color: var(--brand-primary-contrast);
}
div.dtcc-dropdown {
    --dtcc-dropdown_z-index: 1060;
    --dtcc-dropdown_margin: 4px 0 0 0;
    --dtcc-dropdown-button_background: transparent;
    --dtcc-dropdown-button_border: none;
    --dtcc-dropdown-button_color: var(--brand-ink-body);
    --dtcc-dropdown-button_padding: 7px 10px;
    --dtcc-dropdown-button_hover-background: var(--brand-shell);
    --dtcc-dropdown-icon_vertical-align: top;
    --dtcc-dropdown-search_padding: .5em 1em;
    --dtcc-dropdown_width: 290px;
    --dtcc-button-icon_size: 14px;
    --dtcc-button-icon_margin: .6rem;
    padding: 6px;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    background: var(--brand-surface);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
    font-size: 1rem;
}
div.dtcc-dropdown button.dtcc-button {
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--brand-ink-body);
    font-weight: 500;
}
div.dtcc-dropdown button.dtcc-button:hover,
div.dtcc-dropdown button.dtcc-button:focus-visible {
    background: var(--brand-shell);
    color: var(--brand-ink);
    outline: none;
}
div.dtcc-dropdown button.dtcc-button:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-primary); }
div.dtcc-dropdown button.dtcc-button span.dtcc-button-icon { color: var(--brand-muted); }
div.dtcc-dropdown div.dtcc-spacer { margin: 6px 4px; border-bottom-color: var(--brand-border); }
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls { padding: 4px 4px 8px; gap: 8px; }
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls input.dtcc-list-search {
    order: -1;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--brand-border-control);
    border-radius: 6px;
    background: var(--brand-surface);
    color: var(--brand-ink-body);
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls input.dtcc-list-search::placeholder { color: var(--brand-muted); }
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls input.dtcc-list-search:focus {
    border-color: var(--brand-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .24);
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls button.dtcc-list-selectAll,
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls button.dtcc-list-selectNone {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-primary);
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-controls button.dtcc-list-selectAll span { color: var(--brand-muted); font-weight: 500; }
div.dtcc-dropdown div.dtcc-list div.dtcc-list-buttons {
    max-height: 264px;
    background: transparent;
    border-top: 1px solid var(--brand-border);
    padding-top: 4px;
}
/* Casella a sinistra come nell'autofiltro di Excel */
div.dtcc-dropdown div.dtcc-list-buttons button.dtcc-button::before {
    content: "";
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: .6rem;
    border: 1.5px solid var(--brand-border-control);
    border-radius: 4px;
    background: var(--brand-surface) no-repeat center / 12px 12px;
}
div.dtcc-dropdown div.dtcc-list-buttons button.dtcc-button.dtcc-button_active::before {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary);
    /* Spunta disegnata in SVG: niente dipendenza da un font di icone */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
div.dtcc-dropdown div.dtcc-list-buttons button.dtcc-button > span.dtcc-button-state { display: none; }
/* Sotto-livello del filtro (SM_DT_FILTRO_SOTTO in dt_filtri_excel.js): pannello laterale a destra dell'elenco,
   separato da un filetto; sotto l'elenco sugli schermi stretti. Con due sotto-livelli aperti le liste si accorciano
   per stare all'altezza dell'elenco di sinistra. */
div.dtcc-dropdown.sm-dtcc-con-lato { display: flex; align-items: flex-start; width: auto; }
div.dtcc-dropdown.sm-dtcc-con-lato > div.dtcc-dropdown-liner { flex: 0 0 278px; width: 278px; }
div.dtcc-dropdown div.sm-dtcc-lato { display: none; }
div.dtcc-dropdown.sm-dtcc-con-lato div.sm-dtcc-lato {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 300px;
    width: 300px;
    margin-left: 6px;
    padding-left: 12px;
    border-left: 1px solid var(--brand-border);
}
div.dtcc-dropdown div.dtcc-list.sm-dtcc-sotto div.dtcc-list-title {
    padding: 6px 4px 8px;
    color: var(--brand-ink);
    font-style: normal;
    font-weight: 600;
}
div.dtcc-dropdown div.dtcc-list.sm-dtcc-sotto div.dtcc-list-controls button { white-space: nowrap; }
/* Nomi interi, a capo: troncati si perdeva proprio la parte che distingue (LINDE ... ITALIA / MODENA / VERONA) */
div.dtcc-dropdown div.sm-dtcc-sotto div.dtcc-list-buttons button.dtcc-button span.dtcc-button-text {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.35;
}
div.dtcc-dropdown.sm-dtcc-lato-due div.dtcc-list.sm-dtcc-sotto div.dtcc-list-buttons { max-height: 132px; }
@media (max-width: 639.98px) {
    div.dtcc-dropdown.sm-dtcc-con-lato { flex-direction: column; align-items: stretch; width: var(--dtcc-dropdown_width); }
    div.dtcc-dropdown.sm-dtcc-con-lato > div.dtcc-dropdown-liner,
    div.dtcc-dropdown.sm-dtcc-con-lato div.sm-dtcc-lato { flex: none; width: auto; }
    div.dtcc-dropdown.sm-dtcc-con-lato div.sm-dtcc-lato {
        margin: 8px 0 0;
        padding: 8px 0 0;
        border-left: none;
        border-top: 1px solid var(--brand-border);
    }
}

/* ---- Superfici del browser: selezione e cursore del testo col colore del brand ---- */
::selection { background: var(--brand-primary-tint); color: var(--brand-ink); }
.sm-textarea, .sm-panel input { caret-color: var(--brand-primary); }

@media (prefers-reduced-motion: reduce) {
    .sm-tabs .nav-link,
    .sm-segmenti button,
    table.dataTable.sm-dt-excel thead button.dtcc-button { transition: none; }
}

/* ---- Sidebar: voce attiva sul rosso MGA (DESIGN.md, Navigation) ----
   Tinta rossa di fondo, testo Inchiostro 600, icona Rosso MGA. Niente striscia laterale ne' ombra.
   _sidebar.php mette la classe active sul link (.menu-link.active). Selettori con :root[attributo] + id
   e !important per stare sopra a Metronic e a custom.themes.css. */
:root[data-sm2care-theme] #kt_app_sidebar .menu-item > .menu-link.active,
:root[data-sm2care-theme] #kt_app_sidebar .menu-item > .menu-link.active:hover {
    background-color: var(--brand-primary-tint) !important;
    box-shadow: none !important;
}
:root[data-sm2care-theme] #kt_app_sidebar .menu-item > .menu-link.active::before { content: none !important; }
:root[data-sm2care-theme] #kt_app_sidebar .menu-item > .menu-link.active .menu-title {
    color: var(--brand-ink) !important;
    font-weight: 600;
}
:root[data-sm2care-theme] #kt_app_sidebar .menu-item > .menu-link.active .menu-icon i {
    color: var(--brand-primary) !important;
}

/* ---- Sidebar: gruppi apribili (terzo livello, sm/menu.php) ----
   Il gruppo e' un <button> (tastiera e aria-expanded); la tinta resta solo sulla voce della pagina corrente.
   Il gruppo che la contiene (classe here) ha titolo Inchiostro 600 e icona Rosso MGA, senza fondo ne' striscia.
   Le voci del gruppo hanno il pallino al posto dell'icona; sotto-menu senza fondo proprio (sistema piatto). */
#kt_app_sidebar .sm-menu-gruppo > button.menu-link {
    width: calc(100% - 12px);   /* come i link: margine 6px per lato (custom.themes.css) */
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
}
/* Focus da tastiera: Metronic mette outline: none !important su .menu-link, qui serve !important per vincere */
#kt_app_sidebar .sm-menu-gruppo > .menu-link:focus-visible,
#kt_app_sidebar .menu-item > a.menu-link:focus-visible {
    outline: 2px solid var(--brand-primary) !important;
    outline-offset: -2px;
}
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo.here > .menu-link,
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo.show > .menu-link {
    background-color: transparent !important;
    box-shadow: none !important;
}
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo > .menu-link:hover {
    background-color: var(--mbi-menu-hover-bg) !important;
}
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo > .menu-link::before { content: none !important; }
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo.here > .menu-link .menu-title {
    color: var(--brand-ink) !important;
    font-weight: 600;
}
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo.here > .menu-link .menu-icon i {
    color: var(--brand-primary) !important;
}
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo:not(.here) > .menu-link .menu-arrow {
    color: var(--mbi-menu-arrow) !important;
}
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo > .menu-sub-accordion {
    background-color: transparent !important;
}
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo .menu-link .menu-bullet .bullet {
    background-color: var(--mbi-menu-bullet) !important;
}
:root[data-sm2care-theme] #kt_app_sidebar .sm-menu-gruppo .menu-link.active .menu-bullet .bullet {
    background-color: var(--brand-primary) !important;
}

/* ---- Badge dell'ambiente nella topbar (sm/lib_page/_header.php, solo con SM_ENV diverso da production) ----
   Ambra e non rosso: il rosso e' del brand e degli errori. La parola dice l'ambiente, il punto pulsa piano
   (solo transform e opacity, fermo con prefers-reduced-motion). */
.sm-ambiente {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px 0 8px;
    border: 1px solid color-mix(in srgb, var(--brand-warning-strong) 28%, transparent);
    border-radius: 999px;
    background-color: var(--brand-warning-tint);
    color: var(--brand-warning-strong);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
}
.sm-ambiente-punto {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--brand-warning);
}
.sm-ambiente-punto::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--brand-warning);
    animation: sm-ambiente-pulsa 2.4s ease-out infinite;
}
@keyframes sm-ambiente-pulsa {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-ambiente-punto::after { animation: none; opacity: 0; }
}

/* ---- Badge dell'ultimo allineamento da Mago nella topbar (sm/lib_page/_header.php) ----
   Stessa forma del badge ambiente. Azzurro quando va (a posto o giro in corso: l'azzurro e' il colore di Mago
   nel resto del programma), rosso quando no (tabelle in errore, in ritardo, mai allineato); l'icona e il title
   dicono quale caso. Per gli Admin e' un link. */
.sm-topbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px 0 8px;
    border: 1px solid color-mix(in srgb, var(--sm-tb) 28%, transparent);
    border-radius: 999px;
    background-color: var(--sm-tb-tinta);
    color: var(--sm-tb);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 150ms ease-out;
}
.sm-topbadge i { font-size: 1rem; color: inherit; }
.sm-topbadge b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand-ink); }
a.sm-topbadge:hover { color: var(--sm-tb); border-color: var(--sm-tb); }
a.sm-topbadge:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sm-topbadge-rosso { --sm-tb: var(--brand-danger-strong);  --sm-tb-tinta: var(--brand-danger-tint); }
.sm-topbadge-blu   { --sm-tb: var(--brand-info-strong);    --sm-tb-tinta: var(--brand-info-tint); }
@media (prefers-reduced-motion: reduce) { .sm-topbadge { transition: none; } }

/* ---- Pulsante apri/chiudi della sidebar (sm/lib_page/_header.php) ----
   Icona a pannello: la colonna del menu si stringe e la freccia gira verso destra quando il menu e' chiuso.
   Lo stato lo da' l'attributo del body scritto da KTToggle, non la classe active del bottone. */
/* 38px, centrato sulla colonna delle icone della sidebar chiusa (asse a 45px dal bordo) */
#kt_app_header .sm-side-toggle {
    width: 38px !important;
    height: 38px !important;
    margin-left: -13px;
    padding: 0;
}
#kt_app_header .sm-side-toggle-svg { display: block; width: 24px; height: 24px; overflow: visible; }
#kt_app_header .sm-side-toggle-pannello {
    opacity: 0.18;
    transform-box: fill-box;
    transform-origin: left center;
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms ease-out;
}
#kt_app_header .sm-side-toggle-freccia {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
}
#kt_app_header .sm-side-toggle:hover .sm-side-toggle-pannello { opacity: 0.28; }
#kt_app_header .sm-side-toggle:hover .sm-side-toggle-freccia { transform: translateX(-1px); }
[data-kt-app-sidebar-minimize="on"] #kt_app_header .sm-side-toggle-pannello { transform: scaleX(0.5); }
[data-kt-app-sidebar-minimize="on"] #kt_app_header .sm-side-toggle-freccia { transform: rotate(180deg); }
[data-kt-app-sidebar-minimize="on"] #kt_app_header .sm-side-toggle:hover .sm-side-toggle-freccia { transform: rotate(180deg) translateX(-1px); }
:root[data-sm2care-theme] #kt_app_header .sm-side-toggle:focus-visible {
    outline: 2px solid var(--brand-primary) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ---- Sidebar chiusa: icone centrate nella colonna ----
   Metronic stringe la sidebar a 90px ma lascia i margini del menu aperto: le icone finivano spostate a destra.
   A menu chiuso (e senza hover, che la riapre) i margini si azzerano e ogni voce e' un quadrato di 44px
   centrato sui 90px; le intestazioni di sezione diventano un filetto corto, titoli e frecce spariscono. */
/* Solo da desktop: sotto 992px la sidebar e' un drawer sempre largo (Metronic ignora la chiusura).
   Col fuoco da tastiera dentro (focus-within) la sidebar si riapre come al passaggio del mouse: senza, il Tab
   finiva su icone senza etichetta e su voci di gruppi aperti ma alti zero. */
@media (min-width: 992px) {
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:focus-within {
        width: var(--bs-app-sidebar-width-actual) !important;
    }
    /* Metronic nasconde titoli, frecce e intestazioni con :not(:hover): col fuoco dentro tornano visibili */
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:focus-within .app-sidebar-menu-primary .menu-heading,
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:focus-within .app-sidebar-menu-primary .menu-title,
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:focus-within .app-sidebar-menu-primary .menu-arrow,
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:focus-within .app-sidebar-menu-primary .menu-badge {
        opacity: 1 !important;
        text-indent: 0 !important;
    }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:focus-within .app-sidebar-menu-primary {
        padding: 0 0.75rem !important;
    }
    /* larghezza piena come da aperta (margine 6px per lato, custom.themes.css) */
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:focus-within .app-sidebar-menu-primary > .menu-item > .menu-link {
        width: calc(100% - 12px) !important;
    }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:focus-within .app-sidebar-menu-primary .menu-item.show > .menu-sub {
        height: auto !important;
        overflow: visible !important;
    }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_menu {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    :root[data-sm2care-theme] [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_menu > .menu-item > .menu-link {
        width: 44px !important;
        margin: 2px 0 2px 23px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center;
        box-shadow: none !important;
    }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_menu > .menu-item > .menu-link .menu-icon { margin: 0 !important; }
    /* titolo nascosto alla vista ma non allo screen reader: la voce conserva il nome accessibile */
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_menu > .menu-item > .menu-link .menu-title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_menu > .menu-item > .menu-link .menu-arrow { display: none; }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_menu > .menu-item.pt-5 { padding-top: 0 !important; }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_menu > .menu-item.pt-5:first-child { display: none; }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_menu > .menu-item > .menu-content {
        width: 24px;
        height: 1px;
        margin: 12px 0 12px 33px;
        padding: 0;
        background-color: var(--brand-border);
    }
    [data-kt-app-sidebar-minimize="on"] #kt_app_sidebar:not(:hover):not(:focus-within) #kt_app_sidebar_menu .menu-heading { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #kt_app_header .sm-side-toggle-pannello,
    #kt_app_header .sm-side-toggle-freccia { transition: none; }
}

/* ---- Versione in fondo alla sidebar (sm/version.php, pattern di dev_prometes) ----
   Come le intestazioni di sezione della sidebar (unico maiuscolo ammesso, DESIGN.md), il numero in chiaro. */
#kt_app_sidebar .app-sidebar-wrapper { flex: 1 1 auto; min-height: 0; }
.sm-side-version {
    flex: none;
    padding: 12px 36px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-ink-secondary);
}
.sm-side-version span { margin-left: 4px; letter-spacing: 0; text-transform: none; color: var(--brand-ink-body); }
[data-kt-app-sidebar-minimize="on"] #kt_app_sidebar .sm-side-version { display: none; }

/* ---- Pannello di stato dell'allineamento (sm/gui/sincronizzazione) ----
   Giudizio in alto: la risposta prima del dettaglio. Il tono sta nel riquadro dell'icona (tinta + colore
   scuro del semantico), il titolo lo dice a parole; niente strisce laterali colorate. */
.sm-verdetto {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 1.5rem;
}
.sm-verdetto-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--brand-surface-muted);
    color: var(--brand-ink-secondary);
}
.sm-verdetto-ic i { font-size: 1.75rem; color: inherit; }
.sm-verdetto.is-success .sm-verdetto-ic { background: var(--brand-success-tint); color: var(--brand-success-strong); }
.sm-verdetto.is-warning .sm-verdetto-ic { background: var(--brand-warning-tint); color: var(--brand-warning-strong); }
.sm-verdetto.is-danger  .sm-verdetto-ic { background: var(--brand-danger-tint);  color: var(--brand-danger-strong); }
.sm-verdetto-testo { min-width: 0; }
.sm-verdetto-titolo { margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.3; color: var(--brand-ink); }
.sm-verdetto-dettaglio { margin: 4px 0 0; max-width: 100ch; font-size: 1.075rem; line-height: 1.5; color: var(--brand-ink-secondary); }

.sm-sync-entita { font-weight: 600; color: var(--brand-ink); }
.sm-ritardo { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--brand-warning-strong); white-space: nowrap; }
.sm-ritardo i { font-size: 1.1rem; color: inherit; }
:root[data-sm2care-theme] .sm-tabella > tbody > tr.sm-sync-errore > td {
    background: var(--brand-danger-tint);
    color: var(--brand-danger-strong);
}
.sm-sync-errore i { font-size: 1.1rem; color: inherit; vertical-align: -0.15em; margin-right: 4px; }
/* Aggiorna in corso: spinner al posto dell'icona, etichetta invariata (DESIGN.md, Buttons) */
#sync_aggiorna .spinner-border { width: 14px; height: 14px; border-width: 2px; margin-right: 4px; }
@media (max-width: 575.98px) {
    .sm-verdetto { align-items: flex-start; padding: 16px; }
    .sm-verdetto-ic { width: 40px; height: 40px; }
}

/* Scheda cliente, tab Referenti: email lunghe (fino a 86 caratteri, a volte piu' indirizzi) vanno a capo */
.sm-ref-email { min-width: 14rem; max-width: 22rem; overflow-wrap: break-word; }

/* Telefoni ed email nelle tabelle: link neutri (il rosso resta per il codice della riga, Spia Rossa Rule),
   sottolineati e rossi in hover e focus. */
.sm-tabella td a[href^="tel:"],
.sm-tabella td a[href^="mailto:"],
a.sm-link-dato { color: var(--brand-ink-body); font-weight: inherit; text-decoration: underline; text-decoration-color: var(--brand-border-control); text-underline-offset: 2px; }
.sm-tabella td a[href^="tel:"]:hover,
.sm-tabella td a[href^="mailto:"]:hover,
.sm-tabella td a[href^="tel:"]:focus-visible,
.sm-tabella td a[href^="mailto:"]:focus-visible,
a.sm-link-dato:hover,
a.sm-link-dato:focus-visible { color: var(--brand-primary); text-decoration-color: currentColor; }
.sm-secondario a.sm-link-dato { color: inherit; }
.sm-secondario a.sm-link-dato:hover { color: var(--brand-primary); }

/* ---- Modale di dialogo custom (sm_dialogo in lib_scripts/generic.js: sm_confirm, sm_success, sm_error) ----
   Al posto di SweetAlert: stesso sistema dei pannelli. Icona nel riquadro col tono del semantico, titolo Title,
   testo Body, bottoni a destra (Annulla secondario, azione principale; rosso errore solo se distruttiva). */
.sm-dialogo .modal-dialog { max-width: 440px; }
.sm-dialogo .modal-content { border: 1px solid var(--brand-border); border-radius: 8px; box-shadow: 0 16px 40px rgba(17, 24, 39, 0.16); }
.sm-dialogo-corpo { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 8px; }
.sm-dialogo-ic {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px;
    background: var(--brand-surface-muted); color: var(--brand-ink-secondary);
}
.sm-dialogo-ic i { font-size: 1.5rem; color: inherit; }
.sm-dialogo.is-success .sm-dialogo-ic { background: var(--brand-success-tint); color: var(--brand-success-strong); }
.sm-dialogo.is-warning .sm-dialogo-ic { background: var(--brand-warning-tint); color: var(--brand-warning-strong); }
.sm-dialogo.is-danger  .sm-dialogo-ic { background: var(--brand-danger-tint);  color: var(--brand-danger-strong); }
.sm-dialogo.is-info    .sm-dialogo-ic { background: var(--brand-info-tint);    color: var(--brand-info-strong); }
.sm-dialogo-testi { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.sm-dialogo-titolo { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: var(--brand-ink); }
.sm-dialogo-testo { margin-top: 4px; font-size: 1.075rem; line-height: 1.5; color: var(--brand-ink-secondary); overflow-wrap: anywhere; }
/* Eliminazioni pesanti (opzioni perdite e parola): cosa va via in un riquadro, poi la parola da scrivere. Il campo
   diventa verde con la spunta quando la parola e' giusta; il bottone rosso resta spento (sbiadito) fino ad allora. */
.sm-dialogo.is-scritta .modal-dialog { max-width: 520px; }
/* Di cosa si parla (opzione oggetto): righe etichetta / valore su Superficie Tenue, come la striscia dei modali dei form */
.sm-dialogo-oggetto[hidden] { display: none; }
.sm-dialogo-oggetto {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; padding: 10px 12px;
    border-radius: 8px; background: var(--brand-surface-muted);
}
.sm-dialogo-oggetto > div { display: contents; }
.sm-dialogo-oggetto dt { font-size: 0.95rem; font-weight: 400; color: var(--brand-ink-secondary); }
.sm-dialogo-oggetto dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--brand-ink); overflow-wrap: anywhere; }
.sm-dialogo-oggetto + .sm-dialogo-testo { margin-top: 12px; }
.sm-dialogo-perdite {
    margin-top: 14px; padding: 10px 14px 12px; border: 1px solid var(--brand-border); border-radius: 8px;
    background: var(--brand-surface-muted);
}
.sm-dialogo-perdite-tit {
    display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 0.95rem; font-weight: 600; line-height: 1.4;
    color: var(--brand-danger-strong);
}
.sm-dialogo-perdite-tit i { font-size: 1rem; color: inherit; }
.sm-dialogo-perdite ul, .sm-dialogo-restano ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.sm-dialogo-perdite li, .sm-dialogo-restano li { position: relative; padding-left: 14px; font-size: 1rem; line-height: 1.5; color: var(--brand-ink); }
.sm-dialogo-perdite li b, .sm-dialogo-restano li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sm-dialogo-perdite li::before, .sm-dialogo-restano li::before {
    content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand-danger-strong);
}
/* Cosa resta (opzione restano): sotto il rosso, neutro, per non far temere quello che non si tocca */
.sm-dialogo-restano[hidden], .sm-dialogo-perdite[hidden] { display: none; }
.sm-dialogo-restano { margin-top: 8px; padding: 0 14px; }
.sm-dialogo-restano-tit {
    display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 0.95rem; font-weight: 600; line-height: 1.4;
    color: var(--brand-ink-secondary);
}
.sm-dialogo-restano-tit i { font-size: 1rem; color: var(--brand-success-strong); }
.sm-dialogo-restano li { color: var(--brand-ink-body); }
.sm-dialogo-restano li::before { background: var(--brand-border-control); }
.sm-dialogo-parola { margin-top: 16px; }
.sm-dialogo-parola-lbl { display: block; margin-bottom: 6px; font-size: 1rem; color: var(--brand-ink-body); }
.sm-dialogo-parola-lbl b {
    display: inline-block; margin: 0 2px; padding: 1px 7px; border: 1px solid var(--brand-border-control); border-radius: 4px;
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; background: var(--brand-surface-muted); color: var(--brand-ink);
}
.sm-dialogo-parola-campo { position: relative; }
.sm-dialogo-parola .form-control {
    height: 40px; padding-right: 40px; font-size: 1.075rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.sm-dialogo-parola .form-control::placeholder { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--brand-muted); }
/* Col fuoco il campo resta neutro (filo inchiostro): l'alone rosa del rosso MGA, in un dialogo rosso, sembrava un errore */
.sm-dialogo-parola .form-control:focus { border-color: var(--brand-ink-secondary) !important; box-shadow: 0 0 0 3px var(--brand-surface-muted) !important; }
.sm-dialogo-parola-ok {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(0.6); opacity: 0;
    font-size: 1.35rem; color: var(--brand-success-strong); transition: opacity 0.15s ease, transform 0.15s ease;
}
.sm-dialogo-parola.is-ok .form-control,
.sm-dialogo-parola.is-ok .form-control:focus { border-color: var(--brand-success-strong) !important; box-shadow: 0 0 0 3px var(--brand-success-tint) !important; }
.sm-dialogo-parola.is-ok .sm-dialogo-parola-ok { opacity: 1; transform: translateY(-50%) scale(1); }
.sm-dialogo-parola-esito:empty { display: none; }
.sm-dialogo-parola-esito { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn.sm-dialogo-ok i { margin-right: 6px; font-size: 1.1rem; color: inherit; vertical-align: -2px; }
.btn.sm-dialogo-ok:disabled { opacity: 0.5 !important; cursor: not-allowed; pointer-events: auto; }
/* Distruttivo spento: grigio pieno leggibile (non il rosso sbiadito, che sembrava rotto); diventa rosso con la parola giusta */
.btn.sm-dialogo-ok.is-distruttivo:disabled {
    opacity: 1 !important; background: var(--brand-surface-muted) !important; border: 1px solid var(--brand-border) !important;
    color: var(--brand-ink-secondary) !important;
}
@media (prefers-reduced-motion: reduce) { .sm-dialogo-parola-ok { transition: none; } }
@media (max-width: 575.98px) {
    .sm-dialogo-perdite ul { grid-template-columns: 1fr; }
    .sm-dialogo-parola .form-control { height: 44px; }
    .sm-dialogo-piede .btn { min-height: 44px; }
}
.sm-dialogo-piede { gap: 8px; padding: 12px 20px 16px; border-top: 0; }
.sm-dialogo-piede > * { margin: 0; }
.btn.sm-dialogo-annulla {
    background: var(--brand-surface) !important; border: 1px solid var(--brand-border-control) !important;
    color: var(--brand-ink-body) !important; font-weight: 600;
}
.btn.sm-dialogo-annulla:hover { background: var(--brand-shell) !important; color: var(--brand-ink) !important; }
.btn.sm-dialogo-ok.is-distruttivo { background: var(--brand-danger-strong); border: 0; color: var(--brand-surface); font-weight: 600; }
.btn.sm-dialogo-ok.is-distruttivo:hover { background: var(--brand-primary-active); color: var(--brand-surface); }
.sm-dialogo .btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
@media (max-width: 575.98px) {
    .sm-dialogo-piede { flex-direction: column-reverse; align-items: stretch; }
}

/* ---- Menu di azioni (dropdown di Bootstrap, .sm-menu; primo uso: scheda profilo) ----
   Bottone in Tinta Rossa con testo e icona Rosso MGA, alto come la tendina accanto, freccia che gira all'apertura.
   Menu con ombra Sovrapposizione; ogni voce ha l'icona in un riquadro e una riga che dice cosa succede. La principale
   ha il riquadro in Tinta Rossa, quelle che tolgono qualcosa stanno in fondo in rosso errore dopo un separatore. */
.btn.sm-menu-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px !important; white-space: nowrap;
    background: var(--brand-primary-tint) !important; border: 1px solid transparent !important; border-radius: 6px;
    color: var(--brand-primary) !important; font-weight: 600;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}
:root[data-sm2care-theme] .btn.sm-menu-btn i { color: inherit; font-size: 1.25rem; padding: 0; }
.btn.sm-menu-btn.dropdown-toggle::after { display: none; }
.btn.sm-menu-btn .sm-menu-freccia { margin-left: 2px; font-size: 1rem !important; transition: transform 150ms ease-out; }
.btn.sm-menu-btn:hover { border-color: var(--brand-primary) !important; }
.btn.sm-menu-btn[aria-expanded="true"] { border-color: var(--brand-primary) !important; box-shadow: inset 0 0 0 1px var(--brand-primary); }
.btn.sm-menu-btn[aria-expanded="true"] .sm-menu-freccia { transform: rotate(180deg); }
.sm-menu.dropdown-menu { min-width: 300px; padding: 6px; border: 1px solid var(--brand-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08); }
.sm-menu .dropdown-item {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 7px 10px; border-radius: 6px;
    color: var(--brand-ink); white-space: normal;
}
.sm-menu-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--brand-surface-muted); color: var(--brand-ink-secondary); }
:root[data-sm2care-theme] .sm-menu .sm-menu-ic i { font-size: 1.25rem; color: inherit; }
.sm-menu-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sm-menu-testo b { font-size: 1.075rem; font-weight: 600; }
.sm-menu-testo small { margin-top: 1px; font-size: 0.95rem; color: var(--brand-ink-secondary); }
.sm-menu .dropdown-item:hover, .sm-menu .dropdown-item:focus { background: var(--brand-shell); color: var(--brand-ink); }
.sm-menu .dropdown-item:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.sm-menu .dropdown-item.is-primaria .sm-menu-ic { background: var(--brand-primary-tint); color: var(--brand-primary); }
.sm-menu .dropdown-item.is-pericolo { color: var(--brand-danger-strong); }
.sm-menu .dropdown-item.is-pericolo .sm-menu-ic { background: var(--brand-danger-tint); color: var(--brand-danger-strong); }
.sm-menu .dropdown-item.is-pericolo:hover, .sm-menu .dropdown-item.is-pericolo:focus { background: var(--brand-danger-tint); color: var(--brand-danger-strong); }
.sm-menu .dropdown-item.is-pericolo:hover .sm-menu-ic, .sm-menu .dropdown-item.is-pericolo:focus .sm-menu-ic { background: var(--brand-surface); }
.sm-menu .dropdown-divider { margin: 6px 4px; border-color: var(--brand-border); opacity: 1; }
/* Menu dell'utente nell'header (_header.php): in testa chi e' collegato, poi le voci */
.sm-utente-menu.dropdown-menu { min-width: 280px; max-width: min(340px, calc(100vw - 24px)); }
.sm-utente-testa { display: flex; align-items: center; gap: 12px; padding: 8px 10px 6px; }
.sm-utente-chi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.sm-utente-nome { font-size: 1.075rem; font-weight: 600; color: var(--brand-ink); line-height: 1.3; }
.sm-utente-email { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; color: var(--brand-ink-secondary); }
.sm-badge.sm-utente-ruolo { margin-top: 4px; }
/* Menu mini delle azioni di riga (bottone a tre puntini): una riga per voce, icona grigia senza riquadro,
   "Fatta" in verde, quelle che tolgono in fondo in rosso dopo il separatore. 44px al tocco. */
.sm-menu.is-mini.dropdown-menu { min-width: 190px; }
.sm-menu.is-mini .dropdown-item { gap: 10px; min-height: 36px; padding: 6px 10px; font-weight: 500; }
.sm-menu.is-mini .dropdown-item .sm-ico { flex: none; width: 18px; height: 18px; color: var(--brand-ink-secondary); }
.sm-menu.is-mini .dropdown-item.is-ok .sm-ico { color: var(--brand-success-strong); }
.sm-menu.is-mini .dropdown-item.is-pericolo .sm-ico { color: inherit; }
@media (pointer: coarse) { .sm-menu.is-mini .dropdown-item { min-height: 44px; } }
.btn.sm-btn-icona[aria-expanded="true"] { background: var(--brand-shell); color: var(--brand-ink); }
@media (prefers-reduced-motion: reduce) { .btn.sm-menu-btn, .btn.sm-menu-btn .sm-menu-freccia { transition: none; } }

/* ---- Modali dei form (cornice .sm-mod, primo uso: scheda contratto) ----
   Stessa famiglia di .sm-dialogo: testata con il riquadro icona dell'entita' e il contesto (di quale contratto,
   di quale posizione), il dato in vigore prima di cambiarlo (.sm-mod-oggi), sezioni con titolo e icona, scelte a
   schede (.sm-scelte), l'anteprima di cosa succede (.sm-mod-esito), piede con legenda e bottoni. A tutto schermo
   sotto 576px (modal-fullscreen-sm-down). */
.sm-mod .modal-content { border: 1px solid var(--brand-border); border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(17, 24, 39, 0.16); }
.sm-mod-testa { display: flex; align-items: flex-start; gap: 14px; padding: 18px 14px 16px 20px; border-bottom: 1px solid var(--brand-border); background: var(--brand-surface); }
.sm-mod-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--brand-primary-tint); color: var(--brand-primary); }
:root[data-sm2care-theme] .sm-mod-ic i { font-size: 1.5rem; color: inherit; }
.sm-mod-ic .sm-ico { width: 22px; height: 22px; }
.sm-mod.is-warning .sm-mod-ic { background: var(--brand-warning-tint); color: var(--brand-warning-strong); }
.sm-mod-id { flex: 1; min-width: 0; padding-top: 1px; }
.sm-mod-titolo { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: var(--brand-ink); }
.sm-mod-sub { margin: 2px 0 0; font-size: 1rem; line-height: 1.45; color: var(--brand-ink-secondary); overflow-wrap: anywhere; }
.sm-mod-sub:empty { display: none; }
.sm-mod-testa .sm-btn-icona { margin: -4px 0 0 4px; }
.sm-mod .modal-body { padding: 20px; }

/* Il dato di oggi: striscia con divisori verticali come la testata delle schede */
.sm-mod-oggi { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0 0 18px; padding: 12px 0; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface-muted); }
.sm-mod-oggi:empty { display: none; }
.sm-mod-oggi > div { flex: 1 1 130px; min-width: 0; padding: 0 16px; border-left: 1px solid var(--brand-border); }
.sm-mod-oggi > div:first-child { border-left: 0; }
.sm-mod-oggi dt { font-size: 0.95rem; font-weight: 600; color: var(--brand-ink-secondary); }
.sm-mod-oggi dd { margin: 2px 0 0; font-weight: 600; color: var(--brand-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sm-mod-oggi dd .sm-codice { font-weight: 600; }

/* Sezioni: titolo con icona grigia, divisore fra l'una e l'altra (mai pannelli dentro il modale) */
.sm-mod-sez { min-width: 0; margin: 0; padding: 0; border: 0; }
.sm-mod-sez[hidden] { display: none; }
.sm-mod-sez + .sm-mod-sez { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--brand-border); }
/* Altre opzioni di un modale: quello che cambia di rado, chiuso finche' non serve */
.sm-mod-altre > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; cursor: pointer; font-weight: 600; color: var(--brand-ink-body); list-style: none; }
.sm-mod-altre > summary::-webkit-details-marker { display: none; }
.sm-mod-altre > summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 4px; }
.sm-mod-altre > summary i { transition: transform .15s ease-out; }
.sm-mod-altre[open] > summary i { transform: rotate(90deg); }
.sm-mod-altre-corpo { margin-top: 12px; }
.sm-rg-gruppo + .sm-mod-altre { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .sm-mod-altre > summary i { transition: none; } }
/* legend in float: cosi' sta dentro il padding del fieldset e non sul suo bordo (niente vuoto sotto il titolo) */
.sm-mod-sez-titolo { display: flex; align-items: center; gap: 8px; float: left; width: 100%; margin: 0 0 12px; padding: 0; font-size: 1.075rem; font-weight: 600; line-height: 1.4; color: var(--brand-ink); }
.sm-mod-sez-titolo + * { clear: both; }
:root[data-sm2care-theme] .sm-mod-sez-titolo i { font-size: 1.3rem; color: var(--brand-muted); }
.sm-mod-sez-titolo .sm-ico { width: 18px; height: 18px; color: var(--brand-muted); }

/* Nota di sistema: cosa vale, in tinta informativa (ambra se avverte di una conseguenza) */
.sm-mod-nota { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border-radius: 6px; background: var(--brand-info-tint); color: var(--brand-ink-body); line-height: 1.5; }
.sm-mod-nota[hidden], .sm-mod-nota:empty { display: none; }
:root[data-sm2care-theme] .sm-mod-nota > i { flex: none; margin-top: 2px; font-size: 1.25rem; color: var(--brand-info-strong); }
.sm-mod-nota.is-warning { background: var(--brand-warning-tint); }
:root[data-sm2care-theme] .sm-mod-nota.is-warning > i { color: var(--brand-warning-strong); }

/* Scelte a schede: bottoni aria-pressed con icona, nome e riga di spiegazione; la scelta ha tinta e filo 2px */
.sm-scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sm-scelte.is-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Schede senza riga di spiegazione: piu' strette, tre per riga nei modali normali */
.sm-scelte.is-compatte { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.sm-scelte.is-compatte button { align-items: center; }
.sm-scelte.is-compatte .sm-scelte-testo { padding-top: 0; }
.sm-scelte.is-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-scelte.is-compatte.is-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-scelte button {
    display: flex; align-items: flex-start; gap: 10px; min-width: 0; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-surface);
    color: var(--brand-ink-body); text-align: left; line-height: 1.35;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.sm-scelte-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--brand-surface-muted); color: var(--brand-ink-secondary); transition: color 150ms ease-out, background-color 150ms ease-out; }
:root[data-sm2care-theme] .sm-scelte-ic i { font-size: 1.25rem; color: inherit; }
.sm-scelte-ic .sm-ico { width: 18px; height: 18px; }
.sm-scelte-testo { min-width: 0; padding-top: 5px; }
.sm-scelte-testo b { display: block; font-weight: 600; color: var(--brand-ink); }
.sm-scelte-testo small { display: block; margin-top: 3px; font-size: 0.95rem; color: var(--brand-ink-secondary); }
.sm-scelte button:hover { background: var(--brand-canvas); border-color: var(--brand-border-control); }
.sm-scelte button[aria-pressed="true"] { background: var(--brand-primary-tint); border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.sm-scelte button[aria-pressed="true"] .sm-scelte-ic { background: var(--brand-surface); color: var(--brand-primary); }
.sm-scelte button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sm-scelte button[hidden] { display: none; }
.sm-scelte.is-invalid button { border-color: var(--brand-danger-strong); }
/* Scelta multipla (.is-multi, primo uso i tipi di contratto del profilo): una casella a destra dice che le schede si
   accendono e spengono una per una, spuntata sulle scelte */
.sm-scelte.is-multi button { position: relative; padding-right: 40px; }
.sm-scelte.is-multi button::after {
    content: ""; position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; margin-top: -9px;
    border: 1.5px solid var(--brand-border-control); border-radius: 4px; background: var(--brand-surface);
}
.sm-scelte.is-multi button[aria-pressed="true"]::after { border-color: var(--brand-primary); background: var(--brand-primary); }
.sm-scelte.is-multi button[aria-pressed="true"]::before {
    content: ""; position: absolute; z-index: 1; top: 50%; right: 20px; width: 6px; height: 10px; margin-top: -7px;
    border: solid var(--brand-surface); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Bloccata (es. contratto attivo): la scelta fatta resta leggibile, le altre si spengono */
.sm-scelte button:disabled { cursor: not-allowed; opacity: 0.55; }

/* Pannello accanto a un modale (DESIGN.md "Pannello accanto a un modale"; primo uso la riga voce della regola, poi il
   servizio del modello di fatturazione): a destra a tutta altezza, sopra il modale di partenza con un velo appena
   accennato (classe sm-pannello-aperto sul body a show.bs.modal). Lo spostamento del modale di partenza
   (.is-affiancato) sta nel CSS della sua pagina. */
.sm-mod.sm-mod-sopra { z-index: 1065; }
body.sm-pannello-aperto > .modal-backdrop ~ .modal-backdrop { z-index: 1060; opacity: 0.12 !important; }
.sm-mod.sm-mod-pannello .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 100vw; height: 100%; max-height: none; margin: 0; }
.sm-mod.sm-mod-pannello.fade .modal-dialog { transform: translateX(32px); transition: transform 180ms ease-out; }
.sm-mod.sm-mod-pannello.show .modal-dialog { transform: none; }
.sm-mod.sm-mod-pannello .modal-content { height: 100%; max-height: none; border-radius: 0; box-shadow: -12px 0 32px rgba(17, 24, 39, 0.16); }
@media (prefers-reduced-motion: reduce) { .sm-mod.sm-mod-pannello.fade .modal-dialog { transition: none; } }
.sm-scelte button[aria-pressed="true"]:disabled { opacity: 1; }
@media (max-width: 575.98px) {
    .sm-scelte, .sm-scelte.is-due { grid-template-columns: minmax(0, 1fr); }
    .sm-scelte.is-compatte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-scelte.is-tre { grid-template-columns: minmax(0, 1fr); }
}

/* Cosa succede: il prima e il dopo della modifica, aggiornati mentre si scrive */
.sm-mod-esito { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--brand-border); border-radius: 8px; }
.sm-mod-esito:empty { display: none; }
.sm-mod-esito-lbl { display: block; margin-bottom: 8px; font-size: 0.95rem; font-weight: 600; color: var(--brand-muted); }
.sm-mod-passi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sm-mod-passo { display: flex; flex-direction: column; min-width: 0; }
.sm-mod-passo b { font-weight: 600; color: var(--brand-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sm-mod-passo span { font-size: 1rem; color: var(--brand-ink-secondary); font-variant-numeric: tabular-nums; }
.sm-mod-passo.is-prima b { color: var(--brand-ink-secondary); font-weight: 500; }
:root[data-sm2care-theme] .sm-mod-passi > i { flex: none; font-size: 1.35rem; color: var(--brand-muted); }
.sm-mod-esito p { margin: 8px 0 0; color: var(--brand-ink-body); }

/* Piede: legenda dei campi obbligatori a sinistra, Annulla e azione principale a destra */
.sm-mod .modal-footer { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--brand-border); background: var(--brand-surface); }
.sm-mod .modal-footer > * { margin: 0; }
.sm-mod-legenda { margin-right: auto !important; font-size: 0.95rem; color: var(--brand-muted); }
.btn.sm-btn-secondario {
    background: var(--brand-surface) !important; border: 1px solid var(--brand-border-control) !important;
    color: var(--brand-ink-body) !important; font-weight: 600;
}
.btn.sm-btn-secondario:hover { background: var(--brand-shell) !important; color: var(--brand-ink) !important; }
.sm-mod .modal-footer .btn-primary { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 575.98px) {
    .sm-mod .modal-content { border: 0; border-radius: 0; }
    .sm-mod .modal-body { padding: 16px; }
    .sm-mod-testa { padding: 14px 10px 14px 16px; }
    .sm-mod .modal-footer { flex-wrap: wrap; padding: 12px 16px; }
    .sm-mod-legenda { flex-basis: 100%; }
    .sm-mod .modal-footer .btn { flex: 1 1 0; min-height: 44px; justify-content: center; }
    .sm-mod-oggi > div { flex-basis: 50%; }
    .sm-mod-oggi > div:nth-child(odd) { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .sm-scelte button, .sm-scelte-ic { transition: none; } }

/* ---- Modali a passi (.sm-tappe, primo uso: prestazione in Configurazione contratti) ----
   Barra fissa fra testata e corpo (resta in vista mentre il corpo scorre): numero nel cerchio, nome, conteggio
   facoltativo; fra un passo e l'altro un filo. Attivo: cerchio Rosso MGA pieno, nome Inchiostro e filo Rosso 2px sotto
   (come le tab); fatto: spunta su Tinta Verde; da fare: cerchio col bordo controllo. Mai solo il colore: numero o
   spunta, aria-current="step". Markup sm_mod_tappe (_modale_form.php), comportamento sm/lib_scripts/sm_tappe.js. */
.sm-tappe { flex-shrink: 0; padding: 0 20px; border-bottom: 1px solid var(--brand-border); background: var(--brand-surface); overflow-x: auto; scrollbar-width: none; }
.sm-tappe ol { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.sm-tappe li { display: flex; align-items: center; flex: none; }
.sm-tappe li + li::before { content: ''; width: 28px; height: 1px; margin: 0 6px; background: var(--brand-border-control); }
.sm-tappe button {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 6px; border: 0; background: transparent;
    font-size: 1.075rem; font-weight: 600; color: var(--brand-ink-secondary);
    transition: color 150ms ease-out;
}
.sm-tappe button:hover { color: var(--brand-ink); }
.sm-tappe button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; border-radius: 6px; }
.sm-tappe button.is-attiva { color: var(--brand-ink); }
.sm-tappe button.is-attiva::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-primary); }
.sm-tappe-n {
    display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid var(--brand-border-control); background: var(--brand-surface);
    font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand-ink-secondary);
    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.sm-tappe-n > * { grid-area: 1 / 1; }
:root[data-sm2care-theme] .sm-tappe-n i { display: none; font-size: 1rem; color: inherit; }
.sm-tappe button.is-attiva .sm-tappe-n { border-color: var(--brand-primary); background: var(--brand-primary); color: var(--brand-surface); }
.sm-tappe button.is-fatta .sm-tappe-n { border-color: var(--brand-success-strong); background: var(--brand-success-tint); color: var(--brand-success-strong); }
.sm-tappe button.is-fatta .sm-tappe-n span { display: none; }
:root[data-sm2care-theme] .sm-tappe button.is-fatta .sm-tappe-n i { display: block; }
.sm-tappe-conto {
    min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--brand-shell);
    font-size: 0.95rem; font-weight: 600; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; color: var(--brand-ink-body);
}
.sm-tappe-conto[hidden] { display: none; }
/* Il corpo non salta di altezza fra un passo e l'altro; le sezioni nascoste non lasciano il divisore */
@media (min-width: 576px) { .sm-mod .modal-body.is-tappe { min-height: 320px; } }
/* Legenda dei passi senza campi obbligatori: tiene il posto (i bottoni restano a destra), su telefono sparisce */
.sm-mod-legenda.is-nascosta { visibility: hidden; }
@media (max-width: 575.98px) { .sm-mod-legenda.is-nascosta { display: none; } }
.is-tappe > .sm-mod-sez + .sm-mod-sez { margin-top: 0; padding-top: 0; border-top: 0; }
/* Il passo non attivo (sm_tappe.js): la classe, non hidden, che resta della pagina per dire se il passo vale */
.is-tappe > .is-fuori-tappa { display: none !important; }
/* Telefono: nel percorso guidato dei passi non attivi solo il numero (il nome resta per lo screen reader); con i
   passi come schede (prestazione esistente) i nomi restano, la barra scorre sul passo attivo */
@media (max-width: 575.98px) {
    .sm-tappe { padding: 0 10px; }
    .sm-tappe li + li::before { width: 14px; margin: 0 2px; }
    .sm-tappe button { height: 48px; min-width: 44px; justify-content: center; }
    .sm-tappe:not(.is-schede) button:not(.is-attiva) .sm-tappe-nome {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}
@media (prefers-reduced-motion: reduce) { .sm-tappe button, .sm-tappe-n { transition: none; } }

/* Misure dei modali dei form: un gradino sopra le tabelle (richiesta dell'utente del 2026-10-05). Valori in Body
   (1.075rem), etichette e aiuti a 1rem, titolo in Headline, campi da 36px; 880px il largo, 560px il normale. */
@media (min-width: 576px) {
    .sm-mod .modal-dialog { max-width: 560px; }
    .sm-mod .modal-dialog.modal-lg { max-width: 880px; }
}
.sm-mod-titolo { font-size: 1.35rem; line-height: 1.3; }
.sm-mod-sub { font-size: 1.075rem; }
.sm-mod-sez-titolo { font-size: 1.15rem; }
.sm-mod .form-label,
.sm-mod .sm-cc-campi .form-label,
.sm-mod .sm-cc-campi .form-label.d-block,
.sm-mod .form-text { font-size: 1rem; }
.sm-mod .form-control.form-control-sm,
.sm-mod .form-select.form-select-sm,
.sm-mod .form-check-label,
.sm-mod .select2-container .select2-selection,
.sm-mod .select2-container .select2-selection__rendered,
.sm-mod .select2-results__option { font-size: 1.075rem; }
.sm-mod .form-control.form-control-sm:not(textarea),
.sm-mod .select2-container .select2-selection--single { min-height: 36px; }
.sm-mod .sm-segmenti button { height: 36px; font-size: 1rem; }
.sm-mod .modal-footer .btn { min-height: 36px; font-size: 1.075rem; }
/* Sotto 576px i bottoni del piede tornano a 44px: la regola sopra annullava quella della cornice */
@media (max-width: 575.98px) { .sm-mod .modal-footer .btn { min-height: 44px; } }
.sm-mod-nota, .sm-mod-esito p, .sm-mod-oggi dd, .sm-scelte-testo b { font-size: 1.075rem; }
.sm-mod-oggi dt, .sm-mod-esito-lbl, .sm-scelte-testo small, .sm-mod-legenda { font-size: 1rem; }
.sm-mod-passo b { font-size: 1.075rem; }

/* ---- Campi numerici con l'unita' dentro il controllo (SM_NUMERO in lib_scripts/sm_numero.js) ----
   Un solo bordo per numero e unita' (come il telefono, .sm-tel), bordo, raggio e focus come gli altri campi:
   numero a destra in cifre tabulari, unita' in un riquadro tenue a destra (€, %, ore di manodopera). */
.sm-numero {
    display: flex;
    align-items: stretch;
    min-height: 34px;
    border: 1px solid var(--brand-border);
    border-radius: var(--bs-border-radius);
    background: var(--brand-surface);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.sm-mod .sm-numero { min-height: 36px; }
.sm-numero:focus-within { border-color: rgba(var(--brand-primary-rgb), 0.34); box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.1); }
.sm-numero:has(> input.is-invalid) { border-color: var(--brand-danger-strong); }
.sm-numero:has(> input[hidden]) { display: none; }
.sm-numero > .form-control,
:root[data-sm2care-theme] .sm-numero > .form-control {
    flex: 1;
    min-width: 0;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
    background: transparent !important;
    box-shadow: none !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sm-numero > .form-control::placeholder { font-weight: 400; color: var(--brand-muted); }
.sm-numero-unita {
    flex: none;
    display: flex;
    align-items: center;
    max-width: 55%;
    padding: 0 12px;
    border-left: 1px solid var(--brand-border);
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    background: var(--brand-surface-muted);
    color: var(--brand-ink-body);
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-numero-unita:empty { display: none; }
.sm-numero > .form-control:disabled, .sm-numero > .form-control[readonly] { color: var(--brand-muted); }

/* ---- Campi data (SM_DATA in lib_scripts/sm_data.js, flatpickr): icona calendario dentro il campo ---- */
.sm-data-box { position: relative; display: block; }
.sm-data-box:has(> input[hidden]) { display: none; }   /* campo data nascosto: via anche l'icona */
.sm-data-box .form-control { padding-right: 34px; }
.sm-data-box .form-control.is-invalid { background-image: none; }   /* l'errore ha icona e testo sotto il campo */
:root[data-sm2care-theme] .sm-data-ic { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 1.25rem; color: var(--brand-muted); pointer-events: none; }
.sm-data-box .form-control:focus ~ .sm-data-ic { color: var(--brand-primary); }
.sm-data-box .form-control:disabled ~ .sm-data-ic,
.sm-data-box .form-control[readonly] ~ .sm-data-ic { opacity: 0.5; }

/* Calendario: Sovrapposizione di DESIGN.md, giorno scelto in Rosso MGA, oggi con il filo */
.flatpickr-calendar { border: 1px solid var(--brand-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08) !important; font-family: inherit; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-calendar .flatpickr-months .flatpickr-month,
.flatpickr-calendar .flatpickr-current-month { color: var(--brand-ink); font-weight: 600; }
.flatpickr-calendar .flatpickr-weekday { color: var(--brand-muted); font-weight: 600; }
.flatpickr-calendar .flatpickr-day { color: var(--brand-ink-body); border-radius: 6px; font-variant-numeric: tabular-nums; }
.flatpickr-calendar .flatpickr-day:hover { background: var(--brand-shell); border-color: var(--brand-shell); color: var(--brand-ink); }
.flatpickr-calendar .flatpickr-day.today { border-color: var(--brand-border-control); }
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-surface); font-weight: 600; }
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay { color: var(--brand-muted); opacity: 0.6; }
.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg { fill: var(--brand-primary); }

/* ---- Campo telefono con prefisso (lib_scripts/phoneinput.js, classe PhoneInput) ----
   Un solo controllo visivo: select del prefisso e numero condividono bordo e anello di focus. */
.sm-tel {
    display: flex;
    align-items: stretch;
    height: 34px;
    border: 1px solid var(--brand-border-control);
    border-radius: 6px;
    background: var(--brand-surface);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.sm-tel:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.24); }
.sm-tel.is-invalid { border-color: var(--brand-danger-strong); }
.sm-tel-prefisso {
    flex: none;
    width: 86px;
    padding: 0 22px 0 10px;
    border: 0;
    border-right: 1px solid var(--brand-border);
    border-radius: 6px 0 0 6px;
    background: var(--brand-surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 14px 14px;
    color: var(--brand-ink-body);
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    appearance: none;
    cursor: pointer;
}
.sm-tel-prefisso:focus { outline: none; }
.sm-tel-prefisso:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-primary); }
.sm-tel .form-control.sm-tel-numero,
:root[data-sm2care-theme] .sm-tel .form-control.sm-tel-numero {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0 !important;
    border-radius: 0 6px 6px 0;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 10px !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.sm-tel-prefisso:disabled, .sm-tel .sm-tel-numero:disabled { cursor: not-allowed; color: var(--brand-muted); }
/* Prefisso con Select2: la selezione prende il posto del select nativo, stessa misura e fondo tenue */
.sm-tel .select2-container { flex: none; width: 92px !important; }
.sm-tel .select2-container .select2-selection,
.sm-tel .select2-container .select2-selection.form-select {
    display: flex;
    align-items: center;
    height: 32px !important;
    min-height: 0;
    padding: 0 26px 0 10px !important;
    border: 0 !important;
    border-right: 1px solid var(--brand-border) !important;
    border-radius: 5px 0 0 5px !important;
    background-color: var(--brand-surface-muted) !important;
    background-position: right 8px center !important;
    background-size: 12px 12px !important;
    box-shadow: none !important;
    cursor: pointer;
}
.sm-tel .select2-selection__rendered { padding: 0 !important; line-height: 1 !important; color: var(--brand-ink-body) !important; }
.sm-tel .select2-selection__arrow { top: 50% !important; transform: translateY(-50%); right: 6px !important; }
.sm-tel .select2-container--focus .select2-selection,
.sm-tel .select2-container--open .select2-selection { box-shadow: inset 0 0 0 2px var(--brand-primary) !important; }
.sm-tel-voce { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-tel-sigla { font-weight: 600; color: var(--brand-ink); }
.sm-tel-pref { font-weight: 500; color: var(--brand-ink-body); }
.sm-tel-paese { color: var(--brand-muted); }
/* Tendina: larga quanto serve per "IT +39 Italia", ombra da sovrapposizione (DESIGN.md) */
.select2-dropdown.sm-tel-dropdown {
    min-width: 220px;
    border: 1px solid var(--brand-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08) !important;
}
.sm-tel-dropdown .select2-results__option--highlighted .sm-tel-sigla,
.sm-tel-dropdown .select2-results__option--highlighted .sm-tel-pref { color: var(--brand-ink); }
.sm-tel-dropdown .select2-results__option--selected { background: var(--brand-primary-tint) !important; color: var(--brand-ink) !important; }
@media (prefers-reduced-motion: reduce) { .sm-tel { transition: none; } }

/* ---- Modalita' DB sight, solo Developer (sm/lib_scripts/sm_db_sight.js, modale sm/lib_page/_modal_db_sight.php) ----
   Toggle nella topbar con la forma degli altri badge: spento neutro, acceso nell'azzurro di Mago. Lo stato lo dice
   anche la posizione del pallino (aria-checked sul role="switch"), non solo il colore. Acceso, i campi con data-db
   hanno un contorno tratteggiato azzurro e un clic apre il modale: Mago sopra, MGAONE sotto. */
.sm-dbs-toggle {
    --sm-tb: var(--brand-ink-secondary);
    --sm-tb-tinta: var(--brand-surface);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}
.sm-dbs-toggle:hover { border-color: var(--sm-tb); }
.sm-dbs-toggle:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.sm-dbs-toggle[aria-checked="true"] { --sm-tb: var(--brand-info-strong); --sm-tb-tinta: var(--brand-info-tint); }
.sm-dbs-switch {
    position: relative;
    flex: none;
    width: 22px;
    height: 12px;
    margin-left: 2px;
    border-radius: 999px;
    background-color: var(--brand-border-control);
    transition: background-color 150ms ease-out;
}
.sm-dbs-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--brand-surface);
    transition: transform 150ms ease-out;
}
.sm-dbs-toggle[aria-checked="true"] .sm-dbs-switch { background-color: var(--brand-info-strong); }
.sm-dbs-toggle[aria-checked="true"] .sm-dbs-switch::after { transform: translateX(10px); }

/* Campi mappati, a modalita' accesa: a riposo solo un filo tratteggiato tenue (si vede quali campi rispondono
   senza coprire la scheda), al passaggio o col fuoco il campo si accende nell'azzurro di Mago. */
.sm-dbs-on [data-db] {
    outline: 1px dashed color-mix(in srgb, var(--brand-info-strong) 30%, transparent);
    outline-offset: 1px;
    border-radius: 4px;
    cursor: help;
    transition: background-color 150ms ease-out, outline-color 150ms ease-out;
}
.sm-dbs-on [data-db]:hover { outline: 1px solid var(--brand-info-strong); background-color: var(--brand-info-tint); }
.sm-dbs-on [data-db]:focus-visible { outline: 2px solid var(--brand-info-strong); outline-offset: 1px; background-color: var(--brand-info-tint); }
.sm-dbs-on [data-db] a { pointer-events: none; }

/* Modale: stessa cornice di .sm-dialogo, icona nell'azzurro di Mago */
.sm-dbs .modal-dialog { max-width: 480px; }
.sm-dbs .sm-dialogo-ic { background: var(--brand-info-tint); color: var(--brand-info-strong); }
.sm-dbs-corpo { display: flex; flex-direction: column; gap: 12px; padding: 8px 20px 4px; max-height: 60vh; overflow-y: auto; }
.sm-dbs-mappa { display: flex; flex-direction: column; gap: 4px; }
.sm-dbs-mappa + .sm-dbs-mappa { padding-top: 12px; border-top: 1px solid var(--brand-border); }
.sm-dbs-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--brand-border);
    border-radius: 6px;
    background: var(--brand-surface);
}
.sm-dbs-riga.is-mago { background: var(--brand-info-tint); border-color: color-mix(in srgb, var(--brand-info-strong) 22%, transparent); }
.sm-dbs-riga.is-vuota { background: var(--brand-surface-muted); color: var(--brand-ink-secondary); }
.sm-dbs-fonte {
    flex: none;
    width: 58px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-muted);
}
.sm-dbs-riga.is-mago .sm-dbs-fonte { color: var(--brand-info-strong); }
.sm-dbs-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sm-dbs .sm-dbs-nome code {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    color: var(--brand-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: break-word;
}
.sm-dbs-meta { font-size: 0.95rem; color: var(--brand-ink-secondary); }
.sm-dbs-copia {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--brand-ink-secondary);
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.sm-dbs-copia i { font-size: 1.15rem; color: inherit; }
.sm-dbs-copia:hover { background: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-ink); }
.sm-dbs-copia:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.sm-dbs-copia.is-copiato { color: var(--brand-success-strong); }
.sm-dbs-freccia { display: flex; justify-content: center; color: var(--brand-muted); line-height: 1; }
.sm-dbs-freccia i { font-size: 1rem; color: inherit; }
.sm-dbs-espr {
    margin: 2px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--brand-surface-muted);
    color: var(--brand-ink-body);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.sm-dbs .sm-dbs-espr code { margin: 0; border: 0; padding: 0; background: none; box-shadow: none; color: inherit; font: inherit; }
.sm-dbs-nota { margin: 2px 0 0; font-size: 0.95rem; line-height: 1.45; color: var(--brand-ink-secondary); }
.sm-dbs-nota.is-avviso { color: var(--brand-warning-strong); }
.sm-dbs-nota.is-avviso i { color: inherit; vertical-align: -0.1em; }
.sm-dbs .sm-dbs-nota code { margin: 0; border: 0; padding: 0; background: none; box-shadow: none; color: inherit; font-size: inherit; }
.sm-dbs-attesa { margin: 0; color: var(--brand-ink-secondary); }
@media (prefers-reduced-motion: reduce) {
    .sm-dbs-toggle, .sm-dbs-switch, .sm-dbs-switch::after, .sm-dbs-on [data-db], .sm-dbs-copia { transition: none; }
}

/* ---- Tendine con Select2 (SM_SELECT2, sm/lib_scripts/sm_select2.js) ----
   La casella segue il select nascosto: se il campo è nascosto sparisce anche lei, se è sbagliato ha il bordo
   d'errore come gli altri campi. */
select[hidden] + .select2-container { display: none !important; }
select.is-invalid + .select2-container .select2-selection { border-color: var(--brand-danger-strong) !important; }
/* Tendina: scelta e voce evidenziata nei toni del brand (il tema le fa blu), gruppi come etichette */
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap5 .select2-dropdown .select2-results__option[aria-selected="true"] { background-color: var(--brand-primary-tint); color: var(--brand-ink); }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected:after { background-color: var(--brand-primary) !important; }
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted:not(.select2-results__option--selected) { background-color: var(--brand-shell); color: var(--brand-ink); }
.select2-container--bootstrap5 .select2-dropdown .select2-results__group { font-size: 0.95rem; font-weight: 600; color: var(--brand-muted); }