/* ==========================================================================
   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;
}

/* 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;
}

/* Hold tooltip (JS-based, appended to body) */
.hold-cell[data-hold-tip] {
    cursor: help;
}
.hold-tooltip {
    position: fixed;
    pointer-events: none;
    background: var(--tmb-gray-900);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 400;
    white-space: pre-line;
    z-index: 10000;
    min-width: 200px;
    text-align: left;
    box-shadow: 0 2px 8px var(--tmb-black-20);
    pointer-events: none;
}
.hold-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--tmb-gray-900);
}
.hold-tooltip-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--tmb-gray-900);
}

/* 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;
    }
    /* Room for the arrow. front.css's phone rule gives every .form-control
       0.35rem of side padding (!important), which put the select's arrow
       (background, right 11px) over its text, and 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 makes the
       controls wrap onto their own line instead. */
    .odds-controls select.form-control {
        padding-right: 28px !important;
    }
    .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;
    }
}

/* ========================================================================
   LINE MOVEMENT HOVER POPOVER
   ======================================================================== */
.line-movement-popover {
    display: none;
    position: absolute;
    z-index: 1050;
    background: #fff;
    border: 1px solid var(--tmb-gray-300);
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--tmb-black-15);
    padding: 8px 10px;
    pointer-events: auto;
}
.line-movement-popover .popover-body {
    display: flex;
    gap: 10px;
}
.line-movement-popover .chart-wrap {
    position: relative;
    width: 260px;
    height: 220px;
    flex-shrink: 0;
}
.line-movement-popover .books-panel {
    min-width: 200px;
    max-width: 260px;
    overflow-y: auto;
    font-size: 11px;
    border-left: 1px solid var(--tmb-gray-300);
    padding-left: 8px;
}
.line-movement-popover .books-panel-header {
    font-weight: 600;
    font-size: 11px;
    color: var(--tmb-gray-900);
    margin-bottom: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--tmb-gray-300);
    white-space: nowrap;
}
.line-movement-popover .bp-row {
    display: flex;
    align-items: baseline;
    padding: 1px 0;
    font-size: 10.5px;
    line-height: 1.5;
    gap: 4px;
}
.line-movement-popover .bp-book {
    color: var(--tmb-gray-600);
    white-space: nowrap;
}
.line-movement-popover .bp-val {
    font-weight: 500;
    color: var(--tmb-gray-900);
    white-space: nowrap;
    margin-left: auto;
}
.line-movement-popover .popover-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--tmb-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.line-movement-popover canvas {
    display: block;
}
.line-movement-popover .popover-loading,
.line-movement-popover .popover-empty {
    display: none;
    text-align: center;
    padding-top: 55px;
    color: var(--tmb-gray-600);
    font-size: 12px;
}
.line-movement-popover.loading .popover-body { display: none; }
.line-movement-popover.loading .popover-loading { display: block; }
.line-movement-popover.empty .popover-body { display: none; }
.line-movement-popover.empty .popover-empty { display: block; }

/* 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;
}
.chart-icon {
    color: var(--tmb-blue);
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s, transform 0.15s;
    opacity: 0.75;
    flex-shrink: 0;
    vertical-align: middle;
}
/* The whole cell opens the line-movement chart, not just the 12px icon, so
   the whole cell says so on hover. Cells without data have no icon and stay
   inert. */
.odds-cell:has(.chart-icon),
.prop-cell:has(.chart-icon) {
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
}
.odds-cell:has(.chart-icon):hover,
.prop-cell:has(.chart-icon):hover,
.odds-cell.lm-active,
.prop-cell.lm-active {
    background-color: color-mix(in srgb, var(--tmb-blue) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tmb-blue) 45%, transparent);
}
.odds-cell:hover .chart-icon,
.prop-cell:hover .chart-icon,
.lm-active .chart-icon {
    color: color-mix(in srgb, var(--tmb-blue), black 30%);
    opacity: 1;
    transform: scale(1.15);
}

/* Popover header row with close button */
.line-movement-popover .popover-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.line-movement-popover .popover-close {
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--tmb-gray-600);
    padding: 0 2px;
    margin-left: 8px;
}
.line-movement-popover .popover-close:hover {
    color: var(--tmb-gray-900);
}

/* Juice display in books panel */
.line-movement-popover .bp-juice {
    font-size: 10px;
    color: var(--tmb-gray-600);
    white-space: nowrap;
    margin-left: 4px;
}

/* 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;
}