/*
 * RMA Login-Branding — rma-common (T06.STAGING.024 Brand-Polish-Pass)
 *
 * SPEC §4.3 (Auth-UI). Zentrale Brand-Optik fuer alle drei Realm-Themes
 * (rma-broker / rma-customer / rma-platform erben via parent=rma-common
 * und laden diese Datei; sie haben keine eigene branding.css mehr — die
 * per-Realm-Unterschiede beschraenken sich auf den Header-Text
 * `loginAccountTitle` in messages_de.properties, SPEC §4.3 Z10943).
 *
 * [Build-Session-Entscheidung T06.STAGING.024 §4a]
 * - Werte sind hier als SSoT der Auth-UI hartkodiert: die Keycloak-Login-
 *   Seite laeuft in einem EIGENEN Runtime (Keycloak/FreeMarker, eigene
 *   Origin) und kann den Next-Design-System-Token-Layer (`packages/
 *   design-system/styles/tokens/*`) NICHT laden. Diese Datei ist daher
 *   das Auth-UI-Pendant zu primitives.css und in `.stylelintrc.json`
 *   ignoreFiles aufgenommen (analog primitives.css).
 * - keycloak.v2 (Keycloak 26.6.1) basiert auf PatternFly v5. Statt
 *   fragiler Per-Element-Selektoren faerben wir primaer die PatternFly-
 *   Global-Custom-Properties um (Submit-Button, Links, Focus-Ring werden
 *   Navy). Dazu defensive Direkt-Overrides auf stabile Keycloak-IDs.
 * - Inter wird Inter-first im Font-Stack referenziert, aber NICHT extern
 *   nachgeladen (Keycloak-CSP `default-src 'self'` blockt Google-Fonts;
 *   ein gebundeltes Inter-woff2 ist Phase-18-Polish). Fallback = System-
 *   Sans, brand-neutral + sauber.
 * - Navy-Hero als Seiten-Hintergrund + weisse Login-Card (Carl-Kruse-Rebrand
 *   „Navy-Hero #06145F als Background", ADR-005); Card-Container defensiv auf
 *   Weiss + dunklen Text gezwungen, damit kein Navy-auf-Navy.
 */

:root {
  /* RMA-Brand-Primitives (Auth-UI-SSoT) */
  --rma-color-primary: #06145f;
  --rma-color-primary-hover: #040d40;
  --rma-color-primary-on: #ffffff;
  --rma-color-bg: #f7f5f4;
  --rma-color-surface: #ffffff;
  --rma-color-fg: #1a1a1a;
  --rma-color-muted: #5a5a5a;
  --rma-color-border: #e2ddd9;
  --rma-radius-sm: 6px;
  --rma-radius-md: 10px;
  --rma-font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* PatternFly-v5-Globals umfaerben (keycloak.v2 / KC 26). */
  --pf-v5-global--primary-color--100: var(--rma-color-primary);
  --pf-v5-global--primary-color--200: var(--rma-color-primary-hover);
  --pf-v5-global--active-color--100: var(--rma-color-primary);
  --pf-v5-global--link--Color: var(--rma-color-primary);
  --pf-v5-global--link--Color--hover: var(--rma-color-primary-hover);
  --pf-v5-global--FontFamily--text: var(--rma-font-body);
  --pf-v5-global--FontFamily--heading: var(--rma-font-body);
  --pf-v5-global--BorderRadius--sm: var(--rma-radius-sm);

  /* Status-Tints fuer Feedback-/Alert-Boxen (Auth-UI-SSoT, analog
   * primitives.css). Dunkler fg-Text wird unten erzwungen, hier nur die
   * hellen Hintergruende + Akzent-/Icon-Farben — kontraststark gegen
   * #1a1a1a-Text (>= WCAG AA). Statusfamilien spiegeln das App-Design-
   * System (error kuehler als Brand-Navy, §3.13 #13). */
  --rma-status-warning-bg: #fdf3e3;
  --rma-status-warning-border: #e0a800;
  --rma-status-warning-fg: #7a5200;
  --rma-status-danger-bg: #fbe9e7;
  --rma-status-danger-border: #c62828;
  --rma-status-danger-fg: #c62828;
  --rma-status-success-bg: #e7f4ea;
  --rma-status-success-border: #2e7d32;
  --rma-status-success-fg: #2e7d32;
  --rma-status-info-bg: #eaf1fb;
  --rma-status-info-border: #1565c0;
  --rma-status-info-fg: #1565c0;
}

/* --- Seiten-Hintergrund: Navy-Hero ----------------------------------- */
body,
body.login-pf,
.login-pf-page,
.pf-v5-c-login,
.pf-v5-c-background-image {
  background: var(--rma-color-primary) !important;
  font-family: var(--rma-font-body) !important;
  color: var(--rma-color-fg);
}

/* keycloak.v2 nutzt teils ein Hintergrund-Image-Element — neutralisieren. */
.pf-v5-c-background-image::before,
.pf-v5-c-background-image::after {
  background-image: none !important;
  background: var(--rma-color-primary) !important;
}

/* --- Brand-Wortmarke ueber der Card (weiss auf Navy) ------------------ */
#kc-header,
#kc-header-wrapper,
.login-pf-header {
  color: var(--rma-color-primary-on) !important;
  font-family: var(--rma-font-body) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none !important;
  padding: 0 0 1.25rem;
}

/* Wortmarke „RMAI" weiss ueber dem realm-spezifischen Titel
 * (loginAccountTitle, z.B. „Anmeldung im Makler-Cockpit"). Review-Fix P2
 * Sonnet T06.STAGING.024: KEINE Tagline-`::after` nach dem Titel — der
 * Login-Header bleibt „Wortmarke + Kontext-Titel" (Tagline ist Landing-
 * Page-Marketing, nicht Auth-UI). */
#kc-header-wrapper::before {
  content: "RMAI";
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--rma-color-primary-on);
  margin-bottom: 0.5rem;
}

/* --- Login-Card: weiss, abgerundet, Schatten ----------------------------- */
.pf-v5-c-login__main,
.pf-v5-c-card,
#kc-content,
#kc-content-wrapper,
.card-pf {
  background: var(--rma-color-surface) !important;
  color: var(--rma-color-fg) !important;
  border-radius: var(--rma-radius-md) !important;
  border: 1px solid var(--rma-color-border) !important;
  box-shadow: 0 8px 28px rgb(0 0 0 / 18%) !important;
}

.pf-v5-c-login__main-header-title,
#kc-page-title {
  color: var(--rma-color-fg) !important;
  font-family: var(--rma-font-body) !important;
  font-weight: 600;
}

/* --- Primary-Button (Anmelden) ------------------------------------------- */
.pf-v5-c-button.pf-m-primary,
input[type="submit"].pf-v5-c-button,
#kc-login,
.kc-login {
  background-color: var(--rma-color-primary) !important;
  border-color: var(--rma-color-primary) !important;
  color: var(--rma-color-primary-on) !important;
  border-radius: var(--rma-radius-sm) !important;
  font-family: var(--rma-font-body) !important;
  font-weight: 600;
}

.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
  background-color: var(--rma-color-primary-hover) !important;
  border-color: var(--rma-color-primary-hover) !important;
}

/* --- Links (Passwort vergessen, Registrierung) --------------------------- */
a,
.pf-v5-c-login a,
#kc-info a {
  color: var(--rma-color-primary);
}

a:hover {
  color: var(--rma-color-primary-hover);
}

/* --- Form-Inputs: Navy-Focus-Ring ------------------------------------ */
.pf-v5-c-form-control,
input[type="text"],
input[type="email"],
input[type="password"] {
  border-radius: var(--rma-radius-sm) !important;
  font-family: var(--rma-font-body) !important;
}

.pf-v5-c-form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  outline: 2px solid var(--rma-color-primary) !important;
  outline-offset: 1px;
}

/* --- Passwort-Sichtbarkeits-Toggle (Auge-Icon im Passwort-Feld) ------- */
/* Keycloak 26 / PatternFly v5 rendert den Show/Hide-Button als
   `.pf-m-control` rechts im Feld. Ohne Regel erbt er den grauen
   PatternFly-Default-Block und bricht die Marken-Optik. Token-konform
   entstoeren: transparenter Hintergrund, Muted-Auge, Navy-Hover. */
.pf-v5-c-button.pf-m-control {
  background-color: transparent !important;
  border-color: var(--rma-color-border) !important;
  color: var(--rma-color-muted) !important;
}

.pf-v5-c-button.pf-m-control:hover {
  color: var(--rma-color-primary) !important;
}

.pf-v5-c-button.pf-m-control:focus-visible {
  outline: 2px solid var(--rma-color-primary) !important;
  outline-offset: 1px;
}

/* --- Navy-Akzent-Bar oben auf der Card (Marken-Detail) ---------------- */
.pf-v5-c-login__main::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: var(--rma-color-primary);
  border-radius: var(--rma-radius-md) var(--rma-radius-md) 0 0;
  margin-bottom: 1.25rem;
}

/* --- Feedback-/Alert-Boxen (PatternFly v5) — Text-Kontrast sichern -------- *
 * BUG-FIX (MD-Report 2026-05-31): keycloak.v2 rendert die globale
 * Message-Box UND die RMA-eigenen Hinweise (Fehlversuch-Zaehler login.ftl:38,
 * Lockout-Eskalation login.ftl:89) als `.pf-v5-c-alert`. Deren Title-/
 * Description-Elemente tragen eine eigene `color`-Deklaration aus dem
 * PF5-Basis-CSS und erben daher NICHT das dunkle `#kc-content`-fg — ohne
 * expliziten Override war der Text kontrastarm/unsichtbar auf dem hellen
 * Warn-Hintergrund („gelbe Box mit Ausrufezeichen, Text nicht lesbar").
 * Fix: Text auf dunklen fg zwingen + jedem Status einen kontraststarken
 * Tint geben. KC 26.6.1 = PatternFly v5 -> Prefix `pf-v5-c-`. */
/* `hidden`-Attribut hart durchsetzen (Live-Verify-Fix App-Design-Marathon):
 * PatternFly setzt `.pf-v5-c-alert { display: grid }` (Autor-Style), was die
 * UA-Regel `[hidden] { display: none }` ueberstimmt — die mit `hidden`
 * markierten, vom Theme-JS (rma-auth.js) gesteuerten Boxen (Fehlversuch-
 * Zaehler login.ftl:38, Lockout-Panel/-Eskalation :82/:89, Captcha-Slot :68)
 * wuerden sonst LEER sichtbar. In Staging ist `rmaLockoutStatusUrl` leer ->
 * rma-auth.js bleibt inert, die Boxen bleiben `hidden` und MUESSEN unsichtbar
 * bleiben (MD-Bug „gelbe Box mit Ausrufezeichen, kein Text"). In Produktion
 * togglet das JS das `hidden`-Attribut -> die Regel greift nur im hidden-State,
 * der Toggle bleibt respektiert. */
.pf-v5-c-alert[hidden],
#rma-attempt-counter[hidden],
#rma-lockout-panel[hidden],
#rma-lockout-escalation[hidden],
#rma-captcha-slot[hidden] {
  display: none !important;
}

.pf-v5-c-alert,
.pf-v5-c-alert__title,
.pf-v5-c-alert__description {
  color: var(--rma-color-fg) !important;
}

.pf-v5-c-alert__title a,
.pf-v5-c-alert__description a {
  color: var(--rma-color-primary) !important;
  text-decoration: underline;
}

.pf-v5-c-alert {
  background-color: var(--rma-status-info-bg) !important;
  border: 1px solid var(--rma-status-info-border) !important;
  border-radius: var(--rma-radius-sm) !important;
}

.pf-v5-c-alert.pf-m-warning {
  background-color: var(--rma-status-warning-bg) !important;
  border-color: var(--rma-status-warning-border) !important;
}

/* `pf-m-danger` = RMA-eigener Lockout-Alert (login.ftl:89); `pf-m-error` =
 * globale keycloak.v2-Message bei `message.type == 'error'` (haeufigster
 * Auth-Fehler: falsches Passwort). Beide auf Status-Rot, sonst faellt der
 * Login-Fehler auf den Info-Blau-Default (Dual-Review-Haertung Opus P2). */
.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-error {
  background-color: var(--rma-status-danger-bg) !important;
  border-color: var(--rma-status-danger-border) !important;
}

.pf-v5-c-alert.pf-m-success {
  background-color: var(--rma-status-success-bg) !important;
  border-color: var(--rma-status-success-border) !important;
}

/* Status-Icon (Ausrufezeichen / Haken) farblich an den Status koppeln. */
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon {
  color: var(--rma-status-warning-fg) !important;
}

.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon,
.pf-v5-c-alert.pf-m-error .pf-v5-c-alert__icon {
  color: var(--rma-status-danger-fg) !important;
}

.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon {
  color: var(--rma-status-success-fg) !important;
}

.pf-v5-c-alert.pf-m-info .pf-v5-c-alert__icon {
  color: var(--rma-status-info-fg) !important;
}

/* ID-basierte Fallback-Absicherung fuer die RMA-eigenen Alerts (login.ftl:38
 * Fehlversuch-Zaehler, :89 Lockout-Eskalation). Unabhaengig davon, worauf
 * keycloak.v2 `kcAlertDescriptionClass` aufloest, ist der Text damit
 * deterministisch dunkel + lesbar (Dual-Review-Haertung: PF5-Property-Wert
 * ist nicht im Repo verifizierbar, daher zusaetzlich ID-gezielt). */
#rma-attempt-counter,
#rma-attempt-counter-text,
#rma-lockout-escalation,
#rma-lockout-escalation span {
  color: var(--rma-color-fg) !important;
}

#rma-lockout-escalation a {
  color: var(--rma-color-primary) !important;
  text-decoration: underline;
}

/* --- Energetischer Card-Auftritt + Button-Lift (reduced-motion-safe) ------ *
 * „Volle Energie"-Politur (MD 2026-05-31, App-Design-Marathon). Keycloak
 * laeuft in eigener Origin ohne primitives.css -> der reduced-motion-Guard
 * wird hier lokal gesetzt (WCAG 2.3.3). */
@keyframes rma-kc-card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pf-v5-c-login__main {
  animation: rma-kc-card-in 420ms cubic-bezier(0.2, 0, 0, 1) both;
}

.pf-v5-c-button.pf-m-primary,
#kc-login {
  transition:
    background-color 150ms ease-out,
    transform 150ms ease-out,
    box-shadow 150ms ease-out;
}

.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
  transform: translateY(-1px);
  /* Glow = Navy (--rma-color-primary #06145f) @ 28%. Subtiler Hover-
   * Shadow als Auth-UI-SSoT-Ausnahme zu §3.13 #4 (analog stylelint-
   * ignoreFiles, T06.STAGING.024) — monochrom, nicht-animiert, „volle
   * Energie"-Politur (MD 2026-05-31). */
  box-shadow: 0 6px 18px rgb(6 20 95 / 28%);
}

@media (prefers-reduced-motion: reduce) {
  .pf-v5-c-login__main {
    animation: none;
  }

  .pf-v5-c-button.pf-m-primary,
  #kc-login {
    transition: background-color 150ms ease-out;
  }

  .pf-v5-c-button.pf-m-primary:hover,
  #kc-login:hover {
    transform: none;
    box-shadow: none;
  }
}

/* T05.924 — Ausstiegs-Link der Auth-Masken (alle .ftl-Overrides):
 * dezenter zentrierter Link unter der Form; Navy konsistent zur
 * Brand-Palette (Auth-UI-SSoT, T06.STAGING.024). */
.rma-back-link-wrap {
  margin-top: 1.25rem;
  text-align: center;
}

.rma-back-link {
  color: var(--rma-color-primary);
  font-size: 0.875rem;
  text-decoration: none;
}

.rma-back-link:hover,
.rma-back-link:focus-visible {
  text-decoration: underline;
}