/* =============================================================================
   Feuerwehr Oberursel – Account Console · Komplett-Redesign (PatternFly v5)
   Dark-Glass-Look passend zum Login: Tiefe, Glas-Karten, Blaulicht, FW-Rot.
   Dark-Mode wird via js/fw-dark.js erzwungen.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

:root,
.pf-v5-theme-dark {
  --fw-red: #c8102e;
  --fw-red-bright: #e21b3c;
  --fw-red-dark: #a30d25;
  --fw-blue: #28a0ff;
  --fw-glass: rgba(18, 30, 48, 0.72);
  --fw-line: rgba(255, 255, 255, 0.10);
  --fw-line-top: rgba(255, 255, 255, 0.16);
  --fw-text: rgba(255, 255, 255, 0.95);
  --fw-dim: rgba(255, 255, 255, 0.62);

  /* PatternFly-Grundtoken auf FW umstellen */
  --pf-v5-global--primary-color--100: #c8102e;
  --pf-v5-global--primary-color--200: #a30d25;
  --pf-v5-global--active-color--100: #c8102e;
  --pf-v5-global--link--Color: #ff8aa0;
  --pf-v5-global--link--Color--hover: #ffffff;
  --pf-v5-global--BorderColor--active: #c8102e;
  --pf-v5-global--FontFamily--text: "Poppins", system-ui, Arial, sans-serif;
  --pf-v5-global--FontFamily--heading: "Poppins", system-ui, Arial, sans-serif;
}

/* =========================================================
   Hintergrund: Bild + dunkler Verlauf für Tiefe & Lesbarkeit
   ========================================================= */
html, body,
.pf-v5-c-page {
  background:
    linear-gradient(180deg, rgba(8, 14, 24, 0.80), rgba(6, 10, 18, 0.93)),
    url("../img/account-bg-dark.png") center center / cover no-repeat fixed !important;
}

/* Eigene, schlanke Scrollbar in FW-Rot */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(200, 16, 46, 0.55); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(200, 16, 46, 0.8); }
*::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   MASTHEAD – sattes Rot, weißes Logo, pulsierende Blaulicht-Kante
   ========================================================= */
.pf-v5-c-masthead {
  position: relative !important;
  background-color: #c8102e !important;
  background-image: none !important;
  border-bottom: 0 !important;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.40) !important;
  z-index: 5;
}
.pf-v5-c-masthead::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--fw-blue);
  box-shadow: 0 0 18px 2px rgba(40, 160, 255, 0.75);
  animation: fwGlow 3.4s ease-in-out infinite;
}
@keyframes fwGlow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Masthead-Kinder transparent, damit das Rot durchgeht */
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content,
.pf-v5-c-masthead__toolbar,
.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,
.pf-v5-c-masthead .pf-v5-c-toolbar__group,
.pf-v5-c-masthead .pf-v5-c-toolbar__item {
  background-color: transparent !important;
  --pf-v5-c-toolbar--BackgroundColor: transparent;
}
.pf-v5-c-masthead,
.pf-v5-c-masthead a,
.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-menu-toggle { color: #fff !important; }

/* Logo: rein weiß (mehrfarbig wäre auf Rot unsichtbar) + größer */
.pf-v5-c-masthead__brand img,
.pf-v5-c-brand,
.pf-v5-c-brand img {
  max-height: 46px !important;
  width: auto !important;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain { color: #fff !important; }

/* Benutzer-Menü-Pille oben rechts */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  background: rgba(0, 0, 0, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover { background: rgba(0, 0, 0, 0.32) !important; }

/* =========================================================
   SEITENLEISTE – dunkles Glas, rot glühender aktiver Punkt
   ========================================================= */
.pf-v5-c-page__sidebar {
  background: var(--fw-glass) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  border-right: 1px solid var(--fw-line) !important;
}
.pf-v5-c-nav__link {
  color: var(--fw-dim) !important;
  font-weight: 500 !important;
  margin-right: 10px;
  border-radius: 0 10px 10px 0;
}
.pf-v5-c-nav__link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item .pf-m-current > .pf-v5-c-nav__link {
  color: #fff !important;
  font-weight: 600 !important;
  background: linear-gradient(90deg, rgba(200, 16, 46, 0.45), rgba(200, 16, 46, 0.08)) !important;
  box-shadow: inset 3px 0 0 0 var(--fw-red), 0 0 22px rgba(200, 16, 46, 0.25) !important;
}
.pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__link.pf-m-current::after { border-color: var(--fw-red) !important; }

/* =========================================================
   INHALT – schwebende Glas-Karten
   ========================================================= */
.pf-v5-c-page__main { background: transparent !important; }
.pf-v5-c-page__main-section {
  position: relative;
  background: linear-gradient(155deg, rgba(24, 38, 60, 0.80), rgba(12, 22, 38, 0.82)) !important;
  border: 1px solid var(--fw-line) !important;
  border-top: 1px solid var(--fw-line-top) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  margin: 16px !important;
}

/* Überschriften + roter Akzent-Balken */
.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-title {
  color: var(--fw-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}
.pf-v5-c-content h2,
.pf-v5-c-title.pf-m-xl,
.pf-v5-c-title.pf-m-2xl {
  position: relative;
  padding-left: 14px;
}
.pf-v5-c-content h2::before,
.pf-v5-c-title.pf-m-xl::before,
.pf-v5-c-title.pf-m-2xl::before {
  content: "";
  position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--fw-red), var(--fw-red-dark));
  box-shadow: 0 0 12px rgba(200, 16, 46, 0.5);
}

/* Labels + Hilfetexte */
.pf-v5-c-form__label-text {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fw-dim) !important;
}
.pf-v5-c-form__helper-text,
.pf-v5-c-content p,
.pf-v5-c-content small { color: var(--fw-dim) !important; }

/* =========================================================
   EINGABEFELDER – Glas, abgerundet, roter Fokus-Glow
   ========================================================= */
.pf-v5-c-form-control,
.pf-v5-c-form-control input,
input.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control select,
.pf-v5-c-menu-toggle {
  background: rgba(6, 12, 22, 0.60) !important;
  color: #fff !important;
  border: 1px solid var(--fw-line) !important;
  border-radius: 12px !important;
}
.pf-v5-c-form-control::after,
.pf-v5-c-form-control::before { border: 0 !important; }
.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control input:focus,
input.pf-v5-c-form-control:focus {
  border-color: var(--fw-red) !important;
  box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.20), 0 0 22px rgba(200, 16, 46, 0.18) !important;
  outline: none !important;
}
.pf-v5-c-form-control.pf-m-readonly,
input.pf-v5-c-form-control[readonly] {
  background: rgba(6, 12, 22, 0.38) !important;
  color: var(--fw-dim) !important;
}

/* =========================================================
   BUTTONS – roter Verlauf, Pille, Hover-Lift + Glow
   ========================================================= */
.pf-v5-c-button.pf-m-primary {
  background: linear-gradient(180deg, var(--fw-red-bright), var(--fw-red-dark)) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding-inline: 28px !important;
  box-shadow: 0 12px 26px rgba(200, 16, 46, 0.35) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.pf-v5-c-button.pf-m-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(200, 16, 46, 0.45), 0 0 26px rgba(40, 160, 255, 0.25) !important;
}
.pf-v5-c-button.pf-m-link { color: #ff8aa0 !important; }
.pf-v5-c-button.pf-m-link:hover { color: #fff !important; }
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--fw-line) !important;
  color: var(--fw-text) !important;
  border-radius: 999px !important;
}

/* =========================================================
   "Zu Abschnitt springen" + Dropdown-Menüs
   ========================================================= */
.pf-v5-c-jump-links__link-text { color: var(--fw-dim) !important; }
.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link-text { color: #fff !important; }
.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link { border-color: var(--fw-red) !important; }

.pf-v5-c-menu {
  background: rgba(18, 30, 48, 0.98) !important;
  border: 1px solid var(--fw-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}
.pf-v5-c-menu__item:hover,
.pf-v5-c-menu__list-item:hover { background: rgba(200, 16, 46, 0.16) !important; }
.pf-v5-c-menu__item-text { color: var(--fw-text) !important; }

/* Fokus-Ringe in FW-Rot */
*:focus-visible { outline-color: var(--fw-red) !important; }