/* ============================================================
   Keycloak login theme (keycloak.v2 / PatternFly 5)
   Matches the host application's MUI admin UI.
   To rebrand: change the values of the `--app-*` custom
   properties in `:root` below — every other rule reads them.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand palette */
  --app-primary:       #7367F0;
  --app-primary-dark:  #655BD3;
  --app-primary-light: #8C82F4;
  --app-secondary:     #00CFE8;
  --app-error:         #EA5455;
  --app-success:       #28C76F;

  --app-text:          rgba(33, 30, 46, 0.87);
  --app-text-muted:    rgba(33, 30, 46, 0.68);
  --app-text-disabled: rgba(33, 30, 46, 0.50);
  --app-divider:       rgba(33, 30, 46, 0.12);
  --app-body-bg:       #F5F5F9;
  --app-paper-bg:      #FFFFFF;

  /* ---- PatternFly v5 variable overrides */
  --pf-v5-global--primary-color--100: var(--app-primary);
  --pf-v5-global--primary-color--200: var(--app-primary-dark);
  --pf-v5-global--link--Color:        var(--app-primary);
  --pf-v5-global--link--Color--hover: var(--app-primary-dark);

  --pf-v5-global--BackgroundColor--100: var(--app-paper-bg);
  --pf-v5-global--Color--100:           var(--app-text);
  --pf-v5-global--Color--200:           var(--app-text-muted);

  --pf-v5-global--FontFamily--sans-serif:
    'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--sans-serif);
  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--sans-serif);

  --pf-v5-global--BorderRadius--sm: 6px;
  --pf-v5-global--BorderRadius--lg: 10px;
}

html, body {
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  color: var(--app-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Split-screen layout
   ─ Left  : full-bleed illustration (login.png) with mask-light
            overlay at the bottom, on a tinted brand background.
   ─ Right : login card centered on a clean white panel.
   Stacks to single-column under 1024px (tablets, phones).
   ============================================================ */
.pf-v5-c-login,
.pf-v5-c-background-image {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-height: 100vh;
  background: var(--app-paper-bg) !important;   /* right panel color */
  background-image: none !important;
  padding: 0 !important;
}

/* LEFT panel — illustration sits in front, mask is the backdrop. */
.pf-v5-c-login::before {
  content: '';
  flex: 1 1 0;
  min-width: 0;
  padding: 64px 80px 96px;
  box-sizing: border-box;
  background-color: #f8f8f8;
  background-image:
    url('../img/login.svg'),
    url('../img/mask-light.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center bottom;
  background-size: clamp(360px, 65%, 600px) auto, 100% auto;
  background-origin: content-box, padding-box;
}

/* RIGHT panel — flexible width so it scales down at higher browser
   zoom levels along with the left panel. Capped at 640px on wide
   screens, floored at 460px on narrow ones. */
.pf-v5-c-login__container {
  flex: 0 0 auto !important;
  width: 40% !important;
  min-width: 460px !important;
  max-width: 640px !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 32px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
}

/* ---------- Welcome header — sits above the login card */
.app-welcome {
  width: 100%;
  text-align: left;
  margin: 0 0 60px;
  padding: 0 28px;        /* match the card body's left/right padding */
}
.app-welcome__brand {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 24px;     /* horizontally centered in the right panel */
  user-select: none;
}
.app-welcome__title {
  margin: 0 0 6px;
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--app-text);
  letter-spacing: 0;
}
.app-welcome__subtitle {
  margin: 0;
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--app-text-muted);
}

/* ---------- Caps Lock hint (shown under password fields) */
.app-capslock-hint {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #92400E;                                      /* warning text */
  background-color: rgba(255, 159, 67, 0.12);          /* warning tint */
  border: 1px solid rgba(255, 159, 67, 0.30);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-capslock-hint::before {
  content: '⇪';
  font-size: 0.95rem;
  line-height: 1;
}
.app-capslock-hint[hidden] { display: none; }

/* ---------- Card — frameless, auto-centered inside the right panel */
.pf-v5-c-login__main {
  width: 100%;
  margin: 0 auto !important;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Hide the PatternFly header/footer slots that would push the card
   off-center vertically. The login uses only the card body. */
.pf-v5-c-login__header,
.pf-v5-c-login__footer {
  display: none !important;
}

/* Tablet + mobile: stack vertically, hide illustration.
   Background stays white (inherited from the default rule above),
   and the card stays frameless — no border, no shadow. */
@media (max-width: 1024px) {
  .pf-v5-c-login,
  .pf-v5-c-background-image {
    flex-direction: column !important;
  }
  .pf-v5-c-login::before {
    display: none;
  }
  .pf-v5-c-login__container {
    flex: 1 1 auto;
    max-width: 460px;
    margin: auto !important;
    padding: 24px;
  }
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  padding-left: 28px;
  padding-right: 28px;
}
.pf-v5-c-login__main-header { padding-top: 4px; padding-bottom: 8px; }

/* ---------- Brand / logo header ---------- */
#kc-header-wrapper {
  background-image: url('../img/logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 64px;
  margin: 24px 0 8px;
  font-size: 0;            /* hide default "Keycloak" text */
  color: transparent;
}

/* Page title under the logo */
.pf-v5-c-login__main-header-desc,
#kc-page-title {
  color: var(--app-text);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 12px 0 4px;
  text-align: center;
}

/* ============================================================
   Inputs — mirror the host app's MUI CustomTextField:
   label sits ABOVE the input, the input is a transparent
   rectangle with a 1px border, focus turns the border primary
   and adds a 1px inset glow. Filled-variant chrome is removed.
   ============================================================ */

/* ---- Label above the input — typography only.
   We deliberately do NOT touch padding/margin/display here so that
   PatternFly's native spacing between the label wrapper and the
   input control wrapper is preserved. */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
label[for="username"],
label[for="password"],
label[for="password-new"],
label[for="password-confirm"] {
  color: var(--app-text) !important;
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  font-weight: 500;
  font-size: 0.8125rem;          /* MUI body2 */
  letter-spacing: 0;
  text-transform: none;
}
.pf-v5-c-form__label-required { color: var(--app-error); margin-left: 4px; }

/* ---- The bordered "field" rectangle — ONE rule for both inputs.

   Keycloak's field macro renders one of two shapes inside
   `.pf-v5-c-form__group`:

     username:   <input class="pf-v5-c-form-control"/>
     password:   <div class="pf-v5-c-input-group">
                   <input class="pf-v5-c-form-control"/>
                   <button class="pf-v5-c-button pf-m-control">eye</button>
                 </div>

   We give BOTH shapes the same border styling via a single
   comma-separated selector — they can no longer diverge. Helper
   text and the "Remember me" checkbox stay OUTSIDE this box
   because they're siblings of the input(-group), not children. */

/* THE FIELD — your Keycloak 26.5.3 builds this DOM under .pf-v5-c-form__group:

     username:   <span class="pf-v5-c-form-control"><input/></span>
     password:   <div class="pf-v5-c-input-group">
                   <div class="pf-v5-c-input-group__item pf-m-fill">
                     <span class="pf-v5-c-form-control"><input/></span>
                   </div>
                   <div class="pf-v5-c-input-group__item">
                     <button class="pf-v5-c-button pf-m-control">eye</button>
                   </div>
                 </div>

   So we target the two direct-child variants of .pf-v5-c-form__group:
   the form-control SPAN (username) and the input-group DIV (password).
   They share one rule => they cannot diverge. */

.pf-v5-c-form__group > .pf-v5-c-form-control,
.pf-v5-c-form__group > .pf-v5-c-input-group {
  display: flex !important;
  align-items: stretch;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: 1px solid rgba(33, 30, 46, 0.20) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition:
    border-color .15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow   .15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover */
.pf-v5-c-form__group > .pf-v5-c-form-control:hover:not(:focus-within),
.pf-v5-c-form__group > .pf-v5-c-input-group:hover:not(:focus-within) {
  border-color: rgba(33, 30, 46, 0.28) !important;
}

/* Focus — all 4 sides primary blue, no dark shadow */
.pf-v5-c-form__group > .pf-v5-c-form-control:focus-within,
.pf-v5-c-form__group > .pf-v5-c-input-group:focus-within {
  border-color: var(--app-primary) !important;
  box-shadow: inset 0 0 0 1px var(--app-primary) !important;
}

/* Error */
.pf-v5-c-form__group > .pf-v5-c-form-control:has([aria-invalid="true"]),
.pf-v5-c-form__group > .pf-v5-c-input-group:has([aria-invalid="true"]) {
  border-color: var(--app-error) !important;
}
.pf-v5-c-form__group > .pf-v5-c-form-control:has([aria-invalid="true"]):focus-within,
.pf-v5-c-form__group > .pf-v5-c-input-group:has([aria-invalid="true"]):focus-within {
  border-color: var(--app-error) !important;
  box-shadow: inset 0 0 0 1px var(--app-error) !important;
}

/* Disabled */
.pf-v5-c-form__group > .pf-v5-c-form-control:has(:disabled),
.pf-v5-c-form__group > .pf-v5-c-input-group:has(:disabled) {
  background-color: rgba(33, 30, 46, 0.06) !important;
  border-color: rgba(33, 30, 46, 0.12) !important;
}

/* Kill PatternFly's bottom-only ::after on every form-control variant
   (the outer one for username, the inner one inside the password's
   input-group__item.pf-m-fill). */
.pf-v5-c-form__group .pf-v5-c-form-control::before,
.pf-v5-c-form__group .pf-v5-c-form-control::after,
.pf-v5-c-form__group .pf-v5-c-input-group::before,
.pf-v5-c-form__group .pf-v5-c-input-group::after,
.pf-v5-c-form__group .pf-v5-c-input-group__item::before,
.pf-v5-c-form__group .pf-v5-c-input-group__item::after {
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  content: none !important;
}

/* Strip chrome from the INNER form-control (the one nested inside the
   password's input-group__item) so it doesn't paint its own border. */
.pf-v5-c-form__group .pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-form__group .pf-v5-c-input-group__item {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  --pf-v5-c-form-control--BorderTopWidth: 0 !important;
  --pf-v5-c-form-control--BorderRightWidth: 0 !important;
  --pf-v5-c-form-control--BorderBottomWidth: 0 !important;
  --pf-v5-c-form-control--BorderLeftWidth: 0 !important;
  --pf-v5-c-form-control--BackgroundColor: transparent !important;
  --pf-v5-c-form-control--focus--BorderBottomColor: transparent !important;
  --pf-v5-c-form-control--focus--BorderBottomWidth: 0 !important;
  --pf-v5-c-form-control--focus--BoxShadow: none !important;
}

/* Flex sizing: ONLY the .pf-m-fill item grows; the eye-button item
   stays as content-sized so the button hugs the right edge. */
.pf-v5-c-form__group .pf-v5-c-input-group__item.pf-m-fill {
  flex: 1 1 auto;
  min-width: 0;
}
.pf-v5-c-form__group .pf-v5-c-input-group__item.pf-m-fill .pf-v5-c-form-control,
.pf-v5-c-form__group .pf-v5-c-input-group__item.pf-m-fill input {
  width: 100% !important;
}
.pf-v5-c-form__group .pf-v5-c-input-group__item:not(.pf-m-fill) {
  flex: 0 0 auto;
}

/* Eye button (.pf-m-control) — strip its border so only the wrapper
   shows the field outline; render as a flat icon button. */
.pf-v5-c-form__group .pf-v5-c-input-group__item .pf-v5-c-button,
.pf-v5-c-form__group .pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--app-text-muted) !important;
  padding: 0 12px !important;
  --pf-v5-c-button--BackgroundColor: transparent !important;
  --pf-v5-c-button--BorderColor: transparent !important;
  --pf-v5-c-button--BorderWidth: 0 !important;
  --pf-v5-c-button--BorderRadius: 0 !important;
  --pf-v5-c-button--after--BorderColor: transparent !important;
  --pf-v5-c-button--after--BorderWidth: 0 !important;
  --pf-v5-c-button--m-control--BackgroundColor: transparent !important;
  --pf-v5-c-button--m-control--after--BorderColor: transparent !important;
  --pf-v5-c-button--m-control--after--BorderTopWidth: 0 !important;
  --pf-v5-c-button--m-control--after--BorderRightWidth: 0 !important;
  --pf-v5-c-button--m-control--after--BorderBottomWidth: 0 !important;
  --pf-v5-c-button--m-control--after--BorderLeftWidth: 0 !important;
}
.pf-v5-c-form__group .pf-v5-c-input-group__item .pf-v5-c-button::before,
.pf-v5-c-form__group .pf-v5-c-input-group__item .pf-v5-c-button::after {
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  content: none !important;
}
.pf-v5-c-form__group .pf-v5-c-input-group__item .pf-v5-c-button:hover,
.pf-v5-c-form__group .pf-v5-c-input-group__item .pf-v5-c-button:focus {
  background-color: rgba(115, 103, 240, 0.08) !important;
  color: var(--app-primary) !important;
}

/* Browser default dark focus ring — kill on every focusable child */
.pf-v5-c-form__group :focus,
.pf-v5-c-form__group :focus-visible,
.pf-v5-c-form__group :focus-within {
  outline: 0 none !important;
  outline-offset: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

/* ---- The actual <input> — wipe all native browser chrome (default
        border, focus ring, Firefox's ::-moz-focus-inner, Chrome's
        autofill yellow bg) so only the wrapper's styling shows.
        Targets the input via its actual DOM path: it sits inside
        .pf-v5-c-form-control (a <span>) which is a child of
        .pf-v5-c-form__group. */
html body .pf-v5-c-form__group input,
html body .pf-v5-c-form__group input:focus,
html body .pf-v5-c-form__group input:focus-visible,
html body .pf-v5-c-form__group input:active,
.pf-v5-c-form__group input,
.pf-v5-c-form__group input:focus,
.pf-v5-c-form__group input:focus-visible,
.pf-v5-c-form__group input:active {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: 0 none !important;
  outline-offset: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--app-text-muted) !important;       /* MUI text.secondary */
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  font-size: 0.9375rem;                              /* MUI body1 */
  line-height: 1.467;
  padding: 15.5px 13px !important;                   /* CustomTextField default */
  width: 100%;
}

/* Firefox: kill the dotted/dark inner focus ring */
.pf-v5-c-form__group input::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
  outline: 0 !important;
}

/* ID-based nuke — highest possible specificity (#id beats any number
   of classes). If ANY PatternFly selector is still painting a border,
   outline, or box-shadow on these inputs, this stops it dead. */
#username,
#password,
#password-new,
#password-confirm,
#username:focus,
#password:focus,
#password-new:focus,
#password-confirm:focus,
#username:focus-visible,
#password:focus-visible,
#password-new:focus-visible,
#password-confirm:focus-visible {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  border-color: transparent !important;
  outline: 0 none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--app-text-muted) !important;
}

/* Chrome / Edge: defeat the yellow autofill background + its inset shadow */
.pf-v5-c-form__group input:-webkit-autofill,
.pf-v5-c-form__group input:-webkit-autofill:hover,
.pf-v5-c-form__group input:-webkit-autofill:focus,
.pf-v5-c-form__group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: var(--app-text) !important;
  caret-color: var(--app-text);
  transition: background-color 5000s ease-in-out 0s;
}

.pf-v5-c-form__group input::placeholder {
  color: var(--app-text-disabled);
  transition: opacity .15s ease, transform .15s ease;
}
.pf-v5-c-form__group input:focus::placeholder { transform: translateX(4px); }

/* ---- Eye icon inside the eye-toggle button — scoped to input-group ONLY
        so the Sign In button (also a child of .pf-v5-c-form__group) is
        not affected. */
.pf-v5-c-form__group .pf-v5-c-input-group .pf-v5-c-button > i,
.pf-v5-c-form__group .pf-v5-c-input-group .pf-v5-c-button > svg {
  font-size: 1.125rem;
  line-height: 1;
}

/* ---- Helper text (per-field error text). Hoist below the shell so
        the bordered rectangle stays clean. */
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text {
  display: block;
  margin: 8px 0 0;
  padding: 0 2px;
  font-size: 0.8125rem;                              /* MUI body2 */
  line-height: 1.154;
  color: var(--app-text-muted);
  background: transparent !important;
  border: 0 !important;
}

/* ---------- Buttons (MUI-style contained / outlined) ---------- */
.pf-v5-c-button {
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.43px;
  text-transform: none;
  border-radius: 8px;
  padding: 10px 20px;
  line-height: 1.2;
  transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.pf-v5-c-button:active:not(.pf-m-disabled) { transform: scale(0.985); }

/* Primary (Sign in / Send reset link / Save) */
.pf-v5-c-button.pf-m-primary {
  background-color: var(--app-primary) !important;
  border: 1px solid var(--app-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(115, 103, 240, 0.32) !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  --pf-v5-c-button--BackgroundColor: var(--app-primary) !important;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--app-primary) !important;
  --pf-v5-c-button--m-primary--Color: #FFFFFF !important;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--app-primary-dark) !important;
  border-color: var(--app-primary-dark) !important;
  box-shadow: 0 4px 10px rgba(101, 91, 211, 0.36) !important;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--app-primary-dark) !important;
}
.pf-v5-c-button.pf-m-primary:disabled,
.pf-v5-c-button.pf-m-primary.pf-m-disabled {
  background-color: rgba(115, 103, 240, 0.4) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
}
/* Block buttons (`pf-m-block` on the Sign In button) — full width */
.pf-v5-c-button.pf-m-block {
  width: 100% !important;
  display: block;
}

/* Secondary / "Back to Login" / Cancel */
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary {
  background-color: transparent;
  border: 1px solid var(--app-primary);
  color: var(--app-primary);
}
.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-tertiary:hover {
  background-color: rgba(115, 103, 240, 0.08);
  border-color: var(--app-primary-dark);
  color: var(--app-primary-dark);
}

/* Block / full-width buttons used by login-update-password.ftl */
.pf-v5-c-button.pf-m-block,
.pf-v5-c-button.pf-m-display-block {
  width: 100%;
}

/* ---------- Checkbox (Remember me / Logout other sessions) ---------- */
.pf-v5-c-check__input {
  accent-color: var(--app-primary);
}
.pf-v5-c-check__label {
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}

/* ---------- Links (Forgot password, Register) ---------- */
.pf-v5-c-login__main-footer-band a,
#kc-info a,
a[href*="reset-credentials"],
a[href*="registration"] {
  color: var(--app-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s ease;
}
.pf-v5-c-login__main-footer-band a:hover,
#kc-info a:hover,
a[href*="reset-credentials"]:hover,
a[href*="registration"]:hover {
  color: var(--app-primary-dark);
  text-decoration: underline;
}

/* ---------- Alerts / inline messages ---------- */
.pf-v5-c-alert {
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
}
.pf-v5-c-alert.pf-m-danger {
  background-color: rgba(234, 84, 85, 0.10);
  border-color: rgba(234, 84, 85, 0.25);
  color: #991B1B;
}
.pf-v5-c-alert.pf-m-success {
  background-color: rgba(40, 199, 111, 0.10);
  border-color: rgba(40, 199, 111, 0.25);
  color: #065F46;
}
.pf-v5-c-alert.pf-m-warning {
  background-color: rgba(255, 159, 67, 0.12);
  border-color: rgba(255, 159, 67, 0.30);
  color: #92400E;
}
.pf-v5-c-alert.pf-m-info {
  background-color: rgba(115, 103, 240, 0.10);
  border-color: rgba(115, 103, 240, 0.25);
  color: #075985;
}

/* Per-field error text */
.pf-v5-c-helper-text__item.pf-m-error,
.pf-v5-c-form__helper-text.pf-m-error,
.kc-feedback-text {
  color: var(--app-error);
  font-size: 0.75rem;
}

/* ---------- Footer / "Don't have an account?" band ---------- */
.pf-v5-c-login__main-footer-band,
#kc-info {
  background-color: transparent;
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  text-align: center;
  padding: 12px 28px 20px;
}

/* ---------- Reset-password / forgot info text ---------- */
.kc-login-main-footer-helper-text,
.pf-v5-c-login__main-footer-helper-text {
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  display: block;
  margin-top: 12px;
  text-align: center;
}

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
  .pf-v5-c-login__container { padding: 16px; }
  .pf-v5-c-login__main { border-radius: 12px; }
  .pf-v5-c-login__main-header,
  .pf-v5-c-login__main-body,
  .pf-v5-c-login__main-footer { padding-left: 20px; padding-right: 20px; }
}