/* ============================================
   ATHLETE CARD STYLES
   Shared styles for athlete_card.html and athlete_card_chart.html
   ============================================ */

/* CSS Variables are defined in globals.css */

/* Utility classes for accent colors */
.text-accent { color: var(--accent-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-accent-hover:hover { background-color: var(--accent-hover) !important; }
.border-accent { border-color: var(--accent-color) !important; }

/* Opacity variants using color-mix */
.bg-accent-10 { background-color: color-mix(in srgb, var(--accent-color) 10%, transparent) !important; }
.bg-accent-15 { background-color: color-mix(in srgb, var(--accent-color) 15%, transparent) !important; }
.bg-accent-20 { background-color: color-mix(in srgb, var(--accent-color) 20%, transparent) !important; }
.bg-accent-25 { background-color: color-mix(in srgb, var(--accent-color) 25%, transparent) !important; }
.bg-accent-35 { background-color: color-mix(in srgb, var(--accent-color) 35%, transparent) !important; }

.border-accent-25 { border-color: color-mix(in srgb, var(--accent-color) 25%, transparent) !important; }
.border-accent-40 { border-color: color-mix(in srgb, var(--accent-color) 40%, transparent) !important; }
.border-accent-50 { border-color: color-mix(in srgb, var(--accent-color) 50%, transparent) !important; }
.border-accent-60 { border-color: color-mix(in srgb, var(--accent-color) 60%, transparent) !important; }
.border-accent-70 { border-color: color-mix(in srgb, var(--accent-color) 70%, transparent) !important; }

.hover\:border-accent-40:hover { border-color: color-mix(in srgb, var(--accent-color) 40%, transparent) !important; }
.hover\:border-accent-70:hover { border-color: color-mix(in srgb, var(--accent-color) 70%, transparent) !important; }

.hover\:text-accent:hover { color: var(--accent-color) !important; }

.shadow-accent { box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--accent-color) 5%, transparent) !important; }

/* Star drop shadow */
.star-accent {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-color) 80%, transparent))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Dark mode overrides */
.dark .bg-accent-10 { background-color: color-mix(in srgb, var(--accent-color) 10%, transparent) !important; }
.dark .bg-accent-20 { background-color: color-mix(in srgb, var(--accent-color) 20%, transparent) !important; }
.dark .bg-accent-25 { background-color: color-mix(in srgb, var(--accent-color) 25%, transparent) !important; }
.dark .bg-accent-35 { background-color: color-mix(in srgb, var(--accent-color) 30%, transparent) !important; }

.dark .hover\:bg-accent-35:hover { background-color: color-mix(in srgb, var(--accent-color) 30%, transparent) !important; }

/* Smooth scrollbar for list container */
.athlete-card [class*="overflow-y-auto"]::-webkit-scrollbar {
  width: 6px;
}

.athlete-card [class*="overflow-y-auto"]::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.athlete-card [class*="overflow-y-auto"]::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 3px;
}

.athlete-card [class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

/* Pulsing border for cards in comparison */
.in-comparison {
  animation: pulseComparison 2s ease-in-out infinite;
  border: 2px solid var(--accent-color) !important;
}

@keyframes pulseComparison {
  0%, 100% {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25),
                0 10px 25px -5px rgba(0, 0, 0, 0.15),
                0 4px 10px rgba(0, 0, 0, 0.1),
                0 2px 4px rgba(0, 0, 0, 0.06),
                0 0 0 0 var(--accent-color);
  }
  50% {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25),
                0 10px 25px -5px rgba(0, 0, 0, 0.15),
                0 4px 10px rgba(0, 0, 0, 0.1),
                0 2px 4px rgba(0, 0, 0, 0.06),
                0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
  }
}