/* ============================================================================
   mobile.css — ottimizzazioni per schermi < 768px (telefoni)
   Caricato da include/head.php DOPO style.css: le regole qui vincono in cascata.
   Nessuna regola attiva da 768px in su: il desktop resta identico.
   Porting da ChallengeMI, adattato al markup di questo gemello (vedi
   MODULO_MOBILE.md per le differenze).
   ============================================================================ */

@media (max-width: 767.98px) {

    /* la pagina in se non deve mai scrollare in orizzontale: ogni
       contenuto largo (tabelle, grafici, kanban) scorre nel suo wrapper */
    html, body { overflow-x: hidden; }

    /* ------------------------------------------------------------------
       1. TABELLE ELENCHI — scroll X libero (nessuna colonna bloccata)
       Qui il dataTables_wrapper (filtro/length/paginazione compresi) sta
       DENTRO div.col-12.table-responsive: la tabella scorre gia nel suo
       wrapper, queste regole aggiungono affordance e tap target.
       ------------------------------------------------------------------ */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* contenuti delle child-row espanse (es. sedi): i badge indirizzo
       vanno a capo invece di sbordare */
    .table-responsive td.child .badge { white-space: normal; }

    /* ombra sul bordo destro del wrapper finché c'è altro da scrollare
       (classe gestita da mobile.js) */
    .table-responsive.has-scroll-right {
        box-shadow: inset -14px 0 12px -10px rgba(0, 0, 0, 0.55);
    }

    /* tap target: estende l'area cliccabile delle icone azione senza
       spostare il layout */
    table.dataTable tbody td a > i[class^="icon-"],
    table.dataTable tbody td a > i[class*=" icon-"] {
        padding: 9px;
        margin: -9px;
        box-sizing: content-box;
    }
    .filter-row .search_dett { min-height: 38px; }

    /* paginazione DataTables: senza questi i bottoni vengono schiacciati
       quando le pagine sono tante ("Precedente" una lettera per riga) */
    div.dataTables_wrapper .dataTables_paginate {
        float: none;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    div.dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: nowrap;
        width: max-content;
        margin: 0 auto;
    }
    div.dataTables_wrapper .dataTables_paginate .page-link { white-space: nowrap; }

    /* lente del campo Filtra (::after del tema): ancorata in basso
       all'input anche se la label va a capo */
    .dataTables_filter > label:after { top: auto !important; bottom: 9px !important; }

    /* grafici ECharts: larghezza minima leggibile dentro un contenitore
       scrollabile (ECharts marca i suoi div con _echarts_instance_) */
    div[_echarts_instance_] { min-width: 680px; }
    div:has(> div[_echarts_instance_]) {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* ------------------------------------------------------------------
       2. SCHEDA CLIENTE / PAGINE A DUE COLONNE — stacking
       Il wrapper .d-md-flex.align-items-md-start sotto md diventa block,
       ma i figli .col-3/.col-9 restano al 25%/75% (max-width della
       utility): qui li portiamo a tutta larghezza. Il combo e usato
       dalle schede (info_b2b/lead/prelead) e da report/ricerche/import:
       il comportamento giusto sotto md e lo stesso per tutti.
       ------------------------------------------------------------------ */
    .d-md-flex.align-items-md-start > .col-3,
    .d-md-flex.align-items-md-start > .col-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .d-md-flex.align-items-md-start > .col-9 {
        margin-top: 0.75rem;
    }

    /* tab verticali della scheda -> barra orizzontale scrollabile
       (vale sia per il layout desktop sia per quello servito a UA mobile) */
    .nav-tabs-vertical.flex-column {
        flex-direction: row !important; /* vince su .flex-column (utility !important) */
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .nav-tabs-vertical.flex-column .nav-item { flex: 0 0 auto; }
    .nav-tabs-vertical.flex-column .nav-link { white-space: nowrap; }
    /* indicatore verticale (barra sinistra) spento, attivo segnato sotto */
    .nav-tabs-vertical.flex-column .nav-link::before { display: none; }
    .nav-tabs-vertical.flex-column .nav-link.active {
        box-shadow: inset 0 -2px 0 #42A5F5;
    }

    /* ------------------------------------------------------------------
       3. LARGHEZZE MINIME — colonne funnel/kanban e picker
       Gli originali (style.css @media max-1300) impongono 19rem/18rem.
       ------------------------------------------------------------------ */
    .colonna-funnel-qualif,
    .colonna-funnel-qualif-scheda_cli,
    .colonna-funnel-challengeMail,
    .colonna-funnel-qualif-anag {
        min-width: min(19rem, 82vw) !important;
    }
    .picker {
        min-width: 0;
        max-width: calc(100vw - 2rem);
    }

    /* header delle card: gli elementi inline (titolo + bottoni) vanno a capo
       invece di uscire dal viewport */
    .card-header.header-elements-inline { flex-wrap: wrap; }

    /* ------------------------------------------------------------------
       5. MENU DI NAVIGAZIONE — sottomenu ad accordion
       Su desktop i sottomenu sono flyout assoluti aperti via hover
       (style.css ~940); su mobile si espandono in flusso, indentati,
       aperti dal tap handler di mobile.js.
       ------------------------------------------------------------------ */
    .dropdown-menu-sottomenu {
        position: static;
        left: auto;
        top: auto;
        float: none;
        width: 100%;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding-left: 1.25rem;
    }
    /* l'apertura la pilota solo la classe .show (il tap emula anche
       l'hover: senza questo comparirebbero aperture fantasma) */
    .dropdown-menu-sottomenu:not(.show):hover { display: none; }

    /* freccia del toggle ruotata quando il sottomenu e aperto */
    .icon_sottomenu { transition: transform 0.15s ease; }
    .dropdown-toggle-sottomenu.sottomenu-aperto .icon_sottomenu {
        transform: rotate(90deg);
    }

    /* voci del menu comode da tappare */
    #navbar-navigation .dropdown-item { min-height: 40px; }
}

/* ----------------------------------------------------------------------
   4. MODALI — quasi fullscreen sui telefoni piccoli
   ---------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100vw - 16px);
        margin: 8px auto;
    }
    .modal-body {
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }
}