/* ============================================================================
   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.
   ============================================================================ */

@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)
       ------------------------------------------------------------------ */
    .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
       ("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; }

    /* header "Filtra:" delle tabelle (d-flex space-between): i blocchi
       vanno a capo, il selettore numero righe non esce piu dal viewport */
    div.d-flex.justify-content-between.mb-2 { flex-wrap: wrap; }

    /* campo Filtra: a tutta larghezza, lente (::after del tema) ancorata
       all'input invece che sospesa sulla riga della scritta */
    .dataTables_filter { width: 100%; }
    .dataTables_filter > label { display: block; width: 100%; }
    .dataTables_filter > label:after { top: auto !important; bottom: 9px !important; }

    /* bottone imbuto allineato al bordo sinistro come gli altri elementi */
    div.d-flex.justify-content-between.mb-2 .btn.mx-2 { margin-left: 0 !important; }

    /* la select accanto all'imbuto riempie la riga, cosi le checkbox
       finiscono appaiate sulla riga successiva */
    div.d-flex.justify-content-between.mb-2 select.form-control.w-auto {
        flex: 1 1 260px;
        max-width: calc(100% - 46px);
    }

    /* respiro verticale uniforme tra le righe del blocco filtri
       (!important: dataTables_filter ha la utility m-0) */
    div.d-flex.justify-content-between.mb-2 > .row.col > .dataTables_filter,
    div.d-flex.justify-content-between.mb-2 > .row.col > .btn,
    div.d-flex.justify-content-between.mb-2 > .row.col > select,
    div.d-flex.justify-content-between.mb-2 > .row.col > .form-check {
        margin-bottom: 0.5rem !important;
    }

    /* selettore numero righe nell'header custom: etichetta ("10" orfano
       non si capiva). Scoped: nelle tab della scheda la label ha gia il
       testo "Mostra:" nativo di DataTables */
    div.d-flex.justify-content-between.mb-2 .dataTables_length > label {
        display: flex;
        align-items: center;
    }
    div.d-flex.justify-content-between.mb-2 .dataTables_length > label::before {
        content: "Mostra:";
        margin-right: 0.5rem;
    }

    /* 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 / LEAD / PERSONA — stacking sidebar + tab bar
       Il combo .row.col-12.m-0.p-0 è usato solo dai wrapper delle schede
       (scheda_azienda, scheda_anagrafica, varianti lead, scheda_persona).
       ------------------------------------------------------------------ */
    .row.col-12.m-0.p-0 > .col-3,
    .row.col-12.m-0.p-0 > .col-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .row.col-12.m-0.p-0 > .col-9 {
        padding-left: 0 !important; /* il wrapper ha pl-3 (utility !important) */
        margin-top: 0.75rem;
    }

    /* tab verticali -> barra orizzontale scrollabile */
    .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. FAB APPUNTI — compatto, non copre i contenuti
       Gli stili originali sono inline: serve !important.
       ------------------------------------------------------------------ */
    #fab_appunti_group {
        bottom: 12px !important;
        right: 12px !important;
        gap: 6px !important;
    }
    #fab_appunti_group > div:last-child a,
    #fab_appunto_rapido,
    #fab_appunti_list_btn {
        width: 44px !important;
        height: 44px !important;
    }
    #fab_appunti_drawer {
        width: calc(100vw - 24px) !important;
        max-width: 380px !important;
    }

    /* il "torna su" del tema occupa lo stesso angolo del FAB: spostato a sinistra */
    .btn-to-top {
        right: 118px !important;
        bottom: 12px !important;
    }

    /* ------------------------------------------------------------------
       6. MENU DI NAVIGAZIONE — sottomenu ad accordion
       Su desktop i sottomenu sono flyout assoluti aperti via hover
       (style.css ~1049); 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; }

    /* ------------------------------------------------------------------
       7. SCHEDA — sidebar compatta (classe aggiunta da mobile.js)
       ------------------------------------------------------------------ */
    .sidebar-compatta:not(.espansa) {
        max-height: 15rem;
        overflow: hidden;
        position: relative;
        margin-bottom: 0 !important;
    }
    /* fade verso il fondo: segnala che c'e altro contenuto */
    .sidebar-compatta:not(.espansa)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.5rem;
        background: linear-gradient(to bottom, rgba(42, 50, 70, 0), rgba(42, 50, 70, 0.95));
        pointer-events: none;
    }
    .sidebar-compatta-toggle {
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0;
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 0.75rem;
    }

    /* ------------------------------------------------------------------
       8. FORM ATTIVITÀ (gestisci_attivita — resta in iframe Fancybox
       anche su mobile: il salvataggio usa parent.$.fancybox/parent.notifica)
       ------------------------------------------------------------------ */
    /* i flex item hanno min-width:auto: la tabella argomenti imporrebbe
       la sua larghezza minima a tutta la colonna (riga .row "nuda" inclusa) */
    #form_attivita .row,
    #form_attivita .row > [class*="col-"] { min-width: 0; }

    /* testata: titolo su riga propria, select Associazione/Reparto sotto
       a tutta larghezza */
    #form_attivita > .col-md-12.d-flex { flex-wrap: wrap; }
    #form_attivita > .col-md-12.d-flex > .d-flex.justify-content-end {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }
    #form_attivita > .col-md-12.d-flex > .d-flex.justify-content-end > .form-group {
        flex: 1 1 10rem;
        max-width: 100%;
        margin-bottom: 0.25rem;
    }

    /* fasce d-flex (Data/Ora/Ora fine/Priorità, Scadenza BiVA,
       Tipo Attività/Pratiche sopra la tabella argomenti — wrapper
       .mt-2.d-flex dal riordino del 02/10/2026): griglia 2 colonne */
    #form_attivita .d-flex.border-gray,
    #form_attivita .col-md-12.d-flex,
    #form_attivita .mt-2.d-flex { flex-wrap: wrap; }
    #form_attivita .d-flex.border-gray > [class*="col-"],
    #form_attivita .col-md-12.d-flex > .form-group.col-md-6,
    #form_attivita .mt-2.d-flex > .form-group.col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* select2 ha la width inline calcolata all'init: nelle celle al 50%
       deve adattarsi */
    #form_attivita .select2.select2-container { width: 100% !important; }

    /* ------------------------------------------------------------------
       9. CALENDARIO (challengeCalendar, FullCalendar v6 su dashboard)
       La vista Settimana su mobile è listWeek (init condizionale nel
       blocco, challengeCalendar365.php ~450).
       ------------------------------------------------------------------ */
    /* toolbar FC: titolo a riga piena sopra i bottoni, niente sovrapposizioni */
    .fc .fc-header-toolbar {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }
    .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
        width: 100%;
        order: -1;
        text-align: center;
    }
    .fc .fc-toolbar-title { font-size: 1.1rem; }

    /* controlli sopra il calendario (account, select calendari, range date):
       le righe d-flex vanno a capo invece di strizzarsi */
    #dash_challengeCalendar .d-flex { flex-wrap: wrap; }

    /* overlay bottoni evento: comodi da tappare */
    #dash_challengeCalendar .event-buttons .btn {
        min-width: 40px;
        min-height: 40px;
    }

    /* vista agenda: righe respirabili */
    .fc .fc-list-event td { padding: 0.6rem 0.75rem; }

    /* ------------------------------------------------------------------
       10. HEADER — riga unità operativa
       Su desktop #nome_rag_soc (select UO + info associazioni + reparto)
       sta nella navbar scura ma è d-none d-md-flex: su mobile non ci
       sarebbe NESSUN modo di cambiare UO. Lo riesponiamo come riga a sé
       in fondo alla navbar scura, sopra la barra "Menu".
       In absolute ancorato al fondo (non in flusso flex): la larghezza
       non dipende così da quanti bottoni quick ha l'operatore nel
       contenitore intermedio.
       ------------------------------------------------------------------ */
    .navbar.navbar-dark:has(#nome_rag_soc) {
        position: relative; /* il tema lo imposta già: ribadito per non dipenderne */
        padding-bottom: 3.5rem;
    }

    #nome_rag_soc {
        display: flex !important;   /* vince sul d-none (anch'esso !important) */
        position: absolute;
        left: 1.25rem;
        right: 1.25rem;
        bottom: 0.625rem;
        align-items: center;
        padding: 0 !important;      /* annulla pr-2 */
    }
    #nome_rag_soc .col { flex: 1 1 auto; padding: 0 0.5rem 0 0; }
    /* select2 inizializzato a blocco nascosto: width inline inaffidabile */
    #nome_rag_soc .select2-container { width: 100% !important; }
    #nome_rag_soc > .text-muted { white-space: nowrap; }
}

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