/*
  GRClerk on the Keycloak sign-in page.

  The same tokens as the platform's app.css: Inter, deep blue #000D94 for the
  one action on the page, and the brand gradient (#000D94 -> #20B080 -> #3EE08F)
  as a rule under that action and a band along the top, never behind text.
  The layout, the field markup and every flow stay Keycloak's.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;550;600;650&display=swap");

:root {
  --grclerk-deep: #000D94;
  --grclerk-deep-hover: #001CB4;
  --grclerk-mid: #20B080;
  --grclerk-light: #3EE08F;
  --grclerk-gradient: linear-gradient(135deg, #000D94 0%, #20B080 55%, #3EE08F 100%);
  --grclerk-ink: #14181F;
  --grclerk-ink-soft: #4C5663;
  --grclerk-surface: #FFFFFF;
  --grclerk-surface-2: #EDF0F4;
  --grclerk-rule: #D9DFE7;
  --grclerk-radius: 8px;

  --pf-v5-global--FontFamily--sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-v5-global--FontFamily--heading--sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-v5-global--primary-color--100: var(--grclerk-deep);
  --pf-v5-global--primary-color--200: var(--grclerk-deep-hover);
  --pf-v5-global--link--Color: var(--grclerk-deep);
  --pf-v5-global--link--Color--hover: var(--grclerk-deep-hover);
  --pf-v5-global--active-color--100: var(--grclerk-deep);
  --pf-v5-global--BorderRadius--sm: var(--grclerk-radius);
  --pf-v5-c-button--m-primary--BackgroundColor: var(--grclerk-deep);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--grclerk-deep-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--grclerk-deep-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--grclerk-deep-hover);
  --pf-v5-c-form-control--focus--BorderColor: var(--grclerk-deep);
  --pf-v5-c-form-control--focus--BorderWidth: 2px;
  --pf-v5-c-form-control--BorderRadius: var(--grclerk-radius);
  --pf-v5-c-form-control--BorderColor: var(--grclerk-rule);
}

/* The page: the platform's off-white, with the brand as a band along the top. */
html, body, body.login-pf, .login-pf {
  background: var(--grclerk-surface-2) !important;
  background-image: none !important;
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  color: var(--grclerk-ink);
}
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--grclerk-gradient);
  z-index: 1;
}

/* The wordmark, where Keycloak prints the realm's display name. */
#kc-header-wrapper {
  background: url("../img/grclerk-lockup-gradient.svg") no-repeat center;
  background-size: contain;
  height: 56px;
  width: 258px;
  margin: 28px auto 8px;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
#kc-header { padding: 0; }

/* The card. */
.card-pf, .login-pf-page .card-pf {
  background: var(--grclerk-surface);
  border: 1px solid var(--grclerk-rule);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 13, 148, 0.08);
  padding: 28px 32px 32px;
  max-width: 460px;
}
.login-pf-page .login-pf-header { margin-bottom: 8px; }
#kc-page-title, .login-pf-page .login-pf-page-header h1, h1#kc-page-title {
  font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--grclerk-ink);
}
.login-pf-page .login-pf-signup, .login-pf-page .login-pf-page-header,
.pf-v5-c-form__label-text, label, .pf-v5-c-form__helper-text {
  color: var(--grclerk-ink-soft);
  font-weight: 550;
}

/* Fields. */
.pf-v5-c-form-control, input.pf-v5-c-form-control, .pf-v5-c-form-control input {
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  border-radius: var(--grclerk-radius);
  font-size: 14px;
}

/* The one action, as it is in the platform: deep blue with the gradient rule under it. */
.pf-v5-c-button.pf-m-primary, #kc-login, input#kc-login, .btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--grclerk-deep) !important;
  border: 1px solid var(--grclerk-deep);
  border-radius: var(--grclerk-radius);
  color: #FFFFFF !important;
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  font-weight: 550;
  font-size: 14px;
  padding: 10px 16px;
  box-shadow: inset 0 -2px 0 0 var(--grclerk-mid);
  transition: background .12s, border-color .12s;
}
.pf-v5-c-button.pf-m-primary:hover, #kc-login:hover, input#kc-login:hover, .btn-primary:hover,
.pf-v5-c-button.pf-m-primary:focus, #kc-login:focus, input#kc-login:focus {
  background: var(--grclerk-deep-hover) !important;
  border-color: var(--grclerk-deep-hover);
}
.pf-v5-c-button.pf-m-secondary, .pf-v5-c-button.pf-m-tertiary, .btn-default {
  border-radius: var(--grclerk-radius);
  color: var(--grclerk-deep);
  border-color: var(--grclerk-rule);
  font-family: var(--pf-v5-global--FontFamily--sans-serif);
  font-weight: 550;
}

/* Links, checkboxes, alerts. */
a, .pf-v5-c-button.pf-m-link { color: var(--grclerk-deep); }
a:hover { color: var(--grclerk-deep-hover); }
.pf-v5-c-check__input:checked { accent-color: var(--grclerk-deep); }
.pf-v5-c-alert.pf-m-danger { border-top-color: #B3261E; }
.pf-v5-c-alert.pf-m-success { border-top-color: var(--grclerk-mid); }

/* Footer text and the locale switch stay quiet. */
#kc-info, #kc-info-wrapper, .login-pf-page .login-pf-settings, #kc-locale {
  color: var(--grclerk-ink-soft);
  font-size: 13px;
}