/* Match Card Styles */

/* Основная карточка матча */
.match-card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow cursor-pointer;
}

/* Заголовок матча */
.match-card-header {
  @apply flex items-center justify-between mb-3;
}

.match-card-status {
  @apply flex items-center space-x-2;
}

.match-card-status-text {
  @apply text-sm font-medium text-gray-600;
}

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

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

.match-card-status-inprogress {
  @apply text-red-800;
}

.match-card-status-notstarted {
  @apply text-blue-800;
}

.match-card-date {
  @apply text-sm text-gray-500;
}

/* Команды и счет */
.match-card-teams {
  @apply flex items-center justify-between;
}

.match-card-team {
  @apply flex items-center space-x-3 flex-1;
}

.match-card-team-reverse {
  @apply flex items-center space-x-3 flex-1 justify-end;
}

.match-card-team-logo {
  @apply w-8 h-8 object-contain;
}

.match-card-team-placeholder {
  @apply w-8 h-8 bg-gray-200 rounded flex items-center justify-center;
}

.match-card-team-placeholder-text {
  @apply text-xs font-semibold text-gray-600;
}

.match-card-team-info {
  @apply flex-1;
}

.match-card-team-info-reverse {
  @apply flex-1 text-right;
}

.match-card-team-name {
  @apply font-semibold text-gray-900;
}

.match-card-team-short {
  @apply text-sm text-gray-500;
}

/* Счет */
.match-card-score {
  @apply flex items-center space-x-4 mx-4;
}

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

.match-card-score-value {
  @apply text-2xl font-bold text-gray-900;
}

.match-card-score-label {
  @apply text-xs text-gray-500;
}

.match-card-score-separator {
  @apply text-gray-400;
}

/* Дополнительная информация */
.match-card-footer {
  @apply mt-3 pt-3 border-t border-gray-100;
}

.match-card-winner {
  @apply text-sm text-gray-600;
}

.match-card-winner-text {
  @apply font-medium text-green-600;
}

/* Hover эффекты */
.match-card:hover {
  @apply transform scale-105 shadow-lg;
}

.match-card:active {
  @apply transform scale-95;
}

/* Focus состояния */
.match-card:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Responsive дизайн */
@media (max-width: 768px) {
  .match-card {
    @apply p-3;
  }
  
  .match-card-teams {
    @apply flex-col space-y-3;
  }
  
  .match-card-team,
  .match-card-team-reverse {
    @apply flex-1 justify-center;
  }
  
  .match-card-score {
    @apply mx-0 my-2;
  }
  
  .match-card-team-info-reverse {
    @apply text-center;
  }
}

/* Анимации */
.match-card {
  transition: all 0.2s ease-in-out;
}

.match-card-team-logo {
  transition: transform 0.2s ease-in-out;
}

.match-card:hover .match-card-team-logo {
  @apply transform scale-110;
}

/* Статусы матчей */
.match-card-live {
  @apply border-red-200 bg-red-50;
}

.match-card-finished {
  @apply border-green-200 bg-green-50;
}

.match-card-upcoming {
  @apply border-blue-200 bg-blue-50;
}

/* Специальные стили для логотипов команд */
.match-card-team-logo img {
  @apply w-full h-full object-contain;
}

.match-card-team-placeholder {
  @apply flex-shrink-0;
}

/* Улучшения доступности */
.match-card[role="button"] {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.match-card:focus-visible {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}