/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

/* Alias for no-scrollbar */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Custom Thin Scrollbar for Horizontal Scrollers */
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thin::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  /* slate-200 */
  border-radius: 10px;
}

.scrollbar-thin:hover::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  /* slate-300 */
}

.scrollbar-thumb-indigo-100::-webkit-scrollbar-thumb {
  background: #e0e7ff;
}

.scrollbar-thumb-indigo-200::-webkit-scrollbar-thumb {
  background: #c7d2fe;
}


/* Midnight & Glow: The Official App Design System */
:root {
  --app-bg: #0C0B12;
  --app-surface: #1B1A24;
  --app-surface-accent: #252433;
  --app-primary: #7C4DFF;
  --app-primary-glow: rgba(124, 77, 255, 0.4);
  --app-success: #00E676;
  --app-warning: #FFD600;
  --app-danger: #FF5252;
  --app-text-main: #FFFFFF;
  --app-text-dim: #8E8D9E;
  --app-border: rgba(255, 255, 255, 0.08);
  /* Slightly more visible */
  --youngja-gold: #FFD700;
  --youngja-aura: linear-gradient(135deg, #7C4DFF 0%, #FFD700 100%);
}

.midnight-theme-bg {
  background-color: var(--app-bg) !important;
  color: var(--app-text-main);
  min-height: 100vh;
}

.app-glass-card {
  background: rgba(27, 26, 36, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid var(--app-border);
  border-radius: 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.app-glass-card-premium {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 36px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.app-glass-card-hover:hover {
  background: var(--app-surface-accent);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* 🌌 Discovery Aura (Explore Hero) */
.aura-glow-discovery {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 120%;
  height: 200%;
  background: radial-gradient(circle, rgba(124, 77, 255, 0.15) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}

/* 💎 Premium Shimmer (Discovery Card) */
@keyframes discovery-shimmer {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }

  100% {
    transform: translateX(150%) skewX(-20deg);
  }
}

.shimmer-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: discovery-shimmer 3s infinite;
}

.glow-text-primary {
  color: #fff;
  text-shadow: 0 0 15px rgba(124, 77, 255, 0.6);
}

.glow-text-gold {
  color: #fff;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}



.glow-text-gold {
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  color: var(--youngja-gold);
}

.glow-border-primary {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 15px var(--app-primary-glow);
}

.app-pill {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.app-pill-live {
  background: var(--app-danger);
  color: white;
}

.app-pill-active {
  background: var(--app-primary);
  color: white;
}

.app-pill-dim {
  background: var(--app-surface-accent);
  color: var(--app-text-dim);
}

.app-fab-gradient {
  background: linear-gradient(135deg, #7C4DFF 0%, #651FFF 100%);
  box-shadow: 0 10px 25px rgba(124, 77, 255, 0.4);
}

.orbit-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(124, 77, 255, 0.1) 0%, transparent 70%);
}

/* Select dropdown option styling for dark theme */
select option {
  background-color: #1B1A24;
  color: #E2E8F0;
  padding: 8px;
}

select option:hover,
select option:focus,
select option:checked {
  background-color: #7C4DFF;
  color: #FFFFFF;
}

/* Modal bottom padding to prevent content from being hidden by fixed bottom nav */
.modal-content-safe {
  padding-bottom: 100px;
}

/* For mobile devices with bottom navigation */
@media (max-width: 1024px) {
  .modal-content-safe {
    padding-bottom: 120px;
  }
}