/* ==========================================================================
   Mobile horizontal scrolling
   --------------------------------------------------------------------------
   Wide tables and card rows stay wide on phones and scroll sideways inside
   their own container, with a visible styled scrollbar so it is obvious the
   content continues. Nothing is redesigned or re-laid-out.

   Usage:  <div class="ictc-scroll-x"> ...wide content... </div>
           (Bootstrap's .table-responsive is picked up automatically too.)
   ========================================================================== */

.ictc-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;                       /* Firefox */
    scrollbar-color: #0033a0 #e6ebf5;            /* thumb, track */
}

/* Keep the page itself from scrolling sideways because of one wide child. */
body {
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Styled scrollbar — WebKit / Blink
   -------------------------------------------------------------------------- */

.ictc-scroll-x::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.ictc-scroll-x::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #e6ebf5;
    border-radius: 8px;
}

.ictc-scroll-x::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #0033a0;
    border-radius: 8px;
}

.ictc-scroll-x::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #5bd1d7;
}

/* --------------------------------------------------------------------------
   Phones and small tablets
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Bootstrap's responsive wrapper gets the same treatment and a visible bar.
       On touch devices the bar is usually hidden until you scroll, so it is
       forced on here. */
    .table-responsive,
    .ictc-scroll-x {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #0033a0 #e6ebf5;
        padding-bottom: 6px;                     /* room for the bar */
    }

    .table-responsive::-webkit-scrollbar,
    .ictc-scroll-x::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 8px;
        display: block;
    }

    /* Tables must not squash: let them keep a usable width and scroll. */
    .table-responsive > .table,
    .ictc-scroll-x > .table,
    .ictc-scroll-x table {
        min-width: 640px;
        margin-bottom: 0;
    }

    .ictc-scroll-x .course-rounds-table {
        min-width: 560px;
    }

    /* Wide card rows (category listings, course grids) scroll as one strip
       instead of stacking into a very long column. Opt in per row with
       .ictc-scroll-row so existing stacked layouts are untouched. */
    .ictc-scroll-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        scrollbar-width: thin;
        scrollbar-color: #0033a0 #e6ebf5;
    }

    .ictc-scroll-row > * {
        flex: 0 0 78%;
        max-width: 78%;
        scroll-snap-align: start;
    }

    .ictc-scroll-row::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 8px;
        display: block;
    }

    .ictc-scroll-row::-webkit-scrollbar-track {
        background: #e6ebf5;
        border-radius: 8px;
    }

    .ictc-scroll-row::-webkit-scrollbar-thumb {
        background: #0033a0;
        border-radius: 8px;
    }

    /* A small hint that there is more to the side. Sits above the scrollbar. */
    .ictc-scroll-hint {
        display: block;
        font-size: 0.75rem;
        color: #6b7a90;
        margin-bottom: 0.35rem;
    }

    .ictc-scroll-hint::after {
        content: " \203A\203A";                  /* two chevrons */
        letter-spacing: 1px;
    }

    [dir="rtl"] .ictc-scroll-hint::after {
        content: " \2039\2039";
    }

    /* ----------------------------------------------------------------------
       Long tables (.ictc-scroll-long): a mirrored scrollbar above the table
       (added by mobile-scroll.js) and the first column pinned while swiping,
       so the row's name stays readable next to the scrolled-in columns.
       ---------------------------------------------------------------------- */

    .ictc-scroll-hint {
        font-size: 0.85rem;
        font-weight: bold;
        color: #0033a0;
    }

    /* Drawn by hand rather than a native scrollbar: phones hide native bars
       until the user is already swiping. Padding enlarges the touch target. */
    .ictc-scroll-top {
        position: relative;
        height: 8px;
        margin: 6px 0 10px;
        background: #e6ebf5;
        border-radius: 8px;
        touch-action: none;
        cursor: pointer;
    }

    .ictc-scroll-top::before {
        content: "";
        position: absolute;
        inset: -10px 0;                          /* bigger tap area */
    }

    .ictc-scroll-thumb {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: #0033a0;
        border-radius: 8px;
    }

    [dir="rtl"] .ictc-scroll-thumb {
        left: auto;
        right: 0;
    }

    /* The theme clips the table for rounded corners, which would also stop
       position: sticky from working inside it. */
    .ictc-scroll-long > .table {
        overflow: visible !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    .ictc-scroll-long > .table > thead > tr > th:first-child,
    .ictc-scroll-long > .table > tbody > tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        min-width: 150px !important;
        max-width: 150px;
        box-shadow: 4px 0 6px -2px rgba(0, 51, 160, 0.18);
    }

    [dir="rtl"] .ictc-scroll-long > .table > thead > tr > th:first-child,
    [dir="rtl"] .ictc-scroll-long > .table > tbody > tr > td:first-child {
        left: auto;
        right: 0;
        box-shadow: -4px 0 6px -2px rgba(0, 51, 160, 0.18);
    }

    .ictc-scroll-long > .table > tbody > tr > td:first-child {
        background: #fff;
    }
}

@media (min-width: 769px) {
    /* The hint is only meaningful on touch-sized screens. */
    .ictc-scroll-hint {
        display: none;
    }
}