/* =========================================================================
   ServiceHub Redesign  --  ed-head-tabs  (REIN OPTISCH, additiv)
   -------------------------------------------------------------------------
   Feinabgleich von Editor-Kopf + Tab-Leiste an das Ziel ed3.png.
   NULL Funktionsaenderung: keine Logik, Felder, Endpunkte, Routen, Events,
   Status oder Rechte. Es wird NICHTS versteckt (kein display none auf
   Buttons, Tabs, Feldern, Zeilen, Links). Nur Farbe, Rahmen, Radius,
   Abstand, Hover und Aktiv-Zustand.

   Behandelte Stellen:
     1) Editor-Pille  (.ue-toolbar__badge)  -> accent-soft Flaeche +
        accent-Text + GROSSBUCHSTABEN  (ANGEBOTSEDITOR / AUFTRAGSEDITOR ...)
     2) Top-Aktionen  (.ue-toolbar__actions)  -> Ghost-Knoepfe + genau ein
        Primaer-Knopf (Speichern) in Marken-Akzent
     3) Tab-Leiste  (.del-tabs .del-tab)  -> aktiv = accent-Text + 2px
        accent-Unterstrich (flach, ohne gefuellte Flaeche, wie ed3);
        Hover = warme surf-2-Flaeche

   Diese Datei VERFEINERT die bestehenden ed-header / ed-tabs (sie dupliziert
   sie nicht) und gleicht den Aktiv-Tab von der gefuellten Variante auf die
   flache ed3-Variante ab. Sie ist als letzte der Editor-Redesign-Schichten
   gedacht, ist aber durch matchende Spezifitaet auch unabhaengig robust.

   Eigene, lokal gescopte --rd-Tokens auf die Editor-Container -> diese Datei
   funktioniert ladereihenfolge-unabhaengig. Die globale Basis
   (Tokens am Wurzelelement, .btn, .badge, .data-table) wird NICHT neu
   definiert. Light und Dark via [data-theme="dark"].

   Kommentar-Hygiene: keine Token-Listen mit dem Schliesser-Zeichenpaar im
   Kommentar; Klammern sind ausgeglichen; Schliess-Sequenz nur am echten Ende.
   ========================================================================= */

@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');

/* ---------- Lokale Tokens (Light), gescoped auf die Editor-Roots ---------- */
.del-wrap,
.ue-toolbar,
.qei-editor-container,
.oei-editor-container,
.iei-editor-container {
  --rd-accent: #E73D25;
  --rd-accent-700: #C5331E;
  --rd-accent-soft: #FCEDE7;
  --rd-accent-line: rgba(231, 61, 37, .22);

  --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, -apple-system, 'Segoe UI', sans-serif;
  --rd-font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

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

  --rd-sh-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --rd-sh-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --rd-sh-accent: 0 5px 14px rgba(231, 61, 37, .28);
  --rd-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Lokale Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap,
[data-theme="dark"] .ue-toolbar,
[data-theme="dark"] .qei-editor-container,
[data-theme="dark"] .oei-editor-container,
[data-theme="dark"] .iei-editor-container {
  --rd-accent: #F2543B;
  --rd-accent-700: #E0432B;
  --rd-accent-soft: rgba(242, 84, 59, .16);
  --rd-accent-line: rgba(242, 84, 59, .30);

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

/* =========================================================================
   1) Editor-Pille  (.ue-toolbar__badge)
   ed3: weiche accent-soft Flaeche, accent-Text, GROSSBUCHSTABEN, pill.
   Die JS-Inline-Variable --ue-badge-color (blau / gruen) wird hier bewusst
   nicht mehr als Fuellung benutzt; wir setzen die warme Marken-Flaeche.
   ========================================================================= */
.ue-toolbar .ue-toolbar__badge {
  display: inline-flex;
  align-items: center;
  background: var(--rd-accent-soft);
  color: var(--rd-accent);
  border: 1px solid var(--rd-accent-line);
  border-radius: var(--rd-r-pill);
  padding: 4px 12px;
  font-family: var(--rd-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
  box-shadow: none;
}

/* Belegnummer neben der Pille: ruhige Mono-Schrift, gedaempft (ed3) */
.ue-toolbar .ue-toolbar__docnumber {
  font-family: var(--rd-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--rd-text-2);
  letter-spacing: .01em;
}

/* Kundenchip dezent */
.ue-toolbar .ue-toolbar__customer {
  font-family: var(--rd-font-body);
  font-size: 12.5px;
  color: var(--rd-muted);
}

/* =========================================================================
   2) Top-Aktionen  (.ue-toolbar__actions)
   ed3: Ghost-Knoepfe (PDF / Senden / Drucken ...) + genau ein Primaer-Knopf
   (Speichern) in Marken-Akzent. Wir verfeinern beide Knopf-Familien:
   - generische .btn / .ue-toolbar__btn  -> Ghost
   - markierte Primaer-Knoepfe           -> Akzent
   ========================================================================= */
.ue-toolbar .ue-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Ghost-Grundform fuer die Aktionsknoepfe der Editor-Toolbar */
.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn,
.ue-toolbar .ue-toolbar__actions .btn-ghost,
.ue-toolbar .ue-toolbar__back.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border-2);
  color: var(--rd-text);
  border-radius: var(--rd-r-sm);
  padding: 8px 14px;
  font-family: var(--rd-font-body);
  font-weight: 600;
  font-size: 13px;
  box-shadow: var(--rd-sh-sm);
  transition: background var(--rd-tr), border-color var(--rd-tr),
    color var(--rd-tr), box-shadow var(--rd-tr), transform var(--rd-tr);
}

.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn:hover,
.ue-toolbar .ue-toolbar__actions .btn-ghost:hover,
.ue-toolbar .ue-toolbar__back.btn-ghost:hover {
  background: var(--rd-surf-2);
  border-color: var(--rd-accent-line);
  color: var(--rd-ink);
  transform: translateY(-1px);
  box-shadow: var(--rd-sh-md);
}

.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn:active,
.ue-toolbar .ue-toolbar__actions .btn-ghost:active,
.ue-toolbar .ue-toolbar__back.btn-ghost:active {
  transform: translateY(0);
  box-shadow: var(--rd-sh-sm);
}

/* Genau ein Primaer-Knopf (Speichern) in Marken-Akzent.
   Greift markierte Primaer-Varianten ab, ohne Markup zu aendern. */
.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn--primary,
.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn.is-primary,
.ue-toolbar .ue-toolbar__actions .btn-primary,
.ue-toolbar .ue-toolbar__actions [data-action="save"],
.ue-toolbar .ue-toolbar__actions [data-action="quote-save"],
.ue-toolbar .ue-toolbar__actions [data-action="order-save"] {
  background: var(--rd-accent);
  border: 1px solid var(--rd-accent);
  color: #fff;
  box-shadow: var(--rd-sh-accent);
}

.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn--primary:hover,
.ue-toolbar .ue-toolbar__actions .ue-toolbar__btn.is-primary:hover,
.ue-toolbar .ue-toolbar__actions .btn-primary:hover,
.ue-toolbar .ue-toolbar__actions [data-action="save"]:hover,
.ue-toolbar .ue-toolbar__actions [data-action="quote-save"]:hover,
.ue-toolbar .ue-toolbar__actions [data-action="order-save"]:hover {
  background: var(--rd-accent-700);
  border-color: var(--rd-accent-700);
  color: #fff;
  transform: translateY(-1px);
}

/* Drei-Punkte-Menue-Toggle in die gleiche Ghost-Sprache holen */
.ue-toolbar .ue-toolbar__actions .ue-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border-2);
  color: var(--rd-text-2);
  border-radius: var(--rd-r-sm);
  box-shadow: var(--rd-sh-sm);
  transition: background var(--rd-tr), border-color var(--rd-tr), color var(--rd-tr);
}
.ue-toolbar .ue-toolbar__actions .ue-menu-toggle:hover {
  background: var(--rd-surf-2);
  border-color: var(--rd-accent-line);
  color: var(--rd-ink);
}

/* =========================================================================
   3) Tab-Leiste  (.del-tabs .del-tab)
   ed3: flacher Aktiv-Tab -> accent-Text + 2px accent-Unterstrich, OHNE
   gefuellte Flaeche. Hover = warme surf-2-Flaeche. Hier wird der in
   sh-redesign-ed-tabs.css gesetzte accent-soft-Fill des Aktiv-Tabs auf die
   flache ed3-Variante zurueckgenommen (gleiche/hoehere Spezifitaet).
   ========================================================================= */
.del-wrap .del-tabs {
  background: var(--rd-surface);
  border-bottom: 1px solid var(--rd-border);
  gap: 4px;
  padding: 10px 20px 0;
}

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

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

/* Aktiver Tab: flach (kein Fill), accent-Text, 2px accent-Unterstrich.
   Wichtig: Flaeche bewusst transparent, um den gefuellten Aktiv-Tab der
   Basis-Tabs-Schicht auf die ed3-Optik anzugleichen. */
.del-wrap .del-tabs .del-tab.del-tab--active,
.del-wrap .del-tabs .del-tab.del-tab--active:hover {
  color: var(--rd-accent);
  background: transparent;
  border-bottom-color: transparent;
}

/* gerader 2px-Unterstrich am Aktiv-Tab (volle Tab-Breite, ed3) */
.del-wrap .del-tabs .del-tab.del-tab--active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--rd-accent);
  box-shadow: none;
}

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

/* =========================================================================
   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;
  }
  .ue-toolbar .ue-toolbar__actions {
    justify-content: flex-start;
  }
}