/* ============================================================================
   sh-redesign-ed-stepper.css
   REIN OPTISCHES Re-Design des Status-Steppers im Dokument-Editor.
   Gemeinsame Shell von Angebot / Auftrag / Rechnung / Lieferschein / Gutschrift.

   NULL Funktionsaenderung. Additiv. Keine Logik, kein Markup, kein display:none.
   Markup geerbt aus sh-statusbar.js (ShStatusbar.render) — wird im Editor in den
   Host-Container .sh-cp-statusbar (Ids qei- / oei- / iei- / iei-cn-statusbar)
   gerendert:
     .sh-statusbar  >  .sh-statusbar__stage (.is-done / .is-current / .is-cancelled)
                                            >  .sh-statusbar__num

   Status-Bedeutung (Happy-Path, Reihenfolge bleibt):
     Offen / In Arbeit / Abgeschlossen / Berechnet   (Auftrag)
     draft / approved / issued / paid                (Rechnung)
     Entwurf / Gesendet / Angenommen / Beauftragt    (Angebot)
   Aktive Stufe = accent, erledigte = ok-gruen, kommende = muted. Pfeil/Chevron
   (clip-path aus sh-statusbar.css) bleibt unveraendert — nur Optik wird verfeinert.

   Scope strikt: ALLE Regeln haengen an .sh-cp-statusbar (= Editor-Stepper-Host),
   damit weder die globale Basis noch die eng gescopten Finance- bzw. Invoices-
   Varianten (#dunning-statusbar / .iei-editor-container) beruehrt werden.

   Token-Hygiene: KEINE Stern-Slash-Paare im Kommentartext. Tokens werden im
   Fliesstext einzeln genannt, nie als Liste mit Trennzeichen, die den Kommentar
   vorzeitig schliessen koennte.
   ============================================================================ */

/* --- Lokale warme Tokens, gescoped auf den Editor-Stepper-Host ------------- */
/* Ladereihenfolge-unabhaengig: kein Verlass auf Reihenfolge der sh-redesign-Stufen. */
.sh-cp-statusbar {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-ok: #16A34A;
  --sex-ok-soft: #E6F4EA;
  --sex-honey: #D99A2B;
  --sex-warn: #C7791A;
  --sex-info: #2F6BD6;

  --sex-bg: #FAF6F2;
  --sex-surface: #FFFFFF;
  --sex-surf-2: #F6F1EB;
  --sex-surf-3: #EFE8E0;
  --sex-ink: #231C17;
  --sex-text: #463D35;
  --sex-text-2: #6B6157;
  --sex-muted: #9A8F84;
  --sex-border: #EEE5DC;
  --sex-border-2: #E3D9CE;

  --sex-shadow: 0 6px 20px rgba(120, 80, 50, .07);
  --sex-r-pill: 9px;

  --sex-font-num: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-text: 'Figtree', system-ui, sans-serif;
}

[data-theme="dark"] .sh-cp-statusbar {
  --sex-accent: #F2543B;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #3A211A;
  --sex-ok: #34C36A;
  --sex-ok-soft: #18271D;
  --sex-honey: #D99A2B;
  --sex-warn: #C7791A;
  --sex-info: #5C8DE8;

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2A241E;
  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B7ABA0;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A322B;

  --sex-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

/* --- Host-Rahmen: dezente warme Flaeche unter der Toolbar ------------------ */
.sh-cp-statusbar {
  padding: .7rem .85rem .15rem;
}
.sh-cp-statusbar .sh-statusbar {
  margin: 0 0 .55rem;
  gap: 0;
  font-family: var(--sex-font-text);
  letter-spacing: .005em;
}

/* --- Einzelstufe: warme Grundflaeche, kommende Stufen = muted -------------- */
/* Chevron-Form (clip-path) aus sh-statusbar.css bleibt unveraendert. */
.sh-cp-statusbar .sh-statusbar__stage {
  background: var(--sex-surf-2);
  color: var(--sex-muted);
  font-weight: 600;
  font-size: .8rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  transition: background .16s ease, color .16s ease;
}

/* --- Erledigte Stufen: ruhiges Gruen -------------------------------------- */
.sh-cp-statusbar .sh-statusbar__stage.is-done {
  background: var(--sex-ok-soft);
  color: var(--sex-ok);
}

/* --- Aktive Stufe: warmer Akzent, sanft hervorgehoben --------------------- */
.sh-cp-statusbar .sh-statusbar__stage.is-current {
  background: var(--sex-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sex-shadow);
}

/* --- Negativer Endzustand (storniert / abgelehnt) ------------------------- */
.sh-cp-statusbar .sh-statusbar__stage.is-cancelled {
  background: var(--sex-accent-soft);
  color: var(--sex-accent-700);
}
.sh-cp-statusbar .sh-statusbar__stage.is-current.is-cancelled {
  background: var(--sex-accent-700);
  color: #fff;
}

/* --- Nummern-Bubble: warme Plakette mit Mono-anmutender Ziffer ------------- */
.sh-cp-statusbar .sh-statusbar__num {
  width: 1.15rem;
  height: 1.15rem;
  margin-right: .45rem;
  font-family: var(--sex-font-num);
  font-weight: 600;
  font-size: .66rem;
  background: rgba(120, 80, 50, .12);
  color: inherit;
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar__num {
  background: rgba(255, 255, 255, .12);
}

/* Erledigte Stufe: Bubble traegt das Gruen mit. */
.sh-cp-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  background: rgba(22, 163, 74, .16);
  color: var(--sex-ok);
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  background: rgba(52, 195, 106, .20);
}

/* Aktive Stufe: helle Bubble auf Akzent. */
.sh-cp-statusbar .sh-statusbar__stage.is-current .sh-statusbar__num {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}

/* Negativer Endzustand: Bubble in der Akzentfamilie. */
.sh-cp-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num {
  background: rgba(231, 61, 37, .18);
  color: var(--sex-accent-700);
}
.sh-cp-statusbar .sh-statusbar__stage.is-current.is-cancelled .sh-statusbar__num {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}

/* Der Haken der erledigten Stufe (content via ::after in sh-statusbar.css)
   erbt jetzt das Gruen sauber ueber color:inherit der Bubble. */

/* --- Mobile-Feinschliff (Basis-Datei bricht bereits um) ------------------- */
@media (max-width: 640px) {
  .sh-cp-statusbar { padding: .55rem .6rem .1rem; }
  .sh-cp-statusbar .sh-statusbar__stage { font-size: .74rem; }
  .sh-cp-statusbar .sh-statusbar__num {
    width: 1.05rem;
    height: 1.05rem;
    margin-right: .35rem;
  }
}