/* SDS One branding over the Keycloak PatternFly-v5 login theme (CAUTH-P1-005, CAUTH-UX-001,
   CAUTH-UX-004, CAUTH-UX-005). Token NAMES and VALUES mirror services/identity/app/theme.py
   (--sds-*) — the static gate asserts the mirror by value — so the sign-in card reads as the
   launchpad's card: one platform, one look, and the eventual shared stylesheet extraction is a
   delete, not a rewrite. Values are the platform design system's (ADR 0054 / DEC-051). Light only
   (owner decision 2026-07-26); color-scheme + darkMode=false keep native widgets light. All
   inherited auth pages (login, reset/update password, OTP + WebAuthn, invitation, info/error)
   pick this up — no content template is forked; the one FreeMarker file beside this stylesheet
   (footer.ftl) fills the empty footer hook Keycloak ships for exactly that purpose (ADR 0055).
   Accessible (one visible focus ring per control; AA text contrast except the recorded
   exact-brand-fill pairs in ADR 0054) and responsive. */

:root {
  color-scheme: light;
  --sds-brand-primary: #626df9;
  --sds-brand-primary-hover: #4e5bf8;
  --sds-brand-primary-light: rgba(98, 109, 249, .1);
  --sds-bg-page: #f2f5f7;
  --sds-bg-surface: #ffffff;
  --sds-bg-surface-alt: #f8f9fb;
  --sds-bg-inset: #e8ebed;
  --sds-bg-hover: rgba(0, 0, 0, .04);
  --sds-border: #e0e0e0;
  --sds-border-soft: #e0e0e0;
  --sds-border-strong: rgba(0, 0, 0, .23);
  --sds-text: #1a1a1a;
  --sds-text-muted: #52525f;
  --sds-text-subtle: #666a72;
  --sds-danger: #b71c1c;
  --sds-danger-bg: #ffebee;
  --sds-success: #2e7d32;
  --sds-success-bg: #e8f5e9;
  --sds-warning: #c24400;
  --sds-warning-bg: #fff4e5;
  --sds-info-bg: #e5f6fd;
  --sds-info-border: #0277bd;
  --sds-radius: 10px;
  --sds-radius-sm: 6px;
  --sds-shadow: 0 4px 12px 0 rgba(10, 37, 64, .10);
}

/* Parent-theme knobs, kept out of the token block above so the gate's mirror check stays a pure
   --sds-* comparison. keycloak.v2 paints a 4px stripe across the top of the card header from
   --keycloak-card-top-color, which it defaults to PatternFly's blue-400 — the one stock-Keycloak
   colour that survived every earlier recolour because no SDS One class governs it (found while
   rendering CAUTH-UX-004). Point it at the brand; the stripe's shape is unchanged.

   CAUTH-UX-005: PatternFly's own globals are pointed at the brand too. Every PF component this file
   has no class rule for reads them — the form-control focus underline, the password toggle's hover
   line, checkbox/radio on the OTP and WebAuthn pages, the inline danger alert — and until now they
   all stayed PatternFly blue (#06c) on an otherwise purple card. The account and admin skins have
   set the same globals since CAUTH-UX-001; the login skin was the odd one out. The heading family
   matters most: .pf-v5-c-title takes font-family from --pf-v5-global--FontFamily--heading, so the
   page title rendered in Red Hat Display (PatternFly ships it) while every label and button used
   the platform stack. The alert tokens (danger, warning, success, info: the --100 border/icon
   colour, the --200 title colour and the pale --palette-*-50 inline background) take the same
   design-system values theme.py's .note and .pill use, so "You need to change your password" on the
   invitee's update-password page stops rendering in PatternFly amber. Info keeps PF's dark title
   colour: the design system's info blue is a border colour (4.33:1), not a text colour. */
:root {
  --keycloak-card-top-color: var(--sds-brand-primary);
  --pf-v5-global--primary-color--100: var(--sds-brand-primary);
  --pf-v5-global--primary-color--200: var(--sds-brand-primary-hover);
  --pf-v5-global--active-color--100: var(--sds-brand-primary);
  --pf-v5-global--link--Color: var(--sds-brand-primary);
  --pf-v5-global--link--Color--hover: var(--sds-brand-primary-hover);
  --pf-v5-global--danger-color--100: var(--sds-danger);
  --pf-v5-global--danger-color--200: var(--sds-danger);
  --pf-v5-global--palette--red-50: var(--sds-danger-bg);
  --pf-v5-global--warning-color--100: var(--sds-warning);
  --pf-v5-global--warning-color--200: var(--sds-warning);
  --pf-v5-global--palette--gold-50: var(--sds-warning-bg);
  --pf-v5-global--success-color--100: var(--sds-success);
  --pf-v5-global--success-color--200: var(--sds-success);
  --pf-v5-global--palette--green-50: var(--sds-success-bg);
  --pf-v5-global--info-color--100: var(--sds-info-border);
  --pf-v5-global--palette--blue-50: var(--sds-info-bg);
  --pf-v5-global--FontFamily--heading: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --pf-v5-global--FontFamily--text: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Page background: flat --sds-bg-page (owner decision 2026-09-04 — the design system allows no
   gradients in product chrome). The parent theme paints Keycloak's dark background artwork via
   `.login-pf body` (login-pf rides on <html>, and the body is literally id="keycloak-bg"), so
   those exact selectors must be matched — and beaten by load order — and the `background`
   SHORTHAND must be used (it resets the parent's background-image), or the stock dark backdrop
   shows through. */
.login-pf body,
body#keycloak-bg,
body.login-pf,
.login-pf-page,
body[class*="login"] {
  background: var(--sds-bg-page);
  color: var(--sds-text);
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Brand header: logo above the card, replacing the plain realm title text. */
#kc-header-wrapper {
  padding: 0 0 1.25rem;
  font-size: 0; /* hide the fallback displayName text; the logo carries the brand */
  position: relative; /* anchors the stretched brand link below */
}
#kc-header-wrapper::before {
  content: "";
  display: block;
  width: min(220px, 70vw);
  height: 52px;
  margin: 0 auto;
  background: url("../img/sdsone-logo.svg") center / contain no-repeat;
}
/* CAUTH-UX-001i: the realm's displayNameHtml supplies a link back to SDS One, but the mark above is
   painted by this wrapper's ::before — a pseudo-element the anchor cannot contain — and font-size:0
   collapses the anchor's own text to nothing. Left alone the brand LOOKS clickable on every auth
   page (login, post-logout, info, error, password reset) and is not: there is no box to hit. So
   stretch the link across the header instead of trying to put the logo inside it. Keeping the mark
   on ::before means a realm whose displayNameHtml carries no anchor still renders its brand. */
#kc-header-wrapper > a {
  position: absolute;
  inset: 0;
}

/* Card surface — same radius/border/shadow as the launchpad card. */
.pf-v5-c-login__main,
.card-pf {
  background: var(--sds-bg-surface);
  border: 1px solid var(--sds-border);
  border-radius: var(--sds-radius);
  box-shadow: var(--sds-shadow);
}

#kc-page-title {
  color: var(--sds-text);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* Primary action = SDS One brand. */
.pf-v5-c-button.pf-m-primary {
  background-color: var(--sds-brand-primary);
  border-color: var(--sds-brand-primary);
  border-radius: var(--sds-radius-sm);
  color: #ffffff;
  font-weight: 600;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--sds-brand-primary-hover);
  border-color: var(--sds-brand-primary-hover);
}
/* The block-level Sign In button matches the 44px fields (PatternFly's 6px padding made it 36px,
   eight pixels shorter than the inputs above it — CAUTH-UX-005). */
.pf-v5-c-button.pf-m-primary.pf-m-block {
  padding-block: 10px;
}

a,
.pf-v5-c-button.pf-m-link {
  color: var(--sds-brand-primary);
}

/* Visible keyboard focus everywhere (accessibility — never remove the outline). 2px like the
   launchpad (theme.py), in the brand colour. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.pf-v5-c-button:focus-visible,
.pf-v5-c-form-control:focus-within {
  outline: 2px solid var(--sds-brand-primary);
  outline-offset: 2px;
}

/* A PatternFly text field is TWO elements: the <span class="pf-v5-c-form-control"> carries the
   box (background, the ::before border, the ::after bottom line) and the <input> inside it is
   transparent and borderless. The ring belongs to the wrapper (:focus-within above); the inner
   input must not draw a second one — PatternFly forces its outline-offset to -2px, so left alone
   it painted a ring INSIDE the field, 4px from the wrapper's: the doubled outline in the
   CAUTH-UX-005 screenshot. One ring stays, so a keyboard user loses nothing. */
.pf-v5-c-form-control > :is(input, select, textarea):focus-visible {
  outline: 0;
}

/* Inputs: the launchpad field. Height comes from the input's own padding (10px + 24px line +
   10px = 44px) — never from min-height on the wrapper: that is a grid with align-items:start, so
   the input stayed 36px and pinned to the top with 8px of dead space under the caret. The border
   is PatternFly's ::before, driven through its variables — 1px --sds-border-strong on all four
   sides (PF's default is #f0f0f0 sides and a darker bottom "underline") — and it has to inherit
   the wrapper's radius or the corners stay square. The ::after bottom line, 2px PatternFly blue on
   focus, is switched off: the ring already says "focused". */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--PaddingTop: 10px;
  --pf-v5-c-form-control--PaddingBottom: 10px;
  --pf-v5-c-form-control--inset--base: 12px;
  --pf-v5-c-form-control--before--BorderTopColor: var(--sds-border-strong);
  --pf-v5-c-form-control--before--BorderRightColor: var(--sds-border-strong);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--sds-border-strong);
  --pf-v5-c-form-control--before--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--before--BorderBottomColor: var(--sds-border-strong);
  --pf-v5-c-form-control--after--BorderStyle: none;
  border-radius: var(--sds-radius-sm);
}
.pf-v5-c-form-control::before {
  border-radius: inherit;
}
/* Invalid input (Keycloak adds pf-m-error): the whole border turns danger, because the red
   underline PatternFly would have used is the ::after line switched off above. */
.pf-v5-c-form-control.pf-m-error {
  --pf-v5-c-form-control--before--BorderTopColor: var(--sds-danger);
  --pf-v5-c-form-control--before--BorderRightColor: var(--sds-danger);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--sds-danger);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--sds-danger);
}

/* Password field + show/hide toggle read as ONE control: the field gives up its right-hand radius,
   the toggle takes it, both share the field's border colour (PF gave the button its own #f0f0f0
   box with a blue bottom line on hover/focus), and the eye is brand purple like the identity
   service's toggle (password_field.py, ADR 0054 §4). The input-group's -1px item overlap keeps the
   seam to a single line; height follows the field, so the icon sits on the text's centre. */
.pf-v5-c-input-group .pf-v5-c-form-control {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--after--BorderTopColor: var(--sds-border-strong);
  --pf-v5-c-button--m-control--after--BorderRightColor: var(--sds-border-strong);
  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--sds-border-strong);
  --pf-v5-c-button--m-control--after--BorderLeftColor: var(--sds-border-strong);
  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--sds-border-strong);
  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--sds-border-strong);
  --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--sds-border-strong);
  --pf-v5-c-button--m-control--Color: var(--sds-brand-primary);
  --pf-v5-c-button--m-control--BorderRadius: 0 var(--sds-radius-sm) var(--sds-radius-sm) 0;
}
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
  border-radius: inherit;
}

/* Error/feedback text keeps its semantic color but stays AA-legible. */
.kc-feedback-text.pf-m-error,
.pf-m-error .pf-v5-c-helper-text__item-text {
  font-weight: 600;
}

/* Footer helper text (e.g. "Sign in to continue to <product>"). */
#kc-info,
.pf-v5-c-login__main-footer,
.instruction {
  color: var(--sds-text-muted);
}

/* Signup band, rendered by footer.ftl on the sign-in page only (CAUTH-UX-005 / ADR 0055). The
   parent's footer-band class supplies the top rule and padding; the rule takes the platform
   border colour instead of PatternFly's. */
#kc-signup {
  --pf-v5-c-login__main-footer-band--BorderTopColor: var(--sds-border);
  text-align: center;
  color: var(--sds-text-muted);
  font-size: 14px;
}
#kc-signup a {
  font-weight: 600;
}

/* Small screens: let the card use the width and keep padding sane. */
@media (max-width: 480px) {
  .pf-v5-c-login__main,
  .card-pf {
    border-radius: var(--sds-radius-sm);
    margin: 0 0.5rem;
  }
  #kc-header-wrapper::before {
    height: 44px;
  }
}

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