/**
 * Shared table responsive utilities (Bootstrap 5 breakpoints).
 * Use with data-label on <td> for mobile card rows.
 */

:root {
    --table-scroll-hint: "Swipe horizontally to see more →";
}

.table-scroll-wrap,
.table-card-wrap,
.admin-deposits-table-wrap,
.admin-members-table-wrap,
.admin-tickets-table-wrap,
.seller-dumps-table-wrap,
.seller-base-table-wrap,
.billing-paylog-shell {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .table-scroll-wrap--hint::after,
    .table-card-wrap--hint::after,
    .admin-deposits-table-wrap::after,
    .admin-members-table-wrap::after,
    .admin-tickets-table-wrap::after,
    .seller-dumps-table-wrap::after,
    .seller-base-table-wrap::after,
    .billing-levels-table-wrap::after,
    .billing-page .billing-paylog-wrap::after,
    .billing-paylog-shell::after {
        content: var(--table-scroll-hint);
        display: block;
        padding: 0.35rem 0.75rem 0.5rem;
        font-size: 0.68rem;
        letter-spacing: 0.02em;
        color: rgba(230, 220, 198, 0.45);
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .table-responsive-cards thead,
    .table-card-wrap--cards .table-card thead,
    .table-card-wrap--cards thead {
        display: none;
    }

    .table-responsive-cards tbody tr,
    .table-card-wrap--cards .table-card__row,
    .table-card-wrap--cards tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid rgba(212, 175, 55, 0.18);
        border-radius: 0.65rem;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.22);
    }

    .table-responsive-cards tbody td,
    .table-card-wrap--cards .table-card__row td,
    .table-card-wrap--cards tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.65rem;
        padding: 0.55rem 0.85rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        text-align: right;
        white-space: normal;
    }

    .table-responsive-cards tbody td:last-child,
    .table-card-wrap--cards .table-card__row td:last-child,
    .table-card-wrap--cards tbody td:last-child {
        border-bottom: none;
    }

    .table-card__cell--actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .table-card__cell--stack {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .table-responsive-cards tbody td::before,
    .table-card-wrap--cards .table-card__row td::before,
    .table-card-wrap--cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        font-weight: 600;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: rgba(230, 220, 198, 0.55);
        text-align: left;
    }

    .table-responsive-cards tbody td[data-label=""]::before,
    .table-responsive-cards tbody td:not([data-label])::before,
    .table-card-wrap--cards td[data-label=""]::before,
    .table-card-wrap--cards td:not([data-label])::before {
        content: none;
    }
}