/* =========================================================================
   ServiceHub Redesign  —  ed-actions  (REIN OPTISCH, additiv)

   Verfeinert NUR die Aktions-Flaechen der gemeinsamen Beleg-Editor-Shell
   (Angebot / Auftrag / Rechnung / Lieferschein / Gutschrift):
     - obere Aktionsleiste  (.del-doc-header-actions + .del-btn ...)
     - Control-Panel-Variante (.ue-toolbar__actions + .ue-toolbar__btn)
     - Drei-Punkte-Menue-Toggle + Dropdown-Panels (.ue-menu-...)
     - Annahme / Unterschrift  (sh-quote-acceptance: .sh-qacc-btn / .sh-qacc-dlg)
     - Bearbeiten  (sh-order-edit: .sh-oedit-btn / .sh-oedit-dlg)
     - eingebettete PDF-Vorschau-Chrome (.del-preview ...) — BLEIBT sichtbar,
       wird nur waermer gerahmt.

   KEINE Funktions-, Markup- oder Logik-Aenderung. Es wird NICHTS versteckt
   (kein display none auf Buttons, Tabs, Feldern oder Zeilen).
   Eigene, lokal gescopte --sex-Tokens (ladereihenfolge-unabhaengig).
   Globale Basis (.btn, .badge, .data-table, :root) wird NICHT neu definiert.
   Light und Dark via [data-theme="dark"].

   Kommentar-Hygiene: in diesem File stehen keine Token-Listen mit dem
   Schliesser-Zeichenpaar; Klammern sind ausgeglichen.
   ========================================================================= */

@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-Aktions-Roots ---------- */
.del-doc-header-actions,
.ue-toolbar__actions,
.ue-menu-dropdown,
.sh-qacc-dlg,
.sh-oedit-dlg,
.del-preview {
  --sex-accent: #E73D25;
  --sex-accent-700: #C5331E;
  --sex-accent-soft: #FCEDE7;
  --sex-accent-line: rgba(231, 61, 37, .22);
  --sex-honey: #D99A2B;
  --sex-ok: #16A34A;
  --sex-ok-soft: #E9F8EF;
  --sex-warn: #C7791A;
  --sex-warn-soft: #FBF1E0;
  --sex-info: #2F6BD6;
  --sex-violet: #7C5BD6;
  --sex-violet-soft: #F0ECFB;

  --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-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sex-sh-soft: 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-sh-accent: 0 5px 14px rgba(231, 61, 37, .28);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
  --sex-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Lokale Tokens (Dark) ---------- */
[data-theme="dark"] .del-doc-header-actions,
[data-theme="dark"] .ue-toolbar__actions,
[data-theme="dark"] .ue-menu-dropdown,
[data-theme="dark"] .sh-qacc-dlg,
[data-theme="dark"] .sh-oedit-dlg,
[data-theme="dark"] .del-preview {
  --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-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-violet: #9D82E6;
  --sex-violet-soft: rgba(157, 130, 230, .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-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sex-sh-soft: 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);
  --sex-sh-accent: 0 5px 14px rgba(242, 84, 59, .30);
  --sex-ring: 0 0 0 3px var(--sex-accent-soft);
}

/* =========================================================================
   1) Obere Aktionsleiste im Belegkopf  (.del-doc-header-actions)
      Pill-Buttons in Token-Farben. Primary (Bearbeiten) = Akzent.
   ========================================================================= */

.del-doc-header-actions {
  gap: 6px;
  flex-wrap: wrap;
}

/* Sekundaer-Aktionen als ruhige warme Pillen */
.del-doc-header-actions .del-btn {
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-pill);
  background: var(--sex-surface);
  color: var(--sex-text);
  font-family: var(--sex-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px;
  line-height: 1.1;
  box-shadow: var(--sex-sh-sm);
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr), transform var(--sex-tr);
}
.del-doc-header-actions .del-btn:hover {
  background: var(--sex-accent-soft);
  border-color: var(--sex-accent-line);
  color: var(--sex-accent);
  box-shadow: var(--sex-sh-soft);
  transform: translateY(-1px);
}
.del-doc-header-actions .del-btn:active {
  transform: translateY(0) scale(.98);
  background: var(--sex-surf-3);
}
.del-doc-header-actions .del-btn:focus-visible {
  outline: none;
  box-shadow: var(--sex-ring);
  border-color: var(--sex-accent);
}

/* Primaer-Aktion (Bearbeiten) — Akzent-Pille */
.del-doc-header-actions .del-btn--primary,
.del-doc-header-actions .del-btn-primary {
  background: var(--sex-accent);
  border-color: var(--sex-accent);
  color: #fff;
  box-shadow: var(--sex-sh-accent);
}
.del-doc-header-actions .del-btn--primary:hover,
.del-doc-header-actions .del-btn-primary:hover {
  background: var(--sex-accent-700);
  border-color: var(--sex-accent-700);
  color: #fff;
  transform: translateY(-1px);
}

/* Drei-Punkte-Trigger als runder Icon-Knopf */
.del-doc-header-actions .del-btn--icon,
.del-doc-header-actions .del-btn-icon {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--sex-r-pill);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--sex-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.del-doc-header-actions .del-btn--icon:hover,
.del-doc-header-actions .del-btn-icon:hover {
  color: var(--sex-accent);
}

/* =========================================================================
   2) Control-Panel-Variante  (.ue-toolbar__actions / .ue-toolbar__btn)
      Die Basis liegt schon in sh-redesign-editor.css; hier nur Feinschliff
      der Pill-Geometrie + sauberere Aktionsgruppen-Trennung.
   ========================================================================= */

.ue-toolbar__actions {
  gap: 6px;
}

.ue-toolbar__actions .ue-toolbar__btn {
  border-radius: var(--sex-r-pill);
  padding: 7px 14px;
  font-weight: 600;
  box-shadow: var(--sex-sh-sm);
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr), transform var(--sex-tr);
}
.ue-toolbar__actions .ue-toolbar__btn:hover {
  box-shadow: var(--sex-sh-soft);
  transform: translateY(-1px);
}
.ue-toolbar__actions .ue-toolbar__btn:focus-visible {
  outline: none;
  box-shadow: var(--sex-ring);
  border-color: var(--sex-accent);
}

/* Sanfte vertikale Trennlinie vor der Aktionsgruppe (Odoo-Anmutung) */
.ue-toolbar.sh-cp .ue-toolbar__actions {
  border-left: 1px solid var(--sex-border);
  padding-left: 10px;
}

/* =========================================================================
   3) Drei-Punkte-Menue-Toggle + Dropdown-Panels (.ue-menu-...)
      Toggle als runder Pill; Aktions-Eintraege bekommen warmen Hover.
      Danger/AI-Panels in passenden Tokenfarben.
   ========================================================================= */

.ue-menu-toggle {
  border-radius: var(--sex-r-pill);
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr);
}
.ue-menu-toggle:focus-visible {
  outline: none;
  box-shadow: var(--sex-ring);
  border-color: var(--sex-accent);
}

/* Dropdown-Rahmen + Schatten waermer */
.ue-menu-dropdown {
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-sh-lg);
}

/* Action-Listen-Eintraege im Menue: warmer Hover, weiche Radien */
.ue-menu-dropdown .actions-column .btn {
  border-radius: var(--sex-r-sm);
  font-family: var(--sex-font-body);
  font-weight: 600;
  color: var(--sex-text);
  transition: background var(--sex-tr), color var(--sex-tr);
}
.ue-menu-dropdown .actions-column .btn:hover {
  background: var(--sex-accent-soft);
  color: var(--sex-accent);
}

/* Sektionstitel im Dropdown */
.ue-menu-dropdown .panel h2,
.ue-menu-dropdown .panel h3 {
  font-family: var(--sex-font-head);
  color: var(--sex-text-2);
  letter-spacing: .04em;
}

/* Gefahr-Panel (Loeschen etc.) in Akzent-Toenen */
.ue-menu-dropdown .panel[class*="danger"] {
  border-color: var(--sex-accent-line);
  background: var(--sex-accent-soft);
}
.ue-menu-dropdown .panel[class*="danger"] h2,
.ue-menu-dropdown .panel[class*="danger"] h3 {
  color: var(--sex-accent-700);
}
.ue-menu-dropdown .panel[class*="danger"] .btn:hover {
  background: rgba(231, 61, 37, .12);
  color: var(--sex-accent-700);
}

/* KI-Panel in Violett (Hausfarbe fuer KI) */
.ue-menu-dropdown .panel[class*="ai-panel"] {
  border-color: var(--sex-violet-soft);
  background: var(--sex-violet-soft);
}
.ue-menu-dropdown .panel[class*="ai-panel"] h2,
.ue-menu-dropdown .panel[class*="ai-panel"] h3 {
  color: var(--sex-violet);
}
.ue-menu-dropdown .panel[class*="ai-panel"] .btn:hover {
  background: rgba(124, 91, 214, .14);
  color: var(--sex-violet);
}

.ue-menu-separator {
  background: var(--sex-border);
}

/* =========================================================================
   4) Annahme / Unterschrift  (sh-quote-acceptance)
      Button (.sh-qacc-btn) + Dialog (.sh-qacc-dlg) inkl. Unterschrift-Bild.
   ========================================================================= */

/* Button-Variante ausserhalb der Toolbar (btn btn-ghost btn-sm) — Akzentlinie,
   um die Annahme/Unterschrift-Aktion sichtbar hervorzuheben. */
.sh-qacc-btn:not(.ue-toolbar__btn) {
  border-radius: var(--sex-r-pill);
  border: 1px solid var(--sex-accent-line);
  color: var(--sex-accent);
  background: var(--sex-accent-soft);
  font-weight: 600;
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr);
}
.sh-qacc-btn:not(.ue-toolbar__btn):hover {
  background: var(--sex-accent);
  border-color: var(--sex-accent);
  color: #fff;
  box-shadow: var(--sex-sh-accent);
}

/* Dialog-Schale */
.sh-qacc-dlg {
  border: none;
  background: transparent;
  color: var(--sex-text);
  font-family: var(--sex-font-body);
}
.sh-qacc-dlg::backdrop {
  background: rgba(35, 25, 18, .42);
  backdrop-filter: blur(2px);
}
.sh-qacc-dlg .panel {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-lg);
  box-shadow: var(--sex-sh-lg);
  padding: 22px 24px;
  max-width: 540px;
  width: 92vw;
}
.sh-qacc-dlg .panel h2 {
  font-family: var(--sex-font-head);
  color: var(--sex-ink);
  letter-spacing: -.01em;
}

/* Key/Value-Zeilen */
.sh-qacc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--sex-border);
}
.sh-qacc__row:last-of-type {
  border-bottom: none;
}
.sh-qacc__k {
  font-size: 12px;
  font-weight: 600;
  color: var(--sex-muted);
  letter-spacing: .01em;
}
.sh-qacc__v {
  font-size: 13.5px;
  color: var(--sex-ink);
  text-align: right;
  word-break: break-word;
}

/* Status-Marker */
.sh-qacc__ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--sex-r-pill);
  background: var(--sex-ok-soft);
  color: var(--sex-ok);
  font-weight: 600;
  font-size: 12.5px;
}
.sh-qacc__no {
  color: var(--sex-muted);
}

/* Unterschrift-Block: gerahmte, leicht karierte Flaeche */
.sh-qacc__sig {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--sex-border-2);
  border-radius: var(--sex-r-md);
  background:
    linear-gradient(0deg, var(--sex-surf-2), var(--sex-surf-2));
  box-shadow: var(--sex-sh-sm);
}
.sh-qacc__sig img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-sm);
  box-shadow: var(--sex-sh-sm);
}
.sh-qacc__sig-meta {
  font-size: 12px;
  color: var(--sex-text-2);
  text-align: center;
  line-height: 1.5;
}
.sh-qacc__sig-meta b {
  color: var(--sex-ink);
}

.sh-qacc__empty {
  color: var(--sex-muted);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 6px 0;
}

/* Schliessen-Button im Annahme-Dialog */
.sh-qacc-dlg .btn-ghost {
  border-radius: var(--sex-r-pill);
  border: 1px solid var(--sex-border-2);
  background: var(--sex-surface);
  color: var(--sex-text);
  font-weight: 600;
  transition: background var(--sex-tr), border-color var(--sex-tr), color var(--sex-tr);
}
.sh-qacc-dlg .btn-ghost:hover {
  background: var(--sex-surf-2);
  border-color: var(--sex-accent);
  color: var(--sex-accent);
}

/* =========================================================================
   5) Bearbeiten  (sh-order-edit)
      Button (.sh-oedit-btn) + Dialog-Schale (.sh-oedit-dlg).
      Die Feld-Mikro-Styles bringt sh-order-edit.js selbst mit; hier nur
      Schale, Akzent-Fokus und der Primary-Speichern-Knopf.
   ========================================================================= */

.sh-oedit-btn:not(.ue-toolbar__btn) {
  border-radius: var(--sex-r-pill);
  border: 1px solid var(--sex-border-2);
  background: var(--sex-surface);
  color: var(--sex-text);
  font-weight: 600;
  transition: background var(--sex-tr), border-color var(--sex-tr),
              color var(--sex-tr), box-shadow var(--sex-tr);
}
.sh-oedit-btn:not(.ue-toolbar__btn):hover {
  background: var(--sex-accent-soft);
  border-color: var(--sex-accent-line);
  color: var(--sex-accent);
  box-shadow: var(--sex-sh-sm);
}

.sh-oedit-dlg {
  border: none;
  background: transparent;
  color: var(--sex-text);
  font-family: var(--sex-font-body);
}
.sh-oedit-dlg::backdrop {
  background: rgba(35, 25, 18, .42);
  backdrop-filter: blur(2px);
}
.sh-oedit-dlg .panel {
  background: var(--sex-surface);
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-lg);
  box-shadow: var(--sex-sh-lg);
  padding: 22px 24px;
}
.sh-oedit-dlg .panel h2 {
  font-family: var(--sex-font-head);
  color: var(--sex-ink);
  letter-spacing: -.01em;
}

/* Akzent-Fokusring auf den Editierfeldern */
.sh-oedit-dlg .sh-oedit__f input:focus,
.sh-oedit-dlg .sh-oedit__f textarea:focus,
.sh-oedit-dlg .sh-oedit__f select:focus {
  outline: none;
  border-color: var(--sex-accent);
  box-shadow: var(--sex-ring);
}

/* Speichern = Akzent-Pille; Abbrechen = ruhige Pille */
.sh-oedit-dlg .btn-primary,
.sh-oedit-dlg .sh-oedit-save {
  border-radius: var(--sex-r-pill);
  background: var(--sex-accent);
  border: 1px solid var(--sex-accent);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--sex-sh-accent);
  transition: background var(--sex-tr), transform var(--sex-tr), box-shadow var(--sex-tr);
}
.sh-oedit-dlg .btn-primary:hover:not(:disabled),
.sh-oedit-dlg .sh-oedit-save:hover:not(:disabled) {
  background: var(--sex-accent-700);
  border-color: var(--sex-accent-700);
  transform: translateY(-1px);
}
.sh-oedit-dlg .btn-primary:disabled,
.sh-oedit-dlg .sh-oedit-save:disabled {
  opacity: .55;
  box-shadow: none;
}
.sh-oedit-dlg .btn-ghost {
  border-radius: var(--sex-r-pill);
  border: 1px solid var(--sex-border-2);
  background: var(--sex-surface);
  color: var(--sex-text);
  font-weight: 600;
  transition: background var(--sex-tr), border-color var(--sex-tr), color var(--sex-tr);
}
.sh-oedit-dlg .btn-ghost:hover {
  background: var(--sex-surf-2);
  border-color: var(--sex-accent);
  color: var(--sex-accent);
}

/* =========================================================================
   6) Eingebettete PDF-Vorschau-Chrome  (.del-preview ...)
      BLEIBT SICHTBAR — nur waermer gerahmt. Keine Layout-Aenderung,
      kein Verstecken; Breite/Collapse-Logik der App bleibt unberuehrt.
   ========================================================================= */

.del-preview {
  background: var(--sex-surface);
  border-left: 1px solid var(--sex-border);
}

.del-preview-header {
  border-bottom: 1px solid var(--sex-border);
}
.del-preview-header h3 {
  font-family: var(--sex-font-head);
  color: var(--sex-ink);
  letter-spacing: -.01em;
}

.del-preview-toolbar {
  border-bottom: 1px solid var(--sex-border);
  background: var(--sex-surf-2);
}

.del-preview-placeholder {
  color: var(--sex-muted);
}

/* Das "Papier" der Vorschau: weicher Rahmen + warmer Schatten */
.del-preview-doc {
  background: #fff;
  border: 1px solid var(--sex-border);
  border-radius: var(--sex-r-md);
  box-shadow: var(--sex-sh-soft);
}
.del-preview-doc-header {
  border-bottom: 1px solid var(--sex-border);
  color: var(--sex-ink);
}
.del-preview-doc-footer {
  border-top: 1px solid var(--sex-border);
  background: var(--sex-surf-2);
  color: var(--sex-text-2);
}

/* Vorschau-Positions-Tabelle (nur Chrome) */
.del-preview-table th {
  background: var(--sex-surf-2);
  color: var(--sex-muted);
  letter-spacing: .03em;
}
.del-preview-table td,
.del-preview-table th {
  border-color: var(--sex-border);
}

/* Vorschau-Summenblock */
.del-preview-totals {
  border-top: 1px solid var(--sex-border-2);
}
.del-preview-total-row {
  color: var(--sex-text-2);
}
.del-preview-total-row--final {
  color: var(--sex-ink);
  font-family: var(--sex-font-head);
  font-weight: 700;
}

/* Zahlenwerte in der Vorschau in Mono (passt zum Belegstil) */
.del-preview-align-right,
.del-preview-col-qty,
.del-preview-col-price,
.del-preview-col-total {
  font-family: var(--sex-font-mono);
}

/* Hinweis-/Vermerk-Noten der Vorschau */
.del-preview-internal-note,
.del-preview-pdf-note {
  color: var(--sex-muted);
}