/* Primary Gradient Color Theme for plAi Games */

:root {
  /* New primary gradient */
  --primary-gradient: linear-gradient(to right top, #a8df7f 0%, #57adc6 33%, #a46be9 100%);
  --primary-gradient-hover: linear-gradient(to right top, #95d061 0%, #4599b2 33%, #9558dc 100%);
  
  /* Primary color components from gradient for non-gradient usages */
  --primary-color: #57adc6;
  --primary-dark: #3e96af;
  --secondary-color: #a8df7f;
  --accent-color: #a46be9;
  
  --danger-color: #f06960;
  
  --text-color: #333333;
  --text-secondary: #666666;
  --border-color: #e0e0e0;
  --background-color: #f8f9fa;
  --card-background: #ffffff;
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Apply gradient to primary buttons */
.btn-primary {
  background-image: var(--primary-gradient);
  border: none;
  transition: opacity 0.3s ease;
}

.btn-primary:hover {
  background-image: var(--primary-gradient-hover);
  opacity: 0.95;
}

/* Apply gradient to tabs container */
.tabs-container {
  background-image: var(--primary-gradient);
}

/* Apply primary color to active navigation items */
.main-nav a.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Apply gradient to player management table headers */
.player-table th {
  background-image: var(--primary-gradient);
}

/* Apply gradient or primary color to various UI elements */
.tab-btn.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.settings-tab.active::after {
  background-image: var(--primary-gradient);
}

.player-management h4 {
  color: var(--primary-color);
}

.edit-player:hover {
  background-image: var(--primary-gradient);
}

#saveMatchSettings {
  background-image: var(--primary-gradient);
}

#saveMatchSettings:hover {
  background-image: var(--primary-gradient-hover);
}

/* Apply gradient to score board highlights */
.score-board.game-point {
  box-shadow: 0 0 15px rgba(168, 223, 127, 0.6);
}

.score-board.match-point {
  box-shadow: 0 0 20px rgba(164, 107, 233, 0.7);
}

/* Apply primary color to team serving indication */
.team.serving {
  box-shadow: 0 0 15px rgba(87, 173, 198, 0.5);
}

/* Override any remaining dark mode specific styles */
.score-board {
  background-color: var(--card-background);
}

.modal-content {
  background-color: var(--card-background);
}

.btn-secondary {
  background-color: #f1f3f5;
  color: var(--text-color);
}

.btn-secondary:hover {
  background-color: #e9ecef;
}