/* ==========================================================================
   Odds Tracker Page Styles
   Location: /styles/odds-tracker.css
   ========================================================================== */

/* --- Global overrides for front.css --- */
.odds-page button {
    background-color: transparent !important;
    margin-bottom: 0 !important;
}
.odds-page table tr:hover {
    background-color: transparent;
    cursor: default;
}
.odds-page table {
    margin-bottom: 0;
}

/* --- Layout --- */
.odds-page {
    padding-top: 80px;
    padding-bottom: 60px;
    max-width: 100%;
}

/* --- Controls Row --- */
.odds-controls {
    display: flex;
    align-items: center;
}
.odds-controls .btn-group .btn {
    /* Match /players default Bootstrap sizing */
}
.odds-controls .form-control {
    /* Inherits global pill styling from front.css */
}
.odds-controls .gap-2 > * {
    margin-right: 8px;
}

/* --- Book Filter Multiselect ---
   The component is styles/edges-multiselect.css (loaded before this file).
   /odds/ differs only here: the dropdown opens right-aligned, and the button
   stays white whatever else paints buttons in the controls row. */
.odds-page .edges-ms-btn {
    background: #fff !important;
}
.odds-page .edges-ms-dropdown {
    left: auto;
    right: 0;
}

/* --- Tabs --- */
.odds-tabs {
    border-bottom: 2px solid var(--tmb-gray-300);
    margin-bottom: 0;
}
.odds-tabs .nav-link {
    font-weight: 600;
    font-size: 14px;
    color: var(--tmb-gray-700);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 20px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.odds-tabs .nav-link:hover {
    color: var(--tmb-blue);
    border-bottom-color: var(--tmb-blue);
}
.odds-tabs .nav-link.active {
    color: var(--tmb-blue);
    border-bottom-color: var(--tmb-blue);
    background: transparent;
}
/* "Odds updated" at the tab row's far right, on the tabs' line. */
.odds-tabs .odds-updated-item {
    margin-left: auto;
    align-self: center;
    white-space: nowrap;
}

/* --- Table Wrapper --- */
.odds-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--tmb-gray-300);
    border-top: none;
    background: #fff;
}

/* The /odds/ page's tables are as tall as the screen under the sticky site
   header and sport bar, and scroll inside, so the book row (thead, sticky
   top 0) stays in sight as the games scroll by. --odds-sticky-top is the
   header + bar height, measured by stickyBookRow() in odds-tracker.js. Not
   for a metered viewer: the lock overlay covers the wrap's box only. Not
   for a dashboard widget (no .odds-page). */
.odds-page .odds-table-wrap:not(.odds-metered-wrap) {
    overflow: auto;
    max-height: max(320px, calc(100vh - var(--odds-sticky-top, 146px) - 12px));
    max-height: max(320px, calc(100dvh - var(--odds-sticky-top, 146px) - 12px));
}

/* --- Odds Table --- */
.odds-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
    table-layout: auto;
}
.odds-table thead th {
    background: var(--tmb-gray-100);
    border-bottom: 2px solid var(--tmb-gray-300);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--tmb-gray-900);
    padding: 8px 10px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* =====================================================
   GAMES TABLE: Sticky columns order = time | rot | team
   Widths: time=70, rot=44, team=170  → total=284
   ===================================================== */
#games-table thead th.time-header {
    text-align: center;
    width: 70px;
    min-width: 70px;
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--tmb-gray-100);
}
#games-table thead th.rot-header {
    text-align: center;
    width: 44px;
    min-width: 44px;
    position: sticky;
    left: 70px;
    z-index: 4;
    background: var(--tmb-gray-100);
}
#games-table thead th.game-info-header {
    text-align: left;
    min-width: 170px;
    position: sticky;
    left: 114px;
    z-index: 4;
    background: var(--tmb-gray-100);
    border-right: 2px solid var(--tmb-gray-300);
}
/* Date label in header row */
th.date-in-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--tmb-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
#games-table tbody td.time-cell {
    background: #fff;
    position: sticky;
    left: 0;
    z-index: 1;
    width: 70px;
    min-width: 70px;
    padding: 6px 6px;
}
#games-table tbody td.rot-cell {
    text-align: center;
    background: #fff;
    position: sticky;
    left: 70px;
    z-index: 1;
    width: 44px;
    min-width: 44px;
    padding: 6px 4px;
}
#games-table tbody td.game-info {
    text-align: left;
    font-weight: 600;
    background: #fff;
    position: sticky;
    left: 114px;
    z-index: 1;
    min-width: 170px;
    border-right: 2px solid var(--tmb-gray-300);
}
/* The pop-out to the game's matchup page (the Odds page alone,
   OddsConfig.matchupLinks): one column down the cells' right side, 14px
   in from the border, midway down. The sticky cell is its containing
   block. */
#games-table tbody td.game-info:has(.game-matchup-link) {
    padding-right: 34px;
}
#games-table .game-matchup-link {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
    color: var(--tmb-gray-500);
    text-decoration: none;
}
#games-table .game-matchup-link:hover,
#games-table .game-matchup-link:focus {
    color: var(--tmb-blue);
}

/* =====================================================
   PROPS TABLE: Sticky columns order = time | player
   Widths: time=70, player=200  → total=270
   ===================================================== */
#props-table thead th.time-header {
    text-align: center;
    width: 70px;
    min-width: 70px;
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--tmb-gray-100);
}
#props-table thead th.player-info-header {
    text-align: left;
    min-width: 200px;
    position: sticky;
    left: 70px;
    z-index: 4;
    background: var(--tmb-gray-100);
    border-right: 2px solid var(--tmb-gray-300);
}
#props-table tbody td.time-cell {
    background: #fff;
    position: sticky;
    left: 0;
    z-index: 1;
    width: 70px;
    min-width: 70px;
    padding: 6px 6px;
}
#props-table tbody td.player-info {
    text-align: left;
    font-weight: 600;
    background: #fff;
    position: sticky;
    left: 70px;
    z-index: 1;
    border-right: 2px solid var(--tmb-gray-300);
    min-width: 200px;
}
/* The player's pop-out to his Player Stats page, and the admin Write-up
   button (since 2026-10-31): a column down the cell's right side, the
   Games table's pop-out rule; both stacked where a row has the two. The
   sticky cell is their containing block. */
#props-table tbody td.player-info:has(.player-ps-link),
#props-table tbody td.player-info:has(.prop-writeup-btn) {
    padding-right: 34px;
}
#props-table .player-ps-link,
#props-table .prop-writeup-btn {
    position: absolute;
    right: 14px;
    font-size: 11px;
    line-height: 1;
    color: var(--tmb-gray-500);
    text-decoration: none;
}
#props-table .player-ps-link { top: 50%; transform: translateY(-50%); }
#props-table td.player-info:has(.prop-writeup-btn) .player-ps-link { top: 32%; }
#props-table .prop-writeup-btn {
    top: 68%;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px;
    color: var(--tmb-green) !important;
    cursor: pointer;
    box-shadow: none !important;
}
#props-table td.player-info:not(:has(.player-ps-link)) .prop-writeup-btn { top: 50%; }
#props-table .player-ps-link:hover,
#props-table .player-ps-link:focus { color: var(--tmb-blue-alt); }
#props-table .prop-writeup-btn:hover,
#props-table .prop-writeup-btn:focus { color: var(--tmb-green-700) !important; }

/* Book header columns */
.odds-table thead th.book-header {
    min-width: 100px;
}
.book-logo {
    vertical-align: middle;
    object-fit: contain;
    border-radius: 3px;
}
.book-header .book-logo {
    margin-right: 3px;
}
.best-book-col .book-logo {
    margin-right: 2px;
}

/* Body cells default */
.odds-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--tmb-gray-300);
    text-align: center;
    vertical-align: middle;
    transition: background-color 0.3s ease;
}

/* --- Time cell shared styles --- */
.time-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--tmb-gray-700);
    line-height: 1.4;
}
.time-clock {
    font-size: 10px;
    color: var(--tmb-gray-600);
    line-height: 1.4;
}

/* --- Rotation numbers --- */
.rot-num {
    font-size: 11px;
    color: var(--tmb-gray-600);
    font-weight: 400;
    line-height: 1.6;
    min-width: 36px;
    text-align: center;
}

/* Game date separator row */
.odds-table .date-separator td {
    background: var(--tmb-gray-100);
    font-weight: 700;
    font-size: 11px;
    color: var(--tmb-gray-600);
    padding: 2px 10px;
    text-align: left;
    border-bottom: 1px solid var(--tmb-gray-300);
    border-top: 1px solid var(--tmb-gray-300);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1.3;
}

/* --- Team Logos --- */
.team-logo {
    vertical-align: middle;
    object-fit: contain;
    margin-right: 6px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* --- Player Headshots --- */
.player-headshot {
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Game team rows */
.game-team-row {
    display: flex;
    align-items: center;
    line-height: 1.6;
}
.team-name {
    font-size: 12px;
    color: var(--tmb-gray-900);
    font-weight: 600;
}

/* Team Total market: one row per team. The game's two rows read as a pair
   (a dashed rule between them, solid between games); under the team name,
   who it plays, indented past the 20px logo. */
#games-table tbody tr.tt-row-away td {
    border-bottom-style: dashed;
}
.tt-opp {
    font-size: 11px;
    font-weight: 400;
    color: var(--tmb-gray-600);
    line-height: 1.6;
    padding-left: 26px;
}

/* Player info styling */
.player-info-row {
    display: flex;
    align-items: center;
}
.player-details {
    flex: 1;
    min-width: 0;
}
.player-name {
    font-weight: 600;
    font-size: 12px;
    color: var(--tmb-gray-900);
}
.player-meta {
    font-size: 10px;
    color: var(--tmb-gray-600);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.player-meta .team-logo {
    margin-right: 2px;
}

/* --- Odds Cell Formatting --- */
.odds-cell {
    min-width: 90px;
}
.game-odds-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 2px;
    line-height: 1.6;
    white-space: nowrap;
}
.game-line-col {
    font-weight: 600;
    font-size: 12px;
    color: var(--tmb-gray-900);
    text-align: right;
}
.game-price-col {
    font-size: 11px;
    color: var(--tmb-gray-600);
    text-align: left;
}
.game-price-col.positive,
.game-price-col.negative {
    color: var(--tmb-gray-700);
}
.odds-cell .odds-line {
    font-weight: 600;
    font-size: 12px;
    color: var(--tmb-gray-900);
}
.odds-cell .odds-price {
    font-size: 11px;
    color: var(--tmb-gray-700);
    margin-top: 1px;
}
.odds-cell .odds-price.positive,
.odds-cell .odds-price.negative {
    color: var(--tmb-gray-700);
}
.odds-cell.no-data {
    color: var(--tmb-gray-400);
}

/* A price that opens the book's betslip (odds-tracker.js betLinkHtml).
   Keeps the cell's own colours; the dotted underline is the only tell until
   hover, so the table reads the same with or without links. */
a.betslip-link {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
a.betslip-link:hover,
a.betslip-link:focus {
    color: var(--tmb-blue);
    text-decoration-style: solid;
}

/* Props: over/under stacked */
.prop-cell {
    min-width: 90px;
}
.prop-cell .prop-over,
.prop-cell .prop-under {
    font-size: 11px;
    line-height: 1.4;
}
.prop-cell .prop-over {
    color: var(--tmb-gray-700);
}
.prop-cell .prop-under {
    color: var(--tmb-gray-700);
}
.prop-cell .prop-line {
    font-weight: 600;
    font-size: 12px;
    color: var(--tmb-gray-900);
}

/* --- Flash Animation for Changed Odds --- */
@keyframes odds-flash {
    0% {
        background-color: color-mix(in srgb, var(--tmb-yellow) 50%, transparent);
    }
    83% {
        background-color: color-mix(in srgb, var(--tmb-yellow) 50%, transparent);
    }
    100% {
        background-color: transparent;
    }
}

.odds-changed {
    animation: odds-flash 6s ease-out forwards;
}

/* --- Empty / Loading States --- */
.odds-table .loading-row td,
.odds-table .empty-row td {
    text-align: center;
    padding: 30px 10px;
    color: var(--tmb-gray-600);
    font-size: 14px;
    font-style: italic;
}

/* An unavailable market explains itself rather than showing a grid of dashes
   (partner audit H14-11). Not italic/grey like the generic empty row — this is
   a status the member is meant to read and act on, not incidental chrome. */
.odds-table .empty-row td.empty-market-cell {
    font-style: normal;
    color: var(--tmb-gray-700);
    font-size: 15px;
    line-height: 1.5;
    padding: 34px 18px;
}
.odds-table .empty-market-cell strong {
    color: var(--tmb-gray-900);
}
.odds-table .empty-market-detail {
    margin-top: 6px;
    font-size: 13px;
    color: var(--tmb-gray-600);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Best Line Highlighting (per-line, not per-cell) --- */
.odds-cell .best-line,
.prop-cell .best-line,
.game-odds-row.best-line {
    background-color: color-mix(in srgb, var(--tmb-brand) 10%, transparent);
    border-left: 2px solid var(--tmb-brand);
    padding-left: 4px;
    margin-left: -6px;
    border-radius: 2px;
}

/* --- Best Line Summary Column --- */
.best-header,
.hold-header {
    font-size: 11px !important;
    min-width: 70px;
}
.best-header {
    min-width: 110px;
    border-left: 2px solid var(--tmb-gray-300);
}
.best-summary-cell {
    min-width: 110px;
    border-left: 2px solid var(--tmb-gray-300);
    background: color-mix(in srgb, var(--tmb-brand) 4%, transparent);
}
.best-row {
    display: grid;
    grid-template-columns: 46px 40px 1fr;
    align-items: center;
    gap: 2px;
    line-height: 1.6;
    white-space: nowrap;
}
.best-line-col {
    font-weight: 600;
    font-size: 12px;
    color: var(--tmb-gray-900);
    text-align: right;
}
.best-price-col {
    font-size: 11px;
    color: var(--tmb-gray-600);
    text-align: right;
}
.best-book-col {
    font-size: 9px;
    font-weight: 600;
    color: var(--tmb-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: left;
}
.best-line-col.best-over,
.best-price-col.best-over {
    color: var(--tmb-gray-700);
}
.best-line-col.best-under,
.best-price-col.best-under {
    color: var(--tmb-gray-700);
}

/* --- Hold Column --- */
.hold-cell {
    min-width: 60px;
    text-align: center;
    vertical-align: middle;
    border-right: 2px solid var(--tmb-gray-300);
}
.hold-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--tmb-gray-600);
}

/* --- Arb Opportunity --- */
.arb-cell {
    background: color-mix(in srgb, var(--tmb-brand) 8%, transparent);
    cursor: help;
    position: relative;
}
.arb-value {
    color: var(--tmb-brand) !important;
    font-weight: 700;
}
.arb-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--tmb-brand);
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 2px;
    animation: arb-pulse 1.5s ease-in-out infinite;
}

/* A prop arb near the start or past 5% (propArbGuard()): no pulse, grey. */
.arb-badge-verify {
    background: var(--tmb-gray-500);
    animation: none;
}

@keyframes arb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- Sharp Column (game lines) ---
   The sharp books' no-vig price, the best other book against it, and where
   the reference book opened (scripts/odds-tracker.js, SHARP COLUMN). Sits
   after Hold, so it takes over Hold's right-hand divider. */
.odds-table.has-sharp .hold-cell {
    border-right: none;
}
.sharp-header {
    font-size: 11px !important;
    min-width: 130px;
    cursor: help;
}
.sharp-cell {
    min-width: 130px;
    vertical-align: middle;
    border-right: 2px solid var(--tmb-gray-300);
    white-space: nowrap;
}
.sharp-cell[data-hold-tip] {
    cursor: help;
}
/* One row a cell, so no columns to hold: line, price and chip flow from the
   left edge the name and the "why" start at (2px bar + 4px = their 6px). */
.sharp-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1.6;
    border-left: 2px solid transparent;
    padding-left: 4px;
    text-align: left;
}
/* The call: the side the sharp books favour, and why. */
.sharp-side {
    font-size: 11px;
    line-height: 1.5;
    padding-left: 6px;
    text-align: left;
    color: var(--tmb-gray-900);
}
.sharp-side-name {
    font-weight: 700;
}
.sharp-side-both .sharp-side-name {
    color: #fff;
    background: var(--tmb-blue-alt-hover);
    padding: 0 5px;
    border-radius: 3px;
}
.sharp-side-why {
    font-size: 10px;
    line-height: 1.4;
    color: var(--tmb-gray-600);
    padding-left: 6px;
    text-align: left;
}
/* The sharp side's row. */
.sharp-row.sharp-toward {
    border-left-color: var(--tmb-blue);
}
.sharp-line-col {
    font-weight: 600;
    font-size: 12px;
    color: var(--tmb-gray-900);
}
.sharp-line-col:empty {
    display: none;
}
.sharp-price-col {
    font-size: 11px;
    color: var(--tmb-gray-600);
}
.sharp-edge-col {
    padding-left: 2px;
}
.sharp-edge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    background: var(--tmb-blue-alt-hover);
    padding: 0 5px;
    border-radius: 3px;
}
.sharp-edge a.betslip-link,
.sharp-edge a.betslip-link:hover {
    color: #fff;
}
.sharp-edge-verify {
    background: var(--tmb-gray-500);
}
/* An edge of 1% to 2%: printed, not flagged. */
.sharp-edge-soft,
.sharp-edge-soft a.betslip-link,
.sharp-edge-soft a.betslip-link:hover {
    background: none;
    color: var(--tmb-gray-600);
    font-weight: 600;
    padding: 0;
}
.sharp-flagged {
    background: color-mix(in srgb, var(--tmb-blue) 7%, transparent);
}
/* --- Middle Column (props) ---
   Sits after Hold, so it takes over Hold's right-hand divider. */
#props-table .hold-cell {
    border-right: none;
}
.middle-header {
    font-size: 11px !important;
    min-width: 92px;
}
.middle-cell {
    min-width: 92px;
    text-align: center;
    vertical-align: middle;
    border-right: 2px solid var(--tmb-gray-300);
    white-space: nowrap;
    line-height: 1.35;
}
.middle-cell[data-hold-tip] {
    cursor: help;
}
.middle-window {
    font-size: 12px;
    font-weight: 600;
    color: var(--tmb-gray-700);
}
.middle-books {
    font-size: 9px;
    font-weight: 600;
    color: var(--tmb-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.middle-odds {
    font-size: 10px;
    color: var(--tmb-gray-600);
}
.middle-good {
    background: color-mix(in srgb, var(--tmb-blue) 7%, transparent);
}
.middle-good .middle-window {
    color: var(--tmb-blue-alt-hover);
}
.middle-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--tmb-blue-alt-hover);
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 2px;
}
.middle-badge-verify {
    background: var(--tmb-gray-500);
}

/* "Middles only" filter (Props tab) */
.odds-middles-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

/* Hold info icon */
.hold-info-icon {
    font-size: 9px;
    color: var(--tmb-gray-500);
    margin-left: 2px;
    vertical-align: middle;
}

/* Conversion methodology tooltip */
.conversion-info {
    display: inline-block;
    cursor: help;
    font-size: 13px;
    color: var(--tmb-gray-600);
    vertical-align: middle;
    margin-left: 4px;
}
.conversion-info:hover {
    color: var(--tmb-gray-900);
}
.conv-tooltip {
    position: fixed;
    background: var(--tmb-gray-900);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 10000;
    max-width: 380px;
    text-align: left;
    box-shadow: 0 2px 8px var(--tmb-black-20);
    pointer-events: none;
}

/* --- Conversions Tab --- */
.conversions-wrap {
    background: #fff;
    border: 1px solid var(--tmb-gray-300);
    border-top: none;
    padding: 20px;
}
.conversions-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tmb-gray-900);
    margin-bottom: 4px;
}
.conversions-subtitle {
    font-size: 12px;
    color: var(--tmb-gray-600);
    margin-bottom: 16px;
}
.conversion-table {
    width: auto;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 24px;
}
.conversion-table thead th {
    background: var(--tmb-gray-100);
    border-bottom: 2px solid var(--tmb-gray-300);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--tmb-gray-900);
    padding: 8px 14px;
    text-align: center;
    white-space: nowrap;
}
.conversion-table tbody td {
    padding: 5px 14px;
    border-bottom: 1px solid var(--tmb-gray-300);
    text-align: center;
    font-size: 12px;
    color: var(--tmb-gray-900);
    white-space: nowrap;
}
.conversion-table tbody tr:hover {
    background-color: var(--tmb-blue-50);
}
.conversion-table .col-spread {
    font-weight: 700;
    color: var(--tmb-gray-900);
}
.conversion-table .col-dog {
    color: var(--tmb-gray-700);
}
.conversion-table .col-fav {
    color: var(--tmb-gray-700);
}
.conversion-table .col-pct {
    color: var(--tmb-gray-600);
    font-size: 11px;
}

/* Conversion tables side-by-side grid */
.conversion-grid {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.conversion-section {
    flex: 1;
    min-width: 280px;
}

/* MLB conversions layout */
.mlb-conversion-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}
.mlb-conversion-section {
    flex: 1;
    min-width: 250px;
}
.mlb-conversion-section h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--tmb-gray-700);
    margin-bottom: 10px;
}

/* --- Responsive --- */
/* Page-chrome only (.content-wrapper doesn't exist inside a /my-dash/
   widget shell) — stays viewport-only by design. */
@media (max-width: 768px) {
    .content-wrapper > .odds-page {
        padding: 10px 16px !important;
    }
}
/* Widget content — @container, not @media, so this responds to the
   WIDGET's own rendered width on a narrow /my-dash/ column (odds-body.php's
   $odds_main_html is wrapped in .tmb-cq-root), not just the browser
   viewport. The controls row (segment/market dropdowns, search, book
   filter) is NOT wrapped — it's $odds_controls_extra_html, meant to sit
   inside the page's OWN sport-selector row, same reasoning as
   the Player Stats strip's controls — so its own rule below stays @media. */
@media (max-width: 768px) {
    .odds-controls .d-flex {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }
    .odds-controls .d-flex > * {
        margin-right: 0;
        width: auto !important;
    }
    /* One shared starting width, wider than a pill's padding: from 0 each
       pill would start at its own padding + border (~13px) while Market's
       padless TMB.searchSelect wrapper started at 0, leaving Market 13px
       narrower than its neighbours. */
    .odds-controls .form-control,
    .odds-controls .odds-market-search {
        flex: 1 1 20px;
        min-width: 0;
    }
    .odds-controls .odds-market-search > #market-select {
        width: 100% !important;
    }
    /* min-width 0 let each control shrink to ~48px beside the breadcrumb. A
       floor that holds the longest option ("1st Quarter", "Team Total") plus
       the arrow (styles/select-arrow.css) makes the controls wrap onto
       their own line instead. */
    .odds-controls #segment-select,
    .odds-controls .odds-market-search {
        min-width: 6.75rem;
    }
    .odds-controls #odds-search {
        min-width: 6rem;
    }
}
@container (max-width: 768px) {
    /* Tables go full width. Not scoped to .odds-page, so this still matches
       inside a /my-dash/ widget shell, which has no .odds-page ancestor: the
       same markup is in both. Named by the Odds page's OWN classes
       (.odds-table-wrap, the panel after .odds-tabs): this file is loaded
       for the whole dashboard, where ".tmb-cq-root .table-responsive" was
       every other widget's table too, pulled 16px under its widget's left
       edge (the Player Stats matchup table lost that much of its Stat
       column on a phone, until 2026-10-08). */
    .tmb-cq-root .odds-table-wrap,
    .odds-tabs ~ .tab-content {
        margin-left: -16px;
        margin-right: -16px;
    }
    /* The wrap sits INSIDE that panel: pulled out a second time, the table
       started 16px past the screen's edge and the time column was cut. The
       panel's own edge-to-edge is enough; what is drawn at its left edge
       (the date/time column) is put back on the page's 16px line, the
       hamburger's and the tabs'. !important: front.css gives every cell
       `padding: 6px !important`. */
    .odds-tabs ~ .tab-content .odds-table-wrap {
        margin-left: 0;
        margin-right: 0;
    }
    #games-table tbody td.time-cell,
    #props-table tbody td.time-cell,
    #games-table thead th.time-header,
    #props-table thead th.time-header {
        padding-left: 16px !important;
    }
    /* card flush handled by front.css */
    #games-table thead th.game-info-header,
    #games-table tbody td.game-info {
        min-width: 130px;
    }
    #props-table thead th.player-info-header,
    #props-table tbody td.player-info {
        min-width: 160px;
    }
    /* One pinned column, not three (Games) or two (Props). The time column
       (70px) and the rotation column (48px, empty in most sports' feeds)
       left a phone about 125px for the books, one at a time; the time goes
       under the teams or the player instead (.game-time-inline) and that
       column is pinned at 0. */
    #games-table thead th.time-header,
    #games-table tbody td.time-cell,
    #games-table thead th.rot-header,
    #games-table tbody td.rot-cell,
    #props-table thead th.time-header,
    #props-table tbody td.time-cell {
        display: none;
    }
    #games-table thead th.game-info-header,
    #games-table tbody td.game-info,
    #props-table thead th.player-info-header,
    #props-table tbody td.player-info {
        left: 0;
        padding-left: 16px !important;
    }
    :is(#games-table, #props-table) .game-time-inline {
        display: block;
    }
}

/* The game's time under its teams or player: only where the time column is
   hidden (the narrow table above, the phone cards below). */
.game-time-inline {
    display: none;
    font-size: 10px;
    font-weight: 400;
    color: var(--tmb-gray-600);
    line-height: 1.5;
    margin-top: 1px;
}
#games-tbody tr.game-started .game-time-inline::after {
    content: " · started";
}
/* --- The cells as chips (odds-tracker.js chipCells(); since 2026-11-01) ---
   Each cell's content in a chip, the Player Stats lines bar's design, in the
   one table that scrolls sideways at every width (Zach: no card or chip
   layout on a phone, the table alone). The chip's shell (edge, radius, the
   dashed summary chip, hover) is styles/lines-chips.css's, .tmb-chips on the
   table and .tmb-chip on the wrapper: never a copy of those rules here. What
   follows is the cell's padding handed to the chip, and the cell-level
   hover of a cell that opens the line-movement chart moved onto its chip. */
.odds-table.tmb-chips tbody td:has(> .tmb-chip) {
    padding: 4px;
}
.odds-table.tmb-chips td > .tmb-chip {
    padding: 2px 6px 3px;
    box-sizing: border-box;
}
.odds-table.tmb-chips td > .tmb-chip-sum {
    padding: 3px 6px 4px;
}
.odds-table.tmb-chips td.odds-cell:has(.chart-icon):hover,
.odds-table.tmb-chips td.prop-cell:has(.chart-icon):hover,
.odds-table.tmb-chips td.odds-cell.lm-active,
.odds-table.tmb-chips td.prop-cell.lm-active {
    background-color: transparent;
    box-shadow: none;
}
.odds-table.tmb-chips td:has(.chart-icon):hover > .tmb-chip,
.odds-table.tmb-chips td.lm-active > .tmb-chip {
    background-color: color-mix(in srgb, var(--tmb-blue) 8%, transparent);
    border-color: color-mix(in srgb, var(--tmb-blue) 45%, transparent);
}
/* the Best column's tint stays on the column; the chip on it is white */
.odds-table.tmb-chips td.best-summary-cell > .tmb-chip {
    background: #fff;
}
/* The bar's marks on the table (Zach, 2026-11-01): the best price a side on
   yellow (the brand tint and bar the table drew are off), the Sharp cell's
   chip on blue (lines-chips.css .tmb-chip-sharp, set by chipCells()), and
   the two dividers: before Best and after the last summary column (Hold,
   or Sharp when the market has it; Middle on the Props tab), 3px of the
   muted grey as on the bar. */
.odds-table.tmb-chips :is(.odds-cell, .prop-cell) .best-line,
.odds-table.tmb-chips .game-odds-row.best-line {
    background-color: transparent;
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
}
.odds-table.tmb-chips .game-odds-row.best-line .game-price-col,
.odds-table.tmb-chips .prop-cell .best-line .prop-price {
    background: var(--tmb-warning-bg);
    padding: 0 4px;
    border-radius: 3px;
}
.odds-table.tmb-chips .game-odds-row.best-line .game-price-col {
    justify-self: start;
}
.odds-table.tmb-chips .best-header,
.odds-table.tmb-chips td.best-summary-cell {
    border-left: 3px solid var(--tmb-gray-600);
}
.odds-table.tmb-chips .hold-header,
.odds-table.tmb-chips td.hold-cell {
    border-right: 3px solid var(--tmb-gray-600);
}
.odds-table.tmb-chips.has-sharp .hold-header,
.odds-table.tmb-chips.has-sharp td.hold-cell,
#props-table.tmb-chips .hold-header,
#props-table.tmb-chips td.hold-cell {
    border-right: none;
}
.odds-table.tmb-chips .sharp-header,
.odds-table.tmb-chips td.sharp-cell,
#props-table.tmb-chips .middle-header,
#props-table.tmb-chips td.middle-cell {
    border-right: 3px solid var(--tmb-gray-600);
}

/* --- The /odds/ page's own table (Zach, 2026-11-01) ---
   No lines between rows: a row is told apart by a pale tint while the
   pointer is on it (the chips change no colour), and even rows carry no
   stripe. Each book's header sits at its chips' left edge, so the drag grip
   lines up with the chip under it. Consensus is set off from the summary
   columns by a light 1px rule, the 3px dividers stay round the summaries'
   other side. Scoped to the page itself (.content-wrapper > .odds-page):
   the matchup page's bars and the dashboard widget are left as they are.
   The ids are in the selectors to outrank front.css's row tints and the
   sticky cells' white. */
.content-wrapper > .odds-page :is(#games-table, #props-table).tmb-chips tbody tr,
.content-wrapper > .odds-page :is(#games-table, #props-table).tmb-chips tbody tr:nth-child(even) {
    background-color: transparent;
}
.content-wrapper > .odds-page :is(#games-table, #props-table).tmb-chips tbody td {
    border-top: 0;
    border-bottom: 0;
}
/* a game being played (live lines, the red LIVE tag) has its whole row a
   very light red (Zach); opaque, so the sticky cells hide what scrolls
   under them. Its hover is a slightly darker red, not the blue (Zach). */
.content-wrapper > .odds-page :is(#games-table, #props-table).tmb-chips tbody tr.game-live > td {
    background-color: color-mix(in srgb, var(--tmb-red) 5%, white);
}
.content-wrapper > .odds-page :is(#games-table, #props-table).tmb-chips tbody tr:hover > td {
    background-color: var(--tmb-blue-50);
}
.content-wrapper > .odds-page :is(#games-table, #props-table).tmb-chips tbody tr.game-live:hover > td {
    background-color: color-mix(in srgb, var(--tmb-red) 10%, white);
}
.content-wrapper > .odds-page .odds-table.tmb-chips thead th.book-header {
    text-align: left;
    padding-left: 4px;
}
.content-wrapper > .odds-page .odds-table.tmb-chips .best-header,
.content-wrapper > .odds-page .odds-table.tmb-chips td.best-summary-cell {
    border-left: 1px solid var(--tmb-gray-300);
}
/* and the divider after the summaries (Sharp, Hold where a market has no
   Sharp, Middle on Props) the same light rule (Zach: no dark line left) */
.content-wrapper > .odds-page #games-table.tmb-chips:not(.has-sharp) :is(.hold-header, td.hold-cell),
.content-wrapper > .odds-page #games-table.tmb-chips :is(.sharp-header, td.sharp-cell),
.content-wrapper > .odds-page #props-table.tmb-chips :is(.middle-header, td.middle-cell) {
    border-right: 1px solid var(--tmb-gray-300);
}
/* every chip of a row one height, the tallest's, its content centred
   (Zach: all the chips the same size); a cell's 1px height lets the chip's
   100% resolve */
.content-wrapper > .odds-page :is(#games-table, #props-table).tmb-chips tbody td:has(> .tmb-chip) {
    height: 1px;
}
.content-wrapper > .odds-page :is(#games-table, #props-table).tmb-chips tbody td > .tmb-chip {
    height: 100%;
    justify-content: center;
}

/* --- BARS LAYOUT (odds-tracker.js, OddsConfig.layout = 'bars'; since
   2026-11-01): the matchup page's board as the Player Stats lines bar ---
   A row is a bar: the label (the market, or the player) at its left, then
   Consensus, a divider, the summary chips, a divider and the books, one
   line that scrolls sideways. The chips' look (edge, label, dashed summary,
   yellow best price, blue Sharp, the 3px divider) is styles/lines-chips.css's;
   what follows is the bar's layout, the table's own cell rules undone, and
   front.css's row tints kept off the bars and the chips: nothing changes
   colour on hover (Zach). :is() with the two ids: the sticky rules are by id. */
:is(#games-table, #props-table).odds-bars,
:is(#games-table, #props-table).odds-bars tbody {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
}
:is(#games-table, #props-table).odds-bars thead,
:is(#games-table, #props-table).odds-bars tr.date-separator {
    display: none;
}
:is(#games-table, #props-table).odds-bars tbody tr.odds-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--tmb-black-15);
    border-radius: .25rem;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: thin;
}
:is(#games-table, #props-table).odds-bars tbody tr.odds-bar:nth-child(even),
:is(#games-table, #props-table).odds-bars tbody tr.odds-bar:hover {
    background-color: #fff;
    cursor: default;
}
/* ...and the matchup page's own row hover, a dark overlay on every cell of
   a hovered row (layout-matchup-sections.css: .table tbody tr:hover > td).
   The dark Sharp / Hold panels (line-movement.js) are not a hover tint and
   stay. */
:is(#games-table, #props-table).odds-bars tbody tr.odds-bar:hover > td {
    box-shadow: none;
}
/* One box: the bar is the frame (as on Player Stats), so the table's wrap
   around it draws none (Zach, 2026-11-01: "a row within a row"). */
.odds-table-wrap:has(> .odds-bars) {
    border: 0;
    background: transparent;
}
:is(#games-table, #props-table).odds-bars tbody tr.odds-bar > td {
    display: block;
    position: static;
    left: auto;
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
    text-align: left;
    white-space: nowrap;
}
:is(#games-table, #props-table).odds-bars tbody tr.odds-bar > :is(td.time-cell, td.rot-cell, td.game-info, td.player-info, td.odds-bar-empty) {
    display: none;
}
/* the label: the market (or the player), the two teams under it */
:is(#games-table, #props-table).odds-bars tbody tr.odds-bar > td.odds-bar-label {
    align-self: center;
    display: flex;
    flex-direction: column;
    /* one width for every bar, so the chips line up from bar to bar */
    flex: 0 0 112px;
    width: 112px;
    white-space: normal;
}
@media (max-width: 767px) {
    :is(#games-table, #props-table).odds-bars tbody tr.odds-bar > td.odds-bar-label {
        flex-basis: 84px;
        width: 84px;
    }
}
.odds-bars .odds-bar-market {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tmb-gray-900);
}
.odds-bars .odds-bar-sides {
    font-size: 0.62rem;
    line-height: 1.35;
    color: var(--tmb-gray-600);
}
/* each cell's chip: the bar's chip, its label across the top (the 7px top
   padding is the label's, lines-chips.css) */
:is(#games-table, #props-table).odds-bars tbody td > .tmb-chip {
    height: 100%;
    padding: 0 8px 4px;
}
:is(#games-table, #props-table).odds-bars tbody td > .tmb-chip > .tmb-chip-label {
    margin: 0 -8px 2px;
}
:is(#games-table, #props-table).odds-bars tbody td > .tmb-chip-sum :is(.best-row, .hold-value, .sharp-row, .sharp-side, .middle-window) {
    font-size: 0.72rem;
}
/* no colour change on hover: not the cell's blue tint, not the chip's */
:is(#games-table, #props-table).odds-bars tbody td:hover > .tmb-chip,
:is(#games-table, #props-table).odds-bars tbody td.lm-active > .tmb-chip {
    background-color: #fff;
    border-color: var(--tmb-gray-600);
}
:is(#games-table, #props-table).odds-bars tbody td:hover > .tmb-chip-sum {
    background-color: transparent;
}
:is(#games-table, #props-table).odds-bars tbody td:hover > .tmb-chip-sharp {
    background-color: var(--tmb-blue-50);
    border-color: var(--tmb-blue-300);
}
:is(#games-table, #props-table).odds-bars tbody td:hover > .tmb-chip-sharp.tmb-chip-flagged {
    background-color: var(--tmb-blue-100);
}
/* the two dividers, as on the Player Stats bar: named under tr.odds-bar so
   they outrank the cell reset above (it made them transparent until
   2026-11-01) */
:is(#games-table, #props-table).odds-bars tbody tr.odds-bar > td.tmb-chip-divider {
    display: block;
    flex: 0 0 3px;
    align-self: stretch;
    margin: 2px 1px;
    background: var(--tmb-gray-600);
    border-radius: 2px;
}
/* the table's own dividers are the bars' divider cells here */
:is(#games-table, #props-table).odds-bars tbody td:is(.best-summary-cell, .hold-cell, .sharp-cell, .middle-cell) {
    border: 0 !important;
}

/* Odds/prop cell: flex layout to keep content + chart icon centered together */
.odds-cell, .prop-cell {
    position: relative;
}
.odds-cell-inner, .prop-cell-inner {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.odds-cell-content, .prop-cell-content {
    display: inline-block;
}
/* Logged-out visitors: a sign-up note where the book picker would sit. */
.odds-book-filter-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 360px;
    padding: 5px 10px;
    border: 1px dashed var(--tmb-blue-300);
    border-radius: 6px;
    background: var(--tmb-blue-50);
    color: var(--tmb-navy-700);
    font-size: 12px;
    line-height: 1.35;
}
.odds-book-filter-note a {
    color: var(--tmb-blue-alt-hover);
    font-weight: 600;
}

/* Book picker: drag-to-reorder (logged-in perk; order saved to the account). */
.odds-book-list {
    max-height: 60vh;
    overflow-y: auto;
}
.odds-book-list-hint {
    padding: 2px 14px 6px;
    font-size: 0.68rem;
    color: var(--tmb-gray-600);
    border-bottom: 1px solid var(--tmb-gray-100);
    margin-bottom: 2px;
    white-space: nowrap;
}
.odds-book-grip {
    color: var(--tmb-gray-500);
    cursor: grab;
    font-size: 11px;
    letter-spacing: -3px;
    padding: 0 4px 0 0;
    user-select: none;
    touch-action: none;
}
.edges-ms-option:hover .odds-book-grip { color: var(--tmb-blue-alt-hover); }
.odds-book-grip:active { cursor: grabbing; }
.odds-book-ghost {
    background: var(--tmb-blue-100) !important;
    opacity: 0.7;
}
.edges-ms-actions .odds-book-reset {
    flex: 1.4;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tmb-blue-alt-hover);
    cursor: pointer;
    text-align: center;
    border-left: 1px solid var(--tmb-gray-300);
    white-space: nowrap;
}
.edges-ms-actions .odds-book-reset:hover { background: var(--tmb-blue-50); }

/* Draggable book column headers (logged-in; same order as the picker). */
.odds-table thead th.book-draggable {
    cursor: grab;
    user-select: none;
    transition: background-color 0.15s;
}
.odds-table thead th.book-draggable:hover {
    background-color: var(--tmb-blue-100);
}
.odds-table thead th.book-draggable:active { cursor: grabbing; }
/* Same ⋮⋮ grip as the book picker, so the header reads as draggable */
.odds-table thead th.book-draggable .odds-col-grip {
    fill: var(--tmb-gray-600);
    margin-right: 6px;
    vertical-align: middle;
    transition: fill 0.15s;
}
.odds-table thead th.book-draggable:hover .odds-col-grip { fill: var(--tmb-blue-alt-hover); }
.odds-table thead th.odds-col-ghost {
    background-color: var(--tmb-blue-200) !important;
    opacity: 0.8;
}