/* =========================================================================
   ServiceHub Redesign  Beleg-Editor: Sub-Header + Tab-Leiste (ed-tabs)
   --------------------------------------------------------------------------
   REIN OPTISCH. Additive Schicht. NULL Funktionsaenderung.
   Verfeinert die gemeinsame Editor-Shell von Angebot / Auftrag / Rechnung /
   Lieferschein / Gutschrift an genau zwei Stellen:

     .del-doc-header   Belegkopf (Sub-Header ueber den Tabs)
     .del-tabs         Tab-Leiste (Uebersicht / Positionen / Kalkulation /
                       Ausfuehrung / Zeiten und Material / Folgebelege /
                       Dokumente / Verlauf) + .del-tab + KI-Dropdown

   Es wird NICHTS versteckt: keine Tabs entfernt, keine Buttons / Felder /
   Zeilen ausgeblendet, kein display none auf funktionalen Elementen.
   Nur Farbe, Rahmen, Radius, Abstand, Hover und Aktiv-Zustand.

   Tokens sind als eigene sex-Praezedenz lokal auf die Editor-Container
   gescoped  damit diese Datei ladereihenfolge-unabhaengig funktioniert und
   die globale Basis (Tokens, btn, badge, data-table) NICHT beruehrt.
   Bestehende Recolor-Regeln in sh-redesign-editor.css (she-Tokens) werden
   nur gezielt verfeinert, nicht dupliziert. Light und Dark via data-theme.
   ========================================================================= */

@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 {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-violet: #7C5BD6;
  --sex-violet-soft: #F0ECFB;
  --sex-violet-line: rgba(124, 91, 214, .26);

  --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-sh-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-sh-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sex-sh-lg: 0 18px 44px rgba(120, 80, 50, .14);
  --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-violet: #9D82E6;
  --sex-violet-soft: rgba(157, 130, 230, .16);
  --sex-violet-line: rgba(157, 130, 230, .32);

  --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-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-lg: 0 18px 44px rgba(0, 0, 0, .5);
}

/* =========================================================================
   1) Sub-Header  Belegkopf ueber den Tabs (.del-doc-header)
   ========================================================================= */
.del-wrap .del-doc-header {
  background: var(--sex-surface);
  border-bottom: 1px solid var(--sex-border);
  position: relative;
}
/* zarte warme Akzent-Haarlinie als oberer Abschluss des Belegkopfs */
.del-wrap .del-doc-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
              var(--sex-accent-line),
              transparent 38%);
  opacity: .55;
  pointer-events: none;
}

/* Belegnummer als markante Headline (Space Grotesk) */
.del-wrap .del-doc-header .del-doc-number,
.del-wrap .del-doc-number {
  font-family: var(--sex-font-head);
  color: var(--sex-ink);
  letter-spacing: -.01em;
  font-weight: 700;
}
.del-wrap .del-doc-header .del-doc-meta,
.del-wrap .del-doc-meta,
.del-wrap .del-empty-header {
  color: var(--sex-muted);
  font-family: var(--sex-font-body);
}

/* =========================================================================
   2) Tab-Leiste (.del-tabs) + Tabs (.del-tab)
   ========================================================================= */
.del-wrap .del-tabs {
  background: var(--sex-surface);
  border-bottom: 1px solid var(--sex-border);
  gap: 2px;
  padding: 9px 20px 0;
  /* overflow visible bleibt (KI-Dropdown) wird hier NICHT angefasst */
}

/* Basis-Tab: ruhige Grundform, warme Sekundaerfarbe */
.del-wrap .del-tabs .del-tab {
  position: relative;
  color: var(--sex-text-2);
  font-family: var(--sex-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 15px 11px;
  border-radius: var(--sex-r-sm) var(--sex-r-sm) 0 0;
  border-bottom: 2px solid transparent;
  transition: color var(--sex-tr), background var(--sex-tr);
}

/* Hover: weiche warme Flaeche, Text dunkler  kein harter Sprung */
.del-wrap .del-tabs .del-tab:hover {
  color: var(--sex-ink);
  background: var(--sex-surf-2);
}

/* Aktiver Tab: Akzentfarbe + zarte Akzentflaeche oben gerundet */
.del-wrap .del-tabs .del-tab.del-tab--active {
  color: var(--sex-accent);
  background: var(--sex-accent-soft);
  border-bottom-color: transparent;
}

/* animierter Akzent-Unterstrich (gleitet von der Mitte auf) am aktiven Tab */
.del-wrap .del-tabs .del-tab.del-tab--active::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -1px;
  height: 2.5px;
  border-radius: 2px 2px 0 0;
  background: var(--sex-accent);
  box-shadow: 0 0 0 1px var(--sex-accent-soft);
}

/* dezenter Tastatur-Fokus, ohne das Layout zu verschieben */
.del-wrap .del-tabs .del-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--sex-accent-line);
  border-radius: var(--sex-r-sm) var(--sex-r-sm) 0 0;
}

/* ---------- KI-Tab in Hausfarbe Violett (Akzent fuer KI-Werkzeuge) ------- */
.del-wrap .del-tabs .del-tab.del-tab--ai {
  color: var(--sex-violet);
  font-weight: 700;
}
.del-wrap .del-tabs .del-tab.del-tab--ai:hover {
  background: var(--sex-violet-soft);
  color: var(--sex-violet);
}
.del-wrap .del-tabs .del-tab.del-tab--ai.del-tab--active {
  color: var(--sex-violet);
  background: var(--sex-violet-soft);
}
.del-wrap .del-tabs .del-tab.del-tab--ai.del-tab--active::after {
  background: var(--sex-violet);
  box-shadow: 0 0 0 1px var(--sex-violet-soft);
}

/* =========================================================================
   3) KI-Dropdown-Menue (.del-ai-menu)  Optik-Politur
   ========================================================================= */
.del-wrap .del-ai-menu {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-sh-lg);
  padding: 6px;
}
.del-wrap .del-ai-menu-section {
  color: var(--sex-violet);
  font-weight: 700;
  letter-spacing: .06em;
}
.del-wrap .del-ai-menu-item {
  color: var(--sex-text);
  font-family: var(--sex-font-body);
  border-radius: var(--sex-r-xs);
  transition: background var(--sex-tr), color var(--sex-tr);
}
.del-wrap .del-ai-menu-item:hover {
  background: var(--sex-violet-soft);
  color: var(--sex-violet);
}
.del-wrap .del-ai-menu-divider {
  background: var(--sex-border);
}

/* =========================================================================
   4) Mobile  Tab-Leiste horizontal scrollbar, nichts faellt weg
   ========================================================================= */
@media (max-width: 640px) {
  .del-wrap .del-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px 12px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .del-wrap .del-tabs::-webkit-scrollbar {
    height: 0;
  }
  .del-wrap .del-tabs .del-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}