/* ==========================================================================
   DataDrive2030 Keycloak login theme
   Pure CSS restyle of the classic (parent=keycloak) login markup.
   No FreeMarker override, so every Keycloak flow keeps working; this only
   changes the look. Palette and type follow the DataDrive2030 brand guide.
   ========================================================================== */

:root{
  --ground:#FBFBF9;
  --surface:#FFFFFF;
  --ink:#2B2926;
  --ink-soft:#5C5F5A;
  --line:#E4E6E0;
  --brand:#086E7D;
  --brand-deep:#075C68;
  --highlight:#FEE32D;
  --focus:rgba(8,110,125,.38);
  --font:"Segoe UI","Manrope",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

html,body{ height:100%; }
body, input, button, select, textarea, .pf-c-button{ font-family:var(--font); }

/* ---- Full brand photo background with a teal to charcoal wash ------------ */
body,
body.login-pf,
.login-pf body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  /* Solid brand teal as the base, so if bg.jpg is not present yet the panel is
     still a clean branded colour rather than blank. The photo sits on top when
     it is there. */
  background-color:#0b3b42;
  background-image:
    linear-gradient(90deg, rgba(11,59,66,.74) 0%, rgba(11,59,66,.30) 28%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%),
    url("../img/bg.jpg");
  background-size:cover;
  background-position:32% center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* Yellow brand rule along the very top */
body::before{
  content:"";
  position:fixed; left:0; right:0; top:0; height:6px;
  background:var(--highlight); z-index:20;
}

/* Logo over the photo, top left */
body::after{
  content:"";
  position:fixed; top:28px; left:42px;
  width:158px; height:48px;
  background:url("../img/logo.svg") left center / contain no-repeat;
  z-index:20;
}

/* Tagline over the photo, only where there is room beside the card */
@media (min-width:960px){
  .login-pf-page::after{
    content:"Insight for every child's early learning.";
    position:fixed; left:42px; bottom:9vh; max-width:15ch;
    color:#fff; font-size:30px; font-weight:800; line-height:1.15;
    letter-spacing:-.01em; z-index:20; text-shadow:0 1px 24px rgba(0,0,0,.35);
  }
}

/* Hide the default realm name header (the logo replaces it) */
#kc-header,
#kc-header-wrapper{ display:none !important; }

/* ---- The sign in card, anchored to the right, vertically centred -------- */
.login-pf-page{ padding:0 !important; max-width:none !important; }

.card-pf{
  position:fixed;
  top:50%; right:6vw; transform:translateY(-50%);
  width:min(420px, 92vw);
  max-height:92vh; overflow:auto;
  margin:0;
  padding:34px 32px 28px;
  background:var(--surface);
  border:0 !important;
  border-top:5px solid var(--highlight) !important;
  border-radius:20px;
  box-shadow:0 26px 64px rgba(27,26,24,.30);
  z-index:15;
}
/* Keep the content flowing INSIDE the card. Positioning these too was creating
   a second, offset white box next to the form. */
#kc-content, #kc-content-wrapper, #kc-form, #kc-form-wrapper{
  position:static !important; width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
  background:transparent !important; box-shadow:none !important; border:0 !important;
}
/* Default Keycloak blocks that otherwise float loose over the photo. */
#kc-info, #kc-registration, #kc-registration-container, #kc-locale{ display:none !important; }

/* Title */
#kc-page-title{
  margin:0 0 6px;
  font-size:25px; font-weight:800; letter-spacing:-.01em; color:var(--ink);
}
.login-pf-header h1{ font-size:25px; font-weight:800; color:var(--ink); }

/* Labels */
label,
.pf-c-form__label,
.control-label,
#kc-form-login label{
  display:block;
  font-size:13px; font-weight:700; color:var(--ink); margin:0 0 6px;
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
#username, #password,
.pf-c-form-control,
#kc-form-login input{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  font-size:15px;
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:4px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
.pf-c-form-control:focus,
#kc-form-login input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px var(--focus);
  outline:none;
}

/* Form groups spacing */
.form-group, .pf-c-form__group{ margin-bottom:16px; }

/* Options row: remember me and forgot password */
#kc-form-options{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:6px 0 18px; font-size:13.5px; color:var(--ink-soft);
}
#kc-form-options a, #reset-login, #kc-info a, #kc-registration a, a{
  color:var(--brand); font-weight:600; text-decoration:none;
}
#kc-form-options a:hover, a:hover{ text-decoration:underline; }
#kc-form-options .checkbox{ display:block; font-weight:500; color:var(--ink-soft); }
#kc-form-options .checkbox label{ display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer; }
#kc-form-options input[type="checkbox"]{ width:16px; height:16px; margin:0; flex:0 0 auto; accent-color:var(--brand); }

/* Primary button */
#kc-login,
input[type="submit"],
#kc-form-buttons input,
.pf-c-button.pf-m-primary,
.btn-primary{
  width:100%;
  box-sizing:border-box;
  background:var(--brand) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px !important;
  padding:13px 16px !important;
  font-size:15px; font-weight:700; cursor:pointer;
  box-shadow:none !important;
}
#kc-login:hover,
input[type="submit"]:hover,
.pf-c-button.pf-m-primary:hover,
.btn-primary:hover{ background:var(--brand-deep) !important; }
#kc-login:focus, input[type="submit"]:focus{ outline:none; box-shadow:0 0 0 4px var(--focus) !important; }

/* Social sign in (Google and friends) */
#kc-social-providers{ margin-top:20px; }
#kc-social-providers h2, #kc-social-providers h4{
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  text-align:center; margin:0 0 12px; text-transform:none;
}
#kc-social-providers a,
#kc-social-providers .pf-c-button,
.zocial{
  display:flex !important; align-items:center; justify-content:center; gap:10px;
  width:100%; box-sizing:border-box;
  background:var(--surface) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:11px 16px !important;
  font-size:14.5px; font-weight:600; text-decoration:none;
  margin-top:8px;
}
#kc-social-providers a:hover, .zocial:hover{ border-color:var(--brand) !important; }

/* Feedback messages */
.alert, .pf-c-alert{
  border:0; border-radius:12px; padding:11px 13px; font-size:13.5px; margin-bottom:16px;
}
.alert-error, .pf-c-alert.pf-m-danger, .pf-m-error{ background:#FBE8EA; color:#A51D2D; }
.alert-success, .pf-c-alert.pf-m-success{ background:#E5F4EB; color:#1F7A4D; }
.alert-warning, .pf-c-alert.pf-m-warning{ background:#FFF4D6; color:#9A5B00; }
.alert-info, .pf-c-alert.pf-m-info{ background:#EAF4F5; color:#075C68; }
#input-error, .pf-c-form__helper-text.pf-m-error, .kc-feedback-text{ color:#A51D2D; font-size:12.5px; }

/* Language selector, keep it quiet if present */
#kc-locale{ position:fixed; top:24px; right:24px; z-index:20; }
#kc-locale a, #kc-locale-dropdown a{ color:#fff; }

/* On narrow screens let the card breathe and the tagline drop away */
@media (max-width:600px){
  .card-pf, #kc-content{ position:static !important; transform:none !important; right:auto; margin:120px auto 40px; width:92vw; }
  body::after{ left:20px; top:22px; width:132px; }
}

/* ==========================================================================
   Overrides that must beat the PatternFly CSS the parent theme also loads
   (it can win on source order). Higher specificity + !important on the
   layout-critical pieces only.
   ========================================================================== */

/* The sign in card is one fixed panel on the right (desktop). */
@media (min-width:601px){
  .login-pf-page .card-pf,
  html .card-pf{
    position:fixed !important; top:50% !important; right:6vw !important; left:auto !important;
    transform:translateY(-50%) !important;
    width:min(420px,92vw) !important; max-width:min(420px,92vw) !important;
    max-height:92vh; overflow:auto; margin:0 !important; float:none !important; display:block !important;
  }
}

/* Title flows at the top of the card instead of escaping to the page corner. */
.login-pf-page .card-pf .login-pf-header,
.login-pf-page .card-pf header{
  position:static !important; left:auto !important; top:auto !important; right:auto !important;
  width:auto !important; margin:0 0 14px !important; padding:0 !important; text-align:left !important;
}
.login-pf-page #kc-page-title{
  position:static !important; left:auto !important; top:auto !important; right:auto !important;
  width:auto !important; text-align:left !important; margin:0 0 4px !important;
  font-size:24px !important; font-weight:800 !important; color:var(--ink) !important;
}

/* Remember me: undo the Bootstrap absolute checkbox so it sits inline. */
#kc-form-options{ display:flex !important; align-items:center; justify-content:space-between; }
#kc-form-options .checkbox{ padding-left:0 !important; margin:0 !important; min-height:0 !important; }
#kc-form-options .checkbox label{ padding-left:0 !important; display:inline-flex !important; align-items:center; gap:8px !important; font-weight:500; }
#kc-form-options .checkbox input[type="checkbox"],
input#rememberMe{
  position:static !important; float:none !important; left:auto !important;
  margin:0 8px 0 0 !important; width:16px !important; height:16px !important;
}