/**
 * Next Player Up — page-specific styles.
 * Extracted from next-player-up/index.php's inline <style> block so the
 * /my-dash/ widget version (which only returns body HTML, not <head>) can
 * load it too. Excluded/required rows, stat-cell dual display, out/in
 * badges, injury badges live in the shared /styles/player-injury-common.css
 * instead (loaded separately, unchanged).
 */
    .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) */

    /* Team selector */
    #team-selector {
        font-size: 0.9rem;
    }
    #team-selector optgroup {
        font-weight: 700;
        font-style: normal;
        color: #333;
    }
    #team-selector optgroup[label="Playing Today"] {
        color: #155724;
    }
    #team-selector optgroup option {
        font-weight: 400;
        color: #333;
        padding-left: 8px;
    }

    /* Roster table */
    .npu-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Locked-team paywall: dark overlay (matchup style) over the table; stats blurred underneath.
       Uses the DEFAULT white-on-dark .tmb-lock-overlay-content so the Unlock + Sign In buttons
       stay visible — the Sign In button is white text on a transparent fill, so it needs the
       dark veil behind it (a light card made it invisible). */
    .npu-table-wrapper.npu-locked { position: relative; }
    .npu-table-wrapper.npu-locked #npu-tbody td:not(.col-player),
    .npu-table-wrapper.npu-locked #npu-thead-row th:not(.col-player) {
        filter: blur(5px);
        opacity: 0.55;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
    }
    .npu-lock-overlay {
        align-items: flex-start;
        padding-top: 64px;
        background: rgba(0, 0, 0, 0.6);
        cursor: default;
        z-index: 30;
    }
    .npu-lock-overlay:hover { background: rgba(0, 0, 0, 0.6); }
    .npu-lock-overlay .tmb-lock-overlay-content { max-width: 360px; }
    .npu-lock-overlay .tmb-lock-overlay-content .tmb-pw-sub { color: rgba(255, 255, 255, 0.85); }
    .npu-table {
        width: 100%;
        font-size: 0.85rem;
        border-collapse: collapse;
    }
    .npu-table thead th {
        position: sticky;
        top: 0;
        background: #343a40;
        color: #fff;
        text-align: center;
        padding: 8px 10px;
        white-space: nowrap;
        font-weight: 600;
        font-size: 0.78rem;
        z-index: 2;
        border: none;
    }
    .npu-table thead th.col-player {
        text-align: left;
        min-width: 180px;
        position: sticky;
        left: 0;
        z-index: 3;
    }
    .npu-table tbody td {
        text-align: center;
        padding: 8px 10px;
        white-space: nowrap;
        vertical-align: middle;
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.3s;
    }
    .npu-table tbody td.col-player {
        text-align: left;
        position: sticky;
        left: 0;
        z-index: 1;
        background: inherit;
    }
    .npu-table tbody tr {
        transition: opacity 0.3s, background-color 0.2s;
    }
    .npu-table tbody tr:nth-child(odd) { background-color: #f8f9fa; }
    .npu-table tbody tr:nth-child(even) { background-color: #fff; }
    .npu-table tbody tr:nth-child(odd) td.col-player { background-color: #f8f9fa; }
    .npu-table tbody tr:nth-child(even) td.col-player { background-color: #fff; }
    .npu-table tbody tr:hover:not(.excluded-row):not(.required-row) { background-color: #e9ecef; }
    .npu-table tbody tr:hover:not(.excluded-row):not(.required-row) td.col-player { background-color: #e9ecef; }

    /* Player cell with photo */
    .player-cell {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }
    .player-headshot {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        background: #e9ecef;
        flex-shrink: 0;
    }
    .player-info {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }
    .player-name {
        font-weight: 600;
        font-size: 0.85rem;
    }
    .player-pos {
        font-size: 0.7rem;
        color: #888;
    }

    /* First-visit toggle coachmark */
    .npu-coach-target {
        position: relative;
        z-index: 1;
        border-radius: 6px;
        animation: npuCoachPulse 1.4s ease-in-out infinite;
    }
    @keyframes npuCoachPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); }
        50% { box-shadow: 0 0 0 7px rgba(220, 53, 69, 0); }
    }
    .npu-coachmark {
        position: fixed;
        z-index: 90; /* under the slide-out sidebar (#sidebarMenu = 99), above page content (max ~30) */
        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;
    }
    .npu-coachmark-body .out-badge,
    .npu-coachmark-body .in-badge { font-size: 0.6rem; vertical-align: middle; margin: 0 1px; }
    .npu-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;
    }
    .npu-coachmark-btn:hover { background: #dde1e5; }

    /* Excluded/required rows, stat-cell dual display, out/in badges,
       injury badges → extracted to /styles/player-injury-common.css */
    .injury-badge { margin-left: 6px; cursor: help; }

    /* Drill down dropdown */
    .col-drilldown { padding: 4px 6px !important; }
    .drill-dropdown { position: relative; display: inline-block; }
    .npu-drill-btn {
        font-size: 0.7rem;
        padding: 2px 10px;
        border: 1px solid #007bff;
        border-radius: 20px;
        color: #007bff;
        white-space: nowrap;
        display: inline-block;
        background: none;
        cursor: pointer;
    }
    .npu-drill-btn:hover {
        background: #007bff;
        color: #fff;
    }
    .drill-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 1000;
        min-width: 90px;
        margin-top: 4px;
    }
    .drill-menu a {
        display: block;
        padding: 6px 14px;
        font-size: 0.75rem;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
    }
    .drill-menu a:hover {
        background: #f0f0f0;
        color: #007bff;
    }
    .drill-menu a:first-child { border-radius: 6px 6px 0 0; }
    .drill-menu a:last-child { border-radius: 0 0 6px 6px; }
    .drill-dropdown.open .drill-menu { display: block; }
    .excluded-row .drill-dropdown {
        pointer-events: none;
        opacity: 0.3;
    }

    /* Prop line tooltip */
    td.has-props { cursor: help; }
    .prop-tooltip {
        position: absolute;
        z-index: 9999;
        background: #1a1a2e;
        color: #eee;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 0.72rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.35);
        white-space: nowrap;
        pointer-events: none;
    }
    .prop-tooltip-header {
        font-weight: 700;
        color: #8bb4f0;
        margin-bottom: 4px;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
    }
    .prop-tooltip-row {
        display: flex;
        gap: 12px;
        padding: 2px 0;
        align-items: center;
    }
    .prop-tooltip-row + .prop-tooltip-row {
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    .prop-book {
        min-width: 80px;
        color: #ccc;
    }
    .prop-line {
        font-weight: 700;
        color: #fff;
        min-width: 35px;
        text-align: right;
    }
    .prop-odds {
        color: #999;
        font-size: 0.65rem;
    }

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

    /* Placeholder */
    .npu-placeholder {
        text-align: center;
        padding: 1rem 0;
        color: #888;
        border: none;
    }
    .npu-placeholder h5 { border: none; margin-bottom: 0.5rem; background: none; padding-bottom: 0; }

    /* Skeleton loader */
    .npu-skeleton { text-align: left; }
    .skeleton-header-text { text-align: center; margin-bottom: 1.5rem; color: #999; }
    .skeleton-header-text h5 { color: #888; }
    .skeleton-header-text p { font-size: 0.85rem; }

    .skeleton-table { border-radius: 6px; overflow: hidden; }
    .skeleton-thead {
        display: flex;
        background: #343a40;
        padding: 10px 0;
        gap: 0;
    }
    .skeleton-th {
        flex: 1;
        height: 14px;
        margin: 0 10px;
        background: rgba(255,255,255,0.15);
        border-radius: 3px;
    }
    .skeleton-th-player { flex: 2.5; }

    .skeleton-row {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    .skeleton-row:nth-child(odd) { background: #f8f9fa; }
    .skeleton-row:nth-child(even) { background: #fff; }

    .skeleton-cell { flex: 1; display: flex; justify-content: center; padding: 0 10px; }
    .skeleton-cell-player { flex: 2.5; display: flex; align-items: center; gap: 10px; justify-content: flex-start; padding-left: 14px; }

    .skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; background: #ddd; flex-shrink: 0; }
    .skeleton-name-block { display: flex; flex-direction: column; gap: 5px; }
    .skeleton-name { width: 100px; height: 12px; background: #ddd; border-radius: 3px; }
    .skeleton-pos { width: 30px; height: 9px; background: #e5e5e5; border-radius: 3px; }
    .skeleton-stat { width: 36px; height: 12px; background: #ddd; border-radius: 3px; }

    /* Shimmer animation */
    @keyframes shimmer {
        0% { background-position: -200px 0; }
        100% { background-position: 200px 0; }
    }
    .shimmer {
        background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%) !important;
        background-size: 400px 100%;
        animation: shimmer 1.5s ease-in-out infinite;
    }

    /* Status key legend */
    .npu-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 */
    .npu-legend .info-tooltip .tooltip-text {
        left: auto;
        right: 0;
        margin-left: 0;
        min-width: 340px;
    }

    /* .excluded-summary → in player-injury-common.css */

    /* Games count label */
    .games-label {
        font-size: 0.78rem;
        color: #666;
        margin-bottom: 8px;
    }

    /* Info tooltips (matches players page style) */
    .info-tooltip {
        position: relative;
        display: inline-block;
    }
    .info-tooltip .tooltip-text {
        display: none;
        width: auto;
        max-width: 380px;
        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.8rem;
        font-weight: normal;
        line-height: 1.4;
        pointer-events: none;
        transition: opacity 0.2s;
        white-space: normal;
    }
    .info-tooltip:hover .tooltip-text {
        display: block;
        opacity: 1;
    }

    /* Mobile — page-specific only (common rules in front.css).
       .content-wrapper and #team-selector are real-page-chrome / the
       controls fragment (not wrapped in .tmb-cq-root — see npu-body.php's
       docblock on why), so they stay viewport-only; everything else here
       is inside $npu_main_html's .tmb-cq-root and gets the @container
       version below too, so it also responds to a narrow /my-dash/ widget. */
    @media (max-width: 767px) {
        .content-wrapper { padding-top: 80px !important; }
        #team-selector { font-size: 0.8rem; }
    }
    @container (max-width: 767px) {
        .npu-table { font-size: 0.78rem; }
        .player-headshot { width: 28px; height: 28px; }
        .player-name { font-size: 0.78rem; }
        .stat-cell .base-stat { font-size: 0.68rem; }
        .stat-cell .new-stat { font-size: 0.78rem; }
        .stat-cell .delta { font-size: 0.62rem; }
    }
