/* Committed Athlete Card Styling
 * Applies team-colored gradient background with logo watermark effect
 * Usage: Add class "committed-card" to parent and set --team-color CSS variable
 */

/* Base committed card container */
.committed-card {
  position: relative;
  overflow: hidden;
  /* Ensure border-radius is inherited for clipping - fixes loading jank */
  isolation: isolate;
  border-radius: inherit;
}

/* Force rounded corners and clipping on committed cards */
.committed-card.rounded-xl {
  border-radius: 0.75rem !important;
}

.committed-card.rounded-2xl {
  border-radius: 1rem !important;
}

/* Background gradient with team color */
.committed-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    var(--team-color, #3b82f6) 0%,
    color-mix(in srgb, var(--team-color, #3b82f6) 65%, #000) 100%);
  z-index: 0;
  pointer-events: none;
  /* Inherit border-radius to match parent container */
  border-radius: inherit;
}

/* Logo watermark (large faded logo in background) */
.committed-card-logo-bg {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  opacity: 0.18;
  z-index: 1;
  pointer-events: none;
  /* Prevent image from loading outside container bounds */
  clip-path: inset(0);
}

.committed-card-logo-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%) brightness(2);
  /* Prevent initial flash while loading */
  opacity: 0;
  animation: fadeInLogo 0.3s ease-out 0.1s forwards;
}

@keyframes fadeInLogo {
  to {
    opacity: 1;
  }
}

/* Larger watermark variant for bigger cards */
.committed-card-logo-bg.large {
  width: 480px;
  height: 480px;
  right: -80px;
  opacity: 0.22;
}

/* Dark gradient overlay for text readability */
.committed-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.45) 100%);
  z-index: 2;
  pointer-events: none;
  /* Inherit border-radius to match parent container */
  border-radius: inherit;
}

/* Content container - must be above overlay layers */
.committed-card-content {
  position: relative;
  z-index: 3;
}

/* Hover effects for committed cards */
.committed-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25),
              0 0 30px color-mix(in srgb, var(--team-color, #3b82f6) 40%, transparent);
}

/* Transition for smooth hover - specific properties to avoid backdrop-filter blur flash */
.committed-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Text styling overrides for committed cards */
.committed-card .committed-text-primary {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.committed-card .committed-text-secondary {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.committed-card .committed-text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Score/badge box styling for committed cards */
.committed-card .committed-score-box {
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px;
}

.committed-card .committed-score-box * {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Stars styling - uses site accent color (orange/pink), matching non-committed style */
.committed-card .star-filled,
.committed-card .committed-star-filled {
  color: var(--accent-color, #E07856) !important;
}

.committed-card .star-empty,
.committed-card .committed-star-empty {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Small school logo in committed badge */
.committed-school-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.committed-school-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.committed-school-logo-initials {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--team-color, #3b82f6);
}

/* Committed school arrow indicator */
.committed-school-arrow {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 0.25rem;
}

/* Committed school name text */
.committed-school-name {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Override dark mode text colors for committed cards */
.dark .committed-card .committed-text-primary,
.committed-card .committed-text-primary {
  color: #fff !important;
}

.dark .committed-card .committed-text-secondary,
.committed-card .committed-text-secondary {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   INNER CONTENT BOXES - Light/Dark Mode Override
   These elements must always look good on team-colored backgrounds
   ============================================ */

/* Inner info panels (athlete info header) - with blur */
.committed-card .bg-zinc-50\/95,
.committed-card .dark\:bg-zinc-900\/80 {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Other inner panels - no blur to avoid visual issues */
.committed-card .bg-zinc-50,
.committed-card .dark\:bg-zinc-900\/60,
.committed-card .bg-zinc-50\/90,
.committed-card .dark\:bg-zinc-900\/70,
.committed-card .bg-white,
.committed-card .dark\:bg-zinc-800 {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Rank box override */
.committed-card .bg-zinc-100,
.committed-card .dark\:bg-zinc-900 {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Ensure all text inside committed cards is light */
.committed-card .text-zinc-900,
.committed-card .dark\:text-zinc-50,
.committed-card .dark\:text-zinc-100,
.committed-card .text-zinc-800,
.committed-card .dark\:text-zinc-200 {
  color: #fff !important;
}

.committed-card .text-zinc-600,
.committed-card .dark\:text-zinc-400,
.committed-card .text-zinc-500,
.committed-card .dark\:text-zinc-500,
.committed-card .text-zinc-700,
.committed-card .dark\:text-zinc-300 {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Event cards inside committed cards */
.committed-card .bg-accent-15,
.committed-card .dark\:bg-accent-10 {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.committed-card .bg-zinc-50\/80,
.committed-card .dark\:bg-zinc-900\/50 {
  background: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Event card containers - direct override */
.committed-card .event-card {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.committed-card .event-card.bg-accent-15,
.committed-card .event-card[class*="bg-accent"] {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Event card text - event names and marks */
.committed-card .event-card .text-zinc-800,
.committed-card .event-card .dark\:text-zinc-100,
.committed-card .event-card .text-zinc-900,
.committed-card .event-card .text-zinc-700,
.committed-card .event-card .dark\:text-zinc-300,
.committed-card .event-card .dark\:text-zinc-200,
.committed-card .event-card .font-semibold,
.committed-card .event-card .font-medium,
.committed-card .event-card .font-bold {
  color: #fff !important;
}

.committed-card .event-card .text-zinc-600,
.committed-card .event-card .dark\:text-zinc-400 {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Blue chip badge inside event card */
.committed-card .event-card .bg-blue-500\/25,
.committed-card .event-card .dark\:bg-blue-500\/20 {
  background: rgba(59, 130, 246, 0.4) !important;
  color: #fff !important;
}

/* Event points badges */
.committed-card .event-points-badge {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #fff !important;
}

.committed-card .event-points-badge.accent-highlight {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.committed-card .event-points-badge.range-highlight {
  background: rgba(168, 85, 247, 0.4) !important;
  color: #fff !important;
}

/* Inset card shadows for committed cards */
.committed-card .inset-card,
.committed-card .inset-card-light {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3),
              inset 0 1px 3px rgba(0, 0, 0, 0.2),
              0 1px 0 rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Buttons inside committed cards */
.committed-card button:not([class*="bg-accent"]):not([class*="bg-emerald"]):not([class*="bg-red"]) {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.committed-card button:not([class*="bg-accent"]):not([class*="bg-emerald"]):not([class*="bg-red"]):hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Form inputs inside committed cards */
.committed-card input,
.committed-card textarea,
.committed-card select {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.committed-card input::placeholder,
.committed-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Checkboxes */
.committed-card input[type="checkbox"] {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Dividers and borders */
.committed-card .border-zinc-200\/80,
.committed-card .dark\:border-zinc-700\/50,
.committed-card .border-zinc-200,
.committed-card .dark\:border-zinc-700 {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Peak info text in footer */
.committed-card .text-\[11px\] {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Dropdown menus (comparison menu) */
.committed-card .comparison-dropdown {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Chart containers */
.committed-card .athlete-chart-section .bg-zinc-50\/80,
.committed-card .athlete-chart-section .dark\:bg-zinc-900\/50 {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Chart text */
.committed-card .athlete-chart-section .text-zinc-600,
.committed-card .athlete-chart-section .dark\:text-zinc-400,
.committed-card .athlete-chart-section .text-zinc-500 {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Action buttons column border */
.committed-card .add-button-column,
.committed-card .rank-add-column {
  border-left-color: rgba(255, 255, 255, 0.15) !important;
}

/* Add/View buttons in committed cards */
.committed-card .add-button-column button,
.committed-card .rank-add-column button {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

.committed-card .add-button-column button:hover,
.committed-card .rank-add-column button:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* Emerald (View Notes) button in committed cards */
.committed-card button[class*="bg-emerald"] {
  background: rgba(16, 185, 129, 0.4) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #fff !important;
}

.committed-card button[class*="bg-emerald"]:hover {
  background: rgba(16, 185, 129, 0.55) !important;
}

/* Section dividers */
.committed-card .athlete-events-section,
.committed-card .athlete-chart-section {
  border-left-color: rgba(255, 255, 255, 0.15) !important;
}

/* Focus states for accessibility */
.committed-card a:focus-visible,
.committed-card button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8) !important;
  outline-offset: 2px;
}

/* Notes display area */
.committed-card .athlete-notes-display {
  background: rgba(0, 0, 0, 0.25) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Notes form states - add/view/edit (both row and card variants) */
.committed-card .row-add-state,
.committed-card .row-view-state,
.committed-card .row-edit-state,
.committed-card .card-add-state,
.committed-card .card-view-state,
.committed-card .card-edit-state {
  color: #fff;
}

/* Form labels in committed cards */
.committed-card .row-add-state label,
.committed-card .row-view-state label,
.committed-card .row-edit-state label,
.committed-card .row-add-state h4,
.committed-card .row-view-state h4,
.committed-card .row-edit-state h4,
.committed-card .card-add-state label,
.committed-card .card-view-state label,
.committed-card .card-edit-state label,
.committed-card .card-add-state h4,
.committed-card .card-view-state h4,
.committed-card .card-edit-state h4 {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* List checkboxes container */
.committed-card .row-add-state .bg-zinc-50,
.committed-card .row-add-state .dark\:bg-zinc-900\/60,
.committed-card .card-add-state .bg-zinc-50,
.committed-card .card-add-state .dark\:bg-zinc-900\/60 {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Checkbox labels */
.committed-card .row-add-state .hover\:bg-zinc-100:hover,
.committed-card .row-add-state .dark\:hover\:bg-zinc-800:hover,
.committed-card .card-add-state .hover\:bg-zinc-100:hover,
.committed-card .card-add-state .dark\:hover\:bg-zinc-800:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.committed-card .row-add-state .font-medium,
.committed-card .row-add-state .text-zinc-900,
.committed-card .row-add-state .dark\:text-zinc-100,
.committed-card .card-add-state .font-medium,
.committed-card .card-add-state .text-zinc-900,
.committed-card .card-add-state .dark\:text-zinc-100 {
  color: #fff !important;
}

.committed-card .row-add-state .text-zinc-500,
.committed-card .row-add-state .dark\:text-zinc-400,
.committed-card .card-add-state .text-zinc-500,
.committed-card .card-add-state .dark\:text-zinc-400 {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Create new list inline form */
.committed-card .row-add-state [class*="bg-accent-10"],
.committed-card .card-add-state [class*="bg-accent-10"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Notes text in view state */
.committed-card .row-view-state .text-zinc-700,
.committed-card .row-view-state .dark\:text-zinc-300,
.committed-card .card-view-state .text-zinc-700,
.committed-card .card-view-state .dark\:text-zinc-300 {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Close button in view state */
.committed-card .row-view-state .text-zinc-400:hover,
.committed-card .card-view-state .text-zinc-400:hover {
  color: #fff !important;
}

/* Cancel button styling */
.committed-card .row-add-state .bg-zinc-100,
.committed-card .row-add-state .dark\:bg-zinc-700,
.committed-card .row-edit-state .bg-zinc-100,
.committed-card .row-edit-state .dark\:bg-zinc-700,
.committed-card .card-add-state .bg-zinc-100,
.committed-card .card-add-state .dark\:bg-zinc-700,
.committed-card .card-edit-state .bg-zinc-100,
.committed-card .card-edit-state .dark\:bg-zinc-700 {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

.committed-card .row-add-state .bg-zinc-100:hover,
.committed-card .row-edit-state .bg-zinc-100:hover,
.committed-card .card-add-state .bg-zinc-100:hover,
.committed-card .card-edit-state .bg-zinc-100:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Character counter */
.committed-card .char-counter,
.committed-card .edit-char-counter {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Lists section badges */
.committed-card .flex-wrap.gap-2 a[href*="list_detail"] {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

.committed-card .flex-wrap.gap-2 a[href*="list_detail"]:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Star glow effect override for committed cards */
.committed-card .star-accent {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-color) 60%, transparent)) !important;
}

/* Ensure SVG icons are white */
.committed-card svg:not(.committed-card-logo-bg svg) {
  color: currentColor;
}

.committed-card .text-zinc-400 svg,
.committed-card .dark\:text-zinc-600 svg,
.committed-card .text-zinc-500 svg {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Action menu dots */
.committed-card [data-action="toggle-menu"] {
  color: rgba(255, 255, 255, 0.6) !important;
}

.committed-card [data-action="toggle-menu"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

/* Smooth transitions for all elements */
.committed-card *:not(canvas) {
  transition-property: background-color, border-color, color, opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

/* Prevent transition conflicts */
.committed-card canvas {
  transition: none !important;
}

/* Table row variant for list-style cards */
tr.committed-card {
  background: none !important;
}

tr.committed-card > td {
  position: relative;
  background: transparent !important;
}

tr.committed-card > td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

tr.committed-card > td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* For table rows, layers need to be in first cell */
tr.committed-card .committed-card-bg,
tr.committed-card .committed-card-overlay,
tr.committed-card .committed-card-logo-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Ensure table cell content stays above layers */
tr.committed-card td > *:not(.committed-card-bg):not(.committed-card-overlay):not(.committed-card-logo-bg) {
  position: relative;
  z-index: 3;
}

/* Badge overrides for committed cards */
.committed-card .badge,
.committed-card [class*="badge-"] {
  background: rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.committed-card .badge-elite {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.5), rgba(79, 70, 229, 0.5)) !important;
  border-color: rgba(147, 51, 234, 0.4) !important;
}

.committed-card .badge-bluechip {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(6, 182, 212, 0.5)) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Link styling within committed cards */
.committed-card a:not(.committed-school-link) {
  color: rgba(255, 255, 255, 0.9) !important;
}

.committed-card a:hover:not(.committed-school-link) {
  color: #fff !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .committed-card-logo-bg {
    width: 160px;
    height: 160px;
    right: -25px;
  }

  .committed-card-logo-bg.large {
    width: 340px;
    height: 340px;
    right: -60px;
  }

  .committed-school-logo {
    width: 32px;
    height: 32px;
  }
}

/* Ensure loading state clips properly */
.committed-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
}

/* Prevent FOUC (Flash of Unstyled Content) on load */
.committed-card:not(.loaded) .committed-card-logo-bg img {
  opacity: 0;
}

/* Additional container clipping insurance */
.athlete-row.committed-card,
.athlete-card.committed-card {
  overflow: hidden !important;
  contain: paint;
}