/* =========================================================
   Global page background (Keycloak-compatible)
   ========================================================= */

.login-pf-page {
  min-height: 100vh;
  background-color: #f5f5f5;

  background-image:
    url("../img/bg-left.png"),
    url("../img/bg-right.png");

  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: auto 100%, auto 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Prevent Keycloak layout from hiding background */
.login-pf {
  background: transparent !important;
  width: auto;
}

/* =========================================================
   REMOVE Keycloak header + title completely
   ========================================================= */

/* This removes: <div id="kc-header-wrapper">anumc</div> */
#kc-header,
#kc-header-wrapper,
#kc-header-wrapper * {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   Login card (fixed width, centered)
   ========================================================= */

.card-pf {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;

  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  padding: 28px;
}

/* Ensure content does not stretch */
#kc-content,
#kc-content-wrapper {
  width: 100%;
}

/* =========================================================
   Logo in login box (double size)
   ========================================================= */

.login-pf-header {
  text-align: center;
  margin-bottom: 28px;
}

/* Inject logo */
.login-pf-header::before {
  content: "";
  display: block;

  width: 360px;
  height: 160px;

  margin: 0 auto 16px auto;

  background-image: url("../img/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Remove any remaining title text */
#kc-page-title,
.login-pf-header h1,
.login-pf-header h2 {
  display: none !important;
}

/* =========================================================
   Buttons
   ========================================================= */

#kc-login {
  background-color: #000000;
  border-color: #000000;
}

#kc-login:hover {
  background-color: #222222;
  border-color: #222222;
}

/* =========================================================
   Mobile fallback (hide side banners)
   ========================================================= */

@media (max-width: 768px) {
  .login-pf-page {
    background-image: none;
  }

  .login-pf-header::before {
    width: 260px;
    height: 120px;
  }
}