/* ════════════════════════════════════════════════════════════════════════
   BLACK THEME — ThinkForever Parent Portal
   Matches the development app's dark palette (lib/core/theme/app_theme.dart):
     bg #0A1018 · surface #111A26 · surface-high #1D2C3E · nav #0D141E
     outline #2A3B50 · text #E6ECF4 · muted #8A97A8 · primary #6FC0FF · brand #1A8FE3
   Default theme (set by the boot script in index.html). Light = data-theme="light".
   Loaded LAST; html[data-theme="black"] wins by specificity. Most of the portal
   uses --color-* vars, so the remap below covers the bulk.
   ════════════════════════════════════════════════════════════════════════ */

html[data-theme="black"] {
  /* Core surfaces */
  --color-bg: #0a1018;
  --color-surface: #111a26;
  --color-surface-hover: #1d2c3e;
  --color-surface-alt: #16202e;
  --color-surface-raised: #1d2c3e;
  --color-border: #2a3b50;
  --color-border-light: #1d2c3e;
  --color-border-focus: #6fc0ff;

  /* Text */
  --color-text: #e6ecf4;
  --color-text-secondary: #c3ccd9;
  --color-text-muted: #8a97a8;
  --color-text-inverse: #ffffff;

  /* Brand (works as both button fill + accent on dark) */
  --color-primary: #1a8fe3;
  --color-primary-hover: #6fc0ff;
  --color-primary-light: #0f4a75;
  --color-primary-subtle: rgba(111, 192, 255, 0.14);
  --color-primary-muted: #6fc0ff;

  /* Semantic */
  --color-success: #34d399;
  --color-success-light: rgba(52, 211, 153, 0.12);
  --color-success-subtle: rgba(52, 211, 153, 0.18);
  --color-warning: #fbbf24;
  --color-warning-light: rgba(251, 191, 36, 0.12);
  --color-warning-subtle: rgba(251, 191, 36, 0.18);
  --color-danger: #f87171;
  --color-danger-light: rgba(248, 113, 113, 0.12);
  --color-danger-subtle: rgba(248, 113, 113, 0.18);
  --color-info: #6fc0ff;
  --color-info-light: rgba(111, 192, 255, 0.12);
  --color-info-subtle: rgba(111, 192, 255, 0.18);

  /* Shadows — deeper on dark */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  --shadow-ring: 0 0 0 3px rgba(111, 192, 255, 0.25);
  --shadow-ring-error: 0 0 0 3px rgba(248, 113, 113, 0.25);
}

/* Base */
html[data-theme="black"] body { background: var(--color-bg); color: var(--color-text); }

/* Scrollbars */
html[data-theme="black"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="black"] ::-webkit-scrollbar-track { background: #0d141e; }
html[data-theme="black"] ::-webkit-scrollbar-thumb { background: #2a3b50; border-radius: 6px; }
html[data-theme="black"] ::-webkit-scrollbar-thumb:hover { background: #3a4d66; }
html[data-theme="black"] * { scrollbar-color: #2a3b50 #0d141e; }

/* Inputs/selects that may hardcode a white fill */
html[data-theme="black"] input,
html[data-theme="black"] textarea,
html[data-theme="black"] select {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border);
}
html[data-theme="black"] input::placeholder,
html[data-theme="black"] textarea::placeholder { color: #6b7a8d; }

/* White logo on dark (all colored logos, regardless of where they appear) */
html[data-theme="black"] img[src*="logo.png"] { filter: brightness(0) invert(1); }
/* Splash loader (inline-styled) → dark */
html[data-theme="black"] #app > div[style*="f7f9fc"] { background: #0a1018 !important; }

/* ════════════════ Targeted overrides (from live audit) ════════════════ */
/* App header (authed pages) — white glass → dark */
html[data-theme="black"] .app-header { background: #0d141e !important; border-color: #2a3b50 !important; }
/* Inputs (.form-input carries its own glass bg) */
html[data-theme="black"] .form-input { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }

/* ── Landing (glassmorphism) ── */
html[data-theme="black"] .landing-page { background: #0a1018 !important; }
html[data-theme="black"] .landing-nav { background: rgba(13,20,30,0.72) !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .landing-btn.secondary { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .landing-pipeline { border-color: #2a3b50 !important; }
html[data-theme="black"] .landing-pipeline-stage { background: #1d2c3e !important; }
html[data-theme="black"] .landing-feature-card { background: #111a26 !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .landing-how,
html[data-theme="black"] .landing-step,
html[data-theme="black"] .landing-cta { border-color: #2a3b50 !important; }
html[data-theme="black"] .landing-cta-inner { background: #111a26 !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .accent { color: #6fc0ff !important; }

/* ── Auth (login / register glass) ── */
html[data-theme="black"] .auth-page { background: #0a1018 !important; }
html[data-theme="black"] .auth-card { background: #111a26 !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .auth-footer { border-color: #2a3b50 !important; }
html[data-theme="black"] .reg-region-btn { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .reg-region-btn.active { background: #0f4a75 !important; border-color: #6fc0ff !important; color: #d2eaff !important; }
html[data-theme="black"] #captcha-knob { background: #6fc0ff !important; }
html[data-theme="black"] .reg-marketing-consent,
html[data-theme="black"] .register-terms { border-color: #2a3b50 !important; }

/* ── Credits ── */
html[data-theme="black"] .credits-tabs { border-color: #2a3b50 !important; }
html[data-theme="black"] .credits-tabs .tab.active { color: #6fc0ff !important; }
html[data-theme="black"] .pack-card { background: #111a26 !important; border-color: #2a3b50 !important; }

/* ── Support ── */
html[data-theme="black"] .badge-neutral { background: #1d2c3e !important; color: #c3ccd9 !important; }

/* ── Landing text (hardcoded dark → light) ── */
html[data-theme="black"] .landing-headline,
html[data-theme="black"] .landing-pipeline-label,
html[data-theme="black"] .landing-pipeline-stage,
html[data-theme="black"] .landing-section-title,
html[data-theme="black"] .landing-feature-title,
html[data-theme="black"] .landing-step-title,
html[data-theme="black"] .landing-cta-title { color: #e6ecf4 !important; }
html[data-theme="black"] .landing-nav-link,
html[data-theme="black"] .landing-desc,
html[data-theme="black"] .landing-feature-text,
html[data-theme="black"] .landing-step-text,
html[data-theme="black"] .landing-cta-desc,
html[data-theme="black"] .landing-footer-link,
html[data-theme="black"] .landing-footer-copy { color: #FFF !important; }
html[data-theme="black"] .landing-footer-disclaimer { color: #FFFFFF !important; }

/* ── Credits pack text ── */
html[data-theme="black"] .pack-credits { color: #6fc0ff !important; }
html[data-theme="black"] .pack-per-credit,
html[data-theme="black"] .pack-desc { color: #8a97a8 !important; }

/* Outline button — light fill → dark */
html[data-theme="black"] .btn-outline { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .btn-outline:hover { background: #2a3b50 !important; }

/* ════════════════ Unified FLAT primary buttons — brand #6FC0FF everywhere ════════════════ */
html[data-theme="black"] .btn-primary,
html[data-theme="black"] .login-page .btn-login,
html[data-theme="black"] .register-form .btn-primary,
html[data-theme="black"] .landing-btn.primary,
html[data-theme="black"] .landing-nav-btn.solid {
  background: #6fc0ff !important;
  background-image: none !important;
  color: #08111c !important;
  border: 1px solid #6fc0ff !important;
  box-shadow: none !important;
}
html[data-theme="black"] .btn-primary:hover,
html[data-theme="black"] .login-page .btn-login:hover:not(:disabled),
html[data-theme="black"] .register-form .btn-primary:hover,
html[data-theme="black"] .landing-btn.primary:hover,
html[data-theme="black"] .landing-nav-btn.solid:hover {
  background: #8fd0ff !important;
  box-shadow: none !important;
  transform: none !important;
}
html[data-theme="black"] .login-page .btn-login::before { display: none !important; }
html[data-theme="black"] .btn-primary i,
html[data-theme="black"] .login-page .btn-login i,
html[data-theme="black"] .register-form .btn-primary i,
html[data-theme="black"] .landing-btn.primary i,
html[data-theme="black"] .landing-nav-btn.solid i { color: #08111c !important; }

/* Landing step cards (white glass) → dark */
html[data-theme="black"] .landing-step { background: #111a26 !important; border-color: #2a3b50 !important; }

/* Register terms / marketing-consent boxes (white glass) → dark */
html[data-theme="black"] .register-terms,
html[data-theme="black"] .reg-marketing-consent { background: #16202e !important; border-color: #2a3b50 !important; }

/* Region selector active state (indigo → brand) */
html[data-theme="black"] .reg-region-btn.active { background: rgba(111,192,255,0.16) !important; border-color: #6fc0ff !important; color: #6fc0ff !important; box-shadow: none !important; }


/* ════════════════ Eliminate violet/off-brand blue → standard #6FC0FF ════════════════ */
/* Landing accent var (#6366f1 indigo) → brand — fixes feature icons, pipeline icons, links, nav buttons, accents */
html[data-theme="black"] {
  --landing-blue: #6fc0ff;
  --landing-blue-dark: #1a8fe3;
  --landing-blue-light: rgba(111,192,255,0.14);
  --landing-blue-subtle: rgba(111,192,255,0.20);
}
/* Gradient badges/accents → flat brand */
html[data-theme="black"] .landing-step-number,
html[data-theme="black"] .landing-pipeline-label,
html[data-theme="black"] .landing-feature-card::before,
html[data-theme="black"] .landing-price-card.featured::before { background: #6fc0ff !important; background-image: none !important; }
html[data-theme="black"] .landing-step-number { color: #08111c !important; }
html[data-theme="black"] .landing-nav-btn.outline:hover { background: #6fc0ff !important; color: #08111c !important; }

/* Credits */
html[data-theme="black"] .credits-balance-card { background: linear-gradient(135deg, #1a8fe3 0%, #0d6fc0 100%) !important; }
html[data-theme="black"] .pack-buy { background: #6fc0ff !important; color: #08111c !important; }
html[data-theme="black"] .reason-admin_grant { background: rgba(111,192,255,0.16) !important; color: #6fc0ff !important; }

/* Onboarding (blue/violet → brand) */
html[data-theme="black"] .onboarding-header-icon { background: #6fc0ff !important; color: #08111c !important; }
html[data-theme="black"] .onboarding-tier-select { background: #6fc0ff !important; color: #08111c !important; border-color: #6fc0ff !important; }
html[data-theme="black"] .onboarding-tier-select:hover { background: #8fd0ff !important; border-color: #8fd0ff !important; }
html[data-theme="black"] .onboarding-tier-popular { background: #6fc0ff !important; color: #08111c !important; }
html[data-theme="black"] .prep-orbit-core { background: #6fc0ff !important; }
html[data-theme="black"] .prep-progress-fill { background: linear-gradient(90deg, #1a8fe3, #6fc0ff) !important; }

/* Pricing */
html[data-theme="black"] .pricing-card .btn { background: #6fc0ff !important; color: #08111c !important; border-color: #6fc0ff !important; }
html[data-theme="black"] .pricing-card .btn:hover { background: #8fd0ff !important; border-color: #8fd0ff !important; }

/* Login violet accents (#6366f1 / #1d4ed8) → brand */
html[data-theme="black"] .login-page .auth-logo-icon { background: #6fc0ff !important; color: #08111c !important; }
html[data-theme="black"] .login-page .input-icon .form-input:focus { border-color: #6fc0ff !important; }
html[data-theme="black"] .login-page .input-icon:focus-within > i,
html[data-theme="black"] .login-page .password-toggle:hover { color: #6fc0ff !important; }

/* Headline accent word (#2073d6 clip-text → brand gradient) */
html[data-theme="black"] .landing-headline .accent {
  background: linear-gradient(135deg, #6fc0ff 0%, #1a8fe3 100%) !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
/* Credits active tab underline */
html[data-theme="black"] .credits-tabs .tab.active { border-color: #6fc0ff !important; }

/* Auth title (dark clip-text gradient) → white */
html[data-theme="black"] .login-page .auth-title,
html[data-theme="black"] .register-page .auth-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* Landing stat icon (violet) → brand */
html[data-theme="black"] .landing-stat-icon { background: rgba(111,192,255,0.16) !important; color: #6fc0ff !important; }

/* ════════════════ Pipeline block — refined dark glass (was ugly white glass) ════════════════ */
html[data-theme="black"] .landing-pipeline {
  background: rgba(17, 26, 38, 0.55) !important;
  border: 1px solid #2a3b50 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 50px -14px rgba(0, 0, 0, 0.65) !important;
}
html[data-theme="black"] .landing-pipeline-stage {
  background: #141d2b !important;
  border: 1px solid #2a3b50 !important;
  color: #e6ecf4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="black"] .landing-pipeline-stage:hover {
  background: #1d2c3e !important;
  border-color: #6fc0ff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(111, 192, 255, 0.35) !important;
}
html[data-theme="black"] .landing-pipeline-stage i,
html[data-theme="black"] .landing-pipeline-stage svg { color: #6fc0ff !important; }
html[data-theme="black"] .landing-pipeline-arrow { color: #6fc0ff !important; opacity: 0.65 !important; }

/* Pipeline label is clip-text → render as brand-blue text, not a solid bar */
html[data-theme="black"] .landing-pipeline-label {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #6fc0ff !important;
  color: #6fc0ff !important;
}

/* ════════════════ Floating background blobs → brand-blue glow (dark only) ════════════════ */
/* Light theme keeps the original colorful blobs. Blur/animation come from the
   base CSS; we only recolor. A few brand-blue tones give subtle depth. */
html[data-theme="black"] [class*="blob-"] {
  background: radial-gradient(circle, rgba(111, 192, 255, 0.45) 0%, transparent 65%) !important;
}
html[data-theme="black"] [class*="blob-2"],
html[data-theme="black"] [class*="blob-5"],
html[data-theme="black"] [class*="blob-8"] {
  background: radial-gradient(circle, rgba(26, 143, 227, 0.42) 0%, transparent 66%) !important;
}
html[data-theme="black"] [class*="blob-3"],
html[data-theme="black"] [class*="blob-6"] {
  background: radial-gradient(circle, rgba(13, 111, 192, 0.40) 0%, transparent 68%) !important;
}

/* ════════════════ Register EULA / legal-terms panel (white → dark) ════════════════ */
html[data-theme="black"] .eula-panel { background: #0d141e !important; border-color: #2a3b50 !important; color: #c3ccd9 !important; }
html[data-theme="black"] .eula-section,
html[data-theme="black"] .eula-section p,
html[data-theme="black"] .eula-section li { color: #c3ccd9 !important; }
html[data-theme="black"] .eula-section h3,
html[data-theme="black"] .eula-section strong { color: #e6ecf4 !important; }
html[data-theme="black"] .eula-section a { color: #6fc0ff !important; }
html[data-theme="black"] .eula-section-title {
  background: linear-gradient(180deg, #0d141e 0%, #0d141e 80%, rgba(13,20,30,0)) !important;
  color: #e6ecf4 !important;
  border-bottom-color: #2a3b50 !important;
}
html[data-theme="black"] .eula-section-num { background: rgba(111,192,255,0.16) !important; color: #6fc0ff !important; }
html[data-theme="black"] .eula-section-divider { background: #2a3b50 !important; }
html[data-theme="black"] .eula-end-marker { background: #16202e !important; border-color: #2a3b50 !important; color: #8a97a8 !important; }
html[data-theme="black"] .eula-end-marker.reached { border-color: #34d399 !important; color: #34d399 !important; }
html[data-theme="black"] .eula-progress-note { background: #16202e !important; border-color: #2a3b50 !important; color: #c3ccd9 !important; }
html[data-theme="black"] .eula-cb { color: #e6ecf4 !important; accent-color: #6fc0ff !important; }
html[data-theme="black"] .eula-cb input[type="checkbox"]:disabled + span { color: #6b7a8d !important; }
html[data-theme="black"] .eula-panel::-webkit-scrollbar-track { background: #0a1018; }
html[data-theme="black"] .eula-panel::-webkit-scrollbar-thumb { background: #2a3b50; border-radius: 6px; }
html[data-theme="black"] .eula-checkboxes { background: #16202e !important; border-color: #2a3b50 !important; }

/* Captcha slider fill (blue→violet) → brand blue (verified=green / failed=red states keep, higher specificity) */
html[data-theme="black"] .captcha-fill { background: linear-gradient(135deg, #1a8fe3 0%, #6fc0ff 100%); }