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

/* Nav width */
.fi-sidebar-nav-groups, .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 ════ */
select.sdoc-input, select.sdoc-select, .sdoc-field select, .sdoc-testata select {
    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;
}

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

/* 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: auto 1fr !important;
        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;
    }
    .simply-tenant-wrap {
        max-width: 44vw;
        min-width: 0;
    }
    .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: 8px !important;
        min-width: 0;
    }
    /* Il selettore sede resta, ma come ICONA: il nome della sede lo dice
       già la schermata, e «Seleziona sede» per esteso costa 132px su 375.
       Il menu che si apre al tocco è quello di sempre. */
    .simply-sede-switch {
        margin-right: 0 !important;
    }
    .simply-sede-nome {
        display: none !important;
    }
    /* 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;
    }
    .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;
    }
}