/* COMP STATS */
/* Responsive wrapper for tables with horizontal scrolling */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.table-responsive-wrapper table {
    min-width: 100%;
    border-collapse: collapse;
}

/* Scrollbar styling for better UX */
.table-responsive-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-responsive-wrapper::-webkit-scrollbar-track {
    background: var(--tmb-gray-100);
}

.table-responsive-wrapper::-webkit-scrollbar-thumb {
    background: var(--tmb-gray-600);
    border-radius: 4px;
}

.table-responsive-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--tmb-gray-700);
}

/* Sticky first column functionality */
.sticky-first-col {
    position: relative;
}

.sticky-first-col table {
    border-collapse: separate;
    border-spacing: 0;
}

.sticky-first-col td:first-child,
.sticky-first-col th:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 2;
    border-right: 2px solid var(--tmb-gray-300);
}

.sticky-first-col tr.darkline td:first-child,
.sticky-first-col tr.darkline th:first-child {
    background: var(--tmb-gray-100);
}

/* Table variants - minimum widths */
.table.splits {
    width: 100%;
    min-width: 280px;
}

.table.nohover {
    width: 100%;
    min-width: 600px;
}

.table.records-table {
    width: 100%;
    min-width: 700px;
}

/* Table styling utilities */
.table.splits td {
    padding: 0.3rem;
}

.table.nohover tr:hover {
    background-color: transparent;
}

/* A hovered row is highlighted on its COLOURED cells too (the rankcolor
   cells of the comparison tables, the On/Off block's net cells): front.css
   sets the hover as the ROW's background, which a cell's own background
   hides, so each cell of the row also gets a translucent overlay, which
   darkens whatever is behind it. Zach, 2026-10-07. */
.table:not(.nohover) tbody tr:hover > td {
    box-shadow: inset 0 0 0 100vmax var(--tmb-black-10);
}

/* .table-sm font-size override removed — preferred typography is the body
   default (1rem Inter), matching the v2 team comp tables. Bootstrap's
   .table-sm continues to apply its tighter padding. Responsive shrinks for
   smaller breakpoints remain below. */

/* Row and cell utilities */
.row_description {
    font-weight: normal;
    white-space: nowrap;
    min-width: 120px;
}

.rightline {
    border-right: 1px solid var(--tmb-gray-300);
}

.leftline {
    border-left: 1px solid var(--tmb-gray-300);
}

.darkline td, 
.darkline th {
    border-bottom: 2px solid var(--tmb-gray-700);
    font-weight: bold;
}

.bold {
    font-weight: bold;
}

.neutral {
    background-color: transparent;
}

/* Triangle list styling */
ul.triangle {
    list-style-type: none;
    padding-left: 0;
    font-size: 0.875rem;
}

ul.triangle li:before {
    content: "▸ ";
}

/* .rankcolor1-16 (light green = best, through white, to red = worst) live in front.css. */

/* Responsive adjustments — font-size shrink on .table-sm removed at this
   breakpoint to keep tablet typography consistent with the v2 team comp
   tables (1rem). Tighter padding still applied. */
@media (max-width: 991px) {
    .table-sm td {
        padding: 0.25rem;
    }
}

@media (max-width: 768px) {
    .table td, 
    .table th {
        padding: 0.25rem;
        font-size: 0.8rem;
    }
    
    .table.splits td {
        padding: 0.2rem;
        font-size: 0.75rem;
    }
}

/* On phone-sized screens, .table-sm font-size shrink kept off — the global
   .table td { font-size: 0.8rem } at <=768px already shrinks all tables
   uniformly. Only the small-element shrink stays for tighter line layout. */
@media (max-width: 576px) {
    .table-sm small {
        font-size: 0.7rem;
    }
}

/* Matchup Schedules (matchup/includes/bet-schedule-team.php): a game is a
   <tbody class="sched-game"> of one row, or two in basketball (its ORtg /
   DRtg / Pace under each team), so striping and hover go by game, not row.
   Past Matchups's basketball table too (bet-game-row-cells.php). */
.sched-table.table-striped tbody.sched-game tr { background-color: transparent; }
.sched-table.table-striped tbody.sched-game:nth-of-type(odd) tr { background-color: var(--tmb-black-5); }
.sched-table.table-hover tbody.sched-game:hover tr { background-color: var(--tmb-black-10); }
.sched-table tbody + tbody { border-top-width: 1px; }
.sched-table .sched-stats-row td { border-top: 0; padding-top: 0; }
.sched-table .sched-season { font-size: 0.7rem; font-weight: 700; line-height: 1.1; color: var(--tmb-gray-500); }
.sched-table .sched-eff { font-size: 0.7rem; font-weight: 400; color: var(--tmb-gray-500); text-align: left; }
/* Every cell of a game list is left-aligned (front.css centres table cells),
   so a game's date, names and figures, and its season and ORtg lines, start
   on the same vertical edges, the summary rows' too (Zach, 2026-10-21). */
.sched-scroll td, .sched-scroll th { text-align: left; }
.sched-table .sched-eff .text-nowrap { margin-right: 0.4rem; }
.sched-table td.sched-site { padding-left: 0.15rem; padding-right: 0.15rem; }
/* The game list's box (scripts/matchup-init.js sets its height to 5 games):
   it scrolls, the header and the summary rows stay in view, and the bar the
   script puts under it (.sched-grow) drags it taller. */
.sched-scroll { overflow: auto; }
.sched-scroll > table { margin-bottom: 0; }
.sched-scroll thead th { position: sticky; top: 0; z-index: 2; border-top: 0; }
/* One grey line over a list, the heading's, with the header's grey reaching
   it: no gap under the heading, no dark rule over the header, and no second
   line between the header and the first game. */
.tier-heading:has(+ div > .sched-scroll),
.collapsible-header:has(+ div > .sched-scroll) { margin-bottom: 0; }
.sched-scroll tbody:first-of-type > tr:first-child > td { border-top: 0; }
.sched-grow {
    height: 12px;
    cursor: ns-resize;
    touch-action: none;
    background: var(--tmb-gray-100);
    border-bottom: 1px solid var(--tmb-gray-300);
    position: relative;
}
.sched-grow::after {               /* the grip */
    content: '';
    position: absolute;
    left: 50%;
    top: 4px;
    width: 32px;
    height: 4px;
    margin-left: -16px;
    border-top: 1px solid var(--tmb-gray-500);
    border-bottom: 1px solid var(--tmb-gray-500);
}
.sched-grow:hover, .sched-grow.dragging { background: var(--tmb-gray-300); }
.sched-scroll tfoot { position: sticky; bottom: 0; z-index: 2; }
/* The summary rows are a dark band, so they never read as games: one navy
   for every summary row (the per-row tints of the two files are overridden),
   white figures, a light rule between two summaries. A collapsed table's
   border and box-shadow do not travel with a sticky cell, so the box's table
   is separate-bordered (only top borders are drawn, so nothing doubles) and
   the rules are inset shadows. */
.sched-scroll > table { border-collapse: separate; border-spacing: 0; }
.sched-scroll tfoot tr,
.sched-scroll tfoot tr > td { background-color: var(--tmb-navy-700) !important; }
.sched-scroll tfoot td {
    border-top-color: transparent !important;
    font-weight: 700;
    color: var(--tmb-white-90);
}
.sched-scroll tfoot tr:not(.sched-stats-row) ~ tr:not(.sched-stats-row) > td { box-shadow: inset 0 1px 0 var(--tmb-white-30); }
.sched-scroll tfoot .sched-eff { color: var(--tmb-white-70); font-weight: 400; }
.sched-scroll tfoot .text-success { color: var(--tmb-green-300) !important; }
.sched-scroll tfoot .text-danger { color: color-mix(in srgb, var(--tmb-red), white 40%) !important; }