/*
 * BÖ Cockpit – Login im Look von boe.de (brands/boe/website-palette.json).
 * Liegt über css/styles.css des keycloak.v2-Themes (PatternFly 5).
 *
 * Weißer Hintergrund, schmale schwarze Kopfleiste, weiße Karte mit dezentem Rand
 * #e3e3e3, Poppins mit System-Fallback (keine externen Fonts), Akzent #384ad3,
 * Hover #25318d, Text #222a2b, Fehler #d12626, Logo oben zentriert.
 *
 * Logo: Der Realm liefert displayNameHtml = <div class="kc-logo-text"><span>BÖ Cockpit</span></div>
 * (Konvention von keycloak.v2, Bild über --keycloak-logo-url). Fällt displayNameHtml auf
 * reinen Text zurück, greift der :has()-Fallback weiter unten.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --boe-black: #000000;
  --boe-ink: #222a2b;
  --boe-ink-soft: #455457;
  --boe-muted: #595959;
  --boe-grey: #979797;
  --boe-line: #e3e3e3;
  --boe-surface: #e8eaed;
  --boe-white: #ffffff;
  --boe-accent: #384ad3;
  --boe-accent-dark: #25318d;
  --boe-accent-light: #959ee5;
  --boe-red: #d12626;
  --boe-green: #1e854e;
  --boe-font: Poppins, "Poppins Regular", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* keycloak.v2-Variablen (styles.css) */
  --keycloak-logo-url: url("../img/logo.png");
  --keycloak-logo-width: 220px;
  --keycloak-logo-height: 62px; /* 2595 × 732 px, Seitenverhältnis 3,545:1 */
  --keycloak-bg-logo-url: none;
  --keycloak-card-top-color: var(--boe-accent);

  /* PatternFly-5-Globals: Farben */
  --pf-v5-global--primary-color--100: var(--boe-accent);
  --pf-v5-global--primary-color--200: var(--boe-accent-dark);
  --pf-v5-global--primary-color--dark-100: var(--boe-accent);
  --pf-v5-global--primary-color--light-100: var(--boe-accent-light);
  --pf-v5-global--active-color--100: var(--boe-accent);
  --pf-v5-global--active-color--300: var(--boe-accent-light);
  --pf-v5-global--link--Color: var(--boe-accent);
  --pf-v5-global--link--Color--hover: var(--boe-accent-dark);
  --pf-v5-global--link--Color--dark: var(--boe-accent);
  --pf-v5-global--link--Color--dark--hover: var(--boe-accent-dark);
  --pf-v5-global--danger-color--100: var(--boe-red);
  --pf-v5-global--danger-color--200: #a81f1f;
  --pf-v5-global--success-color--100: var(--boe-green);
  --pf-v5-global--Color--100: var(--boe-ink);
  --pf-v5-global--Color--200: var(--boe-muted);
  --pf-v5-global--Color--dark-100: var(--boe-ink);
  --pf-v5-global--Color--dark-200: var(--boe-muted);
  --pf-v5-global--BackgroundColor--100: var(--boe-white);
  --pf-v5-global--BackgroundColor--200: var(--boe-white);
  --pf-v5-global--BorderColor--100: var(--boe-line);
  --pf-v5-global--BorderColor--200: var(--boe-grey);
  --pf-v5-global--BorderColor--300: var(--boe-line);
  --pf-v5-global--BorderRadius--sm: 4px;
  --pf-v5-global--BoxShadow--md: 0 6px 24px rgba(34, 42, 43, 0.06);

  /* PatternFly-5-Globals: Schrift (Red Hat Fonts des Parents ersetzen) */
  --pf-v5-global--FontFamily--text: var(--boe-font);
  --pf-v5-global--FontFamily--heading: var(--boe-font);
  --pf-v5-global--FontFamily--sans-serif: var(--boe-font);
  --pf-v5-global--FontFamily--redhat-updated--sans-serif: var(--boe-font);
  --pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: var(--boe-font);
  --pf-v5-global--FontFamily--redhatVF--sans-serif: var(--boe-font);
  --pf-v5-global--FontFamily--redhatVF--heading--sans-serif: var(--boe-font);
  --pf-v5-global--FontFamily--overpass--sans-serif: var(--boe-font);
}

/* Lokal installiertes Poppins nutzen, sonst System-Schrift (kein Google-CDN). */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: local("Poppins"), local("Poppins-Regular");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: local("Poppins Medium"), local("Poppins-Medium");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: local("Poppins SemiBold"), local("Poppins-SemiBold");
}

/* ── Seite ───────────────────────────────────────────────────────────────── */
html.login-pf,
.login-pf body,
body#keycloak-bg {
  background: var(--boe-white) !important;
  color: var(--boe-ink);
  font-family: var(--boe-font);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* Schmale schwarze Kopfleiste wie auf boe.de (bei Bedarf diesen Block entfernen). */
.pf-v5-c-login {
  position: relative;
  background: var(--boe-white);
  padding-top: 2.5rem;
}
.pf-v5-c-login::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44px;
  background: var(--boe-black);
}

.pf-v5-c-login__container {
  grid-template-columns: minmax(0, 28rem);
  row-gap: 1.5rem;
}
@media (max-width: 30rem) {
  .pf-v5-c-login__container {
    grid-template-columns: minmax(0, 100%);
  }
}

/* ── Logo ────────────────────────────────────────────────────────────────── */
#kc-header {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0 0;
}
#kc-header-wrapper {
  color: var(--boe-ink) !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}
#kc-header-wrapper div.kc-logo-text {
  background-image: var(--keycloak-logo-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: var(--keycloak-logo-width);
  height: var(--keycloak-logo-height);
  max-width: 80vw;
  margin: 0 auto;
}
#kc-header-wrapper div.kc-logo-text span {
  display: none;
}
/* Fallback: displayNameHtml ist reiner Text → Text ausblenden, Logo als Hintergrund. */
#kc-header-wrapper:not(:has(.kc-logo-text)) {
  width: var(--keycloak-logo-width);
  height: var(--keycloak-logo-height);
  max-width: 80vw;
  margin: 0 auto;
  background: var(--keycloak-logo-url) no-repeat center / contain;
  color: transparent !important;
  font-size: 0;
  overflow: hidden;
}

/* ── Karte ───────────────────────────────────────────────────────────────── */
.pf-v5-c-login__main {
  --pf-v5-c-login__main--BackgroundColor: var(--boe-white);
  background: var(--boe-white);
  border: 1px solid var(--boe-line);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(34, 42, 43, 0.06);
  overflow: hidden;
}
.pf-v5-c-login__main-header {
  border-top: 3px solid var(--keycloak-card-top-color);
  padding-top: 1.75rem;
}
#kc-page-title,
.pf-v5-c-login__main-header .pf-v5-c-title {
  color: var(--boe-ink);
  font-family: var(--boe-font);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pf-v5-c-login__main-body {
  color: var(--boe-ink);
}
.pf-v5-c-login__main-footer {
  color: var(--boe-muted);
}

/* ── Formular ────────────────────────────────────────────────────────────── */
.pf-v5-c-form__label-text,
.pf-v5-c-form__label {
  color: var(--boe-ink-soft);
  font-weight: 500;
}
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--boe-white);
  --pf-v5-c-form-control--BorderColor: var(--boe-line);
  --pf-v5-c-form-control--BorderBottomColor: var(--boe-grey);
  --pf-v5-c-form-control--hover--BorderBottomColor: var(--boe-accent);
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--boe-accent);
  --pf-v5-c-form-control--focus--BorderBottomWidth: 2px;
  --pf-v5-c-form-control--m-error--BorderBottomColor: var(--boe-red);
  --pf-v5-c-form-control--m-error--Color: var(--boe-red);
  --pf-v5-c-form-control--Color: var(--boe-ink);
  --pf-v5-c-form-control--BorderRadius: 4px;
  font-family: var(--boe-font);
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
  font-family: var(--boe-font);
  color: var(--boe-ink);
}
/* Fokus: Browser-Ring und PatternFly-Unterstrich in Akzentfarbe statt Standardblau */
.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--boe-accent);
  outline: 2px solid var(--boe-accent);
  outline-offset: -1px;
  border-radius: 4px;
}
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > select:focus-visible,
.pf-v5-c-button:focus-visible,
.pf-v5-c-check__input:focus-visible,
a:focus-visible {
  outline-color: var(--boe-accent);
}
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > input:focus-visible {
  outline: none;
}

.pf-v5-c-check__input:checked {
  accent-color: var(--boe-accent);
}
input[type="checkbox"] {
  accent-color: var(--boe-accent);
}
#kc-form-options .checkbox label {
  color: var(--boe-muted);
  font-size: 0.875rem;
}

/* Buttons */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--Color: var(--boe-white);
  --pf-v5-c-button--m-primary--BackgroundColor: var(--boe-accent);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--boe-accent-dark);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--boe-accent-dark);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--boe-accent-dark);
  --pf-v5-c-button--BorderRadius: 4px;
  font-family: var(--boe-font);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-block: 0.7rem;
}
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--boe-accent);
  --pf-v5-c-button--m-secondary--BorderColor: var(--boe-accent);
  --pf-v5-c-button--m-secondary--hover--Color: var(--boe-accent-dark);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--boe-accent-dark);
  --pf-v5-c-button--BorderRadius: 4px;
}
.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--Color: var(--boe-muted);
  --pf-v5-c-button--m-control--hover--Color: var(--boe-accent);
  --pf-v5-c-button--m-control--BackgroundColor: var(--boe-white);
}
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--boe-accent);
  --pf-v5-c-button--m-link--hover--Color: var(--boe-accent-dark);
}
a,
.pf-v5-c-login a {
  color: var(--boe-accent);
}
a:hover,
.pf-v5-c-login a:hover {
  color: var(--boe-accent-dark);
}

/* Fehler und Hinweise */
.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-danger.pf-m-inline {
  --pf-v5-c-alert--BorderTopColor: var(--boe-red);
  --pf-v5-c-alert__icon--Color: var(--boe-red);
  --pf-v5-c-alert__title--Color: var(--boe-red);
  --pf-v5-c-alert--m-inline--BackgroundColor: #fbeaea;
  border-radius: 4px;
}
.pf-v5-c-alert.pf-m-success,
.pf-v5-c-alert.pf-m-success.pf-m-inline {
  --pf-v5-c-alert--BorderTopColor: var(--boe-green);
  --pf-v5-c-alert__icon--Color: var(--boe-green);
  --pf-v5-c-alert__title--Color: var(--boe-green);
  --pf-v5-c-alert--m-inline--BackgroundColor: #e8f5ec;
}
.pf-v5-c-alert.pf-m-warning,
.pf-v5-c-alert.pf-m-warning.pf-m-inline {
  --pf-v5-c-alert--BorderTopColor: #c89867;
  --pf-v5-c-alert__icon--Color: #c89867;
  --pf-v5-c-alert__title--Color: var(--boe-ink);
  --pf-v5-c-alert--m-inline--BackgroundColor: #f2decc;
}
.pf-v5-c-helper-text__item-text.pf-m-error,
.kc-feedback-text.pf-m-error,
#input-error,
.pf-v5-c-helper-text__item.pf-m-error {
  color: var(--boe-red);
  --pf-v5-c-helper-text__item-text--Color: var(--boe-red);
}

/* Sprachwahl oben rechts in der Karte */
#login-select-toggle {
  font-family: var(--boe-font);
  color: var(--boe-muted);
}

/* Fußzeile (Info-Links, Social) */
.pf-v5-c-login__main-footer-band-item,
.pf-v5-c-login__main-footer-links {
  color: var(--boe-muted);
  font-size: 0.875rem;
}

/* Darkmode ist über theme.properties aus; Sicherheitsnetz gegen pf-v5-theme-dark. */
html.pf-v5-theme-dark,
html.pf-v5-theme-dark body {
  background: var(--boe-white) !important;
  color: var(--boe-ink);
}