/* TEMS login theme — matches the mobile-app sign-in direction: a navy gradient
   canvas (+ subtle dot texture), a FLAT form (no card frame), a green CTA, and
   an on-dark neon accent for links/focus. Open Sans throughout. The login
   surface is dark-only by design; the email theme keeps its own light/dark
   handling. Restyle-only over parent=keycloak.v2 (template.ftl adds the brand
   header / tagline / legal footer markup this CSS targets). */

:root {
  --tems-lime: #97c73c;            /* CTA fill (green) — navy text on it */
  --tems-lime-hover: #8bbb33;      /* CTA hover */
  --tems-lime-pressed: #2e9248;    /* CTA pressed — secondary-deep */
  --tems-navy: #062b42;            /* Operations Navy — canvas top / CTA text */
  --tems-navy-deep: #031827;       /* canvas bottom / deeper surface */
  --tems-accent: #a5fa29;          /* on-dark neon accent: links */
  --tems-accent-hover: #b6ff4d;    /* link hover */
  --tems-card: #102b44;            /* legacy card token (form is flat now) */
  --tems-line: rgba(238, 242, 246, 0.1);   /* hairlines / dividers */
  --tems-ctrl-border: rgba(255, 255, 255, 0.2);
  --tems-ctrl-bg: rgba(255, 255, 255, 0.05);
  --tems-fg: #ffffff;
  --tems-fg-soft: #eef2f6;         /* labels */
  --tems-fg-muted: rgba(255, 255, 255, 0.85);  /* checkbox label */
  --tems-fg-dim: rgba(255, 255, 255, 0.6);     /* tagline, footer prose */
  --tems-fg-faint: rgba(255, 255, 255, 0.4);   /* placeholder, copyright */
  --tems-radius-card: 8px;
  --tems-radius-ctrl: 0.75rem;     /* fields + button = 12px */
  --tems-focus-ring: 0 0 0 3px rgba(151, 199, 60, 0.22);
  --font-open-sans: 'Open Sans', Arial, sans-serif;
}

/* Open Sans for the entire login theme (overrides RedHatDisplay / PatternFly) */
body,
#keycloak-bg,
#keycloak-bg *,
.pf-v5-c-login,
.pf-v5-c-login *,
input,
select,
label,
a,
button,
span,
div,
h1,
h2,
h3,
h4,
h5,
h6,
.kc-login-tooltip,
.kc-feedback-text {
  font-family: var(--font-open-sans) !important;
}

/* Restore icon fonts – Open Sans must not apply to Font Awesome / feedback icons */
.pf-v5-c-login i.fas,
.pf-v5-c-login i.far,
.pf-v5-c-login i.fab,
.pf-v5-c-login i[class*="fa-"],
.pf-v5-c-login .pf-v5-c-alert__icon span,
.pf-v5-c-login .pf-v5-c-alert__icon [class*="feedback"],
#keycloak-bg i.fas,
#keycloak-bg i.far,
#keycloak-bg i.fab,
#keycloak-bg i[class*="fa-"],
#keycloak-bg .pf-v5-c-alert__icon span,
#keycloak-bg .pf-v5-c-alert__icon [class*="feedback"] {
  font-family: "Font Awesome 5 Free" !important;
}

.pf-v5-c-login i.fas,
.pf-v5-c-login i.fab,
#keycloak-bg i.fas,
#keycloak-bg i.fab {
  font-weight: 900 !important;
}

.pf-v5-c-login i.far,
#keycloak-bg i.far {
  font-weight: 400 !important;
}

.pf-v5-c-login i.fab,
#keycloak-bg i.fab {
  font-family: "Font Awesome 5 Brands" !important;
}

/* ──────────────────────────────────────────────────────────
   Page — navy gradient canvas (+ subtle dot texture), centered
   ────────────────────────────────────────────────────────── */
body,
#keycloak-bg {
  background: linear-gradient(
      158deg,
      var(--tems-navy) 0%,
      var(--tems-navy-deep) 100%
    ) !important;
  min-height: 100vh;
}

/* Subtle diamond/dot texture on the canvas (comment out if unwanted) */
#keycloak-bg {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 1.4px, transparent 1.5px),
    linear-gradient(158deg, var(--tems-navy) 0%, var(--tems-navy-deep) 100%) !important;
  background-size: 26px 26px, cover !important;
}

.pf-v5-c-login {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  width: 100% !important;
  background: transparent !important;
}

.pf-v5-c-login__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 28rem !important;
  padding: 3rem 1.5rem !important;
  box-sizing: border-box;
}

/* The PatternFly "main" panel is just a transparent column now — the visual
   card is .pf-v5-c-login__main-body alone (brand header and legal footer sit
   outside it, per the design). */
.pf-v5-c-login__main {
  width: 100% !important;
  max-width: 25rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ──────────────────────────────────────────────────────────
   Brand header (above the card): logo, title, tagline, language
   ────────────────────────────────────────────────────────── */
.kc-header-inside-card {
  padding: 0 !important;
  text-align: center;
}

.kc-logo-text,
#kc-header-wrapper.kc-logo-text {
  display: block !important;
  width: 100%;
  text-align: center;
  margin: 0;
}

#kc-header-wrapper.kc-logo-text img {
  height: 3rem; /* 48px per design */
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Dark-only surface: always the white logo */
#kc-header-wrapper.kc-logo-text .kc-logo-light {
  display: none !important;
}

#kc-header-wrapper.kc-logo-text .kc-logo-dark {
  display: block !important;
}

#kc-page-title,
.pf-v5-c-login__main-header h1,
.pf-v5-c-login__main-header-title {
  font-size: 1.5rem !important;    /* 24px — prominent white heading */
  font-weight: 600 !important;
  color: var(--tems-fg) !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.tems-tagline {
  margin: 0 !important;
  font-size: 0.875rem !important;  /* 14px */
  font-weight: 400 !important;
  color: var(--tems-fg-dim) !important;
  text-align: center !important;
}

/* Header block: logo 20px above title, 6px to tagline, selector below.
   (Flex column also prevents PatternFly's two-column header grid from
   crushing the title next to the language selector.) */
.pf-v5-c-login__main-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 1.25rem 0 2rem !important;
  text-align: center !important;
}

/* Language selector — compact control per design (32px, muted). Renders on
   the options row of the login/reset pages, or at the bottom of the card on
   every other page. */
/* Mirrors the design-system SelectTrigger: 40px, 6px radius, subtle border,
   14px text, muted lucide chevron. */
.pf-v5-c-form-control.tems-locale-select {
  width: auto !important;
  min-height: 2.5rem !important; /* 40px, h-10 */
  border: 1px solid var(--tems-ctrl-border) !important;
  border-radius: var(--tems-radius-ctrl) !important;
  background: var(--tems-ctrl-bg) !important;
  padding: 0 !important;
  overflow: hidden;
}

.pf-v5-c-form-control.tems-locale-select {
  position: relative;
}

.tems-locale-select .pf-v5-c-form-control__utilities {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none; /* clicks fall through to the select */
}

.tems-locale-select .pf-v5-c-form-control__toggle-icon {
  color: var(--tems-fg-muted) !important;
  opacity: 0.6;
  font-size: 1rem; /* 16px chevron */
  padding: 0 !important;
}

/* One global spot on every page: centered below the legal footer */
.tems-locale-footer {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

#login-select-toggle {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  width: auto !important;
  /* a native select sizes to its widest option (32 locales) — cap it */
  max-width: 10rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-height: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 2rem 0 0.75rem !important; /* px-3 + room for the chevron */
  font-size: 0.875rem !important; /* 14px, text-sm */
  color: var(--tems-fg-soft) !important;
  cursor: pointer;
}

#login-select-toggle:focus {
  outline: none !important;
  box-shadow: var(--tems-focus-ring) !important;
}

/* Native dropdown list readability (options render on light UA chrome) */
#login-select-toggle option {
  color: #0a1f34;
  background: #ffffff;
}

/* ──────────────────────────────────────────────────────────
   The card
   ────────────────────────────────────────────────────────── */
/* FLAT form — no card frame. The form sits directly on the navy canvas
   ("less frames"); the brand header and legal footer already live outside it. */
.pf-v5-c-login__main > .pf-v5-c-login__main-body {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

ul.pf-v5-c-login__main-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Collapse PatternFly form gap; groups space themselves */
.pf-v5-c-login__main-body .pf-v5-c-form {
  gap: 0 !important;
  row-gap: 0 !important;
}

.pf-v5-c-form__group {
  margin-bottom: 1.25rem !important; /* 20px card rhythm */
}

.pf-v5-c-form__group:last-child {
  margin-bottom: 0 !important;
}

/* Labels — 14px / 600 / soft white */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--tems-fg-soft) !important;
}

/* ──────────────────────────────────────────────────────────
   Inputs — 44px, translucent navy, subtle border
   ────────────────────────────────────────────────────────── */
.pf-v5-c-form-control {
  border-radius: var(--tems-radius-ctrl) !important;
  border: 1.5px solid var(--tems-ctrl-border) !important;
  background: var(--tems-ctrl-bg) !important;
  box-shadow: none !important;
  min-height: 3.25rem !important; /* 52px */
  padding: 0 !important;
  overflow: hidden;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none !important;
  border: none !important;
}

.pf-v5-c-form-control input {
  border: none !important;
  box-shadow: none !important;
  /* background-color only — the shorthand would wipe the #username
     envelope background-image */
  background-color: transparent !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important; /* 16px (also avoids iOS focus-zoom) */
  min-height: 3.25rem !important;
  color: var(--tems-fg) !important;
}

.pf-v5-c-form-control input::placeholder {
  color: var(--tems-fg-faint) !important;
}

/* Email icon inside the username/email input */
#username {
  padding-left: 2.375rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6c80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.875rem center;
  background-size: 1rem 1rem;
}

/* Input group (e.g. password with show/hide button): the group carries the
   control look; inner pieces are transparent */
.pf-v5-c-input-group {
  border: 1px solid var(--tems-ctrl-border) !important;
  border-radius: var(--tems-radius-ctrl) !important;
  background: var(--tems-ctrl-bg) !important;
  overflow: hidden;
}

.pf-v5-c-login__main-body .pf-v5-c-input-group .pf-v5-c-form-control {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.pf-v5-c-login__main-body .pf-v5-c-input-group .pf-v5-c-button {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tems-fg-dim) !important;
}

/* ── Focus: green border + soft green ring per design ────── */
.pf-v5-c-form-control:not(.pf-v5-c-input-group .pf-v5-c-form-control):focus-within {
  border-color: var(--tems-lime) !important;
  box-shadow: var(--tems-focus-ring) !important;
  outline: none !important;
}

.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
  box-shadow: none !important;
}

.pf-v5-c-input-group:focus-within {
  border-color: var(--tems-lime) !important;
  box-shadow: var(--tems-focus-ring) !important;
  outline: none !important;
}

.pf-v5-c-form-control:focus-within *,
.pf-v5-c-form-control *:focus,
.pf-v5-c-input-group *:focus {
  outline: none !important;
}

button:focus-visible,
a:focus-visible {
  outline: none !important;
  box-shadow: var(--tems-focus-ring) !important;
}

/* ──────────────────────────────────────────────────────────
   Remember me / checkbox
   ────────────────────────────────────────────────────────── */
.pf-v5-c-check {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Checkbox mirrors the frontend shadcn Checkbox in dark mode: 16px, 4px
   radius, lime border, transparent fill; checked = lime fill + navy check. */
.pf-v5-c-check input[type="checkbox"],
.pf-v5-c-check__input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 1px solid var(--tems-lime) !important;
  border-radius: 4px !important;
  background: transparent !important;
  cursor: pointer;
}

.pf-v5-c-check input[type="checkbox"]:checked,
.pf-v5-c-check__input:checked {
  background-color: var(--tems-lime) !important;
  /* lucide Check, navy stroke (#0a1f34) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1f34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 0.75rem !important;
}

.pf-v5-c-check input[type="checkbox"]:focus-visible,
.pf-v5-c-check__input:focus-visible {
  outline: none !important;
  box-shadow: var(--tems-focus-ring) !important;
}

.pf-v5-c-check__label {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--tems-fg-muted) !important;
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────────
   Primary CTA — lime, 46px, hover green
   ────────────────────────────────────────────────────────── */
.pf-v5-c-button.pf-m-primary {
  background-color: var(--tems-lime) !important;
  border: none !important;
  border-radius: var(--tems-radius-ctrl) !important;
  width: 100% !important;
  min-height: 3.25rem !important; /* 52px */
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--tems-navy) !important;
  margin-top: 0.5rem !important;
  /* Center the label vertically — needed for anchor-based buttons (e.g. the
     error-page Sign In), which unlike <button> don't center their content. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background 120ms cubic-bezier(0.4, 0, 0.2, 1), color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover keeps the lime at 90% with navy text; pressed goes secondary-deep —
   mirrors the frontend Button `accent` variant (hover:bg-secondary/90,
   active:bg-secondary-deep). */
.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--tems-lime-hover) !important;
}

.pf-v5-c-button.pf-m-primary:active {
  background-color: var(--tems-lime-pressed) !important;
}

/* Secondary / link buttons (e.g. "try another way", cancel) */
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  border-radius: var(--tems-radius-ctrl) !important;
  font-size: 0.875rem !important;
  color: var(--tems-fg-soft) !important;
}

.pf-v5-c-button.pf-m-secondary {
  border: 1px solid var(--tems-ctrl-border) !important;
  background: transparent !important;
}

/* PatternFly draws button borders on an ::after pseudo-element — kill it so
   only our border shows (it rendered as a blue outline on social buttons). */
.pf-v5-c-login .pf-v5-c-button::after {
  display: none !important;
  border: none !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background: rgba(238, 242, 246, 0.06) !important;
}

/* ──────────────────────────────────────────────────────────
   Links inside the card (forgot password, register, …)
   ────────────────────────────────────────────────────────── */
/* Links are lime in dark mode with underline-on-hover — mirrors the frontend
   Button `link` variant (dark:text-secondary, underline-offset-4).
   Anchor-styled buttons (.pf-v5-c-button, e.g. the error-page Sign In CTA and
   "try another way") are excluded — they carry their own button styling and
   the lime hover would render lime-on-lime. */
.pf-v5-c-login__main-body a:not(.pf-v5-c-button),
.pf-v5-c-form__label a:not(.pf-v5-c-button) {
  color: var(--tems-accent) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  text-decoration: none;
  text-underline-offset: 4px;
}

.pf-v5-c-login__main-body a:not(.pf-v5-c-button):hover,
.pf-v5-c-form__label a:not(.pf-v5-c-button):hover {
  color: var(--tems-accent-hover) !important;
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────
   Social sign-in — divider band + outlined provider buttons
   ────────────────────────────────────────────────────────── */
/* The social section renders inside the card body; give it the divider
   treatment: hairline — OR — hairline */
.pf-v5-c-login__main-body .pf-v5-c-login__main-footer {
  padding: 0 !important;
  margin-top: 1.25rem !important;
  border: none !important;
}

.pf-v5-c-login__main-footer hr,
.pf-v5-c-login__main-footer-band hr {
  display: none !important;
}

.pf-v5-c-login__main-footer-band {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: transparent !important;
  padding: 0 0 1.25rem !important;
  margin: 0 !important;
  border: none !important;
}

.pf-v5-c-login__main-footer-band::before,
.pf-v5-c-login__main-footer-band::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tems-line);
}

.pf-v5-c-login__main-footer-band-item {
  font-size: 0.6875rem !important; /* 11px */
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--tems-fg-faint) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#kc-social-providers ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#kc-social-providers a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  min-height: 2.875rem !important; /* 46px */
  border: 1px solid var(--tems-ctrl-border) !important;
  border-radius: var(--tems-radius-ctrl) !important;
  background: transparent !important;
  color: var(--tems-fg-soft) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

#kc-social-providers a:hover {
  background: rgba(238, 242, 246, 0.06) !important;
  color: var(--tems-fg-soft) !important;
}

#kc-social-providers svg,
#kc-social-providers a svg,
#kc-social-providers img,
#kc-social-providers a img {
  max-height: 1.125rem !important;
  max-width: 1.125rem !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* Registration / info band inside the card */
#kc-info,
#kc-registration {
  color: var(--tems-fg-muted) !important;
  font-size: 0.875rem !important;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────
   Alerts / error messages — dark-surface variants
   ────────────────────────────────────────────────────────── */
.pf-v5-c-alert {
  border-radius: var(--tems-radius-ctrl) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1.25rem !important;
  border: 1px solid var(--tems-line) !important;
  box-shadow: none !important;
}

.pf-v5-c-alert.pf-m-danger {
  background: rgba(225, 72, 72, 0.14) !important;
}

.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-danger .kc-feedback-text {
  color: #f7b1b1 !important;
}

.pf-v5-c-alert.pf-m-warning {
  background: rgba(245, 162, 1, 0.14) !important;
}

.pf-v5-c-alert.pf-m-warning,
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-warning .kc-feedback-text {
  color: #f4cd87 !important;
}

.pf-v5-c-alert.pf-m-success {
  background: rgba(151, 199, 60, 0.14) !important;
}

.pf-v5-c-alert.pf-m-success,
.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-success .kc-feedback-text {
  color: #c4e08b !important;
}

.pf-v5-c-alert.pf-m-info {
  background: rgba(0, 83, 122, 0.3) !important;
}

.pf-v5-c-alert.pf-m-info,
.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-info .kc-feedback-text {
  color: #a8d4e8 !important;
}

/* Info pages ("Account updated", "Perform the following action(s)") render
   plain instruction text inside the card — keycloak.v2 leaves it near-black,
   which is unreadable on the dark card. */
#kc-info-message,
#kc-info-message p,
.pf-v5-c-login__main-body .instruction {
  color: var(--tems-fg-muted) !important;
  font-size: 0.9375rem;
}

/* Inline field errors */
.pf-v5-c-helper-text__item-text,
#input-error,
.kc-feedback-text {
  color: #f7b1b1;
  font-size: 0.8125rem;
}

/* ──────────────────────────────────────────────────────────
   Self-service signup prompt — inside the card, below the form
   ────────────────────────────────────────────────────────── */
.tems-register-prompt {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--tems-fg-dim);
}

.tems-register-prompt a {
  color: var(--tems-accent) !important;
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 4px;
}

.tems-register-prompt a:hover {
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────
   Legal footer — outside the card
   ────────────────────────────────────────────────────────── */
.pf-v5-c-login__main > .pf-v5-c-login__main-footer {
  padding: 2rem 0 0 !important;
  background: transparent !important;
}

.tems-footer {
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column-reverse; /* links row above copyright, per design */
  gap: 0.5rem;
  color: var(--tems-fg-dim); /* base: keep prose readable on the navy canvas */
}

.tems-footer p {
  margin: 0;
}

.tems-footer p:first-child {
  font-size: 0.75rem; /* copyright 12px */
  color: var(--tems-fg-faint);
}

.tems-footer p:last-child {
  font-size: 0.8125rem; /* links 13px */
}

.tems-footer a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tems-footer a:hover {
  color: var(--tems-accent) !important;
}

.tems-footer-sep {
  margin: 0 0.375rem;
  color: var(--tems-fg-faint);
}

/* ──────────────────────────────────────────────────────────
   Mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pf-v5-c-login__container {
    padding: 1.25rem !important;
  }

  #kc-page-title,
  .pf-v5-c-login__main-header h1 {
    font-size: 1.375rem !important;
  }
}

/* ──────────────────────────────────────────────────────────
   Invited-user registration: email is locked to the invitation
   ────────────────────────────────────────────────────────── */
input.tems-email-locked {
  background-color: rgba(10, 31, 52, 0.85) !important;
  color: var(--tems-fg-dim) !important;
  cursor: not-allowed !important;
}