/* =========================================================================
   ServiceHub - Redesign Block "ed-kpis"
   Kennzahlen-Leiste (KPI-rail) + Verknuepfungs-Kacheln des Beleg-Editors
   (gemeinsame Shell von Angebot / Auftrag / Rechnung / Lieferschein / Gutschrift).
   --------------------------------------------------------------------------
   REIN OPTISCH. Additive Schicht. NULL Funktions-, Markup- oder Logikaenderung.
   Es wird NICHTS Funktionales versteckt (kein display:none auf Buttons, Tabs,
   Feldern oder Zeilen). Die eingebettete PDF-Vorschau bleibt unberuehrt.

   Verfeinert die ECHTEN Editor-Selektoren aus doc-editor-layout.css:
     .del-kpi-bar / .del-kpi / .del-kpi--highlight / .del-kpi--internal
                  / .del-kpi--empty / .del-kpi-label / .del-kpi-value
        = obere Kennzahlen-/Metrics-Leiste (Netto, Brutto, Marge, Std geplant/ist ...)
     .del-links / .del-link-list / .del-link
        = Verknuepfungs-Kacheln (Auftragswert / Rechnungen / Angebot / Kundenakte)

   BESTAND: sh-redesign-editor.css re-skinnt diese Selektoren bereits auf Basis
   der warmen Palette (Token-Namespace --she-...). Diese Datei DUPLIZIERT das nicht,
   sondern hebt nur die Kennzahlen-Leiste und die Verknuepfungs-Kacheln optisch an.

   Eigener, lokal auf die Editor-Container gescopeter Token-Namespace --sex-...
   (ladereihenfolge-unabhaengig, kollidiert nicht mit --she-... oder globalen Tokens).
   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) - auf die Editor-Container gescoped ---------- */
.del-wrap {
  --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-sh-soft: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-sh-card: 0 2px 8px rgba(120, 80, 50, .06);
  --sex-sh-accent: 0 5px 14px rgba(231, 61, 37, .20);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap {
  --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-sh-soft: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-card: 0 2px 8px rgba(0, 0, 0, .35);
  --sex-sh-accent: 0 5px 14px rgba(0, 0, 0, .45);
}

/* =========================================================================
   1) KENNZAHLEN-LEISTE / METRICS-BAR (oben im Editor)
      Netto / Brutto / Marge / Std geplant / Std ist ...
      Markup: .del-kpi-bar > .del-kpi[.--highlight|.--internal|.--empty]
                            > .del-kpi-label + .del-kpi-value
   ========================================================================= */

.del-wrap .del-kpi-bar {
  gap: 10px;
  padding: 9px 18px;
  background: var(--sex-surface);
  border-bottom: 1px solid var(--sex-border);
  box-shadow: var(--sex-sh-card);
  /* dezenter Verlauf nach unten gibt der Leiste Tiefe, ohne Layout zu aendern */
  background-image: linear-gradient(180deg, var(--sex-surface) 0%, var(--sex-surf-2) 140%);
  scrollbar-width: thin;
}

/* Einzelne Kennzahl: weiche Token-Karte statt nur Rahmenstrich links */
.del-wrap .del-kpi {
  position: relative;
  flex: 0 0 auto;
  gap: 3px;
  padding: 7px 14px 8px;
  border-left: none;
  border-radius: var(--sex-r-sm);
  background: var(--sex-surf-2);
  transition: background var(--sex-tr), box-shadow var(--sex-tr), transform var(--sex-tr);
}
.del-wrap .del-kpi:hover {
  background: var(--sex-surface);
  box-shadow: var(--sex-sh-card);
}

/* Farb-Akzent als zarter linker Balken (nutzt die per --kpi-color gesetzte Farbe) */
.del-wrap .del-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: var(--sex-r-pill);
  background: var(--kpi-color, var(--sex-border-2));
  opacity: .85;
}

.del-wrap .del-kpi-label {
  font-family: var(--sex-font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--sex-muted);
  white-space: nowrap;
}

/* Zahlen in Space Grotesk - ruhig, klar, leicht negativer Buchstabenabstand */
.del-wrap .del-kpi-value {
  font-family: var(--sex-font-head);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--sex-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Hervorgehobene Kennzahl (Brutto / Auftragswert): warme Akzent-Karte */
.del-wrap .del-kpi--highlight {
  padding: 7px 16px 8px;
  background:
    linear-gradient(135deg, var(--sex-accent-soft) 0%, var(--sex-surface) 130%);
  box-shadow: var(--sex-sh-card);
}
.del-wrap .del-kpi--highlight::before {
  background: var(--kpi-color, var(--sex-accent));
  width: 3.5px;
  opacity: 1;
}
.del-wrap .del-kpi--highlight:hover {
  background:
    linear-gradient(135deg, var(--sex-accent-soft) 0%, var(--sex-surface) 110%);
  box-shadow: var(--sex-sh-accent);
}
.del-wrap .del-kpi--highlight .del-kpi-label {
  color: var(--sex-accent-700);
}
.del-wrap .del-kpi--highlight .del-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--sex-accent-700);
}

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

/* Leerer Platzhalter-Wert: ruhig zuruecknehmen */
.del-wrap .del-kpi--empty {
  opacity: 1;
  background: transparent;
}
.del-wrap .del-kpi--empty::before {
  opacity: .4;
}
.del-wrap .del-kpi--empty .del-kpi-value {
  color: var(--sex-muted);
  font-weight: 600;
}

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

/* =========================================================================
   2) VERKNUEPFUNGS-KACHELN (Tab "Verknuepfte Belege")
      Auftragswert / Rechnungen / Angebot / Kundenakte / Lieferschein ...
      Markup: .del-links > h4 + ul.del-link-list > li > a
   ========================================================================= */

.del-wrap .del-links h4 {
  margin: 0 0 12px;
  font-family: var(--sex-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sex-ink);
}

/* Liste -> Raster aus tastbaren Kacheln (rein optisch, gleiche Eintraege) */
.del-wrap .del-links .del-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

/* Trennstriche der Listendarstellung im Kachel-Look aufloesen */
.del-wrap .del-links .del-link-list li {
  padding: 0;
  border-bottom: none;
}

/* Die Kachel selbst sitzt auf dem Link (a fuellt das li komplett aus) */
.del-wrap .del-links .del-link-list li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  background: var(--sex-surf-2);
  color: var(--sex-text);
  font-family: var(--sex-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: var(--sex-sh-card);
  transition: border-color var(--sex-tr), background var(--sex-tr),
              box-shadow var(--sex-tr), transform var(--sex-tr), color var(--sex-tr);
}

/* Fuehrendes Emoji der Verknuepfung etwas groesser stellen (in einem Pill-Feld) */
.del-wrap .del-links .del-link-list li > a::first-letter {
  font-size: 17px;
}

.del-wrap .del-links .del-link-list li > a:hover {
  border-color: var(--sex-accent-line);
  background: var(--sex-surface);
  color: var(--sex-accent-700);
  box-shadow: var(--sex-sh-accent);
  transform: translateY(-1px);
  text-decoration: none;
}
.del-wrap .del-links .del-link-list li > a:active {
  transform: translateY(0);
}

/* "Keine verknuepften Belege." ruhig setzen */
.del-wrap .del-links .del-muted {
  font-family: var(--sex-font-body);
  font-size: 12.5px;
  color: var(--sex-muted);
}

/* Eigenstaendige Inline-Verknuepfungen (.del-link ausserhalb der Kachel-Liste,
   z.B. in Tabellenzellen): nur Akzentfarbe waermer, kein Layout-Eingriff */
.del-wrap .del-link {
  color: var(--sex-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--sex-tr);
}
.del-wrap .del-link:hover {
  color: var(--sex-accent-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================================
   3) Responsive - Kacheln einspaltig auf schmalen Editor-Breiten
   ========================================================================= */
@media (max-width: 1180px) {
  .del-wrap .del-kpi {
    padding: 6px 12px 7px;
  }
  .del-wrap .del-kpi-value {
    font-size: 15.5px;
  }
  .del-wrap .del-kpi--highlight .del-kpi-value {
    font-size: 16.5px;
  }
}

@media (max-width: 720px) {
  .del-wrap .del-links .del-link-list {
    grid-template-columns: 1fr;
  }
}