/* AngelQ login theme: extends Keycloak's classic "keycloak" theme, only
   overriding the page background so the AngelQ logo shows as a large,
   subtle watermark behind the login card. Named angelq.css, not login.css,
   on purpose: a file at the parent's path would shadow the parent's own
   css/login.css (card max-width, page layout) instead of layering on it. */
/* The "login-pf" class lands on <html>, not <body>, in this theme version,
   and the bundled patternfly stylesheets set their own opaque background
   on both html and body with selectors specific enough to win over a plain
   `html.login-pf` rule - !important is the pragmatic fix for overriding a
   third-party base theme's own background from a theme layer like this. */
html.login-pf,
html.login-pf body,
.login-pf-page {
  background-color: #0b0e14 !important;
  background-image:
    linear-gradient(180deg, rgba(11, 14, 20, 0.55) 0%, rgba(11, 14, 20, 0.85) 100%),
    url("../img/angelq-logo.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: min(70vw, 640px) !important;
  background-attachment: fixed !important;
}

#kc-header-wrapper {
  visibility: hidden;
}

.login-pf-page .card-pf {
  background: rgba(19, 24, 35, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* The base "keycloak" theme's text colors (dark gray, ~#363636) assume a
   white card - against our dark card they're nearly unreadable, so every
   text element inside it needs to flip to a light color too. Inputs are
   left alone: their own white fill still gets normal dark input text. */
.login-pf-page .card-pf,
.login-pf-page .card-pf h1,
.login-pf-page .card-pf h2,
.login-pf-page .card-pf label,
.login-pf-page .card-pf .pf-c-form__label-text,
.login-pf-page .card-pf a,
.login-pf-page .card-pf span {
  color: #e8eaf0 !important;
}

.login-pf-page .card-pf a {
  color: #8ab4ff !important;
}