/* =========================================================================
   ServiceHub - Redesign: Belegeditor RECHTE INFO-LEISTE (rail-cards)
   --------------------------------------------------------------------------
   REIN OPTISCH. Additive Schicht. Re-Skin der rechten Uebersicht-Leiste im
   gemeinsamen Belegeditor (Angebot - Auftrag - Rechnung - Lieferschein -
   Gutschrift). Styled die ECHTEN Selektoren aus order-editor-integration.js
   (_loadDetailSidebar), gemountet in #oei-detail-sidebar:

     .oei-detail-sidebar                        Rail-Container (rechte Spalte)
     .oei-sidebar-title                         Karten-Ueberschrift "Uebersicht"
     .oei-sidebar-card / __left / __icon /      verlinkte Zaehler-Kacheln
       __label / __right / __amount / __count   (Rechnungen, Zeiteintraege,
                                                  Berichte, Dokumente, Techniker)
     .oei-sidebar-gauge / __title / __value /   "Offene Rechnungen"-Block
       __bar / __fill / __label                 mit Balken + Summe
     .oei-sidebar-meta / __label                Summenblock Netto/MwSt/Brutto/
                                                  Verrechnet
     .oei-sidebar-loading                       Ladehinweis

   Die Status-Aktion neben der Leiste (Statusbar) liegt in der eigenen Schicht
   sh-statusbar.css und wird hier nicht angetastet. Diese Datei verfeinert
   ausschliesslich die Info-Karten der rechten Leiste.

   WARUM diese Datei: die Basis in sh-design-system.css faerbt die Leiste in
   kuehlem Blau/Grau (Hover Blau, kalte Neutraltoene). Diese Schicht hebt sie
   per hoeherer Spezifitaet (Container-Scope) auf die warme ELMETIC-Palette,
   ohne die Basis zu loeschen und ohne aufdringliche Wichtig-Marker.

   KEINE Funktions-, Markup- oder Logik-Aenderung. Nichts wird versteckt (kein
   display none auf Buttons, Tabs, Feldern oder Zeilen). Reines CSS.

   Tokens lokal als --sex-Praefix auf den Rail-Container gescoped
   (ladereihenfolge-unabhaengig). Light plus Dark via data-theme. Globale Basis
   (Punkt-btn, Punkt-badge, Punkt-data-table, Doppelpunkt-root) NICHT angefasst.
   ========================================================================= */

/* ---------- Tokens (Light) - auf den Rail-Container gescoped ---------- */
.oei-detail-sidebar {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-honey-soft: #FBF0DA;
  --sex-ok: #16A34A;
  --sex-ok-soft: #E9F8EF;
  --sex-warn: #C7791A;
  --sex-warn-soft: #FBF1E0;
  --sex-info: #2F6BD6;
  --sex-info-soft: #EAF1FC;

  --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-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sex-font-body: 'Figtree', system-ui, sans-serif;
  --sex-font-mono: 'Space Mono', ui-monospace, monospace;

  --sex-r-xs: 7px;
  --sex-r-sm: 9px;
  --sex-r-md: 12px;
  --sex-r-lg: 16px;
  --sex-r-pill: 999px;

  --sex-shadow-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-shadow-soft: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .oei-detail-sidebar {
  --sex-accent: #F2543B;
  --sex-accent-700: #E0432B;
  --sex-accent-soft: rgba(242, 84, 59, .16);
  --sex-accent-line: rgba(242, 84, 59, .30);
  --sex-honey: #E6AE4A;
  --sex-honey-soft: rgba(230, 174, 74, .16);
  --sex-ok: #3BC07A;
  --sex-ok-soft: rgba(59, 192, 122, .15);
  --sex-warn: #E5A33C;
  --sex-warn-soft: rgba(229, 163, 60, .15);
  --sex-info: #5C8FE8;
  --sex-info-soft: rgba(92, 143, 232, .16);

  --sex-bg: #15120F;
  --sex-surface: #1E1A16;
  --sex-surf-2: #241F1A;
  --sex-surf-3: #2C2620;

  --sex-ink: #F6F1EC;
  --sex-text: #E2D8CE;
  --sex-text-2: #B3A99E;
  --sex-muted: #8C8175;
  --sex-border: #2E2822;
  --sex-border-2: #3A332B;

  --sex-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-shadow-soft: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
}

/* =========================================================================
   1) Rail-Container - warme Flaeche, weicher Trenner zur Mitte
   ========================================================================= */

.oei-detail-sidebar {
  border-left: 1px solid var(--sex-border);
  background: var(--sex-bg);
  padding: 16px;
  gap: 12px;
  font-family: var(--sex-font-body);
  color: var(--sex-text);
}

/* Eigene Scrollbar in warmem Ton, falls die Leiste scrollt */
.oei-detail-sidebar::-webkit-scrollbar {
  width: 8px;
}
.oei-detail-sidebar::-webkit-scrollbar-thumb {
  background: var(--sex-border-2);
  border-radius: var(--sex-r-pill);
}

/* =========================================================================
   2) Karten-Ueberschrift (.oei-sidebar-title)
   Dezenter, ruhiger Kopf in der Headline-Schrift.
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-title {
  font-family: var(--sex-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sex-muted);
  margin: 2px 2px 2px;
}

/* =========================================================================
   3) Verlinkte Zaehler-Kacheln (.oei-sidebar-card)
   Weiche Token-Karte; Hover hebt warm an statt kuehl-blau.
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-card {
  padding: 11px 13px;
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-shadow-sm);
  transition: background var(--sex-tr), border-color var(--sex-tr), box-shadow var(--sex-tr), transform var(--sex-tr);
}
.oei-detail-sidebar .oei-sidebar-card:hover {
  background: var(--sex-surface);
  border-color: var(--sex-accent-line);
  box-shadow: var(--sex-shadow-soft);
  transform: translateY(-1px);
}
.oei-detail-sidebar .oei-sidebar-card:active {
  transform: translateY(0);
}

.oei-detail-sidebar .oei-sidebar-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--sex-r-sm);
  background: var(--sex-accent-soft);
  color: var(--sex-accent);
  font-size: 16px;
  line-height: 1;
  transition: background var(--sex-tr), color var(--sex-tr);
}
.oei-detail-sidebar .oei-sidebar-card__icon svg {
  width: 17px;
  height: 17px;
}
.oei-detail-sidebar .oei-sidebar-card:hover .oei-sidebar-card__icon {
  background: var(--sex-accent);
  color: #fff;
}

.oei-detail-sidebar .oei-sidebar-card__label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--sex-text);
}

/* Geldbetrag der Kachel (z. B. Rechnungssumme) in Mono, gedaempft */
.oei-detail-sidebar .oei-sidebar-card__amount {
  font-family: var(--sex-font-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--sex-text-2);
}

/* Zaehler-Badge: gefuellt accent bei Inhalt, gedaempft muted bei 0.
   Default = accent (greift fuer alle nicht-leeren Kacheln). */
.oei-detail-sidebar .oei-sidebar-card__count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--sex-r-pill);
  background: var(--sex-accent);
  color: #fff;
  font-family: var(--sex-font-mono);
  font-size: .7rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(231, 61, 37, .20);
}

/* =========================================================================
   4) "Offene Rechnungen"-Block (.oei-sidebar-gauge)
   Warme Karte, Summe gross in Mono, Balken in weicher Schiene.
   Die Ampelfarbe von Wert und Fuellung kommt inline aus dem JS (rot/gelb/
   gruen je Auslastung) und bleibt bewusst unangetastet = semantisch.
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-gauge {
  padding: 14px;
  background: var(--sex-surf-2);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-shadow-sm);
  margin-top: 2px;
}
.oei-detail-sidebar .oei-sidebar-gauge__title {
  font-family: var(--sex-font-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sex-muted);
  margin: 0 0 8px;
}
.oei-detail-sidebar .oei-sidebar-gauge__value {
  font-family: var(--sex-font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 9px;
}
.oei-detail-sidebar .oei-sidebar-gauge__bar {
  height: 7px;
  background: var(--sex-surf-3);
  border-radius: var(--sex-r-pill);
}
.oei-detail-sidebar .oei-sidebar-gauge__fill {
  border-radius: var(--sex-r-pill);
  transition: width .5s cubic-bezier(.2, .7, .3, 1);
}
.oei-detail-sidebar .oei-sidebar-gauge__label {
  font-family: var(--sex-font-mono);
  font-size: .64rem;
  color: var(--sex-muted);
  margin-top: 6px;
}

/* =========================================================================
   5) Summenblock (.oei-sidebar-meta) - Netto / MwSt / Brutto / Verrechnet
   Beschriftung gedaempft, Werte in Mono am rechten Rand. Brutto (vorletzte
   Zeile) bekommt eine ruhige Hervorhebung als Hauptsumme.
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-meta {
  gap: 7px;
  padding: 14px;
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-shadow-sm);
  margin-top: 2px;
}
.oei-detail-sidebar .oei-sidebar-meta > div {
  font-size: .85rem;
  align-items: baseline;
}
.oei-detail-sidebar .oei-sidebar-meta > div + div {
  padding-top: 7px;
  border-top: 1px dashed var(--sex-border);
}
.oei-detail-sidebar .oei-sidebar-meta__label {
  color: var(--sex-muted);
  font-weight: 500;
}
.oei-detail-sidebar .oei-sidebar-meta > div > strong {
  font-family: var(--sex-font-mono);
  font-weight: 700;
  color: var(--sex-ink);
}

/* Brutto = vorletzte Zeile: als Hauptsumme leicht betont (Akzent-Wert,
   etwas groesser). Rein optische Gewichtung, keine Strukturaenderung. */
.oei-detail-sidebar .oei-sidebar-meta > div:nth-last-child(2) > strong {
  font-size: 1.02rem;
  color: var(--sex-accent);
}

/* =========================================================================
   6) Ladehinweis (.oei-sidebar-loading)
   ========================================================================= */

.oei-detail-sidebar .oei-sidebar-loading {
  color: var(--sex-muted);
  font-size: .85rem;
  font-style: italic;
  padding: 22px 0;
}