html.login-pf,
body#keycloak-bg {
  min-height: 100%;
  margin: 0;
}

body#keycloak-bg {
  background: #171717 url("../img/keycloak-bg-darken.svg") center / cover fixed no-repeat;
}

.pf-v5-c-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: transparent;
}

.pf-v5-c-login__container {
  width: min(900px, 100%);
  display: grid;
  grid-template-areas:
    "header"
    "main";
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.pf-v5-c-login__header {
  grid-area: header;
  margin: 0;
  text-align: center;
}

#kc-header-wrapper {
  display: block;
  color: #fff;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

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

.pf-v5-c-login__main {
  grid-area: main;
  width: 100%;
  max-width: none;
  margin: 0;
  border-top: 8px solid #0b78d0;
  background: #24272c;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .48);
}

@media (max-width: 640px) {
  .pf-v5-c-login {
    padding: 20px;
  }

  .pf-v5-c-login__container {
    gap: 16px;
  }

  #kc-header-wrapper {
    font-size: 28px;
  }

  #kc-header-wrapper::before {
    width: 96px;
    height: 96px;
    margin-bottom: 10px;
  }
}

/* Leesbaarheid (Kevin, 23 oktober 2026: "maak de inlogpagina beter leesbaar"): de kaart is donker, dus kop, labels, hulpteksten
   en links licht; de invulvelden blijven wit met donkere tekst. Contrast lichte tekst op #24272c ruim boven 7:1. */
.pf-v5-c-login__main,
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  color: #f2f4f7;
}
.pf-v5-c-login__main h1,
.pf-v5-c-login__main .pf-v5-c-title,
.pf-v5-c-login__main-header .pf-v5-c-title,
#kc-page-title {
  color: #ffffff;
}
.pf-v5-c-login__main .pf-v5-c-form__label,
.pf-v5-c-login__main .pf-v5-c-form__label-text,
.pf-v5-c-login__main label,
.pf-v5-c-login__main .pf-v5-c-check__label {
  color: #e6e9ee;
}
.pf-v5-c-login__main .pf-v5-c-helper-text__item-text,
.pf-v5-c-login__main .pf-v5-c-form__helper-text,
.pf-v5-c-login__main p,
.pf-v5-c-login__main li,
.pf-v5-c-login__main-footer-band {
  color: #d3d8e0;
}
.pf-v5-c-login__main a,
.pf-v5-c-login__main .pf-v5-c-button.pf-m-link {
  color: #7cc4ff;
}
.pf-v5-c-login__main a:hover,
.pf-v5-c-login__main a:focus-visible {
  color: #b3dcff;
}
.pf-v5-c-login__main .pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text,
.pf-v5-c-login__main .kc-feedback-text {
  color: #ffb4a8;
}
.pf-v5-c-login__main input,
.pf-v5-c-login__main select,
.pf-v5-c-login__main .pf-v5-c-form-control {
  color: #151515;
  background-color: #ffffff;
}
.pf-v5-c-login__main-footer-band {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, .12);
}