/* ============================================================
   theme.css — Light mode overrides for Antileak
   Uses html[data-theme="light"] (specificity 0,1,1) to beat
   :root (0,1,0) declarations in page-specific inline styles.
   ============================================================ */

html[data-theme="light"] {
  --bg: #F5F6FA;
  --bg-raised: #FFFFFF;
  --bg-card: #FFFFFF;
  --border: #E2E4EB;
  --border-hover: #D0D3DC;
  --green: #059669;
  --green-dim: rgba(5, 150, 105, 0.08);
  --green-mid: rgba(5, 150, 105, 0.15);
  --green-glow: rgba(5, 150, 105, 0.25);
  --red: #E04444;
  --amber: #E09B30;
  --text: #3A3F52;
  --text-dim: #6B7089;
  --text-muted: #9498AC;
  --white: #1A1D2B;
  color-scheme: light;
}

/* Hide noise overlay in light mode */
html[data-theme="light"] .learn-hero::after,
html[data-theme="light"] .cta-section::after {
  display: none;
}

/* ============ NAV (standard pages) ============ */
html[data-theme="light"] nav {
  background: rgba(245, 246, 250, 0.85);
  border-bottom-color: var(--border);
}

html[data-theme="light"] nav.scrolled {
  background: rgba(245, 246, 250, 0.95);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ============ NAV (dashboard pages using .al-nav) ============ */
html[data-theme="light"] .al-nav {
  background: var(--bg-raised);
  border-bottom-color: var(--border);
}

/* ============ MOBILE MENU ============ */
html[data-theme="light"] .mobile-menu-overlay {
  background: rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .mobile-menu-drawer {
  background: var(--bg-raised);
}

/* ============ PRICING CARDS ============ */
html[data-theme="light"] .price-card:hover,
html[data-theme="light"] .plan-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .price-card.featured,
html[data-theme="light"] .plan-card.featured {
  border-color: rgba(5, 150, 105, 0.35);
  background: linear-gradient(175deg, rgba(5, 150, 105, 0.04) 0%, var(--bg-card) 35%);
}

/* ============ HOMEPAGE-SPECIFIC ============ */
html[data-theme="light"] .hero::before {
  background: radial-gradient(ellipse, rgba(5, 150, 105, 0.1) 0%, transparent 70%);
}

html[data-theme="light"] .scan-form input[type="text"] {
  color: var(--green);
}

html[data-theme="light"] .scan-form input::placeholder {
  color: rgba(5, 150, 105, 0.4);
}

/* ============ OVERLAYS & MODALS ============ */
html[data-theme="light"] .auth-overlay {
  background: rgba(0, 0, 0, 0.4);
}

/* ============ INTERACTIVE ELEMENTS ============ */
html[data-theme="light"] .check-item:hover {
  box-shadow: 0 8px 32px rgba(5, 150, 105, 0.08);
}

html[data-theme="light"] .faq-item {
  border-color: var(--border);
}

/* ============ FORM INPUTS ============ */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color-scheme: light;
}

/* ============ SIDEBAR (shared/sidebar.js) ============ */
html[data-theme="light"] .sb-overlay {
  background: rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .sb-drawer {
  background: var(--bg-raised);
  border-left-color: var(--border);
}

/* ============ CODE / PRE BLOCKS (learn pages) ============ */
html[data-theme="light"] pre,
html[data-theme="light"] code {
  background: #F0F1F5;
}

/* ============ DASHBOARD CARDS ============ */
html[data-theme="light"] .gauge-card,
html[data-theme="light"] .trend-card,
html[data-theme="light"] .trial-card,
html[data-theme="light"] .scan-item {
  border-color: var(--border);
  background: var(--bg-card);
}

/* ============ SCROLLBAR ============ */
html[data-theme="light"] ::-webkit-scrollbar {
  width: 8px;
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 4px;
}

/* ============ AUTH-PENDING CLOAK (shared across all pages) ============
   Hides the auth-swappable nav link until nav-auth.js has finished its
   /auth/me check, so users never see "Log in" flash to "Dashboard"/"Scan".
   visibility: hidden preserves layout, so the nav doesn't reflow. */
html[data-auth-pending="1"] a[href="/login.html"] {
  visibility: hidden;
}

/* ============ PAGE-LOADING CLOAK (opt-in per page) ============
   Pages that fetch data on load set data-page-loading="1" on <html>
   synchronously in <head>, then remove it once all required data has
   resolved (typically inside a Promise.all .then). While set, all body
   children are hidden and a centered spinner is shown via body::before
   (a pseudo-element, not affected by the body > * selector). This stops
   pages from flashing partial state before their data arrives. */
html[data-page-loading="1"] body > * {
  visibility: hidden !important;
}
html[data-page-loading="1"] body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgba(127, 127, 127, 0.25);
  border-top-color: #34D399;
  border-radius: 50%;
  animation: page-gate-spin 0.8s linear infinite;
  z-index: 99999;
}
@keyframes page-gate-spin { to { transform: rotate(360deg); } }

/* ============ SKIP LINK (shared across all pages) ============ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--green, #34D399);
  color: #0C0D12;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}