/* =====================================================================
   SelahCare — Anmeldemaske

   Dieselben Gestaltungswerte wie CRM und Portal. Bewusst als eigene
   Kopie und nicht als Verweis: Keycloak lädt seine Ressourcen aus dem
   eigenen Theme-Verzeichnis, und eine Anmeldeseite, die auf eine andere
   Anwendung angewiesen ist, um lesbar zu sein, ist eine schlechte
   Anmeldeseite.

   Keycloak 26 baut die Anmeldung aus PatternFly 5. Dessen Klassen
   heißen `pf-v5-c-…`; die Fassung davor hieß `pf-c-…`. Eine Regel auf
   den alten Namen trifft auf nichts und fällt nicht auf — die Seite
   sieht dann einfach nach PatternFly aus. Beim nächsten Keycloak-Sprung
   ist das die erste Stelle, an der nachzusehen ist.

   Der Weg hier ist deshalb nicht, PatternFly zu überschreiben, sondern
   ihm andere Werte zu geben: Die Marke steht in `:root`, und die
   PatternFly-Variablen zeigen darauf. Was dann noch bleibt, sind vier
   Regeln für Dinge, die PatternFly nicht als Wert anbietet.

   Wer die Marke ändert, ändert packages/ui/src/tokens.css UND diese
   Datei. Die Werte stehen deshalb ganz oben und nur einmal.
   ===================================================================== */

/* Die Schriften stehen in css/fonts.css — erzeugt von
   scripts/fetch-fonts.mjs, dieselben Dateien wie in CRM und Portal.
   theme.properties lädt sie vor dieser Datei. */

:root {
  --sc-brand: #84c9d9;
  --sc-brand-deep: #2a7a8b;
  --sc-brand-darker: #1f5c69;
  --bg: #f3f7f8;
  --surface: #ffffff;
  --line: #dae6e9;
  --line-strong: #b9ccd1;
  --ink: #16262b;
  --ink-2: #4c6469;
  --ink-3: #7b9096;
  --danger: #b0392b;
  --radius: 6px;

  --sc-font: 'Poppins', 'Noto Sans', 'Segoe UI', system-ui, -apple-system,
    'Helvetica Neue', Arial, sans-serif;

  /* Eigener Wert statt eines PatternFly-Grundwerts: Im Anmeldekopf
     faerbt PatternFly den Text weiss -- der Kopf liegt dort ueber einem
     Hintergrundbild. Wir haben keines, und geerbtes Weiss auf hellem
     Grund liest niemand. */
  --sc-wordmark: var(--ink);
}

/* --- PatternFly auf die Marke umlenken -------------------------------
 *
 * Diese Variablen benutzt PatternFly selbst. Wer sie setzt, färbt
 * Knöpfe, Verweise, Ränder und Meldungen auf einmal — und trifft dabei
 * auch die Seiten, die wir nie gesehen haben: Passwort vergessen,
 * zweiter Faktor, Konto verknüpfen, Fehlermeldungen. */

/* Schrift und Rundung gelten in beiden Modi. */
:root {
  --pf-v5-global--FontFamily--text: var(--sc-font);
  --pf-v5-global--FontFamily--heading: var(--sc-font);
  --pf-v5-global--FontFamily--sans-serif: var(--sc-font);

  --pf-v5-global--BorderRadius--sm: var(--radius);
  --pf-v5-global--BorderRadius--lg: 10px;
}

/* Die Farben nur im hellen Modus. Im dunklen faerbt PatternFly selbst
   -- unsere hellen Werte waeren dort dunkler Text auf dunklem Grund. */
:root:not(.pf-v5-theme-dark) {
  --pf-v5-global--primary-color--100: var(--sc-brand-deep);
  --pf-v5-global--primary-color--200: var(--sc-brand-darker);
  --pf-v5-global--link--Color: var(--sc-brand-deep);
  --pf-v5-global--link--Color--hover: var(--sc-brand-darker);
  --pf-v5-global--active-color--100: var(--sc-brand-deep);

  --pf-v5-global--BackgroundColor--100: var(--surface);
  --pf-v5-global--BackgroundColor--200: var(--bg);
  --pf-v5-global--Color--100: var(--ink);
  --pf-v5-global--Color--200: var(--ink-2);
  --pf-v5-global--BorderColor--100: var(--line-strong);
  --pf-v5-global--BorderColor--200: var(--line);
  --pf-v5-global--danger-color--100: var(--danger);
}

/* --- Dunkler Modus ---------------------------------------------------
 *
 * Keycloak 26 haengt bei dunkler Systemeinstellung die Klasse
 * `pf-v5-theme-dark` an das Wurzelelement; PatternFly faerbt daraufhin
 * seine Flaechen selbst -- und zwar am Bauteil, nicht am Grundwert.
 * Unsere umgelenkten Grundwerte kommen dort nicht an.
 *
 * Deshalb wird hier nicht dagegen angeschrieben. PatternFly behaelt die
 * Flaechen: Sie sind vollstaendig und decken auch die Seiten ab, die wir
 * nie zu Gesicht bekommen -- zweiter Faktor, Passwort zuruecksetzen,
 * Konto verknuepfen. Zurueckgeholt wird nur die Marke.
 *
 * `:root.pf-v5-theme-dark` ist um eine Stufe genauer als PatternFlys
 * eigenes `:root` -- das ist der Grund fuer die doppelte Angabe. */

:root.pf-v5-theme-dark {
  --sc-brand-deep: #9bd2dc;
  --sc-brand-darker: #b8e2ea;
  --sc-wordmark: #e6eef0;

  --pf-v5-global--link--Color: var(--sc-brand-deep);
  --pf-v5-global--link--Color--hover: var(--sc-brand-darker);
}

/* Das dunkle Theme setzt seine Farben nicht an der Wurzel, sondern am
   Bauteil selbst. Ein Wert an `:root` kommt dort nie an -- der Waehler
   muss bis zum Knopf reichen. Wer das uebersieht, sieht einen blauen
   PatternFly-Knopf und findet den Grund nicht. */
.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--sc-brand-deep);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--sc-brand-darker);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--sc-brand-darker);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--sc-brand-darker);

  /* Heller Markenton traegt keine weisse Schrift. */
  --pf-v5-c-button--m-primary--Color: #0c1518;
  --pf-v5-c-button--m-primary--hover--Color: #0c1518;
  --pf-v5-c-button--m-primary--focus--Color: #0c1518;
  --pf-v5-c-button--m-primary--active--Color: #0c1518;
}

.pf-v5-theme-dark .pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--sc-brand-deep);
  --pf-v5-c-button--m-link--hover--Color: var(--sc-brand-darker);
}

/* --------------------------------------------------------------- Grund */

body {
  font-family: var(--sc-font);
}

:root:not(.pf-v5-theme-dark) body {
  background: var(--bg);
  color: var(--ink);
}

/* PatternFly legt ein Hintergrundbild unter die Anmeldung. Wir haben
   keines — und ein leerer Kasten ist schlechter als keiner. */
.pf-v5-c-background-image {
  display: none;
}

.pf-v5-c-login {
  min-height: 100dvh;
  place-content: center;
  padding: 24px 16px;
}

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

:root:not(.pf-v5-theme-dark) .pf-v5-c-login__main {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(22 38 43 / 5%), 0 10px 26px rgb(22 38 43 / 6%);
  overflow: hidden;
}

/* --------------------------------------------------------------- Kopf */

.pf-v5-c-login__header {
  text-align: center;
  margin-bottom: 22px;
}

/* Das Zeichen statt des Schriftzugs „Keycloak". Der Text im Element
   wird unsichtbar gemacht statt entfernt: Screenreader lesen weiter,
   was dort steht. */
#kc-header-wrapper {
  font-size: 0;
  line-height: 0;
  padding: 0;
  color: transparent;
}

#kc-header-wrapper::before {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  background: url('../img/logo.svg') center / contain no-repeat;
}

#kc-header-wrapper::after {
  content: 'SelahCare';
  display: block;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sc-wordmark);
}

/* Überschrift und Sprachwahl stehen bei PatternFly nebeneinander. In
   Sprachen mit langen Wörtern — Russisch, Griechisch, Deutsch — bleibt
   für die Überschrift eine Spalte von drei Zeichen Breite, und sie
   bricht mitten im Wort. Also untereinander: Die Überschrift bekommt
   die ganze Zeile, die Sprachwahl die nächste. */
.pf-v5-c-login__main-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

#kc-page-title {
  color: var(--sc-wordmark);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.pf-v5-c-login__main-header-utilities {
  margin: 0;
}

/* --------------------------------------------------------------- Felder */

/* PatternFly leitet nicht alles von den Grundwerten ab -- Felder
   tragen ihre Farben fest im Bauteil. Die drei hier sind die, die man
   sieht: Rand beim Tippen, Rand beim Darueberfahren, Rand im Fehler. */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--sc-brand-deep);
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--sc-brand-deep);
  --pf-v5-c-form-control--m-error--after--BorderBottomColor: var(--danger);
  border-radius: var(--radius);
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
  /* 44px: Darunter trifft man auf dem Handy daneben. */
  min-height: 44px;
  font-family: inherit;
  font-size: 15px;
}

.pf-v5-c-form__label-text {
  font-size: 13.5px;
  font-weight: 500;
}

:root:not(.pf-v5-theme-dark) .pf-v5-c-form__label-text {
  color: var(--ink-2);
}

/* --------------------------------------------------------------- Knöpfe */

.pf-v5-c-button.pf-m-primary {
  min-height: 46px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
}

/* --------------------------------------------------------------- Fuß */

#kc-info,
.login-pf-signup {
  font-size: 13px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}