/*
 * Rubiscape One sign-in, on top of keycloak.v2 (PatternFly 5).
 * Tokens mirror Rubiscape-DIP apps/studio-web/src/index.css (.login-surface) so the two
 * sign-in pages look the same.
 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --login-page: #f8f9f9;
  --login-bg: url("../img/background.jpg");
  --login-logo: url("../img/logo.svg");
  --login-card: #ffffff;
  --login-text: #3a4351;
  --login-muted: #6b7686;
  --login-border: #dde2eb;
  --login-link: #285da0;
  --login-field: #ffffff;
  --login-field-text: #1f2733;
  --login-field-border: #b8c2d1;
  --login-shadow: rgba(23, 43, 77, 0.08);
  --login-button: #285da2;
  --login-button-hover: #244f89;

  --pf-v5-global--FontFamily--text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--primary-color--100: var(--login-button);
  --pf-v5-global--primary-color--200: var(--login-button-hover);
  --pf-v5-global--link--Color: var(--login-link);
  --pf-v5-global--link--Color--hover: var(--login-link);
}

:root.pf-v5-theme-dark {
  --login-page: #0d121a;
  --login-bg: url("../img/background-dark.jpg");
  --login-logo: url("../img/logo-dark.svg");
  --login-card: #0d121a;
  --login-text: #e3e8f0;
  --login-muted: #9aa6b8;
  --login-border: #6e7b8e;
  --login-link: #5e93d4;
  --login-field: #181e28;
  --login-field-text: #f1f4f9;
  --login-field-border: #4a576b;
  --login-shadow: rgba(0, 0, 0, 0.5);
}

/* Page: the patterned, wave-footed background, card centred both ways. */
body#keycloak-bg,
.login-pf body {
  background: var(--login-page) var(--login-bg) center bottom / cover no-repeat fixed;
  font-family: var(--pf-v5-global--FontFamily--text);
  color: var(--login-text);
}
.pf-v5-c-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: transparent;
}
.pf-v5-c-login__container {
  display: block;
  width: 100%;
  max-width: 448px;
  padding: 0;
  margin: 0;
  grid-template-columns: none;
}

/* The realm name banner above the card is replaced by the logo inside the card. */
#kc-header { display: none; }

/* Card */
.pf-v5-c-login__main {
  background: var(--login-card);
  border: 1px solid var(--login-border);
  border-radius: 16px;
  box-shadow: 0 8px 24px var(--login-shadow);
  padding: 40px 32px 32px;
  margin: 0;
  max-width: none;
  width: 100%;
  --pf-v5-c-login__main--BackgroundColor: var(--login-card);
}
.pf-v5-c-login__main-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0 24px;
  grid-template-columns: none;
  border-top: 0; /* keycloak.v2 draws a 4px brand-blue bar here */
}
.pf-v5-c-login__main-header::before {
  content: "";
  display: block;
  width: 100%;
  height: 82px;
  margin-bottom: 12px;
  background: var(--login-logo) center / contain no-repeat;
}
#kc-page-title,
.pf-v5-c-login__main-header .pf-v5-c-title {
  font-family: var(--pf-v5-global--FontFamily--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--login-muted);
  margin: 0;
}
.pf-v5-c-login__main-header-utilities { display: none; }
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer { padding-left: 0; padding-right: 0; }
.pf-v5-c-login__main-footer-band { border-top-color: var(--login-border); }

/* Fields: a plain bordered box, label above, as in Rubiscape One. */
.pf-v5-c-form__label-text,
.pf-v5-c-form__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--login-text);
}
.pf-v5-c-form-control {
  --pf-v5-c-form-control--before--BorderColor: var(--login-field-border);
  --pf-v5-c-form-control--before--BorderStyle: solid;
  --pf-v5-c-form-control--before--BorderWidth: 1px;
  --pf-v5-c-form-control--after--BorderColor: transparent;
  --pf-v5-c-form-control--hover--after--BorderColor: var(--login-button);
  --pf-v5-c-form-control--focus--after--BorderColor: var(--login-button);
  --pf-v5-c-form-control--BackgroundColor: var(--login-field);
  --pf-v5-c-form-control--BorderRadius: 6px;
  border-radius: 6px;
  color: var(--login-field-text);
  background: var(--login-field);
}
.pf-v5-c-form-control > input { color: var(--login-field-text); font-size: 14px; }
/* PatternFly draws the box with ::before and an underline with ::after; Keycloak's stylesheet pins
   the box colour, so set the borders directly: one full outline, which turns blue on focus. */
.pf-v5-c-form-control::before {
  border: 1px solid var(--login-field-border) !important;
  border-radius: 6px;
}
.pf-v5-c-form-control::after { border: 0 !important; }
.pf-v5-c-form-control:hover::before { border-color: var(--login-muted) !important; }
.pf-v5-c-form-control:focus-within::before {
  border-color: var(--login-button) !important;
  box-shadow: 0 0 0 2px rgba(40, 93, 162, 0.18);
}
/* Password field and its show/hide button read as one box. */
.pf-v5-c-input-group .pf-v5-c-input-group__item:first-child .pf-v5-c-form-control::before { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border: 1px solid var(--login-field-border);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  --pf-v5-c-button--after--BorderWidth: 0;
}

/* Primary button */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--login-button);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--login-button-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--login-button-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--login-button-hover);
  --pf-v5-c-button--BorderRadius: 6px;
  font-weight: 500;
  font-size: 14px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.pf-v5-c-form__actions { width: 100%; margin-left: 0; margin-right: 0; }
.pf-v5-c-form__actions > * { margin-left: 0; margin-right: 0; }
.pf-v5-c-form__actions .pf-v5-c-button.pf-m-primary { width: 100%; }

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

@media (max-width: 480px) {
  .pf-v5-c-login__main { padding: 32px 20px 24px; }
}