/* ==========================*/
/* EduDisplay Beheer Table Mobile HScroll CSS */
/* Update: 2026-08-20 */
/* ==========================*/
/* Hoort bij: beheer-tabellen, alleen telefoon (max-width: 767px) */
/* Hint en fade rechts. Op desktop geen extra UI. */
/* Overflow-x in de viewport houdt een te brede tabel in het vak (ook desktop). */

.table-mobile-hscroll-hint {
    display: none;
    color: #2563eb; /* blue-600: hint, geen bodytekst */
}

html.dark .table-mobile-hscroll-hint {
    color: #93c5fd; /* blue-300: leesbaar op donkere panelen */
}

.table-mobile-hscroll-frame {
    position: relative;
}

.table-mobile-hscroll-viewport {
    overflow-x: auto;
}

.table-mobile-hscroll-frame::after {
    content: none;
}

@media (max-width: 767px) {
    .table-mobile-hscroll-viewport {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .table-mobile-hscroll-frame::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 2rem;
        pointer-events: none;
        opacity: 0;
        z-index: 3;
        background: linear-gradient(to left, rgb(255 255 255), transparent);
        transition: opacity 0.15s ease;
    }

    html.dark .table-mobile-hscroll-frame::after {
        background: linear-gradient(to left, rgb(31 41 55), transparent);
    }

    .table-mobile-hscroll.is-overflowing .table-mobile-hscroll-hint {
        display: block;
        margin: 0;
        padding: 0.4rem 0.75rem 0.35rem 0.5rem;
    }

    .table-mobile-hscroll.is-overflow-right .table-mobile-hscroll-frame::after {
        opacity: 1;
    }
}