/* =========================================================================
   ServiceHub — sh-odoo-detail-chrome
   -------------------------------------------------------------------------
   Odoo-grade Politur der Beleg-Detail-Control-Panel-KOPFZONE
   (Angebot / Auftrag / Rechnung / Gutschrift).

   SCOPE — bewusst eng:
     NUR  .ue-toolbar.sh-cp  (Container) + die linken Kopf-Kinder
          (Zurueck / Belegtyp-Badge / Belegnummer / Status-Badge / Kunde).
     Gerendert von order-/quote-/invoice-editor-integration.js in #mainContent.

   NICHT angefasst (anderer Eigentuemer, bereits poliert):
     .ue-toolbar__btn  +  .ue-menu-*   →  sh-redesign-ed-actions.css
     .ue-toolbar.sh-cp .ue-toolbar__actions (Trennlinie/Pillen) → ebd.
   Hier wird die verbleibende Luecke geschlossen: die Control-Panel-Anmutung
   des CONTAINERS selbst + Kopfzeilen-Trennung + Abstand um Badge/Docnummer/
   Status/Kunde.

   REIN OPTISCH, additiv. Kein Markup-, Logik- oder Funktions-Eingriff.
   Es wird NICHTS versteckt (kein display:none auf Buttons/Feldern/Zeilen),
   kein Layout-Umbau — nur Farbe / Abstand / Rahmen / Radius / Schatten,
   ausschliesslich aus der --sh-o-*-Token-Skala (sh-odoo-tokens.css),
   Fallbacks immer mitgegeben.

   LADEREIHENFOLGE: muss NACH sh-redesign-ed-actions.css und der sh-rd-ed-*-
   Schicht geladen werden (gewinnt damit fuer die Container-/Kopfzone), aber
   die Aktions-Pillen bleiben unberuehrt, da nicht selektiert.

   Light + Dark: die Token-Werte invertieren bereits via [data-theme="dark"]
   in sh-odoo-tokens.css → hier keine eigene Dark-Regel noetig.
   Kommentar-Hygiene: keine Token-Listen mit Klammer-Schlusspaaren; Klammern
   ausgeglichen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   (a) Container als ruhiges, flaches Control-Panel.
       Ueberschreibt den Basis-Verlauf von editor-toolbar-shared.css dezent
       durch eine flache Token-Flaeche + zarte Unterkante + 1-px-Schatten.
       align-items zentriert die gemischt hohen Kopf-Elemente sauber.
   ------------------------------------------------------------------------- */
.ue-toolbar.sh-cp {
  background: var(--sh-o-surface, #ffffff);
  border-bottom: 1px solid var(--sh-o-border, #e6e8ec);
  box-shadow: var(--sh-o-shadow-1, 0 1px 2px rgba(16, 24, 40, .06));
  padding: var(--sh-o-space-2, 8px) var(--sh-o-space-4, 16px);
  gap: var(--sh-o-space-3, 12px);
  align-items: center;
}

/* -------------------------------------------------------------------------
   (b) Zurueck-Knopf: nur bündig ausrichten (etwas Luft nach rechts).
       Kein Farb-/Rahmen-/Logik-Eingriff am Button selbst.
   ------------------------------------------------------------------------- */
.ue-toolbar.sh-cp .ue-toolbar__back {
  margin-right: var(--sh-o-space-1, 4px);
}

/* -------------------------------------------------------------------------
   (c) Belegtyp-Badge: zarter Radius + ruhigere Typo.
       Die Inline-Hintergrundfarbe (--ue-badge-color) bleibt unangetastet.
   ------------------------------------------------------------------------- */
.ue-toolbar.sh-cp .ue-toolbar__badge {
  border-radius: var(--sh-o-radius-sm, 5px);
  font-size: var(--sh-o-font-xs, 11px);
  letter-spacing: .4px;
}

/* -------------------------------------------------------------------------
   (d) Belegnummer: kraeftig + klar vom Badge abgesetzt (kleiner Innenabstand).
   ------------------------------------------------------------------------- */
.ue-toolbar.sh-cp .ue-toolbar__docnumber {
  color: var(--sh-o-text, #1f2329);
  font-weight: var(--sh-o-fw-semi, 600);
  font-size: var(--sh-o-font-md, 14px);
  margin-left: var(--sh-o-space-1, 4px);
}

/* -------------------------------------------------------------------------
   (e) Status-Badge (direktes Kind der Toolbar): etwas Luft + crisper Pill-
       Radius + 1-px-Schatten. Status-/Inline-Farbe der Badge bleibt erhalten
       (Selektor nur > .status-badge als direktes Kind — NICHT die Status-
       Badges in Sidebar/Body, die nicht direkte Kinder sind).
   ------------------------------------------------------------------------- */
.ue-toolbar.sh-cp > .status-badge {
  margin-left: var(--sh-o-space-1, 4px);
  border-radius: var(--sh-o-radius-pill, 999px);
  box-shadow: var(--sh-o-shadow-1, 0 1px 2px rgba(16, 24, 40, .06));
}

/* -------------------------------------------------------------------------
   (f) Kunde: ruhig gedaempft, Trenn-Punkt („· Name") entzerrt.
   ------------------------------------------------------------------------- */
.ue-toolbar.sh-cp .ue-toolbar__customer {
  color: var(--sh-o-text-muted, #6b7280);
  font-size: var(--sh-o-font-sm, 12.5px);
  margin-left: var(--sh-o-space-1, 4px);
}

/* -------------------------------------------------------------------------
   (g) Zarte 2-px-Akzent-Unterkante als Control-Panel-Signatur.
       Markenrot, sehr gedaempft (10 %), liegt direkt auf der border-bottom.
       position:relative ist hier sicher: die Toolbar enthaelt keine absolut
       positionierten Kinder, die davon abhaengen (das Dropdown haengt an
       .ue-menu-wrap, nicht an der Toolbar).
   ------------------------------------------------------------------------- */
.ue-toolbar.sh-cp {
  position: relative;
}
.ue-toolbar.sh-cp::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: color-mix(in srgb, var(--sh-brand, #E73D25) 10%, transparent);
  pointer-events: none;
}