/* ========================================
   Shytrack — Custom Styles
   Theme: White & Black (Clean, Minimal)
   ======================================== */

/* ---------- Theme Variables ---------- */
:root {
  /* Brand */
  --primary: #4f46e5;          /* Indigo 600 */
  --primary-soft: #eef2ff;     /* Indigo 100 */
  --primary-soft-alt: #fdf2ff; /* Fuchsia 100 */

  /* Surfaces */
  --bg: #f9fafb;               /* Warm gray 50 */
  --bg-card: rgba(255, 255, 255, 0.96);
  --bg-card-hover: #f4f4ff;
  --surface-1: #ffffff;
  --surface-2: #f8fafc;        /* slate-50 */

  /* Text */
  --text-primary: #0f172a;     /* Slate 900 */
  --text-secondary: #64748b;   /* Slate 500 */
  --text-muted: #9ca3af;       /* Slate 400 */

  /* Borders */
  --border-color: #e5e7eb;
  --border-hover: #cbd5f5;

  /* Effects */
  --shadow-elev: 0 10px 30px rgba(15, 23, 42, 0.10);
}

/* ---------- Dark Mode Variables ---------- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Brand */
  --primary: #818cf8;          /* Indigo 400 */
  --primary-soft: rgba(129, 140, 248, 0.14);
  --primary-soft-alt: rgba(236, 72, 153, 0.12);

  /* Surfaces */
  --bg: #0b1220;
  --surface-1: #0f172a;        /* slate-900 */
  --surface-2: #111c33;
  --bg-card: rgba(15, 23, 42, 0.88);
  --bg-card-hover: rgba(17, 28, 51, 0.92);

  /* Text */
  --text-primary: #e2e8f0;     /* slate-200 */
  --text-secondary: #a8b3c7;
  --text-muted: #7b879d;

  /* Borders */
  --border-color: rgba(148, 163, 184, 0.18);
  --border-hover: rgba(129, 140, 248, 0.35);

  /* Effects */
  --shadow-elev: 0 18px 60px rgba(0, 0, 0, 0.40);
}

/* ---------- Base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at top left, var(--primary-soft) 0, transparent 55%),
    radial-gradient(circle at bottom right, var(--primary-soft-alt) 0, transparent 55%),
    var(--bg);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(129, 140, 248, 0.16) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.12) 0, transparent 55%),
    var(--bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 3px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(226, 232, 240, 0.22);
}

/* Custom Scrollbar Utility */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 10px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background: rgba(79, 70, 229, 0.4);
}
html[data-theme="dark"] .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background: rgba(129, 140, 248, 0.4);
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.9rem 0;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(248, 250, 252, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(79, 70, 229, 0.18);
  padding: 0.6rem 0;
}

html[data-theme="dark"] .navbar.scrolled {
  background: rgba(15, 23, 42, 0.72);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.nav-link {
  position: relative;
  color: #111827; /* slightly darker for better visibility */
  transition: color 0.25s ease;
  font-size: 0.875rem;
}

html[data-theme="dark"] .nav-link {
  color: rgba(226, 232, 240, 0.92);
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #06b6d4);
  transition: width 0.25s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ---------- Hero ---------- */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 80px;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 0% 0%, rgba(79, 70, 229, 0.16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.14), transparent 55%);
  opacity: 0.85;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding-top: 75px;
    padding-bottom: 40px;
  }
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 1.7rem;
  background: linear-gradient(135deg, var(--primary), #06b6d4);
  color: #fff;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #4338ca, #0891b2);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.6rem;
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-secondary:hover {
  border-color: rgba(79, 70, 229, 0.7);
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

/* ---------- Feature Cards ---------- */
.feature-card {
  position: relative;
  overflow: hidden;
  padding: 1.75rem;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transform: translateZ(0);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: -120%;
  left: -45%;
  width: 65%;
  height: 320%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(18deg) translateX(-200%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  border: 1.5px solid rgba(79, 70, 229, 0.4);
  opacity: 0;
  transform: scale(0.93);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.feature-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(79, 70, 229, 0.55);
  transform: perspective(1000px) translateY(-32px) scale(1.15) rotateX(5deg);
  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.16), 0 18px 40px rgba(79, 70, 229, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.04);
  z-index: 10;
}

.feature-card:hover::before {
  transform: rotate(18deg) translateX(360%);
}

.feature-card:hover::after {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(79, 70, 229, 0.9);
  box-shadow: inset 0 0 0 1.5px rgba(15, 23, 42, 0.7);
}

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 70, 229, 0.08);
  margin-bottom: 1rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover .feature-icon {
  transform: translateY(-3px) scale(1.05);
  background: rgba(79, 70, 229, 0.12);
}

/* Effect like blur  for other cards when one is hovered */
.feature-card.card-behind {
  transform: scale(0.95) translateZ(-20px);
  opacity: 0.6;
  filter: blur(3px);
  z-index: 1;
}

/* ---------- Step Cards ---------- */
.step-card {
  padding: 2rem 1.5rem;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  text-align: center;
}

.step-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}

.step-number {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: rgba(79, 70, 229, 0.18);
  margin-bottom: 0.75rem;
}

/* ---------- Auth Pages (Login / Signup) ---------- */
.auth-page {
  position: relative;
}

.auth-page::before,
.auth-page::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.45;
  z-index: -1;
}

.auth-page::before {
  background: radial-gradient(circle, rgba(79, 70, 229, 0.65), transparent 60%);
  top: 5%;
  left: 10%;
}

.auth-page::after {
  background: radial-gradient(circle, rgba(244, 114, 182, 0.55), transparent 60%);
  bottom: 0;
  right: 8%;
}

.auth-card {
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(6, 182, 212, 0.06));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.auth-card:hover::before {
  opacity: 1;
}

/* ---------- Scroll Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }

/* ---------- Mobile Menu ---------- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: rgba(15, 23, 42, 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 999;
  transition: right 0.35s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.mobile-menu.open {
  right: 0;
}

.mobile-menu a {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mobile-menu a:hover {
  color: #ffffff;
}

/* ---------- Hamburger ---------- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 1001;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
}

/* ---------- Theme Toggle Button ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.theme-toggle:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(79, 70, 229, 0.6);
}

.theme-toggle:active {
  transform: translateY(0);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.theme-toggle .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.22);
  color: rgba(226, 232, 240, 0.92);
}

html[data-theme="dark"] .theme-toggle:hover {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(129, 140, 248, 0.45);
}

html[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}
html[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

/* ---------- Dark mode compatibility for Tailwind utility-heavy pages ---------- */
html[data-theme="dark"] .bg-white { background-color: var(--surface-1) !important; }
html[data-theme="dark"] .bg-white\/95,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-white\/70,
html[data-theme="dark"] .bg-white\/60,
html[data-theme="dark"] .bg-white\/50 { background-color: rgba(15, 23, 42, 0.88) !important; }
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-gray-50 { background-color: var(--surface-2) !important; }
html[data-theme="dark"] .bg-slate-50\/50,
html[data-theme="dark"] .bg-slate-50\/30,
html[data-theme="dark"] .bg-gray-50\/50,
html[data-theme="dark"] .bg-gray-50\/30 { background-color: rgba(17, 28, 51, 0.85) !important; }
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-gray-100 { background-color: rgba(148, 163, 184, 0.12) !important; }

html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-\[\#111827\],
html[data-theme="dark"] .text-\[\#1a1a1a\] { color: var(--text-primary) !important; }

html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-gray-800 { color: rgba(226, 232, 240, 0.9) !important; }

html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-\[\#4B5563\],
html[data-theme="dark"] .text-\[\#6B7280\] { color: var(--text-secondary) !important; }

html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-gray-600 { color: rgba(168, 179, 199, 0.92) !important; }

html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-\[\#9CA3AF\],
html[data-theme="dark"] .text-\[\#D1D5DB\] { color: var(--text-muted) !important; }

html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-100 { border-color: var(--border-color) !important; }
html[data-theme="dark"] .border-indigo-50,
html[data-theme="dark"] .border-indigo-100,
html[data-theme="dark"] .border-indigo-200 { border-color: var(--border-color) !important; }

html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-xl,
html[data-theme="dark"] .shadow-2xl { box-shadow: var(--shadow-elev) !important; }

html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="dark"] .hover\:bg-slate-50\/50:hover,
html[data-theme="dark"] .hover\:bg-gray-50\/50:hover { background-color: rgba(148, 163, 184, 0.10) !important; }

html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148, 163, 184, 0.12) !important; }

html[data-theme="dark"] .backdrop\:bg-slate-900\/50::backdrop { background-color: rgba(0, 0, 0, 0.65) !important; }

/* Dark mode fixes for arbitrary light backgrounds used in app */
html[data-theme="dark"] .bg-\[\#fafafa\],
html[data-theme="dark"] .bg-\[\#F8F9FA\] { background-color: var(--surface-2) !important; }

/* Auth pages (login/signup) */
html[data-theme="dark"] .auth-card {
  background: rgba(15, 23, 42, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  box-shadow: var(--shadow-elev) !important;
}

html[data-theme="dark"] .auth-card:hover {
  border-color: rgba(129, 140, 248, 0.32) !important;
}

/* Dialogs / forms / inputs (Members modal, etc.) */
html[data-theme="dark"] dialog {
  background-color: var(--surface-1) !important;
  color: var(--text-primary);
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: rgba(15, 23, 42, 0.75) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: rgba(129, 140, 248, 0.55) !important;
}

html[data-theme="dark"] ::placeholder {
  color: rgba(168, 179, 199, 0.75) !important;
}

/* Dashboard gradient header: avoid white stop in dark mode */
html[data-theme="dark"] .via-white {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(15, 23, 42, 0.92), var(--tw-gradient-to) !important;
}

html[data-theme="dark"] .from-indigo-50\/50 {
  --tw-gradient-from: rgba(129, 140, 248, 0.12) !important;
  --tw-gradient-to: rgba(129, 140, 248, 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}


/* ---------- Loading Spinner ---------- */
@keyframes spin-loader {
  to { transform: rotate(360deg); }
}

.spinner-loader {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin-loader 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.btn-loading span, .btn-loading i, .btn-loading svg {
  visibility: hidden;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin-loader 0.8s linear infinite;
}