/**
 * Team Display Modal Component Styles
 * Handles modal animations, team box layouts, and responsive design
 * Uses standardized 0.3s ease-in-out timing for consistency with error messages
 * @author Simeon Tsvetanov
 */

.teams-display {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out,
    backdrop-filter 0.3s ease-in-out;
}

/* Dark theme overlay - Material Design */
body[data-theme="dark"] .teams-display {
  background-color: rgba(0, 0, 0, 0);
}

body[data-theme="dark"] .teams-display:not(.hidden) {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Light theme overlay */
body[data-theme="light"] .teams-display {
  background-color: rgba(255, 255, 255, 0);
}

body[data-theme="light"] .teams-display:not(.hidden) {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.teams-display:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.teams-display__content {
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  max-width: clamp(320px, 90vw, 1000px);
  width: 95%;
  max-height: 90vh;
  position: relative;
  display: flex;
  flex-direction: column;
  transform: translateY(-10px);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  overflow: hidden;
}

/* Dark theme content */
body[data-theme="dark"] .teams-display__content {
  background-color: var(--bg-container-dark);
  color: var(--text-primary-dark);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.4);
}

/* Light theme content */
body[data-theme="light"] .teams-display__content {
  background-color: var(--bg-secondary-light);
  color: var(--text-primary-light);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
}

.teams-display:not(.hidden) .teams-display__content {
  transform: translateY(0);
  opacity: 1;
}

.teams-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(200px, 25vw, 300px), 1fr)
  );
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  overflow-y: auto;
  max-height: calc(90vh - clamp(100px, 15vh, 140px));
  scrollbar-width: auto;
  scrollbar-color: var(--accent-dark) transparent;
  flex: 1;
}

/* Base scrollbar styles - match main input area accent color */
.teams-display .teams-container::-webkit-scrollbar {
  width: 12px !important;
}

.teams-display .teams-container::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 6px;
}

.teams-display .teams-container::-webkit-scrollbar-thumb {
  background-color: var(--accent-dark) !important;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

/* Enhanced visibility on hover - match main scrollbar behavior */
.teams-display .teams-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--button-hover-dark) !important;
}

/* Hide scrollbar during refresh animation */
.teams-display .teams-container.refresh-animation::-webkit-scrollbar {
  display: none !important;
}

/* Firefox scrollbar hiding during animation */
.teams-display .teams-container.refresh-animation {
  scrollbar-width: none !important;
  /* Maintain fixed height during refresh to prevent shrinking */
  min-height: var(--refresh-height, auto);
  transition: none; /* Disable height transitions during refresh */
}

.team-box {
  padding: calc(var(--spacing-xs) * 0.8);
  border-radius: var(--border-radius);
  transition: all 0.3s ease-in-out;
}

body[data-theme="dark"] .team-box {
  background-color: var(--bg-secondary-dark);
  border: 1px solid var(--divider-dark);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Light theme styles */
body[data-theme="light"] .team-box {
  background-color: var(--bg-secondary-light);
  border: 1px solid var(--divider-light);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.team-box h3 {
  margin-bottom: calc(var(--spacing-xs) * 0.5);
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  font-weight: 600;
  text-align: center;
  padding-bottom: calc(var(--spacing-xs) * 0.5);
}

body[data-theme="dark"] .team-box h3 {
  color: var(--text-primary-dark);
  border-bottom: 1px solid var(--divider-dark);
}

/* Light theme h3 styles */
body[data-theme="light"] .team-box h3 {
  color: var(--text-primary-light);
  border-bottom: 1px solid var(--divider-light);
}

.team-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.team-box li {
  padding: calc(var(--spacing-xs) * 0.4) 0;
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  line-height: 1.2;
}

/* Increase item size on mobile by 30% */
@media (max-width: 768px) {
  .team-box li {
    padding: calc(var(--spacing-xs) * 0.55) 0;
    font-size: clamp(0.98rem, 1.56vw, 1.17rem); /* 30% larger */
    line-height: 1.3;
  }
}

body[data-theme="dark"] .team-box li {
  color: var(--text-primary-dark);
  border-bottom: 1px solid var(--divider-dark);
}

/* Light theme li styles */
body[data-theme="light"] .team-box li {
  color: var(--text-primary-light);
  border-bottom: 1px solid var(--divider-light);
}

.team-box li:last-child {
  border-bottom: none !important;
}

/* Team color classes for dynamic styling */
.team-box.team-color-0 {
  background-color: rgba(76, 175, 80, 0.1) !important;
}
.team-box.team-color-1 {
  background-color: rgba(33, 150, 243, 0.1) !important;
}
.team-box.team-color-2 {
  background-color: rgba(156, 39, 176, 0.1) !important;
}
.team-box.team-color-3 {
  background-color: rgba(255, 152, 0, 0.1) !important;
}
.team-box.team-color-4 {
  background-color: rgba(233, 30, 99, 0.1) !important;
}

body[data-theme="dark"] .actions {
  background-color: var(--bg-container-dark);
  border-top: 1px solid var(--divider-dark);
}

.actions .icon-button {
  width: clamp(36px, 6vw, 48px);
  height: clamp(36px, 6vw, 48px);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background-color: var(--accent-dark);
  font-family: "Poppins", sans-serif;
  border: none;
}

.actions .icon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.actions .icon-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.actions .icon-button .material-icons {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 500;
}

/* Add tooltip styles */
.actions .icon-button[title] {
  position: relative;
}

.actions .icon-button[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
}

.spin-once {
  animation: singleSpin 0.5s ease-in-out forwards;
}

/* Animation states for team boxes */
.team-box.visible {
  opacity: 1;
  transform: translateY(0);
}

.team-box.hidden {
  opacity: 0;
  transform: translateY(-10px);
}

/* Actions initial state - hidden until teams are ready */
.actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  margin-top: auto;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Actions visible state */
.actions.visible {
  opacity: 1;
  transform: translateY(0);
}