/* =============================================================================
 * login.css  ·  ALs-Buchhaltung  ·  Auth-Seiten (Login / TOTP / Setup) · T003
 * -----------------------------------------------------------------------------
 * Eigenstaendiges, schlankes Layout fuer die drei Login-Schritte -- vor der
 * Anmeldung gibt es keine Modul-Navigation (public/_shell.html-Muster mit
 * Nav-Leiste passt hier nicht, die Module sind ja noch nicht erreichbar).
 * Nutzt AUSSCHLIESSLICH Tokens aus design-tokens.css -- kein Hex hier
 * (Regel 2, DESIGN-BRIEF §1.2). Ergaenzt app.css, ersetzt es nicht.
 * ============================================================================= */

.auth-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--header-h));
  padding-block: var(--sp-8);
}

.auth-container { max-width: 440px; width: 100%; }
.auth-card { width: 100%; }
.auth-hint { text-align: center; margin-top: var(--sp-4); }

/* ---- TOTP-Einrichtung: QR-Code + manueller Schluessel --------------------- */
.totp-qr {
  display: block;
  width: 220px;
  margin-inline: auto;
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  background: var(--c-surface);
}
.manual-secret {
  display: block;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  background: var(--c-light);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
}

/* ---- Recovery-Codes: einmalige Anzeige, 2-spaltig -------------------------- */
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.recovery-codes code {
  font-variant-numeric: tabular-nums;
  background: var(--c-light);
  border: var(--border-w) solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  font-size: var(--fs-body);
}
@media (max-width: 480px) {
  .recovery-codes { grid-template-columns: 1fr; }
}

/* ---- Wiederherstellungscode-Alternative (natives <details>, kein JS) ------
   Das Standarddreieck des Browsers wird unterdrueckt und durch ein Zeichen
   aus dem MDI-Satz ersetzt, wie bei den Navigationsgruppen in app.css. Ohne
   das rendert Chromium ein rohes "▶" mitten im Text (gemeldet 16.08.2026 mit
   Bildschirmfoto), und das verstoesst gegen die Projektregel "Symbole nur
   aus dem MDI-Subset, keine Zeichen als Ersatz-Icons". */
.auth-recovery-toggle { margin-top: var(--sp-5); font-size: var(--fs-caption); }
.auth-recovery-toggle > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  cursor: pointer;
  color: var(--c-accent-ink);
  font-weight: var(--fw-semi);
}
.auth-recovery-toggle > summary::-webkit-details-marker { display: none; }
.auth-recovery-caret {
  flex: none;
  font-size: 1em !important;
  transition: transform .16s var(--motion-ease);
}
.auth-recovery-toggle[open] > summary .auth-recovery-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .auth-recovery-caret { transition: none; }
}
.auth-recovery-toggle > form { margin-top: var(--sp-4); }

.auth-back-link { display: inline-block; margin-top: var(--sp-5); font-size: var(--fs-caption); }