/* keep your background as-is */
:root { --bg-blue:#5660FF; }
html, body { height:100%;  overflow-y: auto; }

/* ✅ paint the background only on body */
body{
  margin:0;
  background:
    url('../img/background-neurons-drawn.svg?v=4') center/cover no-repeat,
    var(--bg-blue) !important;
}

/* ✅ prevent duplicate paints on KC wrappers */
.login-pf body,
.login-pf-page{
}

/* --- center the default Keycloak card --- */
#kc-page-content .card-pf,
.login-pf-page .card-pf{
  max-width: 520px;                 /* a nice, narrow width */
  margin: 26vh auto 56px auto;      /* centers the card */
  border-radius: 14px;              /* light polish (optional) */
  box-shadow: 0 16px 40px rgba(0,0,0,.25);  /* optional */

  /* allow placing the logo outside, above the card */
  position: relative;
  overflow: visible;
}

/* === LOGO OUTSIDE ABOVE THE CARD (centered) === */
#kc-page-content .card-pf::before,
.login-pf-page .card-pf::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;                 /* place just above the card */
  transform: translateX(-50%);
  margin-bottom: 14px;          /* gap between logo and card */

  /* size — tweak as needed */
  width: 280px;
  height: 66px;

  background: url('../img/EMBL_logo_whiteLetters.png') center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
  pointer-events: none;         /* logo shouldn’t intercept clicks */
  z-index: 2;
}

/* strip weird grid offsets some KC versions add */
.login-pf-page .row > [class*="col-"],
.login-pf-page .login-pf-signin{
  float: none !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* (optional) tighten inner spacing a bit without touching controls */
#kc-form .form-group{ margin-bottom: 12px; }

/* ===== Only add an “— OR —” above/between sections ===== */

/* Hide KC’s built-in social header/separator (keeps your translation clean) */
.login-pf-social-section .login-pf-social-section-header,
#kc-social-providers-header,
#kc-social-providers ~ .separator {
  display: none !important;
}

/* Base list cleanup for IdP area */
#kc-social-providers{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;     /* small gap under the top logo */
}

/* Make the IdP link span the full card width */
#kc-social-providers a{
  display: flex;                 /* so we can add an icon on the left */
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  position: relative;
  min-height: 44px;
  padding: 10px 18px 10px 56px;  /* left space for the logo */
}

/* 👈 add EMBL logo to the left of the IdP button text */
#kc-social-providers a::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  background: url('../img/EMBL_logo_design.jpg') center/cover no-repeat;
  border-radius: 4px;            /* soft corners; remove if you prefer square */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* more space between the Sign In button and the OR divider */
#kc-form-buttons { margin: 10px 0 26px !important; }   /* pushes content below the button */

/* (fallback in case your KC build ignores the wrapper margin) */
#kc-login { margin-bottom: 22px !important; }

/* tighten the social block itself */
#kc-social-providers{
  margin-top: 6px !important;
  margin-bottom: 8px !important;
  padding-top: 0 !important;
}

/* slightly smaller gap around the SSO button */
#kc-social-providers li{ margin: 6px 0 !important; }

/* kill the tiny realm header ("EMBLHH") at the very top */
#kc-header,
#kc-header-wrapper,
.kc-logo-text,
.login-pf-page .login-pf-page-header {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ------------------------------------------------------------------------- */
/* 🔄 ONLY invert order: IdP first → OR → form                                */
/* ------------------------------------------------------------------------- */

/* stack and allow reordering of children */
#kc-content-wrapper{
  display: flex;
  flex-direction: column;
}

/* put the IdP section FIRST */
#kc-social-providers{ order: 0; }

/* then the username/password form */
#kc-form{ order: 1; }

/* remove the old OR (which used to sit above the social block) */
#kc-social-providers::before{ content: none !important; }

/* draw the OR above the form so it's between IdP and credentials */
#kc-form::before{
  content: "OR";
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px 0 10px !important;
  font-weight: 700;
  color: rgba(0,0,0,.55);
  background:
    linear-gradient(currentColor 0 0) left 50%/44% 1px no-repeat,
    linear-gradient(currentColor 0 0) right 50%/44% 1px no-repeat;
}

/* ------------------------------------------------------------------------- */
/* ⬇️ Keep “New user? Register” at the bottom                                 */
/* ------------------------------------------------------------------------- */
#kc-registration,
#kc-registration-wrapper,
.login-pf-signup{
  order: 2 !important;           /* after the form (form is order:1) */
  margin-top: 14px !important;
  text-align: center;
}

/* ------------------------------------------------------------------------- */
/* 🆕 Label: left-aligned “Collaborator login” under OR above first field     */
/* ------------------------------------------------------------------------- */
#kc-form .form-group:first-of-type::before{
  content: "Collaborator login";
  display: block;
  margin: 4px 0 6px;             /* space under OR, above the first field */
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(0,0,0,.66);
  text-align: center;              /* left-aligned as requested */
}