/* ===========================================================
   TABLES
   [VERSION: 2026-08-24-v2 — thead/tbody display:table REMOVED,
   this is what fixes the R/B/4s/6s/SR column misalignment bug.
   If you inspect this file in DevTools and don't see this comment,
   the browser is loading an OLD cached copy — hard refresh.]
===========================================================*/

table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--fs-small);
}

thead th{
    text-align:left;

    color:var(--color-text-muted);
    font-weight:var(--fw-medium);
    font-size:var(--fs-tiny);
    text-transform:uppercase;
    letter-spacing:0.04em;

    padding:var(--space-3);
    border-bottom:1px solid var(--color-border);
}

tbody td{
    padding:var(--space-3);
    border-bottom:1px solid var(--color-border);
}

tbody tr:hover{
    background:var(--color-surface-alt);
}

tbody tr:last-child td{
    border-bottom:none;
}
/* ===========================================================
   RESPONSIVE
   Data tables (scorecards, innings, points table, etc.) don't
   reflow to a narrow screen — they need to scroll horizontally
   instead of forcing the whole page wider. Making the <table>
   itself the scroll container (rather than requiring every page
   to wrap each table in a div) covers every table site-wide,
   including ones already shipped without a wrapper.
===========================================================*/

@media (max-width: 768px){
    table{
        display:block;
        max-width:100%;
        overflow-x:auto;
        white-space:nowrap;
        -webkit-overflow-scrolling:touch;
        font-size:12.5px;
    }

    table th,
    table td{
        padding:8px 6px;
    }
}