/* ============================================================================
   sh-rd-ed-stepper-flat.css
   REIN OPTISCHES Re-Design des Status-Steppers im Dokument-Editor.
   Bereich: ed-stepper-flat.

   ZIEL: Status-Stepper als FLACHE nummerierte Schritte mit Verbindungslinie
   statt Chevron / Pfeil. Erledigt = gruener Kreis mit Haekchen, aktuell =
   Akzent-gefuellter Kreis mit Nummer, kommend = grauer Kreis.

   NULL Funktionsaenderung. Additiv. Keine Logik, kein Markup, kein display:none.
   Keine Felder / Endpunkte / Routen / Events / Status / Rechte beruehrt.

   Markup geerbt aus sh-statusbar.js (ShStatusbar.render) — Host-Container ist
   .sh-cp-statusbar (Ids oei- / qei- / iei- / iei-cn-statusbar):
     .sh-statusbar  >  .sh-statusbar__stage (.is-done / .is-current / .is-cancelled)
                                            >  .sh-statusbar__num  +  Label-Text

   VORGEHEN: Die Chevron-Form (clip-path-Pfeil + negatives margin-right) aus
   sh-statusbar.css wird optisch entfernt; die Stufe wird zur flachen Pille,
   die Nummern-Bubble zum runden Kreis, dazwischen liegt eine Verbindungslinie.
   Reihenfolge der Stufen bleibt unveraendert.

   SCOPE strikt: ALLE Regeln haengen am Editor-Stepper-Host .sh-cp-statusbar.
   Die globale sh-statusbar.css (z. B. Finance-/Dunning-Statusbar ohne diesen
   Host) bleibt unberuehrt. Hoehere Spezifitaet (drei Klassen-Selektoren) sorgt
   dafuer, dass diese flache Variante unabhaengig von der Ladereihenfolge die
   Chevron-Optik der Basis und die vorhandene Recolor-Schicht ueberschreibt.

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

/* --- Lokale warme Tokens, gescoped auf den Editor-Stepper-Host --------------
   Ladereihenfolge-unabhaengig: kein Verlass auf vererbte sh-redesign-Tokens. */
.sh-cp-statusbar {
  --rd-accent: #E73D25;
  --rd-accent-700: #C5331E;
  --rd-accent-soft: #FCEDE7;
  --rd-honey: #D99A2B;
  --rd-ok: #16A34A;
  --rd-ok-soft: #E9F8EF;
  --rd-warn: #C7791A;
  --rd-info: #2F6BD6;
  --rd-violet: #7C5BD6;

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

  --rd-r-pill: 999px;
  --rd-shadow: 0 6px 20px rgba(120, 80, 50, .07);
  --rd-shadow-accent: 0 5px 14px rgba(231, 61, 37, .28);

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

  /* Masse fuer Kreis + Linie */
  --rd-dot: 1.7rem;
  --rd-line: var(--rd-border-2);
  --rd-line-done: var(--rd-ok);
}

[data-theme="dark"] .sh-cp-statusbar {
  --rd-accent: #F2543B;
  --rd-accent-700: #E0432B;
  --rd-accent-soft: rgba(242, 84, 59, .16);
  --rd-honey: #E6AE4A;
  --rd-ok: #3BC07A;
  --rd-ok-soft: rgba(59, 192, 122, .15);
  --rd-warn: #E5A33C;
  --rd-info: #5C8FE8;
  --rd-violet: #9D82E6;

  --rd-bg: #15120F;
  --rd-surface: #1E1A16;
  --rd-surf-2: #241F1A;
  --rd-surf-3: #2C2620;
  --rd-ink: #F6F1EC;
  --rd-text: #E2D8CE;
  --rd-text-2: #B3A99E;
  --rd-muted: #8C8175;
  --rd-border: #2E2822;
  --rd-border-2: #3A332B;

  --rd-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  --rd-shadow-accent: 0 5px 14px rgba(242, 84, 59, .30);

  --rd-line: var(--rd-border-2);
  --rd-line-done: var(--rd-ok);
}

/* --- Host-Rahmen: ruhige warme Flaeche unter der Toolbar ------------------- */
.sh-cp-statusbar {
  padding: .8rem .85rem .25rem;
  font-family: var(--rd-font-text);
}

/* Die Statusbar-Reihe selbst: flache Reihe, vertikal mittig ---------------- */
.sh-cp-statusbar .sh-statusbar {
  margin: 0 0 .55rem;
  align-items: center;
  gap: 0;
  font-family: var(--rd-font-text);
  letter-spacing: .005em;
}

/* === Flache Stufe: Chevron-Pfeil aufheben ================================= */
/* Drei Klassen-Selektoren -> hoehere Spezifitaet als Basis und Recolor-Schicht.
   clip-path:none entfernt die Pfeilform; margin/Radius zuruecksetzen.
   Die Stufe wird zur transparenten Zelle, in der Kreis + Linie + Label liegen. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child:last-child {
  clip-path: none;
  -webkit-clip-path: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .25rem 1.15rem .25rem .35rem;
  background: transparent;
  color: var(--rd-muted);
  border-radius: 0;
  font-family: var(--rd-font-text);
  font-weight: 600;
  font-size: .8rem;
  white-space: nowrap;
  transition: color .16s ease;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child { padding-left: .15rem; }
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child  { padding-right: .35rem; }

/* === Verbindungslinie zwischen den Schritten ============================= */
/* Liegt links VOR der Nummern-Bubble und ueberbrueckt den Zwischenraum zur
   vorherigen Stufe. Bei der ersten Stufe ausgeblendet. Erledigte Stufe traegt
   eine gruene Linie, sonst neutrale Border-Farbe. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage::before {
  content: "";
  width: .95rem;
  height: 2px;
  flex: 0 0 auto;
  background: var(--rd-line);
  border-radius: 2px;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child::before {
  display: none;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done::before,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current::before {
  background: var(--rd-line-done);
}

/* === Nummern-Bubble -> runder Kreis ====================================== */
/* Kommend: grauer Ring mit Ziffer. Reset des Basis-Hintergrunds. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage .sh-statusbar__num {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rd-dot);
  height: var(--rd-dot);
  margin: 0;
  border-radius: 50%;
  font-family: var(--rd-font-num);
  font-weight: 600;
  font-size: .72rem;
  line-height: 1;
  background: var(--rd-surf-2);
  color: var(--rd-text-2);
  border: 1.5px solid var(--rd-border-2);
  box-shadow: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

/* Label-Farbe folgt dem Zustand (Stufe traegt color), Bubble ueberschreibt sie. */

/* --- Erledigt: gruener Kreis mit Haekchen --------------------------------- */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done {
  color: var(--rd-ok);
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  background: var(--rd-ok);
  color: #fff;
  border-color: var(--rd-ok);
}
/* Haekchen-Glyph aus sh-statusbar.css (::after content) gross + weiss halten. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  font-size: 0;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num::after {
  content: "\2713";
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* --- Aktuell: Akzent-gefuellter Kreis mit Nummer -------------------------- */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current {
  color: var(--rd-ink);
  font-weight: 700;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current .sh-statusbar__num {
  background: var(--rd-accent);
  color: #fff;
  border-color: var(--rd-accent);
  box-shadow: var(--rd-shadow-accent);
}
/* Sanfter Akzent-Ring um die aktuelle Bubble. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current .sh-statusbar__num::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--rd-accent-soft);
  pointer-events: none;
}

/* --- Negativer Endzustand (storniert / abgelehnt) ------------------------- */
/* Bleibt funktional identisch (gleiche Klassen), optisch in der Akzentfamilie. */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled {
  color: var(--rd-accent-700);
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num {
  background: var(--rd-accent-soft);
  color: var(--rd-accent-700);
  border-color: var(--rd-accent);
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num::after {
  content: none;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current.is-cancelled {
  color: var(--rd-accent-700);
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current.is-cancelled .sh-statusbar__num {
  background: var(--rd-accent-700);
  color: #fff;
  border-color: var(--rd-accent-700);
}

/* --- Mobile-Feinschliff (Basis-Reihe bricht bereits um) ------------------- */
@media (max-width: 640px) {
  .sh-cp-statusbar {
    padding: .6rem .55rem .15rem;
  }
  .sh-cp-statusbar .sh-statusbar {
    flex-wrap: wrap;
    row-gap: .35rem;
  }
  .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage {
    font-size: .74rem;
    padding-right: .85rem;
  }
  .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage {
    --rd-dot: 1.5rem;
  }
  .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage::before {
    width: .6rem;
  }
}