/* ── Telefoni, pieghevoli e tablet: regole comuni a tutte le pagine ─────────
   Caricato da layouts/shared/_scripts dopo style.bundle.css e i fogli
   condivisi, quindi vince sui valori Metronic a parita' di specificita'.
   Qui stanno SOLO correzioni di geometria valide ovunque (misure di tocco,
   tabelle e calendari che non devono uscire dal loro riquadro): colori e
   temi restano in ric_brand_tokens.css e ric_dark.css. Sopra i 1024px e con
   il mouse non cambia niente. */

/* 1. Bersagli di tocco da 44px (Apple HIG / WCAG 2.5.5) per i comandi
   principali, solo dove si tocca col dito: Metronic disegna pulsanti da 40px,
   btn-sm da 32px, select e campi «-sm» da 32px, le X dei modali da 16px.
   align-content centra il testo nei pulsanti inline-block resi piu' alti. */
@media (max-width: 1023.98px) and (pointer: coarse) {
    .btn:not(.btn-link):not(.btn-text):not(.btn-flush) {
        min-height: 44px;
        align-content: center;
    }
    .btn.btn-icon:not(.btn-flush),
    .ric-row-action-placeholder {
        min-width: 44px;
        min-height: 44px;
    }
    .ric-row-actions-menu .dropdown-item {
        min-height: 44px;
    }
    .form-control:not(.form-control-flush):not([type="color"]):not([type="range"]),
    .form-select:not(.form-select-flush),
    .select2-container .select2-selection--single,
    .input-group > .input-group-text {
        min-height: 44px;
    }
    .accordion-button,
    .nav-tabs .nav-link,
    .nav-pills .nav-link,
    .nav-line-tabs .nav-link,
    .nav-stretch .nav-link {
        min-height: 44px;
        align-content: center;
    }
    .page-link,
    .pagination .page-item .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Cerchietti delle immagini (cambia / togli, 25-30px sopra l'anteprima):
       restano disegnati piccoli, ma l'area che risponde al dito arriva a 45px. */
    .btn.btn-icon.btn-circle:is(.w-25px, .w-30px) {
        position: relative;
        min-width: 0;
        min-height: 0;
    }
    .btn.btn-icon.btn-circle:is(.w-25px, .w-30px)::after {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 50%;
    }
    /* Zoom delle mappe Leaflet (Personale: posizione dei dipendenti): 30px. */
    .leaflet-touch .leaflet-bar a {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
    .btn-close {
        box-sizing: border-box;
        min-width: 44px;
        min-height: 44px;
        background-position: center;
    }
}

/* 2. FullCalendar, vista elenco (Agenda / Settimana al telefono): il titolo
   degli eventi personalizzati e' su una riga con «…» (text-truncate), ma in
   una cella di tabella senza larghezza la riga allargava la tabella oltre il
   calendario e i titoli finivano tagliati fuori dal bordo destro. La cella
   del titolo prende lo spazio rimasto e tronca dentro di esso. */
.fc .fc-list-table td.fc-list-event-title {
    width: 100%;
    max-width: 0;
    overflow: hidden;
}

/* 3. Testi per i lettori di schermo dentro le tabelle scorrevoli: .visually-hidden
   e' position:absolute senza top/left, quindi resta dove sarebbe nel flusso
   (in fondo a una riga larga) e, se nessun antenato e' posizionato, non viene
   tagliato dal contenitore che scorre: allargava la pagina di 200-260px
   (Piani rateali tra 768 e 1280px). Ancorato in alto a sinistra non sporge. */
.table-responsive :is(.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within)) {
    top: 0;
    left: 0;
}

/* 4. Pulsanti flottanti (telefono VoIP e Nimbo) sopra i 1200px: senza barra
   rapida in basso il footer e' alto 68px e il telefono parte a 156px dal
   bordo, quindi a fine pagina copriva l'ultimo pulsante a destra (Continua
   della Previdenza, paginazione dei Professionisti). Sotto i 1200px il footer
   e la barra rapida lasciano gia' lo spazio. */
@media (min-width: 1200px) {
    body:has(#ric-as-launcher) #kt_content {
        padding-bottom: 32px;
    }
    body:has(#voip-dial-fab) #kt_content {
        padding-bottom: 96px;
    }
}

/* 5. Intestazioni di card e barre degli strumenti al telefono: Metronic manda
   a capo la .card-header ma non .card-title / .card-toolbar ne' le righe
   d-flex al loro interno, e nemmeno la .toolbar delle pagine di
   amministrazione. Filtri, ricerca e pulsanti in fila uscivano dallo schermo
   (Modulistica, Licenze, Impostazioni di sistema). flex-wrap cambia qualcosa
   solo quando la riga non ci sta; row-gap distanzia le righe nuove. */
@media (max-width: 767.98px) {
    .card-header > .card-title,
    .card-header > .card-toolbar,
    .card-header > .card-title > .d-flex,
    .card-header > .card-toolbar > .d-flex,
    .toolbar > .container-fluid.flex-stack,
    .toolbar > .container-fluid.flex-stack > .d-flex {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    .card-header > .card-title,
    .card-header > .card-toolbar {
        min-width: 0;
        max-width: 100%;
    }
}

/* 6. Schede Metronic a riga unica (.nav-line-tabs.flex-nowrap: Funerali per
   sede, Modulistica aziendale/predefinita, Fatture in Cloud): con
   flex-nowrap le voci restavano affiancate ma le etichette andavano a capo
   («Moduli / Aziendali 4»). Al telefono ogni scheda resta su una riga e la
   barra scorre in orizzontale, come la striscia degli step del funerale e le
   .ric-page-tabs-scroll. */
@media (max-width: 767.98px) {
    .nav-line-tabs.flex-nowrap {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }
    .nav-line-tabs.flex-nowrap > .nav-item {
        flex: 0 0 auto;
    }
    .nav-line-tabs.flex-nowrap .nav-link {
        white-space: nowrap;
    }
}