/* public/beheer/bh-login.css — de stijl van het inloggen en de beveiliging van
 * /beheer (release B, lane U-auth; SPEC §4.1). Tot ronde 12 stonden de
 * inlogregels in app.css; L0-beheer-split verhuisde ze hierheen, U-auth
 * bouwde er het nieuwe inlogscherm op: e-mail, wachtwoord en de code uit een
 * authenticator-app, de stroom van een link uit een mail (QR-code,
 * herstelcodes), de dialoog voor de stap omhoog (bh-stapomhoog.js) en het
 * tabblad Instellingen → Beveiliging (bh-account.js).
 *
 * PUBLIEK (BEHEER_PUBLIC_FILES in server/admin.mjs), net als app.css: het
 * inlogscherm moet vóór het inloggen gestyled zijn, en omdat dit bestand altijd
 * geladen is, staan de gedeelde bouwstenen (QR-code, herstelcodes) hier ook
 * voor de schermen achter de sessie. Het bestand draagt geen enkel gegeven.
 * Zelfde bezet als app.css: alleen de :root-variabelen daar, één schaal in
 * rem, geen px-breekpunten, geen animatie. Lange adressen en codes breken met
 * overflow-wrap: anywhere (CLAUDE.md: break-word telt niet mee in de
 * min-content-breedte).
 */
#bh-login { max-width: 30rem; margin: 6vh auto 0; }
#bh-login h2 { font-size: 1.0625rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
#bh-login h3 { font-size: 0.9375rem; margin: 1.25rem 0 0.5rem; }
#bh-login h2:focus, #bh-login h3:focus { outline: none; }

/* Eén veld: label boven de invoer. Hetzelfde veld in Instellingen →
   Beveiliging (.bh-veilig) en de dialoog van de stap omhoog (.bh-stap). */
.bh-lf { margin: 0 0 0.875rem; }
.bh-lf label { display: block; font-size: 0.8125rem; color: var(--bh-muted); margin-bottom: 0.375rem; }
.bh-lf input[type='email'],
.bh-lf input[type='password'],
.bh-lf input[type='text'] {
  width: 100%; min-width: 0; min-height: 2.75rem; padding: 0.625rem 0.75rem; border-radius: 0.5rem;
  border: 1px solid var(--bh-line); background: var(--bh-bg); color: var(--bh-fg); font: inherit; font-size: 0.9375rem;
}
.bh-lf input:focus-visible { outline: 2px solid var(--bh-accent); outline-offset: 1px; }
.bh-lf input[aria-invalid='true'] { border-color: var(--bh-danger); }
.bh-lf input[inputmode='numeric'] { letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }

/* Wachtwoord met de knop "Toon" ernaast; op een smal scherm mag de knop
   onder het veld vallen (flex-wrap, geen breekpunt nodig). */
.bh-pw { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bh-pw input { flex: 1 1 12rem; }
.bh-toon { flex: 0 0 auto; min-height: 2.75rem; font-family: inherit; }
.bh-toon[aria-pressed='true'] { border-color: var(--bh-accent); }

/* De melding "Caps Lock staat aan" en een vaste hint: klein en gedempt. Leeg
   neemt de Caps-regel geen ruimte in, maar blijft in de DOM (een live-regio
   die pas bij een melding verschijnt, wordt niet betrouwbaar voorgelezen). */
.bh-caps { margin: 0.25rem 0 0; font-size: 0.78125rem; color: var(--bh-accent); min-height: 0; }
.bh-caps:empty { margin: 0; }
.bh-hint { margin: 0.375rem 0 0; font-size: 0.78125rem; color: var(--bh-muted); overflow-wrap: anywhere; }
.bh-hint:empty { margin: 0; }
/* De uitleg na een herlading midden in de stroom van een link uit een mail
   (HERLADEN_UITLEG in bh-login.js): boven het formulier, met een streep in de
   accentkleur zodat hij opvalt vóór iemand opnieuw begint te typen. */
.bh-herladen { margin: 0 0 1rem; padding: 0.125rem 0 0.125rem 0.625rem; border-left: 2px solid var(--bh-accent); color: var(--bh-fg); }

/* Een knop die eruitziet als een link ("Wachtwoord vergeten?", de wissel
   naar de herstelcode). Een knop, geen link: hij opent geen pagina. Minstens
   2.75rem hoog als tapdoel (44px), zoals de knoppen van het kijkvak. */
.bh-linkknop {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.25rem 0; border: 0; background: none;
  color: var(--bh-fg); font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.2em;
  cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.bh-linkknop:hover { color: var(--bh-accent); }
.bh-linkknop:focus-visible { outline: 2px solid var(--bh-accent); outline-offset: 2px; }
.bh-wissel { margin: 0 0 0.5rem; }
#bh-login .bh-btn, .bh-veilig .bh-btn, .bh-stap .bh-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  font-family: inherit; line-height: 1.25; overflow-wrap: anywhere;
}
.bh-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
#bh-login .bh-msg:empty { min-height: 0; margin: 0; }

/* De QR-code en de sleutel (maakKoppelBlok in bh-login.js). De QR staat op
   een wit vlak: een scanner leest donker op licht, ook in het donkere
   beheer. */
.bh-koppel { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin: 0 0 0.75rem; }
.bh-qr {
  flex: 0 0 auto; display: block; width: 13rem; max-width: 100%; height: auto; padding: 0.5rem;
  background: var(--bh-fg); border-radius: 0.5rem;
}
.bh-koppel-tekst { flex: 1 1 14rem; min-width: 0; }
.bh-koppel-tekst p { margin: 0 0 0.5rem; }
.bh-sleutel-regel { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bh-sleutel {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 0.9375rem; letter-spacing: 0.04em;
  padding: 0.375rem 0.5rem; border: 1px solid var(--bh-line); border-radius: 0.375rem; background: var(--bh-bg);
  overflow-wrap: anywhere; min-width: 0;
}
.bh-otpauth { color: var(--bh-fg); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.bh-otpauth:hover { color: var(--bh-accent); }

/* De herstelcodes, één keer getoond (maakCodesPaneel in bh-login.js). */
.bh-codes { border: 1px solid var(--bh-accent); border-radius: 0.625rem; padding: 1rem; background: var(--bh-bg); margin: 0.75rem 0; }
.bh-codes h3, .bh-codes h4 { margin: 0 0 0.5rem; font-size: 1rem; }
.bh-codes h3:focus, .bh-codes h4:focus { outline: none; }
.bh-codes p { margin: 0 0 0.5rem; }
.bh-codes-lijst {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.25rem 1rem;
  margin: 0.75rem 0; padding-left: 1.75rem;
}
.bh-codes-lijst code {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 0.9375rem; letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.bh-vink { display: flex; gap: 0.5rem; align-items: center; margin: 0.75rem 0 0; }
.bh-vink input { width: 1.25rem; height: 1.25rem; margin: 0; flex: 0 0 auto; accent-color: var(--bh-accent); }
.bh-vink label { font-size: 0.875rem; }

/* Instellingen → Beveiliging (bh-account.js). */
.bh-veilig { display: grid; gap: 1rem; }
.bh-veilig > section { border: 1px solid var(--bh-line); border-radius: 0.625rem; padding: 1rem; background: var(--bh-surface); }
.bh-veilig h3 { font-size: 0.9375rem; margin: 0 0 0.5rem; }
.bh-veilig h3:focus { outline: none; }
.bh-veilig form { max-width: 28rem; }
.bh-veilig .bh-msg:empty { min-height: 0; margin: 0; }
.bh-waarschuw { color: var(--bh-accent); }
.bh-sessies { list-style: none; margin: 0.5rem 0; padding: 0; border: 1px solid var(--bh-line); border-radius: 0.5rem; }
.bh-sessies:empty { display: none; }
.bh-sessies li { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--bh-line); font-size: 0.8125rem; overflow-wrap: anywhere; }
.bh-sessies li:last-child { border-bottom: 0; }
.bh-sessies .bh-chip { margin-left: 0.375rem; }
.bh-bevestig { border: 1px solid var(--bh-danger); border-radius: 0.5rem; padding: 0.75rem 0.875rem; background: var(--bh-bg); margin: 0.5rem 0 0; }
.bh-bevestig p { margin: 0 0 0.5rem; }

/* De dialoog van de stap omhoog (bh-stapomhoog.js): de gewone dialog-stijl
   van app.css, iets smaller. */
dialog.bh-stap { max-width: 26rem; }
dialog.bh-stap h2 { font-size: 1.0625rem; margin: 0 0 0.375rem; }
dialog.bh-stap .bh-msg:empty { min-height: 0; margin: 0; }

/* Klantportaal-accounts: de taalkeuze bij het aanmaken (bh-accounts.js). */
.bh-field select {
  width: 100%; min-width: 0; padding: 0.5625rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--bh-line);
  background: var(--bh-bg); color: var(--bh-fg); font-size: 0.9375rem;
}

/* Afdrukken van de herstelcodes: alleen het paneel komt op papier (de knop
   Afdrukken zet .bh-print-codes op <html> tot afterprint). */
@media print {
  html.bh-print-codes body * { visibility: hidden; }
  html.bh-print-codes .bh-codes-print,
  html.bh-print-codes .bh-codes-print * { visibility: visible; }
  html.bh-print-codes .bh-codes-print { position: absolute; inset: 0 auto auto 0; border: 0; color: black; background: white; }
  html.bh-print-codes .bh-codes-print .bh-acts,
  html.bh-print-codes .bh-codes-print .bh-vink,
  html.bh-print-codes .bh-codes-print button { display: none; }
}

@media (forced-colors: active) {
  .bh-qr { forced-color-adjust: none; }
  .bh-linkknop { color: LinkText; }
}