/* ==========================================================================
   RESPONSIVE.CSS — Grume POS · Layer adattivo unificato
   ==========================================================================
   Caricato DOPO ogni altro CSS (ultimo stylesheet del <head>) in tutti i
   layout base, così vince anche sugli <style> inline che precedono.

   Obiettivi:
   1. FHD 1920x1080 e 2560 — uso pieno della larghezza, niente spazio morto
   2. Touchscreen (POS banco, tablet, laptop touch) — target >= 44/48px
   3. iPhone (notch, Dynamic Island, barra home) e Android (gesture bar)
   4. Chiude le falle di breakpoint: 769-991, 1321-1599, 1921+
   5. dvh al posto di vh (barra indirizzi mobile)
   6. Contiene l'overflow orizzontale di tabelle e griglie

   Regola d'oro: le regole touch stanno in @media (pointer: coarse),
   così un PC con mouse non viene gonfiato, ma un monitor touch sì.
   ========================================================================== */

/* ==========================================================================
   0. TOKEN CONDIVISI
   ========================================================================== */

:root {
    /* Moltiplicatore di scala tipografica. Aumenta su schermi grandi. */
    --rsp-k: 1;
    /* Altezza minima di un target tattile. */
    --rsp-tap: 44px;
    /* Safe area: valori di fallback quando env() non è supportato. */
    --rsp-sa-t: env(safe-area-inset-top, 0px);
    --rsp-sa-b: env(safe-area-inset-bottom, 0px);
    --rsp-sa-l: env(safe-area-inset-left, 0px);
    --rsp-sa-r: env(safe-area-inset-right, 0px);
    /* Altezza reale dello schermo, immune alla barra indirizzi. */
    --rsp-vh: 100vh;
}

@supports (height: 100dvh) {
    :root { --rsp-vh: 100dvh; }
}

/* ==========================================================================
   1. BASI — nessuno scroll orizzontale, mai
   ========================================================================== */

html,
body {
    /* Impedisce lo scroll laterale a livello di documento.
       Il contenuto largo scorre dentro il proprio box (vedi sez. 6). */
    max-width: 100%;
    overflow-x: hidden;
    /* Previene lo "stretch" della rubber-band su iOS. */
    width: 100%;
}

/* Rimuove il min-width ereditato da h-100 / w-100 che spingono in overflow */
html,
body,
main,
.pos-container,
.pos-content,
.pos-main,
.pos-main-m {
    min-width: 0;
}

/* ==========================================================================
   2. FHD — USO PIENO DELLA LARGHEZZA
   ==========================================================================
   Sotto 1400px il layout attuale va bene: non lo tocchiamo.
   Da 1400px in su recuperiamo le centinaia di pixel sprecate.
   ========================================================================== */

/* --- 2a. Rimuovo i tetti di larghezza che marcano il FHD --- */
@media (min-width: 1400px) {
    /* I contenitori centrati con max-width lasciano fino a 600px vuoti
       su un 1920. Li lasciamo crescere, con un tetto alto per non
       diventare illeggibili su 2560+. */
    .container,
    .container-fluid,
    .pos-container > .container,
    .pos-content > .container,
    .extras-ui .container,
    .client-module-content .container,
    .settings-ui .container,
    .menu-ui .container,
    .reports-dashboard-ui .container {
        max-width: 100% !important;
    }

    /* Contenuti di lettura (articoli, blog, testi lunghi) restano
       leggibili: qui il limite serve, ma più alto. */
    .container.readable,
    .post-content,
    .blog-post,
    article .content {
        max-width: 1100px !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- 2b. Scala tipografica progressiva --- */
@media (min-width: 1600px) {
    :root { --rsp-k: 1.06; }
}

@media (min-width: 1920px) {
    :root { --rsp-k: 1.12; }
}

@media (min-width: 2560px) {
    :root { --rsp-k: 1.22; }
}

/* Applico la scala ai testi che NON sono già in rem/vw,
   altrimenti su FHD restano minuscoli. */
@media (min-width: 1600px) {
    body {
        font-size: calc(16px * var(--rsp-k));
    }

    .pos-sidebar,
    .pos-nav-global {
        font-size: calc(14px * var(--rsp-k));
    }

    .pos-content,
    .client-module-content,
    .extras-ui {
        font-size: calc(15px * var(--rsp-k));
    }

    h1, .h1 { font-size: calc(2.5rem * var(--rsp-k)) !important; }
    h2, .h2 { font-size: calc(2rem * var(--rsp-k)) !important; }
    h3, .h3 { font-size: calc(1.75rem * var(--rsp-k)) !important; }
    h4, .h4 { font-size: calc(1.5rem * var(--rsp-k)) !important; }
    h5, .h5, h6, .h6 { font-size: calc(1.25rem * var(--rsp-k)) !important; }
}

/* --- 2c. Griglia prodotti del POS: da 4 colonne fisse a griglia fluida ---
   Il problema FHD più visibile: con repeat(4, ...) su 1920px le schede
   diventano enormi e 12 piatti occupano 3 schermate.
   auto-fill + clamp() = più colonne, larghezza sempre comoda. */
@media (min-width: 1400px) {
    .product-grid {
        grid-template-columns: repeat(
            auto-fill,
            minmax(clamp(118px, 8.2vw, 186px), 1fr)
        ) !important;
        gap: 10px;
    }
}

/* Categorie e varianti: stessa logica, soglie più strette. */
@media (min-width: 1400px) {
    .cat-grid,
    .categories-grid,
    .product-grid-wrapper,
    .btn-grid-products {
        grid-template-columns: repeat(auto-fill, minmax(clamp(112px, 7.4vw, 168px), 1fr)) !important;
    }
}

/* Griglia tavoli della sala: su FHD ne entrano molti di piu'. */
@media (min-width: 1600px) {
    .tables-grid,
    .table-grid,
    .sala-grid,
    .rooms-grid,
    .room-view.grid-layout {
        grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 8.6vw, 200px), 1fr)) !important;
    }
}

/* --- 2d. Pannello ordini / cassa: la colonna fissa era troppo stretta --- */
@media (min-width: 1600px) {
    .pos-layout {
        /*Era 14% / 1fr / 32%. Su 1920 la colonna ordini fa 614px:
           troppo stretta per un carrello. Le do' piu' respiro. */
        grid-template-columns: clamp(180px, 12%, 260px) 1fr clamp(400px, 30%, 560px) !important;
    }
}

/* Interfaccia di pagamento: il pannello da 420px cresce su schermi grandi. */
@media (min-width: 1600px) {
    .pay-interface-box {
        grid-template-columns: 1fr clamp(440px, 26vw, 620px) !important;
        width: 96% !important;
        height: 92% !important;
    }
}

/* --- 2e. Numeri grandi: la tastiera del cassa deve restare comoda --- */
@media (min-width: 1600px) {
    .numpad-grid button,
    .num-btn,
    .key-btn {
        font-size: calc(1.5rem * var(--rsp-k)) !important;
    }
}

/* ==========================================================================
   3. TOUCH — TARGET >= 44px (SOLO su puntatori grossi)
   ==========================================================================
   @media (pointer: coarse) = smartphone, tablet, touchscreen.
   Un PC desktop con mouse NON viene toccato da queste regole.
   ========================================================================== */

@media (pointer: coarse) {
    :root { --rsp-tap: 48px; }

    /* --- 3a. Pulsanti e controlli di base ---
       !important e' necessario: pos_interface.css e style.css dichiarano
       min-height con !important (es. .pos-footer-actions .action-btn a 40px)
       e senza il !important perderebbero per specificita'. */
    button,
    .btn,
    [role="button"],
    .form-control,
    .form-select,
    .form-check-input,
    .input-group-text,
    .dropdown-item,
    .nav-link,
    .list-group-item-action {
        min-height: var(--rsp-tap) !important;
    }

    /* Anche in larghezza: un bottone quadrato/icons deve restare quadrato.
       I bottoni con testo sono gia' piu' larghi di 48px, quindi la regola
       non li tocca. */
    button,
    .btn,
    [role="button"] {
        min-width: var(--rsp-tap);
    }

    /* Componenti POS con altezza fissata esplicitamente */
    .pos-footer-actions .action-btn,
    .pos-footer-action-btns .action-btn,
    .oc-btn,
    .cat-btn,
    .course-tab,
    .btn-cat,
    .np-btn,
    .action-btn,
    .table-btn,
    .room-btn,
    .category-btn,
    .pay-btn,
    .product-btn,
    .qb-btn,
    .tile,
    .mo-item,
    .ag-item {
        min-height: var(--rsp-tap) !important;
    }

    /* Le icone quadrate devono crescere anche in larghezza,
       altrimenti restano 40x40 e si affiancano male. */
    .btn-icon,
    .rounded-circle.btn,
    .btn.rounded-circle,
    .miniAct,
    .btn-action,
    .icon-btn,
    .btn-icon-sm,
    .btn-square,
    .close-btn,
    .hp-fly-close,
    .modal .btn-close {
        min-width: var(--rsp-tap) !important;
        min-height: var(--rsp-tap) !important;
    }

    /* Il bottone "torna indietro" circolare dei moduli */
    .btn-back,
    .btn-back-admin,
    .rounded-circle.d-flex {
        min-width: var(--rsp-tap) !important;
        min-height: var(--rsp-tap) !important;
    }

    /* --- 3b. Sidebar POS: le voci di navigazione erano 38px ---
       Nota: le voci sono <a> inline in alcuni template, e min-height
       non ha effetto sugli elementi inline. Per questo forzo il layout
       a flex: garantisce che l'altezza minima venga sempre applicata. */
    .pos-sidebar .side-btn,
    .pos-nav-global .side-btn,
    .side-btn {
        display: flex;
        align-items: center;
        min-height: var(--rsp-tap) !important;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Il logo-sidebar cresce come area di tocco, il logo resta comodo. */
    .pos-sidebar .side-logo,
    .pos-nav-global .side-logo {
        min-width: var(--rsp-tap);
        min-height: var(--rsp-tap);
    }

    /* --- 3c. Navigazione inferiore mobile --- */
    #mobile-bottom-nav .mb-nav-item,
    .mobile-nav-premium a,
    .mobile-nav-premium button {
        min-height: var(--rsp-tap) !important;
    }

    /* Barra di navigazione e link del sito pubblico: su telefono un
       link di 22px di altezza e' un bersaglio impossibile. */
    .navbar-nav .nav-link,
    .navbar-brand,
    .nav-link,
    .brand {
        display: inline-flex;
        align-items: center;
        min-height: var(--rsp-tap) !important;
    }

    /* --- 3d. Tastiera numerica del cassa: è il contatto piu' frequente --- */
    .numpad-area button,
    .numpad-grid button,
    .num-btn,
    .keypad button,
    .pinwr .kpad button {
        min-height: max(var(--rsp-tap), 56px) !important;
        min-width: var(--rsp-tap) !important;
    }

    /* --- 3e. Schede prodotto e tavoli --- */
    .product-card,
    .table-card,
    .cat-card,
    .category-card,
    .report-card,
    .dashboard-card {
        min-height: var(--rsp-tap) !important;
    }

    /* --- 3f. Toggle e checkbox: il bersaglio cresce, l'aspetto no --- */
    .form-check-input {
        width: 1.35em;
        height: 1.35em;
        margin-top: 0.1em;
    }

    /* --- 3g. Select e input: niente zoom automatico su iOS ---
       Sotto i 16px iOS zooma al focus e l'utente si perde.
       Nota: applico 16px gia' da 769px perche' anche i tablet
       e i laptop touch zoomzano. */
    /* La specificita' e' volutamente alta. mobile.css dichiara
       "input[type=...] { font-size: 0.8rem !important }": a 12.8px i campi
       email/tel/password facevano zoomare la pagina al tocco, e la regola
       con specificita' (0,0,1) non vinceva. I due :not() portano la
       specificita' sopra qualsiasi selettore di attributo singolo. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .form-control-sm,
    .form-control-lg {
        font-size: max(16px, 1em) !important;
    }

    /* --- 3h. CTA costruite con <a> invece che con <button> ---
       I siti pubblici usano spesso <a class="btn-ordina"> o simili: hanno
       l'aspetto di un bottone ma senza semantica di button, quindi le
       regole su button non le raggiungono. Le copro via classe. */
    a.btn-ordina,
    a.btn-order,
    a.cta,
    a.btn-primary,
    a.btn-outline-primary,
    a.btn-cta,
    .cta-button,
    .btn-ordina,
    .hero-cta,
    a[role="button"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--rsp-tap) !important;
    }

    /* --- 3i: niente doppio tocco per zoomare --- */
    button,
    .btn,
    a,
    [role="button"],
    label,
    summary {
        touch-action: manipulation;
    }
}

/* ==========================================================================
   4. SCALA DI BREAKPOINT COMPLETA
   ==========================================================================
   Chiude le falle: 769-991 non era coperto da mobile.css.
   ========================================================================== */

/* --- 4a. 769px - 991px: il vuoto tra "mobile" e "desktop" --- */
@media (min-width: 769px) and (max-width: 991px) {
    /* La sidebar POS non c'entre: diventa offcanvas.
       mobile.css lo fa solo sotto 768px. */
    .pos-sidebar,
    .pos-nav-global {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    body.sidebar-open .pos-sidebar,
    body.sidebar-open .pos-nav-global {
        transform: translateX(0);
    }

    /* Contenuto a piena larghezza (la sidebar è overlaying). */
    .pos-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Padding contenuto ridotto: guadagnamo spazio per i dati. */
    .pos-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Tabelle larghe: scroll orizzontale contenuto. */
    .table,
    .data-table,
    .table-content {
        min-width: 0 !important;
    }
}

/* --- 4b. 992px - 1279px: laptop piccoli, il limite del comfort --- */
@media (min-width: 992px) and (max-width: 1279px) {
    .pos-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Griglia prodotti: 4 colonne vanno bene, ma assicuro
       che non scendano sotto una larghezza usabile. */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
    }
}

/* --- 4c. 1280px - 1599px: il range piu' comune sui POS --- */
@media (min-width: 1280px) and (max-width: 1599px) {
    .pos-layout {
        grid-template-columns: clamp(160px, 13%, 210px) 1fr clamp(340px, 30%, 420px) !important;
    }
}

/* --- 4d. Orientamento orizzontale su telefono ---
   iPhone ruotato: 844x390. Molto stretto in verticale. */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 500px) {
    /* Header più basso per non mangiare metà schermo. */
    .pos-header {
        height: 40px !important;
        min-height: 40px !important;
    }

    /* I titoli di sezione non devono occupare mezza pagina. */
    .pos-header h1,
    .pos-header h2 {
        font-size: 1rem !important;
    }

    /* La barra di navigazione inferiore si accorcia. */
    #mobile-bottom-nav {
        padding: 2px 0 !important;
    }

    #mobile-bottom-nav .mb-nav-item {
        min-height: 40px;
        padding: 4px 2px !important;
    }

    /* Margini verticali ridotti: recuperiamo altezza utile. */
    .pos-content {
        padding-top: 8px !important;
        padding-bottom: 56px !important;
    }
}

/* --- 4e. Schermi molto bassi (portatili 1366x768, cash register) --- */
@media (max-height: 800px) and (min-width: 1024px) {
    /* I pannelli a altezza fissa rischiano di non entrare. */
    .pos-header {
        height: 52px !important;
    }

    .card-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* ==========================================================================
   5. iPHONE / ANDROID — SAFE AREA E BARRE DI SISTEMA
   ==========================================================================
   viewport-fit=cover fa scendere il contenuto sotto notch e barra home.
   Queste regole lo riportano dentro l'area visibile.
   ========================================================================== */

@supports (padding: max(0px)) {
    /* --- 5a. Safe area orizzontale (iPhone ruotato, bordi curvi) --- */
    body {
        padding-left: var(--rsp-sa-l);
        padding-right: var(--rsp-sa-r);
    }

    /* --- 5b. Header: il notch non deve coprire il contenuto --- */
    .pos-header {
        padding-top: var(--rsp-sa-t) !important;
        min-height: calc(48px + var(--rsp-sa-t));
    }

    /* Il padding-top del container compensa l'header ingrandito. */
    .pos-container {
        padding-top: max(0px, calc(env(safe-area-inset-top) - 48px)) !important;
    }

    /* --- 5c. Barra di navigazione inferiore sopra la gesture bar --- */
    /* Il padding tiene lo stesso respiro verticale della barra della Dashboard
       (8px sopra l'area di sicurezza): cosi' la barra ha la stessa altezza in
       ogni pagina e non "salta" cambiando pagina. */
    #mobile-bottom-nav {
        bottom: 0 !important;
        padding-bottom: calc(8px + var(--rsp-sa-b)) !important;
        min-height: calc(56px + var(--rsp-sa-b)) !important;
    }

    .mobile-nav-premium {
        bottom: 0 !important;
        padding-bottom: var(--rsp-sa-b) !important;
        min-height: calc(56px + var(--rsp-sa-b)) !important;
    }


    /* --- 5d. Footer e contenuto scrollabile --- */
    .pos-footer {
        padding-bottom: calc(8px + var(--rsp-sa-b)) !important;
    }

    /* Il fondo pagina deve stare SOPRA la barra home, non sotto. */
    .pos-content,
    .client-module-content {
        padding-bottom: calc(24px + var(--rsp-sa-b)) !important;
    }

    /* --- 5e. Modali e popup ancorati in basso --- */
    .modal-footer,
    .sheet-footer,
    .toastify {
        padding-bottom: calc(10px + var(--rsp-sa-b)) !important;
    }

    /* --- 5f. Tastiera numerica del cassa --- */
    .numpad-area {
        padding-bottom: calc(8px + var(--rsp-sa-b)) !important;
    }
}

/* Barra dei messaggi spinta in alto dal Dynamic Island */
@supports (padding: max(0px)) {
    .pos-header {
        padding-top: max(0px, var(--rsp-sa-t)) !important;
    }
}

/* ==========================================================================
   6. CONTENIMENTO OVERFLOW — tabelle, griglie, elementi larghi
   ==========================================================================
   Il problema piu' comune su smartphone: una tabella larga rompe
   il layout e crea scroll laterale su tutta la pagina.
   ========================================================================== */

/* --- 6a. Tabelle dentro un contenitore che scorre ---
   IL PROBLEMA, e come si manifesta
   Qui si scrive 'overflow-x: auto'. Per la specifica CSS, quando un
   asse non e' 'visible' anche l'altro smette di esserlo: basta
   'overflow-x: auto' e anche 'overflow-y' diventa 'auto'. Non e' un
   difetto di questo progetto, e' la regola del browser.

   La tabella diventa quindi un contenitore che dichiara di poter
   scorrere, ma spesso ha ZERO pixel da scorrere, perche' e' piu' bassa
   del contenitore. Il gesto che parte sopra di lei arriva a lei, lei
   non puo' soddisfarlo e non lo passa al livello superiore: la pagina
   resta ferma anche se il documento ha spazio.

   IL SINTOMO, che ora e' spiegato
   - dalla barra laterale scorre: e' un elemento fisso, fuori dalla
     tabella, e quindi non intercetta niente
   - dalla tastiera scorre: Page e Freccia vanno dritti al documento
   - dal contenuto no: il gesto atterra sulla tabella e muore l'i'

   LA CORREZIONE
   Su schermi larghi le tabelle ci stanno e il wrap non serve a
   niente: si toglie il contenitore di mezzo e il gesto torna al
   documento, che ha spazio e lo usa.

   Perche' solo da 992px: sui telefoni le tabelle sono piu' larghe
   dello schermo e il wrap serve davvero, perche' senza si tagliano le
   colonne di destra.

   Sui telefoni resta pero' un problema diverso, e questa riga lo
   risolve: il wrap puo' diventare scorrevole anche in verticale, perche'
   la tabella e' piu' alta del contenitore. Se succede e il dito resta
   dentro, non si arriva piu' al resto della pagina. Per questo qui si
   dice esplicitamente che il gesto verticale passi al livello superiore
   quando il wrap e' arrivato in fondo. */
.table-scroll,
.table-wrap,
.table-container,
.table-responsive,
.rw-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    max-width: 100%;
}

@media (min-width: 992px) {
    .table-scroll,
    .table-wrap,
    .table-container,
    .table-responsive,
    .rw-scroll {
        overflow: visible !important;
    }
}

/* --- 6b. Tabelle senza wrapper: il contenitore deve poter scorrere ---
   mobile.css (max-width:768px) impone .table { min-width: 820px } per
   evitare colonne schiacciate. Ma il risultato e' che la tabella diventa
   larga 820px dentro un contenitore da 350px: gli antenati hanno
   overflow-x:hidden, quindi le colonne di destra vengono TAGLIATE e non
   c'e' modo di vederle. Per questo qui si azzera min-width e si rende la
   tabella stessa contenitore scorrevole. */
@media (max-width: 991px) {
    .table,
    .data-table {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        white-space: nowrap;
    }

    /* Le sezioni interne mantengono la larghezza naturale del contenuto:
       e' quella che viene fatta scorrere dal padding interno della tabella. */
    .table thead,
    .table tbody,
    .table tfoot {
        display: table;
        width: 100%;
        min-width: max-content;
    }

    /* Indicatore visivo: c'e' altro contenuto a destra. */
    .table::-webkit-scrollbar {
        height: 8px;
    }
    .table::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.45);
        border-radius: 4px;
    }
}

/* --- 6c. Griglie che non devono mai superare il contenitore --- */
.product-grid,
.cat-grid,
.categories-grid,
.tables-grid,
.table-grid,
.sala-grid,
.rooms-grid,
.reports-grid,
.stats-grid,
.variant-grid-container,
.card-grid,
.form-grid {
    max-width: 100%;
    min-width: 0;
}

/* I figli delle griglie non devono causare overflow:
   min-width:0 permette a un flex child di restringersi. */
.product-grid > *,
.cat-grid > *,
.tables-grid > *,
.reports-grid > * {
    min-width: 0;
}

/* --- 6d. Testi lunghi che rompono il layout --- */
h1, h2, h3, h4, h5, h6,
td, th,
.card-title,
.list-group-item,
.nav-link {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* URL e stringhe lunghe nei report */
.mono,
code,
pre,
.hashcode,
.sku,
.barcode {
    word-break: break-all;
}

/* --- 6e. Flexbox: il colpo classico dell'overflow --- */
.row > *,
.d-flex > * {
    min-width: 0;
}

/* ==========================================================================
   7. ALTEZZA DINAMICA — dvh invece di vh
   ==========================================================================
   100vh su iOS/Android = altezza della viewport SENZA barra indirizzi.
   Risultato: il fondo pagina finisce sotto la barra e serve a metà.
   dvh si adatta alla barra reale.
   ========================================================================== */

/* Forzo dvh dove il progetto usa ancora vh, con fallback per i browser vecchi. */
@supports (height: 100dvh) {
    .pos-container,
    .pos-content,
    .pos-main,
    .pos-layout,
    .extras-ui,
    .extras-ui > .d-flex,
    .client-module-content,
    .clienti-orders-root,
    .anag-root,
    .agenda-container,
    .usl-root,
    .udd-root,
    .sys-root,
    .hp-main,
    .sala-phone-view,
    .pos-canvas-area,
    .pos-order-panel,
    .modal-dialog,
    .offcanvas {
        min-height: var(--rsp-vh);
    }
}

/* Il blocco con l'altezza piena deve poter scorrere. */
@supports (height: 100dvh) {
    .pos-container,
    .pos-content,
    .extras-ui > .d-flex,
    .pos-main {
        height: auto;
    }
}

/* ==========================================================================
    8. ICONE-STILE-APP NEI POPUP "ALTRO" E "MODULI"
   ==========================================================================
   mobile.css riduce, con !important sotto i 768px, le tessere del popup a
   24px quadrati con etichette da 0.58rem (9px): sul telefono si vedeva un
   quadratino senza poter capire cosa fosse, e su uno schermo grande non
   era affatto leggibile.

   Qui le tessere tornano a essere vere icone applicazione: quadrato
   arrotondato colorato, glifo bianco dentro, etichetta sotto. Le stesse
   regole valgono per ogni pagina che usa il popup, perche' questo file e'
   l'ultimo stylesheet caricato.
   ========================================================================== */

@media (max-width: 768px) {
    .altro-pop .ag-grid,
    .moduli-pop .ag-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px 6px !important;
    }

    .altro-pop .ag-item,
    .moduli-pop .ag-item {
        min-height: 0 !important;
        padding: 4px 2px !important;
        gap: 6px !important;
        border-radius: 14px !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* La tessera: 44px quadrate, glifo bianco centrato dentro. */
    .altro-pop .ag-item i,
    .moduli-pop .ag-item i {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.1rem !important;
        border-radius: 13px !important;
        color: #fff !important;
    }

    /* Etichetta: era 9px, illeggibile. */
    .altro-pop .ag-item span,
    .moduli-pop .ag-item span,
    .altro-pop .ag-item .ag-lbl,
    .moduli-pop .ag-item .ag-lbl {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        color: var(--hp-ink, #1a1a2e) !important;
    }

    /* Il nome per esteso, non troncato. Con 4 colonne sul telefono i nomi
       lunghi ("Materie prime", "Report art.", "Telegram/WA", "Orari
       prenot.") finivano con i puntini e non si capiva quale modulo fosse.
       layout.html mette white-space:nowrap + ellipsis senza media query:
       qui si annulla, l'etichetta va semplicemente su due righe. */
    .altro-pop .ag-item span,
    .moduli-pop .ag-item span,
    .altro-pop .ag-item .ag-lbl,
    .moduli-pop .ag-item .ag-lbl {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* Spazio sotto l'ultima riga: il popup scorre, e senza questo pad
       l'ultima etichetta resta incolata al bordo e sembra tagliata. */
    .altro-pop,
    .moduli-pop {
        padding-bottom: 24px !important;
    }

    /* --- 8b. Launcher "Moduli" della dashboard ---
       static/style.css (righe ~2684-2702) voleva tessere piu' grandi per
       gli schermi larghi e lo ha scritto SENZA media query, con
       !important. Sul telefono si traduceva in:
         min-height 84px + padding 14px 16px + etichette 18px
       cioe' quadrati enormi con il testo che esce dalla tessera, e la
       griglia si allargava di un terzo. Qui si riporta la tessera alle
       misure di un'icona applicazione, che e' quello che serve a pollice. */
    .mo-launch {
        max-width: 100% !important;
        width: 100% !important;
        gap: 8px 6px !important;
    }
    .mo-launch .mo-item {
        min-height: 0 !important;
        padding: 8px 3px !important;
        gap: 6px !important;
        border-radius: 14px !important;
        font-size: 0.7rem !important;
    }
    .mo-launch .mo-item i {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.05rem !important;
        border-radius: 13px !important;
        flex: none !important;
    }
    .mo-launch .mo-item .mo-lbl {
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }
}

/* Tablet (769-1024px) con dito: le stesse tessere, un filo piu' grandi.
   Il min-width e' indispensabile: senza, questo blocco matcherebbe anche
   i telefoni e, venendo dopo, annullerebbe le misure da telefono. */
@media (pointer: coarse) and (min-width: 769px) and (max-width: 1024px) {
    .mo-launch .mo-item { min-height: 0 !important; padding: 10px 6px !important; }
    .mo-launch .mo-item i {
        width: 48px !important; height: 48px !important;
        min-width: 48px !important; min-height: 48px !important;
        font-size: 1.15rem !important;
    }
    .mo-launch .mo-item .mo-lbl { font-size: 0.72rem !important; }
}

/* Su schermi grandi le tessere possono crescere: la griglia e' in
   auto-fill quindi da sola aggiunge colonne, ma il glifo va ingrandito
   per non sembrareminuscolo dentro una tessera piu' grande. */
@media (min-width: 1600px) {
    .altro-pop .ag-item i,
    .moduli-pop .ag-item i {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        font-size: 1.25rem !important;
        border-radius: 15px !important;
    }
    .altro-pop .ag-item span,
    .moduli-pop .ag-item span {
        font-size: 0.78rem !important;
    }
}

/* ==========================================================================
   8c. LA BARRA MENU IN ALTO COPRIVA IL PRIMO BLOCCO DI OGNI PAGINA
   ==========================================================================
   .pos-nav-global e' una barra position:fixed in alto, alta 62px, distesa
   per tutta la larghezza (left:0; right:0; z-index 950). Sotto i 992px
   viene nascosta e al suo posto compare .pos-header.

   Per lasciarle spazio c'era "body.has-global-nav .pos-content
   { padding-top: 62px }", ma pos_interface.css (righe 17-20) dichiara
   "html body .pos-content { padding-top: 0 !important }": il !important
   vinceva e annullava la compensazione. Risultato: su desktop i primi 62px
   di ogni pagina finivano NASCOSTI sotto la barra. Il primo elemento a
   renderlo evidente e' stato l'avviso del turno non chiuso, ma il difetto
   riguardava tutte le pagine.

   La correzione resta limitata a .extras-ui: la cassa ha un guscio
   posizionato adesso dentro .pos-content e non va toccata.

   ========================================================================== */

@media (min-width: 992px) {
    body.has-global-nav .pos-content.extras-ui {
        padding-top: 62px !important;
    }
}

/* ==========================================================================
   8d. TESTO TROPPO PICCOLO
   ==========================================================================
   Il controllo automatico sul telefono ha trovato due etichette a 0.58rem
   (9,3px): sotto i ~10px il carattere non e' piu' leggibile sullo schermo
   di un telefono, e con la barra in fondo finisce anche vicino al pollice.

   ========================================================================== */

@media (max-width: 768px) {
    /* Titoli di sezione dentro i popup "Altro" e "Moduli" */
    .altro-grp > .ag-tit,
    .moduli-pop .ag-tit {
        font-size: 0.7rem !important;
    }
    /* Giorni sotto le barre del grafico andamento */
    .trend-bars .tb-day {
        font-size: 0.68rem !important;
    }
}

/* ==========================================================================
    9. STAMPA - il layout responsive non deve sporcare i fogli
   ========================================================================== */

@media print {
    /* Nessun padding da safe-area su carta. */
    body,
    .pos-container,
    .pos-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Le tabelle tornano al flusso normale, senza scroll. */
    .table {
        display: table !important;
        white-space: normal !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .table thead,
    .table tbody,
    .table tfoot {
        display: table-row-group !important;
        min-width: 0 !important;
    }

    /* La scala FHD non deve ingrandire la stampa. */
    body {
        font-size: 12pt !important;
    }
}

/* ==========================================================================
   10. ACCESSIBILITA' - prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus visibile per chi naviga da tastiera (POS + accessibility) */
@media (prefers-contrast: more) {
    .btn,
    .form-control,
    .form-select {
        border-width: 2px !important;
    }
}

/* ==========================================================================
   11. TABELLE DEL POS COME SCHEDE
   --------------------------------------------------------------------------
   Il problema
   Una tabella con 6-9 colonne non entra in uno schermo di cassa, e su
   telefono non entra neanche in uno di tavolo. Costringe a scorrere di
   lato, e chi serve ha le mani occupate: ogni scorrimento costa tempo e
   capita che si perda la vista delle colonne a destra.

   La scelta
   Ogni riga diventa una scheda, con i pulsanti dentro. Le intestazioni
   non si cancellano: smettono solo di essere una riga e diventano
   l'etichetta di ogni campo, tramite l'attributo data-label che mette
   il JavaScript (static/grume_pos/js/table_cards.js).

   Vale anche da desktop, non solo da telefono. Il motivo e' che lo
   scorrimento laterale e' scomodo ovunque, e con le schede una riga si
   legge tutta senza muovere nulla. Sul desktop le schede si affiancano
   da sole man mano che c'e' spazio, quindi non si perde densita'.

   PERCHE' TUTTE LE !IMPORTANT
   Sotto i 992px, la sezione 6b impone a .table display:block,
   min-width:max-content e white-space:nowrap: e' il meccanismo che
   genera lo scroll laterale. Per sostituirlo bisogna batterlo, quindi
   qui gli !important non sono durezza ma necessita'. Senza, le schede
   non si vedono da telefono.

   Il DOM non cambia
   Nessuna cella viene spostata o cancellata: cambia solo come viene
   mostrata. Per questo il JavaScript gia' presente nelle pagine, che
   cerca le celle per indice per salvare o cancellare, continua a
   funzionare senza toccare nulla.

   Come si esclude una tabella
   data-card="no" sulla tabella o su un contenitore che la racchiude.
   Lo usano le pagine di stampa, dove la tabella deve restare tabella.
   ========================================================================== */

/* --- 11a-bis. Il calendario non e' una tabella di dati --------------------
   DIFESA NECESSARIA, non opzionale.

   Il calendario FullCalendar, nelle viste a ore (settimana e giorno),
   costruisce la griglia con una <table> vera: la tabella che disegna le
   colonne dei giorni e le fasce orarie. Il componente schede passava di
   qui e la trattava come una tabella di dati: le nascondeva
   l'intestazione, metteva il corpo a griglia e faceva di ogni fascia
   oraria una scheda. Risultato: il calendario spariva, e si vedeva solo
   la vista elenco, che FullCalendar costruisce con <div>.

   table_cards.js ora non assegna piu' la classe a queste tabelle, ma la
   difesa qui resta: se un domani un'altra tabella di FullCalendar o un
   altro componente a griglia finisce dentro, il calendario continua a
   funzionare. Il selettore '.fc' e' la radice di FullCalendar.            */
.fc .gc-tabella,
.fc .gc-tabella.gc-tabella,
.fc .gc-tabella > thead,
.fc .gc-tabella > tbody,
.fc .gc-tabella > tbody > tr,
.fc .gc-tabella > tbody > tr > td,
.fc .gc-tabella > tfoot,
.fc .gc-tabella > tfoot > tr,
.fc .gc-tabella > tfoot > tr > td {
    display: revert !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 0 !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
}

.fc .gc-tabella > tbody > tr > td::before,
.fc .gc-tabella > thead > tr > th::before,
.fc .gc-tabella > tfoot > tr > td::before { content: none !important; }

/* --- 11a. La tabella smette di essere una tabella ------------------------
   Si annullano in un colpo solo: la larghezza minima imposta da mobile.css,
   lo scorrimento orizzontale e il divieto di andare a capo. Le celle
   diventano libere di disporsi come serve.

   PERCHE' LA CLASSE E' SCRITTA DUE VOLTE
   mobile.css ha '.table-responsive table { min-width: 720px !important }',
   che vale (0,1,1). Un semplice '.gc-tabella' vale (0,1,0) e perde, per
   quanto sia in un file caricato dopo. Il risultato sarebbe una scheda
   larga 720px dentro uno schermo da 390, con i campi che escono a
   destra: proprio cio' che le schede devono evitare. Raddoppiando la
   classe si sale a (0,2,0) e si vince senza toccare mobile.css, che
   continua a fare il suo lavoro per tutte le altre tabelle.            */
.gc-tabella.gc-tabella,
.gc-tabella.gc-tabella > tbody,
.gc-tabella.gc-tabella > tbody > tr,
.gc-tabella.gc-tabella > tbody > tr > td,
.gc-tabella.gc-tabella > tfoot,
.gc-tabella.gc-tabella > tfoot > tr,
.gc-tabella.gc-tabella > tfoot > tr > td,
.gc-tabella.gc-tabella > tfoot > tr > th {
    min-width: 0 !important;
}

/* --- 11b. Le intestazioni non si mostrano, ma restano nel documento -----
   Non si cancellano per tre motivi: servono a chi stampa la pagina,
   servono a chi naviga da tastiera o con uno screen reader, e servono
   al motore di ricerca del browser. Spariscono solo dagli occhi. */
.gc-tabella > thead {
    display: none !important;
}

/* --- 11c. Il corpo diventa un muro di schede ----------------------------
   auto-fill con minmax fa da solo il lavoro: una scheda sola su
   telefono, due tre quattro schede affiancate man mano che c'e' spazio.
   Non serve sapere in anticipo quante sono, quindi non si rompe quando
   le righe cambiano numero. */
.gc-tabella.gc-tabella {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
}

.gc-tabella.gc-tabella > tbody {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 12px;
    padding: 4px 0 10px;
    width: auto !important;
    overflow: visible !important;
}

.gc-tabella > tbody > tr {
    display: block !important;
    background: var(--gc-card-bg, #ffffff);
    border: 1px solid var(--border-color, #d8dee6) !important;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    /* Se la scheda capita a cavallo di un salto pagina, non viene divisa */
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Le strisce alternate non hanno piu' senso: la scheda e' gia' un blocco
   separato, con il suo bordo. */
.gc-tabella.table-striped > tbody > tr:nth-of-type(odd) > td,
.gc-tabella > tbody > tr:nth-of-type(odd) > td {
    background-color: transparent !important;
}

.gc-tabella > tbody > tr > td {
    display: grid !important;
    grid-template-columns: minmax(84px, 38%) 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 13px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--gc-card-fg, #0f172a) !important;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

/* Separatore fra un campo e l'altro dentro la stessa scheda */
.gc-tabella > tbody > tr > td + td {
    border-top: 1px solid var(--gc-card-line, rgba(15, 23, 42, 0.07)) !important;
}

/* L'etichetta, cioe' il nome della colonna */
.gc-tabella > tbody > tr > td::before {
    content: attr(data-label);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    overflow-wrap: anywhere;
}

/* Il primo campo di solito e' il nome: si da' il peso che merita, per
   non costringere a cercarlo fra le righe. */
.gc-tabella > tbody > tr > td:first-child {
    font-weight: 700;
    font-size: 1.02rem;
}

/* Campi con un modulo dentro: il campo deve prendersi la larghezza
   disponibile, altrimenti l'input resta stretto e il testo esce. */
.gc-tabella > tbody > tr > td > .form-control,
.gc-tabella > tbody > tr > td > .form-select,
.gc-tabella > tbody > tr > td > .input-group {
    width: 100%;
}

/* --- 11d. I pulsanti dentro la scheda -----------------------------------
   Qui dentro non c'e' piu' una colonna "Azioni" stretta: c'e' spazio
   libero, quindi i pulsanti si possono ingrandire. Il minimo e' 44px
   perche' e' la soglia sotto la quale il dito sbaglia di bersaglio, e su
   un POS veloce un tasto premuto di lato e' un ordine sbagliato. */
.gc-tabella > tbody > tr > td.gc-azioni {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    background: var(--gc-card-act-bg, rgba(15, 23, 42, 0.03)) !important;
}

.gc-tabella > tbody > tr > td.gc-azioni::before {
    content: none;
}

.gc-tabella > tbody > tr > td.gc-azioni .btn,
.gc-tabella > tbody > tr > td.gc-azioni .btn-group {
    min-height: 44px;
}

.gc-tabella > tbody > tr > td.gc-azioni .btn {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
}

/* Su schermi stretti i pulsanti prendono tutta la larghezza: si premono
   col dito senza mirare, che e' il modo piu' rapido e meno soggetto
   agli errori. Serve agire anche sul .btn-group perche' di solito e' lui
   il contenitore reale dei pulsanti, non la cella: allargando solo la
   cella i pulsanti resterebbero grandi quanto il loro testo. */
@media (max-width: 575.98px) {
    .gc-tabella > tbody > tr > td.gc-azioni {
        justify-content: stretch;
    }
    .gc-tabella > tbody > tr > td.gc-azioni .btn-group {
        width: 100%;
    }
    .gc-tabella > tbody > tr > td.gc-azioni .btn {
        flex: 1 1 auto;
    }
}

/* --- 11e. Le celle che coprono piu' colonne -----------------------------
   Sono due casi: la riga "nessun dato" (colspan su tutta la riga) e i
   totali che si estendono su due colonne. Non sono un campo singolo, non
   hanno un nome di colonna, quindi niente etichetta e tutta la larghezza
   della scheda. Il testo che hanno dentro basta da solo. */
.gc-tabella > tbody > tr > td.gc-intera {
    grid-template-columns: 1fr;
    color: var(--text-muted, #64748b) !important;
    font-style: italic;
    text-align: center;
}

.gc-tabella > tbody > tr > td.gc-intera::before {
    content: none;
}

/* --- 11f. Il pie' di pagina con i totali ---------------------------------
   Nei report c'e' un tfoot con le somme. Se non lo si tratta, resta una
   tabella dentro una tabella e si vede male. */
.gc-tabella > tfoot {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
}

.gc-tabella > tfoot > tr {
    display: block !important;
    margin-top: 10px;
    background: var(--gc-card-total-bg, rgba(15, 23, 42, 0.06));
    border-radius: 12px;
    overflow: hidden;
}

.gc-tabella > tfoot > tr > td,
.gc-tabella > tfoot > tr > th {
    display: grid !important;
    grid-template-columns: minmax(84px, 38%) 1fr;
    gap: 10px;
    align-items: center;
    padding: 9px 13px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--gc-card-fg, #0f172a) !important;
    font-weight: 700;
    white-space: normal;
    word-break: break-word;
}

.gc-tabella > tfoot > tr > td + td,
.gc-tabella > tfoot > tr > th + th {
    border-top: 1px solid var(--gc-card-line, rgba(15, 23, 42, 0.09)) !important;
}

.gc-tabella > tfoot > tr > td::before,
.gc-tabella > tfoot > tr > th::before {
    content: attr(data-label);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
}

/* --- 11g. Il contenitore non deve piu' scorrere di lato ----------------
   Sulla carta si potrebbe togliere overflow:auto. Non lo si fa a caso:
   se una tabella dentro questo contenitore non e' stata trasformata
   (perche' sta dentro un data-card="no", o perche' non ha intestazione)
   deve poter comunque scorrere da sola, invece di far saltare il layout
   della pagina. */
.table-responsive.table-responsive:has(.gc-tabella),
.table-wrap.table-wrap:has(.gc-tabella),
.table-scroll.table-scroll:has(.gc-tabella),
.table-container.table-container:has(.gc-tabella) {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* --- 11h. Su telefono i riquadri lasciano spazio ai bordi -------------
   Le pagine del POS impilano tre contenitori uno dentro l'altro, e ognuno
   ha il proprio padding: 24px del contenitore, 28px della scheda, 12px del
   corpo. Su uno schermo da 390px quei 128px sono un terzo della larghezza
   e la scheda si ritrova stretta 250px con i campi minuscoli.

   Qui si stringe il padding, ma solo sotto i 576px e solo nelle pagine che
   contengono schede: le altre pagine del POS, che non hanno tabelle, non
   vengono toccate. Sopra i 576px non si muove nulla, perche' a quella
   larghezza lo spazio serve e toglierlo farebbe solo aria.            */
@media (max-width: 575.98px) {
    body:has(.gc-tabella) .container-fluid.p-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:has(.gc-tabella) .card.bg-panel-theme,
    body:has(.gc-tabella) .card-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body:has(.gc-tabella) .card-body.p-0 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}


/* ==========================================================================
   12. IL MENU DIVENTA UNA TENDINA
   --------------------------------------------------------------------------
   Il problema
   Il menu era un pannello che entrava da sinistra e occupava tutta
   l'altezza dello schermo. Copriva la pagina: per controllare un tavolo
   o un ordine bisognava prima richiuderlo, e durante il servizio si
   apriva e chiudeva di continuo.

   La scelta
   Il bottone resta a sinistra, ma schiacciandolo esce una tendina sotto
   di lui. Il resto dello schermo resta visibile e utilizzabile: si
   consulta la tendina e si continua a guardare il tavolo.

   Perche' i !important
   Il pannello Bootstrap ha visibility:hidden e transform:translateX(-100%)
   anche quando non gli si mette piu' la classe .offcanvas. Vanno annullate
   esplicitamente, altrimenti la tendina resta invisibile pur essendoci.

   Come si chiude
   Toccando fuori, con ESC, scegliendo una voce, o passando a uno schermo
   largo (dove c'e' la barra laterale e la tendina coprirebbe i pulsanti).
   ========================================================================== */

.pos-menu-drop {
    display: none;
}

.pos-menu-drop[hidden] {
    display: none !important;
}

/* Come si presenta la tendina: colata sopra la pagina, con il fondo che
   copre solo la parte sotto la testata. Vale a ogni larghezza, perche' la
   cassa la mostra anche a schermo largo (li' la barra laterale non c'e' e
   il menu e' l'unica via per spostarsi).

   La posizione in alto la decido poi in due punti: 12a per le pagine
   normali, che hanno la testata, e pos_interface.css per la cassa, che ha
   una barra sua. */
.pos-menu-drop {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 6px;
    right: 6px;
    background: var(--bg-panel, #fff);
    color: var(--text-main, #0f172a);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28);
    z-index: 1000;
    overflow: hidden;
    visibility: visible !important;
    transform: none !important;
}

.pos-menu-velo {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.28);
    z-index: 999;
}

.pos-menu-velo[hidden] {
    display: none !important;
}

/* --- 12a. La tendina, sotto i 992px -------------------------------------- */
@media (max-width: 991.98px) {
    .pos-menu-drop {
        /* Sotto la barra in alto, non sopra: se coprisse la barra, il
           bottone sparirebbe insieme alla tendina e non si potrebbe
           richiudere toccandolo. */
        top: calc(56px + env(safe-area-inset-top, 0px));
        /* Con molte voci il menu e' piu' alto dello schermo. Senza un
           tetto, le ultime righe (Stampe, Backup, Esci) finivano fuori
           schermo e non si potevano raggiungere. */
        max-height: calc(100dvh - 68px - env(safe-area-inset-top, 0px));
    }

    /* Voce per voce, come la lista piatta di prima: la tendina e' piu'
       stretta del pannello e una griglia a icone finirebbe con testi
       tagliati. */
    .pos-menu-drop .list-group-item {
        border-radius: 10px;
        padding: 11px 12px;
        font-weight: 600;
    }

    .pos-menu-drop-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        flex-shrink: 0;
    }

    .pos-menu-drop-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        flex: 1 1 auto;
    }

    .pos-menu-drop-close {
        margin-left: auto;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: inherit;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Il fondo scuro serve solo a far capire che la tendina e' sopra
       tutto: il resto della pagina resta utilizzabile, quindi non si
       spegne e non blocca i tocchi.

       Non parte da 0 ma da sotto la testata (regola qui sotto). Con
       inset:0 copriva anche la riga del bottone: premendolo di nuovo per
       chiudere si chiudeva lo schermo, e non il menu. */
    .pos-menu-velo {
        top: calc(56px + env(safe-area-inset-top, 0px));
    }

    /* Il bottone resta distinguibile mentre la tendina e' aperta. */
    .pos-menu-btn[aria-expanded="true"] {
        background: var(--text-main, #0f172a) !important;
        color: var(--bg-panel, #fff) !important;
        border-color: var(--text-main, #0f172a) !important;
    }
}

/* --- 12b. Da 992px in su la tendina si nasconde -------------------------
   Sotto i 992px la barra .pos-nav-global viene nascosta e al suo posto
   compare .pos-header (vedi layout.html, riga 801). Da 992px in su la
   tendina non serve: c'e' la barra laterale con tutte le voci gia' visibili.

   Qui non si usa il !important (a differenza del resto del capitolo, dove
   serve per battere mobile.css). Con il !important la cassa non avrebbe
   potuto mostrare la tendina a schermo largo: la sua pagina non ha la
   barra laterale, quindi il menu e' l'unico modo di spostarsi, e senza si
   restava intrappolati. La priorita' si ottiene con la specificita' di
   body:has(...) in pos_interface.css, che arriva dopo. */
@media (min-width: 992px) {
    .pos-menu-drop,
    .pos-menu-velo {
        display: none;
    }
}

/* --- 12c. Il bottone del menu anche in fascia tablet ---------------------
   Tra 768px e 991px la barra .pos-nav-global e' gia' nascosta e la parte
   destra di .pos-header usa il markup d-md-flex, cioe' compare solo da
   768px in su: in questa fascia restava una pagina senza nessun bottone
   per aprire il menu. Senza bottone non c'e' piu' modo di arrivare a
   Tavoli, Ordini, Delivery o Report da un tablet. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pos-header .pos-mobile-header {
        display: flex !important;
    }

    /* La parte destra della barra (HOME, AGENDA, CASSA, ...) starebbe
       stretta accanto al logo a questa larghezza: si tiene solo la riga
       del menu, che e' cio' che serve per orientarsi. */
    .pos-header .pos-mobile-header-center {
        flex: 1 1 auto;
    }

    .pos-menu-drop {
        top: calc(60px + env(safe-area-inset-top, 0px));
    }

    .pos-menu-velo {
        top: calc(60px + env(safe-area-inset-top, 0px));
    }
}

/* --- 12d. Il bottone del menu grande quanto si deve toccare ------
   mobile.css fissa a 38px l'altezza dei pulsanti della barra in alto
   (riga 870) e la regola sui bersagli tattili di questo foglio (3b)
   riguarda solo .side-btn, cioe' i tasti della barra laterale: il
   bottone del menu restava 32x30, troppo piccolo per un dito.
   44px e' la misura minima usata come riferimento in questo foglio. */
@media (max-width: 991.98px) {
    .pos-menu-btn,
    .sph-burg-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem !important;
    }
}

/* ==========================================================================
   13. PAGINE A TEMA SCURO (body-dark) — TESTI DEI FORM LEGGIBILI SU SMARTPHONE
   --------------------------------------------------------------------------
   Il problema
   mobile.css, sotto i 768px, impone
       .form-label { color: #111827 !important }        (riga 1633)
       .form-control, .form-select { background:#fff !important;
                                     color:#0f172a !important }  (riga 1634)
   Va bene per il gestionale (pagine chiare), ma sulle pagine pubbliche a
   tema scuro (/ordina, /menu, /checkout, /recensione) lo sfondo e' quasi
   nero: l'etichetta nera spariva (nero su nero) e il cliente non capiva
   cosa scrivere nei campi. Le regole di order.css/order.html impostavano
   le etichette bianche SENZA !important, quindi perdevano contro mobile.css.

   La scelta
   Si riportano al chiaro le etichette e i testi di aiuto SOLO dentro
   "body.body-dark", cosi' il gestionale non cambia di una virgola. I campi
   restano bianchi con testo scuro, esattamente come appaiono su desktop.
   Specificita' "body.body-dark .form-label" (0,2,1) + !important: batte
   definitivamente ".form-label" (0,1,0) di mobile.css.
   ========================================================================== */
@media (max-width: 768px) {
    body.body-dark .form-label,
    body.body-dark label,
    body.body-dark legend,
    body.body-dark .col-form-label {
        color: #f3f4f6 !important;
        text-shadow: none !important;
    }

    /* Testi di aiuto sotto i campi */
    body.body-dark .form-text,
    body.body-dark small {
        color: #cbd5e1 !important;
    }
    body.body-dark .invalid-feedback { color: #ff8a8a !important; }
    body.body-dark .valid-feedback { color: #86efac !important; }

    /* Placeholder leggibile sul campo bianco */
    body.body-dark .form-control::placeholder,
    body.body-dark .form-select::placeholder,
    body.body-dark textarea::placeholder {
        color: #6b7280 !important;
        opacity: 1 !important;
    }

    /* Etichette di checkbox e radio: restano chiare sul tema scuro */
    body.body-dark .form-check-label { color: #f3f4f6 !important; }

    /* Titoli dentro le pagine scure: mai neri su nero */
    body.body-dark h1, body.body-dark h2, body.body-dark h3,
    body.body-dark h4, body.body-dark h5, body.body-dark h6 {
        color: #ffffff !important;
    }
}

/* ==========================================================================
   14. LE CASELLE RESTANO QUADRATE (fix smartphone/desktop, sito pubblico)
   --------------------------------------------------------------------------
   Il problema
   design.css (riga 382) assegna a OGNI campo la stessa altezza minima dei
   campi di testo:
       input, select, textarea, .form-control, .form-select,
       .form-check-input { min-height: var(--ds-tap) }   (44px)
   e responsive.css (sezione 3a, "pointer: coarse") ripete
       .form-check-input { min-height: var(--rsp-tap) !important } (48px)
   La casella del "Personalizza" (/ordina) e gli interruttori del
   checkout diventavano cosi' delle BARRE alte 44-48px invece che
   quadrati: la spunta si schiacciava e l'elemento sembrava un'icona
   fuori posto. La larghezza resta 20px/1.3em, l'altezza no.

   La scelta
   Si riporta a zero l'altezza minima SOLO per il sito pubblico
   (body:not(.pos-scope)); il gestionale POS (body.pos-scope) resta
   identico, cosi' i suoi interruttori grandi non cambiano.
   Specificita' (0,2,1) + !important: batte sia design.css (senza
   !important) sia la sezione 3a di questo stesso foglio (0,1,0).
   ========================================================================== */
body:not(.pos-scope) .form-check-input {
    min-height: 0 !important;
    padding: 0 !important;
}