/* haid.center – Neon-Look für die Account-Konsole (PatternFly 5). Immer dunkel. */
:root:root,
html.pf-v5-theme-dark {
  color-scheme: dark;
  --hc-bg: #0b1230;
  --hc-card: rgba(8, 12, 28, .86);
  --hc-orange: #ff5a32;
  --hc-red: #ff3b1f;
  --hc-yellow: #ffe45c;
  --hc-cyan: #19c8ff;
  --hc-text: #f4f6ff;
  --hc-muted: #9aa6cc;

  --pf-v5-global--BackgroundColor--100: rgba(8, 12, 28, .86);
  --pf-v5-global--BackgroundColor--200: rgba(5, 7, 15, .6);
  --pf-v5-global--BackgroundColor--light-100: rgba(8, 12, 28, .86);
  --pf-v5-global--BackgroundColor--dark-100: #05070f;
  --pf-v5-global--Color--100: var(--hc-text);
  --pf-v5-global--Color--dark-100: var(--hc-text);
  --pf-v5-global--Color--dark-200: var(--hc-muted);
  --pf-v5-global--Color--light-100: var(--hc-text);
  --pf-v5-global--Color--200: var(--hc-muted);
  --pf-v5-global--BorderColor--100: rgba(154, 166, 204, .35);
  --pf-v5-global--primary-color--100: var(--hc-orange);
  --pf-v5-global--primary-color--200: var(--hc-red);
  --pf-v5-global--active-color--100: var(--hc-cyan);
  --pf-v5-global--link--Color: var(--hc-cyan);
  --pf-v5-global--link--Color--hover: var(--hc-yellow);
  --pf-v5-global--FontFamily--sans-serif: system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading--sans-serif: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Hintergrund: gleiche Szene wie Landingpage und Login */
body {
  background: var(--hc-bg) url("../img/background.webp") left top / cover no-repeat fixed;
  color: var(--hc-text);
}

/* Abdunkelung über der Szene, damit Inhalte gut lesbar bleiben */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 15, .78), rgba(5, 7, 15, .55) 60%, rgba(5, 7, 15, .7));
  pointer-events: none;
  z-index: 0;
}

#app, .pf-v5-c-page {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* Kopfzeile */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: rgba(5, 7, 15, .85);
  --pf-v5-c-masthead--m-display-inline--BackgroundColor: rgba(5, 7, 15, .85);
  border-bottom: 2px solid var(--hc-orange);
  box-shadow: 0 6px 18px -8px rgba(255, 90, 50, .8);
  backdrop-filter: blur(6px);
}

.pf-v5-c-masthead__brand img {
  height: 40px;
  filter: drop-shadow(0 0 10px rgba(255, 90, 50, .7));
}

/* Seitenleiste */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v5-c-nav {
  --pf-v5-c-page__sidebar--BackgroundColor: rgba(5, 7, 15, .8);
  --pf-v5-c-nav__link--Color: var(--hc-text);
  --pf-v5-c-nav__link--m-current--Color: var(--hc-yellow);
  --pf-v5-c-nav__link--hover--Color: var(--hc-yellow);
  background: rgba(5, 7, 15, .8);
  backdrop-filter: blur(6px);
}

.pf-v5-c-nav__link.pf-m-current {
  text-shadow: 0 0 12px rgba(255, 90, 50, .8);
}

.pf-v5-c-page__main-section,
.pf-v5-c-page__main {
  background: transparent;
}

/* Karten, Listen, Abschnitte */
.pf-v5-c-card,
.pf-v5-c-data-list,
.pf-v5-c-panel,
.pf-v5-c-page__main-section .pf-v5-c-form {
  background: var(--hc-card);
  border: 1px solid rgba(255, 90, 50, .5);
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(255, 90, 50, .22);
}

/* PatternFly setzt hier dunklen Text (#151515), daher explizit hell */
.pf-v5-c-table th,
.pf-v5-c-table td,
.pf-v5-c-table__th,
.pf-v5-c-table__td,
.pf-v5-c-tabs,
.pf-v5-c-tabs__link,
.pf-v5-c-tab-content,
.pf-v5-c-toolbar,
.pf-v5-c-pagination,
.pf-v5-c-modal-box,
.pf-v5-c-menu,
.pf-v5-c-menu__item,
.pf-v5-c-popover,
.pf-v5-c-dropdown__menu,
.pf-v5-c-select__menu,
.pf-v5-c-drawer,
.pf-v5-c-wizard,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
.pf-v5-c-helper-text__item-text,
.pf-v5-c-empty-state,
.pf-v5-c-card,
.pf-v5-c-data-list,
.pf-v5-c-data-list__cell,
.pf-v5-c-data-list__item,
.pf-v5-c-panel,
.pf-v5-c-content,
.pf-v5-c-description-list,
.pf-v5-c-table {
  --pf-v5-c-data-list--Color: var(--hc-text);
  color: var(--hc-text);
}

.pf-v5-c-data-list__item {
  background: transparent;
  border-color: rgba(154, 166, 204, .25);
}

.pf-v5-c-title {
  color: var(--hc-yellow);
  text-shadow: 0 0 14px rgba(255, 90, 50, .55);
}

/* Aufklappmenüs (Benutzermenü, Auswahllisten): deckend, mit Rand, gut sichtbar */
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-select__menu,
.pf-v5-c-popover__content {
  --pf-v5-c-menu--BackgroundColor: #0a1024;
  background: #0a1024;
  border: 1px solid var(--hc-orange);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(255, 90, 50, .45);
}

.pf-v5-c-menu__item:hover,
.pf-v5-c-menu__item:focus,
.pf-v5-c-dropdown__menu-item:hover,
.pf-v5-c-dropdown__menu-item:focus {
  --pf-v5-c-menu__item--hover--BackgroundColor: rgba(255, 90, 50, .2);
  background: rgba(255, 90, 50, .2);
  color: var(--hc-yellow);
}

/* Formularfelder */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: rgba(5, 7, 15, .75);
  --pf-v5-c-form-control--Color: var(--hc-text);
  color: var(--hc-text);
  border-radius: 8px;
}

.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--after--BorderColor: var(--hc-cyan);
  box-shadow: 0 0 12px rgba(25, 200, 255, .45);
}

/* Gesperrte Felder (z. B. Benutzername) */
.pf-v5-c-form-control.pf-m-disabled,
.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control[disabled],
.pf-v5-c-form-control:disabled {
  --pf-v5-c-form-control--BackgroundColor: rgba(154, 166, 204, .12);
  --pf-v5-c-form-control--disabled--BackgroundColor: rgba(154, 166, 204, .12);
  background: rgba(154, 166, 204, .12);
  color: var(--hc-muted);
  -webkit-text-fill-color: var(--hc-muted);
}

.pf-v5-c-form-control.pf-m-disabled input {
  color: var(--hc-muted);
}

/* Aktiver Menüpunkt in der Seitenleiste */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  background: rgba(255, 90, 50, .15);
  box-shadow: inset 3px 0 0 var(--hc-orange);
}

/* Buttons */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--hc-orange);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--hc-red);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--hc-red);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--hc-red);
  --pf-v5-c-button--m-primary--Color: #fff;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .06em;
  box-shadow: 0 0 14px rgba(255, 90, 50, .5);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--hc-cyan);
  --pf-v5-c-button--m-secondary--BorderColor: var(--hc-cyan);
  border-radius: 8px;
}

a, .pf-v5-c-button.pf-m-link {
  color: var(--hc-cyan);
}

a:hover, .pf-v5-c-button.pf-m-link:hover {
  color: var(--hc-yellow);
}

/* Schmale Bildschirme wie auf der Landingpage */
@media (max-width: 700px) {
  body { background-position: 20% top; }
}