/* ============================================================
   FF-Design fuer die Kontoverwaltung (keycloak.v3 / PatternFly v5).
   Farben wie im FF-Core (~/.claude/ff-design/ff-design.css): Rot #C8102E,
   Hover #9d0c24. Nur Abbildungen von PatternFly darauf, keine eigenen Farben.
   ============================================================ */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
}

:root {
  --ff-brand: #C8102E;
  --ff-brand-deep: #9d0c24;
  --ff-bg-accent: #ffe5e7;

  --pf-v5-global--FontFamily--text: "Open Sans", Arial, sans-serif;
  --pf-v5-global--FontFamily--heading: "Open Sans", Arial, sans-serif;
  --pf-v5-global--primary-color--100: var(--ff-brand);
  --pf-v5-global--primary-color--200: var(--ff-brand-deep);
  --pf-v5-global--primary-color--dark-100: var(--ff-brand);
  --pf-v5-global--link--Color: var(--ff-brand);
  --pf-v5-global--link--Color--hover: var(--ff-brand-deep);
  --pf-v5-global--link--Color--dark: var(--ff-brand);
  --pf-v5-global--link--Color--dark--hover: var(--ff-brand-deep);
  --pf-v5-global--active-color--100: var(--ff-brand);
  --pf-v5-global--BorderRadius--sm: 3px;
}

/* Kopfleiste: FF-Rot mit weissem "IDM"-Logo (resources/logo.svg) */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--ff-brand);
  background-color: var(--ff-brand);
}
.pf-v5-c-masthead .pf-v5-c-brand,
.pf-v5-c-masthead img { height: 32px; width: auto; }
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain { color: #fff; }

/* Buttons */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ff-brand);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ff-brand-deep);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ff-brand-deep);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ff-brand-deep);
}
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--ff-brand);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--ff-brand);
  --pf-v5-c-button--m-secondary--hover--Color: var(--ff-brand-deep);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--ff-brand-deep);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--ff-bg-accent);
}
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--ff-brand);
  --pf-v5-c-button--m-link--hover--Color: var(--ff-brand-deep);
}

/* Navigation links: aktiver Eintrag mit rotem Akzent */
.pf-v5-c-nav {
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--ff-brand);
  --pf-v5-c-nav__link--hover--after--BorderColor: var(--ff-brand);
  --pf-v5-c-nav__link--focus--after--BorderColor: var(--ff-brand);
}

/* Schalter, Auswahl, Fortschritt */
.pf-v5-c-switch { --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--ff-brand); }
.pf-v5-c-tabs { --pf-v5-c-tabs__link--after--BorderColor: var(--ff-brand); }

/* Benutzermenue oben rechts: weiss umrandet auf Rot statt dunklem Kasten */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--hover--BackgroundColor: rgba(255, 255, 255, 0.12);
  --pf-v5-c-menu-toggle--active--BackgroundColor: rgba(255, 255, 255, 0.12);
  --pf-v5-c-menu-toggle--focus--BackgroundColor: rgba(255, 255, 255, 0.12);
  --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: rgba(255, 255, 255, 0.12);
  --pf-v5-c-menu-toggle--Color: #fff;
  --pf-v5-c-menu-toggle--m-expanded--Color: #fff;
  border-radius: 3px;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 3px;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle::after { border-bottom: 0; }

/* Seitenleiste hell statt fast schwarz (FF: Schwarz nie flaechig), aktiver Punkt rot */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #fff;
  background-color: #fff;
  border-right: 1px solid #e5e5e5;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: #1a1a1a;
  --pf-v5-c-nav__link--hover--Color: var(--ff-brand);
  --pf-v5-c-nav__link--focus--Color: var(--ff-brand);
  --pf-v5-c-nav__link--active--Color: var(--ff-brand);
  --pf-v5-c-nav__link--m-current--Color: var(--ff-brand);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: #f4f4f5;
  --pf-v5-c-nav__link--focus--BackgroundColor: #f4f4f5;
  --pf-v5-c-nav__link--active--BackgroundColor: #f4f4f5;
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--ff-bg-accent);
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--ff-bg-accent);
  --pf-v5-c-nav__link--before--BorderColor: #e5e5e5;
  --pf-v5-c-nav__item--before--BorderColor: #e5e5e5;
  --pf-v5-c-nav__link--after--BorderColor: transparent;
  --pf-v5-c-nav__link--hover--after--BorderColor: var(--ff-brand);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--ff-brand);
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--ff-brand);
  --pf-v5-c-nav__subnav__link--hover--after--BorderColor: var(--ff-brand);
  --pf-v5-c-nav__toggle--Color: #595959;
  --pf-v5-c-nav__section-title--Color: #595959;
  --pf-v5-c-nav--c-divider--BackgroundColor: #e5e5e5;
}

/* Ueberschriften plakativ wie im FF-Design */
.pf-v5-c-page__main .pf-v5-c-title { font-weight: 800; letter-spacing: -0.015em; }

/* Rueckweg zur App vorne in der Kopfleiste (resources/js/ff-account.js); schiebt das Benutzermenue
   nach rechts. */
.ff-back-link {
  align-self: center;
  margin-right: auto;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.ff-back-link:hover,
.ff-back-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

/* Kopfleiste: Avatar ohne Funktion (keine Profilbilder) ausblenden */
.pf-v5-c-masthead .pf-v5-c-avatar,
.pf-v5-c-masthead .pf-v5-c-toolbar__item:has(> .pf-v5-c-avatar) { display: none; }
/* Link "Zurueck zu <App>": keycloak.v3 zeigt ihn, wenn die Kontoverwaltung mit referrer und
   referrer_uri geoeffnet wird (Zahnrad der Apps). Weiss umrandet statt Rot auf Rot. */
.pf-v5-c-masthead .pf-v5-c-toolbar__item > a.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: #fff;
  --pf-v5-c-button--m-link--hover--Color: #fff;
  color: #fff;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.pf-v5-c-masthead .pf-v5-c-toolbar__item > a.pf-v5-c-button.pf-m-link:hover { background: rgba(255, 255, 255, 0.12); }
/* Handy: Menue, Logo, Zurueck-Link und Menueknopf in einer Zeile; der Link kuerzt sich mit "...",
   wenn der Platz nicht reicht. */
@media (max-width: 767px) {
  .pf-v5-c-masthead { display: flex; flex-wrap: nowrap; align-items: center; column-gap: 8px; padding-inline: 8px; }
  .pf-v5-c-masthead__toggle { flex: none; margin: 0; }
  .pf-v5-c-masthead__toggle .pf-v5-c-button { padding-inline: 8px; }
  .pf-v5-c-masthead .pf-v5-c-toolbar__item .pf-v5-c-menu-toggle.pf-m-plain { padding-inline: 10px; }
  .pf-v5-c-masthead__brand { flex: none; margin: 0; }
  .pf-v5-c-masthead__brand img { height: 24px; }
  .pf-v5-c-masthead__content { flex: 1 1 auto; min-width: 0; margin: 0; }
  .pf-v5-c-masthead .pf-v5-c-toolbar, .pf-v5-c-masthead .pf-v5-c-toolbar__content,
  .pf-v5-c-masthead .pf-v5-c-toolbar__content-section { padding: 0; margin: 0; width: 100%; min-width: 0; }
  .pf-v5-c-masthead .pf-v5-c-toolbar__content-section { flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
  .pf-v5-c-masthead .pf-v5-c-toolbar__item { margin: 0; }
  .pf-v5-c-masthead .pf-v5-c-toolbar__item:has(> a.pf-v5-c-button.pf-m-link) { flex: 0 1 auto; min-width: 0; }
  .pf-v5-c-masthead .pf-v5-c-toolbar__item > a.pf-v5-c-button.pf-m-link {
    font-size: 0.8125rem; padding: 6px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block;
  }
  .pf-v5-c-masthead .pf-v5-c-toolbar__item:not(:has(> a.pf-v5-c-button.pf-m-link)) { flex: none; }
  .pf-v5-c-masthead .pf-v5-c-toolbar__item > a.pf-v5-c-button.pf-m-link .pf-v5-c-button__icon { display: none; }
}