/* Tournament Page Styles */

/* Tournament Header */
.tournament-header {
  @apply mb-8;
}

.tournament-logo {
  @apply w-16 h-16 object-contain;
}

.tournament-logo-placeholder {
  @apply w-16 h-16 bg-gray-200 rounded flex items-center justify-center;
}

.tournament-logo-placeholder-text {
  @apply text-2xl font-bold text-gray-600;
}

.tournament-title {
  @apply text-3xl font-bold text-foreground;
}

.tournament-category {
  @apply text-lg text-foreground/60;
}

/* Two Column Layout */
.tournament-layout {
  @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

.tournament-column {
  @apply space-y-6;
}

/* Matches Section */
.matches-section {
  @apply space-y-6;
}

.matches-header {
  @apply flex items-center justify-between;
}

.matches-title {
  @apply text-2xl font-semibold text-foreground;
}

.matches-tabs {
  @apply flex space-x-2;
}

.matches-tab {
  @apply px-3 py-1 rounded-md text-sm font-medium transition-colors;
}

.matches-tab-active {
  @apply bg-blue-100 text-blue-800;
}

.matches-tab-inactive {
  @apply text-gray-600 hover:text-gray-800;
}

.matches-container {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

.matches-list {
  @apply space-y-4;
}

.match-item {
  @apply flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer;
}

.match-teams {
  @apply flex items-center space-x-4;
}

.match-team {
  @apply text-center;
}

.match-team-name {
  @apply font-semibold text-foreground;
}

.match-team-label {
  @apply text-sm text-foreground/60;
}

.match-score {
  @apply text-center;
}

.match-score-value {
  @apply text-2xl font-bold text-foreground;
}

.match-status {
  @apply text-xs font-medium;
}

.match-status-finished {
  @apply text-green-600;
}

.match-status-live {
  @apply text-red-600;
}

.match-status-upcoming {
  @apply text-blue-600;
}

.match-date {
  @apply text-right;
}

.match-date-text {
  @apply text-sm text-foreground/60;
}

/* Statistics Section */
.stats-section {
  @apply space-y-6;
}

.stats-title {
  @apply text-2xl font-semibold text-foreground;
}

.stats-container {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

.stats-list {
  @apply space-y-4;
}

.stat-item {
  @apply flex justify-between items-center;
}

.stat-label {
  @apply text-foreground/80;
}

.stat-value {
  @apply font-semibold text-foreground;
}

.stat-status {
  @apply px-2 py-1 rounded-full text-xs font-medium;
}

.stat-status-active {
  @apply bg-green-100 text-green-800;
}

.stat-status-inactive {
  @apply bg-gray-100 text-gray-800;
}

/* Standings Section */
.standings-container {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

/* Sticky standings table for desktop */
@media (min-width: 1024px) {
  .standings-sticky {
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

.standings-title {
  @apply text-lg font-semibold text-foreground mb-4;
}

.standings-list {
  @apply space-y-3;
}

.standings-item {
  @apply flex items-center justify-between;
}

.standings-position {
  @apply flex items-center space-x-3;
}

.standings-rank {
  @apply w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold;
}

.standings-rank-1 {
  @apply bg-yellow-100 text-yellow-800;
}

.standings-rank-2 {
  @apply bg-gray-100 text-gray-800;
}

.standings-rank-3 {
  @apply bg-orange-100 text-orange-800;
}

.standings-team {
  @apply font-medium text-foreground;
}

.standings-points {
  @apply font-semibold text-foreground;
}

/* Mobile Tournament Tabs */
.mobile-tournament-tabs {
  @apply w-full;
}

.mobile-tournament-tabs .tabs-list {
  @apply w-full grid grid-cols-2;
}

.mobile-tournament-tabs .tabs-trigger {
  @apply flex-1;
}

/* Standings table responsive columns */
.standings-mobile-hidden {
  display: none;
}

@media (min-width: 1024px) {
  .standings-mobile-hidden {
    display: table-cell;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .tournament-layout {
    @apply grid-cols-1;
  }
  
  .tournament-column {
    @apply space-y-4;
  }
}

@media (max-width: 768px) {
  .tournament-header {
    @apply mb-6;
  }
  
  .tournament-logo {
    @apply w-12 h-12;
  }
  
  .tournament-logo-placeholder {
    @apply w-12 h-12;
  }
  
  .tournament-logo-placeholder-text {
    @apply text-xl;
  }
  
  .tournament-title {
    @apply text-2xl;
  }
  
  .tournament-category {
    @apply text-base;
  }
  
  .matches-header {
    @apply flex-col space-y-4;
  }
  
  .matches-tabs {
    @apply w-full justify-center;
  }
  
  .match-item {
    @apply flex-col space-y-3;
  }
  
  .match-teams {
    @apply flex-col space-y-2;
  }
  
  .match-date {
    @apply text-center;
  }
}

/* Loading States */
.tournament-loading {
  @apply animate-pulse;
}

.tournament-skeleton {
  @apply bg-gray-200 rounded;
}

/* Hover Effects */
.match-item:hover {
  @apply transform scale-105 shadow-md;
}

.standings-item:hover {
  @apply bg-gray-50 rounded-lg px-2 py-1;
}

/* Focus States */
.match-item:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

.matches-tab:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-1;
}