/* === Sixers Sports Center — Theme & Global Styles === */

/* ── DARK THEME (default) ─────────────────────────────────── */
:root,
html.theme-dark {
  --background: 222 60% 7%;
  --foreground: 0 0% 100%;
  --card: 222 50% 10%;
  --card-foreground: 0 0% 100%;
  --popover: 222 50% 10%;
  --popover-foreground: 0 0% 100%;
  --primary: 47 94% 50%;
  --primary-foreground: 204 95% 25%;
  --secondary: 163 100% 42%;
  --secondary-foreground: 222 60% 7%;
  --muted: 222 30% 18%;
  --muted-foreground: 0 0% 100% / .6;
  --accent: 163 100% 42%;
  --accent-foreground: 222 60% 7%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 100% / .1;
  --input: 0 0% 100% / .1;
  --ring: 47 94% 50%;
  --navy: 222 60% 7%;
  --off-white: 37 25% 92%;
  --grey: 225 14% 59%;
  --sidebar-background: 222 60% 7%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 47 94% 50%;
  --sidebar-primary-foreground: 204 95% 25%;
  --sidebar-accent: 163 100% 42%;
  --sidebar-accent-foreground: 222 60% 7%;
  --sidebar-border: 0 0% 100% / .1;
  --sidebar-ring: 47 94% 50%;
  color-scheme: dark;
}

/* ── LIGHT THEME ─────────────────────────────────────────── */
html.theme-light {
  --background: 210 40% 97%;
  --foreground: 222 60% 10%;
  --card: 0 0% 100%;
  --card-foreground: 222 60% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 60% 10%;
  --primary: 45 90% 41%;
  --primary-foreground: 204 95% 15%;
  --secondary: 163 72% 32%;
  --secondary-foreground: 0 0% 100%;
  --muted: 210 30% 92%;
  --muted-foreground: 222 30% 40%;
  --accent: 163 72% 32%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 222 20% 80%;
  --input: 222 20% 80%;
  --ring: 45 90% 41%;
  --navy: 222 60% 12%;
  --off-white: 210 40% 97%;
  --grey: 225 14% 45%;
  --sidebar-background: 210 40% 97%;
  --sidebar-foreground: 222 60% 10%;
  --sidebar-primary: 45 90% 41%;
  --sidebar-primary-foreground: 204 95% 15%;
  --sidebar-accent: 163 72% 32%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 222 20% 80%;
  --sidebar-ring: 45 90% 41%;
  color-scheme: light;
}

/* ── LIGHT MODE: page-level overrides ─────────────────────── */
html.theme-light body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}
html.theme-light .glass-nav {
  background: linear-gradient(135deg, rgba(247,195,8,0.06), rgba(248,250,252,0.92)) !important;
  border-bottom: 1px solid rgba(247,195,8,0.25) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.06) !important;
}
html.theme-light .glass-surface {
  background-color: rgba(255,255,255,0.7) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html.theme-light .glass-deep,
html.theme-light .futuristic-card {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html.theme-light .grid-bg {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) !important;
}
html.theme-light .hex-pattern:before {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='70' viewBox='0 0 60 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L55 20 L55 50 L30 65 L5 50 L5 20 Z' fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='0.5'/%3E%3C/svg%3E") !important;
}
html.theme-light .scan-line:after {
  background: linear-gradient(180deg, transparent 0%, rgba(247,195,8,0.03) 50%, transparent 100%) !important;
}
html.theme-light .gold-text {
  background: linear-gradient(135deg, #c9980a, #a67a06) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
html.theme-light .gold-gradient {
  background: linear-gradient(135deg, #d4a008, #a67a06) !important;
}
html.theme-light .accent-stripe:before {
  background: linear-gradient(90deg, transparent, hsl(45 90% 41%) 20%, hsl(45 90% 41%) 80%, transparent) !important;
}
html.theme-light .bg-navy-light {
  background-color: hsl(210 30% 92%) !important;
}
html.theme-light [style*="rgba(4, 14, 28, 0.88)"],
html.theme-light [style*="rgba(4,14,28,0.88)"] {
  background: rgba(255,255,255,0.92) !important;
}
html.theme-light [style*="rgba(4, 14, 28, 0.90)"],
html.theme-light [style*="rgba(4,14,28,0.90)"] {
  background: rgba(255,255,255,0.94) !important;
}
html.theme-light iframe[style*="invert(90%)"] {
  filter: none !important;
}
html.theme-light :not([role="dialog"]) [style*="rgba(247,206,11"],
html.theme-light :not([role="dialog"]) [style*="rgba(247, 206, 11"] {
  color: hsl(45 90% 30%) !important;
}

/* ── i-Track page: always dark ───────────────────────────── */
html.theme-light .itrack-page {
  --foreground: 0 0% 100% !important;
  color: rgba(255,255,255,0.9) !important;
  color-scheme: dark;
}

/* ── THEME TOGGLE BUTTON ──────────────────────────────────── */
#theme-toggle-btn {
  position: fixed;
  bottom: 88px;
  right: 20px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid hsl(var(--primary));
  background: hsl(var(--card));
  color: hsl(var(--primary));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25), 0 0 16px rgba(247,195,8,0.15);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
#theme-toggle-btn:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 24px rgba(247,195,8,0.3);
}
#theme-toggle-btn:active { transform: scale(0.95); }
#theme-toggle-btn svg { transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
#theme-toggle-btn .icon-moon { display: block; }
#theme-toggle-btn .icon-sun  { display: none; }
html.theme-light #theme-toggle-btn .icon-moon { display: none; }
html.theme-light #theme-toggle-btn .icon-sun  { display: block; }

html.theme-transitioning *,
html.theme-transitioning *:before,
html.theme-transitioning *:after {
  transition: box-shadow 0.35s ease, fill 0.35s ease !important;
}

/* ── Hero stat card values — white in light mode ──────────── */
html.theme-light .font-display.text-white {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Metric labels gold in both modes ─────────────────────── */
p.text-foreground\/82,
.font-body.text-foreground\/82 {
  color: #f7ce0b !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
}

/* ── NAV: Force gold links ────────────────────────────────── */
nav .md\:flex button,
nav button.text-primary {
  color: #f7ce0b !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #f7ce0b !important;
}

/* ── Modal styles are fully self-contained in ModifiedBookAFreeTrial.tsx ── */
/* Force dark inputs inside modal regardless of theme */
html.theme-light div[style*="#0f172a"] input,
html.theme-light div[style*="#0f172a"] textarea {
  background: rgba(255,255,255,0.09) !important;
  background-color: rgba(255,255,255,0.09) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255,255,255,0.18) !important;
}
html.theme-light div[style*="#0f172a"] input::placeholder,
html.theme-light div[style*="#0f172a"] textarea::placeholder {
  color: rgba(255,255,255,0.35) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.35) !important;
  opacity: 1 !important;
}
html.theme-light div[style*="#0f172a"] input:-webkit-autofill,
html.theme-light div[style*="#0f172a"] input:-webkit-autofill:hover,
html.theme-light div[style*="#0f172a"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.09) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
}