/**
 * Player Props / DFS — page-specific styles.
 * Consolidated from four inline <style> blocks (index.php, ps-header.php,
 * ps-stats-view.php, ps-trend-chart.php) so the /my-dash/ widget versions
 * (which only get body HTML fragments, not <head>) can load them too.
 */
    /* Content wrapper */
    .content-wrapper {
        margin-left: 0;
        padding: 20px 25px;
        padding-top: 90px !important;
    }

    /* Navigation header bar look now comes from the shared .tmb-sport-bar (front.css) */

    /* Autocomplete styling */
    .ui-autocomplete {
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1050 !important;
    }
    .ui-autocomplete .ui-menu-item-wrapper {
        padding: 8px 12px;
    }
    .player-suggestion-team {
        color: #888;
        font-size: 0.85em;
        margin-left: 8px;
    }

    /* Injury badges + headshot injury overlay → extracted to /styles/player-injury-common.css */

    /* Search in header */
    #player-search {
        font-size: 0.85rem;
    }

    /* Player header */
    .player-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 30px;
        margin-bottom: 0;
    }
    .player-header-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .player-header h2 {
        margin-bottom: 0;
    }
    .player-header .team-label {
        color: #888;
        font-size: 1rem;
    }
    /* .player-header and everything else in this file scoped to player_strip/
       prop_bar_table/mlb_pitch_mix/season_stats content is inside .tmb-cq-root
       (see ps-player-header.php / ps-matchup-view.php / ps-stats-view.php —
       each wraps its own output in that class), so these @container rules
       respond to THIS WIDGET'S width on /my-dash/, not just a narrow browser
       viewport. Page-chrome-only rules (.content-wrapper, the nav bar) stay
       plain @media further down since that markup never appears in a widget. */
    @container (max-width: 768px) {
        .player-header {
            flex-direction: row;
            gap: 10px;
            align-items: center;
        }
    }

    /* 50/50 Matchup Layout — CSS Grid + subgrid for row alignment */
    .ps-matchup-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 0 20px;
    }
    .ps-matchup-left, .ps-matchup-right {
        display: grid;
        grid-row: 1 / -1;
        grid-template-rows: subgrid;
        min-width: 0;
    }
    /* Subgrid children must also allow shrinking for overflow-x scroll */
    .ps-matchup-left > *, .ps-matchup-right > * {
        min-width: 0;
        overflow: hidden;
    }
    /* But let the player strips scroll horizontally inside their clipped parent */
    .without-player-strip {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }
    /* First-visit coachmark for the player strips (mirrors next-player-up) */
    .ps-coachmark {
        position: fixed;
        z-index: 90; /* under the slide-out sidebar (#sidebarMenu = 99), above page content */
        max-width: 300px;
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.20);
        padding: 14px 16px 12px;
        font-size: 0.85rem;
        line-height: 1.45;
        color: #333;
    }
    .ps-coachmark-body .chip-badge { font-size: 0.6rem; vertical-align: middle; margin: 0 1px; }
    .ps-coachmark-btn {
        margin-top: 10px;
        background: #e9ecef;
        color: #000;
        border: 1px solid #ced4da;
        border-radius: 6px;
        padding: 6px 16px;
        font-size: 0.82rem;
        font-weight: 600;
        cursor: pointer;
    }
    .ps-coachmark-btn:hover { background: #dde1e5; }
    /* inset ring so the highlight isn't clipped by the strip's overflow-x scroll */
    .ps-coach-target { box-shadow: inset 0 0 0 2px #ff6b6b; }
    /* Metered paywall: dark overlay over the gated player view (instead of the modal) */
    #ps-locked-zone.ps-paywall-locked { position: relative; min-height: 320px; }
    .tmb-lock-overlay.ppdfs-lock { align-items: flex-start; padding-top: 70px; }
    .ps-matchup-left {
        grid-column: 1;
    }
    .ps-matchup-right {
        grid-column: 2;
        border-left: 1px solid #dee2e6;
        padding-left: 20px;
    }
    @container (max-width: 768px) {
        .ps-matchup-layout {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            gap: 12px;
        }
        .ps-matchup-left, .ps-matchup-right {
            grid-row: auto;
            grid-column: 1;
            display: block;
        }
        .ps-matchup-right {
            border-left: none;
            padding-left: 0;
            border-top: 1px solid #dee2e6;
            padding-top: 12px;
        }
    }

    /* Multi-team filter dropdown */
    #team-filter-select {
        border-color: #dee2e6;
        color: #495057;
    }

    /* Without-player strip + excluded/required states → extracted to /styles/player-injury-common.css */

    /* Stats table */
    .stats-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .stats-table {
        width: 100%;
        font-size: 0.85rem;
    }
    .stats-table thead th {
        position: sticky;
        top: 0;
        background: #343a40;
        color: #fff;
        text-align: center;
        padding: 6px 8px;
        white-space: nowrap;
        font-weight: 600;
        font-size: 0.78rem;
        z-index: 2;
    }
    .stats-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        min-width: 110px;
    }
    .stats-table tbody td {
        text-align: center;
        padding: 6px 8px;
        white-space: nowrap;
    }
    .stats-table tbody td:first-child {
        position: sticky;
        left: 0;
        background: inherit;
        font-weight: 600;
        text-align: left;
        z-index: 1;
    }
    .stats-table tbody tr:nth-child(odd) { background-color: #f8f9fa; }
    .stats-table tbody tr:nth-child(even) { background-color: #fff; }
    .stats-table tbody tr:nth-child(odd) td:first-child { background-color: #f8f9fa; }
    .stats-table tbody tr:nth-child(even) td:first-child { background-color: #fff; }
    .stats-table tbody tr:hover { background-color: #e9ecef; }
    .stats-table tbody tr:hover td:first-child { background-color: #e9ecef; }

    /* Section headers in table */
    .section-header {
        background-color: #e2e6ea !important;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #555;
    }
    .section-header td { text-align: left !important; padding: 4px 8px !important; }

    /* Loading spinner */
    .loading-spinner {
        text-align: center;
        padding: 3rem;
        display: none;
    }
    .loading-spinner .spinner-border { width: 2rem; height: 2rem; }

    /* No results */
    .no-results {
        text-align: center;
        padding: 2rem;
        color: #888;
    }

    /* Side-by-side chart + matchup table within matchup section */
    .matchup-body-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
    }
    .matchup-body-row > .matchup-chart-col {
        flex: 0 0 50%;
        max-width: 50%;
        display: flex;
        flex-direction: column;
    }
    .matchup-body-row > .matchup-chart-col #trend-chart-section {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .matchup-body-row > .matchup-chart-col #trend-chart-section .card {
        flex: 1;
        display: flex;
        flex-direction: column;
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    /* Single border between chart and table when side-by-side */
    .matchup-body-row > .matchup-table-col .table-bordered {
        border-left: none;
    }
    .matchup-body-row > .matchup-chart-col #trend-chart-section .card .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    /* Canvas must be absolute so it can't inflate the flex container on resize */
    .trend-chart-area {
        overflow: hidden;
        /* Floor so the chart still renders when the sibling .matchup-table-col
           is short and can't stretch the row taller via align-items:stretch —
           e.g. NHL's "select a team" placeholder has no stats table like other
           sports do. !important needed to override the inline min-height:0. */
        min-height: 260px !important;
    }
    .trend-chart-area canvas {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
    .matchup-body-row > .matchup-table-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
    #trend-chart-canvas {
        cursor: crosshair;
    }
    @container (max-width: 991px) {
        .matchup-body-row > .matchup-chart-col,
        .matchup-body-row > .matchup-table-col {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .matchup-body-row > .matchup-chart-col #trend-chart-section .card {
            border-right: 1px solid rgba(0,0,0,.125);
            border-top-right-radius: .25rem;
            border-bottom-right-radius: .25rem;
        }
        .matchup-body-row > .matchup-table-col .table-bordered {
            border-left: 1px solid #dee2e6;
        }
        .matchup-body-row > .matchup-chart-col {
            border-bottom: 1px solid rgba(0,0,0,.125);
        }
        /* Chart area needs explicit height when stacked (canvas is absolute-positioned).
           !important needed to override inline min-height:0 on the element */
        .trend-chart-area {
            min-height: 260px !important;
        }
    }

    /* Mobile — page-chrome only (.content-wrapper / nav bar never appear
       inside a widget, so these stay viewport-only). */
    @media (max-width: 767px) {
        .content-wrapper { padding-top: 80px !important; }
        .ps-navigation-header > div:first-child {
            margin-left: 0 !important;
        }
    }
    /* Everything else from that mobile block IS widget content (season_stats'
       stats-table/game-log-btn, player_strip's header/opponent panel) —
       @container so it responds to the widget's own width. */
    @container (max-width: 767px) {
        .stats-table { font-size: 0.78rem; }
        /* Game Log button margin on mobile */
        #btn-gamelog-toggle {
            margin-left: 16px;
        }
        /* Compact player + opponent headers on mobile */
        .player-header {
            margin-top: 16px;
            gap: 8px;
            padding: 0 16px;
        }
        .player-header img {
            width: 50px !important;
            height: 50px !important;
        }
        .player-header h2 {
            font-size: 1.1rem;
        }
        .player-header .team-label {
            font-size: 0.8rem;
        }
        #future-game-label {
            font-size: 0.6rem !important;
        }
        .ps-matchup-left, .ps-matchup-right {
            padding-left: 16px;
            padding-right: 16px;
        }
        .ps-panel-header {
            padding: 0;
        }
    }
    /* Chip badges → extracted to /styles/player-injury-common.css */

    /* Legend / Key */
    .ps-legend {
        display: none;
        align-items: center;
        gap: 10px;
        font-size: 0.75rem;
        color: #666;
        flex-wrap: wrap;
    }
    /* .legend-item, .legend-badge, .legend-sep → in player-injury-common.css */
    .ps-legend .info-tooltip .tooltip-text {
        left: auto;
        right: 0;
        margin-left: 0;
        min-width: 340px;
    }
    .ps-legend .info-tooltip .tooltip-text {
        max-width: 380px;
        font-size: 0.72rem;
        line-height: 1.5;
        padding: 10px 14px;
        white-space: normal;
    }
    .ps-legend .info-tooltip .tooltip-text .out-badge,
    .ps-legend .info-tooltip .tooltip-text .in-badge {
        display: inline-block;
        color: #fff;
        font-weight: 700;
        padding: 0 5px;
        border-radius: 10px;
    }
    .ps-legend .info-tooltip .tooltip-text .out-badge { background: #8b1a2a; }
    .ps-legend .info-tooltip .tooltip-text .in-badge { background: #146c43; }


/* ---- from ps-header.php ---- */
html { overflow-y: auto; -webkit-overflow-scrolling: touch; }
body { min-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Selector row below sticky header (NOT sticky) */
.ps-selector-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0px;
}
/* Remove blue box wrapper, style the select pill itself */
.ps-selector-row .selector-game {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
}
.ps-selector-row #game-selector {
    background-color: rgba(0, 123, 255, 0.08) !important;
    border-color: rgba(0, 123, 255, 0.25) !important;
}
.ps-selector-row #game-selector:hover,
.ps-selector-row #game-selector:focus {
    background-color: rgba(0, 123, 255, 0.12) !important;
    border-color: #007bff !important;
}

/* Date picker: pill with no arrow on any state */
.ps-selector-row #date-picker {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none !important;
}
.ps-selector-row #date-picker:hover,
.ps-selector-row #date-picker:focus {
    background-image: none !important;
}

/* Search input + Stats button: connected pill shape */
.ps-header-right .input-group {
    border-radius: 20px;
    overflow: hidden;
}
.ps-header-right .input-group .form-control {
    border-radius: 20px 0 0 20px !important;
    border-right: none;
}
.ps-header-right .input-group .input-group-append {
    display: flex;
}
.ps-header-right .input-group .input-group-append .btn {
    border-radius: 0 20px 20px 0 !important;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}
#team-players-row {
    display: none !important;
    align-items: center;
    gap: 4px;
}
#team-players-row.active {
    display: none !important;
}
#team-players-row .at-sign { display: none; }

/* This block stays viewport-only (@media, not @container): it's all
   player_strip's CONTROLS fragment ($ps_strip_controls_html in
   widget-render.php), which — like next-player-up's team-selector and
   +EV Props' filter row — intentionally closes/reopens the CALLER's own
   ancestor divs rather than being self-contained, so it can't be wrapped
   in .tmb-cq-root. Minor cosmetic gap on a narrow widget (search box/date
   picker keep their desktop sizing), not a functional one. */
@media (max-width: 767px) {
    .ps-navigation-header .btn-group { margin-right: 0.5rem !important; }
    .ps-header-right {
        max-width: 100% !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .ps-header-right .input-group { order: -1; }
    .ps-selector-row {
        padding-left: 16px;
        padding-right: 16px;
    }
    .ps-selector-row select, .ps-selector-row input[type="date"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    #team-players-row select {
        width: 100% !important;
        max-width: 100%;
    }
    #team-players-row { gap: 4px !important; max-width: 100% !important; }
}

/* ---- from ps-stats-view.php ---- */
/* Skeleton placeholder styling */
.ps-skeleton {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}
.ps-skeleton .skeleton-bar {
    background: #dee2e6;
    border-radius: 3px;
    display: inline-block;
}
.ps-skeleton .skeleton-line {
    background: #e9ecef;
    border-radius: 3px;
    height: 14px;
    margin-bottom: 6px;
}
.ps-skeleton .stats-table tbody td {
    color: transparent;
}
.ps-skeleton .stats-table tbody td::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 12px;
    background: #e9ecef;
    border-radius: 3px;
}
.ps-skeleton .stats-table tbody td:first-child::after {
    width: 60px;
}

/* ---- from ps-trend-chart.php ---- */
/* Custom slider - matches my_systems page styling */
.ps-slider-wrap {
    position: relative;
    flex: 1 1 150px;
    min-width: 120px;
    height: 32px;
}
.ps-slider-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    background: #dee2e6;
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 1;
}
.ps-slider-fill {
    position: absolute;
    height: 4px;
    background: #007bff;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    left: 0;
}
.ps-slider-wrap input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    background: transparent;
    outline: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 3;
    pointer-events: auto;
}
.ps-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
}
.ps-slider-wrap input[type="range"]::-moz-range-track {
    height: 4px;
    background: transparent;
    border: none;
}
.ps-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    margin-top: -7px;
}
.ps-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.ps-slider-val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Info tooltips (matches matchup page style) */
.info-tooltip {
    position: relative;
    display: inline-block;
}
.info-tooltip .tooltip-text {
    display: none;
    width: auto;
    max-width: 350px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px 10px;
    position: absolute;
    z-index: 1000;
    top: 125%;
    left: 50%;
    margin-left: -95px;
    opacity: 0;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.4;
    pointer-events: none;
    transition: opacity 0.2s;
}
.info-tooltip:hover .tooltip-text {
    display: block;
    opacity: 1;
}
.info-tooltip .tooltip-text.tooltip-wide {
    width: 350px;
    white-space: normal;
}
/* Anchor to the right for tooltips near the right edge (chart legend) */
.info-tooltip .tooltip-text.tooltip-anchor-right {
    left: auto;
    right: 0;
    margin-left: 0;
}
@media (max-width: 768px) {
    .info-tooltip .tooltip-text {
        position: fixed;
        left: 50% !important;
        top: auto !important;
        bottom: 50px;
        transform: translateX(-50%);
        margin-left: 0 !important;
        width: 90vw;
        max-width: 350px;
        z-index: 9999;
    }
}

/* Legend: 2-column grid below chart */
.trend-legend-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 10px;
    padding: 4px 6px;
    border-top: 1px solid #eee;
    font-size: 0.82rem;
    align-items: start;
}
.trend-legend-grid .legend-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Each row stretches full width of the column */
.trend-legend-grid .legend-col > div {
    width: 100%;
}
/* Fixed widths for labels and rates so values line up */
.trend-legend-grid .legend-label {
    display: inline-block;
    min-width: 42px;
    flex-shrink: 0;
}
.trend-legend-grid .legend-rate {
    display: inline-block;
    min-width: 26px;
    text-align: right;
    flex-shrink: 0;
}
/* Custom sportsbook dropdown */
.book-dropdown .book-option:hover {
    background: #f0f0f0;
}
.book-dropdown .book-option.selected {
    background: #e8f0fe;
    font-weight: 600;
}
/* .trend-legend-grid is inside ps-matchup-view.php's .tmb-cq-root (via the
   nested ps-trend-chart.php include), so this responds to prop_bar_table's
   own width on /my-dash/. */
@container (max-width: 500px) {
    .trend-legend-grid {
        grid-template-columns: 1fr 1fr;
    }
}
