/* Transforms tables with class `table-cards-mobile` into stacked cards
   on narrow screens. Each <td> needs a `data-label` attribute naming
   its column (or empty for no label, e.g. actions row). Rows with
   class `detail-row` remain full-width blocks (for expanded content). */

@media (max-width: 767.98px) {
    table.table-cards-mobile,
    table.table-cards-mobile > tbody,
    table.table-cards-mobile > tbody > tr:not(.detail-row),
    table.table-cards-mobile > tbody > tr:not(.detail-row) > td {
        display: block;
        width: 100%;
    }

    table.table-cards-mobile > thead {
        display: none;
    }

    table.table-cards-mobile > tbody > tr:not(.detail-row) {
        border: 1px solid var(--bs-border-color);
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.5rem;
        background: var(--bs-body-bg);
    }

    table.table-cards-mobile > tbody > tr:not(.detail-row) > td {
        border: none !important;
        padding: 0.2rem 0;
        text-align: left;
        white-space: normal !important;
    }

    table.table-cards-mobile > tbody > tr:not(.detail-row) > td[data-label]:not([data-label=""])::before {
        content: attr(data-label) ": ";
        font-weight: 500;
        color: var(--bs-secondary-color);
        font-size: 0.82rem;
        margin-right: 0.4rem;
    }

    /* Detail rows: preserve the existing collapse/expand mechanism from styles.css
       (.detail-row is display:none until .open is added). When open, render the
       single colspan'd cell as a full-width block directly below its parent row. */
    table.table-cards-mobile > tbody > tr.detail-row.open {
        display: block;
        margin-top: -0.25rem;
        margin-bottom: 0.5rem;
    }
    table.table-cards-mobile > tbody > tr.detail-row > td {
        display: block;
        width: 100%;
    }

    /* Actions cells (no data-label or data-label="") get right-aligned */
    table.table-cards-mobile > tbody > tr:not(.detail-row) > td[data-label=""] {
        text-align: right;
        padding-top: 0.4rem;
    }
}