/* Phones: tables with class "table-stack" turn into one card per row. Cells need data-label. */
@media (max-width: 767.98px) {
    .table-stack { --bs-table-bg: transparent; }
    .table-stack thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack tr {
        background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem;
        margin-bottom: .75rem; padding: .25rem .75rem;
    }
    .table-stack td {
        display: flex; justify-content: space-between; align-items: center; gap: .75rem;
        border: 0; padding: .45rem 0; text-align: right; min-width: 0 !important;
        box-shadow: none; background: transparent;
    }
    .table-stack td + td { border-top: 1px solid var(--bs-border-color-translucent); }
    .table-stack td[data-label]::before {
        content: attr(data-label); font-weight: 600; text-align: left; flex: 0 0 6.5rem;
    }
    .table-stack td .input-group { flex: 1 1 auto; min-width: 0; }
    .table-stack td.actions { justify-content: flex-end; flex-wrap: wrap; }
    .table-stack td.actions .btn { min-height: 2.5rem; }
    .table-stack td.select .form-check-input { width: 1.6rem; height: 1.6rem; margin: 0; }
    .table-stack td.cell-empty { justify-content: flex-start; }
}