/**
 * idf-app-header — App-Header für apps-v2
 *
 * Markup: `_shared/blocks/app-header/idf-app-header.php`
 * Voraussetzung: `_shared/tokens/design-tokens/idf-tokens.css` ist vorher geladen.
 *
 * Schlanker Header oben in der App: Modul-Titel links, Datum +
 * Autosave-Badge rechts. Logo, User-Profil und Logout liegen in
 * der Sidebar (`_shared/blocks/app-sidebar/`).
 *
 * Smoke-Test-Vorgaben (Issue #56):
 *   - App-Headline 28 px, Body-Schrift 16 px
 *   - Alle Texte var(--ink) — kein Soft-Braun mehr
 *   - Konsequent v2-Tokens (keine Magic-Werte)
 */

.idf-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6, 24px);
  padding: var(--space-6, 24px) var(--space-8, 32px) var(--space-5, 20px);
  background: var(--white, #fff);
  border-bottom: 1px solid var(--line, #e5e5e5);
}

.idf-app-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  min-width: 0;
  /* v2 (2026-05): flex-grow, damit Module mit Inhalt im extraLeft-Slot
     (z.B. Protokoll-Editor mit inline-editierbarem Sitzungs-Titel) den
     verfügbaren Platz bis zum Status-Block rechts ausnutzen. Right ist
     fix (Datum + Autosave-Badge), wird durch space-between an den Rand
     geschoben. */
  flex: 1 1 auto;
}

.idf-app-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
}

.idf-app-header-title {
  margin: 0;
  /* 28 px — größer als der v1-Header (24 px). Token siehe _shared/tokens/design-tokens/. */
  font-size: var(--font-xxl, 1.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: -0.02em;
  color: var(--ink, #111);
  line-height: var(--leading-snug, 1.2);
}

/* Optionale Zurueck-Pille (Detail-/Editor-Seiten): via $appBack im Header,
   sitzt als erstes Element links vor dem Titel -> „<- Titel / ...". */
.idf-app-header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--mid, #555);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.idf-app-header-back:hover { background: var(--bg-hover, #f8f8f8); color: var(--ink, #111); }

.idf-app-header-date {
  font-size: var(--font-base, 1rem);
  font-weight: var(--weight-regular, 400);
  color: var(--ink, #111);
  line-height: var(--leading-tight, 1);
}

/* Badge-Slot: konstanter Platz für das Autosave-Badge links neben dem
   Datum, damit das Datum nicht springt wenn das Badge zwischen
   display:none / "Änderungen" / "Gespeichert" wechselt (3 unterschiedlich
   breite Zustände). Slot ist rechtsbündig — Badge sitzt direkt am
   Datum. min-width grob bemessen am breitesten Wort ("Gespeichert"). */
.idf-app-header-badge-slot {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 130px;
}

.idf-app-header-badge {
  /* Eigene Sizing-Defaults für v2 — die alte .autosave-badge-Klasse aus
     idf-core.css ist auf Mini-Schrift / Soft-Farbe gestylt. */
  font-size: var(--font-md, 0.875rem);
  font-weight: var(--weight-medium, 500);
  color: var(--ink, #111);
}

@media (max-width: 720px) {
  .idf-app-header {
    padding: var(--space-4, 16px) var(--space-4, 16px);
  }
  .idf-app-header-title {
    font-size: var(--font-lg, 1.125rem);
  }
  .idf-app-header-date {
    font-size: var(--font-md, 0.875rem);
  }
}