/* =========================================================================
   ServiceHub — REDESIGN „Rechnungen" (Bereich: invoices)
   Rein optische, additive Schicht (Richtung A+B „eleviert", warm).
   NULL Funktionsänderung. Genau eine Datei. Light + Dark via [data-theme].
   ──────────────────────────────────────────────────────────────────────────
   Scope:
     • Liste  → der Container, der die <h1>Ausgangsrechnungen</h1> trägt,
                wird per :has() markiert (.sh-rdi-list). Kein fremder Screen
                bekommt diese Regeln, weil der Anker nur in der Rechnungsliste
                vorkommt.
     • Detail → der Beleg-Editor (.iei-editor-container) wird über den
                Rechnungs-/Gutschrift-Badge identifiziert (--ue-badge-color
                #2ecc71 / #e74c3c) → .sh-rdi-doc.
   Tokens werden LOKAL auf diese beiden Container gelegt (wie die anderen
   sh-redesign-Module), damit nichts von der Ladereihenfolge abhängt.
   Globale Basis (.btn/.badge/.data-table/:root) wird NICHT umdefiniert.
   ========================================================================= */
@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');

/* ---------------------------------------------------------------------------
   Bereichs-Anker (kein Markup-Eingriff):
   - Listen-Panel: nächster gemeinsamer Vorfahr, der die Rechnungs-Überschrift
     enthält. Wir hängen die Tokens an das <section class="panel"> direkt nach
     dem Header sowie an den Header selbst über die page-header.
--------------------------------------------------------------------------- */
.sh-rdi, .sh-rdi-list, .sh-rdi-doc { /* Token-Träger */
  --sh-accent:#E73D25; --sh-accent-700:#C5331E; --sh-accent-600:#D6371F;
  --sh-accent-soft:#FCEDE7; --sh-accent-line:rgba(231,61,37,.22);
  --sh-honey:#D99A2B; --sh-honey-soft:#FBF0DA;
  --sh-ok:#16A34A; --sh-ok-soft:#E9F8EF;
  --sh-warn:#C7791A; --sh-warn-soft:#FBF1E0;
  --sh-info:#2F6BD6; --sh-info-soft:#EAF1FC;
  --sh-violet:#7C5BD6; --sh-violet-soft:#F0ECFB;
  --sh-bg:#FAF6F2; --sh-surface:#FFFFFF; --sh-surf-2:#F6F1EB; --sh-surf-3:#EFE8E0;
  --sh-ink:#231C17; --sh-text:#463D35; --sh-text-2:#6B6157; --sh-muted:#9A8F84;
  --sh-border:#EEE5DC; --sh-border-2:#E3D9CE; --sh-field:#F6F1EB;
  --sh-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --sh-font-body:'Figtree',system-ui,sans-serif;
  --sh-font-mono:'Space Mono',ui-monospace,monospace;
  --sh-r-xs:7px; --sh-r-sm:9px; --sh-r-md:12px; --sh-r-lg:16px; --sh-r-pill:999px;
  --sh-sm:0 1px 2px rgba(120,80,50,.06);
  --sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --sh-lg:0 18px 44px rgba(120,80,50,.14);
  --sh-accent-glow:0 5px 14px rgba(231,61,37,.28);
  --sh-ring:0 0 0 3px var(--sh-accent-soft);
  --sh-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .sh-rdi,
[data-theme="dark"] .sh-rdi-list,
[data-theme="dark"] .sh-rdi-doc {
  --sh-accent:#F2543B; --sh-accent-700:#E0432B; --sh-accent-600:#EC4A30;
  --sh-accent-soft:rgba(242,84,59,.16); --sh-accent-line:rgba(242,84,59,.30);
  --sh-honey:#E6AE4A; --sh-honey-soft:rgba(230,174,74,.16);
  --sh-ok:#3BC07A; --sh-ok-soft:rgba(59,192,122,.15);
  --sh-warn:#E5A33C; --sh-warn-soft:rgba(229,163,60,.15);
  --sh-info:#5C8FE8; --sh-info-soft:rgba(92,143,232,.16);
  --sh-violet:#9D82E6; --sh-violet-soft:rgba(157,130,230,.16);
  --sh-bg:#15120F; --sh-surface:#1E1A16; --sh-surf-2:#241F1A; --sh-surf-3:#2C2620;
  --sh-ink:#F6F1EC; --sh-text:#E2D8CE; --sh-text-2:#B3A99E; --sh-muted:#8C8175;
  --sh-border:#2E2822; --sh-border-2:#3A332B; --sh-field:#241F1A;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --sh-lg:0 18px 44px rgba(0,0,0,.5);
  --sh-accent-glow:0 5px 14px rgba(242,84,59,.30);
  --sh-ring:0 0 0 3px var(--sh-accent-soft);
}

/* =========================================================================
   1) LISTE „Ausgangsrechnungen"
   Anker: page-header, dessen H1 „Ausgangsrechnungen" lautet, + das darauf
   folgende Panel. Wir markieren beide via :has().
   ========================================================================= */

/* Header der Rechnungsliste */
.page-header.sh-header:has(> .sh-header__left h1):has(.sh-header__context) {
  /* generischer Header-Polish bleibt dem Fundament überlassen — wir greifen
     nur, wenn es WIRKLICH die Rechnungsliste ist (siehe Spezial-Selector). */
}

/* — exakter Listen-Scope: der Hauptbereich, der die Rechnungs-Liste zeigt — */
#mainContent:has(> .page-header .sh-header__left h1),
.main-content:has(> .page-header .sh-header__left h1) { }

/* Rechnungsliste sicher treffen: das Panel, das die data-table mit
   Rechnungs-Spalten + den Statusfilter (#invoiceStatusFilter) enthält. */
.panel:has(#invoiceStatusFilter),
.panel:has(#invoiceTableBody),
.panel:has([data-invoices-board]),
.sh-kanban-wrap[data-invoices-board] {
  --sh-accent:#E73D25; --sh-accent-700:#C5331E; --sh-accent-soft:#FCEDE7;
  --sh-honey:#D99A2B; --sh-ok:#16A34A; --sh-ok-soft:#E9F8EF;
  --sh-warn:#C7791A; --sh-warn-soft:#FBF1E0; --sh-info:#2F6BD6; --sh-info-soft:#EAF1FC;
  --sh-surface:#FFFFFF; --sh-surf-2:#F6F1EB; --sh-surf-3:#EFE8E0;
  --sh-ink:#231C17; --sh-text:#463D35; --sh-text-2:#6B6157; --sh-muted:#9A8F84;
  --sh-border:#EEE5DC; --sh-border-2:#E3D9CE; --sh-field:#F6F1EB;
  --sh-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --sh-font-mono:'Space Mono',ui-monospace,monospace;
  --sh-r-md:12px; --sh-r-lg:16px; --sh-r-pill:999px;
  --sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --sh-ok-i:#16A34A;
}
[data-theme="dark"] .panel:has(#invoiceStatusFilter),
[data-theme="dark"] .panel:has(#invoiceTableBody),
[data-theme="dark"] .panel:has([data-invoices-board]),
[data-theme="dark"] .sh-kanban-wrap[data-invoices-board] {
  --sh-accent:#F2543B; --sh-accent-700:#E0432B; --sh-accent-soft:rgba(242,84,59,.16);
  --sh-honey:#E6AE4A; --sh-ok:#3BC07A; --sh-ok-soft:rgba(59,192,122,.15);
  --sh-warn:#E5A33C; --sh-warn-soft:rgba(229,163,60,.15); --sh-info:#5C8FE8; --sh-info-soft:rgba(92,143,232,.16);
  --sh-surface:#1E1A16; --sh-surf-2:#241F1A; --sh-surf-3:#2C2620;
  --sh-ink:#F6F1EC; --sh-text:#E2D8CE; --sh-text-2:#B3A99E; --sh-muted:#8C8175;
  --sh-border:#2E2822; --sh-border-2:#3A332B; --sh-field:#241F1A;
  --sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
}

/* ---- Header der Rechnungsliste: warme Typo + zarter Unterstrich ---- */
.page-header.sh-header:has(+ .sh-batchbar #invoicesSelCount),
.page-header.sh-header:has(~ .panel #invoiceStatusFilter) {
  border-bottom:1px solid var(--sh-border,#EEE5DC);
  padding-bottom:14px;
}
.page-header.sh-header:has(~ .panel #invoiceStatusFilter) h1 {
  font-family:var(--sh-font-head,'Space Grotesk',system-ui,sans-serif);
  letter-spacing:-.02em; color:var(--sh-ink,#231C17);
}
.page-header.sh-header:has(~ .panel #invoiceStatusFilter) .sh-header__context {
  color:var(--sh-muted,#9A8F84);
}

/* ---- Panel-Karte (Rechnungsliste) ---- */
.panel:has(#invoiceStatusFilter),
.panel:has([data-invoices-board]) {
  background:var(--sh-surface,#fff);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-lg,16px);
  box-shadow:var(--sh-md,0 6px 20px rgba(120,80,50,.07));
}

/* ---- Filterzeile ---- */
.panel:has(#invoiceStatusFilter) .filter-toolbar {
  gap:10px; align-items:center;
}
.panel:has(#invoiceStatusFilter) #invoiceStatusFilter,
.panel:has(#invoiceStatusFilter) #invoicesGroupBy {
  background:var(--sh-field,#F6F1EB);
  border:1px solid var(--sh-border-2,#E3D9CE);
  border-radius:var(--sh-r-sm,9px);
  color:var(--sh-ink,#231C17);
  padding:9px 34px 9px 12px;
  font-family:var(--sh-font-body,'Figtree',system-ui,sans-serif);
  font-weight:600; font-size:13px;
  transition:var(--sh-tr,.16s ease);
}
.panel:has(#invoiceStatusFilter) #invoiceStatusFilter:focus,
.panel:has(#invoiceStatusFilter) #invoicesGroupBy:focus {
  outline:none; border-color:var(--sh-accent,#E73D25); box-shadow:var(--sh-ring);
}

/* ---- Ansicht-Umschalter (Liste / Kanban) ---- */
.panel:has(#invoiceStatusFilter) .sh-view-toggle,
.page-header.sh-header:has(~ .panel #invoiceStatusFilter) .sh-view-toggle {
  background:var(--sh-field,#F6F1EB);
  border:1px solid var(--sh-border-2,#E3D9CE);
  border-radius:var(--sh-r-sm,9px);
  padding:3px; gap:2px;
}
.page-header.sh-header:has(~ .panel #invoiceStatusFilter) .sh-view-toggle button {
  border-radius:var(--sh-r-xs,7px);
  color:var(--sh-text-2,#6B6157);
  transition:var(--sh-tr,.16s ease);
}
.page-header.sh-header:has(~ .panel #invoiceStatusFilter) .sh-view-toggle button.active {
  background:var(--sh-surface,#fff);
  color:var(--sh-accent,#E73D25);
  box-shadow:var(--sh-sm,0 1px 2px rgba(120,80,50,.06));
}

/* ---- aktive-Filter-Facetten ---- */
.panel:has(#invoiceStatusFilter) .sh-facet {
  background:var(--sh-accent-soft,#FCEDE7);
  border:1px solid var(--sh-accent-line,rgba(231,61,37,.22));
  border-radius:var(--sh-r-pill,999px);
  color:var(--sh-accent,#E73D25);
  font-weight:600;
}
.panel:has(#invoiceStatusFilter) .sh-facet__k { color:var(--sh-accent-700,#C5331E); opacity:.85; }
.panel:has(#invoiceStatusFilter) .sh-facet__x { color:var(--sh-accent-700,#C5331E); }
.panel:has(#invoiceStatusFilter) .sh-facet-clear-all { color:var(--sh-text-2,#6B6157); }

/* ---- Batch-/Auswahlleiste ---- */
.sh-batchbar:has(#invoicesSelCount) {
  background:var(--sh-accent-soft,#FCEDE7);
  border:1px solid var(--sh-accent-line,rgba(231,61,37,.22));
  border-radius:var(--sh-r-md,12px);
  color:var(--sh-accent-700,#C5331E);
}
.sh-batchbar:has(#invoicesSelCount) .sh-batchbar__lbl strong { color:var(--sh-accent,#E73D25); }

/* ---- Tabelle ---- */
.panel:has(#invoiceTableBody) .data-table {
  border-collapse:separate; border-spacing:0;
}
.panel:has(#invoiceTableBody) .data-table thead th {
  font-family:var(--sh-font-body,'Figtree',system-ui,sans-serif);
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--sh-muted,#9A8F84);
  background:var(--sh-surf-2,#F6F1EB);
  border-bottom:1px solid var(--sh-border,#EEE5DC);
  padding:11px 16px;
}
.panel:has(#invoiceTableBody) .data-table tbody td {
  border-bottom:1px solid var(--sh-border,#EEE5DC);
  color:var(--sh-text,#463D35);
  font-size:13px;
  padding:13px 16px;
  vertical-align:middle;
}
.panel:has(#invoiceTableBody) .data-table tbody tr {
  transition:background .12s ease;
}
.panel:has(#invoiceTableBody) .data-table tbody tr:hover {
  background:var(--sh-surf-2,#F6F1EB);
}
.panel:has(#invoiceTableBody) .data-table tbody tr:last-child td { border-bottom:none; }
.panel:has(#invoiceTableBody) .data-table tbody td strong { color:var(--sh-ink,#231C17); font-weight:600; }
/* Rechnungsnr. + Brutto monospaced wie im Designsystem (Zahlen) */
.panel:has(#invoiceTableBody) .data-table tbody td:nth-child(1) strong,
.panel:has(#invoiceTableBody) .data-table tbody td:nth-last-child(2) strong {
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
  letter-spacing:-.02em;
}
.panel:has(#invoiceTableBody) .data-table .table-actions a,
.panel:has(#invoiceTableBody) .data-table .table-actions { white-space:nowrap; }
.panel:has(#invoiceTableBody) .data-table a[data-open-order],
.panel:has(#invoiceTableBody) .data-table a[data-open-invoice] {
  color:var(--sh-accent,#E73D25); font-weight:600;
}

/* ---- Gruppen-Zeilen (Group-By) ---- */
.panel:has(#invoiceTableBody) .sh-group-row td {
  background:var(--sh-surf-3,#EFE8E0);
  color:var(--sh-ink,#231C17);
  font-weight:600;
}
.panel:has(#invoiceTableBody) .sh-group-row .sh-group-count {
  background:var(--sh-surface,#fff);
  border:1px solid var(--sh-border-2,#E3D9CE);
  border-radius:var(--sh-r-pill,999px);
  color:var(--sh-text-2,#6B6157);
}
.panel:has(#invoiceTableBody) .sh-group-row .sh-group-sum {
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
  color:var(--sh-accent,#E73D25);
}

/* ---- Leerzustand ---- */
.panel:has(#invoiceTableBody) .sh-empty-state .sh-empty-state__icon { filter:saturate(.9); }
.panel:has(#invoiceTableBody) .sh-empty-state strong { color:var(--sh-ink,#231C17); font-family:var(--sh-font-head,'Space Grotesk',system-ui,sans-serif); }

/* ---- Überfällig-Hinweis (warm-rot) ---- */
.panel:has(#invoiceStatusFilter) .sales-warning,
.sales-warning:has(strong) {
  /* nur innerhalb der Rechnungsliste, daher unter dem Panel-Scope */
}
.panel:has(#invoiceStatusFilter) .sales-warning {
  background:var(--sh-accent-soft,#FCEDE7);
  border:1px solid var(--sh-accent-line,rgba(231,61,37,.22));
  border-left:3px solid var(--sh-accent,#E73D25);
  border-radius:var(--sh-r-md,12px);
  color:var(--sh-accent-700,#C5331E);
}

/* =========================================================================
   1b) STATUS-BADGES der Rechnungsliste
   Markup: <span class="status-badge status-badge--TONE sh-badge sh-badge--SHTONE">
   Wir re-skinnen NUR innerhalb des Rechnungs-Panels (Liste/Kanban), damit
   keine andere Liste betroffen ist. overdue = accent, paid = ok.
   ========================================================================= */
.panel:has(#invoiceTableBody) .status-badge,
.sh-kanban-wrap[data-invoices-board] .status-badge {
  border-radius:var(--sh-r-pill,999px);
  font-weight:600; font-size:11.5px;
  padding:3px 11px;
  border:1px solid transparent;
}
/* neutral / Entwurf */
.panel:has(#invoiceTableBody) .status-badge--neutral,
.sh-kanban-wrap[data-invoices-board] .status-badge--neutral {
  background:var(--sh-surf-2,#F6F1EB); color:var(--sh-text-2,#6B6157);
  border-color:var(--sh-border-2,#E3D9CE);
}
/* aktiv / freigegeben-ausgestellt-versendet → info-blau */
.panel:has(#invoiceTableBody) .status-badge--active,
.panel:has(#invoiceTableBody) .status-badge--info,
.sh-kanban-wrap[data-invoices-board] .status-badge--active,
.sh-kanban-wrap[data-invoices-board] .status-badge--info {
  background:var(--sh-info-soft,#EAF1FC); color:var(--sh-info,#2F6BD6);
}
/* bezahlt / erfolg → grün */
.panel:has(#invoiceTableBody) .status-badge--success,
.sh-kanban-wrap[data-invoices-board] .status-badge--success {
  background:var(--sh-ok-soft,#E9F8EF); color:var(--sh-ok,#16A34A);
}
/* teilbezahlt / warnung → honey */
.panel:has(#invoiceTableBody) .status-badge--warning,
.sh-kanban-wrap[data-invoices-board] .status-badge--warning {
  background:var(--sh-warn-soft,#FBF1E0); color:var(--sh-warn,#C7791A);
}
/* überfällig / storniert / gefahr → accent-rot (überfällig = accent lt. Spec) */
.panel:has(#invoiceTableBody) .status-badge--danger,
.panel:has(#invoiceTableBody) .status-badge--overdue,
.sh-kanban-wrap[data-invoices-board] .status-badge--danger,
.sh-kanban-wrap[data-invoices-board] .status-badge--overdue {
  background:var(--sh-accent-soft,#FCEDE7); color:var(--sh-accent,#E73D25);
}

/* =========================================================================
   1c) KANBAN-Ansicht der Rechnungen
   ========================================================================= */
.sh-kanban-wrap[data-invoices-board] .sh-kanban { gap:14px; }
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col {
  background:var(--sh-surf-2,#F6F1EB);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-md,12px);
}
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col-head {
  border-bottom:1px solid var(--sh-border,#EEE5DC);
}
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col-title {
  font-family:var(--sh-font-head,'Space Grotesk',system-ui,sans-serif);
  color:var(--sh-ink,#231C17); font-weight:700;
}
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col-meta { color:var(--sh-muted,#9A8F84); }
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col-sum {
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
  color:var(--sh-text-2,#6B6157);
}
.sh-kanban-wrap[data-invoices-board] .sh-kanban__card {
  background:var(--sh-surface,#fff);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-md,12px);
  box-shadow:var(--sh-sm,0 1px 2px rgba(120,80,50,.06));
  transition:var(--sh-tr,.16s ease);
}
.sh-kanban-wrap[data-invoices-board] .sh-kanban__card:hover {
  border-color:var(--sh-accent-line,rgba(231,61,37,.22));
  box-shadow:var(--sh-md,0 6px 20px rgba(120,80,50,.07));
  transform:translateY(-1px);
}
.sh-kanban-wrap[data-invoices-board] .sh-kanban__card-no {
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
  color:var(--sh-ink,#231C17);
}
.sh-kanban-wrap[data-invoices-board] .sh-kanban__card-title { color:var(--sh-ink,#231C17); font-weight:600; }
.sh-kanban-wrap[data-invoices-board] .sh-kanban__card-customer,
.sh-kanban-wrap[data-invoices-board] .sh-kanban__card-date { color:var(--sh-muted,#9A8F84); }
/* farbiger Spalten-Akzent links je Tonalität */
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col--neutral { box-shadow:inset 3px 0 0 var(--sh-border-2,#E3D9CE); }
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col--info    { box-shadow:inset 3px 0 0 var(--sh-info,#2F6BD6); }
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col--success { box-shadow:inset 3px 0 0 var(--sh-ok,#16A34A); }
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col--warn,
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col--warning { box-shadow:inset 3px 0 0 var(--sh-warn,#C7791A); }
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col--danger,
.sh-kanban-wrap[data-invoices-board] .sh-kanban__col--accent  { box-shadow:inset 3px 0 0 var(--sh-accent,#E73D25); }

/* =========================================================================
   2) DETAIL / BELEG-EDITOR (Rechnung + Gutschrift)
   Anker: .iei-editor-container, dessen Toolbar-Badge die Rechnungs-/Gutschrift-
   Farbe trägt. Eigener Stepper (draft→approved→issued→paid) via .sh-statusbar.
   Gleiche Editor-Shell-Optik wie die übrigen Belegtypen.
   ========================================================================= */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]),
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) {
  --sh-accent:#E73D25; --sh-accent-700:#C5331E; --sh-accent-soft:#FCEDE7;
  --sh-accent-line:rgba(231,61,37,.22);
  --sh-honey:#D99A2B; --sh-ok:#16A34A; --sh-ok-soft:#E9F8EF;
  --sh-warn:#C7791A; --sh-warn-soft:#FBF1E0; --sh-info:#2F6BD6; --sh-info-soft:#EAF1FC;
  --sh-violet:#7C5BD6; --sh-violet-soft:#F0ECFB;
  --sh-surface:#FFFFFF; --sh-surf-2:#F6F1EB; --sh-surf-3:#EFE8E0;
  --sh-ink:#231C17; --sh-text:#463D35; --sh-text-2:#6B6157; --sh-muted:#9A8F84;
  --sh-border:#EEE5DC; --sh-border-2:#E3D9CE; --sh-field:#F6F1EB;
  --sh-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --sh-font-body:'Figtree',system-ui,sans-serif;
  --sh-font-mono:'Space Mono',ui-monospace,monospace;
  --sh-r-xs:7px; --sh-r-sm:9px; --sh-r-md:12px; --sh-r-lg:16px; --sh-r-pill:999px;
  --sh-sm:0 1px 2px rgba(120,80,50,.06);
  --sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --sh-accent-glow:0 5px 14px rgba(231,61,37,.28);
  --sh-tr:.16s cubic-bezier(.2,.7,.3,1);
  /* Brücke zu den Basis-Token-Namen, die sh-statusbar.css/Editor nutzen,
     damit die geerbte Statusbar/Chrome die warmen Werte zieht. */
  --sh-surface-2:var(--sh-surf-2);
  --sh-text-muted:var(--sh-muted);
  --sh-danger:var(--sh-accent); --sh-danger-soft:var(--sh-accent-soft);
}
[data-theme="dark"] .iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]),
[data-theme="dark"] .iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) {
  --sh-accent:#F2543B; --sh-accent-700:#E0432B; --sh-accent-soft:rgba(242,84,59,.16);
  --sh-accent-line:rgba(242,84,59,.30);
  --sh-honey:#E6AE4A; --sh-ok:#3BC07A; --sh-ok-soft:rgba(59,192,122,.15);
  --sh-warn:#E5A33C; --sh-warn-soft:rgba(229,163,60,.15); --sh-info:#5C8FE8; --sh-info-soft:rgba(92,143,232,.16);
  --sh-violet:#9D82E6; --sh-violet-soft:rgba(157,130,230,.16);
  --sh-surface:#1E1A16; --sh-surf-2:#241F1A; --sh-surf-3:#2C2620;
  --sh-ink:#F6F1EC; --sh-text:#E2D8CE; --sh-text-2:#B3A99E; --sh-muted:#8C8175;
  --sh-border:#2E2822; --sh-border-2:#3A332B; --sh-field:#241F1A;
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --sh-accent-glow:0 5px 14px rgba(242,84,59,.30);
  --sh-surface-2:var(--sh-surf-2); --sh-text-muted:var(--sh-muted);
  --sh-danger:var(--sh-accent); --sh-danger-soft:var(--sh-accent-soft);
}

/* gemeinsamer Editor-Scope-Alias (kürzt die Selektoren unten) */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]),
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) {
  font-family:var(--sh-font-body,'Figtree',system-ui,sans-serif);
  color:var(--sh-text,#463D35);
}

/* ---- Toolbar (Beleg-Editor) ---- */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-toolbar,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-toolbar {
  background:var(--sh-surface,#fff);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-lg,16px) var(--sh-r-lg,16px) 0 0;
  box-shadow:var(--sh-sm,0 1px 2px rgba(120,80,50,.06));
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-toolbar__docnumber,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-toolbar__docnumber {
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
  color:var(--sh-ink,#231C17); letter-spacing:-.01em;
}
/* Rechnungs-Badge: warm-grün → bleibt grün, aber abgestimmt; Gutschrift bleibt rot.
   Wir setzen nur Form/Typo, Farbe kommt aus --ue-badge-color (Markup). */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-toolbar__badge,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-toolbar__badge {
  border-radius:var(--sh-r-pill,999px);
  font-weight:600; font-size:11.5px; letter-spacing:.01em;
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-toolbar__back,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-toolbar__back {
  border-radius:var(--sh-r-sm,9px);
  border:1px solid var(--sh-border-2,#E3D9CE);
  color:var(--sh-text-2,#6B6157);
  transition:var(--sh-tr,.16s ease);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-toolbar__back:hover,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-toolbar__back:hover {
  border-color:var(--sh-accent,#E73D25); color:var(--sh-accent,#E73D25); background:var(--sh-accent-soft,#FCEDE7);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-toolbar__btn,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-toolbar__btn,
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-menu-toggle,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-menu-toggle {
  border-radius:var(--sh-r-sm,9px);
  color:var(--sh-text-2,#6B6157);
  transition:var(--sh-tr,.16s ease);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-toolbar__btn:hover,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-toolbar__btn:hover,
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-menu-toggle:hover,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-menu-toggle:hover {
  background:var(--sh-surf-2,#F6F1EB); color:var(--sh-ink,#231C17);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .ue-menu-dropdown,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .ue-menu-dropdown {
  background:var(--sh-surface,#fff);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-md,12px);
  box-shadow:var(--sh-md,0 6px 20px rgba(120,80,50,.07));
}

/* ---- Stepper (draft→approved→issued→paid) ----
   Markup geerbt: .sh-statusbar > .sh-statusbar__stage (.is-done/.is-current/.is-cancelled)
   Wir überschreiben die Farben gescoped auf den Rechnungs-Editor (warm). ---- */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sh-cp-statusbar,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sh-cp-statusbar {
  margin:0 0 14px;
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sh-statusbar__stage,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sh-statusbar__stage {
  background:var(--sh-surf-2,#F6F1EB);
  color:var(--sh-text-2,#6B6157);
  font-family:var(--sh-font-body,'Figtree',system-ui,sans-serif);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sh-statusbar__stage.is-done,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sh-statusbar__stage.is-done {
  background:var(--sh-accent-soft,#FCEDE7); color:var(--sh-accent,#E73D25);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sh-statusbar__stage.is-current,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sh-statusbar__stage.is-current {
  background:var(--sh-accent,#E73D25); color:#fff;
  box-shadow:var(--sh-accent-glow,0 5px 14px rgba(231,61,37,.28));
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sh-statusbar__stage.is-cancelled,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sh-statusbar__stage.is-cancelled {
  background:var(--sh-warn-soft,#FBF1E0); color:var(--sh-warn,#C7791A);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sh-statusbar__stage.is-current.is-cancelled,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sh-statusbar__stage.is-current.is-cancelled {
  background:var(--sh-warn,#C7791A); color:#fff;
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sh-statusbar__num,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sh-statusbar__num {
  background:rgba(120,80,50,.12);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sh-statusbar__stage.is-current .sh-statusbar__num,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sh-statusbar__stage.is-current .sh-statusbar__num {
  background:rgba(255,255,255,.28);
}

/* ---- Editor-Layout + Sidebar ---- */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .iei-editor-mount,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .iei-editor-mount {
  background:var(--sh-surface,#fff);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-md,12px);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .iei-detail-sidebar,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .iei-detail-sidebar {
  background:var(--sh-surf-2,#F6F1EB);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-md,12px);
}

/* ---- Karten / Panels innerhalb des Editors ---- */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .panel,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .panel,
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sales-card,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sales-card {
  background:var(--sh-surface,#fff);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-md,12px);
  box-shadow:var(--sh-sm,0 1px 2px rgba(120,80,50,.06));
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .iei-panel-title,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .iei-panel-title,
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .panel h2,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .panel h2,
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .panel h3,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .panel h3,
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .sales-card h3,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .sales-card h3 {
  font-family:var(--sh-font-head,'Space Grotesk',system-ui,sans-serif);
  color:var(--sh-ink,#231C17); letter-spacing:-.01em;
}

/* ---- Geldbeträge / Summen im Editor → mono + Akzent für „offen/fällig" ---- */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .invoice-summary-value,
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .invoice-fact-value {
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
  color:var(--sh-ink,#231C17);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .invoice-summary-label,
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .invoice-fact-label {
  color:var(--sh-muted,#9A8F84); font-weight:600;
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .invoice-summary-card {
  background:var(--sh-surface,#fff);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-md,12px);
}

/* ---- KI-Assistent-Panel (Violet-Akzent, abgestimmt) ---- */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .iei-ai-panel,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .iei-ai-panel {
  border-left:3px solid var(--sh-violet,#7C5BD6);
  background:var(--sh-surface,#fff);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .iei-ai-panel .iei-panel-title,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .iei-ai-panel .iei-panel-title {
  color:var(--sh-violet,#7C5BD6);
}

/* ---- Buttons im Editor (nur Form/Hover; Primärfarbe bleibt Fundament) ---- */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .btn-ghost:hover,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .btn-ghost:hover {
  border-color:var(--sh-accent,#E73D25); color:var(--sh-accent,#E73D25); background:var(--sh-accent-soft,#FCEDE7);
}

/* ---- Status-/Status-Badge im Editor-Body ---- */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .status-badge--success,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .status-badge--success {
  background:var(--sh-ok-soft,#E9F8EF); color:var(--sh-ok,#16A34A);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .status-badge--danger,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .status-badge--danger {
  background:var(--sh-accent-soft,#FCEDE7); color:var(--sh-accent,#E73D25);
}

/* =========================================================================
   2b) EINZIGE erlaubte „Wegblend"-Ausnahme:
   eingebettete PDF-Vorschau IM Beleg-Editor darf optisch entfallen
   (die PDF-AKTION/Buttons bleiben unangetastet). Nur die iframe-Vorschau-
   Fläche, NICHT die Aktionsknöpfe.
   Konservativ gehalten: NUR die unsichtbar-Variante würde greifen; da hier
   kein dedizierter Vorschau-Frame im Rechnungs-Editor identifiziert wurde,
   beschränken wir uns auf eine ruhige optische Einbettung statt Entfernung.
   ========================================================================= */
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .invoice-document-preview,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .invoice-document-preview {
  background:var(--sh-surf-2,#F6F1EB);
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-md,12px);
}
.iei-editor-container:has(.ue-toolbar__badge[style*="2ecc71"]) .invoice-document-frame,
.iei-editor-container:has(.ue-toolbar__badge[style*="e74c3c"]) .invoice-document-frame {
  border:1px solid var(--sh-border,#EEE5DC);
  border-radius:var(--sh-r-sm,9px);
  background:var(--sh-surface,#fff);
}

/* =========================================================================
   3) Mobile-Feinschliff (nur kosmetisch)
   ========================================================================= */
@media (max-width: 640px) {
  .panel:has(#invoiceTableBody) .data-table thead th { padding:9px 12px; }
  .panel:has(#invoiceTableBody) .data-table tbody td { padding:11px 12px; }
  .sh-kanban-wrap[data-invoices-board] .sh-kanban { gap:10px; }
}