/* sh-statusbar — Odoo-inspirierte Status-Pipeline fuer Beleg-Detailseiten.
   Self-contained, baut auf sh-design-system.css CSS-Variablen. */

.sh-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  font-size: .78rem;
  font-weight: 600;
  user-select: none;
  margin: 0 0 1rem;
}

.sh-statusbar__stage {
  position: relative;
  display: flex;
  align-items: center;
  padding: .45rem 1.1rem .45rem 1.55rem;
  background: var(--sh-surface-2, #eef0f4);
  color: var(--sh-text-muted, #667085);
  white-space: nowrap;
  /* Chevron-Pfeilform wie in Odoo */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
  margin-right: -10px;
}
.sh-statusbar__stage:first-child {
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  padding-left: 1.1rem;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.sh-statusbar__stage:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%);
  margin-right: 0;
  padding-right: 1.2rem;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.sh-statusbar__stage:first-child:last-child { clip-path: none; border-radius: 6px; }

/* Erledigte Schritte */
.sh-statusbar__stage.is-done { background: var(--sh-accent-soft, #e7e0fb); color: var(--sh-accent, #6941c6); }
/* Aktueller Schritt */
.sh-statusbar__stage.is-current { background: var(--sh-accent, #6941c6); color: #fff; }
/* Kommende Schritte: Default (grau) */
/* Storniert/abgelehnt */
.sh-statusbar__stage.is-cancelled { background: var(--sh-danger-soft, #fde7e7); color: var(--sh-danger, #d92d20); }
.sh-statusbar__stage.is-current.is-cancelled { background: var(--sh-danger, #d92d20); color: #fff; }

.sh-statusbar__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; margin-right: .4rem;
  border-radius: 50%; font-size: .68rem;
  background: rgba(0,0,0,.08);
}
.sh-statusbar__stage.is-current .sh-statusbar__num { background: rgba(255,255,255,.25); }
.sh-statusbar__stage.is-done .sh-statusbar__num::after { content: '\2713'; } /* Haken */
.sh-statusbar__stage.is-done .sh-statusbar__num { font-size: 0; }
.sh-statusbar__stage.is-done .sh-statusbar__num::after { font-size: .7rem; }

@media (max-width: 640px) {
  .sh-statusbar { font-size: .72rem; }
  .sh-statusbar__stage { padding: .4rem .7rem .4rem 1.2rem; }
}