/* Cybic's sign-in look over Keycloak's v2 (PatternFly 5) pages. Colours and
   type come from the tokens below; an app's brand.css redefines them. */

:root {
  --cy-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cy-ground: #f4f2ed;
  --cy-surface: #ffffff;
  --cy-paper: #faf9f6;
  --cy-line: #e4e1d9;
  --cy-line-strong: #d9d5cc;
  --cy-ink: #16181d;
  --cy-ink-2: #3a3d45;
  --cy-muted: #62656d;
  --cy-chip: #14161b;
  --cy-accent: #2c4fc7;
  --cy-accent-ink: #2442b0;
  --cy-accent-tint: #e8edfb;
  --cy-alert: #fbede4;
  --cy-alert-ink: #8f3f14;
  --cy-danger: #b42318;
  --cy-radius: 0.5rem;
}

:root {
  --pf-v5-global--FontFamily--text: var(--cy-font);
  --pf-v5-global--FontFamily--heading: var(--cy-font);
  --pf-v5-global--Color--100: var(--cy-ink);
  --pf-v5-global--Color--200: var(--cy-muted);
  --pf-v5-global--BorderColor--100: var(--cy-line);
  --pf-v5-global--primary-color--100: var(--cy-accent);
  --pf-v5-global--primary-color--200: var(--cy-accent-ink);
  --pf-v5-global--link--Color: var(--cy-accent);
  --pf-v5-global--link--Color--hover: var(--cy-accent-ink);
  --pf-v5-global--BorderRadius--sm: var(--cy-radius);
}

.login-pf body,
body#keycloak-bg {
  background: var(--cy-ground);
  font-family: var(--cy-font);
  -webkit-font-smoothing: antialiased;
}

.pf-v5-c-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: none;
}

.pf-v5-c-login__container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 24rem;
  padding: 0;
  margin: 0;
}

.pf-v5-c-login__header {
  margin: 0;
  padding: 0;
  align-self: flex-start;
}

#kc-header-wrapper {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  margin: 0;
  border-radius: 0.75rem;
  background: var(--cy-chip);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.2;
  text-align: left;
}

#kc-header-wrapper::before {
  content: "";
  width: 26px;
  height: 26px;
  flex: none;
  background: url("../img/logo.svg") no-repeat center / contain;
}

.pf-v5-c-login__main {
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  background: var(--cy-surface);
  border: 1px solid var(--cy-line);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(22 24 29 / 0.05);
  padding: 1.75rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  padding: 0;
  margin: 0;
  border: 0;
}

.pf-v5-c-login__main-footer:empty {
  display: none;
}

#kc-page-title {
  font-family: var(--cy-font);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--cy-ink);
}

.pf-v5-c-form {
  gap: 1rem;
}

.pf-v5-c-form__label-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cy-ink-2);
}

.pf-v5-c-form-control {
  border-radius: var(--cy-radius);
  background: var(--cy-surface);
}

.pf-v5-c-form-control::before {
  border: 1px solid var(--cy-line-strong);
  border-radius: var(--cy-radius);
}

.pf-v5-c-form-control::after {
  border: 0;
}

.pf-v5-c-form-control:focus-within::before {
  border-color: var(--cy-accent);
  box-shadow: 0 0 0 3px var(--cy-accent-tint);
}

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

.pf-v5-c-helper-text__item.pf-m-error {
  --pf-v5-c-helper-text__item--m-error--Color: var(--cy-danger);
  font-size: 0.8125rem;
}

.pf-v5-c-form-control > :is(input, select, textarea):focus {
  outline: none;
}

.pf-v5-c-input-group__item:not(:last-child) .pf-v5-c-form-control,
.pf-v5-c-input-group__item:not(:last-child) .pf-v5-c-form-control::before {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border: 1px solid var(--cy-line-strong);
  border-inline-start: 0;
  border-radius: 0 var(--cy-radius) var(--cy-radius) 0;
  color: var(--cy-muted);
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after {
  border: 0;
}

.pf-v5-c-form-control > :is(input, select, textarea) {
  font-size: 0.875rem;
}

.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: var(--cy-radius);
  font-size: 0.875rem;
  font-weight: 500;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--cy-ink);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--cy-ink-2);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--cy-ink-2);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--cy-ink-2);
  padding-block: 0.625rem;
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--cy-ink);
  --pf-v5-c-button--m-secondary--hover--Color: var(--cy-ink);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--cy-line-strong);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--cy-line-strong);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--cy-paper);
}

.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-warning {
  --pf-v5-c-alert--BackgroundColor: var(--cy-alert);
  --pf-v5-c-alert--BorderTopColor: transparent;
  --pf-v5-c-alert__title--Color: var(--cy-alert-ink);
  --pf-v5-c-alert__icon--Color: var(--cy-alert-ink);
  border-radius: var(--cy-radius);
  box-shadow: none;
}

.pf-v5-c-login__main-footer-band {
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--cy-muted);
}

.pf-v5-c-login__main-footer-band:first-child {
  margin-block-start: 0.25rem;
}

.pf-v5-c-check__label,
#kc-form-options,
.pf-v5-c-login__main-body .subtitle {
  font-size: 0.8125rem;
  color: var(--cy-muted);
}

.cy-footnote {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--cy-muted);
}

.pf-v5-c-login__main-body > .pf-v5-u-mb-md-on-md {
  margin-bottom: 0.75rem;
}