/* ============================================================================
   sh-skin-statusbar.css
   ADDITIVE Optik-Schicht — Komponente "statusbar-ribbon".
   Bildet den Pfeil-Ribbon-Look aus dem Odoo-Zielbild (public/_odoo-target-mockup.html
   Sektion 2, .sho-statusbar / .sho-stage) auf die ECHTE App-Statusleiste ab.

   ECHTE Selektoren (verifiziert in sh-statusbar.js -> ShStatusbar.render):
     Host-Container : .sh-cp-statusbar  (Ids oei- / qei- / iei- / iei-cn-statusbar,
                      gesetzt in order-/quote-/invoice-editor-integration.js)
     Reihe          : .sh-statusbar
     Stufe          : .sh-statusbar__stage  (.is-done / .is-current / .is-cancelled)
     Nummer-Bubble  : .sh-statusbar__num

   NULL Funktionsaenderung. Additiv. Kein Markup, kein display:none, kein Layout-
   Teardown. Nur Form (clip-path-Pfeil), Farbe, Rahmen, Radius, Abstand, Typo.

   WARUM DIESES FILE NOETIG IST (Ladereihenfolge + Spezifitaet):
   Drei Stylesheets stapeln sich, das LETZTE gewinnt:
     1. sh-statusbar.css            -> Chevron-Basis (clip-path-Pfeil)
     2. sh-redesign-ed-stepper.css  -> Recolor (warm), Chevron bleibt
     3. sh-rd-ed-stepper-flat.css   -> HEBT den Chevron auf (clip-path:none),
                                       macht flache Pille + runde Dot + Linie ::before.
                                       Selektoren = 3 Klassen, laedt zuletzt -> SIEGT.
   Das Zielbild will aber das CHEVRON-PFEIL-RIBBON. Also muss dieses File die
   Flat-Datei an genau ihren Punkten ueberstimmen: gleiche 3-Klassen-Spezifitaet
   + spaeteres Laden, und die Flat-Verbindungslinie (::before) neutralisieren.

   LADEREIHENFOLGE: Dieses <link> MUSS NACH sh-rd-ed-stepper-flat.css stehen.

   KLICK-AFFORDANZ: sh-odoo-statusbar-click.js markiert klickbare Stufen mit
   [data-sh-clickable="1"] und injiziert cursor:pointer + :hover (Helligkeit +
   Brand-Ring). Dieses File setzt KEIN cursor, KEIN konkurrierendes box-shadow auf
   die Stufe -> Affordanz bleibt intakt.

   Token-Hygiene: keine Stern-Slash-Paare im Kommentar; Tokens einzeln im Text.
   ============================================================================ */

/* ===========================================================================
   1) CHEVRON-FORM WIEDERHERSTELLEN (Flat-Reset rueckgaengig)
   Gleiche 3-Klassen-Spezifitaet wie sh-rd-ed-stepper-flat.css:119-122; laedt
   spaeter -> gewinnt. Stufe wird wieder zur Pfeil-Pille (Mockup .sho-stage).
   =========================================================================== */
.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 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 -9px 0 0;
  padding: 5px 16px 5px 22px;
  background: var(--sh-o-surface-soft, #f7f8fa);
  color: var(--sh-o-text-faint, #9aa1ac);
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  /* Pfeil-Ribbon wie Mockup .sho-stage (Z.107) */
  -webkit-clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
  transition: background .16s ease, color .16s ease;
}

/* Erste Stufe: keine linke Einkerbung, linke Ecken gerundet (Mockup .sho-stage:first-child Z.108) */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child {
  padding-left: 14px;
  border-top-left-radius: var(--sh-o-r-sm, 6px);
  border-bottom-left-radius: var(--sh-o-r-sm, 6px);
  -webkit-clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}

/* Letzte Stufe: flacher rechter Abschluss, rechte Ecken gerundet, kein Ueberlapp */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child {
  margin-right: 0;
  padding-right: 18px;
  border-top-right-radius: var(--sh-o-r-sm, 6px);
  border-bottom-right-radius: var(--sh-o-r-sm, 6px);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%);
}

/* Einzige Stufe: keine Pfeilform, voll gerundet */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child:last-child {
  margin-right: 0;
  border-radius: var(--sh-o-r-sm, 6px);
  -webkit-clip-path: none;
  clip-path: none;
}

/* ===========================================================================
   2) FLAT-VERBINDUNGSLINIE NEUTRALISIEREN
   sh-rd-ed-stepper-flat.css:147 setzt eine 2px-Linie als ::before; im Chevron
   ragt sie als Strich-Bruecke heraus. Inhalt entfernen -> sauberer Pfeil.
   =========================================================================== */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage::before,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child::before,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done::before,
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current::before {
  content: none;
}

/* ===========================================================================
   3) FLAECHENFARBEN JE ZUSTAND (Mockup Sektion 2)
   done : Flaeche bleibt soft, nur Text gruen (Mockup .sho-stage.done -> nur color)
   cur  : Markenrot-Flaeche, weisser Text (Mockup .sho-stage.cur) -- diszipliniert,
          NUR die aktuelle Stufe traegt das Markenrot.
   =========================================================================== */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done {
  background: var(--sh-o-surface-soft, #f7f8fa);
  color: var(--sh-o-ok, #2f855a);
  font-weight: 600;
}

.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current {
  background: var(--sh-brand, #E73D25);
  color: #fff;
  font-weight: 700;
}

/* Negativer Endzustand (storniert/abgelehnt) — im Mockup nicht gezeigt,
   tonal konsistent aus Tokens (Semantik der Basis erhalten). */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled {
  background: var(--sh-o-danger-soft, #fdecec);
  color: var(--sh-o-danger, #c53030);
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current.is-cancelled {
  background: var(--sh-o-danger, #c53030);
  color: #fff;
}

/* ===========================================================================
   4) NUMMERN-BUBBLE -> kompakte Plakette
   Flat machte sie zum 1.7rem-Ring mit Border + Akzent-Ring. Zurueck zur
   kompakten runden Bubble (Optik der Basis sh-statusbar.css), Farbe folgt Zustand.
   =========================================================================== */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage .sh-statusbar__num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .07);
  color: inherit;
  box-shadow: none;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1;
}

/* Akzent-Ring der Flat-Bubble entfernen (Flat:221) */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current .sh-statusbar__num::before {
  content: none;
}

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

/* Erledigt: zarte gruene Bubble, Haken-Glyph bleibt (::after aus Basis) */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  background: color-mix(in srgb, var(--sh-o-ok, #2f855a) 18%, transparent);
  color: var(--sh-o-ok, #2f855a);
  font-size: 0;   /* Ziffer ausblenden — der Haken (::after, .66rem) ersetzt sie; behebt Doppelglyph "1✓" */
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num::after {
  content: '\2713';
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sh-o-ok, #2f855a);
}

/* Storniert-Bubble tonal */
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num {
  background: rgba(0, 0, 0, .07);
  color: inherit;
}
.sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current.is-cancelled .sh-statusbar__num {
  background: rgba(255, 255, 255, .26);
  color: #fff;
}

/* ===========================================================================
   5) REIHE: Abstand + Typo (Mockup .sho-statusbar gap:2px)
   =========================================================================== */
.sh-cp-statusbar .sh-statusbar {
  align-items: center;
  gap: 2px;
  margin: 0 0 .6rem;
  font-size: 12px;
  font-weight: 600;
}

/* Host-Rahmen ruhig halten (kein eigener Hintergrund, erbt von .ue-toolbar.sh-cp) */
.sh-cp-statusbar {
  padding: .7rem .8rem .25rem;
}

/* ===========================================================================
   6) DARK MODE
   Die Token-Fallbacks (#f7f8fa etc.) wuerden im Dark-Theme zu hell wirken.
   --sh-o-surface-soft / --sh-o-ok-soft / --sh-o-danger-soft kippen unter
   [data-theme="dark"] bereits korrekt (sh-odoo-tokens.css:70/76/79); hier nur
   die HARTKODIERTEN Fallback-Werte (kommend/done-Flaeche, schwarze Bubble)
   gegen lesbare Dark-Werte tauschen. Markenrot (is-current) bleibt; weisser
   Text darauf ist in beiden Modi kontraststark.
   =========================================================================== */
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage,
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child,
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child,
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child:last-child {
  background: var(--sh-o-surface-soft, #241f1a);
  color: var(--sh-o-text-faint, #8c8175);
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done {
  background: var(--sh-o-surface-soft, #241f1a);
  color: var(--sh-o-ok, #3bc07a);
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled {
  background: var(--sh-o-danger-soft, rgba(197, 48, 48, .18));
  color: var(--sh-o-danger, #f08a8a);
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage .sh-statusbar__num {
  background: rgba(255, 255, 255, .12);
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num {
  background: color-mix(in srgb, var(--sh-o-ok, #3bc07a) 22%, transparent);
  color: var(--sh-o-ok, #3bc07a);
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num::after {
  color: var(--sh-o-ok, #3bc07a);
}
[data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num {
  background: rgba(255, 255, 255, .12);
}

/* ===========================================================================
   7) MOBILE-FEINSCHLIFF
   Basis-Reihe bricht bereits um (flex-wrap aus sh-statusbar.css). Bei Umbruch
   wuerde negatives margin-right + Pfeilspitze unsauber aussehen -> auf
   schmalen Viewports Pfeil entschaerfen, Stufen leicht kompakter.
   =========================================================================== */
@media (max-width: 640px) {
  .sh-cp-statusbar {
    padding: .55rem .5rem .15rem;
  }
  .sh-cp-statusbar .sh-statusbar {
    flex-wrap: wrap;
    row-gap: .35rem;
  }
  .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 {
    font-size: 11px;
    padding: 4px 12px 4px 16px;
    margin-right: 0;
    border-radius: var(--sh-o-r-sm, 6px);
    -webkit-clip-path: none;
    clip-path: none;
  }
  .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child { padding-left: 12px; }
}