/* ════ TOPBAR ════ */
.fi-topbar nav {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    height: 52px !important;
    padding: 0 16px !important;
}
.simply-topbar-logo { display:flex; align-items:center; }
.simply-logo-link { display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; padding:4px 6px; border-radius:8px; transition:background .12s; white-space:nowrap; }
.simply-logo-link:hover { background:rgba(0,0,0,.05); }
.simply-logo-text { font-size:1rem; font-weight:700; color:rgb(var(--primary-700)); letter-spacing:-.02em; }
.dark .simply-logo-text { color:rgb(var(--primary-400)); }
.fi-topbar .fi-global-search-field { display:flex !important; max-width:480px !important; width:100% !important; margin:0 auto !important; }
.fi-global-search-field input { background:rgb(var(--gray-100)) !important; border:1px solid transparent !important; border-radius:8px !important; font-size:.85rem !important; width:100% !important; }
.fi-global-search-field input:focus { background:white !important; border-color:rgb(var(--primary-300)) !important; box-shadow:0 0 0 3px rgba(var(--primary-500),.1) !important; outline:none !important; }
.dark .fi-global-search-field input { background:rgb(var(--gray-800)) !important; color:rgb(var(--gray-100)) !important; }
.fi-avatar { width:32px !important; height:32px !important; border-radius:50% !important; }

/* ════ Nascondi toggle nativi Filament ════ */
.fi-sidebar-close-btn-ctn, .fi-sidebar-collapsible-toggle,
.fi-sidebar-open-btn, .fi-sidebar-header,
[data-fi-sidebar-collapsible-toggle] { display:none !important; }
.fi-topbar nav > button:first-of-type { display:none !important; }

/* ── E NEMMENO IL VELO NATIVO (segnalato da Raffaele, 2026-09-09) ──
   «Perché vedo un overlay sul gestionale quando uso uno schermo più
   piccolo del desktop?» Perché Filament, sotto i 1024px, stende
   `.fi-sidebar-close-overlay` — nero al 50% su tutto lo schermo — quando
   il SUO stato dice che la sidebar è aperta. Simply però la sidebar la
   governa da sé (`simplySB`) e i comandi nativi qui sopra sono spenti:
   quello stato non lo aggiorna più nessuno, resta «aperta» e il velo non
   se ne va più.
   Non era solo brutto: l'overlay ha `pointer-events: auto`, quindi si
   prendeva i TOCCHI destinati alla pagina sotto. Su un tablet il
   gestionale sembrava velato e mezzo insensibile ai comandi.
   Si spegne sempre, non solo da telefono: sopra i 1024px Filament lo
   nasconde già da sé, quindi qui non si toglie niente a nessuno. Il velo
   del nostro menu è un altro (`#simply-sb-backdrop`) e resta. */
.fi-sidebar-close-overlay { display:none !important; }

/* ════ LAYOUT ROOT ════ */
.fi-layout {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100dvh !important;
}

/* ════ SIDEBAR — in-flow, riduce la larghezza della pagina ════ */
.fi-sidebar {
    order: -1 !important;
    /* STICKY: la sidebar resta ancorata al top del viewport durante lo scroll
       della pagina principale. Senza sticky, scrollando una pagina lunga
       (es. lista prodotti) il menu spariva dalla vista. */
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    /* Scroll interno indipendente: se le voci di menu eccedono la viewport,
       si scorre dentro la sidebar senza muovere il contenuto principale. */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-shrink: 0 !important;
    width: 0 !important;
    transition: width .22s cubic-bezier(.4,0,.2,1) !important;
    border-right: none !important;
    box-shadow: none !important;
    z-index: 30 !important;
    background: white !important;
}

/* Scrollbar interna sottile e discreta, attiva solo dentro la sidebar */
.fi-sidebar::-webkit-scrollbar {
    width: 6px;
}
.fi-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.fi-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}
.fi-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.22);
}
.dark .fi-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}
.dark .fi-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}
.dark .fi-sidebar { background: rgb(var(--gray-900)) !important; }

/* Aperta (full) — riduce contenuto, non si sovrappone */
body.sb-open .fi-sidebar {
    width: var(--simply-sb-w, 260px) !important;
    border-right: 1px solid rgb(var(--gray-200)) !important;
    /* NB: overflow-y resta auto (ereditato da .fi-sidebar) per consentire
       lo scroll interno quando le voci di menu eccedono la viewport.
       overflow-x resta hidden per evitare scrollbar orizzontale spuria. */
}
.dark body.sb-open .fi-sidebar { border-right-color: rgb(var(--gray-700)) !important; }

/* Minimal: larghezza icone fissa, riduce il contenuto */
body.sb-minimal .fi-sidebar {
    width: 52px !important;
    overflow: hidden !important;
    border-right: 1px solid rgb(var(--gray-200)) !important;
    transition: width .18s ease !important;
}
.dark body.sb-minimal .fi-sidebar { border-right-color: rgb(var(--gray-700)) !important; }

/* Hover: espande la sidebar sul passaggio del mouse */
body.sb-hover .fi-sidebar:hover,
body.sb-minimal-hover .fi-sidebar:hover {
    width: var(--simply-sb-w, 260px) !important;
    transition: width .18s ease !important;
    /* overflow-y: auto è già in .fi-sidebar, lo manteniamo per scroll interno */
}
/* Minimal + click linguetta: espansione completa */
body.sb-minimal.sb-open .fi-sidebar {
    width: var(--simply-sb-w, 260px) !important;
}

/* ═══ 2026-09-27 — THE MENU, WITH FILAMENT 3 CLASSES (Raffaele: «il menu viene
   troncato a destra; rimpicciolire leggermente le sottovoci ed evidenziare i
   gruppi»). The .fi-nav-* rules below are Filament 2 names: nothing matches
   them any more (measured: group labels and items were both 14px/500 grey).
   - group header: small caps-like, bold, darker, on a light band — it is the
     collapsible title, not one more item;
   - items: 13px, and a long label WRAPS on two lines instead of being cut
     («Documenti senza causale», «Liste di Riassortimento»). */
.fi-sidebar-group-button {
    background: rgba(var(--gray-100), .7);
    border-radius: 8px;
    margin-top: 6px;
}
.dark .fi-sidebar-group-button { background: rgb(255 255 255 / .05); }
.fi-sidebar-group-label {
    font-size: .74rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgb(var(--gray-700)) !important;
}
.dark .fi-sidebar-group-label { color: rgb(var(--gray-200)) !important; }
.fi-sidebar-group-icon { color: rgb(var(--primary-600)) !important; }
.fi-sidebar-item-button { padding-top: 6px !important; padding-bottom: 6px !important; }
.fi-sidebar-item-label {
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
}

/* 2026-09-27 — the groups take the width the nav LEAVES them. They were forced
   to the full 260px inside a nav with 24px padding per side and a scrollbar
   (245px of room): 31px overflowed and the collapse chevrons were cut at the
   right edge (Raffaele: «le icone di collapse vengono tagliate»). */
.fi-sidebar-nav { padding-left: 10px !important; padding-right: 10px !important; }
.fi-sidebar-nav-groups { width: auto !important; min-width: 0 !important; max-width: 100% !important; }

/* Nav width */
.fi-sidebar-nav, .fi-sidebar > * {
    min-width: var(--simply-sb-w, 260px) !important;
    width: var(--simply-sb-w, 260px) !important;
    box-sizing: border-box !important;
}

.fi-sidebar .fi-logo, .fi-sidebar [class*="brand"] { display:none !important; }
.fi-sidebar-nav { padding-top:8px !important; }
.fi-nav-group-label { font-size:.62rem !important; letter-spacing:.08em !important; font-weight:700 !important; color:rgb(var(--gray-400)) !important; padding:8px 12px 4px !important; white-space:nowrap; overflow:hidden; }
.fi-nav-item a { padding:7px 14px !important; border-radius:8px !important; margin:2px 6px !important; font-size:.84rem !important; display:flex !important; align-items:center !important; gap:8px !important; overflow:hidden !important; white-space:nowrap; }
.fi-nav-item a > span, .fi-nav-item a > .fi-nav-item-label { overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; min-width:0 !important; }
.fi-nav-item-active > a, .fi-nav-item a[aria-current="page"] { background:rgb(var(--primary-50)) !important; color:rgb(var(--primary-700)) !important; font-weight:500 !important; }
.dark .fi-nav-item-active > a, .dark .fi-nav-item a[aria-current="page"] { background:rgba(var(--primary-900),.5) !important; color:rgb(var(--primary-300)) !important; }

/* Minimal: nascondi testo, mostra solo icone */
body.sb-minimal .fi-nav-item a > .fi-nav-item-label,
body.sb-minimal .fi-nav-group-label,
body.sb-minimal .fi-nav-item a > span:not(.fi-nav-item-icon) {
    opacity: 0 !important;
    transition: opacity .15s ease !important;
    overflow: hidden !important;
    max-width: 0 !important;
    white-space: nowrap !important;
}
body.sb-minimal .fi-nav-item a {
    justify-content: center !important;
    padding: 7px 6px !important;
    margin: 2px 4px !important;
    position: relative !important;
}
/* Tooltip via data-tooltip al hover in modalità minimal */
body.sb-minimal .fi-nav-item a::after {
    content: attr(data-tooltip);
    position: fixed;
    left: 64px;
    top: auto;
    background: #1f2937;
    color: white;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 99999;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    transition: opacity .1s ease;
    transform: translateY(-50%);
}
body.sb-minimal .fi-sidebar .fi-nav-item a:hover::after { opacity: 1 !important; }
/* Nascondi tooltip se sidebar è espansa (hover o click) */
body.sb-minimal-hover .fi-sidebar:hover .fi-nav-item a::after,
body.sb-minimal.sb-open .fi-nav-item a::after { opacity: 0 !important; display: none !important; }
/* Espandi hover */
body.sb-minimal-hover .fi-sidebar:hover .fi-nav-item a > .fi-nav-item-label,
body.sb-minimal.sb-open .fi-nav-item a > .fi-nav-item-label {
    opacity: 1 !important;
    max-width: 200px !important;
}
body.sb-minimal-hover .fi-sidebar:hover .fi-nav-group-label,
body.sb-minimal.sb-open .fi-nav-group-label { opacity: 1 !important; max-width: 200px !important; }
body.sb-minimal-hover .fi-sidebar:hover .fi-nav-item a,
body.sb-minimal.sb-open .fi-nav-item a {
    justify-content: flex-start !important;
    padding: 7px 14px !important;
    margin: 2px 6px !important;
}

/* ════ MAIN — non scorre orizzontalmente, non si sposta ════ */
.fi-main-ctn, .fi-layout > .fi-main, main.fi-main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    overflow: visible !important; /* allow fixed-position modals to work correctly */
    transition: none !important;
}
.fi-page-content, .fi-page > .fi-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
@media (min-width: 1024px) {
    .fi-main-ctn { padding-inline-start: 0 !important; }
}

/* ════ FIX SELECT ════
   2026-09-18 (Raffaele: «select con molteplici icone per il dropdown, tipo
   in Gruppo di aziende»): la regola valeva solo per le classi dei documenti,
   e ogni pagina custom rifaceva il suo `background: white` — che cancella la
   freccia di Filament (shorthand) o la somma a quella nativa. Una regola
   sola per OGNI select nativo delle pagine custom (quelli di Filament hanno
   le classi `fi-*` e restano suoi): una freccia, sempre la stessa. */
select.sdoc-input, select.sdoc-select, .sdoc-field select, .sdoc-testata select,
select.gr-input, select.cs-input, select.rg-input, select.wo-input, select.imp-map-select, select.form-input,
.fi-body select:not([class*="fi-"]):not([multiple]):not(.choices__input) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right .5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.2em 1.2em !important;
    padding-right: 2rem !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ════ LINGUETTA ════ */
#simply-sb-tab {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 400;
    width: 18px;
    height: 60px;
    background: rgb(var(--primary-600));
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,.18);
    transition: left .22s cubic-bezier(.4,0,.2,1), width .12s, background .1s;
    user-select: none;
}
#simply-sb-tab:hover { background: rgb(var(--primary-700)); width: 22px; }
.dark #simply-sb-tab { background: rgb(var(--primary-500)); }
#simply-sb-tab svg { width: 10px; height: 10px; color: white; flex-shrink: 0; transition: transform .22s; }

/* Modalità aperto: sempre visibile, riduce contenuto naturalmente (in-flow) */
body.sb-always #simply-sb-tab { display:none !important; }
body.sb-always .fi-sidebar {
    width: var(--simply-sb-w, 260px) !important;
    border-right: 1px solid rgb(var(--gray-200)) !important;
    /* overflow-y: auto è già in .fi-sidebar (sticky + scroll interno) */
}
/* ── Bordo arancione sul viewport intero (solo body::after) ──────── */
body.simply-edit-mode::after {
    content: '';
    position: fixed;
    inset: 0;
    border: 3px solid #f97316;
    pointer-events: none;
    z-index: 99999;
    border-radius: 0;
}
/* Banner "✏ MODIFICA ATTIVA" in alto a destra */
body.simply-edit-mode::before {
    content: '✏ MODIFICA ATTIVA';
    position: fixed;
    top: 10px;
    right: 10px;
    background: #f97316;
    color: white;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 4px;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(249,115,22,.4);
    letter-spacing: .04em;
}

/* ═══ SOTTO IL «lg» DI FILAMENT (1024px) UNA GRIGLIA È UNA COLONNA SOLA ═══
   2026-09-26 (Raffaele: «acquistabile, vendibile e attivo da tablet e mobile
   li vedo ridotti e sovrapposti»). In Filament `columns(4)` vale da 1024px in
   su, mentre `columnSpan(2)` vale a OGNI larghezza: sotto i 1024px la griglia
   ha una colonna e il figlio che ne «occupa 2» ne fa nascere una implicita —
   la colonna vera collassa a 0px e tutto ciò che occupa 1 finisce là dentro.
   Misurato sulla scheda prodotto a 375px: `grid-template-columns: 0px 271px`,
   i tre interruttori larghi 0, l'aiuto a una parola per riga.
   Lo schema `columnSpan(n)` sta in 252 punti di 33 file: si corregge QUI, una
   volta. Tocca SOLO le griglie che sotto la soglia hanno una colonna (lo dice
   il loro style inline) e i figli con uno span esplicito; una griglia nata con
   `['default' => 2]` non è toccata. Sta FUORI dal blocco mobile qui sotto
   perché la soglia è di Filament (1024), non nostra (900): fra 900 e 1024 il
   difetto c'era lo stesso. Nessun form del core usa colonne per `sm`/`md`. */
@media (max-width: 1023.98px) {
    .fi-fo-component-ctn[style*="--cols-default: repeat(1, "] > .col-\[--col-span-default\] {
        grid-column: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   L'ERP DAL TELEFONO (Raffaele, 2026-09-09)
   «Utilizzabile anche da mobile SENZA INTACCARE NULLA della versione
   desktop»: tutto quello che segue vive dentro una media query e sotto i
   900px — sopra, non esiste una riga di questo file. Nessun blade è
   stato toccato: le liste custom nascono già dai partial condivisi, e
   qui si cambia solo come si dispongono.

   Il problema misurato su un telefono da 375px: la tabella di una lista
   è larga 1200px (si vedono 2 colonne su 10) e la barra degli strumenti
   mangia cinque righe su dodici di schermo.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* ── LA BARRA STRUMENTI SI STRINGE ──
       Stessi pulsanti, stessa posizione, meno aria: su un telefono
       l'aria è schermo che non vedi. */
    .sp-wrap > div:first-child {
        padding: 6px 8px !important;
        gap: 6px !important;
        row-gap: 6px !important;
    }
    .sp-wrap > div:first-child button,
    .sp-wrap > div:first-child a,
    .sp-wrap > div:first-child .sp-edit-toggle {
        font-size: 11px !important;
        padding: 6px 8px !important;
        /* Il bersaglio resta da dito: si stringe la scritta, non il tasto. */
        min-height: 38px;
    }

    /* ── LE LISTE DIVENTANO SCHEDE ──
       Una riga di tabella su un telefono è una riga da 1200px che nessuno
       leggerà mai. Sotto i 900px ogni riga diventa una SCHEDA impilata, e
       ogni cella porta davanti il nome della sua colonna (lo scrive il JS
       condiviso: `data-etichetta`, da <th>).
       Si applica SOLO alle tabelle marcate `sp-mobile-schede` — la marca
       la mette lo stesso JS, e solo dove ha trovato le intestazioni. */
    table.sp-mobile-schede,
    table.sp-mobile-schede tbody,
    table.sp-mobile-schede tr,
    table.sp-mobile-schede td {
        display: block;
        width: auto !important;
    }
    table.sp-mobile-schede colgroup {
        display: none;
    }
    /* Le intestazioni non servono più (il loro nome è dentro ogni cella),
       ma il `thead` NON si nasconde in blocco: dentro c'è la riga dei
       filtri, e una lista da 106.882 prodotti senza filtri non è una
       lista, è un elenco. Si nascondono le righe di intestazione, non il
       contenitore. */
    table.sp-mobile-schede thead {
        display: block;
    }
    table.sp-mobile-schede thead tr:not(.sp-filter-row) {
        display: none;
    }
    /* La riga filtri diventa una scheda come le altre. Qui NON si usa
       `!important`: la mostra e la nasconde il pulsante «Filtra», che
       scrive `display` sull'elemento — e l'inline deve poter vincere. */
    table.sp-mobile-schede .sp-filter-row {
        display: block;
        border: 1px solid rgb(var(--primary-200));
        border-radius: 12px;
        margin: 0 0 10px;
        padding: 8px 10px;
        background: rgb(var(--primary-50));
    }
    table.sp-mobile-schede .sp-filter-row th {
        display: flex;
        align-items: center;
        gap: 8px;
        width: auto !important;
        padding: 3px 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }
    table.sp-mobile-schede .sp-filter-row th::before {
        content: attr(data-etichetta);
        flex: 0 0 40%;
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: rgb(var(--gray-500));
    }
    table.sp-mobile-schede .sp-filter-row th[data-etichetta=""] {
        display: none;
    }
    table.sp-mobile-schede .sp-filter-row th input,
    table.sp-mobile-schede .sp-filter-row th select {
        flex: 1 1 auto;
        min-width: 0;
        width: 100% !important;
        font-size: 16px !important;
        min-height: 36px;
    }
    /* La larghezza fissa in px la mette il mixin di ridimensionamento
       (colonne trascinabili): sul telefono va tolta, o le schede restano
       larghe quanto la tabella e i valori finiscono fuori schermo —
       visto dal vivo, l'etichetta si leggeva e il valore era a 400px. */
    table.sp-mobile-schede {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }
    table.sp-mobile-schede tbody tr {
        border: 1px solid rgb(var(--gray-200));
        border-radius: 12px;
        margin: 0 0 10px;
        padding: 8px 10px;
        background: white;
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    .dark table.sp-mobile-schede tbody tr {
        background: rgb(var(--gray-900));
        border-color: rgb(var(--gray-700));
    }
    table.sp-mobile-schede tbody td {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 3px 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
    }
    /* Il nome della colonna davanti al valore: senza, una scheda è un
       elenco di numeri senza significato. */
    table.sp-mobile-schede tbody td::before {
        content: attr(data-etichetta);
        flex: 0 0 40%;
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: rgb(var(--gray-500));
    }
    /* Nelle righe di un documento la cella non contiene testo ma un CAMPO:
       l'etichetta prende la sua fetta a sinistra e il campo si prende
       tutto il resto. Senza questa riga il campo resta della larghezza
       che aveva in tabella (spesso 60px) e non ci si scrive dentro. */
    /* Il pulsante che apre la scheda è l'eccezione: se prendesse anche
       lui tutto lo spazio disponibile diventerebbe una barra da 150px
       accanto al codice — visto a video. */
    table.sp-mobile-schede tbody td[data-etichetta]:not([data-etichetta=""]) > *:not(.sp-scheda-apri) {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }
    table.sp-mobile-schede tbody td input,
    table.sp-mobile-schede tbody td select,
    table.sp-mobile-schede tbody td textarea {
        width: 100% !important;
        /* 16px: sotto questa misura iOS ingrandisce da solo la pagina
           appena si tocca un campo, e non la rimpicciolisce più. */
        font-size: 16px !important;
        /* In tabella i campi sono alti 26px: giusti col mouse, troppo
           stretti per un pollice. */
        min-height: 36px;
    }

    /* ── LA SCHEDA NASCE COMPATTA E SI APRE QUANDO SERVE ──
       Richiesta di Raffaele: «le righe collassabili e riducibili, in modo
       da mostrare più risultati ed espandere quando serve».
       Da chiusa restano le prime tre colonne (le prime che l'utente ha
       scelto di vedere): su un telefono si passa da poco più di una
       scheda per schermata a quattro. Il resto è a un tocco. */
    table.sp-mobile-schede tbody tr:not(.sp-scheda-aperta) td.sp-cella-extra {
        display: none;
    }
    .sp-scheda-apri {
        margin-left: auto;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border: 1px solid rgb(var(--gray-200));
        border-radius: 8px;
        background: rgb(var(--gray-50));
        color: rgb(var(--gray-600));
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
    }
    .dark .sp-scheda-apri {
        background: rgb(var(--gray-800));
        border-color: rgb(var(--gray-700));
        color: rgb(var(--gray-300));
    }

    /* Le celle senza nome (spunta di selezione, menu azioni) restano
       com'erano, in fila in cima alla scheda. */
    table.sp-mobile-schede tbody td[data-etichetta=""],
    table.sp-mobile-schede tbody td:not([data-etichetta]) {
        display: inline-flex;
        width: auto !important;
    }
    table.sp-mobile-schede tbody td[data-etichetta=""]::before,
    table.sp-mobile-schede tbody td:not([data-etichetta])::before {
        content: none;
    }
    /* Il contenitore non deve più scorrere in orizzontale: non c'è più
       niente di largo da scorrere. */
    .sp-mobile-schede-wrap {
        overflow-x: visible !important;
    }
    /* 2026-11-02 — a card is as tall as its fields. The order pages give every row a fixed 32 px
       (doc-order.css, right for a table row) and the rows box a fixed height with its own scroll:
       on a phone the card overflowed onto the next one and the totals were drawn over it. Here the
       rows grow and the page scrolls, as it does everywhere else on a phone. */
    table.sp-mobile-schede tbody tr {
        height: auto !important;
    }
    .sdoc-rows-wrap.sp-mobile-schede-wrap {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}
@media (max-width: 900px) and (max-width: 600px) {
    /* 2026-11-02 — on a phone the totals bar of a document (flow, totals, discounts) no longer sticks
       to the bottom of the screen: it took a third of it and covered the row cards. It sits after the
       rows and is reached by scrolling. */
    .sdoc-wrap .sdoc-footer {
        position: static !important;
    }
    /* 2026-11-02 (Raffaele: «vedi cosa succede con la sidebar da mobile») — the product panel of a
       document (doc-product-sidebar) sits BESIDE the rows, 280 px wide: on a phone it left 120 px to
       the rows and the two drew over each other. Here it is a full-screen sheet over the page, under
       the top bar, closed by its own ✕. */
    .sdoc-wrap .sdoc-product-sb.open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        /* an explicit height: «auto» between top and bottom resolved to 0 here (the page sets its own
           height on the panel from JS), and the panel drew its fields with no background */
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        z-index: 35 !important;
        overflow-y: auto !important;
        background: #fff;
        box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .25);
    }
    .dark .sdoc-wrap .sdoc-product-sb.open {
        background: rgb(var(--gray-900));
    }
    .sdoc-wrap .sdoc-product-sb .sp-doc-sb-handle {
        display: none !important;
    }
}
@media (max-width: 900px) {
    /* 2026-11-02 — the column totals under the rows (row-table-foot) as ONE card «Totali»: the
       empty cells go, every value keeps its column name. Before, the foot stayed a table row
       inside the block table: a stack of empty slivers drawn over the last card. */
    table.sp-mobile-schede tfoot {
        display: block;
    }
    table.sp-mobile-schede tfoot tr {
        display: block;
        border: 1px solid rgb(var(--gray-200));
        border-radius: 12px;
        padding: 8px 10px;
        background: #f9fafb;
    }
    .dark table.sp-mobile-schede tfoot tr {
        background: rgb(var(--gray-900));
        border-color: rgb(var(--gray-700));
    }
    table.sp-mobile-schede tfoot td.srow-foot-vuota {
        display: none !important;
    }
    table.sp-mobile-schede tfoot td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 3px 0 !important;
        border: 0 !important;
        width: auto !important;
        background: transparent !important;
    }
    table.sp-mobile-schede tfoot td.srow-foot-titolo {
        justify-content: flex-start;
    }
    /* 2026-11-02 (Raffaele: «da mobile puoi rimpicciolire i valori della riga») — the read-only
       values of a row card, i.e. every field outside «Modifica», at the size of the rest of the
       page. A field you type in stays at 16px: below that iOS zooms the page on touch. */
    table.sp-mobile-schede tbody td input[readonly],
    table.sp-mobile-schede tbody td input.readonly,
    table.sp-mobile-schede tbody.srow-inp-viewmode td input,
    table.sp-mobile-schede tbody.srow-inp-viewmode td select {
        font-size: .85rem !important;
        min-height: 28px;
    }
    /* …and the product's name in full, on as many lines as it needs (sp-table-core.js,
       descrizioneIntera): the input that showed a slice of it steps aside while read-only. */
    table.sp-mobile-schede td.sp-ha-desc input[readonly] {
        display: none !important;
    }
    table.sp-mobile-schede .sp-desc-mobile {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 2.7em;
        font-size: .85rem;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
        color: rgb(var(--gray-800));
    }
    .dark table.sp-mobile-schede .sp-desc-mobile {
        color: rgb(var(--gray-100));
    }
    table.sp-mobile-schede tfoot td[data-etichetta]::before {
        content: attr(data-etichetta);
        font-family: inherit;
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: rgb(var(--gray-500));
    }
}

/* Su un TABLET (600-900px) le schede in colonna unica sprecano metà
   schermo: due per riga. Resta sotto i 900, quindi il computer non se ne
   accorge. */
@media (min-width: 600px) and (max-width: 900px) {
    table.sp-mobile-schede tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    table.sp-mobile-schede tbody tr {
        margin: 0;
    }
}

@media (max-width: 900px) {

    /* ── IL MENU SI SOVRAPPONE, NON STRINGE ──
       Sul computer la sidebar riduce il contenuto, ed è giusto: c'è posto
       per entrambi. Su 375px no — misurato col menu aperto: la pagina si
       riduceva a 115px, cioè la barra strumenti diventava una colonna di
       pulsanti alta quanto lo schermo. Qui il menu passa SOPRA, con la sua
       ombra, e si chiude da solo appena si sceglie una voce (lo fa già
       `onNavigate` in core-global.js). */
    .fi-sidebar {
        position: fixed !important;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100dvh !important;
        max-width: 88vw !important;
        z-index: 60 !important;
    }
    body.sb-open .fi-sidebar {
        box-shadow: 4px 0 28px rgba(0, 0, 0, .22);
    }
    /* Il contenuto riprende tutta la larghezza: nessuno spazio riservato
       a un menu che ora galleggia. */
    .fi-main-ctn {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Spazio in fondo quanto basta perché il pulsante del menu non si
       appoggi sopra l'ultima riga utile — sulla lista prodotti copriva
       il conteggio e la prima pagina della paginazione. */
    .fi-main {
        padding-bottom: 84px !important;
    }

    /* ── LA LINGUETTA DEL MENU DIVENTA UN PULSANTE VERO ──
       Segnalazione di Raffaele, 2026-09-09: «da mobile non si vede nulla»
       del menù laterale. Ed era esatto: la linguetta è larga 18px con una
       freccia da 10, e si allarga solo al passaggio del MOUSE — su un
       telefono il mouse non c'è, e resta una striscia sul bordo che non
       sembra un comando. Il menu c'era: era il modo di aprirlo a mancare.
       Qui diventa un pulsante tondo da 54px in basso a sinistra, dove il
       pollice arriva. La logica non cambia: è sempre `simplySB.toggle()`,
       e la freccia gira quando è aperto. */
    #simply-sb-tab {
        top: auto !important;
        bottom: 18px !important;
        left: 14px !important;
        transform: none !important;
        width: 54px !important;
        height: 54px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
        /* Sopra la sidebar (60), così serve anche a richiudere. */
        z-index: 400;
    }
    #simply-sb-tab svg {
        width: 20px !important;
        height: 20px !important;
    }
    /* Anche in modalità «sempre aperta»: su un telefono quella modalità
       non si applica (lo dice core-global.js), quindi il pulsante serve
       comunque — senza, il menu non si aprirebbe più. */
    body.sb-always #simply-sb-tab {
        display: flex !important;
    }

    /* ── LA BARRA IN ALTO CI STA ──
       Misurata prima: 452px di contenuto in 375 di schermo, dentro un
       `overflow-x: clip` — cioè il pezzo di fuori non era scomodo, era
       IRRAGGIUNGIBILE. */
    /* Tutto quello che c'è dentro deve starci: azienda, ricerca,
       notifiche, sede, profilo. In una riga sola non entrano nemmeno
       stringendoli (contati: 365px di contenuto in 355 disponibili), e
       stringere ancora vorrebbe dire togliere qualcosa.
       La barra è una GRIGLIA a tre colonne (azienda | ricerca | azioni),
       non un flex: `flex-wrap` qui non fa niente — provato, e la ricerca
       finiva SOPRA il selettore sede. Si riscrive la griglia: azienda e
       azioni sulla prima riga, la ricerca sulla seconda tutta per sé —
       è il campo che su un telefono serve più largo, non più stretto. */
    .fi-topbar nav {
        grid-template-columns: minmax(0, 1fr) auto !important; /* the actions take what they need, the company the rest */
        height: auto !important;
        row-gap: 6px !important;
        padding: 6px 10px !important;
    }
    .simply-tenant-wrap {
        grid-column: 1;
        grid-row: 1;
    }
    .fi-topbar .ms-auto {
        grid-column: 2;
        grid-row: 1;
    }
    .simply-search-outer {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    /* 2026-10-21 (Raffaele: «da mobile la sede nello switcher non si vede») —
       measured at 375 px: company 165 px + bell, status, site and avatar = 466 px,
       so the site and the avatar ended past the right edge. The company name
       gives way (dots), the right-hand group never overflows. */
    .simply-tenant-wrap {
        max-width: 100%;
        justify-self: start;
        min-width: 0;
    }
    .simply-sede-icona {
        display: none !important;
    }
    .simply-tenant-btn {
        max-width: 100%;
        overflow: hidden;
    }
    .simply-tenant-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Il pulsante che comprime la sidebar non ha senso dove la sidebar è
       già a scomparsa: si apre e si chiude dalla linguetta. */
    .fi-topbar-close-sidebar-btn {
        display: none !important;
    }
    .fi-topbar .ms-auto {
        gap: 6px !important;
        min-width: 0;
    }
    /* Il selettore sede: niente nome lungo (costa 132px su 375), ma la SIGLA
       della sede o il nome tagliato coi puntini (.simply-sede-corto) — senza,
       da telefono non si capiva dove si lavora. Il menu al tocco è quello di sempre. */
    .simply-sede-switch {
        margin-right: 0 !important;
    }
    /* …but the site must be readable (Raffaele 2026-10-21: «da mobile la sede nello
       switcher non si vede»): its code (REGISTRO #911: on every screen now). */
    .simply-sede-corto {
        display: inline-block !important;
        max-width: 64px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* La scorciatoia da tastiera (⌘K) su un telefono non esiste. */
    .simply-search-kbd {
        display: none !important;
    }
    .simply-search-wrap,
    .simply-search-input {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── IL PANNELLO DI ANTEPRIMA: A TUTTA PAGINA, E SI CHIUDE ──
       Segnalazione di Raffaele (2026-09-10): «la sidebar nelle liste da
       mobile è invasiva e non richiudibile; e se la sidebar è responsive non
       ha senso il collapse».
       Misurato su 375px: il pannello è largo 395px (360 di predefinito, 260
       di minimo) e sfora; il pulsante «chiudi» finiva a **x = 388**, cioè
       oltre il bordo dello schermo — non scomodo, IRRAGGIUNGIBILE. Chi
       apriva una riga restava dentro senza via d'uscita.
       Qui il pannello diventa quello che è già, su un telefono: una pagina.
       Sopra la lista, a tutta larghezza, con la sua testata (e quindi il suo
       pulsante di chiusura) dentro lo schermo. */
    .sp-sidebar.open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 70;
        width: 100% !important;
        max-width: 100% !important;
    }
    .sp-sidebar.open .sp-sidebar-wrap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        border: 0 !important;
    }
    /* La maniglia per allargare il pannello col mouse: su un telefono non
       serve a niente — il pannello è già largo quanto lo schermo, e resta
       solo una striscia che intercetta i tocchi al bordo. */
    .sp-sidebar-resize,
    .sp-doc-sidebar-resize {
        display: none !important;
    }
    /* La testata del pannello resta in vista mentre il contenuto scorre:
       è lì che sta il pulsante per uscire. */
    .sp-sidebar.open .sp-sidebar-wrap > *:first-child {
        position: sticky;
        top: 0;
        z-index: 2;
        background: white;
    }
    .dark .sp-sidebar.open .sp-sidebar-wrap > *:first-child {
        background: rgb(var(--gray-900));
    }

    /* ── LA CONFIGURAZIONE ──
       Elenco delle sezioni a sinistra (220px fissi) e contenuto a destra:
       su 343 disponibili facevano 633px, cioè metà pagina fuori schermo.
       Qui vanno una sopra l'altro. */
    .sp-cfg-wrap {
        flex-direction: column !important;
        /* 2026-10-06 — in a column, `align-items:flex-start` (desktop) let
           the section take its CONTENT's minimum width: on «Casse» a table
           without a scroll box made it 840px inside 343, everything cut on
           the right. The section takes the screen; what is wider scrolls
           inside its card. */
        align-items: stretch !important;
    }
    .sp-cfg-body {
        width: 100% !important;
    }
    .sp-cfg-card {
        overflow-x: auto !important;
    }
    .sp-cfg-nav {
        width: 100% !important;
        position: static !important;
    }
    .sp-cfg-card {
        padding: 14px !important;
    }

    /* ── LE PAGINE DOCUMENTO ──
       Sono cinque (vendita, acquisto, interni, ordini vendita e acquisto)
       e condividono le stesse classi, quindi si sistemano una volta sola.
       Misurato su 375px prima di questo blocco: la barra strumenti era
       larga 810px dentro un contenitore da 343 con `overflow:hidden` —
       cioè metà pulsanti INVISIBILI e irraggiungibili, non solo scomodi.
       `!important` perché i fogli di documento arrivano dopo questo. */

    /* Il documento non è più una schermata alta quanto lo schermo con le
       parti che scorrono dentro: su un telefono scorre la PAGINA, come
       ovunque. Con l'altezza bloccata a 100dvh il fondo era irraggiungibile. */
    .sdoc-wrap {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* I pulsanti vanno a capo invece di uscire dallo schermo. */
    .sdoc-toolbar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 10px !important;
    }
    .sdoc-toolbar button,
    .sdoc-toolbar a {
        font-size: 11px !important;
        min-height: 38px;
    }

    /* Le linguette (Documento, Trasporto, Corrispondenza…) restano in
       fila ma si scorrono col dito: è il gesto che ci si aspetta, e
       mandarle a capo mangerebbe tre righe di schermo. */
    .sdoc-vtabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
    }
    .sdoc-vtabs::-webkit-scrollbar { display: none; }
    .sdoc-vtabs > * { flex: 0 0 auto; }

    /* I campi della testata in colonna unica: due colonne da 200px in
       343 disponibili tagliavano il numero documento e il riferimento. */
    .sdoc-fields {
        grid-template-columns: 1fr !important;
    }
    /* Dichiarare UNA colonna non basta: i campi larghi (cliente, note)
       portano `grid-column: span 2` scritto nel markup, e una griglia a
       cui si chiedono due colonne se le INVENTA — tornavano due tracce
       da 117 e 186px, cioè i campi di nuovo troncati. Qui ogni campo
       occupa la sua riga, e basta. */
    .sdoc-fields > * {
        grid-column: auto !important;
    }
}

/* 2026-09-28 — legenda dei testi composti nella scheda prodotto/categoria:
   lo stile stava in linea su OGNI chip e viaggiava a ogni ridisegno della
   scheda (41 KB su 569 all'entrata in modifica). Qui una volta sola. */
.sp-tc-legenda { font-size: .72rem; color: #4b5563; line-height: 1.5; }
.sp-tc-riga { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 2px 0; }
.sp-tc-gruppo { font-size: .66rem; color: #9ca3af; min-width: 96px; }
.sp-tc-chip { font-size: .7rem; padding: 2px 6px; border: 1px solid #c7d2fe; border-radius: 999px; background: #eef2ff; color: #3730a3; }

/* 2026-09-28 — the row menu's inline styles (partial row-quick-actions) and the
   shipping/payment cells (partial list-cell-doc-extra), once here instead of on every
   row: 57 KB of the 490 KB sale-documents table (50 rows), re-sent at every
   sort and page change. Same values as the inline styles they replace; the
   `.sp-row-menu-item.x` selectors keep the inline styles' precedence over
   `.sp-row-menu-item`. HERE and not in list-table.css: the lists that use these
   partials load their own lst-*.css, not list-table.css — rules put there were
   served but never applied (0 rules found in the browser). */
.sp-row-menu-group { position: relative; }
.sp-row-menu-item.sp-row-menu-link { text-decoration: none; display: flex; align-items: center; gap: 6px; }
.sp-row-menu-item.sp-row-menu-sub-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sp-row-menu-sub-btn > .sp-row-menu-label { display: flex; align-items: center; gap: 6px; }
.sp-row-menu-ico { font-size: .8rem; }
.sp-row-menu-arrow { font-size: .6rem; color: #9ca3af; }
/* 2026-09-29 — the submenu opens to the LEFT: the row menu sits in the last
   column, at the right edge of the table, and «left: 100%» put Stampa and
   Esporta outside the screen (measured: 1047 px on a 1063 px viewport). */
.sp-row-submenu {
    position: absolute; right: 100%; top: 0; background: white; border: 1px solid #e5e7eb;
    border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.1); min-width: 150px; padding: 4px 0; z-index: 201;
}
.sp-row-submenu.sp-row-submenu-stampe { min-width: 200px; }
/* The row menu never wider than the screen: a fixed box with no right edge
   stretched to the viewport on phones (504 px on 375). Its left is clamped
   in openMenu() (row-quick-actions). */
.sp-row-menu { max-width: calc(100vw - 16px); }
/* On a phone the submenu does not fit beside the menu: it opens below its
   button, inside the menu. */
@media (max-width: 900px) {
    .sp-row-submenu { position: static; right: auto; box-shadow: none; border: none; border-top: 1px solid #f3f4f6; border-radius: 0; }
}
/* The PDF download link of each print template (was an inline onmouseover). */
.sp-row-submenu-stampe a[title="Scarica PDF"]:hover { background: #f3f4f6; color: #dc2626 !important; }
/* Shipping/payment cells of document & order lists (list-cell-doc-extra). */
.sp-cell-x { display: block; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-cell-x.sp-cell-x-center { text-align: center; }
.sp-cell-x.sp-cell-x-right { text-align: right; }
.sp-cell-x.sp-cell-x-mono { font-family: ui-monospace, monospace; font-size: .72rem; }
.sp-cell-x.sp-cell-x-muted { color: rgb(var(--gray-400)); }

/* 2026-09-28 — the row "⋯" cell of every document/order row table (partial
   row-actions-cell): its inline styles and onmouseover/onmouseout handlers
   were repeated on EVERY row — ~1.2 KB of the 2.4 KB cell, 7.4 KB rows on a
   200-row order (2.5 MB page). Same values; hover in CSS instead of JS.
   Selectors carry `.sp-ra` so they keep beating the form resets, as the inline
   styles did. */
.sp-ra { position: relative; display: inline-block; }
.sp-ra .sp-ra-btn { background: none; border: 1px solid transparent; border-radius: 4px; padding: 0 4px; cursor: pointer; color: #9ca3af; font-weight: 700; font-size: .9rem; line-height: 1.2; }
.sp-ra .sp-ra-btn:hover { background: #f3f4f6; color: #374151; }
.sp-ra .sp-ra-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 60; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 210px; padding: 8px 10px; text-align: left; }
.sp-ra .sp-ra-title { font-size: .62rem; font-weight: 700; color: #6b7280; text-transform: uppercase; margin-bottom: 6px; }
.sp-ra .sp-ra-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font-size: .72rem; font-weight: 600; padding: 4px 6px; margin-bottom: 2px; border: 1px solid #e5e7eb; border-radius: 5px; background: #f9fafb; color: #374151; cursor: pointer; }
.sp-ra .sp-ra-item:hover { background: #eef2ff; border-color: #c7d2fe; }
.sp-ra .sp-ra-item.sp-ra-warn { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.sp-ra .sp-ra-item.sp-ra-warn:hover { background: #fef3c7; border-color: #fde68a; }
.sp-ra .sp-ra-sep { height: 1px; background: #f3f4f6; margin: 6px 0; }
.sp-ra .sp-ra-note { font-size: .7rem; color: #374151; margin-bottom: 4px; }
.sp-ra .sp-ra-line { display: flex; gap: 6px; align-items: center; }
.sp-ra .sp-ra-qta { width: 70px; font-size: .72rem; padding: 3px 6px; border: 1px solid #d1d5db; border-radius: 5px; }
.sp-ra .sp-ra-split { font-size: .7rem; font-weight: 600; padding: 3px 10px; border: 1px solid #c7d2fe; border-radius: 5px; background: #eef2ff; color: #3730a3; cursor: pointer; }
.sp-ra .sp-ra-hint { font-size: .6rem; color: #9ca3af; margin-top: 4px; }
.sp-ra .sp-ra-off { font-size: .68rem; color: #9ca3af; }

/* 2026-09-28 — the row NUMBER + selection cell (partial row-number-select-cell),
   same values as its former inline styles. The accent (blue on sales, green
   on purchases) comes from --sp-acc, written on the cell only when it is not
   the default. */
.sp-rn { text-align: center; font-size: 0.65rem; white-space: nowrap; }
.sp-rn .sp-rn-num { font-size: .65rem; font-weight: 600; color: var(--sp-acc, #4f46e5); cursor: pointer; vertical-align: middle; }
.sp-rn .sp-rn-fig { font-size: .6rem; color: #94a3b8; vertical-align: middle; }
.sp-rn .sp-rn-desc { font-size: .6rem; font-weight: 700; color: #6366f1; font-family: monospace; }
.sp-rn .sp-rn-lock { display: inline-flex; align-items: center; justify-content: center; margin-left: 3px; min-width: 18px; min-height: 18px; font-size: .7rem; color: #cbd5e1; cursor: default; }
.sp-rn .sp-rn-sel { background: none; border: 1px solid #d1d5db; padding: 1px 4px; margin-left: 3px; cursor: pointer; font-size: .7rem; line-height: 1; vertical-align: middle; border-radius: 3px; min-width: 18px; min-height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.sp-rn .sp-rn-check { color: var(--sp-acc, #4f46e5); font-weight: 700; }
.sp-rn .sp-rn-empty { color: #9ca3af; }
.sp-rn .sp-rn-plain { font-size: .65rem; color: #9ca3af; }

/* 2026-09-29 — the row warning (GuardsIncompleteEditExit::avvisoRiga): an
   amber sign on the number when the row is only flagged (product not linked
   to the supplier), the whole row red when the exit check sent the user back
   to it. The sign is a button: a tap explains it (no hover on a phone). */
.sp-rn .sp-rn-alert { background: none; border: none; padding: 0 3px 0 0; margin: 0; cursor: pointer; font-size: .8rem; line-height: 1; color: #d97706; vertical-align: middle; min-width: 18px; min-height: 18px; }
.sp-rn[data-sp-alert="evidenziata"] .sp-rn-alert { color: #dc2626; }
tr:has(> td.sp-rn[data-sp-alert="evidenziata"]) > td { background: #fef2f2 !important; }
tr:has(> td.sp-rn[data-sp-alert="evidenziata"]) > td:first-child { box-shadow: inset 3px 0 0 #dc2626; }

/* 2026-09-30 — PRICE LISTS in the product sidebar (Raffaele: «distinguere meglio
   i singoli listini»): each list a framed box with a tinted header, sale lists
   in the primary colour and purchase lists in amber, so a glance tells them
   apart even when closed. The header is `ProductResource::etichettaRigaPrezzo`
   with `data-tipo`; the repeater carries the class `sp-listini`. */
.sp-listini .fi-fo-repeater-item { border: 2px solid rgb(var(--primary-300)); box-shadow: none; overflow: hidden; }
.sp-listini .fi-fo-repeater-item-header { background: rgb(var(--primary-50)); border-bottom: 1px solid rgb(var(--primary-200)); padding: 8px 12px; min-height: 40px; }
.sp-listini .fi-fo-repeater-item.fi-collapsed .fi-fo-repeater-item-header { border-bottom: 0; }
.sp-listini .fi-fo-repeater-item-header h4 { font-weight: 600; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.sp-listini .fi-fo-repeater-item:has(.sp-listino-etichetta[data-tipo="acquisto"]) { border-color: #fcd34d; }
.sp-listini .fi-fo-repeater-item:has(.sp-listino-etichetta[data-tipo="acquisto"]) .fi-fo-repeater-item-header { background: #fffbeb; border-bottom-color: #fde68a; }
.sp-listini .sp-listino-extra { font-weight: 400; margin-left: 2px; }
.dark .sp-listini .fi-fo-repeater-item { border-color: rgba(var(--primary-400), .45); }
.dark .sp-listini .fi-fo-repeater-item-header { background: rgba(var(--primary-500), .14); border-bottom-color: rgba(var(--primary-400), .3); }
.dark .sp-listini .fi-fo-repeater-item:has(.sp-listino-etichetta[data-tipo="acquisto"]) { border-color: rgba(251, 191, 36, .45); }
.dark .sp-listini .fi-fo-repeater-item:has(.sp-listino-etichetta[data-tipo="acquisto"]) .fi-fo-repeater-item-header { background: rgba(251, 191, 36, .12); border-bottom-color: rgba(251, 191, 36, .3); }

/* 2026-10-10 (REGISTRO #192) — the lens of the shared row code cell
   (row-codice-cell): it puts the cursor in the row's product search. */
.sp-codice-cella .sp-codice-lente { background: none; border: 1px solid transparent; border-radius: 4px; padding: 0 2px; cursor: pointer; font-size: .68rem; line-height: 1.2; opacity: .5; flex: 0 0 auto; }
.sp-codice-cella .sp-codice-lente:hover { opacity: 1; background: #f3f4f6; }

/* REGISTRO #300 — the multi-choice column filter (partial filtro-colonna-multiselect):
   the menu is position:fixed, placed from its button, so no table clips it. */
.sp-ms .sp-ms-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: .68rem; padding: 2px 6px; border: 1px solid rgb(var(--gray-300)); border-radius: 5px; background: #fff; color: #374151; text-align: left; cursor: pointer; }
.sp-ms .sp-ms-btn.sp-ms-active { border-color: rgb(var(--primary-400)); background: rgb(var(--primary-50)); }
.sp-ms .sp-ms-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ms .sp-ms-caret { font-size: .5rem; flex-shrink: 0; }
.sp-ms .sp-ms-menu { position: fixed; z-index: 99999; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.14); min-width: 140px; max-width: calc(100vw - 12px); max-height: 60vh; overflow-y: auto; padding: 4px; }
.sp-ms .sp-ms-opt { display: flex; align-items: center; gap: 6px; padding: 5px 8px; min-height: 30px; font-size: .74rem; cursor: pointer; border-radius: 6px; white-space: nowrap; color: #374151; }
.sp-ms .sp-ms-opt:hover { background: #f9fafb; }
.sp-ms .sp-ms-opt.sp-ms-opt-on { background: #eef2ff; }
.sp-ms .sp-ms-opt input { width: 13px; height: 13px; flex-shrink: 0; }
.sp-ms .sp-ms-vuoto { padding: 6px 8px; font-size: .7rem; color: #9ca3af; }
.sp-ms .sp-ms-pulisci { width: 100%; margin-top: 4px; padding: 5px; border: 0; border-top: 1px solid #f3f4f6; background: none; font-size: .7rem; color: #6b7280; cursor: pointer; text-align: left; }
.dark .sp-ms .sp-ms-btn, .dark .sp-ms .sp-ms-menu { background: #111827; border-color: #374151; color: #e5e7eb; }
.dark .sp-ms .sp-ms-opt { color: #e5e7eb; }
.dark .sp-ms .sp-ms-opt:hover { background: #1f2937; }
.dark .sp-ms .sp-ms-opt.sp-ms-opt-on { background: #312e81; }
.dark .sp-ms .sp-ms-pulisci { border-top-color: #374151; color: #9ca3af; }

/* REGISTRO #486 — the sections of a document page (header, fields, rows, footer) as distinct
   cards: firmer border, light shadow, a tab on the left in the primary colour — the same as the
   gift-list card (#483, Raffaele: «la vorrei anche negli ordini vendita e acquisto»). One rule for
   every document page (the classes are the shared sdoc-*), so orders and documents look alike. */
.sdoc-wrap .sdoc-header-card, .sdoc-wrap .sdoc-testata, .sdoc-wrap .sdoc-body, .sdoc-wrap .sdoc-footer {
    border: 1px solid rgb(var(--gray-300)) !important; border-left: 4px solid rgb(var(--primary-300)) !important;
    border-radius: 12px !important; box-shadow: 0 1px 3px rgba(15,23,42,.07); background-clip: padding-box;
}
.sdoc-wrap .sdoc-testata, .sdoc-wrap .sdoc-body, .sdoc-wrap .sdoc-footer { margin-top: 12px; }
.dark .sdoc-wrap .sdoc-header-card, .dark .sdoc-wrap .sdoc-testata, .dark .sdoc-wrap .sdoc-body, .dark .sdoc-wrap .sdoc-footer {
    border-color: rgb(55,65,81) !important; border-left-color: rgb(var(--primary-500)) !important; box-shadow: none;
}
/* REGISTRO #909 — the tab on EVERY order and document page: the web order draws its sections with its
   own classes (wo-*), so the rule above never reached it. Same tab, same colour. */
.sdoc-wrap .wo-header-card, .sdoc-wrap .wo-section, .sdoc-wrap .wo-products-block {
    border: 1px solid rgb(var(--gray-300)) !important; border-left: 4px solid rgb(var(--primary-300)) !important;
    border-radius: 12px !important; box-shadow: 0 1px 3px rgba(15,23,42,.07); background-clip: padding-box;
}
.dark .sdoc-wrap .wo-header-card, .dark .sdoc-wrap .wo-section, .dark .sdoc-wrap .wo-products-block {
    border-color: rgb(55,65,81) !important; border-left-color: rgb(var(--primary-500)) !important; box-shadow: none;
}
/* …but the flow inside the totals bar is not a section: no box at all, as on the other orders
   (Raffaele: «la parte del flusso e dei totali non va bene»). */
.sdoc-wrap .wo-flow-row .wo-section, .dark .sdoc-wrap .wo-flow-row .wo-section {
    border: 0 !important; border-radius: 0 !important; box-shadow: none; background: transparent;
}
/* REGISTRO #909 — no tab inside a tab: the totals bar (sdoc-footer) lives INSIDE the rows card
   (sdoc-body) on every document page, and drew a second tab within the first. Inside a card it is a
   plain bordered box. */
.sdoc-wrap .sdoc-body .sdoc-footer, .sdoc-wrap .sdoc-testata .sdoc-footer {
    border-left: 1px solid rgb(var(--gray-300)) !important; box-shadow: none;
}
.dark .sdoc-wrap .sdoc-body .sdoc-footer, .dark .sdoc-wrap .sdoc-testata .sdoc-footer {
    border-left-color: rgb(55,65,81) !important;
}