/*
 * Mobile tidy-up for the GPU results / averages pages.
 *
 * Loaded only by the pages carrying the Union / Division / League selectors.
 * Everything that changes layout sits behind a max-width media query, so the
 * desktop rendering is untouched.
 *
 * The approach is deliberately conservative: nothing is hidden or re-ordered.
 * Wide tables keep their natural width and scroll inside their own box, so the
 * page itself never scrolls sideways and the header stays above its control.
 */

/* Long criteria labels wrap instead of forcing the row wider. */
.gpu-wide th {
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
}

@media screen and (max-width: 782px) {

    /* Criteria, filter and race-detail rows: swipe sideways rather than squash
       the dropdowns down to a few unreadable pixels. */
    .gpu-wide {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .gpu-wide th,
    .gpu-wide td {
        font-size: 12px;
        line-height: 1.3;
        padding: 2px 4px;
    }

    .gpu-wide select,
    .gpu-wide input[type="submit"] {
        font-size: 12px;
    }

    /* The results grid is 14-20 columns wide and will never fit a phone.
       DataTables wraps it, so scroll that wrapper instead of the document. */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #result_table {
        width: auto !important;
        min-width: 100%;
    }

    /* Keep cells on one line - a squeezed column that wraps every word into a
       vertical stack is harder to read than a swipe. */
    #result_table th,
    #result_table td {
        white-space: nowrap;
        font-size: 12px;
        padding: 2px 5px;
    }

    /* DataTables' own controls stack awkwardly at this width. */
    .dataTables_length,
    .dataTables_filter {
        float: none;
        text-align: left;
    }

    .dataTables_filter input {
        max-width: 60vw;
    }
}