/* Estate sign-in — reproduces the projects-portal /login design.

   Two constraints learned by rendering the page, not by reading the source:

   1. authentik renders the ENTIRE flow UI inside ak-flow-executor's shadow DOM
      (the light DOM is empty), so selectors must be UNSCOPED — a `body ...`
      prefix can never match. `:has()` DOES work between the card and the stage
      element, since both live in the executor's own root.

   2. NEVER clip or fix the height of the card. Stage height varies a lot: TOTP
      shows a QR plus a code field, enrolment has five inputs, recovery codes are
      a list. An overflow:hidden — or centred grid without `safe` centring —
      crops the bottom of tall stages at 100% zoom and can leave the overflow
      unreachable. Everything below is sized in min()/vw so it reflows instead. */

:root {
  --est-acc: #7c5cff;
  --est-acc-ink: #ffffff;
  --est-ink: #e8e8e8;
  --est-mut: #9aa0a6;
  --est-card: #181b21;
  --est-line: #262a34;
  --est-in-bg: #14161a;
  --est-in-line: #333a44;
  --est-bg-1: #1b1d2b;
  --est-bg-2: #0f1115;

  /* PatternFly globals — these inherit across the shadow boundary */
  --pf-global--BackgroundColor--100: var(--est-card);
  --pf-global--BackgroundColor--light-100: var(--est-card);
  --pf-global--Color--100: var(--est-ink);
  --pf-global--Color--200: var(--est-mut);
  --pf-global--link--Color: var(--est-acc);
  --pf-global--primary-color--100: var(--est-acc);
  --pf-global--BorderColor--100: var(--est-line);
}

/* ---- page shell: always scrollable, never clipped ---------------------- */
html, body {
  color-scheme: dark;
  background: radial-gradient(circle at 50% 30%, var(--est-bg-1), var(--est-bg-2)) !important;
  background-attachment: fixed !important;
  color: var(--est-ink) !important;
  font: 15px/1.5 system-ui, "Segoe UI", sans-serif !important;
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.pf-c-background-image,
.pf-c-background-image::before,
.pf-c-background-image::after {
  background: none !important;
  background-image: none !important;
}

/* `safe` centring: centre when it fits, fall back to start when it does not,
   so a tall stage is never pushed off the top edge where it cannot be reached */
.pf-c-login {
  align-content: safe center !important;
  align-items: safe center !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding-block: 24px !important;
  overflow-y: auto !important;
}

/* ---- the card — portal .box: 340px, #101a15, 1px #21342a, radius 14 ---- */
.pf-c-login__container,
.ak-login-container {
  width: min(340px, 94vw) !important;
  max-width: 94vw !important;
}
.pf-c-login__main {
  background: var(--est-card) !important;
  border: 1px solid var(--est-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;   /* must NOT clip: tall stages get cropped */
}
.pf-c-login__main-header,
.pf-c-login__main-body,
.pf-c-login__main-footer {
  background: transparent !important;
  color: var(--est-ink) !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  overflow: visible !important;
}
.pf-c-login__main-header { padding-top: 26px !important; }

/* ---- type ---- */
.pf-c-title, .pf-c-login__main-header h1, h1 {
  color: var(--est-ink) !important;
  font-size: 22px !important;
  text-wrap: balance;
}
.pf-c-login__main-header-desc,
.pf-c-form__helper-text { color: var(--est-mut) !important; font-size: 13px !important; }
.pf-c-form__label, .pf-c-form__label-text {
  color: var(--est-mut) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* ---- inputs ---- */
.pf-c-form-control {
  background: var(--est-in-bg) !important;
  border: 1px solid var(--est-in-line) !important;
  border-radius: 8px !important;
  color: var(--est-ink) !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.pf-c-form-control::placeholder { color: #5f7f6e !important; }
.pf-c-form-control:focus {
  border-color: var(--est-acc) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124,92,255, 0.18) !important;
}

/* ---- primary button ---- */
.pf-c-button.pf-m-primary {
  background: var(--est-acc) !important;
  color: var(--est-acc-ink) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 11px !important;
}
.pf-c-button.pf-m-primary:hover { filter: brightness(1.06); }
.pf-c-button.pf-m-primary:focus-visible {
  outline: 2px solid var(--est-ink) !important;
  outline-offset: 2px !important;
}

/* ---- links / footer ---- */
a, .pf-c-button.pf-m-link { color: var(--est-acc) !important; }
.pf-c-login__main-footer-band,
.pf-c-login__main-footer-band-item {
  background: transparent !important;
  border-top-color: var(--est-line) !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--est-mut) !important;
}

/* ---- errors — portal .msg ---- */
.pf-c-alert.pf-m-danger, .pf-c-alert.pf-m-warning {
  background: #241318 !important;
  border: 1px solid #7a3a4a !important;
  border-radius: 8px !important;
}
.pf-c-alert__title, .pf-c-form__helper-text.pf-m-error { color: #f0bcc8 !important; }

/* ---- TOTP setup: QR plus a code field is the tallest stage ------------- */
.pf-c-login__container:has(ak-stage-authenticator-totp),
.ak-login-container:has(ak-stage-authenticator-totp),
.pf-c-login__main:has(ak-stage-authenticator-totp) {
  width: min(400px, 94vw) !important;
}
/* keep the QR small enough that the code field stays on screen at 100% zoom */
.pf-c-login__main img[src^="data:image"],
.pf-c-login__main-body img[src^="data:image"],
.pf-c-login__main svg[role="img"] {
  display: block !important;
  margin: 10px auto !important;
  max-width: min(190px, 52vw) !important;
  width: auto !important;
  height: auto !important;
  background: #fff !important;
  padding: 10px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}
/* the otpauth:// secret line must wrap, not force the card wide */
.pf-c-login__main-body code,
.pf-c-login__main-body pre,
.ak-form-static {
  font-size: 12px !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  white-space: pre-wrap !important;
  color: var(--est-mut) !important;
}

/* ---- recovery codes (static authenticator) ---------------------------- */
.pf-c-login__container:has(ak-stage-authenticator-static),
.ak-login-container:has(ak-stage-authenticator-static),
.pf-c-login__main:has(ak-stage-authenticator-static) {
  width: min(560px, 94vw) !important;
}
ak-stage-authenticator-static ul,
ul:has(> li.pf-m-monospace) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 6px 12px !important;
  margin: 10px 0 6px !important;
  padding: 0 !important;
  list-style: none !important;
}
li.pf-m-monospace {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.04em !important;
  color: var(--est-ink) !important;
  background: var(--est-in-bg) !important;
  border: 1px solid var(--est-in-line) !important;
  border-radius: 6px !important;
  padding: 5px 8px !important;
  text-align: center !important;
  word-break: break-all !important;
}

/* ---- short viewports: stop centring, let the page scroll from the top -- */
@media (max-height: 720px) {
  .pf-c-login { align-content: start !important; align-items: start !important; }
  .pf-c-login__main-header { padding-top: 18px !important; }
  .pf-c-login__main img[src^="data:image"] { max-width: min(150px, 42vw) !important; }
}

/* ---- phones ---- */
@media (max-width: 430px) {
  .pf-c-login { padding-inline: 10px !important; }
  .pf-c-login__main-header,
  .pf-c-login__main-body,
  .pf-c-login__main-footer { padding-left: 16px !important; padding-right: 16px !important; }
  .pf-c-title, .pf-c-login__main-header h1, h1 { font-size: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}