/*
 * The `emulate` login theme — the portal's sign-in look on Keycloak 26.
 *
 * Loaded after keycloak.v2's css/styles.css and PatternFly 5, and re-skins the
 * stock markup through the hooks keycloak.v2 exposes (--keycloak-*), the
 * PatternFly 5 variables (--pf-v5-*), and a few element selectors. No template
 * is forked. If a page ever needs markup CSS cannot reach, a single .ftl
 * override next to theme.properties is the fallback; start with CSS.
 *
 * TOKENS. The two blocks under "Tokens" are copied VERBATIM from
 *   packages/ui/src/styles/tokens.css
 * — its `:root` block (the dark palette) and its `[data-theme="light"]` block.
 * Keep them identical: when tokens.css changes, paste both blocks again and
 * re-run auth/keycloak/scripts/gen-lattice.mjs if a lattice colour moved.
 * The only change is the selector the light block hangs on. The portal picks a
 * palette from `data-theme`; a login page has no app state to read, so it
 * follows the OS setting. That is the same signal keycloak.v2 uses to put
 * `pf-v5-theme-dark` on <html>. Light is the default: the dark block is the
 * base, and the light block overrides it whenever the OS is not dark.
 *
 * FONTS are self-hosted (resources/fonts, SIL OFL 1.1, licences alongside), so
 * the auth domain makes no third-party font request. Latin + Latin Extended
 * subsets of the variable Inter and JetBrains Mono (fontsource 5.3.0).
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ══ Tokens — packages/ui/src/styles/tokens.css, verbatim ══════════════════ */

:root {
  /* ── Surfaces — deep navy near-black, stepped ──────────── */
  --bg-deep:      #0A1418;
  --bg-raised:    #142028;
  --bg-elevated:  #1B2C36;
  --bg-glass:     rgba(20, 32, 40, 0.55);
  --bg-hairline:  rgba(180, 220, 230, 0.07);
  --bg-hairline-strong: rgba(180, 220, 230, 0.14);

  /* ── Text — slightly cool white, descending mute ───────── */
  --text-primary:   #F5FAFB;
  --text-secondary: #B6C8CB;
  --text-muted:     #7E939A;
  --text-faint:     #4A5C66;
  --text-inverse:   #0A1418;

  /* ── Brand ─────────────────────────────────────────────── */
  --accent-heat:      #E54F20;   /* RESERVED — primary CTA only */
  --accent-heat-hot:  #FD6F00;   /* hover state of heat */
  --accent-spark:     #86EEF5;   /* default highlight + glow + headline keywords */
  --accent-spark-hot: #B4F5F9;   /* hover state of spark */
  --accent-signal:    #1863DC;   /* secondary signal (data viz) */
  --accent-discharge: #7929FF;   /* tertiary signal (data viz) */

  /* ── Semantic surfaces — flip per theme ────────────────── */
  /* These are the only surfaces components should reach for when they
   * need a translucent panel over the lattice. Hard-coding
   * rgba(20,32,40,...) breaks light-mode — always use these. */
  --surface-header:  rgba(10, 20, 24, 0.65);  /* sticky header glass */
  --surface-footer:  rgba(10, 20, 24, 0.70);  /* footer glass */
  --surface-ghost:   rgba(20, 32, 40, 0.50);  /* ghost button + eyebrow chip */
  --surface-input:   rgba(20, 32, 40, 0.60);  /* form fields */

  /* ── Heat vignettes — the only allowed gradient family ── */
  --vignette-heat-soft:   rgba(229, 79, 32, 0.10);  /* page atmosphere */
  --vignette-heat-strong: rgba(229, 79, 32, 0.18);  /* CTA block */

  /* ── Spark / heat tinted chip surfaces ─────────────────── */
  --spark-tint-bg:          rgba(134, 238, 245, 0.06);
  --spark-tint-bg-2:        rgba(134, 238, 245, 0.04);   /* icon tile rest */
  --spark-tint-edge:        rgba(134, 238, 245, 0.18);
  --spark-tint-edge-strong: rgba(134, 238, 245, 0.25);
  --heat-tint-bg:           rgba(229, 79, 32, 0.08);
  --heat-tint-edge:         rgba(229, 79, 32, 0.22);

  /* ── Lattice atmosphere palette (L3) ───────────────────── */
  /* The cube/edge color the Lattice component draws with (opacity is
   * applied per element). In light mode this becomes dark slate-teal
   * so wireframes read against the canvas instead of glowing on it. */
  --lattice-stroke:         rgba(134, 238, 245, 1);
  --lattice-heat-halo:      rgba(229, 79, 32, 0.28);
  --lattice-heat-core:      rgba(229, 79, 32, 0.85);
  --lattice-cube-edge:      rgba(134, 238, 245, 0.22);
  --lattice-cube-edge-warm: rgba(134, 238, 245, 0.45);
  --lattice-cube-edge-back: rgba(134, 238, 245, 0.10);
  --lattice-cube-core:      rgba(180, 220, 230, 0.40);
  --lattice-cube-core-heat: rgba(229, 79, 32, 0.95);
  --lattice-cube-glow-heat: rgba(229, 79, 32, 0.55);
  --lattice-edge-idle:      rgba(134, 238, 245, 0.12);
  --lattice-edge-warm:      rgba(134, 238, 245, 0.30);
  --lattice-edge-active:    rgba(134, 238, 245, 0.65);
  --lattice-pulse:          rgba(180, 245, 249, 1.0);

  /* ── State ─────────────────────────────────────────────── */
  --state-ok:    #6FCF7B;
  --state-warn:  #FFB547;
  --state-alert: #E54F20;
  --state-quiet: #4A5C66;
  /* Live & emitting but with no grading band (RPI ranges == null) — a reported
     number, not a threshold pass. A darker, desaturated green so "nominal"
     never masquerades as a real green pass. */
  --state-nominal: #3E7C57;
  /* Declared baseline — a dev-status RPI red before any live source exists.
     Deliberately a darker, dimmer red than --state-alert so "declared red"
     reads as distinct from a live breach on the Dev status board. */
  --state-declared: #8A2417;

  /* ── Geometry — blocky ─────────────────────────────────── */
  --radius-block: 2px;
  --radius-card:  6px;
  --radius-pill:  999px;

  /* ── Spacing scale (4-step) ────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── Elevation — subtle, mostly hairlines ──────────────── */
  --shadow-soft:    0 1px 0 0 var(--bg-hairline) inset;
  --shadow-card:    0 0 0 1px var(--bg-hairline), 0 8px 24px -12px rgba(0,0,0,0.6);
  --shadow-floating:0 0 0 1px var(--bg-hairline), 0 12px 40px -8px rgba(0,0,0,0.75);
  --glow-spark:     0 0 8px var(--lattice-pulse);
  --glow-heat:      0 0 24px -4px rgba(229,79,32,0.5);

  /* Color scheme hint (form controls, scrollbars) */
  color-scheme: dark;

  /* ── Type families ─────────────────────────────────────── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type scale (clamps for responsive) ────────────────── */
  --fs-display:   clamp(44px, 7vw, 96px);     /* hero h1 */
  --fs-h1:        clamp(36px, 4.8vw, 64px);
  --fs-h2:        clamp(32px, 4.2vw, 56px);   /* section h2 */
  --fs-h3:        clamp(22px, 2.4vw, 28px);
  --fs-h4:        18px;
  --fs-body-lg:   clamp(16px, 1.4vw, 20px);
  --fs-body:      15px;
  --fs-small:     13.5px;
  --fs-micro:     11px;                       /* eyebrows, captions */

  /* ── Tracking ──────────────────────────────────────────── */
  --tracking-tight:  -0.025em;   /* display */
  --tracking-snug:   -0.02em;    /* h2/h3 */
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-eyebrow:0.22em;     /* eyebrows */
  --tracking-caps:   0.18em;     /* small caps labels */

  /* ── Motion grammar — three states only ────────────────── */
  --dur-event: 220ms;            /* foreground state change */
  --dur-fade:  320ms;            /* general fade */
  --dur-pulse: 3.2s;             /* lattice travelling pulse */
  --dur-rest:  4.8s;             /* lattice ambient breath period */
  --ease-glide:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap:   cubic-bezier(0.5, 0, 0.2, 1);
  --ease-linear: linear;
}

/* The light block — `[data-theme="light"]` in tokens.css, body unchanged —
 * applies whenever the OS is not in dark mode. Left unindented so a diff
 * against tokens.css shows only the selector line. */
@media not all and (prefers-color-scheme: dark) {
:root {
  /* Surfaces — cool blue-cast off-white */
  --bg-deep:      #F2F6F7;
  --bg-raised:    #FFFFFF;
  --bg-elevated:  #FFFFFF;
  --bg-glass:     rgba(255, 255, 255, 0.58);
  --bg-hairline:  rgba(10, 50, 65, 0.08);
  --bg-hairline-strong: rgba(10, 50, 65, 0.18);

  /* Text — cool near-black, descending */
  --text-primary:   #0F1A1F;
  --text-secondary: #43525A;
  --text-muted:     #768890;
  --text-faint:     #B0BFC4;
  --text-inverse:   #F5FAFB;

  /* Brand — same hues, darker variants */
  --accent-heat:      #D9461A;
  --accent-heat-hot:  #BC3A12;
  --accent-spark:     #117785;
  --accent-spark-hot: #0E5C66;
  /* signal + discharge unchanged — data-viz only, read fine on light */

  /* Semantic translucent surfaces flip to whites */
  --surface-header:  rgba(255, 255, 255, 0.72);
  --surface-footer:  rgba(255, 255, 255, 0.80);
  --surface-ghost:   rgba(255, 255, 255, 0.65);
  --surface-input:   rgba(255, 255, 255, 0.85);

  /* Heat vignettes — toned down (white amplifies orange) */
  --vignette-heat-soft:   rgba(217, 70, 26, 0.07);
  --vignette-heat-strong: rgba(217, 70, 26, 0.10);

  /* Tints — re-keyed to the new spark hue + lighter canvas */
  --spark-tint-bg:          rgba(17, 119, 133, 0.07);
  --spark-tint-bg-2:        rgba(17, 119, 133, 0.04);
  --spark-tint-edge:        rgba(17, 119, 133, 0.26);
  --spark-tint-edge-strong: rgba(17, 119, 133, 0.38);
  --heat-tint-bg:           rgba(217, 70, 26, 0.08);
  --heat-tint-edge:         rgba(217, 70, 26, 0.30);

  /* Lattice — dark wireframes, no glow */
  --lattice-stroke:         rgba(10, 90, 110, 1);
  --lattice-heat-halo:      rgba(217, 70, 26, 0.22);
  --lattice-heat-core:      rgba(217, 70, 26, 0.85);
  --lattice-cube-edge:      rgba(10, 90, 110, 0.30);
  --lattice-cube-edge-warm: rgba(10, 90, 110, 0.50);
  --lattice-cube-edge-back: rgba(10, 90, 110, 0.15);
  --lattice-cube-core:      rgba(15, 26, 31, 0.40);
  --lattice-edge-idle:      rgba(10, 90, 110, 0.18);
  --lattice-edge-warm:      rgba(10, 90, 110, 0.32);
  --lattice-edge-active:    rgba(10, 90, 110, 0.55);
  --lattice-pulse:          #0E8D9C;

  /* Shadows soften; spark-glow stripped entirely on light */
  --shadow-card:    0 0 0 1px var(--bg-hairline), 0 12px 24px -16px rgba(10, 40, 55, 0.20);
  --shadow-floating:0 0 0 1px var(--bg-hairline), 0 16px 40px -12px rgba(10, 40, 55, 0.25);
  --glow-spark:     none;
  --glow-heat:      0 0 18px -8px rgba(217, 70, 26, 0.40);

  color-scheme: light;
}
}

/* ══ The keycloak.v2 hooks and the PatternFly 5 globals, onto the tokens ═══ */
/* :root beats PatternFly's own :root (loaded earlier) and its dark-mode
 * `:where(.pf-v5-theme-dark)` (zero specificity), so one mapping serves both
 * palettes. The tokens switch underneath it. */
:root {
  --keycloak-bg-logo-url: url('../img/lattice-dark.svg');
  --keycloak-card-top-color: transparent;

  --pf-v5-global--FontFamily--text: var(--font-sans);
  --pf-v5-global--FontFamily--heading: var(--font-sans);
  --pf-v5-global--FontFamily--monospace: var(--font-mono);
  --pf-v5-global--FontFamily--text--vf: var(--font-sans);
  --pf-v5-global--FontFamily--heading--vf: var(--font-sans);
  --pf-v5-global--FontFamily--monospace--vf: var(--font-mono);

  --pf-v5-global--Color--100: var(--text-primary);
  --pf-v5-global--Color--200: var(--text-secondary);
  --pf-v5-global--Color--light-100: var(--text-primary);
  --pf-v5-global--BackgroundColor--100: var(--bg-raised);
  --pf-v5-global--BackgroundColor--200: var(--surface-ghost);
  --pf-v5-global--BackgroundColor--light-100: var(--bg-raised);
  --pf-v5-global--BorderColor--100: var(--bg-hairline-strong);
  --pf-v5-global--BorderColor--200: var(--bg-hairline-strong);
  --pf-v5-global--BorderColor--300: var(--bg-hairline);
  --pf-v5-global--primary-color--100: var(--accent-spark);
  --pf-v5-global--primary-color--200: var(--accent-spark-hot);
  --pf-v5-global--link--Color: var(--accent-spark);
  --pf-v5-global--link--Color--hover: var(--accent-spark-hot);
  --pf-v5-global--link--Color--light: var(--accent-spark);
  --pf-v5-global--link--Color--light--hover: var(--accent-spark-hot);
  --pf-v5-global--link--Color--dark: var(--accent-spark);
  --pf-v5-global--link--Color--dark--hover: var(--accent-spark-hot);
  --pf-v5-global--link--Color--visited: var(--accent-spark);
  --pf-v5-global--danger-color--100: var(--accent-heat);
  --pf-v5-global--danger-color--200: var(--accent-heat-hot);
  --pf-v5-global--warning-color--100: var(--state-warn);
  --pf-v5-global--success-color--100: var(--state-ok);
  --pf-v5-global--info-color--100: var(--accent-spark);
  --pf-v5-global--BoxShadow--xl: var(--shadow-card);
}
@media not all and (prefers-color-scheme: dark) {
  :root {
    --keycloak-bg-logo-url: url('../img/lattice-light.svg');
  }
}

/* ══ Page ══════════════════════════════════════════════════════════════════ */
html.login-pf {
  background-color: var(--bg-deep);
}
.login-pf body {
  /* keycloak.v2 sets the image with the `background` shorthand; the colour
   * underneath is the html element's. */
  background: var(--keycloak-bg-logo-url) no-repeat center center fixed;
  background-size: cover;
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ══ Header — the mark, then the EMULATE eyebrow (.em-eyebrow) ════════════ */
.login-pf #kc-header-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-spark) !important; /* keycloak.v2 pins light-100 with !important */
}
.login-pf #kc-header-wrapper::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  background: url('../img/emulate-mark.png') center / contain no-repeat;
}
/* messages_en.properties drops the realm's displayNameHtml <img>; this covers
 * a locale that still renders it. */
.login-pf #kc-header-wrapper img {
  display: none;
}

/* ══ Card ══════════════════════════════════════════════════════════════════ */
.login-pf .pf-v5-c-login__main {
  background-color: var(--bg-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--bg-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.login-pf .pf-v5-c-login__main-header {
  border-top: 0;
}
.login-pf #kc-page-title {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

/* ══ Text ══════════════════════════════════════════════════════════════════ */
.login-pf .pf-v5-c-login__main-body,
.login-pf .pf-v5-c-login__main-footer,
.login-pf .pf-v5-c-list,
.login-pf #kc-info-wrapper {
  color: var(--text-secondary);
}
.login-pf .pf-v5-c-form__label-text {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
}
.login-pf .pf-v5-c-form__label-required {
  color: var(--accent-heat);
}
.login-pf .pf-v5-u-color-200 {
  color: var(--text-muted) !important;
}
.login-pf a:not(.pf-v5-c-button) {
  color: var(--accent-spark);
  text-underline-offset: 2px;
}
.login-pf a:not(.pf-v5-c-button):hover {
  color: var(--accent-spark-hot);
}
.login-pf .pf-v5-c-login__main-footer-band {
  border-block-start: 1px solid var(--bg-hairline);
}

/* ══ Inputs — the portal's field (NewCustomerDialog.tsx) ═══════════════════ */
/* PatternFly draws a field's border with ::before and its underline with
 * ::after; both go, and the wrapper carries one hairline box instead. */
.login-pf .pf-v5-c-form-control {
  --pf-v5-c-form-control--Color: var(--text-primary);
  --pf-v5-c-form-control--PaddingTop: 10px;
  --pf-v5-c-form-control--PaddingBottom: 10px;
  --pf-v5-c-form-control--PaddingLeft: 12px;
  --pf-v5-c-form-control--PaddingRight: 12px;
  background-color: var(--surface-input);
  border: 1px solid var(--bg-hairline-strong);
  border-radius: var(--radius-block);
  transition: border-color var(--dur-event) var(--ease-glide), box-shadow var(--dur-event) var(--ease-glide);
}
.login-pf .pf-v5-c-form-control::before,
.login-pf .pf-v5-c-form-control::after {
  border: 0 !important;
}
.login-pf .pf-v5-c-form-control:hover {
  border-color: var(--spark-tint-edge-strong);
}
.login-pf .pf-v5-c-form-control:focus-within {
  border-color: var(--accent-spark);
  box-shadow: 0 0 0 3px var(--spark-tint-edge);
}
.login-pf .pf-v5-c-form-control > :is(input, select, textarea):focus {
  outline: none;
}
.login-pf .pf-v5-c-form-control > :is(input, select, textarea)::placeholder {
  color: var(--text-muted);
}
.login-pf .pf-v5-c-form-control.pf-m-error {
  border-color: var(--accent-heat);
}
.login-pf .pf-v5-c-form-control.pf-m-readonly {
  background-color: var(--surface-ghost);
}
.login-pf .pf-v5-c-form-control.pf-m-readonly:focus-within {
  border-color: var(--bg-hairline-strong);
  box-shadow: none;
}
/* The input-group neighbour: the show-password eye and the restart-login icon. */
.login-pf .pf-v5-c-button.pf-m-control {
  background-color: var(--surface-input);
  color: var(--text-secondary);
  border: 1px solid var(--bg-hairline-strong);
  border-radius: var(--radius-block);
  margin-inline-start: -1px;
}
.login-pf .pf-v5-c-button.pf-m-control::after {
  border: 0;
}
.login-pf .pf-v5-c-button.pf-m-control:hover {
  color: var(--text-primary);
}
.login-pf .pf-v5-c-helper-text__item-text.pf-m-error,
.login-pf .kc-feedback-text.pf-m-error,
.login-pf .pf-v5-c-form-control__icon.pf-m-status {
  color: var(--accent-heat);
}
.login-pf .pf-v5-c-check__input {
  accent-color: var(--accent-spark);
}
.login-pf .pf-v5-c-check__label {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* ══ Buttons ═══════════════════════════════════════════════════════════════ */
.login-pf .pf-v5-c-button {
  border-radius: var(--radius-block);
  font-family: var(--font-sans);
  transition: background-color var(--dur-event) var(--ease-glide), border-color var(--dur-event) var(--ease-glide), color var(--dur-event) var(--ease-glide);
}
.login-pf .pf-v5-c-button::after {
  border-radius: var(--radius-block);
}
.login-pf .pf-v5-c-button:focus-visible {
  outline: 2px solid var(--accent-spark);
  outline-offset: 2px;
}
/* Primary — the one heat moment on the page. */
.login-pf .pf-v5-c-button.pf-m-primary {
  background-color: var(--accent-heat);
  color: var(--text-inverse);
  font-weight: 500;
  padding-block: 12px;
}
.login-pf .pf-v5-c-button.pf-m-primary:is(:hover, :focus, :active) {
  background-color: var(--accent-heat-hot);
  color: var(--text-inverse);
}
/* Secondary and the social providers — the portal's ghost button. */
.login-pf .pf-v5-c-button.pf-m-secondary {
  background-color: var(--surface-ghost);
  color: var(--text-secondary);
  font-weight: 500;
}
.login-pf .pf-v5-c-button.pf-m-secondary::after {
  border: 1px solid var(--bg-hairline-strong);
}
.login-pf .pf-v5-c-button.pf-m-secondary:is(:hover, :focus) {
  color: var(--text-primary);
}
.login-pf .pf-v5-c-button.pf-m-secondary:is(:hover, :focus)::after {
  border-color: var(--spark-tint-edge-strong);
}
.login-pf .pf-v5-c-button.pf-m-link {
  color: var(--accent-spark);
}
.login-pf .pf-v5-c-button.pf-m-link:hover {
  color: var(--accent-spark-hot);
}
/* keycloak.v2 tints every non-Google provider icon PatternFly blue with a
 * filter; ours stay in the text colour. Google keeps its own four colours. */
.login-pf #kc-social-providers svg:not(.google) {
  filter: none;
  fill: currentColor;
}

/* ══ Alerts ════════════════════════════════════════════════════════════════ */
.login-pf .pf-v5-c-alert {
  --pf-v5-c-alert--BorderTopWidth: 0;
  --pf-v5-c-alert--BoxShadow: none;
  --pf-v5-c-alert--BackgroundColor: var(--spark-tint-bg);
  --pf-v5-c-alert--m-inline--BackgroundColor: var(--spark-tint-bg);
  --pf-v5-c-alert--m-inline--BoxShadow: none;
  border: 1px solid var(--spark-tint-edge);
  border-radius: var(--radius-block);
}
.login-pf .pf-v5-c-alert::before {
  border: 0;
}
.login-pf .pf-v5-c-alert .pf-v5-c-alert__title {
  color: var(--text-primary);
  font-weight: 500;
}
.login-pf .pf-v5-c-alert .pf-v5-c-alert__icon {
  color: var(--accent-spark);
}
.login-pf .pf-v5-c-alert.pf-m-danger {
  --pf-v5-c-alert--BackgroundColor: var(--heat-tint-bg);
  --pf-v5-c-alert--m-inline--BackgroundColor: var(--heat-tint-bg);
  border-color: var(--heat-tint-edge);
}
.login-pf .pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon {
  color: var(--accent-heat);
}
.login-pf .pf-v5-c-alert.pf-m-warning {
  --pf-v5-c-alert--BackgroundColor: color-mix(in srgb, var(--state-warn) 10%, transparent);
  --pf-v5-c-alert--m-inline--BackgroundColor: color-mix(in srgb, var(--state-warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--state-warn) 35%, transparent);
}
.login-pf .pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon {
  color: var(--state-warn);
}
.login-pf .pf-v5-c-alert.pf-m-success {
  --pf-v5-c-alert--BackgroundColor: color-mix(in srgb, var(--state-ok) 10%, transparent);
  --pf-v5-c-alert--m-inline--BackgroundColor: color-mix(in srgb, var(--state-ok) 10%, transparent);
  border-color: color-mix(in srgb, var(--state-ok) 35%, transparent);
}
.login-pf .pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon {
  color: var(--state-ok);
}

/* keycloak.v2 gives the message alert a bottom margin only, so on the
 * password and OTP steps it sits flush under the attempted-username field. */
.login-pf .pf-v5-c-login__main-body > .pf-v5-c-form + .pf-v5-c-alert {
  margin-block-start: var(--space-4);
}
/* Logout confirm: the question and its button share no spacing upstream. */
.login-pf #kc-logout-confirm .instruction {
  margin-block-end: var(--space-4);
}

/* ══ OTP setup (login-config-totp) — EMU-754 was this page, dark-on-dark ═══ */
.login-pf #kc-totp-settings,
.login-pf #kc-totp-supported-apps {
  color: var(--text-primary);
}
.login-pf #kc-totp-secret-key {
  font-family: var(--font-mono);
  color: var(--text-primary);
  word-break: break-all;
}
/* A QR code scans dark-on-light, so it keeps a white quiet zone in both
 * palettes. */
.login-pf #kc-totp-secret-qr-code {
  background: #fff;
  padding: 8px;
  border-radius: var(--radius-block);
}
.login-pf #kc-recovery-codes-list,
.login-pf code,
.login-pf pre {
  font-family: var(--font-mono);
}

/* ══ Narrow screens ════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  .login-pf .pf-v5-c-login__container {
    padding-inline: var(--space-4);
  }
}

/* ══ Reduced motion ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .login-pf *,
  .login-pf *::before,
  .login-pf *::after {
    animation: none !important;
    transition: none !important;
  }
}