/**
 * Match-Up Scoreboard Styles
 * All styling for set-based scoring display
 * Includes IsLive mode animations and states
 */

/* Wrapper for set numbers + container to size together */
.matchup-scoreboard-wrapper {
    width: fit-content;
    margin: 0 auto;
}

/* Dynamic min-width based on best-of series */
.matchup-scoreboard-wrapper[data-best-of="3"] {
    min-width: 500px;
}

.matchup-scoreboard-wrapper[data-best-of="5"] {
    min-width: 600px;
}

/* Set numbers above container */
.set-numbers {
    display: flex;
    align-items: center;
    padding: 0 1.25rem 0.5rem 1.25rem;
    gap: 0.75rem;
}

.set-numbers-spacer {
    flex: 1;
    min-width: 160px;
    max-width: 200px;
}

.set-numbers-current {
    width: 50px;
    flex-shrink: 0;
}

.set-numbers-separator {
    width: 2px;
    margin: 0 0.5rem;
    flex-shrink: 0;
}

.set-number {
    width: 50px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

.set-number.tb-label {
    color: var(--primary-dark);
}

.set-numbers-total {
    width: 50px;
    flex-shrink: 0;
}

/* EXACT copy of .series-match-container */
.matchup-container {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 0;
    min-width: 350px;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.matchup-container:hover {
    border-color: var(--border-focus);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(100, 255, 218, 0.1);
}

.matchup-container.completed {
    border-color: rgba(29, 233, 182, 0.4);
}

/* IsLive mode support */
.matchup-container.live {
    animation: liveMatchPulse 3s ease-in-out infinite;
}

.matchup-container .live-indicator {
    position: absolute;
    top: 50%;
    left: 66.6666666667%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.2s ease;
    z-index: 10;
    pointer-events: none;
    background: transparent;
    border: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.matchup-container:hover .live-indicator {
    opacity: 1;
    pointer-events: all;
}

.matchup-container.live .live-indicator {
    opacity: 0;
}

.matchup-container.live:hover .live-indicator {
    opacity: 1;
    pointer-events: all;
}

.matchup-container.live .live-indicator i {
    color: #ef4444;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.4));
}

.matchup-container.live:hover .live-indicator i {
    color: #ef4444;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6));
}

.matchup-container.live .live-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    z-index: 5;
}

/* Mobile focus support */
@media (max-width: 768px) {
    .matchup-container.mobile-focused {
        border-color: rgba(100, 255, 218, 0.3);
        box-shadow: 0 0 15px rgba(100, 255, 218, 0.15);
    }
}

/* EXACT copy of .series-team-row */
.matchup-team-row {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    min-height: 60px;
}

.matchup-team-row:last-child {
    border-bottom: none;
}

.matchup-team-row.winner {
    background: rgba(100, 255, 218, 0.1);
}

.matchup-team-row.loser {
    opacity: 0.6;
}

/* EXACT copy of .series-team-name */
.matchup-team-name {
    flex: 1;
    min-width: 160px;
    max-width: 200px;
    font-weight: 600;
    padding-right: 1rem;
    text-align: left;
    font-size: 1.02rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matchup-team-row.winner .matchup-team-name {
    color: var(--primary);
    font-weight: 700;
}

.matchup-team-row.loser .matchup-team-name {
    opacity: 0.8;
}

/* EXACT copy of .series-game-score */
.matchup-current-score {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

/* Separator line - GREEN like first example */
.matchup-separator {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    margin: 0 0.5rem;
    flex-shrink: 0;
}

/* EXACT copy of .series-game-score */
.matchup-set-score {
    width: 50px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

/* EXACT copy of .series-total-score */
.matchup-total-sets {
    width: 50px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-dark);
    flex-shrink: 0;
}

.matchup-team-row.winner .matchup-total-sets {
    color: var(--primary);
}

/* TB column styling */
.matchup-set-score.tb-column {
    background: rgba(100, 255, 218, 0.1) !important;
    border-radius: 8px;
}

/* TB column input - lighter background to show green tint through */
.matchup-set-score.tb-column .bracket-score-input {
    background: rgba(100, 255, 218, 0.08) !important;
    border-color: rgba(100, 255, 218, 0.3) !important;
    color: var(--primary) !important;
}

.matchup-set-score.tb-column .bracket-score-input:focus {
    background: rgba(100, 255, 218, 0.15) !important;
    border-color: var(--primary) !important;
}

/* TB label styling */
.set-number.tb-label {
    color: var(--primary-dark);
    font-weight: 700;
}

/* Floating TB indicators - MUST be above focused inputs */
.matchup-set-score > div[id$="-tb-indicator"] {
    z-index: 10 !important;
    pointer-events: none;
}

/* Current score input - special styling for advantage */
.current-score-input {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    touch-action: none; /* Prevent page scroll during swipe */
}

.current-score-input.advantage {
    color: var(--primary);
    font-weight: 700;
}

.bracket-score-input:focus-visible {
    outline: 3px solid rgba(100,255,218,0.18);
    outline-offset: 3px;
}

/* ✅ Winner/Loser input styling for completed matches */
.bracket-score-input.winner-input {
    background: rgba(100, 255, 218, 0.15) !important;
    border-color: rgba(100, 255, 218, 0.4) !important;
    color: var(--primary) !important;
    font-weight: 600;
}

.bracket-score-input.loser-input {
    background: rgba(148, 163, 184, 0.1) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: var(--text-primary) !important;
    opacity: 0.8;
}

.bracket-score-input.winner-input:focus {
    background: rgba(100, 255, 218, 0.25) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1) !important;
}

.bracket-score-input.loser-input:focus {
    background: rgba(148, 163, 184, 0.15) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.05) !important;
}

/* Disabled inputs for unplayed sets */
.bracket-score-input:disabled {
    background: rgba(148, 163, 184, 0.05) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
    color: rgba(148, 163, 184, 0.4) !important;
    cursor: default;
    opacity: 0.5;
}

/* V16: Classic preview container padding with mobile adjustment */
.classic-preview-container {
    padding: 23px 0;
}

@media (max-width: 768px) {
    .classic-preview-container {
        padding: 32px 0;
    }
}