/* =====================================================================
 * PRAME-Login (parent: keycloak.v2) — Vorbild ist wwwroot/welcome.html.
 * Farben und Maße von dort übernommen; bei Änderungen beide anpassen.
 *
 * keycloak.v2 rendert:  header#kc-header  (Realm-Name "PRAME")
 *                       main.pf-v5-c-login__main  (Formular)
 * Daraus wird EINE Karte: der Header als Logoband oben, main darunter,
 * der Hinweis als ::after von main. !important ist nötig, weil PatternFly
 * vieles über Tokens und spezifische Selektoren setzt.
 * ===================================================================== */

:root {
  --pr-ink: #1f2937;
  --pr-muted: #6b7280;
  --pr-line: #e5e7eb;
  --pr-accent: #4f46e5;
  --pr-accent2: #3730a3;
  --pr-danger: #dc2626;
  --pr-font: system-ui, "Segoe UI", Roboto, sans-serif;

  --pf-v5-global--FontFamily--text: var(--pr-font);
  --pf-v5-global--FontFamily--heading: var(--pr-font);
  --pf-v5-global--primary-color--100: var(--pr-accent);
  --pf-v5-global--primary-color--200: var(--pr-accent2);
  --pf-v5-global--link--Color: var(--pr-accent);
  --pf-v5-global--link--Color--hover: var(--pr-accent2);
}

html, body, #keycloak-bg, .pf-v5-c-login {
  font-family: var(--pr-font) !important;
  color: var(--pr-ink) !important;
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #6366f1 100%) fixed !important;
  min-height: 100vh;
}

.pf-v5-c-login {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

/* Header + main untereinander, so breit wie die Karte auf welcome.html */
.pf-v5-c-login__container {
  display: block !important;
  width: min(528px, 100%) !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  background: #fff;
}

/* ── Logoband ───────────────────────────────────────────────────────── */
.pf-v5-c-login__header {
  display: block !important;
  margin: 0 !important;
  padding: 6px 28px !important;
  background: linear-gradient(90deg, #312e81, #4f46e5) !important;
}
#kc-header-wrapper,
.pf-v5-c-brand {
  display: block !important;
  height: 130px !important;
  max-width: 90% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: url(../img/logo.png) left center / contain no-repeat !important;
  /* Realm-Name "PRAME" ausblenden — das Logo sagt es schon. */
  font-size: 0 !important;
  color: transparent !important;
}

/* ── Karte ──────────────────────────────────────────────────────────── */
.pf-v5-c-login__main {
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  grid-area: auto !important;
}
.pf-v5-c-login__main-header {
  padding: 22px 26px 4px !important;
}
.pf-v5-c-login__main-body {
  padding: 8px 26px 8px !important;
}
.pf-v5-c-login__main-footer {
  padding: 0 26px !important;
}

#kc-page-title,
.pf-v5-c-login__main-header .pf-v5-c-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--pr-ink) !important;
  margin: 0 !important;
}

/* Hinweis wie im Fuß von welcome.html */
.pf-v5-c-login__main::after {
  content: "© PRAME. Confidential — for authorised use only. All ring profiles, calculations and data are proprietary. Unauthorised access, copying or distribution is prohibited.";
  display: block;
  margin-top: 14px;
  padding: 14px 26px 20px;
  border-top: 1px solid var(--pr-line);
  font-size: .68rem;
  line-height: 1.5;
  color: #9ca3af;
}

/* ── Formular ───────────────────────────────────────────────────────── */
label,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--pr-muted) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Checkbox-Text (z.B. "Sign out from other devices") ist keine Feldbeschriftung */
.pf-v5-c-check__label {
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: var(--pr-ink) !important;
  text-transform: none;
  letter-spacing: normal;
}

/* Eingabefelder: Rahmen am Wrapper, wie input auf welcome.html */
.pf-v5-c-form-control,
.pf-v5-c-input-group {
  border: 1.5px solid var(--pr-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden;
  --pf-v5-c-form-control--BorderTopColor: transparent;
  --pf-v5-c-form-control--BorderRightColor: transparent;
  --pf-v5-c-form-control--BorderLeftColor: transparent;
  --pf-v5-c-form-control--BorderBottomColor: transparent;
  --pf-v5-c-form-control--BorderBottomWidth: 0;
  --pf-v5-c-form-control--hover--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--BorderBottomWidth: 0;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after { border: 0 !important; }
.pf-v5-c-input-group .pf-v5-c-form-control {
  border: 0 !important;
  border-radius: 0 !important;
}
.pf-v5-c-form-control:focus-within,
.pf-v5-c-input-group:focus-within {
  border-color: var(--pr-accent) !important;
}
.pf-v5-c-form-control input {
  font-size: .92rem !important;
  padding: 9px 11px !important;
  font-family: inherit !important;
  color: var(--pr-ink) !important;
  outline: none !important;
}
/* Auge-Knopf im Passwortfeld */
.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--after--BorderColor: transparent;
  background: transparent !important;
  color: var(--pr-muted) !important;
}

/* Knopf wie "Sign in" auf welcome.html */
.pf-v5-c-button.pf-m-primary,
#kc-login {
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 8px !important;
  background: var(--pr-accent) !important;
  color: #fff !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
}
.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover { background: var(--pr-accent2) !important; }

a { color: var(--pr-accent) !important; }
a:hover { color: var(--pr-accent2) !important; }

/* Fehlermeldungen in der Farbe von welcome.html */
.pf-v5-c-helper-text__item.pf-m-error,
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
#input-error,
#input-error-username,
#input-error-password {
  color: var(--pr-danger) !important;
}
.pf-v5-c-alert { border-radius: 8px !important; }