/* ============================================
   COMPARISON VIEW STYLES
   Extends details.css for athlete comparison pages
   ============================================ */

/* Comparison-specific CSS Variables */
:root {
  /* Athlete identification colors (from Chart.js original colors) */
  --compare-athlete-a: rgb(125, 211, 252); /* sky-300 */
  --compare-athlete-b: rgb(16, 185, 129);   /* emerald-500 */

  /* Alpha variants for backgrounds */
  --compare-athlete-a-10: rgba(125, 211, 252, 0.1);
  --compare-athlete-a-20: rgba(125, 211, 252, 0.2);
  --compare-athlete-a-30: rgba(125, 211, 252, 0.3);

  --compare-athlete-b-10: rgba(16, 185, 129, 0.1);
  --compare-athlete-b-20: rgba(16, 185, 129, 0.2);
  --compare-athlete-b-30: rgba(16, 185, 129, 0.3);

  /* Comparison grid layout tokens */
  --compare-grid-sidebar: minmax(300px, 1fr);
  --compare-grid-center: minmax(0, 2fr);
  --compare-grid-gap: 1rem;
  --header-height: 64px;
}

/* ============================================
   LAYOUT SYSTEM
   ============================================ */

/* Main comparison grid layout */
.compare-grid {
  display: grid;
  grid-template-columns: var(--compare-grid-sidebar) var(--compare-grid-center) var(--compare-grid-sidebar);
  gap: var(--compare-grid-gap);
  height: calc(100vh - var(--header-height));
  position: relative;
  z-index: 10;
  padding: 1rem;
}

/* Central column - prevent overflow */
.compare-center {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
}

/* Sidebar minimum width */
.sidebar-glass {
  min-width: 280px;
}

/* ============================================
   ATHLETE COLOR CODING SYSTEM
   ============================================ */

/* Use data attributes for semantic athlete identification */
[data-athlete="a"] {
  --athlete-color: var(--compare-athlete-a);
}

[data-athlete="b"] {
  --athlete-color: var(--compare-athlete-b);
}

/* Text color utilities */
.text-athlete-a {
  color: var(--compare-athlete-a);
}

.text-athlete-b {
  color: var(--compare-athlete-b);
}

/* ============================================
   SELECT / DROPDOWN STYLING
   ============================================ */

/* Standard select styling - uses glass-light from details.css */
select {
  cursor: pointer;
}

select:focus {
  outline: none;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

select option {
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 8px;
}

@media (prefers-color-scheme: light) {
  select option {
    background-color: white;
    color: #2d2d2d;
  }
}

/* ============================================
   TABLE STYLING
   ============================================ */

/* Comparison table headers with enhanced blur */
.table-header-compare {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(60px) saturate(200%) brightness(1.1);
  -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (prefers-color-scheme: light) {
  .table-header-compare {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
    -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

/* ============================================
   COMPARISON SECTION COMPONENTS
   ============================================ */

/* Section headers with dividers */
.comparison-header {
  margin-bottom: 1.5rem;
}

.accent-divider {
  width: 4rem;
  height: 0.125rem;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-color) 10%,
    var(--accent-color) 90%,
    transparent 100%);
  box-shadow: 0 0 20px var(--accent-glow);
  border-radius: 2px;
  margin: 0 auto;
}

/* Score display component */
.score-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 0; /* Allow shrinking */
}

.score-counter {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

@media (prefers-color-scheme: light) {
  .score-counter {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #2d2d2d;
  }
}

/* Athlete name in score display */
.athlete-score {
  font-weight: 700;
  font-size: clamp(0.75rem, 2vw, 1.125rem);
  transition: font-size 0.2s ease;
}

.score-counter {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  transition: all 0.2s ease;
}

/* Responsive text scaling for controls */
@media (max-width: 1280px) {
  .score-counter {
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 1024px) {
  .score-counter {
    padding: 0.5rem 0.75rem;
  }
}

/* Mobile - ensure everything scales down */
@media (max-width: 640px) {
  .score-counter {
    padding: 0.375rem 0.5rem;
  }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet and smaller */
@media (max-width: 1280px) {
  .compare-grid {
    grid-template-columns: 280px 1fr 280px;
  }
}

/* Mobile - stack vertically */
@media (max-width: 1024px) {
  .compare-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0.75rem;
  }

  .sidebar-glass {
    max-height: 300px;
    min-width: unset;
  }
}

/* Compact table styling for small screens */
@media (max-width: 768px) {
  .glass-strong {
    padding: 1rem;
  }

  .glass-strong h2 {
    font-size: 1.25rem;
  }

  .glass-strong table {
    font-size: 0.75rem;
  }
}

/* Text truncation utility */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   LIGHT MODE ENHANCEMENTS
   ============================================ */

@media (prefers-color-scheme: light) {
  /* Comparison sections in light mode */
  .comparison-section,
  section.glass-strong {
    color: #2d2d2d;
  }

  /* Text color overrides for light mode - scoped to compare areas only */
  .compare-grid .text-white {
    color: #2d2d2d !important;
  }

  .compare-grid .text-white\/60 {
    color: rgba(0, 0, 0, 0.6) !important;
  }

  .compare-grid .text-white\/50 {
    color: rgba(0, 0, 0, 0.5) !important;
  }

  .compare-grid .text-white\/40 {
    color: rgba(0, 0, 0, 0.4) !important;
  }

  /* Table styling in light mode - scoped */
  .compare-grid table {
    color: #2d2d2d;
  }

  .compare-grid table tbody tr {
    border-color: rgba(0, 0, 0, 0.05);
  }

  .compare-grid table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03) !important;
  }

  /* Athlete score colors remain vibrant in light mode */
  .text-athlete-a {
    color: rgb(14, 165, 233); /* Darker sky blue for better contrast */
  }

  .text-athlete-b {
    color: rgb(16, 185, 129); /* Emerald stays same - good contrast */
  }

  /* Matchup tally label - scoped */
  .compare-grid .text-center span,
  .compare-grid .text-right span {
    color: rgba(0, 0, 0, 0.6);
  }
}