:root {
  --wsi-blue: #2448c6;
  --wsi-blue-dark: #1e3da8;
  --wsi-slate: #334155;
  --wsi-border: #dbe5f1;
}

body.login-pf {
  background: linear-gradient(135deg, #2448c6 0%, #1f3fae 100%) !important;
  background-attachment: fixed;
}

.login-pf-page {
  padding-top: 40px;
}

#kc-header-wrapper {
  color: #ffffff !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  text-transform: none !important;
}

#kc-header-wrapper::before {
  content: "";
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 14px auto;
  background: url("../img/wsi-logo.png") no-repeat center center;
  background-size: contain;
}

.login-pf-page .card-pf,
.pf-v5-c-login__main,
.pf-c-login__main {
  border-radius: 22px !important;
  border: 1px solid var(--wsi-border) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22) !important;
}

.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary,
button[type="submit"],
input[type="submit"] {
  background: var(--wsi-blue) !important;
  border-color: var(--wsi-blue) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--wsi-blue-dark) !important;
  border-color: var(--wsi-blue-dark) !important;
}

a {
  color: var(--wsi-blue) !important;
  font-weight: 600;
}

input,
select,
textarea {
  border-radius: 12px !important;
}

#kc-page-title,
h1 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.login-pf-page label,
.login-pf-page span,
.login-pf-page p {
  color: var(--wsi-slate) !important;
}

/* --- WSI/KRP logo positioning fix --- */

/* Hide the separated / floating Keycloak header logo area */
#kc-header,
.login-pf-header {
  display: none !important;
}

/* Keep the login card centered */
.login-pf-page {
  max-width: 560px !important;
  margin: 48px auto !important;
  padding: 24px !important;
}

/* Add WSI logo inside the card */
.card-pf::before,
.pf-v5-c-login__main::before,
.pf-c-login__main::before {
  content: "";
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto 22px auto;
  background: url("../img/wsi-logo.png") center center / contain no-repeat;
}

/* Better card spacing */
.card-pf,
.pf-v5-c-login__main,
.pf-c-login__main {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 42px 46px !important;
}

/* Make language selector less awkward */
#kc-locale,
#kc-locale-wrapper {
  margin-bottom: 18px !important;
}

/* Mobile improvement */
@media (max-width: 640px) {
  .login-pf-page {
    margin: 16px auto !important;
    padding: 16px !important;
  }

  .card-pf,
  .pf-v5-c-login__main,
  .pf-c-login__main {
    padding: 28px 24px !important;
  }
}

/* --- WSI/KRP desktop layout refinement --- */
@media (min-width: 900px) {
  .login-pf-page {
    max-width: 760px !important;
    margin: 56px auto !important;
    padding: 24px !important;
  }

  .card-pf,
  .pf-v5-c-login__main,
  .pf-c-login__main {
    max-width: 680px !important;
    width: 680px !important;
    padding: 48px 64px !important;
  }

  #kc-page-title,
  h1 {
    max-width: none !important;
    width: 100% !important;
    font-size: 2rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  #kc-locale,
  #kc-locale-wrapper {
    width: 100% !important;
    margin: 0 0 24px 0 !important;
  }

  #kc-locale select,
  select {
    width: 100% !important;
  }

  input,
  .pf-v5-c-form-control,
  .pf-c-form-control {
    width: 100% !important;
  }
}

/* --- WSI/KRP mobile refinement --- */
@media (max-width: 899px) {
  .login-pf-page {
    max-width: 94vw !important;
    margin: 24px auto !important;
  }

  .card-pf,
  .pf-v5-c-login__main,
  .pf-c-login__main {
    width: 100% !important;
    max-width: 94vw !important;
    padding: 36px 28px !important;
  }

  #kc-page-title,
  h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
}

/* WSI-KRP-MOBILE-LOGIN-FIX-2026-05-17
   Fix mobile/iPad Keycloak login title wrapping too narrowly. */
@media (max-width: 760px) {
  html,
  body,
  .login-pf,
  .login-pf body,
  .login-pf-page,
  .pf-v5-c-login,
  .pf-c-login {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .login-pf-page .card-pf,
  .card-pf,
  .pf-v5-c-login__main,
  .pf-c-login__main {
    width: calc(100vw - 32px) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #kc-content,
  #kc-content-wrapper,
  #kc-form,
  #kc-form-wrapper,
  .pf-v5-c-login__main-header,
  .pf-c-login__main-header {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #kc-page-title,
  h1#kc-page-title,
  .pf-v5-c-login__main-header h1,
  .pf-c-login__main-header h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    line-height: 1.15 !important;
    font-size: clamp(1.75rem, 7vw, 2.35rem) !important;
    text-align: left !important;
  }

  #kc-locale,
  #kc-locale-wrapper,
  .kc-locale-wrapper,
  #kc-locale-dropdown {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 12px !important;
    margin-left: 0 !important;
  }

  #kc-locale select,
  #kc-locale-wrapper select,
  .kc-locale-wrapper select,
  select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  .pf-c-form-control,
  .pf-v5-c-form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}