/* Light Theme Overrides */
[data-theme="light"] {
  --midnight: #f5f7fa;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-card: #ffffff;

  --text-primary: #1a1a2e;
  --text-secondary: #5a5a6e;
  --text-muted: #8a8a9e;
  --text-inverse: #ffffff;

  --gradient-dark: linear-gradient(180deg, #f0f2f5, #f5f7fa);
  --gradient-card: linear-gradient(145deg, rgba(0,0,0,0.02), rgba(0,0,0,0.005));
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-teal: 0 2px 12px rgba(13, 115, 119, 0.15);
  --shadow-glow: 0 0 24px rgba(13, 115, 119, 0.08);

  --teal-ghost: rgba(13, 115, 119, 0.06);
  --teal-glow: rgba(13, 115, 119, 0.12);

  --coral-soft: rgba(239, 68, 68, 0.08);
  --green-soft: rgba(16, 185, 129, 0.08);
}

/* Body & App Shell */
[data-theme="light"] body {
  background: #f5f7fa;
  color: #1a1a2e;
}

/* Topbar */
[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

[data-theme="light"] .topbar__title {
  color: #1a1a2e;
}

[data-theme="light"] .topbar__action {
  color: #1a1a2e;
}

[data-theme="light"] .topbar__action:active {
  background: rgba(0,0,0,0.04);
}

[data-theme="light"] .topbar__action i {
  color: #3a3a4e !important;
}

/* Bottom Nav */
[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,0.06);
}

[data-theme="light"] .nav-item__icon {
  color: #8a8a9e;
}

[data-theme="light"] .nav-item__label {
  color: #8a8a9e;
}

[data-theme="light"] .nav-item--active .nav-item__icon,
[data-theme="light"] .nav-item--active .nav-item__label {
  color: var(--teal);
}

[data-theme="light"] .nav-item__logo-ring {
  box-shadow: 0 4px 20px rgba(13,115,119,0.25), 0 0 0 4px rgba(255,255,255,0.94) !important;
}

[data-theme="light"] .nav-item--active.nav-item--center .nav-item__logo-ring {
  box-shadow: 0 4px 24px rgba(13,115,119,0.3), 0 0 0 4px rgba(255,255,255,0.94), 0 0 40px rgba(13,115,119,0.1) !important;
}

@keyframes logoPulseLight {
  0%, 100% { box-shadow: 0 4px 24px rgba(13,115,119,0.3), 0 0 0 4px rgba(255,255,255,0.94), 0 0 40px rgba(13,115,119,0.1); }
  50% { box-shadow: 0 4px 28px rgba(13,115,119,0.4), 0 0 0 4px rgba(255,255,255,0.94), 0 0 50px rgba(13,115,119,0.15); }
}

[data-theme="light"] .nav-item--active.nav-item--center .nav-item__logo-ring {
  animation: logoPulseLight 3s ease-in-out infinite;
}

[data-theme="light"] .nav-item__badge {
  border-color: #ffffff;
}

/* Cards */
[data-theme="light"] .card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

[data-theme="light"] .card--glass {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.06);
}

[data-theme="light"] .card--elevated {
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .card--interactive:active {
  border-color: rgba(13,115,119,0.15);
  box-shadow: 0 2px 8px rgba(13,115,119,0.08);
}

[data-theme="light"] .card--teal {
  background: var(--gradient-teal);
  border: none;
}

/* Inputs */
[data-theme="light"] .input-field {
  background: #f5f7fa;
  border: 1px solid rgba(0,0,0,0.1);
  color: #1a1a2e;
}

[data-theme="light"] .input-field::placeholder {
  color: #9ca3af;
}

/* Buttons */
[data-theme="light"] .btn--secondary {
  background: #f0f2f5;
  color: #1a1a2e;
  border: 1px solid rgba(0,0,0,0.08);
}

[data-theme="light"] .btn--outline {
  border: 2px solid var(--teal);
  color: var(--teal);
}

[data-theme="light"] .btn--ghost {
  color: var(--teal);
}

[data-theme="light"] .btn:active::after {
  background: rgba(0,0,0,0.05);
}

/* Chips */
[data-theme="light"] .chip {
  background: #f0f2f5;
  border: 1px solid rgba(0,0,0,0.06);
  color: #5a5a6e;
}

[data-theme="light"] .chip--active {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}

/* Badges - keep readable */
[data-theme="light"] .badge--teal {
  background: rgba(13, 115, 119, 0.08);
  color: var(--teal);
}

[data-theme="light"] .badge--gold {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}

[data-theme="light"] .badge--green {
  background: rgba(16, 185, 129, 0.08);
  color: #059669;
}

[data-theme="light"] .badge--coral {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
}

/* Icon boxes */
[data-theme="light"] .icon-box--teal {
  background: rgba(13, 115, 119, 0.08);
  color: var(--teal);
}

[data-theme="light"] .icon-box--gold {
  background: rgba(245, 158, 11, 0.08);
  color: #d97706;
}

[data-theme="light"] .icon-box--accent {
  background: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
}

/* List items */
[data-theme="light"] .list-item:active {
  background: rgba(13,115,119,0.04);
}

/* Divider */
[data-theme="light"] .divider {
  background: rgba(0,0,0,0.06);
}

/* Toast */
[data-theme="light"] .toast {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Bottom sheet */
[data-theme="light"] .bottom-sheet {
  background: #ffffff;
}

[data-theme="light"] .bottom-sheet__handle {
  background: rgba(0,0,0,0.15);
}

/* Overlay */
[data-theme="light"] .overlay {
  background: rgba(0, 0, 0, 0.3);
}

/* Skeleton loader */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, #f0f2f5 25%, #e5e7eb 50%, #f0f2f5 75%);
  background-size: 200% 100%;
}

/* Section title */
[data-theme="light"] .section-title {
  color: #1a1a2e;
}

/* Scrollbar */
[data-theme="light"] #screen-container::-webkit-scrollbar-track {
  background: #f5f7fa;
}

/* Screen base */
[data-theme="light"] .screen {
  color: #1a1a2e;
}

/* Avatar */
[data-theme="light"] .avatar {
  background: #f0f2f5;
}

/* Screen backgrounds — catch the common inline bg pattern */
[data-theme="light"] .screen {
  background: #f5f7fa;
}

/* Splash stays dark — it's the brand moment */
[data-theme="light"] .screen--no-nav[style*="background: #0f0f1a"][style*="min-height: 100vh"] {
  /* Handled by JS swapper for actual override */
}

/* Quick stats boxes in dashboard */
[data-theme="light"] [style*="background: #1e1e36"],
[data-theme="light"] [style*="background:#1e1e36"] {
  background: #f0f2f5 !important;
}

/* Settings icon box in dashboard */
[data-theme="light"] .icon-box[style*="rgba(255,255,255,0.08)"] {
  background: rgba(0,0,0,0.05) !important;
}

/* QR code card stays white bg in light mode */
[data-theme="light"] .card--glass[data-screen="qr-pass"] {
  border: 1px solid rgba(13,115,119,0.15);
  background: rgba(255,255,255,0.95);
}

/* Registration form cards */
[data-theme="light"] .input-field,
[data-theme="light"] input[style*="background: rgba(255,255,255,0.05)"],
[data-theme="light"] input[style*="background:rgba(255,255,255,0.05)"] {
  background: #f5f7fa !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #1a1a2e !important;
}

/* Make sure teal gradient cards/buttons keep white text */
[data-theme="light"] .card--teal,
[data-theme="light"] .card--teal h3,
[data-theme="light"] .card--teal p,
[data-theme="light"] .card--teal span,
[data-theme="light"] .btn--primary,
[data-theme="light"] [style*="background: linear-gradient(135deg, #0D7377"] h3,
[data-theme="light"] [style*="background: linear-gradient(135deg, #0D7377"] p {
  color: #fff !important;
}

/* Hero banners on teal gradient should keep white text */
[data-theme="light"] [style*="background: linear-gradient(135deg, #0D7377"] .badge {
  color: inherit;
}

/* Home screen hero banner text stays white */
[data-theme="light"] .card[style*="background: linear-gradient(135deg, #0D7377"] h3,
[data-theme="light"] .card[style*="background: linear-gradient(135deg, #0D7377"] p {
  color: #fff !important;
}

/* Sport/Facility hero image overlays */
[data-theme="light"] [style*="linear-gradient(to bottom, rgba(15,15,26"] {
  background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent) !important;
}

/* Success screen ghost watermarks */
[data-theme="light"] [style*="opacity:0.04"],
[data-theme="light"] [style*="opacity: 0.04"],
[data-theme="light"] [style*="opacity:0.06"] {
  opacity: 0.03 !important;
}

/* Tab-like filter pills */
[data-theme="light"] [style*="background:rgba(255,255,255,0.05)"] {
  background: #f0f2f5 !important;
}

[data-theme="light"] [style*="background: rgba(255,255,255,0.05)"] {
  background: #f0f2f5 !important;
}

[data-theme="light"] [style*="background: rgba(255,255,255,0.03)"] {
  background: rgba(0,0,0,0.02) !important;
}

[data-theme="light"] [style*="background:rgba(255,255,255,0.08)"] {
  background: rgba(0,0,0,0.04) !important;
}

[data-theme="light"] [style*="background: rgba(255,255,255,0.08)"] {
  background: rgba(0,0,0,0.04) !important;
}

/* Payment method card backgrounds */
[data-theme="light"] [style*="background:#000"] {
  /* Apple Pay icon bg stays black */
}

/* Fawry red soft bg */
[data-theme="light"] [style*="background:rgba(239,68,68,0.15)"] {
  background: rgba(239,68,68,0.08) !important;
}

/* Green soft bg */
[data-theme="light"] [style*="background:rgba(16,185,129,0.15)"] {
  background: rgba(16,185,129,0.08) !important;
}