/* FORT.SCHRITT – Gemeinsames App-Layout
   Laden nach app-spezifischem CSS                          */

/* ── App-Header / Topbar ─────────────────────────────────── */
.app-header,
.header,
.topbar {
  background: white;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 200;
  flex-shrink: 0;
  border-bottom: 1px solid #e2e2e0;
  border-top: 3px solid var(--color-primary, #FF6900);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.04);
}

/* Titeltext in der Kopfzeile: orange */
.header .htitle,
.header-title,
.topbar-title {
  color: var(--color-primary, #FF6900);
  font-weight: 700;
}

/* Buttons in der Kopfzeile: dunkel */
.app-header .btn,
.header .btn,
.topbar .btn,
.logout-btn {
  background: var(--color-dark, #373A36);
  color: white;
  border: none;
}

/* ── Haupt-Inhaltsbereich (App-Content neben der Sidebar) ──────────────────
   UI/UX-Interaktionsstandard Phase 7 (21.08.2026, Entscheidung F1: "alles
   identisch angleichen, wenn danach Änderungen kommen sind diese für alle
   gleich") - der Innenabstand des scrollbaren Hauptbereichs jeder App war
   bisher app-lokal dupliziert (die meisten bereits mit diesem Wert, zwei
   Apps mit abweichendem Wert 28px 32px 48px). Jetzt hier zentral verankert,
   lokale Dopplungen wurden entfernt. Andere lokale Eigenschaften derselben
   Regel (max-width, background, overflow-y/-x, min-width, grid-row, flex
   etc.) bleiben bewusst App-lokal bestehen, nur das Padding kommt von hier.
   Gilt NICHT für den Hub-Root (index.php/admin_*.php/ticketsystem.php) -
   der ist strukturell bewusst anders (zentrierter max-width-Container statt
   voller Breite wie die Apps), siehe Root-CLAUDE.md "Zentrales UI-
   Stylesheet". */
.main-content,
.main {
  padding: 24px 28px;
}

/* ── Sidebar – weiß ─────────────────────────────────────── */
.sidebar {
  background: white;
  border-right: 1px solid #e2e2e0;
}

/* Logo oben in der Sidebar */
.sidebar-logo {
  padding: 14px 14px 12px;
  border-bottom: 1px solid #e2e2e0;
}
.sidebar-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Nav-Elemente auf weißem Hintergrund ───────────────────
   Aktiver Menüpunkt seit Phase 5 (20.08.2026) als voll gefüllter, vom
   Sidebar-Rand abgesetzter "Pill" statt nur eines duennen linken Rahmen-
   strichs - deutlich sichtbarer, gaengiges Muster moderner Dashboards.
   border-left bleibt strukturell (3px, siehe header-menu.css Basisregel)
   aber durchgehend transparent, dient nur noch als unsichtbarer Abstand. */
.nav-item,
.sidebar-btn {
  color: var(--color-dark, #373A36);
  border-left-color: transparent;
  margin: 2px 10px;
  border-radius: var(--radius-sm, 8px);
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.nav-item:hover,
.sidebar-btn:hover {
  background: rgba(255, 105, 0, 0.07);
  color: var(--color-primary, #FF6900);
}

.nav-item.active,
.sidebar-btn.active {
  background: var(--color-primary, #FF6900);
  color: var(--color-white, #fff);
  font-weight: 700;
}

/* Tastatur-Fokus (12.09.2026, Fund aus der Gehalt&Entwicklung-UI-Sanierung):
   bislang keine eigene Regel hier - der Browser-Standardfokusring (meist
   blau) wirkte auf dem vollflächigen orangen "Pill" optisch wie ein Fremd-
   koerper. Ersetzt ihn projektweit durch einen dezenten, farblich passenden
   Fokusring nach innen (kein zusaetzlicher Platzbedarf, kein Abschneiden am
   Sidebar-Rand) - rein additiv, Accessibility bleibt erhalten. */
.nav-item:focus-visible,
.sidebar-btn:focus-visible {
  outline: 2px solid var(--color-primary, #FF6900);
  outline-offset: -2px;
}
.nav-item.active:focus-visible,
.sidebar-btn.active:focus-visible {
  outline-color: var(--color-white, #fff);
}

/* Abschnitts-Labels in Sidebar */
.sidebar-section,
.nav-group-label {
  color: #888;
  font-weight: 700;
}