/* VerbIS login theme — matched to the mcauth portal (frontend/src/app.css tokens),
   light + dark via prefers-color-scheme. Loaded after keycloak.v2 styles.css, so these
   rules win. Custom markup (vb-*) lives in login.ftl / webauthn-register.ftl. */

:root {
  --ground:#f8fafb; --surface:#ffffff; --surface-2:#f1f5f7; --border:#e2e8ec;
  --border-strong:#cdd8de; --ink:#14202b; --muted:#5b6b78; --faint:#8a99a4;
  --accent:#006bb4; --accent-ink:#ffffff; --accent-soft:#e9eef9; --accent-line:#a4c0e5;
  --ok:#157f4f; --ok-soft:#e3f5ea; --ok-ink:#0b4429;
  --bad:#b3261e; --bad-soft:#fdeceb; --bad-ink:#7d1a15;
  --shadow:0 1px 2px rgba(20,32,43,.04), 0 4px 16px rgba(20,32,43,.05);
  --radius:10px;
  --ui:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --digits:ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --logo-filter:none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0e161b; --surface:#16212a; --surface-2:#1c2a34; --border:#26343f;
    --border-strong:#33454f; --ink:#e7eef3; --muted:#97a7b2; --faint:#6c7d88;
    --accent:#8aaedd; --accent-ink:#0e161b; --accent-soft:#16283f; --accent-line:#3f5f88;
    --ok:#4ec98a; --ok-soft:#123526; --ok-ink:#c8f2dc;
    --bad:#ff6b5e; --bad-soft:#3a1614; --bad-ink:#ffd7d2;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28);
    --logo-filter:brightness(0) invert(1);
  }
}

/* ---- ground + card ------------------------------------------------------- */
body#keycloak-bg { background:var(--ground) !important; color:var(--ink); font-family:var(--ui); }

/* The card is the BODY, not <main>. template.ftl renders footer.ftl as a direct child
   of <main>, after the body — so carrying the card look one level down is what leaves
   the legal footer outside the card instead of inside it. */
.pf-v5-c-login__main { background:none; border:none; box-shadow:none; overflow:visible; }
.pf-v5-c-login__main-header { padding:0; background:none; border:none; }
.pf-v5-c-login__main-body {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding-top:1.5rem;
}

/* header: DKFZ logo (as a mask so it recolors cleanly) + the realm name as a subtitle */
#kc-header-wrapper::before {
  content:""; display:block; height:3rem; margin:.25rem 0 .5rem;
  background:url(../img/dkfz-logo.svg) no-repeat center; background-size:contain;
  filter:var(--logo-filter);
}
#kc-header, #kc-header-wrapper {
  color:var(--muted) !important; font-size:.66rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; text-align:center; line-height:1.5;
}
/* The stock page title duplicates the heading each page already carries, but every page
   still needs an h1 — hide it from the eye, not from assistive technology. */
#kc-page-title {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- our sign-in options (vb-*) ------------------------------------------ */
.vb-body { display:flex; flex-direction:column; gap:1rem; }
.vb-view { display:flex; flex-direction:column; gap:1rem; }
.vb-view[hidden] { display:none; }   /* author display: rules override the [hidden] UA default */
.vb-options { display:flex; flex-direction:column; gap:.7rem; width:100%; margin:0; }
.vb-or { display:flex; align-items:center; gap:.6rem; color:var(--faint); }
.vb-or::before, .vb-or::after { content:""; flex:1; height:1px; background:var(--border); }
.vb-or span { font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
.vb-or[hidden] { display:none; }
.vb-qr { display:flex; justify-content:center; }
.vb-qr img { width:150px; height:150px; border:1px solid var(--border); border-radius:8px; background:#fff; padding:.4rem; }
.vb-secret { font-family:var(--digits); font-size:.78rem; word-break:break-all; }
.vb-trust {
  display:flex; gap:.6rem; align-items:flex-start; cursor:pointer; text-align:left;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:.65rem .75rem;
}
.vb-trust input { margin:.15rem 0 0; accent-color:var(--accent); flex-shrink:0; width:1rem; height:1rem; }
.vb-trust span { display:flex; flex-direction:column; gap:.15rem; }
.vb-trust span > span { font-size:.78rem; font-weight:600; color:var(--ink); }
.vb-trust small { font-size:.7rem; color:var(--muted); line-height:1.4; }

.vb-btn {
  font:inherit; font-weight:600; cursor:pointer; border-radius:8px; padding:.7rem .95rem;
  border:1px solid transparent; display:inline-flex; align-items:center; justify-content:flex-start;
  gap:.6rem; width:100%; text-decoration:none; line-height:1.2;
}
.vb-btn svg { width:18px; height:18px; flex:none; }
.vb-btn .vb-lbl { display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.vb-btn .vb-lbl small { font-weight:500; font-size:.72rem; opacity:.8; }
.vb-btn.vb-primary { background:var(--accent); color:var(--accent-ink); }
.vb-btn.vb-primary:hover { filter:brightness(1.06); }
.vb-btn.vb-secondary { background:var(--surface); border-color:var(--border-strong); color:var(--ink); }
.vb-btn.vb-secondary:hover { border-color:var(--accent); color:var(--accent); }
.vb-btn.vb-ghost { background:transparent; border:none; color:var(--muted); font-weight:500; justify-content:center; font-size:.84rem; padding:.4rem; }
.vb-btn.vb-ghost:hover { color:var(--ink); }
.vb-btn[hidden] { display:none; }    /* as .vb-view[hidden] above: beat the UA default */
.vb-btn:disabled, .vb-btn[aria-disabled="true"] { opacity:.55; cursor:default; }
.vb-btn.vb-secondary:disabled:hover { border-color:var(--border-strong); color:var(--ink); }
.vb-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.vb-field { display:flex; flex-direction:column; gap:.3rem; }
.vb-field label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; }
.vb-field input {
  font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border-strong);
  border-radius:8px; padding:.55rem .7rem; width:100%;
}
.vb-field input::placeholder { color:var(--muted); }
.vb-field input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }

.vb-title { font-size:1.05rem; font-weight:650; letter-spacing:-.01em; margin:0; text-align:center; color:var(--ink); text-wrap:balance; }
.vb-hint { color:var(--muted); font-size:.78rem; line-height:1.45; margin:0 0 .2rem; text-align:center; text-wrap:pretty; }
.vb-hint b { color:var(--ink); font-weight:600; }
.vb-lede { color:var(--muted); font-size:.9rem; line-height:1.45; margin:0; text-align:center; text-wrap:pretty; }

/* ---- biometric affordance (sign-in + passkey nudge) ---------------------- */
.vb-bio {
  display:flex; justify-content:center; align-self:center; gap:.8rem;
  padding:.7rem 1.15rem; border:2px dotted var(--accent-line); border-radius:999px;
}
.vb-bio span {
  width:3.4rem; height:3.4rem; border-radius:50%; flex:none;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.vb-bio svg { width:1.75rem; height:1.75rem; }

#vb-passkey-first { gap:.35rem; }
#vb-passkey-first .vb-bio { margin:1.6rem 0 1.3rem; }

/* ---- e-mail sign-in code (seven cells) ----------------------------------- */
.vb-code { display:grid; grid-template-columns:repeat(7, 1fr); gap:clamp(.2rem,1.4vw,.45rem); }
.vb-code input {
  width:100%; aspect-ratio:3 / 4; min-width:0; text-align:center; padding:0;
  font-family:var(--digits); font-size:clamp(1.1rem,5.4vw,1.75rem); font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--surface); color-scheme:light dark;
  border:1.5px solid var(--border-strong); border-radius:8px;
  transition:background-color .18s, border-color .18s, color .18s;
}
.vb-code input:focus {
  outline:2px solid var(--accent); outline-offset:1px;
  border-color:var(--accent); background:var(--surface);
}
.vb-code.is-ok input { border-color:var(--ok); background:var(--ok-soft); color:var(--ok-ink); }
.vb-code.is-bad input { border-color:var(--bad); background:var(--bad-soft); color:var(--bad-ink); }
.vb-code.is-ok input:focus, .vb-code.is-bad input:focus { outline-color:currentColor; }

@keyframes vb-shake {
  0%,100% { transform:translateX(0); }
  15% { transform:translateX(-6px); } 30% { transform:translateX(5px); }
  45% { transform:translateX(-4px); } 60% { transform:translateX(3px); }
  80% { transform:translateX(-2px); }
}
.vb-code.shake { animation:vb-shake .42s ease-in-out; }

.vb-status {
  display:flex; align-items:flex-start; gap:.45rem; margin:.55rem 0 0;
  font-size:.76rem; line-height:1.4; min-height:2.4rem; color:var(--muted);
}
.vb-status.ok { color:var(--ok); }
.vb-status.bad { color:var(--bad); font-weight:500; }
/* min-height above reserves the line so the code page does not jump; an author
   `display:` beats the [hidden] UA default, so a status kept for later needs this. */
.vb-status[hidden] { display:none; }

/* ---- suppress stock Keycloak affordances we replace --------------------- */
#authenticateWebAuthnButton {
  font:inherit; font-weight:500; cursor:pointer; border-radius:8px;
  padding:.4rem; border:none; background:transparent; color:var(--muted);
  display:block; width:100%; text-align:center; text-decoration:none; font-size:.84rem;
}
#authenticateWebAuthnButton:hover { color:var(--ink); }
#kc-select-try-another-way-form,             /* "Try another way" */
#kc-social-providers { display:none; }       /* institutions route by domain, not by button */
/* The attempted-username block ("Username or email" + readonly value + restart icon)
   on in-flow pages (nudge, passkey register): our only identifier is the e-mail the
   member just used at the IdP, so the row adds nothing but confusion. */
.pf-v5-c-form__group:has(#kc-attempted-username) { display:none; }

/* ---- legal footer (footer.ftl) ------------------------------------------ */
/* template.ftl emits two divs with .pf-v5-c-login__main-footer, so this styles our
   own element rather than that class. */
.vb-legal {
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.25rem;
  margin-top:1.25rem; font-size:.875rem;
}
.vb-legal a { color:var(--muted); text-decoration:none; }
.vb-legal a:hover { color:var(--accent); text-decoration:underline; }
.vb-legal a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

/* alerts (errors) styled on-brand */
.pf-v5-c-alert { background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--ink); }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }