/* ════════════════════════════════════════════════════════════════
 * formstube · Controlling · fs-editor-bar.css
 * ════════════════════════════════════════════════════════════════
 * Mobile-Editor-Top-Bar im App-Feel.
 * Aktiv auf Mobile (<=720px) ODER body.is-pwa,
 * UND nur wenn body.has-editor-bar (von PHP-Snippet gesetzt).
 *
 * Marc-Iter 2 (2026-05-23):
 *  - position:sticky → position:fixed (sticky war nicht zuverlässig
 *    weil das page-head darüber den Sticky-Anker schluckte)
 *  - Summe in Mona Sans Display-Font (wdth 125, wght 900)
 *  - Page-Head komplett ausblenden auf Mobile (Doc-Nummer + Status
 *    sind in der Bar · keine Doppelinfo)
 *  - WYSIWYG-Toggle + KI-Drafting-Card kollabiert (App-Feel)
 *  - Sekundäre Cards (Mail-Versand, Footer-Text, Annahme-Modus) als
 *    Akkordeon mit Tap-to-Expand
 * ════════════════════════════════════════════════════════════════ */

/* Default: hidden · CSS-Aktivierung über Media-Query + body-class */
.fs-edit-bar { display: none; }

/* Helper: Mobile-Editor-Mode */
@media (max-width: 720px) {

  /* ─── Body pusht runter damit Inhalt nicht hinter der Bar ────── */
  body.has-editor-bar {
    padding-top: calc(64px + env(safe-area-inset-top));
  }

  /* ─── Die Bar selbst · FIXED, nicht sticky ──────────────────── */
  body.has-editor-bar .fs-edit-bar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 70;             /* über Page, unter Modals (9999), unter FAB-Menu (9500) */
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
    height: calc(64px + env(safe-area-inset-top));
    background: rgba(20, 21, 26, 0.96);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(216, 255, 60, 0.18);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }

  /* ─── Top-Nav (Burger + Logo) auf Editor-Pages verstecken ────
     Die Edit-Bar übernimmt die ganze Header-Funktion · saubereres Layout */
  body.has-editor-bar .nav,
  body.has-editor-bar header.site-header {
    display: none;
  }

  /* ─── Page-Head (große H1 + Eyebrow) auf Mobile verstecken ──
     Doc-Nummer + Status sind in der Bar · keine Doppelinfo */
  body.has-editor-bar .page-head {
    display: none !important;
  }

  /* ─── WYSIWYG-Toggle + KI-Drafting-Card auf Mobile aus ─────
     Im App-Modus brauchst du diese nur am Desktop · weniger Lärm */
  body.has-editor-bar .wysiwyg-toggle,
  body.has-editor-bar [data-mobile-hide],
  body.has-editor-bar .ki-drafting-card {
    display: none !important;
  }

  /* ─── Container kompakter auf Mobile ──────────────────────── */
  body.has-editor-bar main,
  body.has-editor-bar .container {
    padding-left: 0;
    padding-right: 0;
  }
  body.has-editor-bar .container > .card {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 18px 16px;
  }
  body.has-editor-bar .card-head { margin-bottom: 10px; }
  body.has-editor-bar .card-title {
    font-size: 1.15rem;
  }

  /* ─── Bottom-Padding für Tab-Bar + Save-Button etc. ────── */
  body.has-editor-bar {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* ─── PWA-Standalone auf Desktop: KEINE Mobile-Edit-Bar ──
   Marc-Bug 2026-05-23: vorher zeigte body.is-pwa die Edit-Bar
   auch auf Desktop-Width + versteckte den Desktop-Nav-Header.
   Mobile-UI gehört strikt an Viewport <=720px, nicht an PWA-
   Standalone-Mode. Desktop bleibt unangetastet. */

/* ─── Back-Button (Pfeil zurück zur Liste) ─── */
.fs-edit-bar-back {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  color: var(--paper, #F0F0F0);
  text-decoration: none;
  font-size: 26px;
  line-height: 1;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.fs-edit-bar-back:active { opacity: 0.5; }

/* ─── Meta-Block: Doc-Nummer + Live-Total ─── */
.fs-edit-bar-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.fs-edit-bar-num {
  font-family: 'Geist Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone, #888);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fs-edit-bar-total {
  /* Display-Font · wie Hero-Headlines · Marc-Wunsch */
  font-family: 'Mona Sans', sans-serif;
  font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: 1.42rem;
  letter-spacing: -0.025em;
  color: var(--paper, #F0F0F0);
  line-height: 1.0;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.fs-edit-bar-total .euro {
  color: var(--stone, #888);
  font-weight: 500;
  font-size: 0.92rem;
  font-variation-settings: 'wdth' 100;
}
.fs-edit-bar-total .num.changed {
  color: var(--accent, #D8FF3C);
  transition: color 1.2s;
}

/* ─── Save-Button (Lime, prominent) ─── */
.fs-edit-bar-save {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--accent, #D8FF3C);
  color: var(--ink, #0A0A0C);
  border: 0;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, transform 0.15s;
}
.fs-edit-bar-save:active {
  transform: scale(0.96);
  opacity: 0.9;
}
.fs-edit-bar-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fs-edit-bar-save.is-saving {
  background: var(--graphite, #2A2C30);
  color: var(--stone, #888);
}
.fs-edit-bar-save-icon {
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.fs-edit-bar-save-label {
  font-size: 0.78rem;
}

/* ─── Sekundäre Sektionen-Akkordeon auf Mobile ──────────────
   Cards mit data-mobile-collapse werden auf Mobile per Default
   kollabiert dargestellt · Tap auf Head expandet. Brand-konformes
   Hex-Marker als visueller Hint. */
@media (max-width: 720px) {
  body.has-editor-bar .card[data-mobile-collapse]:not(.is-open) > *:not(.card-head) {
    display: none;
  }
  body.has-editor-bar .card[data-mobile-collapse] > .card-head {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
    padding: 4px 0;
  }
  body.has-editor-bar .card[data-mobile-collapse] > .card-head::after {
    content: '▾';
    color: var(--accent);
    font-family: 'Geist Mono', monospace;
    font-size: 0.9rem;
    transition: transform 0.2s;
  }
  body.has-editor-bar .card[data-mobile-collapse].is-open > .card-head::after {
    transform: rotate(180deg);
  }
  body.has-editor-bar .card[data-mobile-collapse].is-open {
    padding-bottom: 18px;
  }
}