/* =====================================================================================
   Sports Standings & Rankings Tables  (rs_sportstables)

   One design for all six tables; each sport has its own accent colour:
     rs_sportstables_1  Football (Soccer)   deep green
     rs_sportstables_2  Basketball          burnt orange
     rs_sportstables_3  Volleyball          navy
     rs_sportstables_4  Generic             slate
     rs_sportstables_5  Handball            purple
     rs_sportstables_6  Rankings            bronze

   The modification marks every cell with its column (st-rank, st-team, st-pts,
   st-form, ...), because the columns move depending on the data. Column styles are
   therefore written as td:has(> .st-pts) and so on.

   To restyle a table, override the --st-* variables on its class, e.g.
     table.tabtable-rs_sportstables_1 { --st-accent: #8b0000; }
   ===================================================================================== */

table[class*="tabtable-rs_sportstables_"] {
    --st-accent: #1f2937;             /* header background */
    --st-accent-text: #ffffff;        /* header text */
    --st-accent-soft: rgba(31, 41, 55, .07);  /* points column */
    --st-text: #1d2733;
    --st-muted: #6b7684;
    --st-line: #e4e8ee;
    --st-stripe: #f8fafc;
    --st-hover: #eef3f9;
    --st-surface: #ffffff;
    --st-radius: 10px;
    --st-win: #1f9d55;
    --st-draw: #9aa4b1;
    --st-loss: #d64545;
    --st-promote: #1f9d55;
    --st-qualify: #2f78d0;
    --st-relegate: #d64545;
    --st-highlight: #fff4cc;
    --st-highlight-line: #f2c94c;

    width: 100%;
    margin: 0 0 1em;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    background: var(--st-surface);
    color: var(--st-text);
    font-size: 15px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
}

/* one accent per sport */
table.tabtable-rs_sportstables_1 { --st-accent: #14532d; --st-accent-soft: rgba(20, 83, 45, .07); }
table.tabtable-rs_sportstables_2 { --st-accent: #9a3412; --st-accent-soft: rgba(154, 52, 18, .07); }
table.tabtable-rs_sportstables_3 { --st-accent: #1e3a8a; --st-accent-soft: rgba(30, 58, 138, .07); }
table.tabtable-rs_sportstables_4 { --st-accent: #1f2937; --st-accent-soft: rgba(31, 41, 55, .07); }
table.tabtable-rs_sportstables_5 { --st-accent: #5b21b6; --st-accent-soft: rgba(91, 33, 182, .07); }
table.tabtable-rs_sportstables_6 { --st-accent: #854d0e; --st-accent-soft: rgba(133, 77, 14, .08); }


/* ---- cells ------------------------------------------------------------------------- */

table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol,
table[class*="tabtable-rs_sportstables_"] tr.tabrow th.tabcol {
    padding: 10px 9px;
    border: 0;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    background: var(--st-surface);
    font-style: normal;
}

table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol {
    border-top: 1px solid var(--st-line);
    font-weight: 400;
}

/* header */
table[class*="tabtable-rs_sportstables_"] tr.tabrow th.tabcol {
    background: var(--st-accent);
    color: var(--st-accent-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding-top: 11px;
    padding-bottom: 11px;
}

table[class*="tabtable-rs_sportstables_"] th.tabcol abbr {
    text-decoration: none;
    border: 0;
    cursor: help;
}

/* rounded corners, drawn on the corner cells so nothing needs overflow: hidden
   (which would stop the position and team columns from sticking on phones) */
table[class*="tabtable-rs_sportstables_"] tr.tabrow:first-child th.tabcol:first-child { border-top-left-radius: calc(var(--st-radius) - 1px); }
table[class*="tabtable-rs_sportstables_"] tr.tabrow:first-child th.tabcol:last-child { border-top-right-radius: calc(var(--st-radius) - 1px); }
table[class*="tabtable-rs_sportstables_"] tr.tabrow:last-child td.tabcol:first-child { border-bottom-left-radius: calc(var(--st-radius) - 1px); }
table[class*="tabtable-rs_sportstables_"] tr.tabrow:last-child td.tabcol:last-child { border-bottom-right-radius: calc(var(--st-radius) - 1px); }

/* zebra rows and hover */
table[class*="tabtable-rs_sportstables_"] tbody tr.tabrow:nth-child(even) td.tabcol {
    background: var(--st-stripe);
}

table[class*="tabtable-rs_sportstables_"] tbody tr.tabrow:hover td.tabcol {
    background: var(--st-hover);
}


/* ---- position ---------------------------------------------------------------------- */

table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-rank),
table[class*="tabtable-rs_sportstables_"] tr.tabrow th.tabcol:has(> .st-h-rank) {
    width: 1%;
    min-width: 44px;
    padding-left: 12px;
    padding-right: 6px;
}

.st-rank {
    display: inline-block;
    min-width: 24px;
    font-weight: 700;
    color: var(--st-muted);
}

/* zones: a coloured bar on the left edge of the row, and the position in that colour */
table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-zone-promote)  { box-shadow: inset 4px 0 0 var(--st-promote); }
table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-zone-qualify)  { box-shadow: inset 4px 0 0 var(--st-qualify); }
table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-zone-relegate) { box-shadow: inset 4px 0 0 var(--st-relegate); }

.st-rank.st-zone-promote  { color: var(--st-promote); }
.st-rank.st-zone-qualify  { color: var(--st-qualify); }
.st-rank.st-zone-relegate { color: var(--st-relegate); }


/* ---- team -------------------------------------------------------------------------- */

table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-team),
table[class*="tabtable-rs_sportstables_"] tr.tabrow th.tabcol:has(> .st-h-team) {
    width: 99%;
    min-width: 150px;
    text-align: left;
}

.st-team {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--st-text);
}

.st-team a {
    color: inherit;
    text-decoration: none;
}

.st-team a:hover {
    text-decoration: underline;
}

.st-logo {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    object-fit: contain;
}



/* ---- numbers ----------------------------------------------------------------------- */

table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-p),
table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-prev-rank),
table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-gb),
table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-home),
table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-away),
table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-conf),
table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-div) {
    color: var(--st-muted);
}

/* the column that decides the table: points (or win % in basketball) */
table[class*="tabtable-rs_sportstables_"] tbody tr.tabrow td.tabcol:has(> .st-pts),
table.tabtable-rs_sportstables_2 tbody tr.tabrow td.tabcol:has(> .st-winpct) {
    background: var(--st-accent-soft);
    font-weight: 800;
    font-size: 1.04em;
    color: var(--st-text);
}


/* a highlighted team (highlight=... in the ruleset) */
table[class*="tabtable-rs_sportstables_"] tbody tr.tabrow:has(.st-highlight) td.tabcol {
    background: var(--st-highlight);
}

table[class*="tabtable-rs_sportstables_"] tbody tr.tabrow:has(.st-highlight) td.tabcol:last-child {
    box-shadow: inset -4px 0 0 var(--st-highlight-line);
}

.st-team.st-highlight {
    font-weight: 800;
}

/* signed differences: goal, point and set difference */
.st-pos  { color: var(--st-win); font-weight: 600; }
.st-neg  { color: var(--st-loss); font-weight: 600; }
.st-zero { color: var(--st-muted); }


/* ---- form: recent results as badges ------------------------------------------------ */

.st-form {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
}

.st-res {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: default;
}

.st-res-w { background: var(--st-win); }
.st-res-d { background: var(--st-draw); }
.st-res-l { background: var(--st-loss); }

/* the most recent result (the last one) gets a ring */
.st-res-w:last-child { box-shadow: 0 0 0 2px var(--st-surface), 0 0 0 3px var(--st-win); }
.st-res-d:last-child { box-shadow: 0 0 0 2px var(--st-surface), 0 0 0 3px var(--st-draw); }
.st-res-l:last-child { box-shadow: 0 0 0 2px var(--st-surface), 0 0 0 3px var(--st-loss); }


/* ---- streak and movement ----------------------------------------------------------- */

.st-streak   { font-weight: 700; }
.st-streak-w { color: var(--st-win); }
.st-streak-l { color: var(--st-loss); }
.st-streak-d { color: var(--st-muted); }

.st-movement {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
}

.st-movement .st-arrow {
    font-size: .7em;
}

.st-up   { color: var(--st-win); }
.st-down { color: var(--st-loss); }
.st-same { color: var(--st-muted); font-weight: 400; }


/* ---- phones: smaller, and position + team stay in view while the rest scrolls ------ */

@media (max-width: 700px) {

    table[class*="tabtable-rs_sportstables_"] {
        font-size: 13px;
    }

    table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol,
    table[class*="tabtable-rs_sportstables_"] tr.tabrow th.tabcol {
        padding: 8px 6px;
    }

    table[class*="tabtable-rs_sportstables_"] tr.tabrow th.tabcol {
        font-size: 11px;
        letter-spacing: .03em;
    }

    table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-rank),
    table[class*="tabtable-rs_sportstables_"] tr.tabrow th.tabcol:has(> .st-h-rank) {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        padding-left: 8px;
        padding-right: 2px;
    }

    table[class*="tabtable-rs_sportstables_"] tr.tabrow td.tabcol:has(> .st-team),
    table[class*="tabtable-rs_sportstables_"] tr.tabrow th.tabcol:has(> .st-h-team) {
        position: sticky;
        left: 36px;
        z-index: 2;
        min-width: 120px;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 6px 0 8px -6px rgba(16, 24, 40, .18);
    }

    .st-team {
        gap: 6px;
        max-width: 100%;
    }

    .st-team-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .st-logo {
        width: 18px;
        height: 18px;
    }

    .st-res {
        width: 17px;
        height: 17px;
        font-size: 10px;
        border-radius: 4px;
    }
}


/* ---- print ------------------------------------------------------------------------- */

@media print {
    table[class*="tabtable-rs_sportstables_"] {
        box-shadow: none;
    }

    table[class*="tabtable-rs_sportstables_"] tr.tabrow th.tabcol {
        background: #ffffff;
        color: #000000;
        border-bottom: 2px solid #000000;
    }

    .st-res {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}