@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;
  
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;
    
    &:hover {
      @apply bg-gray-300;
    }
    
    &:not([href]) {
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    
    &.current {
      @apply text-white bg-gray-400;
    }
  }
  
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    
    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}

@layer components {
  .player-dot {
    @apply transition-all duration-1000 ease-in-out;
  }

  #listView {
    @apply transition-opacity duration-500 ease-in-out;
  }
}
/* Live Score Animations */

/* Flip animation for score updates */
.score-flip {
  animation: scoreFlip 0.6s ease-in-out;
  transform-style: preserve-3d;
}

@keyframes scoreFlip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
    opacity: 0.5;
  }
  100% {
    transform: rotateY(0deg);
  }
}

/* Highlight effect for updated scores - text-only glow */
.score-updated {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 0%,
    #22c55e 0%,
    #22c55e 0%,
    currentColor 0%,
    currentColor 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: scoreGlow 1.5s ease-out;
  font-weight: 700;
}

@keyframes scoreGlow {
  0% {
    background-position: -200% 0;
    filter: drop-shadow(0 0 0px rgba(34, 197, 94, 0));
  }
  30% {
    background-position: 0% 0;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.8));
  }
  70% {
    background-position: 0% 0;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.8));
  }
  100% {
    background-position: 200% 0;
    filter: drop-shadow(0 0 0px rgba(34, 197, 94, 0));
  }
}

/* Team name glow effect - pure text sweep */
.team-name-glow {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 0%,
    #22c55e 0%,
    #22c55e 0%,
    currentColor 0%,
    currentColor 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textSweepGlow 1.2s ease-out;
  font-weight: 700;
}

@keyframes textSweepGlow {
  0% {
    background-position: -200% 0;
    filter: drop-shadow(0 0 0px rgba(34, 197, 94, 0));
  }
  50% {
    background-position: 0% 0;
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.8));
  }
  100% {
    background-position: 200% 0;
    filter: drop-shadow(0 0 0px rgba(34, 197, 94, 0));
  }
}

/* Enhanced glow for mobile - stronger effect */
@media (max-width: 768px) {
  @keyframes textSweepGlow {
    0% {
      background-position: -200% 0;
      filter: drop-shadow(0 0 0px rgba(34, 197, 94, 0));
    }
    50% {
      background-position: 0% 0;
      filter: drop-shadow(0 0 12px rgba(34, 197, 94, 1));
    }
    100% {
      background-position: 200% 0;
      filter: drop-shadow(0 0 0px rgba(34, 197, 94, 0));
    }
  }
  
  @keyframes scoreGlow {
    0% {
      background-position: -200% 0;
      filter: drop-shadow(0 0 0px rgba(34, 197, 94, 0));
    }
    30% {
      background-position: 0% 0;
      filter: drop-shadow(0 0 10px rgba(34, 197, 94, 1));
    }
    70% {
      background-position: 0% 0;
      filter: drop-shadow(0 0 10px rgba(34, 197, 94, 1));
    }
    100% {
      background-position: 200% 0;
      filter: drop-shadow(0 0 0px rgba(34, 197, 94, 0));
    }
  }
}

/* Enhanced live indicator with pulsing effect */
.live-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  animation: livePulse 2s infinite;
}

.live-indicator .live-dot {
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  animation: dotPulse 1s infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes dotPulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* Score display container */
.score-display {
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-width: 60px;
  text-align: center;
}

/* Fixture container enhancements for live updates */
.fixture-live {
  border-left: 4px solid #dc2626;
  background: linear-gradient(to right, rgba(220, 38, 38, 0.05), transparent);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .score-display {
    font-size: 0.875rem;
  }
  
  .live-indicator .live-dot {
    width: 6px;
    height: 6px;
  }
}

/* Refresh button styling */
.refresh-scores-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.refresh-scores-btn:hover {
  background: #2563eb;
}

.refresh-scores-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* Spin animation for refresh icon */
.refresh-spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */