/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE TABLE — Mangaon Recycleers
   Decision: keep the SAME desktop-style table (columns side-by-side) on
   mobile/tablet too — just make it scroll horizontally with a smoother
   touch experience, instead of stacking rows into cards.
═══════════════════════════════════════════════════════════════════════════ */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
    scrollbar-width: thin;
}

/* Tighten up the table a bit on small/medium screens so more columns are
   visible before the user needs to scroll, and make touch-scrolling the
   table feel natural (no accidental vertical/horizontal scroll fighting). */
@media (max-width: 900px) {
    .table-modern {
        font-size: .8rem;
    }
    .table-modern thead th,
    .table-modern tbody td {
        padding: .55rem .7rem;
    }
}

@media (max-width: 576px) {
    .table-modern {
        font-size: .76rem;
    }
    .table-modern thead th,
    .table-modern tbody td {
        padding: .5rem .6rem;
    }
}

/* Visual hint that the table scrolls horizontally: a soft fade on the
   right edge of the scroll container, shown only while there's more
   content to scroll to (toggled by responsive-table.js). */
@media (max-width: 900px) {
    .table-wrap {
        position: relative;
    }
    .table-wrap.has-more-right::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(to right, transparent, rgba(15, 23, 42, 0.08));
    }
}