@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --theme-color: #10b981;
  --accent-glow: rgba(16, 185, 129, 0.38);
}

/* ==========================================================================
   1. LIGHTER, AIRY BIOLUMINESCENT TEAL-SLATE BACKGROUND
   ========================================================================== */
body.argon-theme {
  background-color: #0b162c !important;
  background-image: 
    radial-gradient(circle at 15% 12%, var(--accent-glow), transparent 42%),
    radial-gradient(circle at 85% 25%, rgba(56, 189, 248, 0.22), transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(16, 185, 129, 0.15), transparent 50%),
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 24px 24px !important;
  background-attachment: fixed !important;
  color: #f1f5f9 !important;
}

/* ==========================================================================
   2. HIDE DUPLICATE DESKTOP SEARCH BAR (KEEP ONLY 1 UNIFIED SEARCH BUTTON)
   ========================================================================== */
#globalModuleSearch,
#globalModuleSearchResultBox,
div:has(> #globalModuleSearch) {
  display: none !important;
}

/* ==========================================================================
   3. TRANSLUCENT WINDOWS AERO GLASS PANELS (LIGHTWEIGHT & SEE-THROUGH)
   ========================================================================== */
.argon-header {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(15, 23, 42, 0.52) 50%,
    rgba(15, 23, 42, 0.65) 100%
  ) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

.argon-panel,
.argon-stage,
.bio-region-stage {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(30, 41, 59, 0.42) 45%,
    rgba(15, 23, 42, 0.55) 100%
  ) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  border-top-color: rgba(255, 255, 255, 0.48) !important;
  border-left-color: rgba(255, 255, 255, 0.36) !important;
  box-shadow: 
    0 10px 30px -6px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
}

/* Lighten all inner dark cards (bg-slate-950 / bg-slate-900) so they are airy & transparent */
.argon-panel .bg-slate-950,
.argon-panel .bg-slate-950\/90,
.argon-panel .bg-slate-950\/95,
.argon-panel .bg-slate-950\/85,
.argon-panel .bg-slate-950\/75,
.argon-panel .bg-slate-900,
.argon-panel .bg-slate-900\/90,
.argon-stage .bg-slate-950,
.argon-stage .bg-slate-950\/90,
.argon-stage .bg-slate-950\/85,
.argon-stage .bg-slate-950\/75,
.argon-stage .bg-slate-900 {
  background: rgba(30, 41, 59, 0.36) !important;
  backdrop-filter: blur(12px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Fix inline LaTeX math symbols so they never break onto a new line */
mjx-container {
  display: inline-block !important;
  margin: 0 2px !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   4. HORIZONTAL SWIPEABLE CAROUSEL FOR MODULES (BOTH MOBILE & DESKTOP)
   ========================================================================== */
#moduleNavContainer {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  gap: 0.75rem !important;
  padding: 0.35rem 0.25rem 0.65rem 0.25rem !important;
  max-height: none !important;
  scrollbar-width: none;
}

#moduleNavContainer::-webkit-scrollbar {
  display: none;
}

#moduleNavContainer > * + * {
  margin-top: 0 !important;
}

.mod-nav-card {
  flex: 0 0 260px !important;
  max-width: 280px;
  scroll-snap-align: start;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(30, 41, 59, 0.45) 55%,
    rgba(15, 23, 42, 0.58) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  transition: all 0.22s ease !important;
}

.mod-nav-card.border-emerald-500 {
  border-color: var(--theme-color) !important;
  background: linear-gradient(
    160deg,
    rgba(16, 185, 129, 0.28) 0%,
    rgba(30, 41, 59, 0.55) 100%
  ) !important;
  box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 2px rgba(255, 255, 255, 0.65) !important;
}

/* ==========================================================================
   5. METRIC SLIDER & ANIMATED SVG FLUX
   ========================================================================== */
.metric-scale-slider-wrap {
  min-width: 240px;
  flex: 1;
  max-width: 360px;
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
}

.aero-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #38bdf8 0%, var(--theme-color) 100%);
  outline: none;
}

.aero-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--theme-color) 70%);
  border: 2px solid #ffffff;
  box-shadow: 0 0 12px var(--theme-color);
  cursor: pointer;
}

@keyframes svgFluxFlow {
  to { stroke-dashoffset: -28; }
}
.svg-flux-active {
  stroke-dasharray: 8 6;
  animation: svgFluxFlow 0.9s linear infinite;
}
.svg-flux-blocked {
  stroke-dasharray: 4 6;
  opacity: 0.4;
}
/* ==========================================================================
   6. COMPACT MOBILE HEADER (< 640px)
   - Keeps "🔍 Search" pill with full text as-is
   - Uses compact "📖" icon for Textbook
   - Keeps green "High-Yield Study Bundle" layers pill as previously
   ========================================================================== */
@media (max-width: 640px) {
    /* Clean sizing for Custom Cellulum SVG Logo & Single-Line Subtitle on Mobile */
  .cellulum-logo-svg {
    height: 1.75rem !important;
    width: auto !important;
  }

  .brand-subtitle {
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
    white-space: normal !important;
    max-width: 145px !important;
  }

  /* 1. Keep "🔍 Search" pill button as it is (icon + "Search" text) */
  #openSearchModalBtn {
    padding: 0.4rem 0.75rem !important;
    border-radius: 9999px !important;
    flex-shrink: 0 !important;
  }

  /* 2. Make "📖 Textbook" a compact icon button */
  #openTextbookReaderBtn span {
    display: none !important;
  }

  #openTextbookReaderBtn {
    padding: 0.45rem 0.65rem !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  #openTextbookReaderBtn i {
    margin: 0 !important;
    font-size: 0.85rem !important;
  }

  /* 3. Restore High-Yield Study Bundle green layers pill icon as previously */
  #openBundleModalBtn span {
    display: none !important;
  }

  #openBundleModalBtn {
    padding: 0.45rem 0.65rem !important;
    border-radius: 9999px !important;
    flex-shrink: 0 !important;
  }

  .metric-scale-slider-wrap {
    max-width: 100%;
    width: 100%;
  }
}