.alert-positive {
  background-color: var(--color-positive);
}

.alert-negative {
  background-color: var(--color-negative);
}

.text-positive {
  color: var(--color-positive);
}

.text-negative {
  color: var(--color-negative);
}

/* Admin specific container overrides */
.admin-layout .container {
  max-inline-size: 1400px;
  max-width: 1400px;
  padding-inline: 0;
}

/* Full width for odds availability page container */
.admin-layout .container.full-width {
  max-inline-size: none !important;
  max-width: none !important;
  width: 100% !important;
  padding-inline: 1rem !important;
}

.summary {
  padding-block: 0;
}

.tab-content-wrapper {
  pointer-events: none;
}

.tabs-height-md {
  height: 48px !important;
}

/* Taller tabs for better team logo display */
.fixture-tabs .tabs__button {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Fixture Header Styling */
.fixture-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
}

/* Collapsible Player Rows using CSS-Zero accordion */
.player-collapsed-row {
  transition: all 0.2s ease;
  border: 1px solid var(--color-border);
  cursor: pointer;
  padding: 0.5rem 0.5rem;
}

.player-collapsed-row:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.expanded-player-details {
  border: 1px solid var(--color-primary);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  margin-top: -1px;
}

/* Style the details element */
details[name^="player_accordion"] {
  border: none;
}

details[name^="player_accordion"] summary {
  list-style: none;
  text-decoration: none;
}

details[name^="player_accordion"] summary:hover {
  text-decoration: none;
}

details[name^="player_accordion"] summary::-webkit-details-marker {
  display: none;
}

/* Add custom disclosure triangle */
details[name^="player_accordion"] summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-subtle);
  border-bottom: 2px solid var(--color-subtle);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -0.25rem;
}

details[name^="player_accordion"][open] summary::after {
  transform: rotate(225deg);
}

/* Ensure player collapsed row shows pointer cursor */
details[name^="player_accordion"] summary.player-collapsed-row {
  cursor: pointer !important;
}

details[name^="player_accordion"] summary.player-collapsed-row:hover {
  cursor: pointer !important;
}

.stat-box-container {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.overall-section {
  align-items: flex-end;
}

/* Fixed width columns for consistent alignment */
.stat-label {
  width: 60px;
  flex-shrink: 0;
}

.stat-value-column {
  width: 60px;
  flex-shrink: 0;
}

/* Value Alert Icons */
.alert-icon {
  transition: transform 0.2s ease;
  cursor: pointer;
}

.alert-icon:hover {
  transform: scale(1.1);
}

.stat-value-box {
  position: relative;
  border: 2px solid transparent;
  border-radius: 2px;
}

.stat-value-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  width: var(--minutes-border-width, 100%);
}

.low-minutes-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  background-color: #ef4444;
  border-radius: 50%;
}

.fixture-tabs .tabs__button img {
  width: 28px;
  height: 28px;
}

/* Selected tab styling with primary color for all tabs */
.tabs__button[aria-selected="true"] {
  background-color: var(--clr-primary-a0) !important;
  color: white !important;
  border-color: var(--clr-primary-a0) !important;
}

/* Hover states for tabs */
.tabs__button:hover:not([aria-selected="true"]):not(.tabs__button--disabled) {
  background-color: var(--clr-primary-a20) !important;
  color: white !important;
}

/* Only prevent text selection on specific interactive elements where it makes sense */
.tabs__button, .btn, .badge, .circular-progress, details summary {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Specific styling for fixture tabs (preserve existing behavior) */
.fixture-tabs .tabs__button[aria-selected="true"] {
  background-color: var(--clr-primary-a0);
  color: white;
  border-color: var(--clr-primary-a0);
}

/* Fixture header layout */
.fixture-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fixture-header__column {
  display: flex;
  flex-direction: column;
}

.fixture-header__column--left {
  justify-content: center;
  flex: 1;
}

.fixture-header__column--center {
  flex: 2;
  justify-content: center;
  display: flex;
  align-items: center;
}

.fixture-header__column--right {
  justify-content: center;
  align-items: flex-end;
  flex: 1;
}

.fixture-header__venue {
  font-size: 1.125rem;
  display: flex;
  align-items: center;
}

.fixture-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-subtle-bg);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin-inline: 0.75rem;
}

.fixture-team-logo {
  width: 42px;
  height: 42px;
  margin-inline-end: 0.5rem;
}

.player-header {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
}

body {
  color: #ebebeb;
}

.color-primary {
  color: var(--clr-primary-a0);
}

.color-secondary {
  color: var(--color-secondary);
}



.card {
  background-color: linear-gradient(135deg, #1d1d21, #2a2a36) !important;
}

.sidebar-menu__content {
  scrollbar-width: none;
}

:root {
  --clr-primary-a0: oklch(0.56 0.156 142);
  --clr-primary-a0-dark: oklch(0.46 0.156 142);
  --color-positive-light: oklch(0.92 0.10 142); /* Light green for value=1 */
  --color-positive: oklch(0.82 0.13 142);       /* Medium green for value=2 */
  --color-positive-dark: oklch(0.72 0.15 142);   /* Dark green for value=3-4 */
  --color-positive-darker: oklch(0.62 0.18 142); /* Darkest green for value=5+ */
  --color-negative-light: oklch(0.92 0.10 30);   /* Pastel red for value=0 */
  --color-border: var(--clr-surface-a30);
  --border-primary: 1px solid var(--clr-primary-a0);
  --color-scrollbar: var(--clr-primary-a0-dark) !important;
}

.sidebar-menu__button svg.lucide-chevrons-up-down {
  color: inherit !important; 
}

/* Make sidebar icons use our standard green color */
.sidebar-menu__button svg.lucide-icon {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Green text for specific elements on fixtures_by_league page */
.font-semibold.leading-none.mb-1,
.sidebar-menu__brand-name,
.sidebar-menu__brand-tagline,
.sidebar-menu__button-username,
.sidebar-menu__button-role {
  color: var(--clr-primary-a0) !important;
}

.btn-primary {
  background-color: var(--color-secondary) !important;
  color: var(--color-secondary-contrast) !important;
  border-color: var(--color-secondary) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-secondary-hover) !important;
  border-color: var(--color-secondary-hover) !important;
}

.btn-secondary {
  background-color: var(--clr-primary-a0) !important;
  color: var(--clr-primary-a0-contrast) !important;
  border-color: var(--clr-primary-a0) !important;
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--clr-primary-a0-hover) !important;
  border-color: var(--clr-primary-a0-hover) !important;
}

.btn-green-outline {
  --button-green: rgb(50 131 50);
  --button-green-transparent: rgb(50 131 50);
  
  background-color: transparent !important;
  color: var(--button-green) !important;
  border: 1px solid var(--button-green-transparent) !important;
}

.btn-green-outline:hover, .btn-green-outline:focus {
  background-color: var(--button-green-transparent) !important;
  color:  #c7c7c7 !important;
  border-color: var(--button-green) !important;
}

/* Make summary chevrons white */
.sidebar-menu__button:is(summary)::after {
  /* Override the filter to make chevron white */
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

.progress {
 --track: #49494f !important;
}

/* Circular Progress Indicators */
.circular-progress {
  position: relative;
  width: 90px;
  height: 90px;
}

.circular-progress__svg {
  width: 100%;
  height: 100%;
}

.circular-progress__background {
  fill: none;
  stroke: #2a2a3a;
  stroke-width: 4;
  stroke-linecap: round;
}

.circular-progress__foreground {
  fill: none;
  stroke: var(--clr-primary-a0);
  stroke-width: 4;
  stroke-linecap: round;
}

.circular-progress__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.w-full {
  width: 100% !important;
}