body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f0f4f7;
    margin: 0;
    padding: 5px;
    text-align: center;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    margin-bottom: 10px;
    background-color: #fff;
}

    .leaderboard-table tbody tr {
        border-bottom: 1px solid #000;
    }

    .leaderboard-table td {
        padding: 3px;
        text-align: left;
    }

    .leaderboard-table .division-header {
        background-color: #e1e1e1;
        font-weight: bold;
        text-align: center;
    }

.header-event {
    background-color: #0056b3;
    color: #FFFFFF;
    padding: 12px;
    margin: 0px;
    text-align: center;
    font-weight: 700;
    font-size: 1.6em;
}

.event-details {
    text-align: center;
    padding: 0px;
    color: #efefef;
    font-size: .5em;
}

.head-link {
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    font-size: 1em;
}

.head-link-selected {
    font-weight: 500;
    color: #bcbcbc;
    text-decoration: none;
}

.header-entry {
    background-color: #fff;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


@media screen and (max-width: 500px) {
    /* Nationality flag: compact on mobile so dense score rows don't overflow/clip (added 2026-07-31) */
    img[src*="flagcdn"] {
        width: 12px !important;
        height: 9px !important;
        margin-right: 2px !important;
        vertical-align: middle;
    }
    .data-value { overflow-wrap: break-word; }
    /* Force table to viewport width so NO column is ever cut off on tiny screens (Galaxy Fold / iPhone SE) */
    .sc-fixed { table-layout: fixed; width: 100%; }
    /* Mobile-only column widths via colgroup (enforced by table-layout:fixed); desktop untouched */
    .sc-col:nth-child(1) { width: 10%; }
    .sc-col:nth-child(2) { width: 26%; }
    .sc-col:nth-child(3) { width: 24%; }
    .sc-col:nth-child(4) { width: 13%; }
    .sc-col:nth-child(5) { width: 13%; }
    .sc-col:nth-child(6) { width: 14%; }

    .data-value, .data-points { box-sizing: border-box; }


    /* Overall ~1.5-2pt smaller fonts on mobile so rows (incl. rider name + flag) don't cut off.
       Cells/headers inherit this, so the whole widget scales down uniformly. */
    body {
        font-size: 14px;
    }

    header {
        width: 100%;
    }

    .head td {
        position: relative;
        display: block;
        white-space: nowrap;
        width: 100%;
        clear: both;
        column-span: all;
    }

    .data-value td {
        border-top: 0px solid #ddd; /* Add border to separate values */
        width: auto; /* content-sized so place/pinny stay narrow and names get room */
        padding: 3px 3px 0px 0; /* Padding for spacing */
        text-align: left;
        box-sizing: border-box;
    }

    .data-value {
        border-top: 0px solid #ddd; /* Add border to separate values */
        width: auto;
        padding: 3px 3px 0px 0; /* Padding for spacing */
        text-align: right;
        box-sizing: border-box;
    }

    .leaderboard-table .division-header {
        background-color: #0056b3;
        color: #fff;
        padding: 10px;
        text-align: center;
    }

    .leaderboard-table .team-header {
        background-color: #458cd9;
        color: #fff;
        padding: 10px;
        text-align: center;
    }

    .leaderboard-table thead tr {
        display: none;
    }

    .data-label {
        display: none;
    }


    .header-event {
        background-color: #0056b3;
        color: #FFFFFF;
        padding: 12px 0px 12px 0px;
        margin: 0px;
        text-align: center;
        font-weight: 700;
        font-size: 1.6em;
    }
}

@media screen and (min-width: 501px) {
    .leaderboard-table, .leaderboard-table tbody, .leaderboard-table tr, .leaderboard-table td {
        display: table;
        margin-bottom:10px;
    }

        .leaderboard-table thead {
            display: table-header-group;
        }

        .leaderboard-table tbody {
            display: table-row-group;
        }

        .leaderboard-table tr {
            display: table-row;
        }

        .leaderboard-table td, .leaderboard-table th {
            display: table-cell;
        }

        .leaderboard-table td, .leaderboard-table th {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }

        .leaderboard-table .division-header {
            background-color: #0056b3;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        .leaderboard-table .team-header {
            background-color: #458cd9;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
}