/* =========================================================================
   ServiceHub — REDESIGN „Finanzen" (Bereich: finance)
   Mahnwesen · Gutschriften · Offene Posten (Forderungen) · Zahlungen.
   Rein optische, additive Schicht (Richtung A+B „eleviert", warm).
   NULL Funktionsänderung. Genau eine Datei. Light + Dark via [data-theme].
   ──────────────────────────────────────────────────────────────────────────
   Scoping-Prinzip (kein Markup-Eingriff, wie die übrigen sh-redesign-Module):
   Alle Finanz-Screens leben im selben generischen Gerüst (.page-header /
   section.panel / .data-table / .sales-card / .kpi-card) wie andere Listen.
   Damit NICHTS in fremde Screens (z. B. die Rechnungsliste) blutet, hängen wir
   die Tokens + die Komponenten-Regeln IMMER an einen Anker, der ausschließlich
   im jeweiligen Finanz-Screen vorkommt:

     · Finanz-Übersicht  → #mainContent:has(.kpi-card[data-receivables-overdue])
                           (die „Überfällig"-KPI gibt es nur hier)
     · Offene Posten     → #mainContent:has(#receivablesApplyFilter)
     · Mahnfälle (Liste) → #mainContent:has(#dunningApplyFilter)
     · Mahnfall (Detail) → #mainContent:has(#dunning-statusbar),
                           #mainContent:has([data-dunning-send-mail])
     · Gutschriften (L.) → #mainContent:has(#cnGroupBy),
                           #mainContent:has([data-credit-apply])
     · Gutschrift (Det.) → #mainContent:has(#creditNoteMailBtn)
     · Zahlung (Detail)  → #mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"])
                           (einzige Finanz-Detailseite mit Finanz-Übersicht-Back)

   Tokens werden LOKAL auf #mainContent gelegt (nicht :root), damit nichts von
   der Ladereihenfolge abhängt. Globale Basis (.btn/.badge/.data-table/:root)
   wird NICHT umdefiniert. Kein display:none auf funktionale Controls.
   ========================================================================= */
@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');

/* =========================================================================
   0) TOKEN-TRÄGER — alle Finanz-Screens (Light)
   ========================================================================= */
#mainContent:has(.kpi-card[data-receivables-overdue]),
#mainContent:has(#receivablesApplyFilter),
#mainContent:has(#dunningApplyFilter),
#mainContent:has(#dunning-statusbar),
#mainContent:has([data-dunning-send-mail]),
#mainContent:has(#cnGroupBy),
#mainContent:has([data-credit-apply]),
#mainContent:has([data-credit-delete]),
#mainContent:has(#creditNoteMailBtn),
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) {
  --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);
  /* Brücke zu den Token-Namen, die die geerbte sh-statusbar.css nutzt
     (Mahnfall-Detail rendert #dunning-statusbar via ShStatusbar) */
  --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"] #mainContent:has(.kpi-card[data-receivables-overdue]),
[data-theme="dark"] #mainContent:has(#receivablesApplyFilter),
[data-theme="dark"] #mainContent:has(#dunningApplyFilter),
[data-theme="dark"] #mainContent:has(#dunning-statusbar),
[data-theme="dark"] #mainContent:has([data-dunning-send-mail]),
[data-theme="dark"] #mainContent:has(#cnGroupBy),
[data-theme="dark"] #mainContent:has([data-credit-apply]),
[data-theme="dark"] #mainContent:has([data-credit-delete]),
[data-theme="dark"] #mainContent:has(#creditNoteMailBtn),
[data-theme="dark"] #mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) {
  --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);
  --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);
}

/* Sammel-Alias für alle Finanz-Screens (kürzt die Selektoren unten ab).
   Jede Regel wiederholt die volle Anker-Liste, damit nur Finanz-DOM matcht. */

/* =========================================================================
   1) GEMEINSAM — Kopfzeile, Karten, Tabellen, Badges, Buttons
   Gilt für ALLE Finanz-Screens (volle Anker-Liste pro Selektorblock).
   ========================================================================= */

/* ---- Seitenkopf (page-header) ---- */
#mainContent:has(.kpi-card[data-receivables-overdue]) > .page-header,
#mainContent:has(#receivablesApplyFilter) > .page-header,
#mainContent:has(#dunningApplyFilter) > .page-header,
#mainContent:has(#dunning-statusbar) > .page-header,
#mainContent:has([data-dunning-send-mail]) > .page-header,
#mainContent:has(#cnGroupBy) > .page-header,
#mainContent:has([data-credit-apply]) > .page-header,
#mainContent:has([data-credit-delete]) > .page-header,
#mainContent:has(#creditNoteMailBtn) > .page-header,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) > .page-header {
  border-bottom:1px solid var(--sh-border,#EEE5DC);
  padding-bottom:14px;
}
#mainContent:has(.kpi-card[data-receivables-overdue]) > .page-header h1,
#mainContent:has(#receivablesApplyFilter) > .page-header h1,
#mainContent:has(#dunningApplyFilter) > .page-header h1,
#mainContent:has(#dunning-statusbar) > .page-header h1,
#mainContent:has([data-dunning-send-mail]) > .page-header h1,
#mainContent:has(#cnGroupBy) > .page-header h1,
#mainContent:has([data-credit-apply]) > .page-header h1,
#mainContent:has([data-credit-delete]) > .page-header h1,
#mainContent:has(#creditNoteMailBtn) > .page-header h1,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) > .page-header h1 {
  font-family:var(--sh-font-head,'Space Grotesk',system-ui,sans-serif);
  letter-spacing:-.02em; color:var(--sh-ink,#231C17);
}
#mainContent:has(.kpi-card[data-receivables-overdue]) > .page-header .subtitle,
#mainContent:has(#receivablesApplyFilter) > .page-header .subtitle,
#mainContent:has(#dunningApplyFilter) > .page-header .subtitle,
#mainContent:has(#dunning-statusbar) > .page-header .subtitle,
#mainContent:has([data-dunning-send-mail]) > .page-header .subtitle,
#mainContent:has(#cnGroupBy) > .page-header .subtitle,
#mainContent:has([data-credit-apply]) > .page-header .subtitle,
#mainContent:has([data-credit-delete]) > .page-header .subtitle,
#mainContent:has(#creditNoteMailBtn) > .page-header .subtitle,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) > .page-header .subtitle {
  color:var(--sh-muted,#9A8F84);
}

/* ---- Panel-Karten ---- */
#mainContent:has(.kpi-card[data-receivables-overdue]) > .panel,
#mainContent:has(#receivablesApplyFilter) > .panel,
#mainContent:has(#dunningApplyFilter) > .panel,
#mainContent:has(#dunning-statusbar) > .panel,
#mainContent:has([data-dunning-send-mail]) > .panel,
#mainContent:has(#cnGroupBy) > .panel,
#mainContent:has([data-credit-apply]) > .panel,
#mainContent:has([data-credit-delete]) > .panel,
#mainContent:has(#creditNoteMailBtn) > .panel,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) > .panel {
  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));
}
/* Panel-Überschriften (h2/h3) warm + Space Grotesk */
#mainContent:has(.kpi-card[data-receivables-overdue]) > .panel > h2,
#mainContent:has(.kpi-card[data-receivables-overdue]) > .panel > h3,
#mainContent:has(#receivablesApplyFilter) > .panel > h2,
#mainContent:has(#receivablesApplyFilter) > .panel > h3,
#mainContent:has(#dunningApplyFilter) > .panel > h2,
#mainContent:has(#dunningApplyFilter) > .panel > h3,
#mainContent:has(#dunning-statusbar) > .panel > h2,
#mainContent:has(#dunning-statusbar) > .panel > h3,
#mainContent:has([data-dunning-send-mail]) > .panel > h2,
#mainContent:has([data-dunning-send-mail]) > .panel > h3,
#mainContent:has(#cnGroupBy) > .panel > h2,
#mainContent:has(#cnGroupBy) > .panel > h3,
#mainContent:has([data-credit-apply]) > .panel > h2,
#mainContent:has([data-credit-apply]) > .panel > h3,
#mainContent:has([data-credit-delete]) > .panel > h2,
#mainContent:has([data-credit-delete]) > .panel > h3,
#mainContent:has(#creditNoteMailBtn) > .panel > h2,
#mainContent:has(#creditNoteMailBtn) > .panel > h3,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) > .panel > h2,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) > .panel > h3 {
  font-family:var(--sh-font-head,'Space Grotesk',system-ui,sans-serif);
  color:var(--sh-ink,#231C17); letter-spacing:-.01em; font-weight:700;
}

/* ---- Tabellen (alle Finanz-Tabellen) ---- */
#mainContent:has(.kpi-card[data-receivables-overdue]) .data-table thead th,
#mainContent:has(#receivablesApplyFilter) .data-table thead th,
#mainContent:has(#dunningApplyFilter) .data-table thead th,
#mainContent:has(#cnGroupBy) .data-table thead th,
#mainContent:has([data-credit-apply]) .data-table thead th,
#mainContent:has([data-credit-delete]) .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;
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .data-table tbody td,
#mainContent:has(#receivablesApplyFilter) .data-table tbody td,
#mainContent:has(#dunningApplyFilter) .data-table tbody td,
#mainContent:has(#cnGroupBy) .data-table tbody td,
#mainContent:has([data-credit-apply]) .data-table tbody td,
#mainContent:has([data-credit-delete]) .data-table tbody td {
  border-bottom:1px solid var(--sh-border,#EEE5DC);
  color:var(--sh-text,#463D35);
  font-size:13px;
  padding:12px 16px;
  vertical-align:middle;
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .data-table tbody tr,
#mainContent:has(#receivablesApplyFilter) .data-table tbody tr,
#mainContent:has(#dunningApplyFilter) .data-table tbody tr,
#mainContent:has(#cnGroupBy) .data-table tbody tr,
#mainContent:has([data-credit-apply]) .data-table tbody tr,
#mainContent:has([data-credit-delete]) .data-table tbody tr {
  transition:background .12s ease;
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .data-table tbody tr:hover,
#mainContent:has(#receivablesApplyFilter) .data-table tbody tr:hover,
#mainContent:has(#dunningApplyFilter) .data-table tbody tr:hover,
#mainContent:has(#cnGroupBy) .data-table tbody tr:hover,
#mainContent:has([data-credit-apply]) .data-table tbody tr:hover,
#mainContent:has([data-credit-delete]) .data-table tbody tr:hover {
  background:var(--sh-surf-2,#F6F1EB);
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .data-table tbody td strong,
#mainContent:has(#receivablesApplyFilter) .data-table tbody td strong,
#mainContent:has(#dunningApplyFilter) .data-table tbody td strong,
#mainContent:has(#cnGroupBy) .data-table tbody td strong,
#mainContent:has([data-credit-apply]) .data-table tbody td strong,
#mainContent:has([data-credit-delete]) .data-table tbody td strong {
  color:var(--sh-ink,#231C17); font-weight:600;
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
  letter-spacing:-.02em;
}
/* Beleg-/Kunden-Links in Tabellen → warmer Akzent */
#mainContent:has(.kpi-card[data-receivables-overdue]) .data-table a[data-open-invoice],
#mainContent:has(.kpi-card[data-receivables-overdue]) .data-table a[data-open-dunning],
#mainContent:has(.kpi-card[data-receivables-overdue]) .data-table a[data-open-credit-note],
#mainContent:has(#receivablesApplyFilter) .data-table a[data-open-invoice],
#mainContent:has(#dunningApplyFilter) .data-table a[data-open-invoice],
#mainContent:has(#cnGroupBy) .data-table a[data-open-invoice],
#mainContent:has(#cnGroupBy) .data-table a[data-open-credit-note],
#mainContent:has([data-credit-apply]) .data-table a[data-open-credit-note],
#mainContent:has([data-credit-delete]) .data-table a[data-open-credit-note],
#mainContent:has([data-credit-apply]) .data-table a.link,
#mainContent:has(#cnGroupBy) .data-table a.link {
  color:var(--sh-accent,#E73D25); font-weight:600;
}

/* ---- Gruppen-Zeilen (Group-By: Mahnstufe/Status/Kunde) ---- */
#mainContent:has(#dunningApplyFilter) .sh-group-row td,
#mainContent:has(#cnGroupBy) .sh-group-row td,
#mainContent:has([data-credit-apply]) .sh-group-row td,
#mainContent:has([data-credit-delete]) .sh-group-row td {
  background:var(--sh-surf-3,#EFE8E0);
  color:var(--sh-ink,#231C17);
  font-weight:600;
}
#mainContent:has(#dunningApplyFilter) .sh-group-row .sh-group-count,
#mainContent:has(#cnGroupBy) .sh-group-row .sh-group-count,
#mainContent:has([data-credit-apply]) .sh-group-row .sh-group-count,
#mainContent:has([data-credit-delete]) .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);
  padding:1px 9px; font-size:11.5px; font-weight:600;
}
#mainContent:has(#dunningApplyFilter) .sh-group-row .sh-group-caret,
#mainContent:has(#cnGroupBy) .sh-group-row .sh-group-caret,
#mainContent:has([data-credit-apply]) .sh-group-row .sh-group-caret,
#mainContent:has([data-credit-delete]) .sh-group-row .sh-group-caret {
  color:var(--sh-accent,#E73D25);
}

/* ---- Filterzeile (Selects) ---- */
#mainContent:has(#receivablesApplyFilter) .filter-toolbar .select,
#mainContent:has(#dunningApplyFilter) .filter-toolbar .select,
#mainContent:has(#cnGroupBy) .filter-toolbar .select,
#mainContent:has([data-credit-apply]) .filter-toolbar .select,
#mainContent:has([data-credit-delete]) .filter-toolbar .select {
  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);
  font-family:var(--sh-font-body,'Figtree',system-ui,sans-serif);
  font-weight:600; font-size:13px;
  transition:var(--sh-tr,.16s ease);
}
#mainContent:has(#receivablesApplyFilter) .filter-toolbar .select:focus,
#mainContent:has(#dunningApplyFilter) .filter-toolbar .select:focus,
#mainContent:has(#cnGroupBy) .filter-toolbar .select:focus,
#mainContent:has([data-credit-apply]) .filter-toolbar .select:focus,
#mainContent:has([data-credit-delete]) .filter-toolbar .select:focus {
  outline:none; border-color:var(--sh-accent,#E73D25); box-shadow:var(--sh-ring);
}

/* ---- Sekundär-Buttons (btn-ghost) in Finanz-Screens: warmer Hover ---- */
#mainContent:has(.kpi-card[data-receivables-overdue]) .btn-ghost:hover,
#mainContent:has(#receivablesApplyFilter) .btn-ghost:hover,
#mainContent:has(#dunningApplyFilter) .btn-ghost:hover,
#mainContent:has(#dunning-statusbar) .btn-ghost:hover,
#mainContent:has([data-dunning-send-mail]) .btn-ghost:hover,
#mainContent:has(#cnGroupBy) .btn-ghost:hover,
#mainContent:has([data-credit-apply]) .btn-ghost:hover,
#mainContent:has([data-credit-delete]) .btn-ghost:hover,
#mainContent:has(#creditNoteMailBtn) .btn-ghost:hover,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) .btn-ghost:hover {
  border-color:var(--sh-accent,#E73D25);
  color:var(--sh-accent,#E73D25);
  background:var(--sh-accent-soft,#FCEDE7);
}

/* ---- Inline-Navigationslinks („Alle … anzeigen") + .link ---- */
#mainContent:has(.kpi-card[data-receivables-overdue]) .muted a[data-nav-view],
#mainContent:has(#dunningApplyFilter) .muted a[data-nav-view],
#mainContent:has(#cnGroupBy) .muted a[data-nav-view] {
  color:var(--sh-accent,#E73D25); font-weight:600;
}

/* =========================================================================
   2) STATUS-BADGES (Mahnstufen + Mahnfall-/Gutschrift-Status)
   Markup: <span class="status-badge status-badge--TONE">…</span>
   Mahnstufe: reminder/dunning_1 = aktiv(info) · dunning_2 = warn · final_notice = accent
   Status:    open = warn · resolved/applied = ok · cancelled = accent · draft = neutral
   Nur INNERHALB der Finanz-Screens (volle Anker-Liste).
   ========================================================================= */
#mainContent:has(.kpi-card[data-receivables-overdue]) .status-badge,
#mainContent:has(#receivablesApplyFilter) .status-badge,
#mainContent:has(#dunningApplyFilter) .status-badge,
#mainContent:has(#dunning-statusbar) .status-badge,
#mainContent:has([data-dunning-send-mail]) .status-badge,
#mainContent:has(#cnGroupBy) .status-badge,
#mainContent:has([data-credit-apply]) .status-badge,
#mainContent:has([data-credit-delete]) .status-badge,
#mainContent:has(#creditNoteMailBtn) .status-badge,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) .status-badge {
  border-radius:var(--sh-r-pill,999px);
  font-weight:600; font-size:11.5px;
  padding:3px 11px;
  border:1px solid transparent;
  font-family:var(--sh-font-body,'Figtree',system-ui,sans-serif);
}
/* neutral / Entwurf */
#mainContent:has(.kpi-card[data-receivables-overdue]) .status-badge--neutral,
#mainContent:has(#dunningApplyFilter) .status-badge--neutral,
#mainContent:has(#cnGroupBy) .status-badge--neutral,
#mainContent:has([data-credit-apply]) .status-badge--neutral,
#mainContent:has([data-credit-delete]) .status-badge--neutral,
#mainContent:has(#creditNoteMailBtn) .status-badge--neutral {
  background:var(--sh-surf-2,#F6F1EB); color:var(--sh-text-2,#6B6157);
  border-color:var(--sh-border-2,#E3D9CE);
}
/* aktiv (1./2. Mahnung, laufend) → info-blau */
#mainContent:has(.kpi-card[data-receivables-overdue]) .status-badge--active,
#mainContent:has(.kpi-card[data-receivables-overdue]) .status-badge--info,
#mainContent:has(#dunningApplyFilter) .status-badge--active,
#mainContent:has(#dunningApplyFilter) .status-badge--info,
#mainContent:has(#dunning-statusbar) .status-badge--active,
#mainContent:has(#dunning-statusbar) .status-badge--info,
#mainContent:has([data-dunning-send-mail]) .status-badge--active,
#mainContent:has([data-dunning-send-mail]) .status-badge--info {
  background:var(--sh-info-soft,#EAF1FC); color:var(--sh-info,#2F6BD6);
}
/* erledigt / angewandt / erfolg → grün */
#mainContent:has(.kpi-card[data-receivables-overdue]) .status-badge--success,
#mainContent:has(#dunningApplyFilter) .status-badge--success,
#mainContent:has(#dunning-statusbar) .status-badge--success,
#mainContent:has([data-dunning-send-mail]) .status-badge--success,
#mainContent:has(#cnGroupBy) .status-badge--success,
#mainContent:has([data-credit-apply]) .status-badge--success,
#mainContent:has([data-credit-delete]) .status-badge--success,
#mainContent:has(#creditNoteMailBtn) .status-badge--success {
  background:var(--sh-ok-soft,#E9F8EF); color:var(--sh-ok,#16A34A);
}
/* offen / 3. Mahnung / warnung → honey */
#mainContent:has(.kpi-card[data-receivables-overdue]) .status-badge--warning,
#mainContent:has(#dunningApplyFilter) .status-badge--warning,
#mainContent:has(#dunning-statusbar) .status-badge--warning,
#mainContent:has([data-dunning-send-mail]) .status-badge--warning,
#mainContent:has(#cnGroupBy) .status-badge--warning,
#mainContent:has([data-credit-apply]) .status-badge--warning,
#mainContent:has([data-credit-delete]) .status-badge--warning,
#mainContent:has(#creditNoteMailBtn) .status-badge--warning {
  background:var(--sh-warn-soft,#FBF1E0); color:var(--sh-warn,#C7791A);
}
/* letzte Mahnung / storniert / gefahr → accent-rot */
#mainContent:has(.kpi-card[data-receivables-overdue]) .status-badge--danger,
#mainContent:has(#dunningApplyFilter) .status-badge--danger,
#mainContent:has(#dunning-statusbar) .status-badge--danger,
#mainContent:has([data-dunning-send-mail]) .status-badge--danger,
#mainContent:has(#cnGroupBy) .status-badge--danger,
#mainContent:has([data-credit-apply]) .status-badge--danger,
#mainContent:has([data-credit-delete]) .status-badge--danger,
#mainContent:has(#creditNoteMailBtn) .status-badge--danger {
  background:var(--sh-accent-soft,#FCEDE7); color:var(--sh-accent,#E73D25);
}

/* =========================================================================
   3) FINANZ-ÜBERSICHT — KPI-Kacheln + Forderungs-Highlights
   Anker: .kpi-card[data-receivables-overdue] (nur hier).
   Die Kacheln tragen Inline-Style (border/padding) → wir setzen die warmen
   Werte explizit, damit sie sicher greifen.
   ========================================================================= */
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-row {
  gap:14px;
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-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);
  position:relative; overflow:hidden;
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-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);
}
/* farbiger Akzentstreifen links je KPI-Bedeutung */
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-card::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--sh-info,#2F6BD6);
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-card[data-receivables-overdue]::before {
  background:var(--sh-accent,#E73D25);
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-card[data-nav-view="dunning-cases"]::before {
  background:var(--sh-warn,#C7791A);
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-card[data-nav-view="credit-notes"]::before {
  background:var(--sh-ok,#16A34A);
}
/* KPI-Labels (muted) + Zahlenwert (mono, Space Grotesk-Anmutung) */
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-card .muted {
  color:var(--sh-muted,#9A8F84); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; font-size:11px !important;
}
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-card > p:not(.muted) {
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
  color:var(--sh-ink,#231C17); letter-spacing:-.02em;
}
/* „Überfällig"-Betrag warm-rot (überschreibt das inline var(--danger,#c00)) */
#mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-card[data-receivables-overdue] > p:not(.muted) {
  color:var(--sh-accent,#E73D25);
}

/* ---- Überfällig-/Hinweis-Bänder (sales-warning) im Finanz-Kontext ---- */
#mainContent:has(.kpi-card[data-receivables-overdue]) .sales-warning,
#mainContent:has(#receivablesApplyFilter) .sales-warning,
#mainContent:has(#dunningApplyFilter) .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);
}

/* =========================================================================
   4) MAHNFÄLLE / GUTSCHRIFTEN — „eröffnen/anwenden"-Sub-Sektionen
   ========================================================================= */
/* Sub-Überschrift „Mahnfall eröffnen …" */
#mainContent:has(#dunningApplyFilter) .panel h3 {
  font-family:var(--sh-font-head,'Space Grotesk',system-ui,sans-serif);
  color:var(--sh-ink,#231C17); letter-spacing:-.01em;
}
/* Leerzustand zentriert (Mahnfälle) — Typo warm */
#mainContent:has(#dunningApplyFilter) .panel .muted strong,
#mainContent:has(#cnGroupBy) .empty-state .muted {
  color:var(--sh-text-2,#6B6157);
}
#mainContent:has(#cnGroupBy) .empty-state,
#mainContent:has([data-credit-apply]) .empty-state {
  text-align:center; color:var(--sh-muted,#9A8F84);
}

/* =========================================================================
   5) FINANZ-DETAILS — Mahnfall / Gutschrift / Zahlung
   Karten-Raster .sales-grid > .sales-card (gemeinsam für die 3 Detailseiten).
   ========================================================================= */
#mainContent:has(#dunning-statusbar) .sales-card,
#mainContent:has([data-dunning-send-mail]) .sales-card,
#mainContent:has(#creditNoteMailBtn) .sales-card,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) .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));
  transition:var(--sh-tr,.16s ease);
}
#mainContent:has(#dunning-statusbar) .sales-card:hover,
#mainContent:has([data-dunning-send-mail]) .sales-card:hover,
#mainContent:has(#creditNoteMailBtn) .sales-card:hover,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) .sales-card:hover {
  border-color:var(--sh-border-2,#E3D9CE);
  box-shadow:var(--sh-md,0 6px 20px rgba(120,80,50,.07));
}
/* Karten-Titel = kleines uppercase Label (Muted) */
#mainContent:has(#dunning-statusbar) .sales-card h3,
#mainContent:has([data-dunning-send-mail]) .sales-card h3,
#mainContent:has(#creditNoteMailBtn) .sales-card h3,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) .sales-card h3 {
  font-family:var(--sh-font-body,'Figtree',system-ui,sans-serif);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sh-muted,#9A8F84); margin-bottom:6px;
}
/* Karten-Werte (Beträge groß) → mono + Tinte */
#mainContent:has(#dunning-statusbar) .sales-card p,
#mainContent:has([data-dunning-send-mail]) .sales-card p,
#mainContent:has(#creditNoteMailBtn) .sales-card p,
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) .sales-card p {
  color:var(--sh-text,#463D35);
}
#mainContent:has(#dunning-statusbar) .sales-card p[style*="font-size"],
#mainContent:has([data-dunning-send-mail]) .sales-card p[style*="font-size"],
#mainContent:has(#creditNoteMailBtn) .sales-card p[style*="font-size"],
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) .sales-card p[style*="font-size"] {
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
  color:var(--sh-ink,#231C17); letter-spacing:-.02em;
}
/* Beleg-/Kunden-Links in Detailkarten → warmer Akzent */
#mainContent:has(#dunning-statusbar) .sales-card a[data-open-invoice],
#mainContent:has([data-dunning-send-mail]) .sales-card a[data-open-invoice],
#mainContent:has(#creditNoteMailBtn) .sales-card a[data-open-invoice],
#mainContent:has(.sales-grid):has([data-nav-view="finance-dashboard"]) .sales-card a[data-open-invoice] {
  color:var(--sh-accent,#E73D25); font-weight:600;
  font-family:var(--sh-font-mono,'Space Mono',ui-monospace,monospace);
}

/* =========================================================================
   6) MAHNFALL-DETAIL — Eskalations-Statusbar (#dunning-statusbar)
   Markup geerbt aus sh-statusbar.css (ShStatusbar.render). Die Token-Brücke
   im Token-Träger (--sh-danger/--sh-surface-2/--sh-text-muted) versorgt die
   geerbten Regeln bereits warm; hier nur Feinschliff der Stage-Stati.
   ========================================================================= */
#mainContent:has(#dunning-statusbar) .sh-cp-statusbar,
#mainContent:has(#dunning-statusbar) #dunning-statusbar {
  margin:0 0 14px;
}
#mainContent:has(#dunning-statusbar) .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);
}
#mainContent:has(#dunning-statusbar) .sh-statusbar__stage.is-done {
  background:var(--sh-accent-soft,#FCEDE7); color:var(--sh-accent,#E73D25);
}
#mainContent:has(#dunning-statusbar) .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));
}
#mainContent:has(#dunning-statusbar) .sh-statusbar__num {
  background:rgba(120,80,50,.12);
}
#mainContent:has(#dunning-statusbar) .sh-statusbar__stage.is-current .sh-statusbar__num {
  background:rgba(255,255,255,.28);
}

/* ---- Chatter-Panel (Mahnfall-Detail) — ruhige Einbettung ---- */
#mainContent:has(#dunning-statusbar) #dunning-chatter {
  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));
}

/* =========================================================================
   7) FEHLER-/LADE-ZUSTÄNDE (warm)
   ========================================================================= */
#mainContent:has(.kpi-card[data-receivables-overdue]) .error-text,
#mainContent:has(#receivablesApplyFilter) .error-text,
#mainContent:has(#dunningApplyFilter) .error-text,
#mainContent:has(#cnGroupBy) .error-text,
#mainContent:has([data-credit-apply]) .error-text,
#mainContent:has(#creditNoteMailBtn) .error-text {
  color:var(--sh-accent-700,#C5331E); font-weight:600;
}

/* =========================================================================
   8) Mobile-Feinschliff (rein kosmetisch — keine Logik/Sichtbarkeit)
   ========================================================================= */
@media (max-width: 640px) {
  #mainContent:has(.kpi-card[data-receivables-overdue]) .data-table thead th,
  #mainContent:has(#receivablesApplyFilter) .data-table thead th,
  #mainContent:has(#dunningApplyFilter) .data-table thead th,
  #mainContent:has(#cnGroupBy) .data-table thead th {
    padding:9px 12px;
  }
  #mainContent:has(.kpi-card[data-receivables-overdue]) .data-table tbody td,
  #mainContent:has(#receivablesApplyFilter) .data-table tbody td,
  #mainContent:has(#dunningApplyFilter) .data-table tbody td,
  #mainContent:has(#cnGroupBy) .data-table tbody td {
    padding:11px 12px;
  }
  #mainContent:has(.kpi-card[data-receivables-overdue]) .kpi-row {
    gap:10px;
  }
}