/* =============================================================
   header-responsive.css — Stufenweises Einklappen des App-Headers

   Das feste 3-Spalten-Grid aus base.css trägt nur bis ca. 1500px: darunter
   reicht der Platz für den linken Block (Logo + Bibliothek + Studio +
   Play-Name) nicht mehr, der Grid-Track schrumpft auf 0 und die Buttons mit
   flex-shrink:0 laufen über ihn hinaus — sie überlappen dann sichtbar die
   mittleren und rechten Buttons. Auf iPad (1024 hoch / 1366 quer) ist das
   besonders schlimm, betrifft aber genauso 1280–1440px-Laptops.

   Lösung in zwei Stufen, ohne Funktionsverlust:
     ≤1500px  Grid → Flex (echtes Schrumpfen statt Überlauf), Logo-Schriftzug
              und Mittel-Labels weg, sekundäre Bedienelemente (Theme, Sprache,
              Vergleichen, Plan/Upgrade) klappen ins „Weitere Optionen"-Menü.
     ≤900px   Bibliothek/Studio/Speichern nur noch als Icon, Play-Name
              schrumpft mit.
   Die Handy-Stufe (≤700px) liegt weiterhin in editor-responsive.css.
   ============================================================= */

/* ── Das ausklappbare Paket sekundärer Bedienelemente ───────────
   Breite Schirme: display:contents — die Kinder liegen optisch direkt in der
   Header-Leiste, als gäbe es den Wrapper nicht. Der Toggle bleibt unsichtbar. */
.header-pack-wrap {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.header-pack { display: contents; }
.header-pack-toggle { display: none; }

/* ── Stufe 1: Kompakt (≤1500px) ─────────────────────────────── */
@media (max-width: 1500px) {
  /* Grid → Flex: der linke Block darf jetzt wirklich schrumpfen. */
  #app-header {
    display: flex; align-items: center;
    grid-template-columns: none;
    gap: 8px; padding: 0 10px;
  }
  .header-left    { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  /* min-width bleibt bewusst auf `auto` (= Inhaltsbreite): die Mitte enthält
     nur nicht-schrumpfbare Icon-Buttons. Dürfte sie kleiner werden als ihr
     Inhalt, ragten die Buttons aus ihrer Box heraus und überlappten die
     Nachbarn — genau der Fehler, den diese Datei beheben soll. Geschrumpft
     wird links (dort gibt das Namensfeld nach). */
  .header-center  { flex: 1 1 auto; justify-content: center; }
  .header-actions { flex: 0 0 auto; }

  /* Der Play-Name gibt als Erstes nach, statt alles andere zu verdrängen. */
  #play-name-input { flex: 0 1 200px; min-width: 70px; width: auto; }

  /* Platz sparen: Logo-Schriftzug und Labels der Mittel-Buttons weg. */
  .logo-text { display: none; }
  .header-center .btn span { display: none; }
  .header-center .btn { min-width: 32px; padding-inline: 9px; }

  /* Sekundäres klappt ins Menü. */
  .header-pack-toggle { display: inline-flex; }
  .header-pack-toggle[aria-expanded="true"] { color: var(--brand); background: var(--brand-glow); }
  .header-pack {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    display: flex; flex-direction: column; align-items: stretch; gap: 5px;
    min-width: 200px; padding: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
  }
  .header-pack[hidden] { display: none; }
  /* Im Menü sind alle Einträge volle Zeilen mit sichtbarer Beschriftung —
     auch wenn eine engere Stufe die Labels in der Leiste ausblendet. */
  .header-pack .btn { width: 100%; justify-content: flex-start; }
  .header-pack .btn.btn-icon { width: 100%; height: auto; padding: 6px 10px; }
  .header-pack .btn span { display: inline !important; }
  .header-pack .lang-switcher { justify-content: center; }
  .header-pack .lang-btn { flex: 1; padding: 6px 7px; }
  .header-pack .plan-badge { align-self: flex-start; margin: 2px 0 0 4px; }
  /* Der Theme-Button hat keine Beschriftung — im Menü braucht er eine. */
  .header-pack #btn-theme::after {
    content: "Hell / Dunkel";
    font-size: 14px; font-weight: 500; color: var(--text-secondary);
  }
}

/* ── Stufe 2: Eng (≤900px) ──────────────────────────────────── */
@media (max-width: 900px) {
  /* Bibliothek / Studio / Speichern nur noch als Icon — die Beschriftung
     kostet zusammen ~185px, die hier fehlen. Titel-Attribute bleiben. */
  .header-pb-prominent span,
  #btn-save span { display: none; }
  .header-pb-prominent { padding: 6px 9px; }
  #btn-save { padding-inline: 9px; }
  /* Kleine Basis, nicht nur kleines Minimum: beim Zeilenumbruch rechnet Flexbox
     mit der Basis, nicht mit der geschrumpften Breite. Mit 200px Basis wäre die
     Leiste umgebrochen, obwohl sie geschrumpft in eine Zeile gepasst hätte. */
  #play-name-input { flex: 0 1 90px; }

  /* Notausgang: reicht es trotzdem nicht (iPad mini hochkant, 744px, mit den
     vergrößerten Touch-Zielen aus touch.css), bricht die Leiste um, statt die
     Buttons übereinander zu schieben. Zwei Zeilen sind unschön, Überlappung
     ist kaputt. */
  #app-header {
    flex-wrap: wrap;
    height: auto; min-height: var(--header-h);
    gap: 4px 6px; padding: 4px 8px;
  }
}

/* Auf Grob-Zeigern sind die Buttons per touch.css 40px statt 30px — bei
   744–834px Breite sprengt das die Leiste. Dort reichen 36px: immer noch
   deutlich fingerfreundlicher als 30px, aber schmal genug für eine Zeile. */
@media (max-width: 900px) and (pointer: coarse) {
  .btn-icon,
  .header-new-play-btn { width: 36px; height: 36px; }
  .btn { padding: 7px 11px; }
  .header-pb-prominent { padding: 7px 8px; }
}

/* ── Hinweis „Nicht gesichert" ──────────────────────────────────
   Erscheint, wenn Änderungen nur lokal liegen (kein Netz). Bleibt stehen, bis
   die Outbox durchgelaufen ist — anders als ein Toast, der genau dann weg ist,
   wenn man ihn brauchen würde. */
.sync-pending-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  flex-shrink: 0;
}
.sync-pending-badge[hidden] { display: none; }
/* Ab der Kompakt-Stufe nur noch das Symbol — der Text kostet zu viel Breite. */
@media (max-width: 1500px) {
  .sync-pending-badge span { display: none; }
  .sync-pending-badge { padding: 5px 7px; }
}