/* ============================================================================
 * Chronos — responsività mobile PWA (chronos_07_pwa_mobile.md §3.5)
 * Valido per TUTTI i domini (Progetti incluso): caricato globalmente da layout.html.
 * ========================================================================== */

/* Nessun dominio deve forzare lo scroll orizzontale dell'intera pagina. */
html, body { max-width: 100%; overflow-x: hidden; }

/* --- Griglie / tabelle: scroll orizzontale entro il proprio contenitore -----
 * La Core Grid si renderizza in .grid-container; le tabelle generiche e le
 * griglie a div (paradigma C, chronos_06) scrollano invece di rompere il layout. */
.grid-container,
.table-responsive,
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;   /* inerzia su iOS */
}

@media (max-width: 768px) {
    /* La griglia non si comprime sotto una larghezza leggibile: scorre. */
    .grid-container table,
    .table-responsive table {
        min-width: 640px;
    }

    /* Schede record: campi a colonna singola sotto md (chronos_06 §3.4). */
    .wrapper-record .row > [class*="col-"],
    #record-container .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Header di pagina dei domini: titolo e azioni vanno a capo, non si schiacciano. */
    .header-page {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .header-page .col {
        flex: 1 1 100%;
        justify-content: flex-start !important;
    }

    /* Container full-width senza margini sprecati su telefono. */
    .container, .container-fluid { padding-left: .75rem; padding-right: .75rem; }
}

/* --- Target touch: azioni e bottoni comodi al dito (≥ 44px) ------------------ */
@media (max-width: 768px) and (pointer: coarse) {
    .btn,
    .col-actions .row-action,
    .col-actions i,
    .grd-cmd a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}