/* ============================================================
   IQS 2026 — Regole comuni per schermi di ogni misura (08/10/2026)
   Incluso da tutte le pagine (con e senza barra laterale), subito
   dopo css/iqs-sidebar.css o dopo Bootstrap.

   Perche' esiste: un affiliato su MacBook (Safari e Chrome) non vedeva
   i pulsanti Modifica / Elimina / Importa documenti degli operatori.
   La tabella era piu' larga dello spazio e scorreva di lato, ma su Mac
   la barra di scorrimento non si vede finche' non si scorre: la colonna
   «Azioni» era semplicemente fuori vista, e niente diceva che c'era.
   Su Windows la barra e' sempre visibile, per questo li' non si notava.
   Scheda: docs/03-js/iqs-responsive.md
   ============================================================ */

/* ------------------------------------------------------------------
   1. TABELLE CHE SCORRONO DI LATO: barra di scorrimento sempre visibile
   Su Mac (Safari e Chrome) una barra con stile proprio e' sempre
   disegnata, invece di comparire solo durante lo scorrimento. Firefox e
   i telefoni ignorano queste regole: li' resta la colonna fissa (2).
   ------------------------------------------------------------------ */
.table-responsive::-webkit-scrollbar,
.iqs-scroll-x::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.table-responsive::-webkit-scrollbar-track,
.iqs-scroll-x::-webkit-scrollbar-track {
    background: #eef2f7;
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
.iqs-scroll-x::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border: 2px solid #eef2f7;
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.iqs-scroll-x::-webkit-scrollbar-thumb:hover { background: #64748b; }

.table-responsive::-webkit-scrollbar-corner,
.iqs-scroll-x::-webkit-scrollbar-corner { background: transparent; }

/* ------------------------------------------------------------------
   2. COLONNA «AZIONI» SEMPRE IN VISTA
   In ogni tabella dentro .table-responsive che ha dei pulsanti
   nell'ultima colonna, quella colonna resta ferma sul bordo destro:
   se la tabella e' piu' larga dello schermo scorre il resto, i pulsanti
   no. Le righe di una cella sola (colspan: righe espanse, «nessun
   risultato») non sono toccate. Per escludere una tabella: classe
   .iqs-no-sticky sulla <table>.
   I browser senza :has() (Safari < 15.4, Chrome < 105, Firefox < 121)
   saltano la regola: la tabella scorre come prima, senza errori.
   Lo sfondo della cella resta quello di Bootstrap (bianco + righe a
   strisce/hover con l'ombra interna): qui si aggiunge solo un'ombra
   leggera a sinistra, che separa la colonna ferma da quella che scorre.
   ------------------------------------------------------------------ */
.table-responsive table.table:not(.iqs-no-sticky):has(> tbody > tr > td:last-child :is(.btn, button)) > :is(thead, tbody, tfoot) > tr > :is(th, td):last-child:not([colspan]) {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))),
                -7px 0 7px -7px rgba(15, 23, 42, .22);
}

/* un menu a tendina aperto nella colonna ferma deve passare sopra le righe sotto */
.table-responsive table.table:not(.iqs-no-sticky) > tbody > tr > td:last-child:has(.dropdown-menu.show) { z-index: 3; }

/* ------------------------------------------------------------------
   3. iPhone e iPad: niente ingrandimento automatico toccando un campo
   (la barra utente in alto, che aveva qui le sue regole fino al
   16/10/2026, ora e' tutta in css/iqs-theme.css, sezione 9)
   Safari su iOS ingrandisce la pagina quando si tocca un campo con
   testo sotto i 16 px (form-control-sm = 14 px) e non la rimpicciolisce
   piu'. Solo sui dispositivi iOS (-webkit-touch-callout) e solo
   sotto i 992 px: sui computer i campi restano come sono.
   ------------------------------------------------------------------ */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 991.98px) {
        input.form-control,
        textarea.form-control,
        select.form-select,
        select.form-control,
        .input-group > .form-control,
        .input-group > .form-select { font-size: 16px; }
    }
}