/* =========================================================================
   ServiceHub - Redesign-Verfeinerung  ::  BEREICH "ed-kpis-hot"
   Kennzahlen-Reihe des Beleg-Editors (Angebot / Auftrag / Rechnung /
   Lieferschein / Gutschrift) - die obere .del-kpi-bar.

   ZIEL (Vorlage ed3.png):
     - Das fuehrende, hervorgehobene Tile (Belegwert / Angebotswert /
       Auftragswert / Brutto - markiert als .del-kpi--highlight) wird eine
       ROTE VERLAUFS-Kachel: linear-gradient(140deg,#F1543C,#CE3620),
       weisse Schrift, Label uppercase.
     - Alle uebrigen Kennzahlen (Netto, MwSt, Marge, DB bzw. Std., Geliefert,
       Abgerechnet) werden ruhige weisse Token-Karten mit uppercase
       --muted Label und grosser Space-Grotesk-Zahl.

   REIN OPTISCH. Additive Schicht. NULL Funktions-, Markup-, Logik-,
   Feld-, Endpunkt-, Routen-, Event-, Status- oder Rechte-Aenderung.
   Es wird NICHTS Funktionales versteckt (kein display:none auf Buttons,
   Tabs, Feldern oder Zeilen). Jede Kennzahl bleibt sichtbar.

   ECHTE Selektoren (aus doc-editor-layout.js / doc-editor-layout.css):
     .del-wrap                          = Editor-Shell (Token-Scope)
     .del-kpi-bar                       = die Kennzahlen-Reihe (flex)
     .del-kpi                           = eine Kennzahl-Karte
       inline style="--kpi-color: ..."  = Akzentfarbe je Kennzahl
     .del-kpi--highlight                = fuehrende Geld-Kennzahl (HOT)
     .del-kpi--internal                 = interne Kennzahl (Marge / DB)
     .del-kpi--empty                    = Platzhalter (kein Wert)
     .del-kpi-label  /  .del-kpi-value  = Beschriftung / Zahl

   Verfeinert die bestehende Schicht sh-redesign-ed-kpis.css (Namespace
   --sex-...) und ist ladereihenfolge-unabhaengig: eigener, lokal auf
   .del-wrap gescopeter Token-Namespace --rd-...  Globale Basis
   (.btn, .badge, .data-table, :root) wird NICHT neu definiert.
   Light und Dark via [data-theme="dark"]. Kein !important-Wust.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ----------------------------------------------------------------------------
   Tokens (Light) - lokal auf die Editor-Shell gescoped
   ---------------------------------------------------------------------------- */
.del-wrap {
  --rd-accent: #E73D25;
  --rd-accent-700: #C5331E;
  --rd-accent-soft: #FCEDE7;

  /* Verlauf der HOT-Kachel (exakt wie Vorlage ed3.png) */
  --rd-hot-from: #F1543C;
  --rd-hot-to: #CE3620;
  --rd-hot-grad: linear-gradient(140deg, #F1543C 0%, #CE3620 100%);
  --rd-hot-ink: #FFFFFF;
  --rd-hot-ink-2: rgba(255, 255, 255, .82);
  --rd-hot-line: rgba(255, 255, 255, .26);

  --rd-honey: #D99A2B;
  --rd-honey-soft: #FBF0DA;
  --rd-ok: #16A34A;
  --rd-warn: #C7791A;
  --rd-warn-soft: #FBF1E0;
  --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-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --rd-font-body: 'Figtree', system-ui, sans-serif;

  --rd-r-sm: 9px;
  --rd-r-md: 12px;
  --rd-r-lg: 16px;
  --rd-r-pill: 999px;

  --rd-sh-card: 0 2px 8px rgba(120, 80, 50, .06);
  --rd-sh-soft: 0 6px 20px rgba(120, 80, 50, .07);
  --rd-sh-hot: 0 8px 22px rgba(206, 54, 32, .26), 0 2px 6px rgba(206, 54, 32, .18);
  --rd-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ----------------------------------------------------------------------------
   Tokens (Dark)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .del-wrap {
  --rd-accent: #F2543B;
  --rd-accent-700: #E0432B;
  --rd-accent-soft: rgba(242, 84, 59, .16);

  /* HOT-Kachel im Dark etwas satter, weisse Schrift bleibt */
  --rd-hot-from: #F2543B;
  --rd-hot-to: #C5331E;
  --rd-hot-grad: linear-gradient(140deg, #F2543B 0%, #C5331E 100%);
  --rd-hot-ink: #FFF6F2;
  --rd-hot-ink-2: rgba(255, 246, 242, .80);
  --rd-hot-line: rgba(255, 255, 255, .22);

  --rd-honey: #E6AE4A;
  --rd-honey-soft: rgba(230, 174, 74, .16);
  --rd-ok: #3BC07A;
  --rd-warn: #E5A33C;
  --rd-warn-soft: rgba(229, 163, 60, .15);
  --rd-info: #5C8FE8;
  --rd-violet: #9B83E4;

  --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-sh-card: 0 2px 8px rgba(0, 0, 0, .35);
  --rd-sh-soft: 0 6px 20px rgba(0, 0, 0, .35);
  --rd-sh-hot: 0 8px 22px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .40);
}

/* =========================================================================
   1) Die Kennzahlen-Reihe selbst
   ========================================================================= */
.del-wrap .del-kpi-bar {
  align-items: stretch;        /* Karten gleich hoch, ohne Layout zu brechen */
  gap: 10px;
  padding: 10px 18px;
  background: var(--rd-surface);
  background-image: linear-gradient(180deg, var(--rd-surface) 0%, var(--rd-surf-2) 150%);
  border-bottom: 1px solid var(--rd-border);
  box-shadow: var(--rd-sh-card);
  scrollbar-width: thin;
}

/* =========================================================================
   2) Standard-Kennzahl  ->  ruhige weisse Token-Karte
      (Netto / MwSt / Std. / Geliefert / Abgerechnet ...)
   ========================================================================= */
.del-wrap .del-kpi {
  position: relative;
  flex: 0 0 auto;
  justify-content: center;     /* vertikal mittig in der gleich hohen Karte */
  gap: 5px;
  min-width: 116px;
  padding: 9px 15px 10px;
  border-left: none;           /* alten Rahmenstrich-Akzent abloesen */
  border-radius: var(--rd-r-md);
  background: var(--rd-surface);
  box-shadow: var(--rd-sh-card);
  transition: box-shadow var(--rd-tr), transform var(--rd-tr), background var(--rd-tr);
}
.del-wrap .del-kpi:hover {
  box-shadow: var(--rd-sh-soft);
  transform: translateY(-1px);
}

/* schmaler, farbiger Akzentstrich oben (nutzt die inline --kpi-color je Kennzahl) */
.del-wrap .del-kpi::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 3px;
  border-radius: var(--rd-r-pill);
  background: var(--kpi-color, var(--rd-border-2));
  opacity: .9;
}

/* Label: uppercase, --muted, ruhig */
.del-wrap .del-kpi-label {
  font-family: var(--rd-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rd-muted);
  white-space: nowrap;
}

/* Zahl: gross, Space Grotesk, tabellarische Ziffern */
.del-wrap .del-kpi-value {
  font-family: var(--rd-font-head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =========================================================================
   3) HOT-Kachel  ->  rote Verlaufs-Karte mit weisser Schrift
      (fuehrende Geld-Kennzahl: Belegwert / Angebotswert / Auftragswert /
       Brutto - im Markup .del-kpi--highlight)
   ========================================================================= */
.del-wrap .del-kpi--highlight {
  min-width: 152px;
  padding: 10px 18px 11px;
  background: var(--rd-hot-grad);
  border: none;
  box-shadow: var(--rd-sh-hot);
}
.del-wrap .del-kpi--highlight:hover {
  background: var(--rd-hot-grad);
  box-shadow: var(--rd-sh-hot);
  transform: translateY(-1px);
}
/* feiner Glanz oben statt des farbigen Akzentstrichs */
.del-wrap .del-kpi--highlight::before {
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rd-hot-line);
  opacity: 1;
}
.del-wrap .del-kpi--highlight .del-kpi-label {
  color: var(--rd-hot-ink-2);
  letter-spacing: .085em;
}
.del-wrap .del-kpi--highlight .del-kpi-value {
  color: var(--rd-hot-ink);
  font-size: 21px;
  font-weight: 700;
}

/* =========================================================================
   4) Interne Kennzahl (Marge / DB)  ->  dezent honig-getoent
   ========================================================================= */
.del-wrap .del-kpi--internal {
  opacity: 1;
  background: var(--rd-honey-soft);
}
.del-wrap .del-kpi--internal::before {
  background: var(--kpi-color, var(--rd-honey));
}
.del-wrap .del-kpi--internal .del-kpi-label {
  color: var(--rd-warn);
}
.del-wrap .del-kpi--internal .del-kpi-value {
  color: var(--rd-ink);
}

/* =========================================================================
   5) Leerer Platzhalter  ->  ruhig zuruecknehmen (bleibt sichtbar)
   ========================================================================= */
.del-wrap .del-kpi--empty {
  opacity: 1;
  background: var(--rd-surf-2);
  box-shadow: none;
}
.del-wrap .del-kpi--empty::before {
  opacity: .35;
}
.del-wrap .del-kpi--empty .del-kpi-value {
  color: var(--rd-muted);
  font-weight: 600;
}
/* eine HOT-Kachel ohne Wert soll nicht knallrot leer wirken */
.del-wrap .del-kpi--highlight.del-kpi--empty {
  background: var(--rd-surf-2);
  box-shadow: var(--rd-sh-card);
}
.del-wrap .del-kpi--highlight.del-kpi--empty .del-kpi-label {
  color: var(--rd-muted);
}
.del-wrap .del-kpi--highlight.del-kpi--empty .del-kpi-value {
  color: var(--rd-muted);
}

/* =========================================================================
   6) Schlanke, warme Scrollbar fuer die ueberlaufende Reihe (WebKit)
   ========================================================================= */
.del-wrap .del-kpi-bar::-webkit-scrollbar {
  height: 6px;
}
.del-wrap .del-kpi-bar::-webkit-scrollbar-thumb {
  background: var(--rd-border-2);
  border-radius: var(--rd-r-pill);
}
.del-wrap .del-kpi-bar::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================================
   7) Responsive - auf schmalen Editor-Breiten Zahlen leicht verkleinern
   ========================================================================= */
@media (max-width: 1180px) {
  .del-wrap .del-kpi {
    min-width: 104px;
    padding: 8px 13px 9px;
  }
  .del-wrap .del-kpi-value {
    font-size: 17.5px;
  }
  .del-wrap .del-kpi--highlight .del-kpi-value {
    font-size: 19px;
  }
}