/* Matchups Tab Styles */

/* Compact header layout for league-specific mode */
.compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.team-info.team-left {
  text-align: left;
  align-self: flex-start;
}

.team-info.team-right {
  text-align: right;
  align-self: flex-end;
  margin-left: auto;
}

.team-name-record {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.team-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.team-record {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Score Change Animation Styles */
.score-change-animation {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
  white-space: nowrap;
  animation: scoreFloat 2s ease-out forwards;
}

/* Keyframe animation for floating score changes */
@keyframes scoreFloat {
  0% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  20% {
    opacity: 1;
    transform: translateY(-10px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
}

/* Enhanced matchup card positioning for animations */
.matchup-card-compact {
  position: relative;
  overflow: visible; /* Allow animations to show outside card bounds */
}

/* Score section positioning for animation anchoring */
.score-with-progress {
  position: relative;
}

/* Auto-refresh indicator (optional) */
.auto-refresh-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 0.5em 1em;
  font-size: 0.8em;
  color: var(--text-muted);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.5em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.auto-refresh-indicator.show {
  opacity: 1;
}

.auto-refresh-indicator .spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-primary);
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Enhanced card transitions for smoother updates */
.matchup-card-compact {
  transition: all 0.3s ease;
}

.matchup-card-compact .actual-score {
  transition: color 0.3s ease, transform 0.2s ease;
}

.matchup-card-compact .progress-fill {
  transition: width 0.5s ease;
}

/* Pulse effect for score updates */
.score-updated {
  animation: scorePulse 0.6s ease-out;
}

@keyframes scorePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Grid layout for compact cards */
.matchups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1em;
  margin-bottom: 2em;
}

/* Simplified Compact Matchup Card */
.matchup-card-compact {
  background-color: var(--bg-secondary);
  border-radius: 8px;
  padding: 1em;
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.matchup-card-compact:hover {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

/* Card background tints based on win/loss */
.matchup-card-compact.card-winning {
  background-color: rgba(0, 223, 196, 0.08);
  border-color: rgba(0, 223, 196, 0.2);
}

.matchup-card-compact.card-losing {
  background-color: rgba(244, 67, 54, 0.08);
  border-color: rgba(244, 67, 54, 0.2);
}

.matchup-card-compact.card-winning:hover {
  border-color: rgba(0, 223, 196, 0.4);
}

.matchup-card-compact.card-losing:hover {
  border-color: rgba(244, 67, 54, 0.4);
}

.matchup-card-compact.card-neutral {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

.matchup-card-compact.card-neutral:hover {
  border-color: var(--accent-primary);
}

.compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compact-league-info {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.compact-league-avatar {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.compact-league-name {
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 0.9em;
}

.compact-user-record {
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 500;
}

.compact-scores {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.score-with-avatar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex: 1;
}

.score-with-avatar:last-child {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.score-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Updated score display with progress bar design */
.score-with-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3em;
  min-width: 100px;
}

.actual-score {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

/* Dynamic emphasis based on who's winning - high specificity to override existing rules */
.score-with-avatar .actual-score.winning {
  opacity: 1 !important;
}

.score-with-avatar .actual-score.losing {
  opacity: 0.4 !important;
}

.progress-bar {
  width: 80px;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.progress-fill {
  height: 100%;
  background: #ffa500;
  border-radius: 2px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.projected-label {
  font-size: 0.75em;
  color: var(--text-muted);
  line-height: 1;
  white-space: nowrap;
}

.compact-vs {
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 600;
  opacity: 0.7;
  align-self: center;
}

/* Position Colors */
.position-QB { background: rgba(231, 76, 60, 0.3); color: #e74c3c; }
.position-RB { background: rgba(39, 174, 96, 0.3); color: #27ae60; }
.position-WR { background: rgba(52, 152, 219, 0.3); color: #3498db; }
.position-TE { background: rgba(243, 156, 18, 0.3); color: #f39c12; }
.position-K { background: rgba(155, 89, 182, 0.3); color: #9b59b6; }
.position-DEF { background: rgba(52, 73, 94, 0.3); color: #34495e; }
.position-FLEX { background: rgba(149, 165, 166, 0.3); color: #95a5a6; }
.position-SUPER_FLEX { background: rgba(230, 126, 34, 0.3); color: #e67e22; }
.position-WRRB_FLEX { background: rgba(22, 160, 133, 0.3); color: #16a085; }
.position-REC_FLEX { background: rgba(142, 68, 173, 0.3); color: #8e44ad; }

/* Expanded Matchup Card */
.matchup-card-expanded {
  background-color: var(--bg-secondary);
  border-radius: 12px;
  padding: 1.5em;
  margin-bottom: 1.5em;
  border: 1px solid var(--accent-primary);
  cursor: pointer;
  position: relative;
}

/* Expanded card background tints based on win/loss */
.matchup-card-expanded.card-winning {
  background-color: rgba(0, 223, 196, 0.08);
  border-color: rgba(0, 223, 196, 0.3);
}

.matchup-card-expanded.card-losing {
  background-color: rgba(244, 67, 54, 0.08);
  border-color: rgba(244, 67, 54, 0.3);
}

.matchup-card-expanded.card-neutral {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

.expanded-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5em;
}

.league-info {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.league-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.league-name {
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 1.1em;
}

.week-info {
  color: var(--text-muted);
  font-size: 0.9em;
}

.game-status {
  font-size: 0.8em;
  padding: 0.25em 0.75em;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-upcoming {
  background: rgba(126, 196, 255, 0.1);
  color: var(--accent-primary);
}

.status-live {
  background: rgba(0, 223, 196, 0.1);
  color: var(--accent-success);
  animation: pulse 2s infinite;
}

.status-complete {
  background: rgba(136, 136, 136, 0.1);
  color: var(--text-muted);
}

@keyframes pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.team-side {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.team-header {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
}

.team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.team-info {
  flex: 1;
}

.team-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1.1em;
}

.team-record {
  color: var(--text-muted);
  font-size: 0.85em;
}

.score-display {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  margin-left: auto;
}
.score-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
  min-width: 80px;
}

.score-container span {
  white-space: nowrap;
}
.score-projected {
  color: var(--accent-primary);
}

.projected-stat {
  font-style: italic;
  opacity: 0.7;
  color: #7ec4ff;
}

.vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  color: var(--text-muted);
}

.vs-text {
  font-size: 1.2em;
  font-weight: 600;
}

.lineup-preview {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* Updated lineup section - two columns only */
.lineup-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
  margin-top: 1em;
}

/* Update expanded-content to only handle headers */
.expanded-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: center;
  margin-bottom: 1em;
}

/* Flip the opponent team header layout */
.team-side:last-child .team-header {
  flex-direction: row-reverse;
}

.team-side:last-child .team-info {
  text-align: right;
}

.team-side:last-child .score-display {
  margin-left: 0;
  margin-right: auto;
}

/* Updated starter-player to accommodate new structure */
.starter-player {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.5em;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 0.9em;
  min-width: 0;
  box-sizing: border-box;
}

/* Player performance background tinting */
.starter-player.player-outperforming {
  background: rgba(0, 223, 196, 0.1);
  border-left: 3px solid rgba(0, 223, 196, 0.5);
}

.starter-player.player-underperforming {
  background: rgba(244, 67, 54, 0.1);
  border-left: 3px solid rgba(244, 67, 54, 0.5);
}

/* Player info container */
.player-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

/* Player name styling */
.player-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Position badge styling - smaller and integrated */
.player-position {
  font-size: 0.75em;
  font-weight: 600;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
  line-height: 1;
}

/* Update opponent layout for the new structure */
.starter-player.opponent-layout {
  justify-content: flex-end;
}

.starter-player.opponent-layout .player-info {
  text-align: right;
  align-items: flex-end;
}

/* Score styling for both layouts */
.player-score {
  font-weight: 600;
  min-width: 80px;
  text-align: center;
  white-space: nowrap;
}

.score-live {
  color: var(--accent-success);
}

.score-zero {
  color: var(--text-muted);
}

.matchup-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 0;
  border-top: 1px solid var(--border-color);
  margin-top: 1em;
  font-size: 0.9em;
}

.player-stats {
  font-size: 0.75em;
  color: var(--text-muted);
  line-height: 1.2;
}

.stat-line {
  min-height: 1.2em;
  margin: 0;
}

.summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}



.stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.collapse-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8em;
  margin-top: 1em;
}

.no-matchups {
  text-align: center;
  padding: 3em;
  color: var(--text-muted);
  font-size: 1.1em;
}

/* Expanded view container */
.expanded-view {
  display: none;
}

.expanded-view.active {
  display: block;
}

/* Hide compact grid when expanded */
.matchups-grid.hidden {
  display: none;
}

/* Score coloring classes */
.score-winning {
  color: var(--accent-success) !important;
}

.score-losing {
  color: var(--accent-danger) !important;
}

/* Responsive - KEEP the two-column grid but make elements mobile-friendly */
@media (max-width: 1200px) {
  /* Keep expanded-content as 1fr 1fr - NO STACKING */
  .expanded-content {
    gap: 1em; /* Reduce gap for tighter layout */
  }
  
  .vs-divider {
    order: 2;
    flex-direction: row;
  }
  
  .team-side:first-child {
    order: 1;
  }
  
  .team-side:last-child {
    order: 3;
  }
}

@media (max-width: 768px) {
  .matchups-grid {
    grid-template-columns: 1fr;
  }
  
  .actual-score {
    font-size: 1.2em;
  }
  
  .progress-bar {
    width: 60px;
    height: 5px;
  }
  
  .compact-league-name {
    font-size: 0.85em;
  }
  
  .expanded-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25em;
  }
  
  /* Make team headers more compact on mobile but KEEP HORIZONTAL */
  .team-header {
    gap: 0.15em; /* Force even smaller elements on very narrow screens */
  }
  
  .team-avatar {
    width: 24px; /* Even smaller on mobile */
    height: 24px;
  }
  
  .team-name {
    font-size: 0.75em; /* Smaller text */
  }
  
  .team-record {
    font-size: 0.6em; /* Tiny record text */
  }
  
  .score-display {
    font-size: 1.2em; /* Smaller score */
  }
  
  .lineup-preview {
    max-height: 200px;
    overflow-y: auto;
  }
  
  .expanded-content {
    gap: 0.25em; /* Very tight gap on mobile */
  }
}