/*
 * auth.css — Shared authentication screen styles
 * Loaded by: login.php (client portal) + admin/login.php
 * Reference standard: team.auroai.eu/login.php (team login card)
 * DO NOT add to style.css — kept separate to avoid bloat.
 * T-3417 / M-707  2026-05-25
 */

/* ── Card tightening ──────────────────────────────────────────── */
.login-box {
  padding: 2.5rem 2.25rem;   /* slightly tighter than base 3rem */
}

/* ── Language picker (CEO 2026-08-11) ────────────────────────────
   The login card must open in the visitor's own language AND let them
   change it. Same pattern as the marketing nav's mobile switcher (a flat
   row of three tap targets, each a link to ?lang=<code>), restyled in the
   auth screen's dark/amber tokens instead of the marketing site's tokens.
   Sits inside .login-box above the wordmark and takes no vertical space
   away from it — the negative top margin absorbs the card's own padding. */
.auth-lang {
  display: flex;
  justify-content: flex-end;
  gap: 0.2rem;
  margin: -1rem -0.35rem 0.9rem;
}
.auth-lang a {
  padding: 0.26rem 0.5rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.auth-lang a:hover,
.auth-lang a:focus-visible {
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.05);
}
.auth-lang a[aria-current="true"] {
  color: var(--amber-soft);
  background: rgba(255, 157, 61, 0.10);
  border-color: rgba(255, 157, 61, 0.35);
}

/* ── Logo ─────────────────────────────────────────────────────── */
.login-logo {
  margin-bottom: 0.5rem;     /* tighter gap before heading */
}

/* ── Heading + sub-heading inside the card ───────────────────── */
.auth-title {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
.auth-sub {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 1.6rem;
}

/* ── "or" flex divider — replaces absolute-positioned hack ──── */
.auth-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1rem 0;
  color: var(--muted, #9aa);
  font-size: .8rem;
}
.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, rgba(255,255,255,.12));
}

/* ── Footer link row ─────────────────────────────────────────── */
.auth-footer {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.82rem;
}
.auth-footer a {
  color: var(--amber-soft);
  text-decoration: none;
}
.auth-footer a:hover {
  text-decoration: underline;
}
.auth-footer-muted {
  color: var(--muted);
}

/* ── Full-width primary button (used on all auth screens) ────── */
.btn-auth-primary {
  width: 100%;
  padding: 0.8rem;
  margin-top: 0.5rem;
}