/* Custom styles for 10-kampen (FM) webapp */

:root {
  --color-gold: #f59e0b;
  --color-silver: #94a3b8;
  --color-bronze: #b45309;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: #050505;
  color: #e2e8f0;
}

/* Glassmorphism containers */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease-in-out;
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.glass-input {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transition: border-color 0.2s;
}

.glass-input:focus {
  border-color: #38bdf8;
  outline: none;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

/* Medals & Podium */
.podium-1 {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.02) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.1);
}

.podium-2 {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.15) 0%, rgba(148, 163, 184, 0.02) 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 8px 32px rgba(148, 163, 184, 0.08);
}

.podium-3 {
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.15) 0%, rgba(180, 83, 9, 0.02) 100%);
  border: 1px solid rgba(180, 83, 9, 0.35);
  box-shadow: 0 8px 32px rgba(180, 83, 9, 0.08);
}

.medal-badge-1 {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #000;
  font-weight: 700;
}

.medal-badge-2 {
  background: linear-gradient(135deg, #e2e8f0, #94a3b8);
  color: #000;
  font-weight: 700;
}

.medal-badge-3 {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #fff;
  font-weight: 700;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Tab active indicator */
.tab-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Shimmer animation */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s infinite ease-in-out;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Dropdown Styling */
.custom-dropdown {
  user-select: none;
}

.custom-dropdown-trigger {
  cursor: pointer;
  outline: none;
}

.custom-dropdown-trigger:focus-visible {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

.dropdown-active-parent {
  position: relative !important;
  z-index: 50 !important;
}

.custom-dropdown.is-open {
  position: relative !important;
  z-index: 60 !important;
}

.custom-dropdown-menu,
#year-dropdown-menu {
  background: #14151a !important;
  background-color: #14151a !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: dropdownFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100 !important;
}

.custom-dropdown-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.custom-dropdown-item:last-child {
  border-bottom: none;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Fallback native select styling */
select.glass-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  padding-right: 2.25rem !important;
  cursor: pointer;
}