/* ============================================================================
 * login-dark.css — page-specific dark overrides for radar/public/login.php
 * ----------------------------------------------------------------------------
 * Loaded AFTER radar-dark.css. Covers only the bits radar-dark.css can't reach
 * generically: login.php's bespoke auth classes (.form-input, .btn-primary,
 * .tab-btn, .err-msg, .btn-upgrade, .feature-item, .plan-pill-*) and the
 * inline Tailwind LIGHT hex utilities the page hardcodes (bg-white,
 * text-[#1c1c19]/…, border-[#d0c6ab]/…, bg-[#ffd700]/20, hr dividers, the
 * forgot-password modal). Every selector is scoped under
 * html[data-theme="dark"] so light mode is untouched. Tokens come from
 * radar-dark.css (--d-*). Accent discipline: the one yellow #dee073.
 * ========================================================================== */

/* ---- Auth panel surface (Tailwind bg-white) + preloader host -------------- */
html[data-theme="dark"] #auth-forms-panel {
  background: transparent !important;   /* let the body gradient show through */
  position: relative;                   /* tile-preloader overlay host */
}

/* ---- Logo separator hr (bg-[#1c1c19]/10) + the "or" divider lines --------- */
html[data-theme="dark"] #auth-forms-panel hr,
html[data-theme="dark"] #google-signin-block .bg-\[\#1c1c19\]\/10 {
  background: var(--d-border-glass) !important;
}

/* ---- Headings / body copy: flip the hardcoded ink (#1c1c19 + opacities) --- */
html[data-theme="dark"] #auth-forms-panel h1,
html[data-theme="dark"] #auth-forms-panel .text-\[\#1c1c19\] {
  color: var(--d-text) !important;
}
html[data-theme="dark"] #auth-forms-panel .text-\[\#1c1c19\]\/60 { color: var(--d-text-2) !important; }
html[data-theme="dark"] #auth-forms-panel .text-\[\#1c1c19\]\/45,
html[data-theme="dark"] #auth-forms-panel .text-\[\#1c1c19\]\/40 { color: var(--d-text-3) !important; }
html[data-theme="dark"] #auth-forms-panel .text-\[\#1c1c19\]\/30,
html[data-theme="dark"] #auth-forms-panel .text-\[\#1c1c19\]\/25 { color: var(--d-text-muted) !important; }

/* Brand-gold accent links (#705d00) → the dark accent */
html[data-theme="dark"] #auth-forms-panel .text-\[\#705d00\] { color: var(--d-accent) !important; }

/* ---- Tab switcher --------------------------------------------------------- */
html[data-theme="dark"] .tab-btn { color: var(--d-text-muted); }
html[data-theme="dark"] .tab-btn:hover { color: var(--d-text-2); }
html[data-theme="dark"] .active-tab {
  color: var(--d-accent) !important;
  border-bottom-color: var(--d-accent) !important;
}
/* Tab-row underline (border-[#d0c6ab]/40) */
html[data-theme="dark"] .border-\[\#d0c6ab\]\/40 { border-color: var(--d-border-glass) !important; }

/* ---- Form inputs (.form-input + the type="password" radar-dark misses) ---- */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] input[type="password"] {
  background: var(--d-control-bg) !important;
  border: 1px solid var(--d-border-input) !important;
  color: var(--d-text) !important;
  font-family: var(--d-font);
}
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] input[type="password"]:focus {
  border-color: var(--d-accent-soft) !important;
  box-shadow: 0 0 0 3px rgba(var(--d-accent-rgb), 0.22) !important;
  background: rgba(0, 0, 0, 0.30) !important;
}
html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] input[type="password"]::placeholder { color: var(--d-text-muted) !important; }

/* ---- Primary CTA (yellow on dark, market.ai parity) ----------------------- */
html[data-theme="dark"] .btn-primary {
  background: var(--d-accent) !important;
  color: var(--d-accent-ink) !important;
  box-shadow: var(--d-shadow-btn) !important;
}
html[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(var(--d-accent-rgb), 0.30) !important;
}
html[data-theme="dark"] .btn-primary:disabled { opacity: 0.5; }
/* spinner inside the yellow button reads on a dark ink */
html[data-theme="dark"] .btn-primary .spinner {
  border-color: rgba(28, 28, 26, 0.35);
  border-top-color: var(--d-accent-ink) !important;
}

/* ---- Upgrade CTA (left-panel) — keep gradient legible on dark ------------- */
html[data-theme="dark"] .btn-upgrade {
  background: var(--d-accent) !important;
  color: var(--d-accent-ink) !important;
  box-shadow: var(--d-shadow-btn) !important;
}

/* ---- Error banner --------------------------------------------------------- */
html[data-theme="dark"] .err-msg {
  background: var(--d-neg-bg) !important;
  color: var(--d-neg) !important;
  border: 1px solid rgba(212, 131, 111, 0.35);
}

/* ---- Plan feature list + badges (left panel, when shown) ------------------ */
html[data-theme="dark"] .feature-item { color: var(--d-text-2); }
html[data-theme="dark"] .feature-item .check { color: var(--d-accent); }
html[data-theme="dark"] .plan-pill-pro {
  background: var(--d-accent-tab-bg); color: var(--d-accent);
  border: 1px solid var(--d-accent-tab-line);
}

/* ---- Yellow icon chips (bg-[#ffd700]/20 with #705d00 glyph) --------------- */
html[data-theme="dark"] .bg-\[\#ffd700\]\/20 { background: rgba(var(--d-accent-rgb), 0.16) !important; }
html[data-theme="dark"] .bg-\[\#ffd700\]\/20 .text-\[\#705d00\] { color: var(--d-accent) !important; }

/* ---- Forgot-password modal ------------------------------------------------ */
html[data-theme="dark"] #forgot-modal > .bg-white {
  background: var(--d-surface-grad) !important;
  border: 1px solid var(--d-border-glass);
  border-radius: var(--d-radius) !important;
  position: relative;
  backdrop-filter: var(--d-blur); -webkit-backdrop-filter: var(--d-blur);
  color: var(--d-text);
}
html[data-theme="dark"] #forgot-modal h3,
html[data-theme="dark"] #forgot-modal label { color: var(--d-text) !important; }
html[data-theme="dark"] #forgot-modal .text-\[\#1c1c19\]\/60 { color: var(--d-text-2) !important; }
html[data-theme="dark"] #forgot-modal .text-\[\#1c1c19\]\/45 { color: var(--d-text-3) !important; }
html[data-theme="dark"] #forgot-modal .text-\[\#1c1c19\]\/40 { color: var(--d-text-muted) !important; }
html[data-theme="dark"] #forgot-modal .text-\[\#705d00\] { color: var(--d-accent) !important; }

/* ===== market.ai polish (2026-06-02) ===== */

/* Auth panel → signature gradient hairline (no translateY: a centered auth
   panel must not jiggle on hover). #auth-forms-panel already sets
   position:relative above. */
html[data-theme="dark"] #auth-forms-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(222, 224, 115, 0.7), transparent);
  opacity: .55;
  pointer-events: none;
}

/* Forgot-password modal card → matching gradient hairline (radius + position
   set on #forgot-modal > .bg-white above). */
html[data-theme="dark"] #forgot-modal > .bg-white::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(222, 224, 115, 0.7), transparent);
  opacity: .55;
  pointer-events: none;
}