/*
 * T-026 - DPD Planet's sign-in, on top of keycloak.v2 (PatternFly 5). The values are DPD Planet's
 * tokens (generated/dpd-tokens.css, lifted from apps/planet-web/app/tokens.css): this file names
 * roles (--canvas, --bg, --ink, --action, ...) and never a colour. Light and dark follow the person's
 * system setting (the tokens carry both; keycloak.v2's own script adds its dark class the same way).
 * Targets are at least 44 px; the focus ring is 3 px in --focus, never red; type is Pluto Sans DPD in
 * rem so the person's own text size scales everything. The ids #username, #password and #kc-login are
 * keycloak.v2's and stay: the harnesses drive them.
 */

:root {
  --pf-v5-global--FontFamily--text: "Pluto Sans DPD", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading: "Pluto Sans DPD", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--primary-color--100: var(--action);
  --pf-v5-global--primary-color--200: var(--action-hover);
  --pf-v5-global--link--Color: var(--action-ink);
  --pf-v5-global--link--Color--hover: var(--action-ink);
  --pf-v5-global--BackgroundColor--100: var(--bg);
  --pf-v5-global--Color--100: var(--ink);
  --pf-v5-global--Color--200: var(--ink-muted);
  --pf-v5-global--BorderColor--100: var(--border-control);
  --pf-v5-global--danger-color--100: var(--danger);
  --keycloak-card-top-color: transparent;
}

html,
body#keycloak-bg {
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--pf-v5-global--FontFamily--text);
  font-weight: 400;
  font-synthesis: none;
}

.login-pf body {
  background: var(--canvas);
}

.pf-v5-c-login {
  background: transparent;
}

.pf-v5-c-login__container {
  grid-template-columns: minmax(0, 30rem);
  padding: 1.5rem 1rem 3rem;
  justify-content: center;
}

/* ---- the header: the DPD cube and the product name ---------------------------------------- */
.pf-v5-c-login__header {
  padding-block: 1.5rem 1rem;
}

#kc-header-wrapper {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  /* keycloak's own sheet pins this white with !important (it assumes a dark header band) */
  color: var(--ink) !important;
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: 400;
}

#kc-header-wrapper::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2.625rem;
  background: url("../generated/dpd-cube.svg") center / contain no-repeat;
}

/* ---- the card ------------------------------------------------------------------------------ */
.pf-v5-c-login__main {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--card-edge);
  border-radius: 1.25rem;
  box-shadow: var(--elevation-2);
  overflow: hidden;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  padding-inline: 1.5rem;
}

.pf-v5-c-login__main-header {
  border-top: 0;
  padding-block-start: 1.5rem;
}

.pf-v5-c-title,
#kc-page-title {
  color: var(--ink);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: 400;
}

/* ---- the form ----------------------------------------------------------------------------- */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 400;
}

.pf-v5-c-form-control {
  min-height: 3rem;
  border: 1px solid var(--border-control);
  border-radius: 0.75rem;
  background: var(--bg);
  color: var(--ink);
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none; /* PatternFly draws its own edge; this file draws the one above */
}

.pf-v5-c-form-control input {
  min-height: 2.75rem;
  color: var(--ink);
  font: inherit;
  font-size: var(--text-md);
}

.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control input:focus-visible,
#login-select-toggle:focus-visible {
  outline: none; /* the wrapper carries the one ring */
}

.pf-v5-c-form-control:focus-within {
  outline: var(--focus-ring-width, 3px) solid var(--focus);
  outline-offset: var(--focus-ring-offset, 2px);
}

.pf-v5-c-form-control.pf-m-error {
  border-color: var(--danger);
}

.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text__item-text,
.pf-v5-c-helper-text__item-text.pf-m-error {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text,
.pf-v5-c-form__helper-text .pf-m-error {
  color: var(--danger);
}

/* ---- buttons ------------------------------------------------------------------------------- */
.pf-v5-c-button {
  min-height: 3rem;
  min-width: 2.75rem;
  border-radius: 0.75rem;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 400;
}

.pf-v5-c-button.pf-m-primary {
  background: var(--action);
  color: var(--ink-on-action);
  border: 0;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: var(--action-hover);
}

.pf-v5-c-button.pf-m-primary:active {
  background: var(--action-pressed);
}

.pf-v5-c-button.pf-m-secondary {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border-control);
  box-shadow: none;
}

.pf-v5-c-button.pf-m-secondary::after {
  display: none;
}

.pf-v5-c-button.pf-m-control {
  min-height: 3rem;
  min-width: 3rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border-control);
  border-radius: 0.75rem;
}

.pf-v5-c-button.pf-m-control::after {
  display: none;
}

.pf-v5-c-button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: var(--focus-ring-width, 3px) solid var(--focus);
  outline-offset: var(--focus-ring-offset, 2px);
}

a,
.pf-v5-c-button.pf-m-link {
  color: var(--action-ink);
}

a {
  text-underline-offset: 0.2em;
}

/* ---- the company-SSO slot (shown only while the realm provider `dpd-sso` is enabled) -------- */
.dpd-idp-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
}

.dpd-idp-list .dpd-idp-button.pf-v5-c-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding-block: 0;
  line-height: 1.2;
  text-decoration: none;
}

/* the one action of the "somebody else is signed in" page (error.ftl) */
#sign-out-first {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  text-decoration: none;
}

/* keep the language select inside the card's padding (two classes: the framework's own rule is one) */
.pf-v5-c-login__main-header .pf-v5-c-login__main-header-utilities {
  margin-inline-end: 0;
  margin-right: 0;
  padding-inline-end: 0;
}

.pf-v5-c-login__main-footer-band {
  background: transparent;
  color: var(--ink-muted);
  border-top: 1px solid var(--border);
}

/* ---- messages ------------------------------------------------------------------------------ */
.pf-v5-c-alert {
  border-radius: 0.75rem;
  background: var(--surface-danger);
  color: var(--ink);
  border: 1px solid var(--danger);
}

.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon,
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title {
  color: var(--danger);
}

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

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

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

/* ---- the language select ------------------------------------------------------------------- */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  min-height: 2.75rem;
  min-width: 7.5rem;
  max-width: 100%;
}

#login-select-toggle {
  min-height: 2.75rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  border: 0;
  border-radius: 0.75rem;
  padding-inline: 0.75rem 2rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

/* T-026 fix round: air between the error text and its one action */
#kc-error-message #sign-out-first { margin-top: 1rem; }