/* FORT.SCHRITT – Einheitliche Kopf- und Menueleiste (zentrale Komponente)
   Laden nach brand.css/layout.css/components.css, vor app-eigenem CSS.
   Setzt auf .header/.topbar/.app-header und .nav-item/.sidebar-btn aus
   layout.css auf (Basis-Optik dort, hier nur Ergaenzungen). Siehe
   Anforderungsbeschreibungen/Analyse_Einheitliche_Kopf_und_Menueleiste.txt. */

/* ── Kopfzeile: Bausteine, die layout.css nicht abdeckt ────────────── */
.fs-header { gap: 14px; }

/* Logo + Trennstrich als ein Block, dessen Breite per JS (alignLogoBlock())
   auf die Breite der Sidebar ausgerichtet wird (rechter Rand Trennstrich =
   rechter Rand Menueleiste). margin-left:auto auf den Trenner sorgt dafuer,
   dass er sich an den rechten Rand dieses Blocks schiebt, sobald die Breite
   gesetzt ist - ohne gesetzte Breite (z.B. Hub-Startseite ohne Sidebar)
   bleibt er direkt am Logo, kein Sonderfall noetig. */
.fs-header .fs-logo-block { display: flex; align-items: center; flex-shrink: 0; }
.fs-header .fs-logo { height: 20px; margin-right: 6px; flex-shrink: 0; }
.fs-logo-sep { margin-left: auto; color: #ccc; flex-shrink: 0; }

.fs-header .topbar-title,
.fs-header .htitle,
.fs-header .header-title { font-size: 16px; white-space: nowrap; }

.fs-subtitle { font-size: 11px; color: #888; white-space: nowrap; flex-shrink: 0; }

.fs-page-sep { color: #ccc; flex-shrink: 0; }
.fs-page-name { font-size: 15px; font-weight: 700; color: var(--color-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fs-header .hub-back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-dark); color: #fff; text-decoration: none;
  padding: 5px 11px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; transition: background .15s; flex-shrink: 0;
}
.fs-header .hub-back-btn:hover { background: var(--color-primary); }

/* Hilfe-Button: gleiches Layout wie hub-back-btn (Klasse geteilt), aber
   <button> statt <a> (oeffnet ein Modal/Callback, keine Navigation) -
   deshalb Browser-Button-Chrome zuruecksetzen. */
.fs-header .fs-help-btn { border: none; font: inherit; cursor: pointer; }

/* Name/Rolle + Abmelden - nur wenn cfg.user/cfg.logoutHref gesetzt sind
   (bisher nur vom Hub genutzt). Rolle nutzt das zentrale .badge-Vokabular,
   kein eigenes. */
.fs-user-info {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 13px; color: var(--color-dark);
}

.fs-spacer { flex: 1; }

.fs-date { font-size: 12px; color: #888; white-space: nowrap; flex-shrink: 0; }

/* ── Glocke (Hinweise/Warnungen) – Referenz: budgetcockpit/hinweis-* ── */
.fs-bell-wrap { position: relative; flex-shrink: 0; }
.fs-bell {
  position: relative; background: none; border: none; cursor: pointer;
  font-size: 18px; padding: 5px 8px; border-radius: var(--radius-sm); line-height: 1;
  color: #9a9a96; transition: background .15s;
}
.fs-bell:hover { background: var(--color-light); }
.fs-bell-badge {
  position: absolute; top: -2px; right: 0; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1; min-width: 15px;
  height: 15px; border-radius: 20px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 3px;
  background: #e67e22;
}
.fs-bell-panel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-height: 420px; overflow-y: auto; background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover);
  border: 1px solid #e2e2e0; z-index: 300;
}
.fs-bell-panel.active { display: block; }
.fs-bell-panel-title {
  padding: 12px 16px; font-size: 12px; font-weight: 700; color: var(--color-dark);
  border-bottom: 1px solid #e2e2e0; text-transform: uppercase; letter-spacing: .04em;
}
.fs-bell-item {
  display: block; width: 100%; text-align: left; padding: 11px 16px;
  border: none; background: none; cursor: pointer; border-bottom: 1px solid #e2e2e0;
  font-size: 12px; color: var(--color-dark); transition: background-color .12s ease;
}
.fs-bell-item:last-child { border-bottom: none; }
.fs-bell-item:hover { background: var(--color-light); }
.fs-bell-item-title { font-weight: 700; display: flex; align-items: center; gap: 5px; }
.fs-bell-item--warnung .fs-bell-item-title { color: #e67e22; }
.fs-bell-item--hinweis .fs-bell-item-title { color: #2980b9; }
.fs-bell-item-sub { color: #888; margin-top: 2px; }
.fs-bell-item-date { color: #aaa; margin-top: 3px; font-size: 11px; }
.fs-bell-empty { padding: 20px 16px; text-align: center; color: #888; font-size: 12px; }

/* ── Mail-Testmodus-Anzeige/-Umschalter (Auftrag 31.08.2026) ─────────────
   Fuer Admins IMMER sichtbar (beide Zustaende), fuer alle anderen Nutzer nur
   bei aktivem Testmodus (siehe checkMailTestmodus() in header-menu.js). */
.fs-mail-testmodus-wrap { position: relative; flex-shrink: 0; }
#fs-mail-testmodus-badge { cursor: default; }
#fs-mail-testmodus-badge.fs-mail-testmodus-badge--clickable { cursor: pointer; }
#fs-mail-testmodus-badge.fs-mail-testmodus-badge--off {
  background: var(--color-light); color: #9a9a96; border: 1px solid #e2e2e0;
}
.fs-mail-testmodus-popup {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 300px; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover); border: 1px solid #e2e2e0; z-index: 300;
  padding: 14px 16px;
}
.fs-mail-testmodus-popup.active { display: block; }
.fs-mail-testmodus-popup-text { font-size: 12px; color: var(--color-dark); line-height: 1.5; margin-bottom: 12px; }
.fs-mail-testmodus-popup-actions { display: flex; justify-content: flex-end; gap: 8px; }
.fs-mail-testmodus-popup-actions .hub-back-btn { font-size: 11px; }
.fs-mail-testmodus-btn--cancel { background: #9a9a96; }
.fs-mail-testmodus-btn--cancel:hover { background: #7d7d79; }
.fs-mail-testmodus-btn--danger { background: #c0392b; }
.fs-mail-testmodus-btn--danger:hover { background: #a5301f; }

/* ── Menueleiste ──────────────────────────────────────────────────────
   layout.css liefert fuer .nav-item/.sidebar-btn nur die Farben
   (Hover/Active) - das Struktur-Layout (Padding/Flex/Rahmen) lag bisher
   in jeder App lokal und wandert hier zentral in die Komponente. */
.fs-sidebar .nav-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  border-left: 3px solid transparent; transition: all .15s;
  user-select: none; text-decoration: none;
}
.fs-sidebar .nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

.fs-nav-group-label {
  padding: 10px 18px 4px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; color: #888; font-weight: 700;
}
.fs-nav-section-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 700; color: #888; cursor: pointer;
  user-select: none; transition: color .15s;
}
.fs-nav-section-hdr:hover { color: var(--color-primary); }
.fs-nav-arrow {
  color: var(--color-primary); font-size: 16px; flex-shrink: 0;
  transition: transform .2s; display: inline-block; transform: rotate(0deg);
}
.fs-nav-section-hdr.open .fs-nav-arrow { transform: rotate(90deg); }
.fs-nav-group-body { display: none; }
.fs-nav-group-body.open { display: block; }
.fs-nav-sub { padding-left: 30px !important; }