/* ============================================================
   mobile.css — ottimizzazioni per schermi piccoli
   Trasforma le tabelle con classe .table-mobile-cards in schede
   impilate (niente scroll orizzontale) e compatta le card.
   ============================================================ */
@media (max-width: 768px) {

    /* Riduce lo spazio sprecato per limitare lo scroll verticale */
    .content-card { padding: 16px !important; }

    /* --- Tabelle larghe -> schede impilate --- */
    table.table-mobile-cards { border: 0 !important; }
    table.table-mobile-cards thead { display: none; }                 /* niente intestazione */
    table.table-mobile-cards tbody,
    table.table-mobile-cards tfoot,
    table.table-mobile-cards tr,
    table.table-mobile-cards td { display: block; width: 100%; }

    table.table-mobile-cards tr {
        border: 1px solid #e9ecef;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 6px 14px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    table.table-mobile-cards tfoot tr {
        background: #f1f3f5;
        border: 2px solid #dee2e6;
    }

    table.table-mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right !important;
        padding: 7px 0 !important;
        border: 0;
        border-bottom: 1px solid #f1f3f5;
    }
    table.table-mobile-cards tr td:last-child { border-bottom: 0; }

    /* Etichetta della colonna a sinistra di ogni valore */
    table.table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #6c757d;
        text-transform: uppercase;
        font-size: 0.72rem;
        letter-spacing: 0.3px;
        text-align: left;
        flex-shrink: 0;
    }

    /* Celle vuote (es. totali senza valore): nascoste */
    table.table-mobile-cards td:empty { display: none; }

    /* Cella azioni: pulsanti allineati a destra, etichetta a sinistra */
    table.table-mobile-cards td.cella-azioni { justify-content: flex-end; flex-wrap: wrap; }
    table.table-mobile-cards td.cella-azioni::before { margin-right: auto; }

    /* Quando la tabella è a schede, il wrapper non deve scrollare in orizzontale */
    .table-responsive { overflow-x: visible !important; }
    .table-responsive:has(table.table-mobile-cards) { border: 0 !important; }
}