/* =============================================================================
   Matchup tables: the "soft tint" look (Zach, 2026-10-29)
   -----------------------------------------------------------------------------
   The matchup page's tables (Team Comparison Stats, Records, ATS Range, On/Off,
   Next Player Up, Injury Report, My Bets) and its two game lists (Schedules and
   Historical Matchups). Until that day every cell had a grid border, the rows
   were striped and a rank colour filled its cell edge to edge.

   - Hairlines between rows only, no stripes, small uppercase grey headers.
   - A rank colour (.rankcolor1-16, front.css) is a softened rounded tile.
   - A game list is a stack of rounded cards, one a game (its two lines share
     one card and one hover); the summaries are darker cards under a cut line.
   - .gr-chip is a figure's tile: Margin and Act Total
     (matchup/includes/bet-game-row-cells.php), a bet's result (bet-my-bets.php).

   Which tables: every Bootstrap .table but the odds board (.odds-table). The
   sports print their stats as .table-sm, .table.splits (football, MLB) or a
   plain .table (MLB's pitcher tables); MLB's Regression card (.full-table)
   and rating table are designs of their own and not .table.

   Scope: .tmb-mt alone. It is on the matchup page's and admin/bet's
   .content-wrapper, and round every game section a my-dashboards widget
   renders (widget-render.php, display: contents). The same classes elsewhere
   (the schedule grid's rank colours, Player Stats) are untouched.
   ========================================================================== */

/* ================================ Every table ============================== */

.tmb-mt table.table:not(.odds-table) {
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.tmb-mt table.table.table-bordered { border: 0 !important; }
.tmb-mt table.table:not(.odds-table) > :is(thead, tbody, tfoot) > tr > :is(th, td) { border: 0 !important; }

.tmb-mt table.table:not(.odds-table) > thead > tr > th {
    background: #fff !important;
    color: var(--tmb-gray-600) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    vertical-align: bottom;
    box-shadow: inset 0 -1px 0 var(--tmb-gray-400) !important;
}
.tmb-mt table.table:not(.odds-table) > thead > tr > th small {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--tmb-gray-500);
}

/* ============================ Stat and list tables ========================= */

.tmb-mt table.table:not(.odds-table):not(.sched-table) > tbody > tr > td {
    border-bottom: 1px solid var(--tmb-gray-300) !important;
    font-weight: 400;
    color: var(--tmb-gray-900);
    padding: 7px 8px !important;
}
.tmb-mt table.table:not(.odds-table):not(.sched-table) > tbody > tr:last-child > td { border-bottom: 0 !important; }
/* no stripes (front.css stripes every tr:nth-child(2n), Bootstrap the odd ones) */
.tmb-mt table.table:not(.odds-table):not(.sched-table) > tbody > tr:nth-child(n) { background-color: transparent !important; }
.tmb-mt table.table:not(.odds-table):not(.sched-table) > tbody > tr:hover { background-color: var(--tmb-gray-100) !important; }
.tmb-mt table.table:not(.odds-table) tbody tr:hover > td { box-shadow: none; }   /* layout-matchup-sections.css's per-line shade */

/* Team | Stat | Team: the stat's name in the middle is a label, not a figure */
.tmb-mt table.table:not(.odds-table) > tbody > tr:has(> td:nth-child(3):last-child) > td:nth-child(2) {
    color: var(--tmb-gray-700);
    font-weight: 500;
    font-size: 11.5px;
}
.tmb-mt table.table:not(.odds-table) td.sticky-column { font-weight: 600; }

/* A situation that does not apply tonight (records, ATS Range): grey text, no fill */
.tmb-mt table.table:not(.odds-table) td.neutral {
    background: transparent !important;
    color: var(--tmb-gray-500) !important;
}

/* A situation that applies tonight with no game in it yet (0-0-0, .activesit
   with no rank colour): a light grey tile, so it reads as "nothing yet", not
   as a blank cell (Zach, 2026-10-29). */
.tmb-mt table.table:not(.odds-table) td.activesit:not([class*="rankcolor"]) {
    background-color: var(--tmb-gray-300) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
    border-radius: 6px;
    color: var(--tmb-gray-600) !important;
}

/* ---------- rank colours as soft tiles ---------- */
.tmb-mt td.rankcolor1  { --rc: var(--tmb-good-1); }
.tmb-mt td.rankcolor2  { --rc: var(--tmb-good-2); }
.tmb-mt td.rankcolor3  { --rc: var(--tmb-good-3); }
.tmb-mt td.rankcolor4  { --rc: var(--tmb-good-4); }
.tmb-mt td.rankcolor5  { --rc: var(--tmb-good-5); }
.tmb-mt td.rankcolor6  { --rc: var(--tmb-good-6); }
.tmb-mt td.rankcolor7  { --rc: var(--tmb-good-7); }
.tmb-mt td.rankcolor8  { --rc: var(--tmb-good-8); }
.tmb-mt td.rankcolor9  { --rc: var(--tmb-bad-1); }
.tmb-mt td.rankcolor10 { --rc: var(--tmb-bad-2); }
.tmb-mt td.rankcolor11 { --rc: var(--tmb-bad-3); }
.tmb-mt td.rankcolor12 { --rc: var(--tmb-bad-4); }
.tmb-mt td.rankcolor13 { --rc: var(--tmb-bad-5); }
.tmb-mt td.rankcolor14 { --rc: var(--tmb-bad-6); }
.tmb-mt td.rankcolor15 { --rc: var(--tmb-bad-7); }
.tmb-mt td.rankcolor16 { --rc: var(--tmb-bad-8); }

/* On / Off Court's net cells (onoff-minutes.css), the same tiles */
.tmb-mt .tmb-onoff td.onoff-pos    { --rc: var(--tmb-good-7); }
.tmb-mt .tmb-onoff td.onoff-pos.s2 { --rc: var(--tmb-good-4); }
.tmb-mt .tmb-onoff td.onoff-pos.s3 { --rc: var(--tmb-good-1); }
.tmb-mt .tmb-onoff td.onoff-neg    { --rc: var(--tmb-bad-1); }
.tmb-mt .tmb-onoff td.onoff-neg.s2 { --rc: var(--tmb-bad-3); }
.tmb-mt .tmb-onoff td.onoff-neg.s3 { --rc: var(--tmb-bad-5); }

.tmb-mt table.table:not(.odds-table) td:is([class*="rankcolor"], .onoff-pos, .onoff-neg) {
    background-color: color-mix(in srgb, var(--rc), white 45%) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
    border-radius: 6px;
}
.tmb-mt table.table:not(.odds-table) td[class*="rankcolor"] small {
    color: var(--tmb-gray-600);
    font-size: 10px;
}
/* A figure's league place, "6th" (tmbRankHtml(), bet-rank-html.php): small and
   grey after the figure, in every table that prints one. The first selector
   matches the rank tile's rule above, so it wins inside a coloured cell too.
   The cell's own text colour, faded: a fixed light grey vanished on the
   darkest red tiles. */
.tmb-mt table.table:not(.odds-table) td small.tmb-rank,
.tmb-mt small.tmb-rank {
    color: inherit;
    opacity: .55;
    font-size: 9px;
    font-weight: 400;
    margin-left: 1px;
    white-space: nowrap;
}

/* ---------- Injury Report and My Bets ---------- */
.tmb-mt [id^="injury-report-"] .badge { border-radius: 6px !important; font-weight: 600; }
/* a row's status (Out, Questionable, Available ...) fills its cell like a rank tile;
   the tint and text colour are the cell's own (bet-injury-report.php's map) */
.tmb-mt table.table:not(.odds-table) td.inj-status {
    box-shadow: inset 0 0 0 2px #fff !important;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.tmb-mt table.table:not(.odds-table) td.mb-bet { font-weight: 600; }
.tmb-mt table.table:not(.odds-table) td.mb-bet .text-muted { font-weight: 400; color: var(--tmb-gray-600) !important; }
.tmb-mt [id^="my-bets-"] table td { vertical-align: middle; }

/* ================================ Figure tiles ============================= */

.tmb-mt .gr-chip {
    display: inline-block;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 11.5px;
    line-height: 16px;
}
.tmb-mt .gr-chip small { font-weight: 400; opacity: .75; font-size: 10px; }
.tmb-mt .gr-chip b { font-weight: 700; margin-right: 1px; }
.tmb-mt .gr-good { background: color-mix(in srgb, var(--tmb-good-1), white 35%); color: var(--tmb-green-700); }
.tmb-mt .gr-bad  { background: color-mix(in srgb, var(--tmb-bad-3), white 35%); color: var(--tmb-red-700); }
.tmb-mt .gr-flat,
.tmb-mt .gr-open { background: var(--tmb-gray-100); color: var(--tmb-gray-700); }
.tmb-mt .sched-table .gr-flat { background: #fff; }   /* on a grey card */
/* the tile carries the colour: the cell's own text colour steps aside */
.tmb-mt .sched-table td:is(.text-success, .text-danger) { color: inherit !important; }

/* ============================== The game lists ============================= */
/* Schedules (bet-schedule-team.php) and Historical Matchups
   (bet-past-matchups.php): .sched-table, each game a <tbody class="sched-game">
   of one line, or two in basketball (its ORtg / DRtg / Pace). */

.tmb-mt .sched-table > :is(thead, tbody, tfoot) > tr > td { box-shadow: none !important; }
.tmb-mt .sched-table td {
    font-weight: 400;
    color: var(--tmb-gray-900);
    padding: 6px !important;
    vertical-align: middle;
}
/* A game at this side's site was a bold line: only its team and score now */
.tmb-mt .sched-table tr[style*="bold"] { font-weight: 400 !important; }
.tmb-mt .sched-table tr[style*="bold"] > td:is(:nth-child(2), :nth-child(3)) { font-weight: 600; }
.tmb-mt .sched-table .sched-stats-row td { padding-top: 0 !important; color: var(--tmb-gray-500); }
/* A list that is one tbody of plain rows (football's and MLB's Historical Matchups) */
.tmb-mt .sched-table > tbody:not(.sched-game):not(.sched-old-head) > tr > td { border-bottom: 1px solid var(--tmb-gray-300) !important; }
.tmb-mt .sched-table > tbody:not(.sched-game):not(.sched-old-head) > tr:hover > td { background-color: var(--tmb-gray-100); }

/* ---------- each game one rounded card: both lines one background, one hover ---------- */
.tmb-mt .sched-table tbody.sched-game { --card: var(--tmb-gray-100); }
.tmb-mt .sched-table tbody.sched-game:has(> tr:first-child[style*="blue-50"]) { --card: var(--tmb-blue-50); }   /* upcoming */
.tmb-mt .sched-table tbody.sched-game.sched-today { --card: var(--tmb-warning-bg-light); }
.tmb-mt .sched-table tbody.sched-game:hover { --card: color-mix(in srgb, var(--tmb-gray-300), var(--tmb-gray-100) 45%); }
.tmb-mt .sched-table tbody.sched-game.sched-today:hover { --card: var(--tmb-warning-bg); }
.tmb-mt .sched-table tbody.sched-game > tr { background-color: transparent !important; }
.tmb-mt .sched-table tbody.sched-game > tr > td {
    background-color: var(--card) !important;
    background-clip: padding-box;
}
.tmb-mt .sched-table tbody.sched-game > tr:first-child > td { border-top: 6px solid transparent !important; }
.tmb-mt .sched-table tbody.sched-game > tr:first-child > td:first-child { border-top-left-radius: 16px; }
.tmb-mt .sched-table tbody.sched-game > tr:first-child > td:last-child { border-top-right-radius: 16px; }
.tmb-mt .sched-table tbody.sched-game > tr:last-child > td { padding-bottom: 10px !important; }
.tmb-mt .sched-table tbody.sched-game > tr:last-child > td:first-child { border-bottom-left-radius: 10px; }
.tmb-mt .sched-table tbody.sched-game > tr:last-child > td:last-child { border-bottom-right-radius: 10px; }

/* ---------- last season's games: listed, greyed, averaged nowhere ---------- */
.tmb-mt .sched-table tbody.sched-old td,
.tmb-mt .sched-table tbody.sched-old td * {
    color: var(--tmb-gray-500) !important;
    font-weight: 400 !important;
}
.tmb-mt .sched-table tbody.sched-old .gr-chip { background: #fff !important; }
.tmb-mt .sched-table tbody.sched-old-head td {
    background: #fff !important;
    color: var(--tmb-gray-600);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 14px 6px 2px !important;
}

/* ---------- the summaries: darker cards under a cut line ---------- */
/* The footer is sticky over the scrolling games: its gaps are real white rows
   (tmbGameRowGapTr()), never transparent borders the games would show through. */
.tmb-mt .sched-table tfoot { background: #fff; }
.tmb-mt .sched-table tfoot > tr { background: transparent !important; }
.tmb-mt .sched-table tfoot > tr > td {
    background-color: color-mix(in srgb, var(--tmb-gray-400), var(--tmb-gray-300) 35%) !important;
    background-clip: padding-box;
    color: var(--tmb-gray-900);
    font-weight: 600;
}
.tmb-mt .sched-table tfoot > tr:is(.sched-gap, .sched-cut) > td {
    background-color: #fff !important;
    padding: 0 !important;
    border-radius: 0;
}
.tmb-mt .sched-table tfoot > tr.sched-gap > td { height: 6px; }
.tmb-mt .sched-table tfoot > tr.sched-cut > td {
    position: relative;
    height: 14px;
    background-image: linear-gradient(var(--tmb-gray-600), var(--tmb-gray-600)) !important;
    background-size: 100% 2px;
    background-position: 0 6px;
    background-repeat: no-repeat;
}
/* the game passing behind the pinned summary fades out instead of being sliced */
.tmb-mt .sched-table tfoot > tr.sched-cut > td::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 22px;
    pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, #fff, transparent 100%), #fff);
}
/* a summary's first line opens its card, the line before a gap closes it */
.tmb-mt .sched-table tfoot > tr:is(.sched-cut, .sched-gap) + tr > td:first-child { border-top-left-radius: 10px; }
.tmb-mt .sched-table tfoot > tr:is(.sched-cut, .sched-gap) + tr > td:last-child { border-top-right-radius: 10px; }
.tmb-mt .sched-table tfoot > tr:has(+ tr.sched-gap) > td { padding-bottom: 10px !important; }
.tmb-mt .sched-table tfoot > tr:has(+ tr.sched-gap) > td:first-child { border-bottom-left-radius: 10px; }
.tmb-mt .sched-table tfoot > tr:has(+ tr.sched-gap) > td:last-child { border-bottom-right-radius: 10px; }
.tmb-mt .sched-table tfoot .sched-eff { color: var(--tmb-gray-700) !important; font-weight: 400; }
.tmb-mt .sched-table .sched-count { font-weight: 400; color: var(--tmb-gray-600); font-size: 10.5px; }

/* ===================== The game lists follow the filter bar ================= */
/* scripts/matchup-game-lists.js: a list being asked again, Past Matchups'
   "Follow global filters" switch (a pill in its heading), the notes. */
.tmb-mt .gl-host.gl-loading { opacity: .5; transition: opacity .15s; pointer-events: none; }
.tmb-mt .pm-follow {
    margin-left: 10px;
    vertical-align: middle;
    font-weight: 500;
    cursor: pointer;
    gap: 5px;
}
.tmb-mt .pm-follow input { margin: 0; cursor: pointer; }
.tmb-mt .pm-follow:has(input:checked) { border-color: var(--tmb-switch-on); color: var(--tmb-switch-on); }
.tmb-mt .gl-note, .tmb-mt .gl-follows { font-size: 11px; }

/* ======================== The filter bar's own section ====================== */
/* bet-games-display.php's "Filters" section and /my-dash/'s Filters widget:
   #filters-host-{game}, where matchup-comp-stats.js moves the bar. */
.tmb-mt .gl-filters-host { min-height: 40px; }
.tmb-mt .gl-filters-note { font-size: 11px; }