/* Redimo ID login: native Keycloak v2 (PatternFly 5) pages inside the shared
   Redimo shell. Header, toolbar menus and footer come from shell.css, colours
   from tokens.css, fonts from fonts.css; all three are generated from design/.
   This file only maps PatternFly onto the tokens, lays out the page and styles
   the native card and form controls. Validation and the native forms stay in
   the page. body.rd-passkey-device hides the password form when this browser
   is marked for passkey sign-in; the passkey button stays visible.
   One definition per component. */
:root {
  --id-action-gradient: var(--rd-gradient-action);
  --id-link: var(--rd-accent-text);
}
[data-theme="hc"] { --id-action-gradient: var(--rd-accent); }

/* --- Page ------------------------------------------------------------------ */
html.login-pf { min-height: 100%; scroll-padding-top: 96px; }
body#keycloak-bg {
  margin: 0;
  min-height: 100svh;
  height: auto;
  overflow-y: auto;
  background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--rd-accent) 7%, transparent), transparent 50%), var(--rd-background);
  color: var(--rd-text);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-body-size);
  line-height: 1.6;
  overflow-wrap: anywhere;
  color-scheme: light;
  --pf-v5-global--FontFamily--text: var(--rd-font-sans);
  --pf-v5-global--FontFamily--heading: var(--rd-font-display);
  --pf-v5-global--Color--100: var(--rd-text);
  --pf-v5-global--Color--200: var(--rd-text-muted);
  --pf-v5-global--BackgroundColor--100: var(--rd-surface);
  --pf-v5-global--BackgroundColor--200: var(--rd-surface-muted);
  --pf-v5-global--BorderColor--100: var(--rd-border);
  --pf-v5-global--primary-color--100: var(--rd-accent);
}
html[data-theme="dark"] #keycloak-bg,
html[data-theme="hc"] #keycloak-bg { color-scheme: dark; }
html[data-theme="hc"] #keycloak-bg { background: var(--rd-background); }

/* Full-width shell header on top, the native card centred below. PatternFly
   centres the login container, which pushes the header down: start instead. */
#keycloak-bg .pf-v5-c-login { display: block; min-height: 0; padding: 0; }
#keycloak-bg .pf-v5-c-login__container {
  display: grid;
  grid-template-columns: minmax(16px, 1fr) minmax(0, 440px) minmax(16px, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header header" ". main .";
  justify-content: flex-start;
  align-content: start;
  align-items: start;
  gap: 0;
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: calc(100svh - var(--rd-shell-footer-height));
  margin: 0;
  padding: 0;
}
#keycloak-bg #kc-header {
  grid-area: header;
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  color: var(--rd-text);
}
#keycloak-bg #kc-header-wrapper {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--rd-text);
  font-family: var(--rd-font-sans);
  font-size: var(--rd-h2-size);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: start;
  text-transform: none;
  white-space: normal;
}
/* --- Native card ------------------------------------------------------------ */
#keycloak-bg .pf-v5-c-login__main {
  grid-area: main;
  inline-size: 100%;
  min-inline-size: 0;
  margin: clamp(32px, 10vh, 100px) 0 40px;
  color: var(--rd-text);
  background: linear-gradient(160deg, var(--rd-surface-elevated), var(--rd-surface));
  border: 1px solid var(--rd-border-subtle);
  border-radius: 22px;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.2);
}
#keycloak-bg .pf-v5-c-login__main-header {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  border-top: 0;
  border-radius: 22px 22px 0 0;
}
#keycloak-bg .pf-v5-c-login__main-header,
#keycloak-bg .pf-v5-c-login__main-body,
#keycloak-bg .pf-v5-c-login__main-footer { padding: 24px; }
#keycloak-bg .pf-v5-c-login__main-body { padding-top: 0; }
/* Marked by redimo-id-theme.js when a native wrapper holds no element and no text. */
#keycloak-bg .pf-v5-c-login__main-footer[data-rd-empty],
#keycloak-bg .pf-v5-c-login__main-header-utilities[data-rd-empty] { display: none; }
/* First frame: html.rd-js is set in <head>, so the language select's native box (it moves
   into the toolbar) and a footer without elements take no space from the first paint;
   DOMContentLoaded then decides the footer (rd-ready). Without JavaScript none applies. */
html.rd-js #keycloak-bg .pf-v5-c-login__main-header-utilities,
html.rd-js:not(.rd-ready) #keycloak-bg .pf-v5-c-login__main-footer:not(:has(*)) { display: none; }
#keycloak-bg .pf-v5-c-login__main-header-utilities { inline-size: 100%; grid-area: auto; min-inline-size: 0; }
#keycloak-bg #kc-page-title {
  margin: 0;
  color: var(--rd-text);
  font-family: var(--rd-font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
#keycloak-bg .pf-v5-c-login__main-footer-band { background: var(--rd-surface-muted); color: var(--rd-text); }

/* --- Native form controls --------------------------------------------------- */
#keycloak-bg .pf-v5-c-form { gap: 20px; }
#keycloak-bg .pf-v5-c-form__label,
#keycloak-bg .pf-v5-c-form__label-text { color: var(--rd-text); font-size: 16px; font-weight: 600; }
#keycloak-bg .pf-v5-c-form-control {
  min-block-size: 48px;
  min-inline-size: 0;
  color: var(--rd-text);
  background: var(--rd-surface);
  border: 1px solid var(--rd-border-strong);
  border-radius: var(--rd-radius-md);
  font: inherit;
}
#keycloak-bg .pf-v5-c-form-control::before,
#keycloak-bg .pf-v5-c-form-control::after { border: 0; }
#keycloak-bg .pf-v5-c-form-control input,
#keycloak-bg .pf-v5-c-form-control select,
#keycloak-bg .pf-v5-c-form-control textarea {
  min-inline-size: 0;
  min-block-size: 46px;
  color: var(--rd-text);
  background: transparent;
  font: inherit;
}
#keycloak-bg .pf-v5-c-form-control input::placeholder { color: var(--rd-text-subtle); }
#keycloak-bg .pf-v5-c-form-control:focus-within { outline: 3px solid var(--rd-accent); outline-offset: 2px; }
#keycloak-bg .pf-v5-c-input-group,
#keycloak-bg .pf-v5-c-input-group__item { min-inline-size: 0; }
#keycloak-bg .pf-v5-c-button {
  min-block-size: 48px;
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
#keycloak-bg .pf-v5-c-button::after { border: 0; }
#keycloak-bg .pf-v5-c-button.pf-m-primary { color: #ffffff; background: var(--id-action-gradient); border: 1px solid transparent; }
#keycloak-bg .pf-v5-c-button.pf-m-secondary,
#keycloak-bg .pf-v5-c-button.pf-m-control { color: var(--id-link); background: var(--rd-surface); border: 1px solid var(--rd-border-strong); }
#keycloak-bg .pf-v5-c-button.pf-m-control { min-inline-size: 48px; }
#keycloak-bg .pf-v5-c-button:disabled { opacity: 0.65; cursor: not-allowed; }
#keycloak-bg .pf-v5-c-login__main a { color: var(--id-link); text-decoration: underline; text-underline-offset: 4px; }
#keycloak-bg :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--rd-accent); outline-offset: 3px; }
#keycloak-bg .pf-v5-c-helper-text__item-text { color: var(--rd-text-muted); }
#keycloak-bg .pf-v5-c-helper-text__item-text.pf-m-error,
#keycloak-bg .pf-v5-c-form__label-required { color: var(--rd-danger); }
#keycloak-bg .pf-v5-c-alert { color: var(--rd-text); background: var(--rd-surface-muted); border-radius: var(--rd-radius-sm); }
#keycloak-bg .pf-v5-c-alert.pf-m-danger { border: 2px solid var(--rd-danger); }
#keycloak-bg .pf-v5-c-alert.pf-m-warning { border: 2px solid var(--rd-warning); }
#keycloak-bg .pf-v5-c-alert.pf-m-success { border: 2px solid var(--rd-success); }
#keycloak-bg .pf-v5-c-alert__title { color: inherit; }
#keycloak-bg .pf-v5-c-login__main img { max-inline-size: 100%; block-size: auto; }
#keycloak-bg .pf-v5-c-form-control__toggle-icon { color: var(--rd-text-muted); }

/* The native language select, moved into the shell toolbar: same 48 px control. */
#keycloak-bg .rd-shell-locale .pf-v5-c-form-control {
  min-block-size: 48px;
  inline-size: auto;
  background: var(--rd-surface-muted);
  border: 1px solid var(--rd-border-subtle);
  border-radius: var(--rd-radius-md);
}
#keycloak-bg .rd-shell-locale .pf-v5-c-form-control:hover { background: var(--rd-surface); border-color: var(--rd-border); }
#keycloak-bg .rd-shell-locale select {
  min-block-size: 46px;
  padding-inline: calc(var(--rd-shell-rem) * 0.5) 32px;
  color: var(--rd-text-muted);
  font-size: var(--rd-body-sm-size);
  font-weight: var(--rd-weight-semibold);
}
#keycloak-bg .rd-shell-locale .pf-v5-c-form-control { align-items: center; }
#keycloak-bg .rd-shell-locale .pf-v5-c-form-control__utilities { padding-inline-end: 12px; }
#keycloak-bg .rd-shell-locale .pf-v5-c-form-control__toggle-icon { padding-block-start: 0; }


/* --- Themes, small screens, forced colours, motion ------------------------- */
html[data-theme="hc"] #keycloak-bg .pf-v5-c-login__main { background: var(--rd-surface); border: 3px solid var(--rd-border); box-shadow: none; }
html[data-theme="hc"] #keycloak-bg .pf-v5-c-button.pf-m-primary { color: var(--rd-on-accent); }
@media (max-width: 640px) {
  /* The native select is as wide as its longest locale name; on a narrow row it shrinks
     and PatternFly ellipsises the text. Both menus keep their 48 px. */
  #keycloak-bg .rd-shell-locale { flex: 0 1 auto; min-inline-size: 0; }
  #keycloak-bg .rd-shell-locale .pf-v5-c-form-control { grid-template-columns: minmax(0, 1fr) auto; min-inline-size: 0; max-inline-size: 100%; }
  #keycloak-bg .rd-shell-locale select { min-inline-size: 0; }
  #keycloak-bg .rd-shell-toolbar .rd-shell-menu { flex-shrink: 0; }
}
@media (max-width: 440px) {
  #keycloak-bg .pf-v5-c-login__main { margin-block-start: 24px; }
  #keycloak-bg #kc-page-title { font-size: 24px; }
}
@media (max-width: 380px) {
  #keycloak-bg .pf-v5-c-login__main-header,
  #keycloak-bg .pf-v5-c-login__main-body,
  #keycloak-bg .pf-v5-c-login__main-footer { padding-inline: 16px; }
}
@media (forced-colors: active) {
  #keycloak-bg .pf-v5-c-button.pf-m-primary { color: ButtonText; background: ButtonFace; border: 2px solid ButtonText; }
  #keycloak-bg .pf-v5-c-login__main { background: Canvas; border: 2px solid CanvasText; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  #keycloak-bg *, #keycloak-bg *::before, #keycloak-bg *::after { animation: none !important; transition: none !important; }
}

/* Marked browser: password form hidden, passkey button and the other-way control stay. */
body.rd-passkey-device #kc-form-login { display: none; }
.rd-passkey-other {
  display: inline-block;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--id-link);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: start;
  text-decoration: underline;
  cursor: pointer;
}
.rd-passkey-note {
  margin: 12px 0 0;
  color: var(--rd-text-muted);
  font-size: 14px;
  line-height: 1.5;
}