/**
 * player-injury-common.css
 * Shared styles for player injury/exclusion UI components.
 * Used by: player-props-dfs, matchup (injury adjust), my-dashboards
 */

/* ================================================================
   INJURY STATUS BADGES
   ================================================================ */
.injury-badge {
    display: inline-block;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 4px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.injury-out { background: var(--tmb-red); opacity: 0.4; }
.injury-doubtful { background: var(--tmb-orange); }
.injury-questionable { background: var(--tmb-blue-alt); }
.injury-probable { background: var(--tmb-green-700); }

/* ================================================================
   HEADSHOT INJURY OVERLAY
   ================================================================ */
.headshot-injury-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.headshot-injury-wrap .headshot-injury-bg {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    z-index: 1;
    pointer-events: none;
}
.headshot-injury-wrap .headshot-injury-bg.injury-bg-out { background: color-mix(in srgb, var(--tmb-red) 25%, transparent); }
.headshot-injury-wrap .headshot-injury-bg.injury-bg-doubtful { background: color-mix(in srgb, var(--tmb-chart-orange) 25%, transparent); }
.headshot-injury-wrap .headshot-injury-bg.injury-bg-questionable { background: color-mix(in srgb, var(--tmb-blue-alt) 25%, transparent); }
.headshot-injury-wrap .headshot-injury-bg.injury-bg-probable { background: color-mix(in srgb, var(--tmb-in) 25%, transparent); }
.headshot-injury-wrap .headshot-injury-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 1px 0;
    border-radius: 0 0 4px 4px;
    z-index: 2;
}
.headshot-injury-label.injury-label-out { background: var(--tmb-red); }
.headshot-injury-label.injury-label-doubtful { background: var(--tmb-orange); }
.headshot-injury-label.injury-label-questionable { background: var(--tmb-blue-alt); }
.headshot-injury-label.injury-label-probable { background: var(--tmb-green-700); }

/* ================================================================
   WITHOUT-PLAYER STRIP (pill strip for toggling players)
   ================================================================ */
.without-player-strip {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 6px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.without-player-strip::-webkit-scrollbar { height: 4px; }
.without-player-strip::-webkit-scrollbar-thumb { background: var(--tmb-gray-400); border-radius: 2px; }
.without-player-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: opacity 0.2s, border-color 0.2s, background-color 0.2s;
    width: 70px;
    text-align: center;
    position: relative;
    background: #fff;
}
.without-player-item:hover { background: color-mix(in srgb, var(--tmb-blue) 8%, transparent); }
/* Required state (green) */
.without-player-item.required,
.opp-player-item.opp-required {
    background: color-mix(in srgb, var(--tmb-in) 8%, transparent);
    border-color: var(--tmb-in);
}
.without-player-item.required .without-player-headshot,
.opp-player-item.opp-required .without-player-headshot {
    box-shadow: 0 0 0 2px var(--tmb-in);
}
/* Excluded state (dimmed) */
.without-player-item.excluded {
    background-color: var(--tmb-gray-100);
    border-color: transparent;
}
.without-player-item.excluded .without-player-headshot { filter: grayscale(100%); opacity: 0.3; }
.without-player-item.excluded .without-player-name { color: var(--tmb-gray-500); }
.without-player-item.excluded .without-player-pos { color: var(--tmb-gray-400); }
.without-player-item.excluded .injury-badge { opacity: 1; background: var(--tmb-out); }
.without-player-item.excluded .chip-badge { opacity: 1; }
/* Opponent excluded state */
.opp-player-item.opp-excluded {
    background-color: var(--tmb-gray-100);
    border-color: transparent;
}
.opp-player-item.opp-excluded .without-player-headshot { filter: grayscale(100%); opacity: 0.3; }
.opp-player-item.opp-excluded .without-player-name { color: var(--tmb-gray-500); }
.opp-player-item.opp-excluded .without-player-pos { color: var(--tmb-gray-400); }
.opp-player-item.opp-excluded .injury-badge { opacity: 1; background: var(--tmb-out); }
.opp-player-item.opp-excluded .chip-badge { opacity: 1; }
/* Select button (appears on hover, centered over headshot) */
.strip-select-btn {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.55rem;
    font-weight: 700;
    color: #fff;
    background: color-mix(in srgb, var(--tmb-gray-600) 85%, transparent);
    padding: 1px 8px;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 3;
    cursor: pointer;
    white-space: nowrap;
}
.without-player-item:hover .strip-select-btn { opacity: 1; }
.without-player-headshot {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--tmb-gray-100);
}
.without-player-name {
    font-size: 0.65rem; font-weight: 600; color: var(--tmb-gray-900);
    margin-top: 2px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 68px;
}
.without-player-pos { font-size: 0.58rem; color: var(--tmb-gray-600); }
@media (max-width: 768px) {
    .without-player-item { width: 60px; }
    .without-player-headshot { width: 36px; height: 36px; }
    .without-player-name { font-size: 0.6rem; max-width: 58px; }
    .strip-select-btn { opacity: 0.8; top: 18px; }
}

/* ================================================================
   EXCLUDED / REQUIRED ROW STYLES (table rows in NPU)
   ================================================================ */
.excluded-row {
    background-color: var(--tmb-gray-100) !important;
}
.excluded-row td {
    color: var(--tmb-gray-500);
}
.excluded-row td.col-player {
    background-color: var(--tmb-gray-100) !important;
}
.excluded-row .player-headshot {
    filter: grayscale(100%);
    opacity: 0.3;
}
.excluded-row .player-name { color: var(--tmb-gray-500); }
.excluded-row .player-pos { color: var(--tmb-gray-400); }
.excluded-row .injury-badge,
.excluded-row .out-badge { color: #fff; }
.excluded-row .injury-out { background: var(--tmb-out); opacity: 1; }
.excluded-row td::after {
    content: '';
}
.required-row {
    background-color: color-mix(in srgb, var(--tmb-in) 8%, transparent) !important;
    border-left: 3px solid var(--tmb-green-700);
}
.required-row td.col-player {
    background-color: color-mix(in srgb, var(--tmb-in) 8%, transparent) !important;
}
.required-row .player-headshot {
    box-shadow: 0 0 0 2px var(--tmb-green-700);
}

/* ================================================================
   STAT CELL DUAL DISPLAY (baseline + adjusted + delta)
   ================================================================ */
.stat-cell .base-stat {
    color: var(--tmb-gray-500);
    text-decoration: line-through;
    font-size: 0.75rem;
    display: block;
    line-height: 1.1;
}
.stat-cell .new-stat {
    font-weight: 700;
    color: var(--tmb-gray-900);
    font-size: 0.85rem;
    display: block;
    line-height: 1.2;
}
.stat-cell .delta {
    font-size: 0.68rem;
    display: block;
    line-height: 1.1;
}
.delta-pos { color: var(--tmb-success-text); }
.delta-neg { color: var(--tmb-danger-text); }
.delta-zero { color: var(--tmb-gray-600); }
.stat-cell .solo-stat {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--tmb-gray-900);
}

/* ================================================================
   OUT / IN BADGES
   ================================================================ */
.out-badge {
    display: inline-block;
    background: var(--tmb-out);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 6px;
    letter-spacing: 0.5px;
}
.in-badge {
    display: inline-block;
    background: var(--tmb-in);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
    margin-left: 6px;
    letter-spacing: 0.5px;
}

/* ================================================================
   CHIP BADGES (compact variant)
   ================================================================ */
.chip-badge {
    display: inline-block;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 10px;
    margin-left: 3px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.chip-badge.badge-out { background: var(--tmb-out); }
.chip-badge.badge-out-dimmed { background: var(--tmb-red); opacity: 0.4; }
.chip-badge.badge-in { background: var(--tmb-in); }

/* ================================================================
   LEGEND BADGES
   ================================================================ */
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.legend-badge {
    display: inline-block;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}
.legend-sep { color: var(--tmb-gray-400); }

/* ================================================================
   EXCLUDED SUMMARY BAR
   ================================================================ */
.excluded-summary {
    background: var(--tmb-warning-bg);
    border: 1px solid var(--tmb-yellow);
    border-radius: 6px;
    padding: 8px 14px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    display: none;
}
.excluded-summary strong { color: var(--tmb-warning-text); }

/* ================================================================
   MATCHUP PAGE: INJURY-ADJUST PILL STRIP
   Compact variant — no headshots, just name pills with status color
   ================================================================ */
.injury-pill-strip {
    padding: 8px 0 4px;
}
.injury-pill-strip .team-pills-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tmb-gray-700);
    margin-bottom: 4px;
}
.injury-pill-strip .team-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}
.injury-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 14px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity 0.2s, background-color 0.2s, border-color 0.2s;
    background: var(--tmb-gray-100);
    color: var(--tmb-gray-900);
    white-space: nowrap;
}
.injury-pill:hover {
    background: color-mix(in srgb, var(--tmb-blue) 8%, transparent);
    border-color: var(--tmb-blue);
}
/* Injury status tints on pills */
.injury-pill.status-out { background: var(--tmb-danger-bg); color: var(--tmb-danger-text); }
.injury-pill.status-doubtful { background: color-mix(in srgb, var(--tmb-chart-orange), white 73%); color: var(--tmb-warning-text); }
.injury-pill.status-questionable { background: var(--tmb-blue-200); color: var(--tmb-blue-800); }
.injury-pill.status-probable { background: var(--tmb-success-bg); color: var(--tmb-success-text); }
/* Neutral pill state (grey/faded, no effect on stats) */
.injury-pill.pill-neutral {
    opacity: 0.45;
    background: var(--tmb-gray-300);
    color: var(--tmb-gray-600);
    border-color: transparent;
}
.injury-pill.pill-neutral:hover {
    opacity: 0.7;
    border-color: var(--tmb-gray-600);
}
/* Excluded / Out pill state (RED) */
.injury-pill.excluded {
    background: var(--tmb-danger-bg);
    color: var(--tmb-danger-text);
    border-color: var(--tmb-red);
    border-width: 2px;
    font-weight: 600;
}
.injury-pill.excluded:hover {
    background: var(--tmb-bad-3);
    border-color: var(--tmb-red-700);
}
/* Included / In pill state (GREEN) */
.injury-pill.included {
    background: var(--tmb-success-bg);
    color: var(--tmb-success-text);
    border-color: var(--tmb-green-700);
    border-width: 2px;
    font-weight: 600;
}
.injury-pill.included:hover {
    background: var(--tmb-success-bg);
    border-color: var(--tmb-in);
}
/* Pill status label */
.injury-pill .pill-status {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.injury-pill .pill-status-neutral {
    text-decoration: line-through;
    opacity: 0.7;
}
.injury-pill .pill-status-out {
    color: var(--tmb-red);
}
.injury-pill .pill-status-in {
    color: var(--tmb-success-text);
}
/* Low-minutes players (<10 MPG) — greyed out, don't affect stats */
.injury-pill.low-minutes {
    opacity: 0.4;
    background: var(--tmb-gray-300);
    color: var(--tmb-gray-600);
    border-color: transparent;
    border-width: 1.5px;
}
.injury-pill.low-minutes.excluded {
    background: var(--tmb-bad-1);
    color: color-mix(in srgb, var(--tmb-danger-text), white 45%);
    border-color: var(--tmb-bad-4);
}
.injury-pill.low-minutes.included {
    background: var(--tmb-good-8);
    color: color-mix(in srgb, var(--tmb-success-text), white 43%);
    border-color: color-mix(in srgb, var(--tmb-in), white 59%);
}
.injury-pill.low-minutes:hover {
    opacity: 0.6;
    border-color: var(--tmb-gray-500);
}
.injury-pill .pill-mpg {
    font-size: 0.48rem;
    font-weight: 400;
    color: var(--tmb-gray-500);
    margin-left: 1px;
}
/* Game count info bar */
.injury-adjust-info {
    font-size: 0.72rem;
    color: var(--tmb-gray-600);
    padding: 4px 0;
    border-top: 1px solid var(--tmb-gray-300);
    margin-top: 4px;
}
.injury-adjust-info .games-removed {
    color: var(--tmb-red);
    font-weight: 600;
}
@media (max-width: 768px) {
    .injury-pill {
        font-size: 0.62rem;
        padding: 2px 7px;
    }
}

/* ================================================================
   STATS LOADING OVERLAY
   ================================================================ */
.stats-loading-overlay {
    position: absolute;
    inset: 0;
    background: var(--tmb-white-70);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 1.5rem;
    color: var(--tmb-gray-600);
    border-radius: 4px;
}