@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

/* ─────────────────────────────────────────────────────────────────────────
   Design tokens — mirror confighub/ui ThemeProvider.tsx `tokens` and the
   CSS variables it injects on :root (see confighub/ui/docs/dev/ui-design-system.md).
   Names match the UI's so drift is a grep away. Update both together.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --surface: #ffffff;
  --bg: #f6f7f9;
  --bg-hover: #f3f4f6;

  /* Borders (structural → subtle → hairline) */
  --bd0: #e6e8ec;
  --bd1: #eeeff3;
  --bd2: #f3f4f6;

  /* Text (primary → secondary → muted → ghost) */
  --t1: #111214;
  --t2: #505969;
  --t3: #8e9aaa;
  --t4: #bcc6d0;

  /* Brand — action signal only, never for status */
  --rust: #ba3d03;
  --rust-dark: #8c2c00;
  --rust-bg: rgba(186, 61, 3, 0.055);
  --rust-ring: rgba(186, 61, 3, 0.18);

  /* Semantic: foreground / background tint / border */
  --green: #15803d;
  --green-bg: #f0fdf4;
  --green-bd: rgba(21, 128, 61, 0.18);
  --blue: #1a50c1;
  --blue-bg: #eff4ff;
  --blue-bd: rgba(26, 80, 193, 0.18);
  --amber: #b45309;
  --amber-bg: #fffbeb;
  --amber-bd: rgba(180, 83, 9, 0.2);
  --red: #b91c1c;
  --red-bg: #fef2f2;
  --red-bd: rgba(185, 28, 28, 0.18);

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --sh-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
  --sh-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);

  /* Radius: rSm for buttons/inputs/chips/alerts, rMd for cards/dialogs */
  --r-sm: 5px;
  --r-md: 9px;
  --r-pill: 999px;

  /* Typography */
  --font-sans: "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Login-page sizing. The app is dense (13px base); the login runs one tier
     larger and uses the UI's `sizeLarge` control height throughout. */
  --control-h: 38px;
  --control-fs: 13.5px;

  /* Point PatternFly at our tokens so anything we don't restyle still follows */
  --pf-v5-global--primary-color--100: var(--rust);
  --pf-v5-global--primary-color--200: var(--rust-dark);
  --pf-v5-global--link--Color: var(--rust);
  --pf-v5-global--link--Color--hover: var(--rust-dark);
  --pf-v5-global--active-color--100: var(--rust);
  --pf-v5-global--BackgroundColor--100: var(--bg);
  --pf-v5-global--FontFamily--text: var(--font-sans);
  --pf-v5-global--FontFamily--heading: var(--font-sans);
}

.login-pf,
.login-pf body {
  background: var(--bg) !important;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hide the default Keycloak text-logo in the header; replace with ConfigHub mark */
#kc-header-wrapper {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: transparent !important;
  background-image: url("../img/logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 56px;
  width: 56px;
  margin: 0 auto 20px auto;
}

/* "Sign in to ConfigHub" headline — UI `h1`. kc.v2 draws a 4px blue rule
   above it; the card has no accent bar. */
.pf-v5-c-login__main-header {
  display: block !important;
  grid-template-columns: 1fr !important;
  text-align: center;
  border-top: 0;
}

#kc-page-title {
  font-family: var(--font-sans);
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--t1) !important;
  text-align: center;
  margin-bottom: 24px;
  width: 100%;
}

/* Card — UI Paper/Dialog: rMd radius, bd0 border, shLg elevation */
.pf-v5-c-login__main {
  background: var(--surface);
  border: 1px solid var(--bd0);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: 32px 40px;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

/* Default kc.v2 puts extra padding inside the card, which makes the form
   narrower than the social-provider buttons. Zero them out — the card's own
   padding is enough on all sides. */
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  padding: 0 !important;
}

.pf-v5-c-login__container {
  grid-template-columns: 30rem;
}

/* Inputs — make them fill the card content area */
.pf-v5-c-form,
.pf-v5-c-form__group,
.pf-v5-c-form-control,
.pf-v5-c-input-group,
#kc-form,
#kc-form-wrapper,
#kc-form-login {
  width: 100%;
  max-width: none !important;
}

/* Field labels — UI `subtitle1` (13px / 500 / -0.01em), secondary text */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--t2) !important;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: 6px !important;
}

/* Text input — UI MuiOutlinedInput: bg-filled, bd0 border, hover t4,
   focus 1px rust border (no halo), rSm radius */
.pf-v5-c-form-control {
  border-radius: var(--r-sm) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--bd0) !important;
  background: var(--bg) !important;
  font-size: var(--control-fs);
  padding: 0 !important;
  transition: box-shadow 0.12s ease, background 0.12s ease;
}

/* Some base templates (device user-code, OTP) put the control class on the
   <input> itself instead of a wrapper span; give those the same box. */
input.pf-v5-c-form-control {
  height: var(--control-h);
  padding: 0 12px !important;
  font-family: var(--font-sans);
  font-size: var(--control-fs);
  color: var(--t1);
}

input.pf-v5-c-form-control::placeholder {
  color: var(--t4);
  opacity: 1;
}

/* PatternFly draws an underline via ::before/::after — suppress both */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

.pf-v5-c-form-control:hover:not(:focus-within) {
  box-shadow: inset 0 0 0 1px var(--t4) !important;
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus {
  box-shadow: inset 0 0 0 1px var(--rust) !important;
  outline: none;
}

/* Password field uses a flex input-group (input + eye toggle). Promote the
   group itself to be the bordered box so total width matches the email box,
   then strip border/bg from the nested form-control and toggle button so they
   read as one continuous control. */
.pf-v5-c-input-group {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--bd0);
  background: var(--bg);
  padding: 0;
  overflow: hidden;
  transition: box-shadow 0.12s ease;
}

.pf-v5-c-input-group:hover:not(:focus-within) {
  box-shadow: inset 0 0 0 1px var(--t4);
}

.pf-v5-c-input-group:focus-within {
  box-shadow: inset 0 0 0 1px var(--rust);
  outline: none;
}

.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-form-control:hover,
.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  outline: none;
}

.pf-v5-c-input-group .pf-v5-c-button,
.pf-v5-c-input-group .pf-v5-c-button::before,
.pf-v5-c-input-group .pf-v5-c-button::after {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  color: var(--t3) !important;
  padding: 0 12px !important;
  transition: color 0.12s ease, background 0.12s ease;
}

.pf-v5-c-input-group .pf-v5-c-button:hover {
  background: var(--bg-hover) !important;
  color: var(--t2) !important;
}

.pf-v5-c-form-control input {
  width: 100%;
  height: var(--control-h);
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: var(--control-fs);
  background: transparent;
  border: 0;
  color: var(--t1);
}

.pf-v5-c-form-control input::placeholder {
  color: var(--t4);
  opacity: 1;
  font-size: var(--control-fs);
}

.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control input:focus-visible {
  outline: none;
}

/* Buttons — UI MuiButton sizeLarge: 38px, 13.5px / 600 / -0.01em, rSm radius,
   disableElevation, colour-only hover, no transforms. */
.pf-v5-c-button {
  font-family: var(--font-sans);
}

.pf-v5-c-button.pf-m-primary {
  background-color: var(--rust) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  height: var(--control-h);
  font-size: var(--control-fs);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 0 18px;
  margin: 0;
  transition: background-color 0.12s ease;
  box-shadow: none !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--rust-dark) !important;
  box-shadow: none !important;
}

.pf-v5-c-button.pf-m-primary:active {
  background-color: var(--rust-dark) !important;
  box-shadow: none !important;
}

.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--rust) !important;
  box-shadow: none !important;
}

.pf-v5-c-button.pf-m-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--rust-ring) !important;
  outline: none;
}

/* PatternFly draws the secondary button's outline with an ::after pseudo
   element on top of the real border; drop it so only ours shows. */
.pf-v5-c-button.pf-m-secondary::after,
.pf-v5-c-button.pf-m-secondary:hover::after {
  border: 0 !important;
  content: none !important;
}

/* Secondary buttons — UI MuiButton outlined: bd0 border, t2 text,
   hover bg-hover + t4 border */
.pf-v5-c-button.pf-m-secondary {
  background-color: var(--surface) !important;
  color: var(--t2) !important;
  border: 1px solid var(--bd0) !important;
  border-radius: var(--r-sm) !important;
  height: var(--control-h);
  font-size: var(--control-fs);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 0 18px;
  margin: 0;
  box-shadow: none !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background-color: var(--bg-hover) !important;
  border-color: var(--t4) !important;
  color: var(--t2) !important;
}

/* OR divider above social providers — UI `caption` */
.cfh-social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px 0;
  color: var(--t3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cfh-social-divider::before,
.cfh-social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bd0);
}

/* kc.v2 renders the info section ("New user? Register") as a centred,
   bordered footer band after the social providers. Show it as plain text
   directly under the form, above the OR divider. */
#kc-info.pf-v5-c-login__main-footer-band {
  order: -1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

/* Social-provider list — stack vertically, full-width */
.cfh-social-list .pf-v5-c-login__main-footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cfh-social-list .pf-v5-c-login__main-footer-links-item {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

/* Social buttons follow the outlined-button recipe */
.cfh-social-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--control-h);
  padding: 0 18px;
  background: var(--surface) !important;
  color: var(--t2) !important;
  border: 1px solid var(--bd0) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600;
  font-size: var(--control-fs);
  letter-spacing: -0.01em;
  text-decoration: none !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.cfh-social-button:hover {
  background: var(--bg-hover) !important;
  border-color: var(--t4) !important;
  color: var(--t1) !important;
  text-decoration: none !important;
}

.cfh-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

/* kc.v2 tints every social icon without a `.google` class blue and sizes it
   from the font scale; ours carry their own colours and size. */
#kc-social-providers .cfh-social-icon svg {
  filter: none;
  height: 20px;
}

.cfh-social-label {
  display: inline-block;
}

/* Links (e.g. forgot password, sign-up) in brand colour */
a {
  color: var(--rust);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}

a:hover {
  color: var(--rust-dark);
  text-decoration: underline;
}

/* Tighten the vertical gap between the last form group and the submit button.
   kc.v2 gives __actions a negative bottom margin to cancel the block button's
   own 8px margins; we zero the button margins, so zero this too or the
   "New user? Register" line below the form rides up under the button. */
#kc-form-buttons,
.pf-v5-c-form__actions {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* kc.v2 adds 4px of top padding to the actions row on top of that */
.pf-v5-c-form__actions.pf-v5-u-pt-xs {
  padding-block-start: 0 !important;
}

/* "New user? Register" under the login form */
#kc-registration {
  margin-top: 16px;
}

/* Actions stack full-width on every page, including base templates that
   omit pf-m-block (device user-code, logout confirm, consent). Primary first,
   secondary beneath it, 8px apart. */
.pf-v5-c-form__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#kc-form-buttons .pf-v5-c-button.pf-m-primary,
.pf-v5-c-form__actions .pf-v5-c-button {
  width: 100%;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   Consent — base login-oauth-grant.ftl ("Grant access to <client>")
   ───────────────────────────────────────────────────────────────────────── */

#kc-oauth h3 {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--t1);
  margin: 0 0 10px;
}

#kc-oauth .pf-v5-c-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--bd0);
  border-radius: var(--r-sm);
  background: var(--bg);
}

#kc-oauth .pf-v5-c-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t2);
  border-bottom: 1px solid var(--bd1);
}

#kc-oauth .pf-v5-c-list li:last-child {
  border-bottom: 0;
}

/* Small check mark in front of each granted scope */
#kc-oauth .pf-v5-c-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 9px;
  margin: -3px 4px 0 2px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
}

#kc-oauth .pf-v5-c-form {
  margin-top: 20px;
}

/* Logout confirmation — base logout-confirm.ftl */
#kc-logout-confirm .instruction {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t2);
  margin: 0 0 16px;
}

#kc-logout-confirm #kc-info-message {
  text-align: center;
  margin-top: 16px;
}

#kc-logout-confirm #kc-info-message p {
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Form vertical rhythm.
   ─────────────────────────────────────────────────────────────────────────
   `gap` is left at PatternFly's own 24px default (unset here) — that already
   matches the spacing of .cfh-field-row rows on register.ftl. A margin
   restricted to direct-child groups (`>`) gives bare rows (register's submit
   button, reset/update-password's fields) 24px + 16px = 40px without touching
   .cfh-field-row's nested children. The login form overrides this with its
   own 16px rhythm (16px gap + the 8px margin-top above = 24px before Sign In). */

#kc-form-login.pf-v5-c-form {
  gap: 16px;
}

.pf-v5-c-form > .pf-v5-c-form__group {
  margin-bottom: 16px;
}

#kc-form-login > .pf-v5-c-form__group {
  margin-bottom: 0;
}

/* login.ftl always writes a form group for "remember me", also when the realm
   disables it, which left an empty grid row above the Sign In button. The
   FreeMarker output keeps whitespace in that div, thus :empty is not reliable
   — select on the absence of element children instead. */
#kc-form-login > .pf-v5-c-form__group:not(:has(*)) {
  display: none;
}

/* Body copy that kc.v2 renders outside our own classes (e.g. "New user?",
   "Page has expired" instructions) */
#kc-info-wrapper,
#kc-registration,
#kc-registration span,
.pf-v5-c-login__main-body p:not([class]),
.pf-v5-c-login__main-footer p:not([class]) {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--t2);
}

/* ─────────────────────────────────────────────────────────────────────────
   Inline validation / error helper text
   ───────────────────────────────────────────────────────────────────────── */

/* Error helper text (below a field) — UI `body2` in the error colour */
.pf-v5-c-form__helper-text.pf-m-error,
[id^="input-error"] {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--red);
  margin-top: 5px;
  font-weight: 500;
}

/* Red border on invalid inputs. Keycloak puts aria-invalid on the <input>,
   not on the wrapping form-control span, so match via :has(). */
.pf-v5-c-form-control:has(> input[aria-invalid="true"]),
.pf-v5-c-form-control:has(> input[aria-invalid="true"]):hover {
  box-shadow: inset 0 0 0 1px var(--red) !important;
}

.pf-v5-c-input-group:has(input[aria-invalid="true"]),
.pf-v5-c-input-group:has(input[aria-invalid="true"]):hover {
  box-shadow: inset 0 0 0 1px var(--red) !important;
}

/* Inside an input group the group draws the ring; keep the nested control bare */
.pf-v5-c-input-group .pf-v5-c-form-control:has(> input[aria-invalid="true"]),
.pf-v5-c-input-group .pf-v5-c-form-control:has(> input[aria-invalid="true"]):hover {
  box-shadow: none !important;
}

/* Global alert banners (e.g. "Invalid credentials") — UI MuiAlert standard:
   tint background, 3px left border in the semantic colour, text in that colour */
.pf-v5-c-alert {
  border: 0;
  border-left: 3px solid currentColor;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: none;
}

.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-error {
  background: var(--red-bg);
  color: var(--red);
}

.pf-v5-c-alert.pf-m-success {
  background: var(--green-bg);
  color: var(--green);
}

.pf-v5-c-alert.pf-m-warning {
  background: var(--amber-bg);
  color: var(--amber);
}

.pf-v5-c-alert.pf-m-info {
  background: var(--blue-bg);
  color: var(--blue);
}

.pf-v5-c-alert__icon {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 16px;
  color: inherit;
}

.pf-v5-c-alert__title {
  font-weight: 500;
  font-size: 13px;
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────
   Status pages — error.ftl / info.ftl / login-verify-email.ftl
   ───────────────────────────────────────────────────────────────────────── */

.cfh-status-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 4px;
  gap: 12px;
}

/* Coloured icon circle — semantic fg / bg tint / border trio */
.cfh-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.cfh-status-icon--error {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-bd);
}

.cfh-status-icon--info {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid var(--blue-bd);
}

.cfh-status-icon--email {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-bd);
}

.cfh-status-message {
  font-size: 13.5px;
  color: var(--t1);
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  max-width: 100%;
  text-wrap: pretty;
}

.cfh-status-submessage {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

.cfh-status-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rust);
  text-decoration: none;
  margin-top: 4px;
  transition: color 0.12s ease;
}

.cfh-status-back-link:hover {
  color: var(--rust-dark);
  text-decoration: underline;
}

.cfh-status-resend-link {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rust);
  text-decoration: none;
  margin-top: 4px;
}

.cfh-status-resend-link:hover {
  color: var(--rust-dark);
  text-decoration: underline;
}

.cfh-status-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Send / Cancel on application-initiated email verification. kc.v2 gives
   #kc-verify-email-form 24px margins; the status page's own gap is enough. */
#kc-verify-email-form.cfh-status-actions {
  width: 100%;
  margin: 4px 0 0;
}

.cfh-status-actions #kc-form-buttons {
  margin-top: 0 !important;
}

/* Required actions list on info.ftl */
.cfh-required-actions {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  color: var(--t2);
  text-align: left;
  width: 100%;
}

.cfh-required-actions li {
  padding: 6px 0;
  border-bottom: 1px solid var(--bd1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cfh-required-actions li:last-child {
  border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Register page — "back to login" footer note
   ───────────────────────────────────────────────────────────────────────── */

.cfh-form-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--t2);
  padding-top: 16px;
  border-top: 1px solid var(--bd1);
}

.cfh-form-footer a {
  color: var(--rust);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}

.cfh-form-footer a:hover {
  color: var(--rust-dark);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   Cancel / secondary action button (used by login-update-password.ftl)
   ───────────────────────────────────────────────────────────────────────── */

#kc-form-buttons .pf-v5-c-button.pf-m-secondary + .pf-v5-c-button,
#kc-form-buttons button[name="cancel-aia"] {
  margin-top: 8px;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
   Register card — wider layout + 2-column field rows
   ─────────────────────────────────────────────────────────────────────────
   Uses :has(#kc-register-form) to scope the wider card exclusively to the
   registration page without adding any extra class to markup or template.
   Falls back to standard 30rem card on screens narrower than 640px.
   ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .pf-v5-c-login__main:has(#kc-register-form) {
    max-width: 44rem;
  }

  .pf-v5-c-login__container:has(#kc-register-form) {
    grid-template-columns: 44rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Organization picker — select-organization.ftl
   ─────────────────────────────────────────────────────────────────────────
   The org list uses the footer-link classes (pf-v5-c-login__main-footer-links,
   pinned in theme.properties), which by default look like small centered
   text links. Restyle the submit buttons as full-width selection rows using
   the UI's "flat link chip" recipe: hairline border, colour-only hover to the
   rust border + rust-bg tint, no elevation.
   ───────────────────────────────────────────────────────────────────────── */

#kc-user-organizations .pf-v5-c-login__main-footer-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#kc-user-organizations .pf-v5-c-login__main-footer-links > li {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

#kc-user-organizations .pf-v5-c-login__main-footer-links-item-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--control-h);
  padding: 0 14px;
  background: var(--surface) !important;
  color: var(--t1) !important;
  border: 1px solid var(--bd0) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--control-fs);
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

#kc-user-organizations .pf-v5-c-login__main-footer-links-item-link:hover {
  background: var(--rust-bg) !important;
  border-color: var(--rust) !important;
  color: var(--t1) !important;
  text-decoration: none !important;
}

#kc-user-organizations .pf-v5-c-login__main-footer-links-item-link > span {
  flex: 1;
  text-align: left;
}

/* Right-pointing chevron to signal "choose this org" */
#kc-user-organizations .pf-v5-c-login__main-footer-links-item-link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--t3);
  border-top: 2px solid var(--t3);
  transform: rotate(45deg);
  flex: 0 0 auto;
  transition: border-color 0.12s ease;
}

#kc-user-organizations .pf-v5-c-login__main-footer-links-item-link:hover::after {
  border-color: var(--rust);
}

/* The readonly "attempted username" row (template.ftl's <@username/> macro,
   wrapped in kcContentWrapperClass="pf-v5-u-mb-md-on-md") sits above the org
   list on select-organization.ftl, and above the password step on identity-
   first login. */
.pf-v5-c-form.pf-v5-u-mb-md-on-md > .pf-v5-c-form__group {
  margin-bottom: 16px;
}

/* Up to Keycloak 26.1 that wrapper was never closed, so the password form or
   org list sat inside its grid: a 1.5rem gap above it, and the wrapper's own
   1rem (md+) bottom margin below it. 26.7 closes the wrapper; recreate the
   same spacing. The empty username error slot also moved out of the flex
   input group, where it took no height. */
.pf-v5-c-form.pf-v5-u-mb-md-on-md {
  margin-bottom: 1.5rem !important;
}

.pf-v5-u-mb-md-on-md #input-error-container-username:not(:has(*)) {
  display: none;
}

@media (min-width: 768px) {
  .pf-v5-c-form.pf-v5-u-mb-md-on-md + #kc-form,
  .pf-v5-c-form.pf-v5-u-mb-md-on-md + form.form-vertical {
    display: flow-root;
    margin-bottom: 1rem;
  }
}

/* #kc-user-organizations sits in a plain `form.form-vertical` (not a
   .pf-v5-c-form grid), so it needs its own explicit trailing margin instead
   of grid gap. */
#kc-user-organizations {
  margin-bottom: 16px;
}

/* 2-column paired field rows (first/last name, password/confirm).
   Single column on mobile; activates grid above 640px. The row's own gap is
   the only spacing mechanism between stacked fields on mobile. */
.cfh-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .cfh-field-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
  }
}