/* ──────────────────────────────────────────────────────────────────────────
   Auth pages — Bloomberg-terminal restyle (login + register, EN + DE)

   Visual layer ONLY. All form actions, name attributes, CSRF tokens, OAuth
   endpoints, validators, and error handling are preserved unchanged at the
   template level. Tokens mirror static/ai/intermarket.css so the auth
   surface reads as part of the same terminal as /ai/intermarket, /ai/screener,
   /ai/detail.
   ────────────────────────────────────────────────────────────────────────── */

.auth-root {
  /* Tokens — kept aligned with intermarket.css. The brand lila is
     the primary accent across every Bloomberg-style surface; we use
     it for focus rings, CTAs, hover affordances and the chip
     headers. No standalone orange accent on auth — keeps the auth
     surface visually consistent with /ai/intermarket. */
  --bg-0: #000000;
  --bg-1: #0a0a0a;
  --bg-2: #1a1a1a;
  --bd:   #2a2a3a;
  --fg-0: #ffffff;
  --fg-1: #b3b3b3;
  --fg-2: #6b6b7a;
  --amber:  #ffcc00;
  --lila:   #a78bfa;
  --up:     #00e676;
  --down:   #ff3d3d;
  --link:   #4dabf7;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;
  --display: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;

  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-1);
  background: var(--bg-0);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;

  /* Break out of any centering parent into a full-viewport surface. Same
     trick intermarket.css uses, with the top margin nudged to absorb the
     navbar's bottom border. */
  display: block;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: -30px;
  margin-bottom: -30px;
  padding: 0;
  border: none;
  border-top: 1px solid var(--lila);
}

body:has(.auth-root) {
  overflow-x: hidden;
}

.auth-root *,
.auth-root *::before,
.auth-root *::after {
  box-sizing: border-box;
}

.auth-root h1,
.auth-root h2,
.auth-root h3,
.auth-root p {
  margin: 0;
  font-weight: inherit;
}

.auth-root a {
  color: var(--link);
  text-decoration: none;
}

/* ── Top status bar ─────────────────────────────────────────────────── */
.auth-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 16px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--bd);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.auth-statusbar-left,
.auth-statusbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-led {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
}

.auth-statusbar-time {
  color: var(--fg-1);
}

/* ── Two-column grid ────────────────────────────────────────────────── */
.auth-grid {
  display: grid;
  grid-template-columns: 60fr 40fr;
  min-height: calc(100vh - 28px - 28px); /* viewport minus the two bars */
}

/* ── Brand panel (left) ─────────────────────────────────────────────── */
.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 64px 56px;
  background: var(--bg-0);
  overflow: hidden;
}

/* Subtle grid pattern in the background — gives the panel some
   terminal texture without crossing the "no decoration" line. */
.brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--bd) 1px, transparent 1px),
    linear-gradient(90deg, var(--bd) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.18;
  pointer-events: none;
}

.brand-panel > * {
  position: relative;
  z-index: 1;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
}

.brand-chip {
  display: inline-block;
  padding: 5px 9px;
  background: var(--lila);
  color: var(--bg-0);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-0);
}

.brand-tagline {
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}

.brand-tagline-accent {
  color: var(--lila);
}

.brand-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
}

.brand-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brand-stat-value {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}

.brand-stat-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-2);
}

.brand-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--up);
}

.brand-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--up);
}

/* ── Auth form panel (right) ────────────────────────────────────────── */
.auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px;
  background: var(--bg-1);
  border-left: 1px solid var(--bd);
}

.auth-form-wrap {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.auth-chip {
  display: inline-block;
  margin-bottom: 28px;
  padding: 5px 12px;
  background: var(--lila);
  color: var(--bg-0);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .auth-field-row {
    grid-template-columns: 1fr;
  }
}

.auth-label {
  display: block;
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-input {
  display: block;
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--bd);
  border-radius: 3px;
  padding: 11px 14px;
  color: var(--fg-0);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: border-color 0.12s ease;
  outline: none;
}

.auth-input:focus {
  border-color: var(--lila);
}

.auth-input::placeholder {
  color: var(--fg-2);
  letter-spacing: 0.04em;
}

/* Password field with the show/hide toggle inside the border. */
.auth-password-wrap {
  position: relative;
}

.auth-password-wrap .auth-input {
  padding-right: 44px;
}

/* Password show/hide toggle.
   ────────────────────────────────────────────────────────────────────
   `static/script.js` re-writes the button's textContent to "Show" or
   "Hide" on every click — we can't put inline SVG inside it because
   that would get wiped. Instead we hide the text with font-size: 0
   and paint the icon via mask-image on a ::before pseudo-element.
   The icon swaps when JS toggles `aria-pressed` (which it already
   does) — pressed = password is visible, so we render the
   eye-with-slash to signal "click to hide". The legacy reset-password
   templates that share the togglePassword id do NOT carry the
   `.auth-toggle-pw` class, so their text-based toggle stays intact.
*/
.auth-root .auth-toggle-pw {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--fg-2);
  font-size: 0;          /* hides the "Show" / "Hide" text from JS */
  line-height: 0;
  cursor: pointer;
  transition: color 0.12s ease;
}

.auth-root .auth-toggle-pw:hover {
  color: var(--lila);
}

.auth-root .auth-toggle-pw::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--eye-mask) center / contain no-repeat;
  mask: var(--eye-mask) center / contain no-repeat;
  /* Default state: input is masked → show eye (means "click to show"). */
  --eye-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C5.6 5 1 12 1 12s4.6 7 11 7 11-7 11-7-4.6-7-11-7zm0 12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5zm0-8a3 3 0 100 6 3 3 0 000-6z' fill='black'/%3E%3C/svg%3E");
}

/* Pressed state: input is revealed → show eye-with-slash. */
.auth-root .auth-toggle-pw[aria-pressed="true"]::before {
  --eye-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4.27L4.27 2 22 19.73 19.73 22l-2.7-2.7A11.2 11.2 0 0112 19c-6.4 0-11-7-11-7 1.1-1.7 2.5-3.2 4.1-4.4L2 4.27zM12 7c6.4 0 11 7 11 7-1.1 1.7-2.5 3.2-4.1 4.4l-3.4-3.4c.3-.6.5-1.3.5-2 0-2.8-2.2-5-5-5-.7 0-1.4.2-2 .5L7 6.4A11.2 11.2 0 0112 7zm3 5c0-1.7-1.3-3-3-3-.2 0-.4 0-.6.1l3.5 3.5c.1-.2.1-.4.1-.6zm-6 0c0 1.7 1.3 3 3 3 .2 0 .4 0 .6-.1L9.1 11.4c-.1.2-.1.4-.1.6z' fill='black'/%3E%3C/svg%3E");
}

/* Primary submit. Scoped to .auth-root so it beats `.auth-root a`
   (specificity 0,1,1) when used on an anchor or inside a form
   wrapped by the root element. */
.auth-root .auth-btn-primary {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: var(--lila);
  color: var(--bg-0);
  border: 1px solid var(--lila);
  border-radius: 3px;
  padding: 13px 16px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.auth-root .auth-btn-primary:hover {
  background: transparent;
  color: var(--lila);
}

/* OR-divider — flex with two pseudo-elements as the rule lines. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 6px;
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* OAuth buttons — monochrome, ghost-style. These are <a> tags so
   the rules MUST be scoped to .auth-root, otherwise the generic
   `.auth-root a { color: var(--link) }` (0,1,1) overrides their
   white text with blue — barely legible on the dark surface. */
.auth-root .auth-btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  background: transparent;
  color: var(--fg-0);
  border: 1px solid var(--bd);
  border-radius: 3px;
  padding: 11px 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  text-decoration: none;
}

.auth-root .auth-btn-oauth:hover {
  background: var(--bg-2);
  border-color: var(--lila);
  color: var(--lila);
}

.auth-root .auth-btn-oauth svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.auth-root .auth-btn-oauth:hover svg {
  color: var(--lila);
}

/* Inline helper rows under the form (reset / resend / "no account"). */
.auth-helper {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}

.auth-root .auth-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--link);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
}

.auth-root .auth-link:hover {
  color: var(--lila);
  text-decoration: underline;
}

.auth-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--bd);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}

.auth-foot .auth-link {
  margin-left: 6px;
}

/* Checkboxes (register page). */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-1);
  letter-spacing: 0.02em;
}

.auth-check input[type="checkbox"] {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--bg-0);
  border: 1px solid var(--bd);
  border-radius: 3px;
  margin: 1px 0 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s ease;
}

.auth-check input[type="checkbox"]:hover {
  border-color: var(--fg-2);
}

.auth-check input[type="checkbox"]:checked {
  background: var(--lila);
  border-color: var(--lila);
}

.auth-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--bg-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.auth-check a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--bd);
}

.auth-check a:hover {
  color: var(--lila);
  text-decoration-color: var(--lila);
}

/* Flash messages — show whatever the backend pushed via Flask flash().
   Coloured by category-bound CSS class injected from the template. */
.auth-flash {
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid var(--bd);
  border-left-width: 3px;
  border-radius: 3px;
  background: var(--bg-0);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-1);
  letter-spacing: 0.04em;
}

.auth-flash--error,
.auth-flash--danger {
  border-left-color: var(--down);
  color: var(--down);
}

.auth-flash--success {
  border-left-color: var(--up);
  color: var(--up);
}

.auth-flash--warning {
  border-left-color: var(--amber);
  color: var(--amber);
}

.auth-flash--info {
  border-left-color: var(--lila);
  color: var(--lila);
}

/* ── Bottom status bar ──────────────────────────────────────────────── */
.auth-foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 28px;
  padding: 0 16px;
  background: var(--bg-1);
  border-top: 1px solid var(--bd);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.auth-foot-bar a {
  color: var(--fg-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.12s ease;
}

.auth-foot-bar a:hover {
  color: var(--fg-0);
}

.auth-foot-bar .sep {
  color: var(--bd);
  padding: 0 6px;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .auth-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .brand-panel {
    padding: 32px 24px;
    gap: 24px;
    border-bottom: 1px solid var(--bd);
  }

  .brand-tagline {
    font-size: 28px;
  }

  .brand-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 0;
    gap: 10px;
  }

  .brand-stat-value {
    font-size: 16px;
  }

  .brand-stat-label {
    font-size: 8px;
  }

  .auth-panel {
    padding: 32px 24px;
    border-left: none;
  }

  .auth-foot-bar {
    flex-direction: column;
    height: auto;
    padding: 8px 16px;
    gap: 4px;
    text-align: center;
  }

  .auth-foot-bar .sep {
    display: none;
  }
}