/* ------------------------------------------------------------------
   BlockBuilder UG — Anmeldeseite fuer Keycloak
   Erweitert keycloak.v2 (PatternFly v5). Nur CSS, keine Template-
   Ueberschreibungen: das ueberlebt Keycloak-Aktualisierungen.
   Farben und Schriften aus ~/WORKSPACES/brand (Hex-Socket-CI).
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/cabinet-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("../fonts/cabinet-grotesk-800.woff2") format("woff2");
  font-weight: 800; font-display: swap;
}

:root {
  --bb-purple:        #6C5CE7;
  --bb-purple-deep:   #3B3290;
  --bb-lavender:      #A99BF0;
  --bb-blue:          #4A90E2;
  --bb-navy:          #1A1A2E;
  --bb-off-white:     #F8F6FC;
  --bb-ada:           #06D6A0;

  --bb-surface:       #21213c;
  --bb-surface-hi:    #2b2b4d;
  --bb-line:          rgba(169, 155, 240, .22);
  --bb-muted:         #9d9db8;
}

/* --- Buehne ------------------------------------------------------- */

html.login-pf, body.login-pf, body#keycloak-bg {
  background: var(--bb-navy) !important;
  color: var(--bb-off-white);
}

body#keycloak-bg::before {
  /* zwei weiche Lichtquellen in Markenfarben, hinter allem */
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 18% -10%, rgba(108, 92, 231, .30), transparent 62%),
    radial-gradient(46rem 34rem at 92% 108%, rgba(74, 144, 226, .20), transparent 60%);
}

body#keycloak-bg::after {
  /* Hex-Motiv des Zeichens, sehr zurueckhaltend */
  content: "";
  position: fixed; right: -7rem; bottom: -7rem; width: 34rem; height: 34rem;
  z-index: 0; pointer-events: none; opacity: .045;
  background: url("../img/mark.svg") no-repeat center / contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}

.pf-v5-c-login { position: relative; z-index: 1; }

/* --- Kopf mit Wort-Bild-Marke ------------------------------------- */

#kc-header-wrapper {
  /* Der Realm-Name wird durch das Logo ersetzt, Text bleibt fuer Vorleseprogramme */
  height: 4.6rem;
  margin: 0 auto 2.3rem;
  text-indent: -9999px;
  overflow: hidden;
  font-size: 0 !important;
  color: transparent !important;
  background: url("../img/lockup.svg") no-repeat center / contain;
  filter: drop-shadow(0 2px 14px rgba(108, 92, 231, .40));
}
/* 20.09.2026: Der Realm master liefert als displayNameHtml einen <div class="kc-logo-text">,
   den keycloak.v2 mit dem Keycloak-Logo hinterlegt. Der lag ueber unserer Wort-Bild-Marke
   ("Keycloak und BlockBuilder ueberlagert"). Alles, was Keycloak in den Kopf rendert,
   bleibt unsichtbar; das Logo kommt ausschliesslich aus dem Hintergrund oben. */
#kc-header-wrapper > *,
#kc-header-wrapper .kc-logo-text {
  display: none !important;
  background: none !important;
}

/* --- Karte -------------------------------------------------------- */

.pf-v5-c-login__main {
  background: var(--bb-surface) !important;
  border: 1px solid var(--bb-line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  overflow: hidden;
}

.pf-v5-c-login__main::before {
  /* Akzentkante oben, Verlauf ueber die drei Markenfarben */
  content: "";
  display: block; height: 3px;
  background: linear-gradient(90deg, var(--bb-purple-deep), var(--bb-purple) 45%, var(--bb-lavender));
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer { background: transparent !important; }

#kc-page-title {
  font-family: "Cabinet Grotesk", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--bb-off-white) !important;
}

/* --- Formular ----------------------------------------------------- */

.pf-v5-c-form__label-text,
.pf-v5-c-form__group-label,
label { color: var(--bb-off-white) !important; }

.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
input.pf-v5-c-form-control {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 9px !important;
  color: var(--bb-off-white) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after { border: 0 !important; }

.pf-v5-c-form-control:focus-within,
input.pf-v5-c-form-control:focus {
  border-color: var(--bb-purple) !important;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, .28) !important;
  outline: none !important;
}
input::placeholder { color: var(--bb-muted) !important; }

/* Autofill des Browsers nicht weiss aufleuchten lassen */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bb-off-white) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bb-surface-hi) inset !important;
  caret-color: var(--bb-off-white);
}

/* --- Schaltflaechen ----------------------------------------------- */

/* PatternFly legt seinen eigenen Rahmen als ::after-Ring an. Der blieb
   sichtbar und ergab den doppelten Rand — hier komplett abschalten. */
.pf-v5-c-button::before,
.pf-v5-c-button::after { border: 0 !important; box-shadow: none !important; }

.pf-v5-c-button.pf-m-primary {
  background: linear-gradient(135deg, var(--bb-purple), var(--bb-purple-deep)) !important;
  border: 0 !important;
  border-radius: 9px !important;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(108, 92, 231, .34);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.pf-v5-c-button.pf-m-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(108, 92, 231, .46);
}
.pf-v5-c-button.pf-m-primary:active { transform: translateY(0); }

.pf-v5-c-button.pf-m-control,
.pf-v5-c-button.pf-m-secondary {
  background: transparent !important;
  border: 1px solid var(--bb-line) !important;
  color: var(--bb-off-white) !important;
  border-radius: 9px !important;
}

/* Passwortfeld und Augen-Schalter als eine Einheit */
.pf-v5-c-input-group__item.pf-m-fill .pf-v5-c-form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}
.pf-v5-c-input-group__item:last-child .pf-v5-c-button.pf-m-control {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: 0;
}

a, .pf-v5-c-button.pf-m-link { color: var(--bb-lavender) !important; }
a:hover { color: var(--bb-off-white) !important; }

/* --- Auswahl der Anmeldeart (Passkey / Code) ----------------------- */

/* Nur der aeussere Wrapper bekommt den Rahmen. Die innere Zeile
   (.select-auth-box-parent) traegt bewusst keinen — sonst doppelt. */
.pf-v5-c-data-list__item {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 11px !important;
  margin-bottom: .6rem;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.pf-v5-c-data-list__item::before,
.pf-v5-c-data-list__item::after,
.pf-v5-c-data-list__item-row::before,
.pf-v5-c-data-list__item-row::after { border: 0 !important; box-shadow: none !important; }

.select-auth-box-parent,
.pf-v5-c-data-list__item-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pf-v5-c-data-list__item:hover {
  border-color: var(--bb-purple) !important;
  background: rgba(108, 92, 231, .10) !important;
}
.select-auth-box-icon, .select-auth-box-icon i { color: var(--bb-lavender) !important; }
.select-auth-box-desc { color: var(--bb-muted) !important; }

/* --- Hinweise, Fehler, Fusszeile ----------------------------------- */

.pf-v5-c-helper-text__item-text,
.pf-v5-c-form__helper-text,
#kc-info-message, .instruction { color: var(--bb-muted) !important; }

.pf-v5-c-alert {
  background: var(--bb-surface-hi) !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 10px !important;
  color: var(--bb-off-white) !important;
}
.pf-v5-c-alert.pf-m-danger  { border-left: 3px solid #ff6b6b !important; }
.pf-v5-c-alert.pf-m-success { border-left: 3px solid var(--bb-ada) !important; }
.pf-v5-c-alert.pf-m-warning { border-left: 3px solid #ffc857 !important; }

#kc-content, #kc-content-wrapper, .pf-v5-c-check__label { color: var(--bb-off-white); }

/* Ankreuzfeld "angemeldet bleiben" — eigenes Aussehen, sonst leuchtet
   das native Kaestchen hell im dunklen Layout */
.pf-v5-c-check__input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 1.05rem; height: 1.05rem;
  margin-top: .15rem;
  border: 1px solid var(--bb-line) !important;
  background: rgba(255, 255, 255, .05) !important;
  border-radius: 4px;
  cursor: pointer;
  display: inline-grid; place-content: center;
  transition: background .12s ease, border-color .12s ease;
}
.pf-v5-c-check__input[type="checkbox"]::after {
  content: ""; width: .55rem; height: .55rem;
  transform: scale(0);
  transition: transform .12s ease;
  background: var(--bb-off-white);
  clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}
.pf-v5-c-check__input[type="checkbox"]:checked {
  background: var(--bb-purple) !important;
  border-color: var(--bb-purple) !important;
}
.pf-v5-c-check__input[type="checkbox"]:checked::after { transform: scale(1); }
.pf-v5-c-check__input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, .28);
}
.pf-v5-c-check__label { cursor: pointer; }

/* Sprachauswahl unaufdringlich einpassen */
#kc-locale, .pf-v5-c-login__main-header-utilities .pf-v5-c-menu-toggle {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 8px !important;
  color: var(--bb-muted) !important;
}
.pf-v5-c-menu {
  background: var(--bb-surface-hi) !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 10px !important;
}
.pf-v5-c-menu__list-item:hover { background: rgba(108, 92, 231, .16) !important; }
.pf-v5-c-menu__item-text { color: var(--bb-off-white) !important; }

/* Karte etwas grosszuegiger */
.pf-v5-c-login__container { max-width: 30rem; }
.pf-v5-c-login__main-body { padding-bottom: 1.6rem; }

/* --- Kleine Schirme ------------------------------------------------ */

@media (max-width: 640px) {
  #kc-header-wrapper { height: 2.9rem; margin-bottom: 1.4rem; }
  body#keycloak-bg::after { display: none; }
}

/* --- Bewegung sparsam ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pf-v5-c-button.pf-m-primary,
  .select-auth-box-parent,
  .pf-v5-c-data-list__item { transition: none !important; }
  .pf-v5-c-button.pf-m-primary:hover { transform: none; }
}