/* Header Styles */
.header {
  @apply sticky top-0 z-50 w-full border-b bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60;
}

.header-container {
  @apply container mx-auto px-4 flex h-14 max-w-7xl items-center;
}

.header-logo {
  @apply mr-4 hidden md:flex;
}

.header-logo-link {
  @apply mr-6 flex items-center space-x-2;
}

.header-logo-text {
  @apply hidden font-bold sm:inline-block;
}

.header-nav {
  @apply flex items-center space-x-6 text-sm font-medium;
}

.header-nav-link {
  @apply transition-colors hover:text-foreground/80 text-foreground/60;
}

/* Tournament Navigation Styles */
.tournament-nav-item {
  @apply flex items-center space-x-2 transition-colors hover:text-foreground/80 text-foreground/60;
}

.tournament-nav-item-logo {
  @apply h-6 w-auto object-contain;
}

.tournament-nav-item-placeholder {
  @apply h-6 w-6 bg-gray-200 rounded flex items-center justify-center;
}

.tournament-nav-item-placeholder-text {
  @apply text-xs font-semibold text-gray-600;
}

.tournament-nav-item-text {
  @apply text-sm font-medium whitespace-nowrap;
}

/* Ensure tournament names are visible */
.tournament-nav-item span,
.mobile-tournament-item span {
  @apply text-sm font-medium text-foreground/80;
}

/* Force visibility of tournament names */
.tournament-nav-item span {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Limit tournament navigation width */
.header-nav {
  @apply flex items-center space-x-4 text-sm font-medium flex-1;
}

/* Ensure proper alignment with main content */
.header-container {
  @apply container mx-auto px-4 flex h-14 max-w-7xl items-center;
}

/* Logo alignment */
.header-logo {
  @apply mr-4 hidden md:flex flex-shrink-0;
}

.tournament-nav-item {
  @apply flex items-center space-x-2 transition-colors hover:text-foreground/80 text-foreground/60 max-w-32;
}

.tournament-nav-item span {
  @apply truncate;
}

/* Responsive tournament navigation */
@media (max-width: 1024px) {
  .tournament-nav-item {
    @apply max-w-24;
  }
}

@media (max-width: 768px) {
  .tournament-nav-item {
    @apply max-w-20;
  }
}

/* Mobile Menu Styles */
.mobile-menu-button {
  @apply inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 mr-2 md:hidden;
}

.mobile-menu {
  @apply md:hidden transition-all duration-200;
}

.mobile-menu.open {
  @apply block;
}

.mobile-menu.closed {
  @apply hidden;
}

.mobile-menu-content {
  @apply px-4 py-2 border-t border-gray-200 bg-white;
}

.mobile-nav {
  @apply space-y-2;
}

.mobile-nav-link {
  @apply block px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md;
}

.mobile-tournament-item {
  @apply flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-md;
}

.mobile-tournament-item-logo {
  @apply h-6 w-auto object-contain;
}

.mobile-tournament-item-placeholder {
  @apply h-6 w-6 bg-gray-200 rounded flex items-center justify-center;
}

.mobile-tournament-item-placeholder-text {
  @apply text-xs font-semibold text-gray-600;
}

/* Mobile tournament spacing */
.mobile-tournament-item span {
  @apply text-sm font-medium;
}

/* Right side actions */
.header-actions {
  @apply flex flex-1 items-center justify-between space-x-2 md:justify-end;
}

.header-search {
  @apply w-full flex-1 md:w-auto md:flex-none;
}

.header-search-content {
  @apply relative;
}

.header-right-nav {
  @apply flex items-center space-x-2;
}

.header-theme-button {
  @apply inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tournament-dropdown-menu {
    @apply w-56;
  }
  
  .tournament-item {
    @apply px-3 py-2;
  }
  
  .tournament-item-logo {
    @apply w-5 h-5;
  }
  
  .tournament-item-placeholder {
    @apply w-5 h-5;
  }
}

/* Animation improvements */
.mobile-menu {
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
}

.mobile-menu.open {
  transform: translateY(0);
}

/* Focus states for accessibility */
.mobile-menu-button:focus,
.header-theme-button:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

.mobile-nav-link:focus,
.mobile-tournament-item:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-1;
}