/* ==========================================================================
   EHEIM Account-Console — Farb- und Schrift-Ueberschreibungen

   WIE DAS HIER WIRKT
   Die Account-Console ist eine kompilierte PatternFly-v5-React-SPA; ihr
   Markup ist nicht ueberschreibbar. Erreichbar ist sie ueber ihre ~245
   globalen CSS-Variablen. index.ftl bindet dieses Stylesheet NACH den
   entryStyles der SPA ein — nur deshalb gewinnen die Werte hier.

   Was das bedeutet: dies faerbt PatternFly in EHEIM-Farben. Es macht die
   Seite NICHT zur Glaskarten-Optik der Anmeldeseite — dafuer muesste die SPA
   geforkt werden (themes/README.md, Abschnitt Account-Console).

   ⚠️ ZWEI FALLEN, DIE HIER SCHON BEHANDELT SIND
   1. Variable Fonts gewinnen. PatternFly setzt
        --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf)
      Wer nur --FontFamily--text ueberschreibt, wird von der --vf-Variante
      ueberstimmt und sieht weiter RedHatText. BEIDE muessen gesetzt werden.
   2. Die Kopfleiste kippt ihre eigenen Farbrollen. .pf-v5-c-masthead setzt
      intern --Color--100 auf --Color--light-100 usw. Ein globales Umfaerben
      von --Color--100 erreicht sie deshalb nicht; die Kopfleiste braucht die
      Komponenten-Variable --pf-v5-c-masthead--BackgroundColor.

   Tokens sind dieselben wie im Login-Theme (resources/css/eheim.css).
   ========================================================================== */

:root {
  --eh-sky: #009FE3;
  --eh-deep: #0070B8;
  --eh-deep-dark: #005A94;
  --eh-red: #E30613;
  --eh-text: #0F172A;
  --eh-text-2: #475569;
  --eh-bg: #FAFCFE;
  --eh-font: system-ui, -apple-system, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
}

/* --- Schrift ------------------------------------------------------------- */
/* Beide Ebenen, sonst gewinnt die --vf-Variante (Falle 1 oben).
   Kein Webfont: identische Entscheidung wie eheimWebfont=none im
   Login-Theme — die Seite soll keine Google-Fonts-Anfrage ausloesen. */
:root,
.pf-v5-theme-dark {
  --pf-v5-global--FontFamily--text: var(--eh-font);
  --pf-v5-global--FontFamily--text--vf: var(--eh-font);
  --pf-v5-global--FontFamily--heading: var(--eh-font);
  --pf-v5-global--FontFamily--heading--vf: var(--eh-font);
  --pf-v5-global--FontFamily--redhatVF: var(--eh-font);
}

/* --- Primaerfarbe, Links, Fokus ------------------------------------------ */
:root {
  --pf-v5-global--primary-color--100: var(--eh-deep);
  --pf-v5-global--primary-color--200: var(--eh-deep-dark);
  --pf-v5-global--link--Color: var(--eh-deep);
  --pf-v5-global--link--Color--hover: var(--eh-sky);
  --pf-v5-global--link--Color--dark: var(--eh-deep);
  --pf-v5-global--link--Color--dark--hover: var(--eh-sky);
  --pf-v5-global--active-color--100: var(--eh-sky);
  --pf-v5-global--danger-color--100: var(--eh-red);
  --pf-v5-global--BorderRadius--sm: 8px;
}

/* Im dunklen Modus ist --eh-deep zu dunkel fuer Text auf dunklem Grund. */
.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: var(--eh-sky);
  --pf-v5-global--link--Color: var(--eh-sky);
  --pf-v5-global--link--Color--hover: #5CC8F2;
}

/* --- Kopfleiste und Seitenleiste ----------------------------------------- */
/* Komponenten-Variablen, nicht die globalen (Falle 2 oben). Die Kopfleiste
   stellt ihre Textfarben selbst auf die hellen Rollen um, deshalb genuegt
   der Hintergrund — Schrift und Symbole sind dort schon hell. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--eh-deep);
}

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--eh-deep-dark);
}

/* Die Wortmarke aus theme.properties wird als <img> gerendert. Ohne feste
   Hoehe skaliert sie je nach Viewport unterschiedlich. */
.pf-v5-c-masthead__brand img,
.pf-v5-c-brand img,
img.pf-v5-c-brand {
  height: 26px;
  width: auto;
  max-width: 210px;
}

/* --- Seitenhintergrund --------------------------------------------------- */
/* Nur im hellen Modus: die SPA setzt im dunklen Modus eigene Werte, die hier
   nicht ueberschrieben werden sollen. */
:root:not(.pf-v5-theme-dark) {
  --pf-v5-global--BackgroundColor--100: #FFFFFF;
  --pf-v5-global--BackgroundColor--200: var(--eh-bg);
  --pf-v5-global--Color--100: var(--eh-text);
  --pf-v5-global--Color--200: var(--eh-text-2);
}

/* --- Primaerknoepfe ------------------------------------------------------ */
/* Verlauf wie auf der Anmeldeseite ("Anmelden"/"Konto erstellen"), damit die
   beiden Oberflaechen wenigstens an der auffaelligsten Stelle zusammenpassen.
   PatternFly-Knoepfe sind rechteckig mit 3px Radius; 10px bleibt nah an den
   12px des Login-Themes, ohne die Pill-Form zu erzwingen (die wuerde in den
   Tabellen-Werkzeugleisten der SPA seltsam aussehen). */
.pf-v5-c-button.pf-m-primary {
  background-image: linear-gradient(135deg, var(--eh-sky) 0%, var(--eh-deep) 100%);
  border-radius: 10px;
  font-weight: 600;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-image: linear-gradient(135deg, var(--eh-deep) 0%, var(--eh-deep-dark) 100%);
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link { border-radius: 10px; }

/* --- Eingabefelder ------------------------------------------------------- */
/* 16 px verhindert, dass iOS beim Fokus in die Seite hineinzoomt — dieselbe
   Begruendung wie im Login-Theme. */
.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
  font-size: 16px;
  border-radius: 10px;
}

/* --- Navigation in der Seitenleiste -------------------------------------- */
/* PatternFly faerbt den aktiven Eintrag grau (--BackgroundColor--dark-400)
   und Hover/Fokus mit --dark-200. Auf der jetzt blauen Seitenleiste schlaegt
   das sichtbar. Halbtransparentes Weiss statt eines zweiten festen Farbwerts:
   es passt sich in jeden Blauton ein, auch wenn die Marke spaeter nachjustiert
   wird.
   ⚠️ Der Zustand heisst hier "m-current", NICHT "active" — die naheliegende
   Variable --pf-v5-c-nav__link--active--BackgroundColor gehoert zum
   :active-Druckzustand und laesst den ausgewaehlten Eintrag unberuehrt.
   Der Balken links kommt aus --m-current--after--BorderColor. */
.pf-v5-c-page__sidebar .pf-v5-c-nav {
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(255, 255, 255, 0.16);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--eh-sky);
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(255, 255, 255, 0.10);
  --pf-v5-c-nav__link--focus--BackgroundColor: rgba(255, 255, 255, 0.10);
  --pf-v5-c-nav--c-divider--BackgroundColor: rgba(255, 255, 255, 0.14);
}