/*
 * Keycloak `pd` realm sign-in page, styled 1:1 with the collab "Collaborative
 * dashboard" login screen (apps/demo/app/collab/CollabApp.tsx LoginScreen).
 * This REPLACES Keycloak's default styles (theme.properties `styles=`); the
 * classic `keycloak` parent template provides the DOM this targets. login.ftl
 * supplies Email/Password placeholders, the "Collaborative dashboard" title,
 * the "Sign in" button, and the hint. Light-only, like the app.
 */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body.login-pf,
body {
  background: #ffffff !important;
  color: #14243a;
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Kill PatternFly's decorative background + the top realm-name header. */
html body, body.login-pf, .login-pf body, #kc-container, #kc-container-wrapper {
  background: #ffffff !important;
  background-image: none !important;
}
#kc-header, .login-pf-page-header { display: none !important; }

/* Center the card in the viewport. */
.login-pf-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 37.8px;
}

/* The card = the design's centered column (no border/shadow, plain white). */
.card-pf, #kc-content, #kc-content-wrapper {
  width: 100%;
  max-width: 401.2px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.card-pf {
  display: flex;
  flex-direction: column;
  gap: 30.7px;
}

/* Header: 24U logo above the "Collaborative dashboard" title. */
.login-pf-header, header.login-pf-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14.2px;
  margin: 0;
  padding: 0;
}
.login-pf-header::before {
  content: "";
  display: block;
  width: 151px;
  height: 46.5px;
  background: url("../img/logo.png") no-repeat center / contain;
}
#kc-page-title {
  margin: 0;
  font-size: 17.7px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  text-align: center;
}

/* Form + fields. */
#kc-content-wrapper { display: flex; flex-direction: column; gap: 30.7px; }
#kc-form, #kc-form-wrapper { width: 100%; }
#kc-form-login,
#kc-passwd-update-form,
#kc-update-profile-form { display: flex; flex-direction: column; gap: 11.8px; }
.form-group { margin: 0; }

/* Text/email/password inputs across every base-template form inside #kc-form
   (sign-in, update-password, update-profile, and any future required-action
   page that reuses this chrome). Hidden fields carry an inline `display:none`
   (update-password's autofill username/password) which beats these rules, so
   they stay hidden. Field ids are listed too for pages that render the field
   outside a wrapping #kc-form. */
.login-pf #kc-form input[type="text"],
.login-pf #kc-form input[type="email"],
.login-pf #kc-form input[type="password"],
#kc-form-login input[type="text"],
#kc-form-login input[type="password"],
input#username,
input#password,
input#password-new,
input#password-confirm,
input#email,
input#firstName,
input#lastName {
  width: 100%;
  padding: 14.2px 15.3px;
  border: 1px solid #d5d5d5;
  border-radius: 7.1px;
  background: #ffffff;
  color: #1a1a1a;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15.9px;
  outline: none;
  height: auto;
  box-shadow: none;
}
.login-pf #kc-form input::placeholder,
#kc-form-login input::placeholder,
#kc-passwd-update-form input::placeholder { color: #9aa7b5; }
.login-pf #kc-form input:focus,
#kc-form-login input:focus,
input#username:focus,
input#password:focus,
input#password-new:focus,
input#password-confirm:focus,
input#email:focus,
input#firstName:focus,
input#lastName:focus { border-color: #0b5fa5; box-shadow: none; }

/* Hide any leftover labels / options / password-visibility toggles across every
   base-template form (design uses placeholders, not labels). */
.login-pf #kc-form label,
#kc-form-login label,
#kc-passwd-update-form label,
#kc-update-profile-form label,
.pf-c-form__label,
button.pf-c-button.kc-view-password,
.password-toggle,
#kc-form-options,
#kc-registration,
#kc-registration-container,
.login-pf-signup,
#reset-login { display: none !important; }

/* Base-template "* Required fields" hint: small and muted, not the default
   bold PatternFly subtitle. Shown by required-action pages that render it. */
.login-pf .subtitle,
#kc-content .subtitle,
.pf-c-form__helper-text {
  font-size: 12px;
  font-weight: 400;
  color: #9aa7b5;
  text-align: left;
  margin: 0;
}
.login-pf .subtitle .required,
#kc-content .required { color: #9aa7b5; }

/* Sign-in button. */
#kc-form-buttons { margin-top: 18.9px; }
#kc-login, input#kc-login {
  width: 100%;
  padding: 15.3px;
  border: 1px solid #0b5fa5;
  border-radius: 7.1px;
  background: #0b5fa5;
  color: #ffffff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15.9px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  height: auto;
  box-shadow: none;
  transition: background 120ms ease, color 120ms ease;
}
#kc-login:hover, input#kc-login:hover { background: #ffffff; color: #0b5fa5; }

/* Hint + errors. */
#kc-collab-hint {
  font-size: 13px;
  line-height: 1.55;
  color: #8a8a8a;
  text-align: left;
}
#kc-collab-error, #input-error, .kc-feedback-text, .pf-c-alert, .alert-error {
  font-size: 13px;
  color: #c7452f;
  background: #fbecea;
  border: 1px solid #e6b3a8;
  border-radius: 7.1px;
  padding: 9.4px 11.8px;
  margin: 0;
}

/* Info block that carries the hint. */
#kc-info, #kc-info-wrapper { width: 100%; max-width: 401.2px; margin: 0; padding: 0; background: transparent; border: 0; }