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

/* ============================================================================
 * Fatture emesse (invoices_professional/issued_invoices) — vista a schede mobile
 * La griglia è un div-grid Bootstrap (col-* senza breakpoint): sotto md le
 * colonne diventano illeggibili, quindi ogni record diventa una card con
 * label a sinistra e valore a destra. Su desktop il markup resta invariato.
 * ========================================================================== */
/* Etichetta della checkbox: solo mobile; su desktop non deve comparire. */
.issued-invoices-grid .select-mobile-label { display: none; }

@media (max-width: 768px) {
    /* Testata pagina: barra azioni che va a capo invece di schiacciarsi. */
    .header-page .d-flex {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: .4rem;
    }
    .header-page h2 { font-size: 1.2rem; }
    /* Bottoni/azioni a piena larghezza: occupano tutto lo spazio disponibile. */
    .header-page .d-flex > .btn,
    .header-page .d-flex > a.btn {
        flex: 1 1 100%;
        margin-right: 0 !important;
        justify-content: center;
    }
    .header-page .form-check {
        flex: 1 1 100%;
        margin-right: 0 !important;
    }
    /* "Invia a fatele" divide la riga con il check "Mostra bozze". */
    .header-page .d-flex > #btn-send-invoices-to-fatele,
    .header-page .d-flex > .form-check {
        flex: 1 1 0;
        display: flex;
        align-items: center;
    }

    /* Intestazione colonne griglia: nascosta, le label vivono nelle card. */
    .issued-invoices-grid .header-grid { display: none; }

    /* Ogni record → scheda.
     * .record è una .row Bootstrap con margini negativi (--bs-gutter-x): vanno
     * azzerati, altrimenti la card sporge oltre lo schermo e viene tagliata. */
    .issued-invoices-grid .record {
        display: block;
        position: relative;
        --bs-gutter-x: 0;
        margin: 0 0 .6rem 0;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: .55rem .75rem;
        background: #fff;
    }
    .issued-invoices-grid .record.r2 { background: #fafafa; }

    /* Celle su singola riga: label a sinistra, valore a destra. */
    .issued-invoices-grid .record > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .2rem 0;
        text-align: right !important;
        min-width: 0;
        overflow-wrap: anywhere;
        border-bottom: 1px dashed #eee;
    }
    .issued-invoices-grid .record > [class*="col-"]:last-child { border-bottom: 0; }

    .issued-invoices-grid .record > [class*="col-"][data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 600;
        font-size: .8rem;
        color: #6c757d;
        text-align: left;
    }

    /* Periodo: superfluo su mobile, lo togliamo. */
    .issued-invoices-grid .record > .cell-periodo { display: none; }

    /* Checkbox selezione: prima cella del record → riga in cima alla scheda,
     * con etichetta esplicita. Quando non è selezionabile la cella è vuota
     * (solo spazi) e va nascosta: la mostriamo solo se contiene l'input. */
    .issued-invoices-grid .record > .cell-select { display: none; }
    .issued-invoices-grid .record > .cell-select:has(input) {
        display: flex;
        position: static;
        justify-content: flex-start;
        align-items: center;
        gap: .6rem;
        max-width: 100% !important;
        padding: .1rem 0 .4rem;
        margin-bottom: .15rem;
        text-align: left !important;
        border-bottom: 1px solid #e9ecef;
    }
    .issued-invoices-grid .cell-select .form-check-input {
        flex: 0 0 auto;
        width: 1.4rem;
        height: 1.4rem;
        margin: 0;
    }
    .issued-invoices-grid .cell-select .select-mobile-label {
        font-weight: 600;
        font-size: .85rem;
        color: #0d6efd;
    }

    /* Azioni: icone allineate a sinistra, comode al dito. */
    .issued-invoices-grid .record > .cell-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .25rem;
        padding-top: .45rem;
    }
    .issued-invoices-grid .cell-actions .material-symbols-outlined {
        font-size: 26px;
        padding: .15rem;
    }
}

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