/*
 * Responsive data tables (Phase 2).
 *
 * Several admin and policy pages render wide data tables that are not wrapped
 * in a horizontally scrolling container. On a phone those tables used to force
 * the whole page to scroll sideways, breaking the layout.
 *
 * Turning the table into a block-level element with its own horizontal scroll
 * makes it scroll on its own, so the page body never overflows. This is scoped
 * to small screens only, so desktop rendering is completely unchanged.
 *
 * Tables that are already inside an .overflow-x-auto / .table-container wrapper
 * are unaffected in practice: they simply scroll within themselves instead.
 * Add the class "table-no-scroll" to opt a table out of this behaviour.
 */

@media (max-width: 768px) {
    table:not(.table-no-scroll) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Thin, unobtrusive scrollbar consistent with the admin panel styling */
    table:not(.table-no-scroll)::-webkit-scrollbar {
        height: 6px;
    }

    table:not(.table-no-scroll)::-webkit-scrollbar-track {
        background: transparent;
    }

    table:not(.table-no-scroll)::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.15);
        border-radius: 20px;
    }
}