/* AUTO-GENERIERT via scripts/css-merge.js — zusammenhängender Lauf, Kaskade erhalten.
   Quellen (Ladereihenfolge): sh-odoo-components.css, sh-redesign-01-components.css, sh-redesign-02-shell.css, sh-redesign-assets.css, sh-redesign-orders.css, sh-redesign-quotes.css, sh-redesign-invoices.css, sh-redesign-editor.css, sh-redesign-pte.css, sh-redesign-customers.css, sh-redesign-dispatch.css, sh-redesign-material.css, sh-redesign-warehouse.css, sh-redesign-purchasing.css, sh-redesign-crm.css, sh-redesign-finance.css, sh-redesign-modals.css, sh-redesign-admin.css
   Regenerieren: node scripts/css-merge.js --out sh-redesign.css sh-odoo-components.css sh-redesign-01-components.css sh-redesign-02-shell.css sh-redesign-assets.css sh-redesign-orders.css sh-redesign-quotes.css sh-redesign-invoices.css sh-redesign-editor.css sh-redesign-pte.css sh-redesign-customers.css sh-redesign-dispatch.css sh-redesign-material.css sh-redesign-warehouse.css sh-redesign-purchasing.css sh-redesign-crm.css sh-redesign-finance.css sh-redesign-modals.css sh-redesign-admin.css */
@import url('/fonts/space-grotesk-figtree-mono-google.css');

/* ===== gemergt aus sh-odoo-components.css ===== */
/* =========================================================================
   ServiceHub — Odoo-grade Komponenten-Schicht (.sho-*).
   -------------------------------------------------------------------------
   Reusable Odoo-Muster, die AUSSCHLIESSLICH die --sh-o-*-Token-Skala
   (sh-odoo-tokens.css) konsumieren. ALLE Selektoren sind NEUE .sho-*-Klassen
   → kein Eingriff in bestehende Klassen/den 79-Stylesheet-Stapel, null Risiko.
   Wird von den Quick-Win-Markup-Hooks (sh-odoo-*.js) verwendet.
   Goldene Regel: Rot (--sh-o-action) NUR Aktion/aktiv; Warnung = Amber; Daten neutral.
   Quelle: Odoo-Audit/Design-System-Spec 2026-06-04.
   ========================================================================= */

/* ---- Control-Panel: Breadcrumb | Spacer | Aktionen ---- */
.sho-cp { display: flex; align-items: center; gap: var(--sh-o-space-3);
  padding: var(--sh-o-space-3) var(--sh-o-space-4);
  background: var(--sh-o-surface); border-bottom: 1px solid var(--sh-o-border); }
.sho-cp__crumb { font-size: var(--sh-o-font-md); font-weight: var(--sh-o-fw-semi); color: var(--sh-o-text); }
.sho-cp__crumb a { color: var(--sh-o-text-muted); text-decoration: none; }
.sho-cp__crumb a:hover { color: var(--sh-o-action); }
.sho-cp__spacer { flex: 1 1 auto; }
.sho-cp__actions { display: flex; gap: var(--sh-o-space-2); align-items: center; }

/* ---- Statusleiste: EINE klickbare Kette (ersetzt Doppel-Badges) ---- */
.sho-statusbar { display: inline-flex; border: 1px solid var(--sh-o-border);
  border-radius: var(--sh-o-radius-pill); overflow: hidden; background: var(--sh-o-surface); }
.sho-statusbar__step { padding: 4px 14px; font-size: var(--sh-o-font-sm);
  color: var(--sh-o-text-muted); cursor: pointer; white-space: nowrap;
  border-right: 1px solid var(--sh-o-border); }
.sho-statusbar__step:last-child { border-right: 0; }
.sho-statusbar__step--done { color: var(--sh-o-text); }
.sho-statusbar__step--active { background: var(--sh-o-action); color: #fff; font-weight: var(--sh-o-fw-semi); }

/* ---- Listen-Dichte (opt-in via .sho-list) ---- */
.sho-list { font-size: var(--sh-o-font-sm); border-collapse: collapse; width: 100%; }
.sho-list th { font-weight: var(--sh-o-fw-semi); color: var(--sh-o-text-muted);
  font-size: var(--sh-o-font-xs); text-transform: uppercase; letter-spacing: .04em;
  padding: var(--sh-o-space-2) var(--sh-o-space-3); cursor: pointer; user-select: none;
  background: var(--sh-o-surface-soft); border-bottom: 1px solid var(--sh-o-border-strong); white-space: nowrap; }
.sho-list th[data-sort]::after { content: "\2195"; opacity: .35; margin-left: 4px; font-size: 10px; }
.sho-list th[aria-sort="asc"]::after { content: "\25B2"; opacity: 1; }
.sho-list th[aria-sort="desc"]::after { content: "\25BC"; opacity: 1; }
.sho-list td { padding: var(--sh-o-space-2) var(--sh-o-space-3); border-top: 1px solid var(--sh-o-border); }
.sho-list tbody tr:hover td { background: var(--sh-o-surface-soft); cursor: pointer; }

/* ---- Form-Sheet: zentriertes Odoo-Belegblatt ---- */
.sho-sheet { max-width: 920px; margin: var(--sh-o-space-5) auto; background: var(--sh-o-surface);
  border: 1px solid var(--sh-o-border); border-radius: var(--sh-o-radius-md);
  box-shadow: var(--sh-o-shadow-1); padding: var(--sh-o-space-5); }
.sho-sheet__title { font-size: var(--sh-o-font-xl); font-weight: var(--sh-o-fw-semi); color: var(--sh-o-text); }
.sho-sheet__field { margin-bottom: var(--sh-o-space-3); }
.sho-sheet__field input, .sho-sheet__field select, .sho-sheet__field textarea {
  border: 1px solid var(--sh-o-border); border-radius: var(--sh-o-radius-sm);
  padding: 6px 10px; font-size: var(--sh-o-font-md); background: var(--sh-o-surface); color: var(--sh-o-text); }
.sho-sheet__field input:focus, .sho-sheet__field select:focus, .sho-sheet__field textarea:focus {
  outline: none; box-shadow: var(--sh-o-ring-focus); border-color: var(--sh-brand, #E73D25); }

/* ---- Smart-Buttons: klickbare KPI-Kacheln ---- */
.sho-smartbtns { display: flex; gap: var(--sh-o-space-2); flex-wrap: wrap; }
.sho-smartbtn { display: flex; flex-direction: column; min-width: 120px;
  padding: var(--sh-o-space-2) var(--sh-o-space-3); border: 1px solid var(--sh-o-border);
  border-radius: var(--sh-o-radius-sm); background: var(--sh-o-surface); cursor: pointer;
  transition: box-shadow .12s, transform .12s; text-decoration: none; }
.sho-smartbtn:hover { box-shadow: var(--sh-o-shadow-2); transform: translateY(-1px); }
.sho-smartbtn__num { font-size: var(--sh-o-font-lg); font-weight: var(--sh-o-fw-semi); color: var(--sh-o-action); }
.sho-smartbtn__label { font-size: var(--sh-o-font-xs); color: var(--sh-o-text-muted); text-transform: uppercase; letter-spacing: .03em; }

/* ---- Chatter ---- */
.sho-chatter { border-left: 1px solid var(--sh-o-border); padding: var(--sh-o-space-4); background: var(--sh-o-surface-soft); }
.sho-chatter__composer textarea { border: 1px solid var(--sh-o-border); border-radius: var(--sh-o-radius-sm); width: 100%; }
.sho-chatter__log-entry { padding: var(--sh-o-space-2) 0; border-top: 1px solid var(--sh-o-border); font-size: var(--sh-o-font-sm); }

/* ---- Badges/Chips: NEUTRALE Daten-Badges (nie Markenrot, nie Regenbogen) ---- */
.sho-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  font-size: var(--sh-o-font-xs); border-radius: var(--sh-o-radius-pill);
  background: var(--sh-o-surface-soft); color: var(--sh-o-text-muted); border: 1px solid var(--sh-o-border); }
.sho-chip--info  { background: var(--sh-o-info-soft);  color: var(--sh-o-info);  border-color: transparent; }
.sho-chip--warn  { background: var(--sh-o-warn-soft);  color: var(--sh-o-warn);  border-color: transparent; }
.sho-chip--ok    { background: var(--sh-o-ok-soft);    color: var(--sh-o-ok);    border-color: transparent; }
.sho-chip--honey { background: var(--sh-o-honey-soft); color: var(--sh-o-honey); border-color: transparent; }


/* ===== gemergt aus sh-redesign-01-components.css ===== */
/* =========================================================================
   ServiceHub — Redesign · Block 01: Basis-Komponenten
   --------------------------------------------------------------------------
   REIN OPTISCH. Keine Funktions-/Markup-/Layout-Änderung — nur Farbe, Schrift,
   Radius, Schatten, Rahmen, Hintergrund. Additiv (lädt zuletzt → gewinnt die
   Kaskade). Light + Dark über [data-theme="dark"].

   Aufgabe dieser Datei: die ECHTEN App-Komponenten (.btn / .input / select /
   textarea / .badge / .chip / .card / .panel / .data-table) optisch an das
   neue Design-System (sh/theme.css) angleichen.

   Token-Bezug: nutzt ausschliesslich die Redesign-Tokens (--accent, --surf-2,
   --ink, --field …). Diese werden vom Token-Fundament (Block 00) global auf
   :root + [data-theme="dark"] bereitgestellt. Diese Datei definiert KEINE
   globalen Tokens neu. Fallback-Werte stehen nur als Sicherheitsnetz dabei,
   falls das Fundament (noch) nicht geladen ist — sie entsprechen 1:1 den
   Token-Werten aus theme.css.
   ========================================================================= */



/* =========================================================================
   1) BUTTONS  — pill-Radius, weicher Akzent-Schatten beim Primary, Figtree 600
   ========================================================================= */

/* Basis-Button: Form/Schrift/Übergang (keine Klickflächen-/Padding-Logik ändern,
   nur Optik-Padding leicht angeglichen an theme.css 10px 16px). */
.btn,
button.btn {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  font-weight: 600;
  font-size: 13.5px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--border-2, #E3D9CE);
  background: var(--surface, #FFFFFF);
  color: var(--text, #463D35);
  transition: background var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              border-color var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              color var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              box-shadow var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              transform .12s ease;
}
.btn:hover,
button.btn:hover {
  background: var(--surf-2, #F6F1EB);
  border-color: var(--border-2, #E3D9CE);
}
.btn:active,
button.btn:active {
  transform: translateY(0) scale(.985);
}

/* Primary — Akzent-Fläche + warmer Akzent-Schatten */
.btn-primary,
button.btn-primary {
  background: var(--accent, #E73D25);
  border: 1px solid var(--accent, #E73D25);
  color: #fff;
  box-shadow: var(--sh-accent, 0 5px 14px rgba(231,61,37,.28));
}
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--accent-700, #C5331E);
  border-color: var(--accent-700, #C5331E);
  color: #fff;
  box-shadow: var(--sh-accent, 0 5px 14px rgba(231,61,37,.28));
  transform: translateY(-1px);
}

/* Secondary — weiche, ruhige Fläche */
.btn-secondary,
button.btn-secondary {
  background: var(--surf-2, #F6F1EB);
  border: 1px solid transparent;
  color: var(--text-2, #6B6157);
}
.btn-secondary:hover,
button.btn-secondary:hover {
  background: var(--surf-3, #EFE8E0);
  border-color: var(--border-2, #E3D9CE);
  color: var(--ink, #231C17);
}

/* Ghost — randlos, Akzent beim Hover */
.btn-ghost,
button.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2, #6B6157);
}
.btn-ghost:hover,
button.btn-ghost:hover {
  background: var(--accent-soft, #FCEDE7);
  border-color: transparent;
  color: var(--accent, #E73D25);
}

/* Danger — bleibt deutlich, jetzt in Akzent-Rot-Logik der Palette */
.btn-danger,
button.btn-danger {
  background: var(--accent, #E73D25);
  border: 1px solid var(--accent, #E73D25);
  color: #fff;
}
.btn-danger:hover,
button.btn-danger:hover {
  background: var(--accent-700, #C5331E);
  border-color: var(--accent-700, #C5331E);
  color: #fff;
}

/* Kleinere Variante: nur Schriftgrösse, Padding der App nicht antasten */
.btn-sm,
button.btn-sm {
  font-size: 12.5px;
  border-radius: var(--r-pill, 999px);
}

.btn:disabled,
button.btn:disabled {
  opacity: .45;
  box-shadow: none;
}

/* =========================================================================
   2) FORMULARFELDER  — Radius 9px, --field-Hintergrund, Fokus-Ring --accent-soft
   ========================================================================= */

/* Generische Feld-Klassen */
.input,
.textarea,
.select,
input.input,
select.select,
textarea.textarea {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  font-size: 13.5px;
  color: var(--ink, #231C17);
  background: var(--field, #F6F1EB);
  border: 1px solid var(--border-2, #E3D9CE);
  border-radius: var(--r-sm, 9px);
  transition: border-color var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              box-shadow var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              background var(--tr, .16s cubic-bezier(.2,.7,.3,1));
}
.input::placeholder,
.textarea::placeholder,
input.input::placeholder,
textarea.textarea::placeholder {
  color: var(--muted, #9A8F84);
}

/* Felder innerhalb von Karten/Panels (App-Konvention .panel input/select/textarea) */
.panel input[type="text"],
.panel input[type="email"],
.panel input[type="password"],
.panel input[type="number"],
.panel input[type="date"],
.panel input[type="datetime-local"],
.panel input[type="time"],
.panel input[type="url"],
.panel input[type="search"],
.panel input[type="tel"],
.panel select,
.panel textarea,
.card input[type="text"],
.card input[type="email"],
.card input[type="number"],
.card input[type="search"],
.card select,
.card textarea {
  background: var(--field, #F6F1EB);
  border: 1px solid var(--border-2, #E3D9CE);
  border-radius: var(--r-sm, 9px);
  color: var(--ink, #231C17);
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
}

/* Einheitlicher Fokus-Ring (--accent-soft) für alle Feldtypen */
.input:focus,
.textarea:focus,
.select:focus,
input.input:focus,
select.select:focus,
textarea.textarea:focus,
.panel input:focus,
.panel select:focus,
.panel textarea:focus,
.card input:focus,
.card select:focus,
.card textarea:focus {
  outline: none;
  background: var(--surface, #FFFFFF);
  border-color: var(--accent, #E73D25);
  box-shadow: var(--ring, 0 0 0 3px var(--accent-soft, #FCEDE7));
}

/* Listen-/Toolbar-Suchfelder (App-Konvention) an die warme Palette angleichen */
.ui-toolbar input[type="search"],
.ui-toolbar input[type="text"],
.list-toolbar input,
.table-toolbar input {
  background: var(--field, #F6F1EB);
  border: 1px solid transparent;
  border-radius: var(--r-sm, 9px);
  color: var(--ink, #231C17);
}
.ui-toolbar input:focus,
.list-toolbar input:focus,
.table-toolbar input:focus {
  background: var(--surface, #FFFFFF);
  border-color: var(--accent, #E73D25);
  box-shadow: var(--ring, 0 0 0 3px var(--accent-soft, #FCEDE7));
}

/* Pfeil-Icon für native Selects in der warmen Akzent-Logik */
.select,
select.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A8F84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* =========================================================================
   3) BADGES  — pill, weiche Token-Hintergründe
   ========================================================================= */

.badge {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  border-radius: var(--r-pill, 999px);
}

.badge-success, .badge--success {
  background: var(--ok-soft, #E9F8EF);
  color: var(--ok, #16A34A);
}
.badge-warning, .badge--warning {
  background: var(--warn-soft, #FBF1E0);
  color: var(--warn, #C7791A);
}
.badge-danger, .badge--danger {
  background: var(--accent-soft, #FCEDE7);
  color: var(--accent, #E73D25);
}
.badge-info, .badge--info {
  background: var(--info-soft, #EAF1FC);
  color: var(--info, #2F6BD6);
}
.badge-neutral, .badge--neutral {
  background: var(--surf-2, #F6F1EB);
  color: var(--text-2, #6B6157);
}

/* =========================================================================
   4) CHIPS / FILTER-CHIPS  — pill, weiche Token-Flächen
   ========================================================================= */

.chip {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-2, #6B6157);
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border-2, #E3D9CE);
  border-radius: var(--r-pill, 999px);
  transition: background var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              border-color var(--tr, .16s cubic-bezier(.2,.7,.3,1)),
              color var(--tr, .16s cubic-bezier(.2,.7,.3,1));
}
.chip:hover {
  background: var(--surf-2, #F6F1EB);
  border-color: var(--border-2, #E3D9CE);
  color: var(--ink, #231C17);
}
.chip.on,
.chip.active,
.chip.is-active,
.chip[aria-pressed="true"] {
  background: var(--accent-soft, #FCEDE7);
  border-color: var(--accent, #E73D25);
  color: var(--accent, #E73D25);
}

/* =========================================================================
   5) KARTEN / PANELS  — Radius 16px, warmer Schatten, zarte Border
   ========================================================================= */

.card,
.panel {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #EEE5DC);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-md, 0 6px 20px rgba(120,80,50,.07), 0 1px 2px rgba(120,80,50,.05));
}
.card:hover,
.panel:hover {
  box-shadow: var(--sh-lg, 0 18px 44px rgba(120,80,50,.14));
  border-color: var(--border, #EEE5DC);
}

/* =========================================================================
   6) DATENTABELLEN  — Kopf uppercase muted, Zeilen-Hover surf-2, weiche Border
   ========================================================================= */

.data-table,
.sh-table {
  font-family: var(--font-body, 'Figtree', system-ui, sans-serif);
  color: var(--text, #463D35);
}
.data-table thead th,
.sh-table thead th {
  background: var(--surf-2, #F6F1EB);
  color: var(--muted, #9A8F84);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border, #EEE5DC);
}
.data-table tbody td,
.sh-table tbody td {
  color: var(--text, #463D35);
  border-bottom: 1px solid var(--border, #EEE5DC);
}
.data-table tbody tr,
.sh-table tbody tr {
  transition: background var(--tr, .16s cubic-bezier(.2,.7,.3,1));
}
.data-table tbody tr:hover,
.sh-table tbody tr:hover {
  background: var(--surf-2, #F6F1EB);
}
.data-table tbody tr:last-child td,
.sh-table tbody tr:last-child td {
  border-bottom: none;
}

/* Schlichte .table-Tabellen (ohne .data-table) mitnehmen, damit der Look
   einheitlich ist (Optik-only, keine Layout-Änderung). */
.panel table.table:not(.data-table) > thead > tr > th {
  background: var(--surf-2, #F6F1EB);
  color: var(--muted, #9A8F84);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border, #EEE5DC);
}
.panel table.table:not(.data-table) > tbody > tr > td {
  color: var(--text, #463D35);
  border-bottom: 1px solid var(--border, #EEE5DC);
}
.panel table.table:not(.data-table) > tbody > tr:hover {
  background: var(--surf-2, #F6F1EB);
}

/* =========================================================================
   7) DARK-MODE  — die Komponenten ziehen ihre Farben aus den Tokens, die das
   Fundament unter [data-theme="dark"] umschaltet. Hier nur, was über reine
   Token-Referenz hinaus nötig ist (Fallback-Hex der Light-Defaults oben würde
   im Dark sonst zünden, falls das Fundament fehlt). Diese Block-Overrides
   greifen nur, wenn das Theme aktiv auf dark steht. Reine Optik.
   ========================================================================= */

[data-theme="dark"] .btn,
[data-theme="dark"] button.btn {
  background: var(--surface, #1E1A16);
  border-color: var(--border-2, #3A332B);
  color: var(--text, #E2D8CE);
}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] button.btn:hover {
  background: var(--surf-2, #241F1A);
}
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] button.btn-ghost {
  background: transparent;
  color: var(--text-2, #B3A99E);
}
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] button.btn-secondary {
  background: var(--surf-2, #241F1A);
  color: var(--text-2, #B3A99E);
}

[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select,
[data-theme="dark"] input.input,
[data-theme="dark"] select.select,
[data-theme="dark"] textarea.textarea,
[data-theme="dark"] .panel input,
[data-theme="dark"] .panel select,
[data-theme="dark"] .panel textarea {
  background: var(--field, #241F1A);
  border-color: var(--border-2, #3A332B);
  color: var(--ink, #F6F1EC);
}

[data-theme="dark"] .chip {
  background: var(--surface, #1E1A16);
  border-color: var(--border-2, #3A332B);
  color: var(--text-2, #B3A99E);
}

[data-theme="dark"] .card,
[data-theme="dark"] .panel {
  background: var(--surface, #1E1A16);
  border-color: var(--border, #2E2822);
}

[data-theme="dark"] .data-table thead th,
[data-theme="dark"] .sh-table thead th {
  background: var(--surf-2, #241F1A);
  color: var(--muted, #8C8175);
  border-bottom-color: var(--border, #2E2822);
}
[data-theme="dark"] .data-table tbody td,
[data-theme="dark"] .sh-table tbody td {
  color: var(--text, #E2D8CE);
  border-bottom-color: var(--border, #2E2822);
}
[data-theme="dark"] .data-table tbody tr:hover,
[data-theme="dark"] .sh-table tbody tr:hover {
  background: var(--surf-2, #241F1A);
}


/* ===== gemergt aus sh-redesign-02-shell.css ===== */
/* =========================================================================
   ServiceHub — Redesign 02: App-Shell (Sidebar · Topbar · Navigation · Suche)
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Additive Schicht (lädt zuletzt → gewinnt die Kaskade).
   Styled die ECHTEN Shell-Selektoren der internen App
   (.sidebar/#sidebarEl, .brand*, .sidebar-search*, .nav-group*, .nav-item*,
    .role-badge, .topbar*, .global-search-wrap/.search-input, .breadcrumb)
   nach dem Vorlagen-Paket (ServiceHub.html / sh/app.css: .sidebar/.brand/.nav).

   KEINE Funktions-/Markup-/Logik-Änderung: Navigation, Routing, Aktiv-Erkennung,
   Rollenfilter und Klappverhalten bleiben unberührt. Es wird NICHTS versteckt,
   das eine Funktion trägt — nur Farbe/Schrift/Radius/Schatten/Abstand/Rahmen.

   Tokens (warme Palette des neuen Systems) sind hier auf die Shell-Container
   gescoped, damit globale Basis-Tokens NICHT neu definiert werden. Light + Dark
   ([data-theme="dark"]) exakt nach Token-Vertrag.
   ========================================================================= */



/* ---------- Tokens (Light) — auf die Shell-Roots gescoped ---------- */
.sidebar,
.main-area,
.topbar,
#breadcrumb.breadcrumb {
  --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-warn: #C7791A;
  --sh-info: #2F6BD6;
  --sh-violet: #7C5BD6;

  --sh-bg: #FAF6F2;
  --sh-surface: #FFFFFF;
  --sh-surf-2: #F6F1EB;
  --sh-surf-3: #EFE8E0;
  --sh-field: #F6F1EB;

  --sh-ink: #231C17;
  --sh-text: #463D35;
  --sh-text-2: #6B6157;
  --sh-muted: #9A8F84;
  --sh-border: #EEE5DC;
  --sh-border-2: #E3D9CE;

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

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .main-area,
[data-theme="dark"] .topbar,
[data-theme="dark"] #breadcrumb.breadcrumb {
  --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-warn: #E5A33C;
  --sh-info: #5C8FE8;
  --sh-violet: #9D82E6;

  --sh-bg: #15120F;
  --sh-surface: #1E1A16;
  --sh-surf-2: #241F1A;
  --sh-surf-3: #2C2620;
  --sh-field: #241F1A;

  --sh-ink: #F6F1EC;
  --sh-text: #E2D8CE;
  --sh-text-2: #B3A99E;
  --sh-muted: #8C8175;
  --sh-border: #2E2822;
  --sh-border-2: #3A332B;

  --sh-shadow-soft: 0 6px 20px rgba(0, 0, 0, .35);
  --sh-shadow-accent: 0 5px 14px rgba(0, 0, 0, .5);
}

/* =========================================================================
   SIDEBAR
   ========================================================================= */
#sidebarEl.sidebar {
  background: var(--sh-surface);
  color: var(--sh-text);
  border-right: 1px solid var(--sh-border);
  font-family: var(--sh-font-body);
  /* funktional unverändert: bleibt scrollbar + sticky (aus internal.css) */
}

/* ---------- Brand-Block ---------- */
#sidebarEl .brand {
  border-bottom: 1px solid var(--sh-border);
  gap: 11px;
}

/* Logo-Feld: quadratisch, roter Verlauf, weicher Schatten */
#sidebarEl .brand .brand-logo-wrap,
#sidebarEl .brand .brand-mark {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, #F4533C, var(--sh-accent-700));
  box-shadow: var(--sh-shadow-accent);
  color: #fff;
  font-family: var(--sh-font-head);
  font-weight: 700;
  overflow: hidden;
}
#sidebarEl .brand .brand-logo-wrap img {
  border-radius: 9px;
}

/* Firmenname + Unterzeile */
#sidebarEl .brand .brand-title {
  font-family: var(--sh-font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--sh-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sidebarEl .brand .brand-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: var(--sh-muted);
  opacity: 1;
  white-space: nowrap;
}

/* ---------- Such-Pille "Menü durchsuchen …" ---------- */
#sidebarEl .sidebar-search-wrap {
  position: sticky;
  background: var(--sh-surface);
}
#sidebarEl .sidebar-search-input {
  background: var(--sh-field);
  border: 1px solid var(--sh-border-2);
  border-radius: 11px;
  color: var(--sh-text);
  /* Platz rechts für das ⌘K-Kürzel (nur optisch, kein Markup) */
  padding: 9px 46px 9px 11px;
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
#sidebarEl .sidebar-search-input::placeholder {
  color: var(--sh-muted);
}
#sidebarEl .sidebar-search-input:hover {
  border-color: var(--sh-accent);
}
#sidebarEl .sidebar-search-input:focus {
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 3px var(--sh-accent-soft);
}
/* ⌘K-Hinweis als Pseudo am Wrapper — non-interaktiv, überlagert nichts Klickbares */
#sidebarEl .sidebar-search-wrap::after {
  content: "⌘K";
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  /* der Wrapper hat unten 10px Innen-Padding → optisch mittig zum Feld nachjustieren */
  margin-top: -5px;
  pointer-events: none;
  font-family: var(--sh-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--sh-muted);
  background: var(--sh-surf-2);
  border: 1px solid var(--sh-border-2);
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1.1;
}

/* ---------- Gruppen-Captions ---------- */
#sidebarEl .nav-group {
  border-bottom-color: var(--sh-border);
}
#sidebarEl .nav-group--favorites {
  border-bottom-color: var(--sh-border);
}
#sidebarEl .nav-group-header {
  color: var(--sh-muted);
}
#sidebarEl .nav-group-header:hover {
  background: var(--sh-surf-2);
}
#sidebarEl .nav-group-header--static:hover {
  background: transparent;
}
#sidebarEl .nav-group--active .nav-group-header {
  background: var(--sh-surf-2);
  color: var(--sh-text);
}
#sidebarEl .nav-group-label {
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--sh-muted);
}
#sidebarEl .nav-group-chevron {
  color: var(--sh-muted);
}

/* ---------- Nav-Items ---------- */
#sidebarEl .nav-item {
  font-family: var(--sh-font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sh-text);
  border-radius: 11px;
  /* funktional unverändert: linker 3px-Streifen bleibt (transparent), wir färben ihn nur */
  border-left-color: transparent;
  gap: 12px;
  transition: background var(--sh-tr), color var(--sh-tr);
}
#sidebarEl .nav-item .nav-item-icon,
#sidebarEl .nav-item .nav-item-icon svg {
  color: var(--sh-muted);
  width: 18px;
  height: 18px;
}
#sidebarEl .nav-item:hover {
  background: var(--sh-surf-2);
  color: var(--sh-text);
}
#sidebarEl a.nav-item:hover {
  color: var(--sh-text);
}

/* Aktiv: weiches Accent-Feld + Accent-Text/Icon + 3px Balken links */
#sidebarEl .nav-item.active {
  position: relative;
  background: var(--sh-accent-soft);
  color: var(--sh-accent);
  font-weight: 700;
  /* den bestehenden border-left-Streifen unsichtbar halten, Balken kommt via ::before */
  border-left-color: transparent;
}
#sidebarEl .nav-item.active .nav-item-icon,
#sidebarEl .nav-item.active .nav-item-icon svg {
  color: var(--sh-accent);
}
#sidebarEl .nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sh-accent);
}

/* Favoriten-Stern: Akzent statt Default */
#sidebarEl .nav-item-fav {
  color: var(--sh-muted);
}
#sidebarEl .nav-item-fav--active {
  color: var(--sh-accent);
}

/* ---------- Footer-Status (.role-badge mit grünem Punkt) ---------- */
#sidebarEl .sidebar-footer {
  border-top: 1px solid var(--sh-border);
}
#sidebarEl .role-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--sh-border);
  color: var(--sh-text-2);
  opacity: 1;
  font-size: 12px;
}
#sidebarEl .role-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sh-ok);
  flex: none;
}
/* leeres Badge: keinen Punkt zeigen */
#sidebarEl .role-badge:empty {
  display: none;
}

/* =========================================================================
   TOPBAR
   ========================================================================= */
#topbar.topbar {
  background: var(--sh-surface);
  color: var(--sh-text);
  border-bottom: 1px solid var(--sh-border);
  font-family: var(--sh-font-body);
}
#topbar .topbar-brand .topbar-company-name {
  font-family: var(--sh-font-head);
  font-weight: 700;
  color: var(--sh-ink);
}

/* Globale Suche als helle Pille */
#topbar .global-search-wrap .search-input,
#topbar .search-input {
  background: var(--sh-field);
  border: 1px solid var(--sh-border-2);
  border-radius: 999px;
  color: var(--sh-ink);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
#topbar .search-input::placeholder {
  color: var(--sh-muted);
}
#topbar .search-input:hover {
  border-color: var(--sh-accent);
}
#topbar .search-input:focus {
  outline: none;
  border-color: var(--sh-accent);
  box-shadow: 0 0 0 3px var(--sh-accent-soft);
}

/* Topbar-Texte (User-Box) in warmer Palette */
#topbar .user-main {
  color: var(--sh-ink);
  font-weight: 600;
}
#topbar .user-sub {
  color: var(--sh-muted);
  opacity: 1;
}

/* Ghost-Buttons in der Topbar: warme Rahmen statt der dunklen Default-Overrides */
#topbar .btn-ghost {
  color: var(--sh-text-2);
  border-color: var(--sh-border-2);
}
#topbar .btn-ghost:hover {
  background: var(--sh-surf-2);
  color: var(--sh-accent);
  border-color: var(--sh-accent);
}

/* =========================================================================
   BREADCRUMB (liegt außerhalb der .topbar, unter .main-area)
   ========================================================================= */
#breadcrumb.breadcrumb {
  font-family: var(--sh-font-body);
  color: var(--sh-muted);
}
#breadcrumb.breadcrumb a,
#breadcrumb.breadcrumb .breadcrumb-link {
  color: var(--sh-text-2);
}
#breadcrumb.breadcrumb a:hover,
#breadcrumb.breadcrumb .breadcrumb-link:hover {
  color: var(--sh-accent);
}
#breadcrumb.breadcrumb .breadcrumb-current {
  color: var(--sh-ink);
  font-weight: 600;
}


/* ===== gemergt aus sh-redesign-assets.css ===== */
/* =========================================================================
   ServiceHub — Redesign-Schicht: Anlagen & Wartung  (NUR Optik)
   ──────────────────────────────────────────────────────────────────────────
   Bereich: Anlagen-Liste/-Detail (#assets / asset-detail) + Wartungs-/Service-
   Ansichten (maintenance-landing/-contracts/-due/-calendar, asset-detail
   „Wartung & Prüfung"). Cockpit-KPIs, Tabellen-Akzente, Fälligkeits-/Status-
   Badges in der warmen Token-Optik des neuen Design-Systems.

   REGELN:
   • Additiv, lädt zuletzt → gewinnt die Kaskade über realistische Selektoren
     (Bereichs-Container statt !important-Spam).
   • Nur Farbe/Schrift/Radius/Schatten/Abstand/Rahmen/Hintergrund. KEINE Logik-,
     Layout- oder Markup-Änderung. Nichts Funktionales wird versteckt/verschoben.
   • Ausschließlich Design-Tokens. Die warme Token-Quelle (--accent, --surf-2,
     --ink, --text-2, --honey, --info, --ok, --warn, --font-head, --r-md, --sh-md,
     --ring …) stellt die Fundament-Datei (theme.css → :root / [data-theme]).
     Hier werden KEINE globalen Basis-Tokens und KEINE Basis-Komponenten
     (.btn/.badge/.data-table/.input) neu definiert.
   • Light + Dark: alles über Tokens; Dark-Feinschliff via [data-theme="dark"].
   • Defensive Fallbacks via var(--token, <legacy>) — bricht nicht, falls diese
     Schicht vor der Fundament-Datei geladen würde.

   Die echten Klassen dieses Bereichs (verifiziert in internal.js):
     Liste:   .page-header .subtitle · .panel · .dashboard-kpi-grid > .kpi-card
              (.kpi-card--warn/.kpi-card--ok) · .filter-toolbar · .data-table
              · .empty-state-panel/-icon/-title/-desc
     Detail:  .tabs/.tab-btn · .dense-list · .section-header · .kpi-grid >
              .panel.kpi-card (h3 + .kpi-value) · .actions-row · .data-table
              · .status-badge + Tönungen .status-ok/.status-failed/
                .status-warning/.status-running
     Wartung: Landing .admin-cards/.admin-card · Tabellen mit Fälligkeit/Status
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) ANLAGEN-COCKPIT — Kosten-KPIs (Liste) in warmer Token-Optik
   Container: .panel > .dashboard-kpi-grid > .kpi-card   (nur hier in einem
   .panel verschachtelt → trifft NICHT das eigenständige Haupt-Dashboard).
   ------------------------------------------------------------------------- */
.panel > .dashboard-kpi-grid {
  gap: 14px;
}
.panel > .dashboard-kpi-grid > .kpi-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #eee5dc);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-md, 0 6px 20px rgba(120, 80, 50, .07));
  padding: 16px 18px;
  transition: box-shadow .16s cubic-bezier(.2, .7, .3, 1), border-color .16s cubic-bezier(.2, .7, .3, 1), transform .16s cubic-bezier(.2, .7, .3, 1);
}
.panel > .dashboard-kpi-grid > .kpi-card:hover {
  box-shadow: var(--sh-lg, 0 18px 44px rgba(120, 80, 50, .14));
  border-color: var(--border-2, #e3d9ce);
  transform: translateY(-1px);
}
.panel > .dashboard-kpi-grid > .kpi-card .kpi-label {
  color: var(--muted, #9a8f84);
  font-family: var(--font-body, inherit);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.panel > .dashboard-kpi-grid > .kpi-card .kpi-value {
  color: var(--ink, #231c17);
  font-family: var(--font-head, inherit);
  font-weight: 700;
  letter-spacing: -.01em;
}
.panel > .dashboard-kpi-grid > .kpi-card .kpi-meta {
  color: var(--text-2, #6b6157);
}
/* Akzent-Streifen der Status-Karten auf warme Tokens umlegen */
.panel > .dashboard-kpi-grid > .kpi-card.kpi-card--warn {
  border-left: 4px solid var(--warn, #c7791a);
  background: linear-gradient(100deg, var(--warn-soft, rgba(199, 121, 26, .10)), var(--surface, #fff) 62%);
}
.panel > .dashboard-kpi-grid > .kpi-card.kpi-card--ok {
  border-left: 4px solid var(--ok, #16a34a);
  background: linear-gradient(100deg, var(--ok-soft, rgba(22, 163, 74, .10)), var(--surface, #fff) 62%);
}

/* -------------------------------------------------------------------------
   2) ANLAGEN-DETAIL — Wartungs-/Kosten-KPIs als „panel kpi-card" (h3 + value)
   Distinkter Doppel-Klassen-Container .kpi-grid > .panel.kpi-card kommt nur in
   der Anlagen-Detailseite (Tab „Wartung & Prüfung", Kosten) vor.
   ------------------------------------------------------------------------- */
.kpi-grid {
  gap: 12px;
}
.kpi-grid > .panel.kpi-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #eee5dc);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-sm, 0 1px 2px rgba(120, 80, 50, .06));
  padding: 14px 16px;
  transition: box-shadow .16s cubic-bezier(.2, .7, .3, 1), border-color .16s cubic-bezier(.2, .7, .3, 1);
}
.kpi-grid > .panel.kpi-card:hover {
  box-shadow: var(--sh-md, 0 6px 20px rgba(120, 80, 50, .07));
  border-color: var(--accent-line, rgba(231, 61, 37, .22));
}
.kpi-grid > .panel.kpi-card > h3 {
  margin: 0 0 6px;
  color: var(--muted, #9a8f84);
  font-family: var(--font-body, inherit);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.kpi-grid > .panel.kpi-card > .kpi-value {
  color: var(--ink, #231c17);
  font-family: var(--font-head, inherit);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* -------------------------------------------------------------------------
   3) ANLAGEN-DETAIL — Tab-Leiste + Stammdaten-Liste (.dense-list)
   ------------------------------------------------------------------------- */
.tabs {
  border-bottom: 1px solid var(--border, #eee5dc);
  gap: 2px;
}
.tabs .tab-btn {
  font-family: var(--font-body, inherit);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-2, #6b6157);
  border-radius: var(--r-sm, 9px) var(--r-sm, 9px) 0 0;
  transition: color .16s, background .16s, box-shadow .16s;
}
.tabs .tab-btn:hover {
  color: var(--ink, #231c17);
  background: var(--surf-2, #f6f1eb);
}
.tabs .tab-btn.active {
  color: var(--accent, #e73d25);
  box-shadow: inset 0 -2px 0 var(--accent, #e73d25);
}
.tabs .tab-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring, 0 0 0 3px rgba(231, 61, 37, .18));
}

.dense-list li {
  border-bottom: 1px solid var(--border, #eee5dc);
}
.dense-list li > span:first-child {
  color: var(--muted, #9a8f84);
  font-weight: 600;
}
.dense-list li > span:last-child {
  color: var(--ink, #231c17);
}

/* Abschnitts-Kopf in Detail-Panels (Titel + Aktionen nebeneinander) */
.section-header > div > h2 {
  font-family: var(--font-head, inherit);
  color: var(--ink, #231c17);
  letter-spacing: -.01em;
}
.section-header .muted {
  color: var(--text-2, #6b6157);
}

/* -------------------------------------------------------------------------
   4) FÄLLIGKEITS- & STATUS-BADGES — warme Token-Optik
   Die Wartungs-/Anlagen-Tabellen nutzen die Tönungs-Klassen status-ok/
   status-failed/status-warning/status-running (Fällig / Überfällig / Geplant /
   Abgeschlossen) sowie .status-badge mit denselben Modifiern. Hier nur die
   Farbgebung auf Tokens umgestellt; Form/Funktion unverändert.
   ------------------------------------------------------------------------- */
.status-badge.status-ok,
.status-badge--ok,
span.status-ok {
  background: var(--ok-soft, #e9f8ef);
  color: var(--ok, #16a34a);
  border: 1px solid color-mix(in srgb, var(--ok, #16a34a) 26%, transparent);
}
.status-badge.status-warning,
.status-badge--warning,
span.status-warning {
  background: var(--warn-soft, #fbf1e0);
  color: var(--warn, #c7791a);
  border: 1px solid color-mix(in srgb, var(--warn, #c7791a) 26%, transparent);
}
.status-badge.status-running,
.status-badge--running,
span.status-running {
  background: var(--info-soft, #eaf1fc);
  color: var(--info, #2f6bd6);
  border: 1px solid color-mix(in srgb, var(--info, #2f6bd6) 26%, transparent);
}
.status-badge.status-failed,
.status-badge--failed,
span.status-failed {
  background: var(--accent-soft, #fceee7);
  color: var(--accent-700, #c5331e);
  border: 1px solid var(--accent-line, rgba(231, 61, 37, .22));
}

/* -------------------------------------------------------------------------
   5) WARTUNG — Landing-Kacheln (.admin-cards) im Wartungs-/Service-Hub
   Nur additive Tonung; die Kacheln bleiben vollständig klickbar.
   ------------------------------------------------------------------------- */
.admin-cards > .admin-card {
  border: 1px solid var(--border, #eee5dc);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-sm, 0 1px 2px rgba(120, 80, 50, .06));
  background: var(--surface, #fff);
  transition: box-shadow .16s cubic-bezier(.2, .7, .3, 1), border-color .16s cubic-bezier(.2, .7, .3, 1), transform .16s cubic-bezier(.2, .7, .3, 1);
}
.admin-cards > .admin-card:hover {
  border-color: var(--accent, #e73d25);
  box-shadow: var(--sh-md, 0 6px 20px rgba(120, 80, 50, .07));
  background: var(--surface, #fff);
  transform: translateY(-1px);
}
.admin-cards > .admin-card > h2,
.admin-cards > .admin-card > h3 {
  font-family: var(--font-head, inherit);
  color: var(--ink, #231c17);
  letter-spacing: -.005em;
}
.admin-cards > .admin-card:hover > h2,
.admin-cards > .admin-card:hover > h3 {
  color: var(--accent, #e73d25);
}
.admin-cards > .admin-card > p {
  color: var(--text-2, #6b6157);
}

/* -------------------------------------------------------------------------
   6) DARK MODE — Feinschliff (Tokens tragen die Farben bereits; hier nur
   weichere Gradient-Mischungen, damit die Akzent-Karten nicht „glühen").
   ------------------------------------------------------------------------- */
[data-theme="dark"] .panel > .dashboard-kpi-grid > .kpi-card.kpi-card--warn {
  background: linear-gradient(100deg, var(--warn-soft, rgba(229, 163, 60, .15)), var(--surface, #1e1a16) 64%);
}
[data-theme="dark"] .panel > .dashboard-kpi-grid > .kpi-card.kpi-card--ok {
  background: linear-gradient(100deg, var(--ok-soft, rgba(59, 192, 122, .15)), var(--surface, #1e1a16) 64%);
}
[data-theme="dark"] .tabs .tab-btn:hover {
  background: var(--surf-2, #241f1a);
}


/* ===== gemergt aus sh-redesign-orders.css ===== */
/* =========================================================================
   ServiceHub — Redesign: AUFTRÄGE (Liste + Kanban)
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Additive Schicht (lädt zuletzt → gewinnt die Kaskade).
   Re-tunt NUR die Auftrags-Oberfläche der internen App nach dem warmen
   Redesign-System (theme.css / sh-detail-drawer.css):
     · page-header / .sh-header / .sh-header__left / .sh-header__actions
     · Ansicht-Umschalter  .sh-view-toggle (Liste/Kanban)
     · Filter-Toolbar      .filter-toolbar.sh-toolbar + .sh-chips/.sh-chip
     · Aktive-Filter-Facetten  .sh-facets/.sh-facet/.sh-facet__x/.sh-facet-clear-all
     · Auftrags-Tabelle    .table-wrap.sh-panel (+ Gruppen-Zeilen, Leerzustand)
     · Kanban-Board        .sh-kanban-wrap[data-orders-board] → Spalten/Karten

   KEINE Funktions-/Markup-/Logik-Änderung. Es wird NICHTS versteckt, das eine
   Funktion trägt (Buttons/Felder/Tabs/Links/Zeilen bleiben) — nur Farbe,
   Schrift, Radius, Schatten, Abstand, Rahmen.

   Scope: Kanban-Regeln hängen an [data-orders-board] (NICHT an die globalen
   .sh-kanban*, die auch CRM/Support nutzen). Liste/Toolbar/Header werden über
   den Auftrags-Header-Kontext (.page-header + folgende .sh-toolbar/.table-wrap)
   gescoped. Drawer (sh-detail-drawer.css) wird NICHT angefasst.

   Tokens (warme Palette) sind lokal auf die Auftrags-Container gescoped →
   unabhängig von der Ladereihenfolge. Light + Dark ([data-theme="dark"]).
   ========================================================================= */



/* ---------- Tokens (Light) — auf die Auftrags-Container gescoped ---------- */
.page-header.sh-header,
.filter-toolbar.sh-toolbar,
.sh-facets,
.table-wrap.sh-panel,
.sh-kanban-wrap[data-orders-board],
[data-orders-board] {
  --sho-accent: #E73D25;
  --sho-accent-700: #C5331E;
  --sho-accent-soft: #FCEDE7;
  --sho-accent-line: rgba(231, 61, 37, .22);
  --sho-honey: #D99A2B;
  --sho-honey-soft: #FBF0DA;
  --sho-ok: #16A34A;
  --sho-ok-soft: #E9F8EF;
  --sho-warn: #C7791A;
  --sho-warn-soft: #FBF1E0;
  --sho-info: #2F6BD6;
  --sho-info-soft: #EAF1FC;
  --sho-violet: #7C5BD6;
  --sho-violet-soft: #F0ECFB;

  --sho-bg: #FAF6F2;
  --sho-surface: #FFFFFF;
  --sho-surf-2: #F6F1EB;
  --sho-surf-3: #EFE8E0;
  --sho-field: #F6F1EB;

  --sho-ink: #231C17;
  --sho-text: #463D35;
  --sho-text-2: #6B6157;
  --sho-muted: #9A8F84;
  --sho-border: #EEE5DC;
  --sho-border-2: #E3D9CE;

  --sho-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --sho-font-body: 'Figtree', system-ui, sans-serif;
  --sho-font-mono: 'Space Mono', ui-monospace, monospace;

  --sho-r-sm: 9px;
  --sho-r-md: 12px;
  --sho-r-lg: 16px;
  --sho-r-pill: 999px;

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

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .page-header.sh-header,
[data-theme="dark"] .filter-toolbar.sh-toolbar,
[data-theme="dark"] .sh-facets,
[data-theme="dark"] .table-wrap.sh-panel,
[data-theme="dark"] .sh-kanban-wrap[data-orders-board],
[data-theme="dark"] [data-orders-board] {
  --sho-accent: #F2543B;
  --sho-accent-700: #E0432B;
  --sho-accent-soft: rgba(242, 84, 59, .16);
  --sho-accent-line: rgba(242, 84, 59, .30);
  --sho-honey: #E6AE4A;
  --sho-honey-soft: rgba(230, 174, 74, .16);
  --sho-ok: #3BC07A;
  --sho-ok-soft: rgba(59, 192, 122, .15);
  --sho-warn: #E5A33C;
  --sho-warn-soft: rgba(229, 163, 60, .15);
  --sho-info: #5C8FE8;
  --sho-info-soft: rgba(92, 143, 232, .16);
  --sho-violet: #9D82E6;
  --sho-violet-soft: rgba(157, 130, 230, .16);

  --sho-bg: #15120F;
  --sho-surface: #1E1A16;
  --sho-surf-2: #241F1A;
  --sho-surf-3: #2C2620;
  --sho-field: #241F1A;

  --sho-ink: #F6F1EC;
  --sho-text: #E2D8CE;
  --sho-text-2: #B3A99E;
  --sho-muted: #8C8175;
  --sho-border: #2E2822;
  --sho-border-2: #3A332B;

  --sho-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sho-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sho-sh-accent: 0 5px 14px rgba(0, 0, 0, .5);
}

/* =========================================================================
   SEITENKOPF — "Interne Auftragsliste"
   (Scope: nur der Kopf, dessen Aktionen den Auftrags-Ansicht-Umschalter tragen)
   ========================================================================= */
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) {
  font-family: var(--sho-font-body);
  align-items: flex-start;
}
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) .sh-header__left h1 {
  font-family: var(--sho-font-head);
  color: var(--sho-ink);
  letter-spacing: -.015em;
  font-weight: 700;
}
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) .sh-header__context,
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) .subtitle {
  color: var(--sho-text-2);
}

/* =========================================================================
   ANSICHT-UMSCHALTER  ☰ / ▦  (Liste / Kanban)
   ========================================================================= */
.sh-view-toggle:has([data-orders-view-mode]) {
  border: 1px solid var(--sho-border-2);
  border-radius: var(--sho-r-sm);
  background: var(--sho-surface);
  box-shadow: var(--sho-sh-sm);
  overflow: hidden;
}
.sh-view-toggle:has([data-orders-view-mode]) button {
  color: var(--sho-text-2);
  font-family: var(--sho-font-body);
  transition: var(--sho-tr);
}
.sh-view-toggle:has([data-orders-view-mode]) button + button {
  border-left: 1px solid var(--sho-border-2);
}
.sh-view-toggle:has([data-orders-view-mode]) button:hover {
  background: var(--sho-accent-soft);
  color: var(--sho-accent);
}
.sh-view-toggle:has([data-orders-view-mode]) button.active {
  background: var(--sho-accent);
  color: #fff;
}

/* =========================================================================
   FILTER-TOOLBAR  (Chips + Status-/Operativ-Selects + Gruppieren)
   Scope: die Toolbar, die direkt auf den Auftrags-Header folgt.
   ========================================================================= */
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) + .filter-toolbar.sh-toolbar {
  background: var(--sho-surface);
  border: 1px solid var(--sho-border);
  border-radius: var(--sho-r-md);
  box-shadow: var(--sho-sh-sm);
  font-family: var(--sho-font-body);
}

/* Filter-Chips (Pillen) */
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) + .filter-toolbar.sh-toolbar .sh-chip {
  background: var(--sho-surf-2);
  border: 1px solid var(--sho-border-2);
  color: var(--sho-text);
  border-radius: var(--sho-r-pill);
  font-weight: 600;
  transition: var(--sho-tr);
}
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) + .filter-toolbar.sh-toolbar .sh-chip:hover {
  border-color: var(--sho-accent);
  color: var(--sho-accent);
  background: var(--sho-accent-soft);
}
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) + .filter-toolbar.sh-toolbar .sh-chip.active,
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) + .filter-toolbar.sh-toolbar .sh-chip--active {
  background: var(--sho-accent);
  border-color: var(--sho-accent);
  color: #fff;
  box-shadow: var(--sho-sh-accent);
}

/* Selects (Status / Operative Sicht / Gruppieren) */
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) + .filter-toolbar.sh-toolbar .select {
  background: var(--sho-field);
  border: 1px solid var(--sho-border-2);
  color: var(--sho-text);
  border-radius: var(--sho-r-sm);
  font-family: var(--sho-font-body);
  transition: var(--sho-tr);
}
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) + .filter-toolbar.sh-toolbar .select:hover {
  border-color: var(--sho-border);
}
.page-header.sh-header:has(.sh-view-toggle [data-orders-view-mode]) + .filter-toolbar.sh-toolbar .select:focus {
  outline: none;
  border-color: var(--sho-accent);
  box-shadow: 0 0 0 3px var(--sho-accent-soft);
}

/* =========================================================================
   AKTIVE-FILTER-FACETTEN  ("Aktive Filter: Status: …  ×")
   Eindeutig der Auftrags-Container: #ordersFacets.
   ========================================================================= */
#ordersFacets.sh-facets {
  font-family: var(--sho-font-body);
}
#ordersFacets.sh-facets .sh-facets__label {
  color: var(--sho-muted);
  font-weight: 600;
}
#ordersFacets.sh-facets .sh-facet {
  background: var(--sho-accent-soft);
  border: 1px solid var(--sho-accent-line);
  color: var(--sho-accent-700);
  border-radius: var(--sho-r-pill);
}
#ordersFacets.sh-facets .sh-facet__k {
  font-weight: 700;
  color: var(--sho-accent);
}
#ordersFacets.sh-facets .sh-facet__x {
  color: var(--sho-accent-700);
  transition: var(--sho-tr);
}
#ordersFacets.sh-facets .sh-facet__x:hover {
  background: var(--sho-accent);
  color: #fff;
}
#ordersFacets.sh-facets .sh-facet-clear-all {
  color: var(--sho-muted);
}
#ordersFacets.sh-facets .sh-facet-clear-all:hover {
  color: var(--sho-accent);
}

/* =========================================================================
   AUFTRAGS-TABELLE  (Listenansicht)
   Scope: die Tabelle, die im Auftrags-Render direkt auf #ordersFacets folgt.
   (Greift auch nach der Batch-Leiste — :has() prüft den Inhalt der Tabelle.)
   ========================================================================= */
.table-wrap.sh-panel:has(tr[data-row-order-id]),
.table-wrap.sh-panel:has(#selectAllOrders) {
  background: var(--sho-surface);
  border: 1px solid var(--sho-border);
  border-radius: var(--sho-r-lg);
  box-shadow: var(--sho-sh-md);
  overflow: hidden;
  font-family: var(--sho-font-body);
}

/* Kopfzeile */
.table-wrap.sh-panel:has(tr[data-row-order-id]) thead th,
.table-wrap.sh-panel:has(#selectAllOrders) thead th {
  background: var(--sho-surf-2);
  color: var(--sho-text-2);
  border-bottom: 1px solid var(--sho-border-2);
  font-family: var(--sho-font-head);
  font-weight: 600;
  letter-spacing: .01em;
}

/* Datenzeilen */
.table-wrap.sh-panel:has(tr[data-row-order-id]) tbody td {
  color: var(--sho-text);
  border-bottom: 1px solid var(--sho-border);
}
.table-wrap.sh-panel:has(tr[data-row-order-id]) tbody tr[data-row-order-id] {
  transition: background var(--sho-tr);
}
.table-wrap.sh-panel:has(tr[data-row-order-id]) tbody tr[data-row-order-id]:hover td {
  background: var(--sho-accent-soft);
}

/* Auftragsnummer monospace + Zahl-Ästhetik */
.table-wrap.sh-panel:has(tr[data-row-order-id]) tbody tr[data-row-order-id] td:nth-child(3) {
  font-family: var(--sho-font-mono);
  color: var(--sho-ink);
  font-size: .92em;
}

/* Gruppen-Zeile (Gruppieren nach Status/Kunde) */
.table-wrap.sh-panel:has(tr[data-row-order-id]) tr.sh-group-row td,
.table-wrap.sh-panel:has(#selectAllOrders) tr.sh-group-row td {
  background: var(--sho-surf-2);
  color: var(--sho-text);
  border-top: 1px solid var(--sho-border-2);
  border-bottom: 1px solid var(--sho-border-2);
  font-family: var(--sho-font-head);
}
.table-wrap.sh-panel:has(tr[data-row-order-id]) tr.sh-group-row:hover td {
  background: var(--sho-surf-3);
}
.table-wrap.sh-panel:has(tr[data-row-order-id]) tr.sh-group-row .sh-group-count {
  background: var(--sho-accent-soft);
  color: var(--sho-accent-700);
  border-radius: var(--sho-r-pill);
  padding: 1px 9px;
  font-size: .78em;
  font-weight: 700;
}
.table-wrap.sh-panel:has(tr[data-row-order-id]) tr.sh-group-row .sh-group-caret {
  color: var(--sho-muted);
}

/* "Details"-Button in der Aktionsspalte — weiches Ghost-Pillen-Design */
.table-wrap.sh-panel:has(tr[data-row-order-id]) tbody tr[data-row-order-id] td .btn-ghost {
  border: 1px solid var(--sho-border-2);
  color: var(--sho-text);
  background: var(--sho-surface);
  border-radius: var(--sho-r-pill);
  transition: var(--sho-tr);
}
.table-wrap.sh-panel:has(tr[data-row-order-id]) tbody tr[data-row-order-id] td .btn-ghost:hover {
  border-color: var(--sho-accent);
  color: var(--sho-accent);
  background: var(--sho-accent-soft);
}

/* Leerzustand */
.table-wrap.sh-panel .sh-empty-state {
  color: var(--sho-text-2);
  font-family: var(--sho-font-body);
}
.table-wrap.sh-panel .sh-empty-state strong {
  color: var(--sho-ink);
  font-family: var(--sho-font-head);
}
.table-wrap.sh-panel .sh-empty-state__icon {
  filter: saturate(.9);
}

/* =========================================================================
   KANBAN-BOARD  (Auftrags-Pipeline je internem Status)
   Scope: streng auf [data-orders-board] (NICHT die globalen .sh-kanban*,
   die CRM-Opportunities & Support-Tickets ebenfalls verwenden).
   ========================================================================= */
.sh-kanban-wrap[data-orders-board] {
  font-family: var(--sho-font-body);
}
.sh-kanban-wrap[data-orders-board] .sh-kanban {
  padding-bottom: 14px;
}

/* Spalte als weiche Karte */
.sh-kanban-wrap[data-orders-board] .sh-kanban__col {
  background: var(--sho-surf-2);
  border: 1px solid var(--sho-border);
  border-radius: var(--sho-r-lg);
  box-shadow: var(--sho-sh-sm);
}

/* Spaltenkopf mit Akzent-Oberkante */
.sh-kanban-wrap[data-orders-board] .sh-kanban__col-head {
  background: var(--sho-surface);
  border-bottom: 1px solid var(--sho-border);
  border-top: 3px solid var(--sho-muted);
  border-radius: var(--sho-r-lg) var(--sho-r-lg) 0 0;
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__col--info    .sh-kanban__col-head { border-top-color: var(--sho-info); }
.sh-kanban-wrap[data-orders-board] .sh-kanban__col--warning .sh-kanban__col-head { border-top-color: var(--sho-honey); }
.sh-kanban-wrap[data-orders-board] .sh-kanban__col--success .sh-kanban__col-head { border-top-color: var(--sho-ok); }
.sh-kanban-wrap[data-orders-board] .sh-kanban__col--danger  .sh-kanban__col-head { border-top-color: var(--sho-accent); }
.sh-kanban-wrap[data-orders-board] .sh-kanban__col--neutral .sh-kanban__col-head { border-top-color: var(--sho-muted); }

.sh-kanban-wrap[data-orders-board] .sh-kanban__col-title {
  font-family: var(--sho-font-head);
  color: var(--sho-ink);
  font-weight: 700;
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__col-meta {
  font-family: var(--sho-font-mono);
  color: var(--sho-muted);
  background: var(--sho-surf-2);
  border-radius: var(--sho-r-pill);
  padding: 1px 8px;
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__col-empty {
  color: var(--sho-muted);
}

/* Karte */
.sh-kanban-wrap[data-orders-board] .sh-kanban__card {
  background: var(--sho-surface);
  border: 1px solid var(--sho-border);
  border-radius: var(--sho-r-md);
  box-shadow: var(--sho-sh-sm);
  color: var(--sho-text);
  transition: var(--sho-tr);
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__card:hover {
  border-color: var(--sho-accent-line);
  box-shadow: var(--sho-sh-md);
  transform: translateY(-1px);
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__card--dragging {
  box-shadow: var(--sho-sh-accent);
  border-color: var(--sho-accent);
  opacity: .92;
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__card-no {
  font-family: var(--sho-font-mono);
  color: var(--sho-muted);
  font-size: .82em;
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__card-title {
  font-family: var(--sho-font-head);
  color: var(--sho-ink);
  font-weight: 600;
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__card-customer {
  color: var(--sho-text-2);
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__card-date {
  color: var(--sho-muted);
  font-size: .82em;
}

/* Drop-Ziel beim Ziehen einer Karte zwischen Spalten */
.sh-kanban-wrap[data-orders-board] .sh-kanban__col--drop {
  outline: 2px dashed var(--sho-accent);
  outline-offset: -2px;
}
.sh-kanban-wrap[data-orders-board] .sh-kanban__col--drop .sh-kanban__col-body {
  background: var(--sho-accent-soft);
}

/* =========================================================================
   FALLBACK ohne :has()  (sehr alte Browser)
   Ein paar konservative Grundtöne, damit die Auftrags-Flächen warm wirken,
   selbst wenn die :has()-Scopes oben nicht greifen. Nichts versteckt.
   ========================================================================= */
@supports not (selector(:has(*))) {
  #ordersFacets.sh-facets .sh-facet {
    background: var(--sho-accent-soft);
    border: 1px solid var(--sho-accent-line);
    color: var(--sho-accent-700);
  }
  .sh-kanban-wrap[data-orders-board] .sh-kanban__col {
    background: var(--sho-surf-2);
    border: 1px solid var(--sho-border);
    border-radius: var(--sho-r-lg);
  }
  .sh-kanban-wrap[data-orders-board] .sh-kanban__card {
    background: var(--sho-surface);
    border: 1px solid var(--sho-border);
    border-radius: var(--sho-r-md);
  }
}


/* ===== gemergt aus sh-redesign-quotes.css ===== */
/* =========================================================================
   ServiceHub — Redesign: ANGEBOTE (Quotes) — rein optisch
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Additive Schicht (lädt zuletzt → gewinnt die Kaskade).
   Re-skinnt NUR angebots-spezifische Selektoren der internen App nach dem
   Vorlagen-Paket (sh/angebot.js: KPI-Rail/rcard, Stepper, Summen, Kanban):

     Liste  (renderQuotesListView):
       [data-quotes-board] + dessen .sh-kanban__*  (Angebots-Board)
       .quote-status-group  (Quickfilter-Chips, angebots-eigene Klasse)
       #quotesFacets .sh-facet* · #quotesFavorites · #quotesSelBar (Batchbar)
       Beträge (Netto/Brutto) in der Angebots-Tabelle in Token-Farben
     Editor (quote-editor-integration.js, .qei-* + .sh-smartbtn KPI-Rail):
       .qei-status-card · .qei-versand-card · .qei-action-btn ·
       .qei-secondary-menu · .qei-actions-sidebar · .qei-mb-btn ·
       .qei-bottom-sheet* · .sh-smartbtns/.sh-smartbtn (Kennzahlen-Rail)

   KEINE Funktions-/Markup-/Logik-Änderung: nichts Funktionales wird versteckt
   (keine Buttons/Felder/Tabs/Zeilen via display:none). Nur Farbe/Schrift/
   Radius/Schatten/Abstand/Rahmen. Keine globale Basis (.btn/.badge/.data-table/
   .panel/:root) wird neu definiert. Light + Dark ([data-theme="dark"]) exakt
   nach Token-Vertrag. Tokens lokal auf die Angebots-Container gescoped, damit
   die Datei nicht von der Ladereihenfolge abhängt.
   ========================================================================= */



/* ---------- Tokens (Light) — auf die Angebots-Roots gescoped ---------- */
[data-quotes-board],
#quotesFacets,
#quotesFavorites,
#quotesSelBar,
.quote-status-group,
.qei-editor-container,
.qei-actions-sidebar,
.qei-status-card,
.qei-versand-card,
.qei-secondary-menu,
.qei-mobile-bottom-bar,
.qei-bottom-sheet,
.sh-smartbtns {
  --shq-accent: #E73D25;
  --shq-accent-700: #C5331E;
  --shq-accent-600: #D6371F;
  --shq-accent-soft: #FCEDE7;
  --shq-accent-line: rgba(231, 61, 37, .22);
  --shq-honey: #D99A2B;
  --shq-honey-soft: #FBF0DA;
  --shq-ok: #16A34A;
  --shq-ok-soft: #E9F8EF;
  --shq-warn: #C7791A;
  --shq-warn-soft: #FBF1E0;
  --shq-info: #2F6BD6;
  --shq-info-soft: #EAF1FC;
  --shq-violet: #7C5BD6;
  --shq-violet-soft: #F0ECFB;

  --shq-bg: #FAF6F2;
  --shq-surface: #FFFFFF;
  --shq-surf-2: #F6F1EB;
  --shq-surf-3: #EFE8E0;
  --shq-field: #F6F1EB;

  --shq-ink: #231C17;
  --shq-text: #463D35;
  --shq-text-2: #6B6157;
  --shq-muted: #9A8F84;
  --shq-border: #EEE5DC;
  --shq-border-2: #E3D9CE;

  --shq-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --shq-font-body: 'Figtree', system-ui, sans-serif;
  --shq-font-mono: 'Space Mono', ui-monospace, monospace;

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

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

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] [data-quotes-board],
[data-theme="dark"] #quotesFacets,
[data-theme="dark"] #quotesFavorites,
[data-theme="dark"] #quotesSelBar,
[data-theme="dark"] .quote-status-group,
[data-theme="dark"] .qei-editor-container,
[data-theme="dark"] .qei-actions-sidebar,
[data-theme="dark"] .qei-status-card,
[data-theme="dark"] .qei-versand-card,
[data-theme="dark"] .qei-secondary-menu,
[data-theme="dark"] .qei-mobile-bottom-bar,
[data-theme="dark"] .qei-bottom-sheet,
[data-theme="dark"] .sh-smartbtns {
  --shq-accent: #F2543B;
  --shq-accent-700: #E0432B;
  --shq-accent-600: #EC4A30;
  --shq-accent-soft: rgba(242, 84, 59, .16);
  --shq-accent-line: rgba(242, 84, 59, .30);
  --shq-honey: #E6AE4A;
  --shq-honey-soft: rgba(230, 174, 74, .16);
  --shq-ok: #3BC07A;
  --shq-ok-soft: rgba(59, 192, 122, .15);
  --shq-warn: #E5A33C;
  --shq-warn-soft: rgba(229, 163, 60, .15);
  --shq-info: #5C8FE8;
  --shq-info-soft: rgba(92, 143, 232, .16);
  --shq-violet: #9D82E6;
  --shq-violet-soft: rgba(157, 130, 230, .16);

  --shq-bg: #15120F;
  --shq-surface: #1E1A16;
  --shq-surf-2: #241F1A;
  --shq-surf-3: #2C2620;
  --shq-field: #241F1A;

  --shq-ink: #F6F1EC;
  --shq-text: #E2D8CE;
  --shq-text-2: #B3A99E;
  --shq-muted: #8C8175;
  --shq-border: #2E2822;
  --shq-border-2: #3A332B;

  --shq-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shq-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --shq-sh-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --shq-ring: 0 0 0 3px var(--shq-accent-soft);
}

/* =========================================================================
   LISTE — Quickfilter-Chips (angebots-eigene Klasse .quote-status-group)
   Vorlage: theme.css .chip / .chip.on
   ========================================================================= */
.quote-status-group {
  font-family: var(--shq-font-body);
  border-radius: var(--shq-r-pill);
  border: 1px solid var(--shq-border-2);
  background: var(--shq-surface);
  color: var(--shq-text-2);
  font-weight: 600;
  transition: var(--shq-tr);
}
.quote-status-group:hover {
  background: var(--shq-surf-2);
  color: var(--shq-ink);
  border-color: var(--shq-border-2);
}
.quote-status-group.sh-chip--active,
.quote-status-group.active {
  background: var(--shq-accent-soft);
  border-color: var(--shq-accent);
  color: var(--shq-accent);
}

/* =========================================================================
   LISTE — aktive Filter-Facetten (Angebote: #quotesFacets)
   Vorlage: weiche Pillen mit Akzent-Trenner
   ========================================================================= */
#quotesFacets {
  font-family: var(--shq-font-body);
}
#quotesFacets .sh-facets__label {
  color: var(--shq-muted);
  font-weight: 600;
}
#quotesFacets .sh-facet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--shq-surf-2);
  border: 1px solid var(--shq-border-2);
  border-radius: var(--shq-r-pill);
  color: var(--shq-text);
  font-size: 12px;
  font-weight: 500;
}
#quotesFacets .sh-facet__k {
  color: var(--shq-muted);
  font-weight: 600;
}
#quotesFacets .sh-facet__x {
  color: var(--shq-muted);
  border-radius: 50%;
  transition: var(--shq-tr);
}
#quotesFacets .sh-facet__x:hover {
  background: var(--shq-accent-soft);
  color: var(--shq-accent);
}
#quotesFacets .sh-facet-clear-all {
  color: var(--shq-accent);
  font-weight: 600;
}

/* =========================================================================
   LISTE — Favoriten-Leiste (Angebote: #quotesFavorites)
   ========================================================================= */
#quotesFavorites .sh-fav__label {
  color: var(--shq-muted);
  font-weight: 600;
}
#quotesFavorites .sh-fav__item,
#quotesFavorites .sh-fav-chip {
  border-radius: var(--shq-r-pill);
  border: 1px solid var(--shq-border-2);
  background: var(--shq-surface);
  color: var(--shq-text-2);
  transition: var(--shq-tr);
}
#quotesFavorites .sh-fav__item:hover,
#quotesFavorites .sh-fav-chip:hover {
  border-color: var(--shq-accent);
  color: var(--shq-accent);
  background: var(--shq-accent-soft);
}

/* =========================================================================
   LISTE — Sammel-Auswahl-Leiste (Angebote: #quotesSelBar / .sh-batchbar)
   ========================================================================= */
#quotesSelBar.sh-batchbar {
  background: var(--shq-accent-soft);
  border: 1px solid var(--shq-accent-line);
  border-radius: var(--shq-r-md);
  color: var(--shq-text);
  box-shadow: var(--shq-sh-sm);
}
#quotesSelBar .sh-batchbar__lbl {
  color: var(--shq-text-2);
}
#quotesSelBar #quotesSelCount {
  color: var(--shq-accent);
  font-family: var(--shq-font-mono);
  font-weight: 700;
}

/* =========================================================================
   LISTE — Beträge (Netto = 9. Spalte, Brutto = 10. Spalte) in der
   Angebots-Tabelle. Anker: die Angebots-Tabelle folgt direkt auf
   #quotesFacets (siehe renderQuotesListView) → kein Eingriff in andere Listen.
   Nur Optik: Monospace + warme Textfarbe, Brutto in Akzentfarbe.
   ========================================================================= */
#quotesFacets ~ .panel .data-table tbody td:nth-child(9),
#quotesFacets ~ .panel .data-table tbody td:nth-child(10) {
  font-family: var(--shq-font-mono);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#quotesFacets ~ .panel .data-table tbody td:nth-child(10) {
  color: var(--shq-accent);
  font-weight: 600;
}
/* Gruppen-Summe (Gruppieren nach Status/Kunde) — angebots-eigene Klassen */
#quotesFacets ~ .panel .sh-group-row .sh-group-sum {
  font-family: var(--shq-font-mono);
  color: var(--shq-accent);
  font-weight: 700;
}
#quotesFacets ~ .panel .sh-group-row .sh-group-count {
  color: var(--shq-muted);
  font-family: var(--shq-font-mono);
}
#quotesFacets ~ .panel .sh-group-row .sh-group-caret {
  color: var(--shq-accent);
}

/* =========================================================================
   LISTE — KANBAN (Angebots-Board: [data-quotes-board])
   Vorlage: sh/angebot.js Karten-Spalten je Pipeline-Stufe, getönte Kopfleiste,
   Karte mit Nr./Titel/Kunde/Betrag/gültig-bis.
   Alles UNTER [data-quotes-board] → nur das Angebots-Board, keine andere Liste.
   ========================================================================= */
[data-quotes-board] {
  font-family: var(--shq-font-body);
}
[data-quotes-board] .sh-kanban {
  gap: 16px;
}
[data-quotes-board] .sh-kanban__col {
  background: var(--shq-surf-2);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-lg);
  box-shadow: var(--shq-sh-sm);
}
[data-quotes-board] .sh-kanban__col-head {
  border-bottom: 1px solid var(--shq-border);
}
[data-quotes-board] .sh-kanban__col-title {
  font-family: var(--shq-font-head);
  font-weight: 700;
  color: var(--shq-ink);
  letter-spacing: -.01em;
}
[data-quotes-board] .sh-kanban__col-meta {
  color: var(--shq-muted);
  font-size: 12px;
}
[data-quotes-board] .sh-kanban__col-sum {
  font-family: var(--shq-font-mono);
  color: var(--shq-text-2);
  font-weight: 700;
}
[data-quotes-board] .sh-kanban__col-empty {
  color: var(--shq-muted);
  font-size: 12.5px;
}

/* Spalten-Akzentkante je Pipeline-Tonalität (oben) */
[data-quotes-board] .sh-kanban__col {
  position: relative;
  overflow: hidden;
}
[data-quotes-board] .sh-kanban__col::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--shq-border-2);
}
[data-quotes-board] .sh-kanban__col--neutral::before { background: var(--shq-muted); }
[data-quotes-board] .sh-kanban__col--info::before    { background: var(--shq-info); }
[data-quotes-board] .sh-kanban__col--warning::before { background: var(--shq-honey); }
[data-quotes-board] .sh-kanban__col--success::before { background: var(--shq-ok); }
[data-quotes-board] .sh-kanban__col--danger::before  { background: var(--shq-accent); }

/* Karten */
[data-quotes-board] .sh-kanban__card {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-md);
  box-shadow: var(--shq-sh-sm);
  color: var(--shq-text);
  transition: var(--shq-tr);
}
[data-quotes-board] .sh-kanban__card:hover {
  border-color: var(--shq-accent-line);
  box-shadow: var(--shq-sh-md);
  transform: translateY(-1px);
}
[data-quotes-board] .sh-kanban__card-no {
  font-family: var(--shq-font-mono);
  font-size: 12px;
  color: var(--shq-muted);
}
[data-quotes-board] .sh-kanban__card-title {
  font-family: var(--shq-font-head);
  font-weight: 600;
  color: var(--shq-ink);
  letter-spacing: -.01em;
}
[data-quotes-board] .sh-kanban__card-customer {
  color: var(--shq-text-2);
  font-size: 12.5px;
}
[data-quotes-board] .sh-kanban__card-foot {
  border-top: 1px solid var(--shq-border);
}
[data-quotes-board] .sh-kanban__card-amount {
  font-family: var(--shq-font-mono);
  font-weight: 700;
  color: var(--shq-accent);
}
[data-quotes-board] .sh-kanban__card-date {
  color: var(--shq-muted);
  font-size: 11.5px;
}

/* =========================================================================
   EDITOR — Kennzahlen-Rail (Smart-Buttons: .sh-smartbtns / .sh-smartbtn)
   Vorlage: sh/angebot.js rcard „Zusammenfassung" — Angebotswert in Akzent.
   ========================================================================= */
.sh-smartbtns {
  font-family: var(--shq-font-body);
}
.sh-smartbtns .sh-smartbtn {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-md);
  box-shadow: var(--shq-sh-sm);
  color: var(--shq-text);
  transition: var(--shq-tr);
}
.sh-smartbtns button.sh-smartbtn:hover {
  border-color: var(--shq-accent-line);
  box-shadow: var(--shq-sh-md);
  transform: translateY(-1px);
}
.sh-smartbtns .sh-smartbtn__num {
  font-family: var(--shq-font-mono);
  font-weight: 700;
  color: var(--shq-ink);
}
.sh-smartbtns .sh-smartbtn__lbl {
  color: var(--shq-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.sh-smartbtns .sh-smartbtn--info {
  background: var(--shq-accent-soft);
  border-color: var(--shq-accent-line);
}
.sh-smartbtns .sh-smartbtn--info .sh-smartbtn__num {
  color: var(--shq-accent);
}

/* =========================================================================
   EDITOR — Aktions-Sidebar + Status-/Versand-Karten (.qei-*)
   Vorlage: sh/angebot.js rcards. Nur Optik der Karten/Buttons/Hinweise.
   ========================================================================= */
.qei-actions-sidebar {
  font-family: var(--shq-font-body);
  color: var(--shq-text);
}

.qei-status-card.panel,
.qei-versand-card.panel {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-lg);
  box-shadow: var(--shq-sh-md);
}
.qei-status-card__title {
  font-family: var(--shq-font-head);
  font-weight: 700;
  color: var(--shq-ink);
  letter-spacing: -.01em;
}
.qei-status-card__hint {
  color: var(--shq-muted);
}

/* Aktions-Buttons der Sidebar — warmer Akzent / weiche Ghost-Variante.
   (Keine Geometrie-Eingriffe; nur Farben/Radius/Schatten/Übergang.) */
.qei-actions-sidebar .qei-action-btn.btn,
.qei-status-card .qei-action-btn.btn,
.qei-versand-card .qei-action-btn.btn {
  border-radius: var(--shq-r-pill);
  font-family: var(--shq-font-body);
  font-weight: 600;
  transition: var(--shq-tr);
}
.qei-actions-sidebar .qei-action-btn--primary.btn-primary,
.qei-status-card .qei-action-btn--primary.btn-primary,
.qei-versand-card .qei-action-btn--primary.btn-primary {
  background: var(--shq-accent);
  border-color: var(--shq-accent);
  color: #fff;
  box-shadow: var(--shq-sh-accent);
}
.qei-actions-sidebar .qei-action-btn--primary.btn-primary:hover,
.qei-status-card .qei-action-btn--primary.btn-primary:hover,
.qei-versand-card .qei-action-btn--primary.btn-primary:hover {
  background: var(--shq-accent-700);
  border-color: var(--shq-accent-700);
  transform: translateY(-1px);
}
.qei-actions-sidebar .qei-action-btn.btn-ghost,
.qei-status-card .qei-action-btn.btn-ghost,
.qei-versand-card .qei-action-btn.btn-ghost {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border-2);
  color: var(--shq-text);
}
.qei-actions-sidebar .qei-action-btn.btn-ghost:hover,
.qei-status-card .qei-action-btn.btn-ghost:hover,
.qei-versand-card .qei-action-btn.btn-ghost:hover {
  border-color: var(--shq-accent);
  color: var(--shq-accent);
  background: var(--shq-accent-soft);
}

/* =========================================================================
   EDITOR — Sekundär-Menü (⋮ Dropdown, .qei-secondary-menu)
   ========================================================================= */
.qei-secondary-menu {
  background: var(--shq-surface);
  border: 1px solid var(--shq-border);
  border-radius: var(--shq-r-md);
  box-shadow: var(--shq-sh-lg);
}
.qei-secondary-menu__item {
  color: var(--shq-text);
  border-radius: var(--shq-r-sm);
  transition: var(--shq-tr);
}
.qei-secondary-menu__item:hover {
  background: var(--shq-surf-2);
  color: var(--shq-ink);
}
.qei-secondary-menu__item.is-danger {
  color: var(--shq-accent);
}
.qei-secondary-menu__item.is-danger:hover {
  background: var(--shq-accent-soft);
  color: var(--shq-accent-700);
}

/* =========================================================================
   EDITOR — Mobile Bottom-Bar + Bottom-Sheet (.qei-mb-btn / .qei-bottom-sheet)
   Nur Optik — Hit-Targets/Layout der Vorlage bleiben unberührt.
   ========================================================================= */
.qei-mobile-bottom-bar {
  background: var(--shq-surface);
  border-top: 1px solid var(--shq-border);
  box-shadow: var(--shq-sh-lg);
}
.qei-mb-btn {
  border-radius: var(--shq-r-pill);
  font-family: var(--shq-font-body);
  font-weight: 600;
  transition: var(--shq-tr);
}
.qei-mb-btn--primary,
.qei-mb-btn--status {
  background: var(--shq-accent);
  color: #fff;
  box-shadow: var(--shq-sh-accent);
}
.qei-mb-btn--primary:hover,
.qei-mb-btn--status:hover {
  background: var(--shq-accent-700);
}
.qei-mb-btn--secondary,
.qei-mb-btn--more {
  background: var(--shq-surf-2);
  border: 1px solid var(--shq-border-2);
  color: var(--shq-text);
}

.qei-bottom-sheet__panel {
  background: var(--shq-surface);
  border-top: 1px solid var(--shq-border);
  border-radius: var(--shq-r-lg) var(--shq-r-lg) 0 0;
  box-shadow: var(--shq-sh-lg);
  color: var(--shq-text);
}
.qei-bottom-sheet__backdrop {
  background: rgba(35, 25, 18, .42);
}
[data-theme="dark"] .qei-bottom-sheet__backdrop {
  background: rgba(0, 0, 0, .55);
}
.qei-bottom-sheet__handle {
  background: var(--shq-border-2);
  border-radius: var(--shq-r-pill);
}
.qei-bottom-sheet__title {
  font-family: var(--shq-font-head);
  font-weight: 700;
  color: var(--shq-ink);
}
.qei-bottom-sheet__close {
  color: var(--shq-muted);
  border-radius: var(--shq-r-sm);
  transition: var(--shq-tr);
}
.qei-bottom-sheet__close:hover {
  background: var(--shq-surf-2);
  color: var(--shq-ink);
}

/* =========================================================================
   Mobile-Feinschliff Angebots-Board
   ========================================================================= */
@media (max-width: 640px) {
  [data-quotes-board] .sh-kanban {
    gap: 12px;
  }
}


/* ===== gemergt aus sh-redesign-invoices.css ===== */
/* =========================================================================
   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.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   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; }
}


/* ===== gemergt aus sh-redesign-editor.css ===== */
/* =========================================================================
   ServiceHub — Redesign: Beleg-Editor-Shell (Angebot · Auftrag · Rechnung · Gutschrift)
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Additive Schicht. Re-Skin der gemeinsamen Editor-Shell auf die
   warme Palette des neuen Design-Systems (ServiceHub.html / theme.css).

   Styled die ECHTEN Editor-Shell-Selektoren:
     .ue-toolbar / .ue-toolbar__*   (editor-toolbar-shared.css — Kopf-Aktionsleiste)
     .ue-menu-* / .ue-menu-dropdown (Drei-Punkte-Menü)
     .sh-cp / .sh-cp-*              (sh-controlpanel.css — Odoo-Control-Panel)
     .del-* (doc-editor-layout.css — 3-Spalten-Shell: KPI-Leiste, Sidebar,
             Belegkopf, Tabs, Tab-Inhalt, Buttons, Cards, Tabellen)
     .pte-toolbar / .pte-wrap       (position-table-engine.css — nur Chrome,
                                     funktionale Zustands-Farben bleiben unberührt)

   KEINE Funktions-/Markup-/Logik-Änderung: Tabs, Buttons, Felder, Zeilen,
   Drag&Drop, Routing bleiben unberührt. Es wird NICHTS Funktionales versteckt.
   EINZIGE Ausnahme (laut Auftrag): die EINGEBETTETE Vorschau-Spalte
   (.del-preview / #del-preview) entfällt OPTISCH, der zentrale Editor nimmt die
   volle Breite ein. Die PDF-Aktion (Belegkopf-Button / Modal) bleibt erhalten.

   Tokens sind auf die Editor-Container gescoped (kein Eingriff in globale
   Basis-Tokens/.btn/.badge/.input/.data-table). Light + Dark via [data-theme].
   ========================================================================= */



/* ---------- Tokens (Light) — auf die Editor-Shell-Roots gescoped ---------- */
.del-wrap,
.ue-toolbar,
.ue-menu-dropdown,
.pte-wrap {
  --she-accent: #E73D25;
  --she-accent-700: #C5331E;
  --she-accent-600: #D6371F;
  --she-accent-soft: #FCEDE7;
  --she-accent-line: rgba(231, 61, 37, .22);
  --she-honey: #D99A2B;
  --she-honey-soft: #FBF0DA;
  --she-ok: #16A34A;
  --she-ok-soft: #E9F8EF;
  --she-warn: #C7791A;
  --she-warn-soft: #FBF1E0;
  --she-info: #2F6BD6;
  --she-info-soft: #EAF1FC;
  --she-violet: #7C5BD6;
  --she-violet-soft: #F0ECFB;

  --she-bg: #FAF6F2;
  --she-surface: #FFFFFF;
  --she-surf-2: #F6F1EB;
  --she-surf-3: #EFE8E0;
  --she-field: #F6F1EB;

  --she-ink: #231C17;
  --she-text: #463D35;
  --she-text-2: #6B6157;
  --she-muted: #9A8F84;
  --she-border: #EEE5DC;
  --she-border-2: #E3D9CE;

  --she-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --she-font-body: 'Figtree', system-ui, sans-serif;
  --she-font-mono: 'Space Mono', ui-monospace, monospace;

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

  --she-shadow-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --she-shadow-soft: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --she-shadow-lg: 0 18px 44px rgba(120, 80, 50, .14);
  --she-shadow-accent: 0 5px 14px rgba(231, 61, 37, .28);
  --she-ring: 0 0 0 3px var(--she-accent-soft);
  --she-tr: .16s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .del-wrap,
[data-theme="dark"] .ue-toolbar,
[data-theme="dark"] .ue-menu-dropdown,
[data-theme="dark"] .pte-wrap {
  --she-accent: #F2543B;
  --she-accent-700: #E0432B;
  --she-accent-600: #EC4A30;
  --she-accent-soft: rgba(242, 84, 59, .16);
  --she-accent-line: rgba(242, 84, 59, .30);
  --she-honey: #E6AE4A;
  --she-honey-soft: rgba(230, 174, 74, .16);
  --she-ok: #3BC07A;
  --she-ok-soft: rgba(59, 192, 122, .15);
  --she-warn: #E5A33C;
  --she-warn-soft: rgba(229, 163, 60, .15);
  --she-info: #5C8FE8;
  --she-info-soft: rgba(92, 143, 232, .16);
  --she-violet: #9D82E6;
  --she-violet-soft: rgba(157, 130, 230, .16);

  --she-bg: #15120F;
  --she-surface: #1E1A16;
  --she-surf-2: #241F1A;
  --she-surf-3: #2C2620;
  --she-field: #241F1A;

  --she-ink: #F6F1EC;
  --she-text: #E2D8CE;
  --she-text-2: #B3A99E;
  --she-muted: #8C8175;
  --she-border: #2E2822;
  --she-border-2: #3A332B;

  --she-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --she-shadow-soft: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --she-shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --she-shadow-accent: 0 5px 14px rgba(242, 84, 59, .30);
  --she-ring: 0 0 0 3px var(--she-accent-soft);
}

/* =========================================================================
   1) DocEditorLayout — 3-Spalten-Shell
   ========================================================================= */

.del-wrap {
  background: var(--she-bg);
  color: var(--she-text);
  font-family: var(--she-font-body);
}

/* ── KPI-Leiste (oben) ──────────────────────────────────────────────────── */
.del-wrap .del-kpi-bar {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
  box-shadow: var(--she-shadow-sm);
}
.del-wrap .del-kpi {
  border-left: 3px solid var(--kpi-color, var(--she-border-2));
}
.del-wrap .del-kpi--highlight {
  background: linear-gradient(135deg, var(--she-ok-soft) 0%, transparent 100%);
  border-radius: var(--she-r-sm);
}
.del-wrap .del-kpi-label {
  color: var(--she-muted);
  font-weight: 600;
  letter-spacing: .05em;
}
.del-wrap .del-kpi-value {
  color: var(--she-ink);
  font-family: var(--she-font-head);
  font-weight: 600;
}

/* ── Linke Sidebar: Belegliste ─────────────────────────────────────────── */
.del-wrap .del-sidebar {
  background: var(--she-surface);
  border-right: 1px solid var(--she-border);
}
.del-wrap .del-sidebar-header {
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-sidebar-header h3 {
  font-family: var(--she-font-head);
  color: var(--she-ink);
}
.del-wrap .del-sidebar-search {
  border-bottom: 1px solid var(--she-border);
}

/* Beleg-Item in der Liste */
.del-wrap .del-doc-item:hover {
  background: var(--she-surf-2);
}
.del-wrap .del-doc-item--active {
  background: var(--she-accent-soft);
  border-left: 3px solid var(--she-accent);
}
.del-wrap .del-doc-item-number {
  color: var(--she-ink);
}
.del-wrap .del-doc-item-sub {
  color: var(--she-muted);
}

/* ── Zentraler Arbeitsbereich ──────────────────────────────────────────── */
.del-wrap .del-content {
  background: var(--she-bg);
}

/* ── Belegkopf ─────────────────────────────────────────────────────────── */
.del-wrap .del-doc-header {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-doc-number {
  font-family: var(--she-font-head);
  color: var(--she-ink);
  letter-spacing: -.01em;
}
.del-wrap .del-doc-meta,
.del-wrap .del-empty-header {
  color: var(--she-muted);
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.del-wrap .del-tabs {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-tab {
  color: var(--she-text-2);
  font-weight: 600;
  border-radius: var(--she-r-sm) var(--she-r-sm) 0 0;
  transition: color var(--she-tr), background var(--she-tr), border-color var(--she-tr);
}
.del-wrap .del-tab:hover {
  color: var(--she-ink);
  background: var(--she-surf-2);
}
.del-wrap .del-tab--active {
  color: var(--she-accent);
  border-bottom-color: var(--she-accent);
}
/* KI-Tab in Akzent-Violett (Hausfarbe für KI) */
.del-wrap .del-tab--ai {
  color: var(--she-violet) !important;
}
.del-wrap .del-tab--ai:hover {
  background: var(--she-violet-soft) !important;
}
.del-wrap .del-tab--ai.del-tab--active {
  border-bottom-color: var(--she-violet);
  background: var(--she-violet-soft);
}

/* ── KI-Dropdown ───────────────────────────────────────────────────────── */
.del-wrap .del-ai-menu {
  background: var(--she-surface);
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-md);
  box-shadow: var(--she-shadow-lg);
}
.del-wrap .del-ai-menu-section {
  color: var(--she-violet);
}
.del-wrap .del-ai-menu-item {
  color: var(--she-text);
  font-family: var(--she-font-body);
}
.del-wrap .del-ai-menu-item:hover {
  background: var(--she-violet-soft);
  color: var(--she-violet);
}
.del-wrap .del-ai-menu-divider {
  background: var(--she-border);
}

/* ── Dokumente-Tab (DMS) ────────────────────────────────────────────────── */
.del-wrap .del-doc-uploadbox {
  border: 2px dashed var(--she-border-2);
  border-radius: var(--she-r-md);
  background: var(--she-surface);
  transition: border-color var(--she-tr), background var(--she-tr);
}
.del-wrap .del-doc-uploadbox:hover,
.del-wrap .del-doc-uploadbox:focus,
.del-wrap .del-doc-uploadbox.is-dragover {
  border-color: var(--she-accent);
  background: var(--she-accent-soft);
}
.del-wrap .del-doc-uploadbox__title {
  color: var(--she-ink);
}
.del-wrap .del-doc-uploadbox__hint {
  color: var(--she-muted);
}
.del-wrap .del-doc-uploadbox__progress {
  background: var(--she-info-soft);
  color: var(--she-info);
  border-radius: var(--she-r-sm);
}
.del-wrap .del-doc-list__loading,
.del-wrap .del-doc-list__empty {
  color: var(--she-muted);
}
/* Doc-Item (DMS-Variante mit Rahmen) */
.del-wrap .del-documents .del-doc-item {
  background: var(--she-surface);
  border: 1px solid var(--she-border);
  border-radius: var(--she-r-sm);
}
.del-wrap .del-documents .del-doc-item__name {
  color: var(--she-ink);
}
.del-wrap .del-documents .del-doc-item__meta {
  color: var(--she-muted);
}
.del-wrap .del-doc-btn {
  color: var(--she-text);
  background: var(--she-surf-2);
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-xs);
  transition: background var(--she-tr), border-color var(--she-tr);
}
.del-wrap .del-doc-btn:hover {
  background: var(--she-accent-soft);
  border-color: var(--she-accent-line);
}

/* ── Empty / Placeholder / Info ────────────────────────────────────────── */
.del-wrap .del-empty-state,
.del-wrap .del-tab-placeholder {
  color: var(--she-muted);
}
.del-wrap .del-muted,
.del-wrap .del-text-muted {
  color: var(--she-muted);
}

/* =========================================================================
   2) Belegkopf-Buttons & Inputs & Cards (.del-*)
   ========================================================================= */

.del-wrap .del-btn {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-sm);
  background: var(--she-surface);
  color: var(--she-text);
  font-family: var(--she-font-body);
  font-weight: 600;
  transition: background var(--she-tr), border-color var(--she-tr), color var(--she-tr);
}
.del-wrap .del-btn:hover {
  background: var(--she-surf-2);
  border-color: var(--she-accent);
  color: var(--she-accent);
}
.del-wrap .del-btn--primary,
.del-wrap .del-btn-primary,
.del-wrap .del-btn--active {
  background: var(--she-accent);
  border-color: var(--she-accent);
  color: #fff;
  box-shadow: var(--she-shadow-accent);
}
.del-wrap .del-btn--primary:hover,
.del-wrap .del-btn-primary:hover,
.del-wrap .del-btn--active:hover {
  background: var(--she-accent-700);
  border-color: var(--she-accent-700);
  color: #fff;
}
.del-wrap .del-btn-secondary {
  background: var(--she-surface);
  border-color: var(--she-border-2);
  color: var(--she-text);
}
.del-wrap .del-btn-secondary:hover {
  background: var(--she-surf-2);
}
.del-wrap .del-btn--icon,
.del-wrap .del-btn-icon {
  border-radius: var(--she-r-xs);
}
.del-wrap .del-btn-icon:hover {
  background: var(--she-surf-2);
  color: var(--she-accent);
}

/* Inputs / Selects */
.del-wrap .del-input,
.del-wrap .del-select {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-sm);
  background: var(--she-surface);
  color: var(--she-text);
  font-family: var(--she-font-body);
  transition: border-color var(--she-tr), box-shadow var(--she-tr);
}
.del-wrap .del-input:focus,
.del-wrap .del-select:focus {
  border-color: var(--she-accent);
  box-shadow: var(--she-ring);
  outline: none;
}

/* Cards */
.del-wrap .del-card,
.del-wrap .del-tasks-card,
.del-wrap .del-assign-form,
.del-wrap .del-assigned-techs,
.del-wrap .del-billing-actions,
.del-wrap .del-hours-card,
.del-wrap .del-material-card,
.del-wrap .del-invoices-card {
  background: var(--she-surface);
  border: 1px solid var(--she-border);
  border-radius: var(--she-r-md);
  box-shadow: var(--she-shadow-sm);
}
.del-wrap .del-card h4,
.del-wrap .del-tasks-card h4,
.del-wrap .del-assign-form h4,
.del-wrap .del-assigned-techs h4,
.del-wrap .del-billing-actions h4,
.del-wrap .del-hours-card h4,
.del-wrap .del-material-card h4,
.del-wrap .del-invoices-card h4 {
  font-family: var(--she-font-head);
  color: var(--she-ink);
}
.del-wrap .del-dl dt,
.del-wrap .del-dl-compact dt {
  color: var(--she-muted);
}
.del-wrap .del-dl dd {
  color: var(--she-text);
}

/* Definition-/History-/Link-Listen */
.del-wrap .del-link-list li,
.del-wrap .del-history-item,
.del-wrap .del-tech-item {
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-link-list a,
.del-wrap .del-link {
  color: var(--she-accent);
}
.del-wrap .del-history-date,
.del-wrap .del-history-actor,
.del-wrap .del-tech-role {
  color: var(--she-muted);
}

/* Tabellen (Aufgaben / Time&Material) */
.del-wrap .del-tasks-table th,
.del-wrap .del-table-sm th {
  background: var(--she-surf-2);
  color: var(--she-muted);
  letter-spacing: .04em;
}
.del-wrap .del-tasks-table th,
.del-wrap .del-tasks-table td,
.del-wrap .del-table-sm th,
.del-wrap .del-table-sm td {
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .del-tasks-table tbody tr:hover {
  background: var(--she-surf-2);
}
.del-wrap .del-row-billed {
  background: var(--she-surf-2);
  color: var(--she-muted);
}

/* Billing-Karten (Akzent-Töne) */
.del-wrap .del-billing-card {
  background: var(--she-surface);
  border: 1px solid var(--she-border);
  border-radius: var(--she-r-md);
}
.del-wrap .del-billing-amount {
  font-family: var(--she-font-head);
  color: var(--she-ink);
}
.del-wrap .del-billing-card--primary {
  border-color: var(--she-accent-line);
  background: linear-gradient(to bottom, var(--she-accent-soft), var(--she-surface));
}
.del-wrap .del-billing-card--primary .del-billing-amount { color: var(--she-accent); }
.del-wrap .del-billing-card--success {
  border-color: var(--she-ok);
  background: linear-gradient(to bottom, var(--she-ok-soft), var(--she-surface));
}
.del-wrap .del-billing-card--success .del-billing-amount { color: var(--she-ok); }
.del-wrap .del-billing-card--warning {
  border-color: var(--she-warn);
  background: linear-gradient(to bottom, var(--she-warn-soft), var(--she-surface));
}
.del-wrap .del-billing-card--warning .del-billing-amount { color: var(--she-warn); }

/* Spinner-Akzent */
.del-wrap .del-spinner {
  border-color: var(--she-border-2);
  border-top-color: var(--she-accent);
}

/* Status-/Info-Töne (Text only — keine funktionalen Badges überschreiben) */
.del-wrap .del-text-success { color: var(--she-ok); }
.del-wrap .del-text-warning { color: var(--she-warn); }
.del-wrap .del-info {
  color: var(--she-info);
}

/* =========================================================================
   3) Eingebettete PDF-Vorschau BLEIBT erhalten (User-Vorgabe geaendert:
   "PDF-Vorschau gehoert in den Editor, zusaetzlich zu Download/Drucken,
   Verhalten wie im Original"). Frueher hier ausgeblendet -> bewusst rueckgaengig.
   Die Vorschau-Optik wird vom Dokumente/Vorschau-Block uebernommen.
   ========================================================================= */

/* =========================================================================
   4) Unified-Editor-Toolbar (.ue-toolbar) — warme Kopf-Aktionsleiste
   ========================================================================= */

.ue-toolbar {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
  font-family: var(--she-font-body);
}
.ue-toolbar__docnumber {
  font-family: var(--she-font-head);
  color: var(--she-ink);
}
.ue-toolbar__customer {
  color: var(--she-muted);
}

/* Pill-Buttons in der Toolbar */
.ue-toolbar .ue-toolbar__btn {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-pill);
  background: var(--she-surface);
  color: var(--she-text);
  font-family: var(--she-font-body);
  font-weight: 600;
  transition: background var(--she-tr), border-color var(--she-tr), color var(--she-tr);
}
.ue-toolbar .ue-toolbar__btn:hover {
  background: var(--she-accent-soft);
  border-color: var(--she-accent-line);
  color: var(--she-accent);
}
.ue-toolbar .ue-toolbar__btn:active {
  background: var(--she-surf-3);
  transform: scale(0.97);
}

/* Drei-Punkte-Toggle */
.ue-toolbar .ue-menu-toggle,
.ue-menu-wrap .ue-menu-toggle {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-sm);
  background: var(--she-surface);
  color: var(--she-text-2);
  transition: background var(--she-tr), border-color var(--she-tr), color var(--she-tr);
}
.ue-toolbar .ue-menu-toggle:hover,
.ue-menu-wrap .ue-menu-toggle:hover {
  background: var(--she-surf-2);
  border-color: var(--she-accent);
  color: var(--she-accent);
}
.ue-toolbar .ue-menu-toggle.ue-menu-toggle--open,
.ue-menu-wrap .ue-menu-toggle.ue-menu-toggle--open {
  background: var(--she-accent-soft);
  border-color: var(--she-accent-line);
  color: var(--she-accent);
}

/* ── Drei-Punkte-Dropdown ──────────────────────────────────────────────── */
.ue-menu-dropdown {
  background: var(--she-surface);
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-md);
  box-shadow: var(--she-shadow-lg);
  font-family: var(--she-font-body);
  color: var(--she-text);
}
.ue-menu-dropdown::-webkit-scrollbar-thumb {
  background: var(--she-border-2);
}
.ue-menu-dropdown .panel {
  border: 1px solid var(--she-border);
  border-radius: var(--she-r-sm);
  background: var(--she-surface);
}
.ue-menu-dropdown .panel h2,
.ue-menu-dropdown .panel h3 {
  color: var(--she-text-2);
  font-family: var(--she-font-head);
}
.ue-menu-dropdown .actions-column .btn:hover {
  background: var(--she-surf-2);
}
.ue-menu-dropdown .panel[class*="danger"] {
  border-color: var(--she-accent-line);
  background: var(--she-accent-soft);
}
.ue-menu-dropdown .panel[class*="danger"] h2 {
  color: var(--she-accent-700);
}
.ue-menu-dropdown .panel[class*="ai-panel"] {
  border-color: var(--she-violet-soft);
  background: var(--she-violet-soft);
}
.ue-menu-separator {
  background: var(--she-border);
}

/* =========================================================================
   5) Control-Panel-Enhancement (.ue-toolbar.sh-cp / .sh-cp-*)
   ========================================================================= */

.ue-toolbar.sh-cp {
  background: var(--she-surface);
  border-bottom: 1px solid var(--she-border);
  box-shadow: var(--she-shadow-sm);
}
.ue-toolbar.sh-cp .ue-toolbar__actions {
  border-left: 1px solid var(--she-border);
}
.ue-toolbar.sh-cp .ue-toolbar__docnumber {
  color: var(--she-ink);
  font-family: var(--she-font-head);
}

/* =========================================================================
   6) Positions-Tabelle — NUR Chrome (Wrap + Toolbar + Kopf + Grundzeilen).
   Funktionale Zustands-Farben (ausgewählt / Warnung / Gruppe / optional /
   Drag-Over / Untereinträge) bleiben BEWUSST unverändert, damit die visuellen
   Bedeutungs-Signale erhalten bleiben.
   ========================================================================= */

.del-wrap .pte-wrap,
.pte-wrap {
  border: 1px solid var(--she-border-2);
  border-radius: var(--she-r-md);
  background: var(--she-surface);
  font-family: var(--she-font-body);
}
.del-wrap .pte-toolbar,
.pte-wrap .pte-toolbar {
  background: var(--she-surf-2);
  border-bottom: 1px solid var(--she-border);
}
.del-wrap .pte-table > thead .pte-header-row,
.pte-wrap .pte-table > thead .pte-header-row {
  background: var(--she-surf-2);
}
.del-wrap .pte-table > thead .pte-th,
.pte-wrap .pte-table > thead .pte-th {
  color: var(--she-text-2);
  border-bottom: 1px solid var(--she-border-2);
}
/* Grundzeile + Standard-Hover (funktionale Highlight-Zustände unangetastet) */
.del-wrap .pte-row,
.pte-wrap .pte-row {
  border-bottom: 1px solid var(--she-border);
}

/* Zahlenwerte / Beträge in Space Mono (passt zum Doc-Stil) */
.del-wrap .del-billing-detail,
.del-wrap .del-dl-compact dd {
  font-family: var(--she-font-mono);
}


/* ===== gemergt aus sh-redesign-pte.css ===== */
/* =========================================================================
   ServiceHub — Re-Design PTE (Positions-Grid)  ·  REIN OPTISCH, additiv
   Bereich: Positions-Table-Engine (.pte-*) im Beleg-Editor.
   Quelle: position-table-engine.css (Struktur) + sh/app.css .pos-tbl/.pe-* (Look).
   ──────────────────────────────────────────────────────────────────────────
   - GENAU diese eine Datei. Kein Markup/JS, keine Spalten/Felder entfernt.
   - Nur Farbe/Rahmen/Radius/Schatten/Fokus → warmes ELMETIC-Token-System.
   - Tokens lokal auf .pte-wrap gescoped → unabhängig von Ladereihenfolge.
   - Light + Dark ([data-theme="dark"]). Globale Basis (.btn/.badge/.input)
     wird NICHT angefasst (gehört dem Fundament).
   ========================================================================= */


/* ---------- Tokens (Light) — gescoped auf das PTE-Wrap ---------- */
.pte-wrap{
  --accent:#E73D25; --accent-700:#C5331E; --accent-600:#D6371F;
  --accent-soft:#FCEDE7; --accent-line:rgba(231,61,37,.22);
  --honey:#D99A2B; --honey-soft:#FBF0DA;
  --ok:#16A34A; --ok-soft:#E9F8EF;
  --warn:#C7791A; --warn-soft:#FBF1E0;
  --info:#2F6BD6; --info-soft:#EAF1FC;
  --violet:#7C5BD6; --violet-soft:#F0ECFB;
  --bg:#FAF6F2; --surface:#FFFFFF; --surf-2:#F6F1EB; --surf-3:#EFE8E0;
  --ink:#231C17; --text:#463D35; --text-2:#6B6157; --muted:#9A8F84;
  --border:#EEE5DC; --border-2:#E3D9CE; --field:#F6F1EB;
  --font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --r-xs:7px; --r-sm:9px; --r-md:12px; --r-lg:16px; --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-pop:0 18px 44px rgba(120,80,50,.14);
  --ring:0 0 0 3px var(--accent-soft);
  --tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .pte-wrap{
  --accent:#F2543B; --accent-700:#E0432B; --accent-600:#EC4A30;
  --accent-soft:rgba(242,84,59,.16); --accent-line:rgba(242,84,59,.30);
  --honey:#E6AE4A; --honey-soft:rgba(230,174,74,.16);
  --ok:#3BC07A; --ok-soft:rgba(59,192,122,.15);
  --warn:#E5A33C; --warn-soft:rgba(229,163,60,.15);
  --info:#5C8FE8; --info-soft:rgba(92,143,232,.16);
  --violet:#9D82E6; --violet-soft:rgba(157,130,230,.16);
  --bg:#15120F; --surface:#1E1A16; --surf-2:#241F1A; --surf-3:#2C2620;
  --ink:#F6F1EC; --text:#E2D8CE; --text-2:#B3A99E; --muted:#8C8175;
  --border:#2E2822; --border-2:#3A332B; --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-pop:0 18px 44px rgba(0,0,0,.5);
  --ring:0 0 0 3px var(--accent-soft);
}

/* ── Wrap ──────────────────────────────────────────────────────────────── */
.pte-wrap{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-md);
  font-family:var(--font-body);
  color:var(--text);
}

/* ── Toolbar ───────────────────────────────────────────────────────────── */
.pte-wrap .pte-toolbar{
  background:var(--surf-2);
  border-bottom:1px solid var(--border);
}
.pte-wrap .pte-toolbar-sep{ background:var(--border-2); }
.pte-wrap .pte-toolbar-spacer{ background:transparent; }
.pte-wrap .pte-mode-badge{
  background:var(--accent);
  color:#fff;
  border-radius:var(--r-pill);
}

/* ── Toolbar-Buttons ───────────────────────────────────────────────────── */
.pte-wrap .pte-btn{
  border:1px solid var(--border-2);
  background:var(--surface);
  color:var(--text-2);
  border-radius:var(--r-xs);
  font-family:var(--font-body);
  transition:var(--tr);
}
.pte-wrap .pte-btn:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
.pte-wrap .pte-btn--primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.pte-wrap .pte-btn--primary:hover{
  background:var(--accent-700);
  border-color:var(--accent-700);
  color:#fff;
}
.pte-wrap .pte-btn--ghost{
  background:transparent;
  border-color:var(--border-2);
  color:var(--text-2);
}
.pte-wrap .pte-btn--ghost:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
.pte-wrap .pte-btn--danger:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
}
.pte-wrap .pte-btn--icon{
  border-color:transparent;
  background:transparent;
  color:var(--muted);
}
.pte-wrap .pte-btn--icon:hover{
  background:var(--surf-3);
  border-color:var(--border-2);
  color:var(--ink);
}
/* Spezial-Buttons (Text/Überschrift/Trenner/Pauschal) — warm getönt */
.pte-wrap .pte-btn--text{ color:var(--honey); }
.pte-wrap .pte-btn--text:hover{ background:var(--honey-soft); border-color:var(--honey); color:var(--honey); }
.pte-wrap .pte-btn--heading{ color:var(--info); }
.pte-wrap .pte-btn--heading:hover{ background:var(--info-soft); border-color:var(--info); color:var(--info); }
.pte-wrap .pte-btn--sep{ color:var(--text-2); }
.pte-wrap .pte-btn--sep:hover{ background:var(--surf-2); border-color:var(--muted); color:var(--ink); }
.pte-wrap .pte-btn--pau{ color:var(--violet); border-color:var(--violet-soft); }
.pte-wrap .pte-btn--pau:hover{ background:var(--violet-soft); border-color:var(--violet); }

/* ── Speicherstatus ────────────────────────────────────────────────────── */
.pte-wrap .pte-save-status{
  border-bottom:1px solid var(--border);
  background:var(--surf-2);
}
.pte-wrap .pte-save-status--saved   { color:var(--ok); }
.pte-wrap .pte-save-status--pending { color:var(--warn); }
.pte-wrap .pte-save-status--saving  { color:var(--accent); }
.pte-wrap .pte-save-status--error   { color:var(--accent); background:var(--accent-soft); }

/* ── Warnungsleiste ────────────────────────────────────────────────────── */
.pte-wrap .pte-warning-bar{
  background:var(--warn-soft);
  border-bottom:1px solid var(--honey);
  color:var(--warn);
}

/* ── Header-Zeile ──────────────────────────────────────────────────────── */
.pte-wrap .pte-header-row{ background:var(--surf-2); }
.pte-wrap .pte-th{
  color:var(--muted);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--surf-2);
  border-bottom:1px solid var(--border-2);
  font-family:var(--font-body);
}
.pte-wrap .pte-col-resize:hover  { background:var(--accent); opacity:.5; }
.pte-wrap .pte-col-resize:active { background:var(--accent); opacity:.8; }
.pte-wrap .pte-th--dragging{ opacity:.4; background:var(--surf-3) !important; }
.pte-wrap .pte-th--drag-over{
  background:var(--accent-soft) !important;
  box-shadow:inset 0 0 0 2px var(--accent);
}

/* ── Zeilen ────────────────────────────────────────────────────────────── */
.pte-wrap .pte-row{ border-bottom:1px solid var(--border); transition:background .08s; }
.pte-wrap .pte-row:nth-child(even){ background:color-mix(in srgb,var(--surf-2) 45%,transparent); }
.pte-wrap .pte-row:hover{ background:var(--surf-2); }
.pte-wrap .pte-row--selected{ background:var(--accent-soft) !important; }
.pte-wrap .pte-row--warning{ background:var(--warn-soft) !important; }

/* Gruppen-/Unterzeilen (generisch) */
.pte-wrap .pte-row--group-header{ background:var(--surf-2) !important; font-weight:600; }
.pte-wrap .pte-row--group-header:hover{ background:var(--surf-3) !important; }
.pte-wrap .pte-row--subitem  { background:color-mix(in srgb,var(--surf-2) 55%,transparent) !important; }
.pte-wrap .pte-row--subitem2 { background:color-mix(in srgb,var(--surf-2) 70%,transparent) !important; }

.pte-wrap .pte-row--internal{ opacity:.75; font-style:italic; }
.pte-wrap .pte-row--internal:hover{ opacity:1; }
.pte-wrap .pte-row--optional{ background:var(--honey-soft) !important; border-left:3px solid var(--honey); }

/* Überschrift-Zeile (heading) — info-getönt */
.pte-wrap .pte-row--heading{
  background:var(--info-soft) !important;
  border-top:2px solid var(--info);
  border-bottom:2px solid var(--info);
}
.pte-wrap .pte-row--heading:hover{ background:var(--info-soft) !important; }
.pte-wrap .pte-cell--heading-title:hover{ background:var(--info-soft); border-radius:var(--r-xs); }
.pte-wrap .pte-cell--heading-title:focus{
  outline:2px solid var(--info); outline-offset:-2px; background:var(--info-soft); border-radius:3px;
}
.pte-wrap .pte-heading-text{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--info);
  border-left:3px solid var(--info);
}

/* Texthinweis-Zeile (textNote / text) — honey-getönt */
.pte-wrap .pte-row--text-note{
  background:var(--honey-soft) !important;
  border-bottom:1px solid var(--honey);
}
.pte-wrap .pte-row--text-note:hover{ background:var(--honey-soft) !important; }
.pte-wrap .pte-cell--text-title:hover{ background:var(--honey-soft); border-radius:var(--r-xs); }
.pte-wrap .pte-cell--text-title:focus{
  outline:2px solid var(--honey); outline-offset:-2px; background:var(--honey-soft); border-radius:3px;
}
.pte-wrap .pte-text-note{ color:var(--text-2); font-style:italic; }

/* Trennlinie-Zeile (separator) */
.pte-wrap .pte-separator-line{ border-top:2px solid var(--border-2); }

/* ── Zellen ────────────────────────────────────────────────────────────── */
.pte-wrap .pte-cell{ color:var(--text); }
.pte-wrap .pte-cell--system{ color:var(--text-2); }
.pte-wrap .pte-cell--editable{ cursor:text; }
.pte-wrap .pte-cell--editable:hover{ background:var(--surf-2); border-radius:var(--r-xs); }
.pte-wrap .pte-cell--editable:focus{
  outline:2px solid var(--accent);
  outline-offset:-2px;
  border-radius:3px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--accent);
}

/* Zahl-Spalten in Mono (Lesbarkeit der Beträge) */
.pte-wrap .pte-cell--unitPriceNet,
.pte-wrap .pte-cell--listPriceNet,
.pte-wrap .pte-cell--purchasePriceNet,
.pte-wrap .pte-cell--lineTotalNet,
.pte-wrap .pte-cell--lineTotalGross,
.pte-wrap .pte-cell--contribution,
.pte-wrap .pte-cell--quantity,
.pte-wrap .pte-cell--quantityOrdered,
.pte-wrap .pte-cell--quantityDelivered,
.pte-wrap .pte-cell--quantityOpen,
.pte-wrap .pte-cell--markupPercent,
.pte-wrap .pte-cell--supplierDiscountPercent,
.pte-wrap .pte-cell--discountPercent,
.pte-wrap .pte-cell--taxRate{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* ── Drag-Handle ───────────────────────────────────────────────────────── */
.pte-wrap .pte-drag-handle{ color:var(--border-2); border-radius:var(--r-xs); }
.pte-wrap .pte-drag-handle:hover{ color:var(--accent); background:var(--accent-soft); }
.pte-wrap .pte-gr-dh{ color:var(--border-2); }

/* ── Inline-Inputs (Zellen-Inputs: transparent, Fokus-Ring accent) ─────── */
.pte-wrap .pte-cell-input,
.pte-wrap .pte-cell-select{
  border:1px solid var(--accent);
  border-radius:var(--r-xs);
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--surface);
  box-shadow:var(--ring);
}
.pte-wrap .pte-cell--unitPriceNet .pte-cell-input,
.pte-wrap .pte-cell--listPriceNet .pte-cell-input,
.pte-wrap .pte-cell--purchasePriceNet .pte-cell-input,
.pte-wrap .pte-cell--lineTotalNet .pte-cell-input,
.pte-wrap .pte-cell--lineTotalGross .pte-cell-input,
.pte-wrap .pte-cell--quantity .pte-cell-input,
.pte-wrap .pte-cell--markupPercent .pte-cell-input,
.pte-wrap .pte-cell--discountPercent .pte-cell-input,
.pte-wrap .pte-cell--taxRate .pte-cell-input,
.pte-wrap .pte-cell--taxRate .pte-cell-select{
  font-family:var(--font-mono);
  text-align:right;
}

/* ── Badges (B / nB / System / Summary / Billable) ─────────────────────── */
.pte-wrap .pte-badge{ border-radius:var(--r-xs); font-weight:700; letter-spacing:.03em; }
.pte-wrap .pte-badge--b      { background:var(--ok-soft); color:var(--ok); }
.pte-wrap .pte-badge--nb     { background:var(--accent-soft); color:var(--accent-700); }
.pte-wrap .pte-badge--system { background:var(--info-soft); color:var(--info); }
.pte-wrap .pte-badge--summary{ background:var(--violet-soft); color:var(--violet); }
.pte-wrap .pte-badge--billable{ background:var(--honey-soft); color:var(--warn); }
.pte-wrap .pte-badge--muted  { background:var(--surf-2); color:var(--text-2); }
.pte-wrap .pte-badge--success{ background:var(--ok-soft); color:var(--ok); }
[data-toggle-print]:focus-visible{ outline-color:var(--accent); }

/* ── Systemgruppen (Monteur: Stunden/Material) ─────────────────────────── */
.pte-wrap .pte-row--system-group{
  background:var(--info-soft) !important;
  border-left:3px solid var(--info);
}
.pte-wrap .pte-row--system-group.pte-row--hours{
  background:var(--honey-soft) !important;
  border-left-color:var(--honey);
}
.pte-wrap .pte-row--system-group.pte-row--material{
  background:var(--ok-soft) !important;
  border-left-color:var(--ok);
}
.pte-wrap .pte-row--system{ background:color-mix(in srgb,var(--info-soft) 50%,transparent) !important; }
.pte-wrap .pte-row--system.pte-row--billing-billable{ background:var(--honey-soft) !important; }
.pte-wrap .pte-row--system.pte-row--billing-documentation{ color:var(--text-2); }
.pte-wrap .pte-row--system.pte-row--billing-attendance{ color:var(--muted); }
.pte-wrap .pte-row--system.pte-row--status-approved { border-left:2px solid var(--ok); }
.pte-wrap .pte-row--system.pte-row--status-submitted{ border-left:2px solid var(--warn); }
.pte-wrap .pte-row--system.pte-row--status-draft    { border-left:2px solid var(--border-2); }
.pte-wrap .pte-row--system.pte-row--status-rejected { border-left:2px solid var(--accent); }

/* ── NB-Zeilen (intern / nicht drucken) — warm-violett schraffiert ─────── */
.pte-wrap .pte-row--nb{
  background:repeating-linear-gradient(
    90deg, var(--violet-soft) 0, var(--violet-soft) 8px,
    transparent 8px, transparent 9px) !important;
}
.pte-wrap .pte-row--nb:hover{
  background:repeating-linear-gradient(
    90deg, var(--violet-soft) 0, var(--violet-soft) 7px,
    color-mix(in srgb,var(--violet-soft) 60%,transparent) 7px,
    color-mix(in srgb,var(--violet-soft) 60%,transparent) 9px) !important;
}
.pte-wrap .pte-row--nb .pte-cell{ color:var(--violet); opacity:.9; }

/* ── Gruppen-Header (reichhaltig) ──────────────────────────────────────── */
.pte-wrap .pte-gr-name { font-family:var(--font-head); color:var(--ink); }
.pte-wrap .pte-gr-total{ font-family:var(--font-mono); color:var(--ink); }
.pte-wrap .pte-gr-tag{ border-radius:var(--r-pill); }
.pte-wrap .pte-gr-margin{ border-radius:var(--r-pill); }
.pte-wrap .pte-gr-margin--g{ background:var(--ok-soft);    color:var(--ok); }
.pte-wrap .pte-gr-margin--r{ background:var(--accent-soft); color:var(--accent-700); }
.pte-wrap .pte-gr-margin--w{ background:var(--honey-soft);  color:var(--warn); }

/* Gruppentyp-Varianten — neu eingefärbt (std=info, pau=violet, hrs=honey, mat=ok) */
.pte-wrap .pte-row--group-std{ background:var(--info-soft) !important; }
.pte-wrap .pte-row--group-std:hover{ background:var(--info-soft) !important; }
.pte-wrap .pte-row--group-std td,
.pte-wrap .pte-row--group-std .pte-gr-wrap{ border-top:2px solid var(--info); }
.pte-wrap .pte-row--group-std .pte-gr-name { color:var(--info); }
.pte-wrap .pte-row--group-std .pte-gr-tag  { background:var(--info-soft); color:var(--info); }
.pte-wrap .pte-row--group-std .pte-gr-total{ color:var(--info); }

.pte-wrap .pte-row--group-pau{ background:var(--violet-soft) !important; }
.pte-wrap .pte-row--group-pau:hover{ background:var(--violet-soft) !important; }
.pte-wrap .pte-row--group-pau td,
.pte-wrap .pte-row--group-pau .pte-gr-wrap{ border-top:2px solid var(--violet); }
.pte-wrap .pte-row--group-pau .pte-gr-name { color:var(--violet); }
.pte-wrap .pte-row--group-pau .pte-gr-tag  { background:var(--violet-soft); color:var(--violet); border:1px solid var(--violet); }
.pte-wrap .pte-row--group-pau .pte-gr-total{ color:var(--violet); }
.pte-wrap .pte-row--group-pau .pte-gr-dh   { color:var(--violet); }

.pte-wrap .pte-row--group-hrs{ background:var(--honey-soft) !important; }
.pte-wrap .pte-row--group-hrs:hover{ background:var(--honey-soft) !important; }
.pte-wrap .pte-row--group-hrs td,
.pte-wrap .pte-row--group-hrs .pte-gr-wrap{ border-top:2px solid var(--honey); }
.pte-wrap .pte-row--group-hrs .pte-gr-name { color:var(--warn); }
.pte-wrap .pte-row--group-hrs .pte-gr-tag  { background:var(--honey-soft); color:var(--warn); }
.pte-wrap .pte-row--group-hrs .pte-gr-total{ color:var(--warn); }

.pte-wrap .pte-row--group-mat{ background:var(--ok-soft) !important; }
.pte-wrap .pte-row--group-mat:hover{ background:var(--ok-soft) !important; }
.pte-wrap .pte-row--group-mat td{ border-top:2px solid var(--ok); }
.pte-wrap .pte-row--group-mat .pte-gr-name { color:var(--ok); }
.pte-wrap .pte-row--group-mat .pte-gr-tag  { background:var(--ok-soft); color:var(--ok); }

/* Lump-Sum Preis-Eingabe (Pauschal) */
.pte-wrap .pte-lump-in{
  border:1px solid var(--violet);
  border-radius:var(--r-sm);
  color:var(--violet);
  background:var(--violet-soft);
  font-family:var(--font-mono);
}
.pte-wrap .pte-lump-in:focus{ outline:2px solid var(--violet); }
.pte-wrap .pte-gr-lump-arrow{ color:var(--muted); }

/* ── Add-Bar je Gruppe ─────────────────────────────────────────────────── */
.pte-wrap .pte-add-btn{
  color:var(--muted);
  border:1px dashed var(--border-2);
  border-radius:var(--r-xs);
  font-family:var(--font-body);
  transition:var(--tr);
}
.pte-wrap .pte-add-btn:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.pte-wrap .pte-add-bar--pau{ border-bottom:2px solid var(--violet); }
.pte-wrap .pte-add-bar--pau .pte-add-btn{ color:var(--violet); border-color:var(--violet-soft); }
.pte-wrap .pte-add-bar--pau .pte-add-btn:hover{ background:var(--violet-soft); }
.pte-wrap .pte-add-btn--txt:hover{ border-color:var(--honey); color:var(--honey); background:var(--honey-soft); }
.pte-wrap .pte-add-btn--hdg:hover{ border-color:var(--info); color:var(--info); background:var(--info-soft); }
.pte-wrap .pte-add-btn--sep:hover{ border-color:var(--muted); color:var(--text-2); background:var(--surf-2); }

/* ── Add-Gruppe-Bar ────────────────────────────────────────────────────── */
.pte-wrap .pte-add-grp-bar{
  background:var(--surf-2);
  border-top:1px solid var(--border);
}

/* ── Artikelnummer-Link ────────────────────────────────────────────────── */
.pte-wrap .pte-article-link{ color:var(--info); border-bottom:1px dashed var(--info); }
.pte-wrap td[data-product-id]:hover .pte-article-link{ color:var(--info); border-bottom-style:solid; }

/* ── Summenleiste (einfach, z.B. Lieferschein) ─────────────────────────── */
.pte-wrap .pte-totals-bar--simple{
  background:var(--surf-2);
  border-top:2px solid var(--border-2);
  border-radius:0 0 var(--r-md) var(--r-md);
}

/* ── Summenleiste (Angebot/Auftrag) — warmer Akzent statt Blau-Schwarz ─── */
.pte-wrap .pte-totals{
  background:linear-gradient(135deg,#3A2A22,#241A14);
  border-radius:0 0 var(--r-md) var(--r-md);
}
[data-theme="dark"] .pte-wrap .pte-totals{
  background:linear-gradient(135deg,#2A211B,#1A1410);
}
.pte-wrap .pte-tot{ border-right:1px solid rgba(255,255,255,.10); }
.pte-wrap .pte-tot-l{ color:rgba(255,255,255,.45); letter-spacing:.06em; }
.pte-wrap .pte-tot-v{ color:#fff; font-variant-numeric:tabular-nums; }
.pte-wrap .pte-tot-v--accent{ color:#F2A98E; }
.pte-wrap .pte-tot-v--g{ color:#74D99B; }
.pte-wrap .pte-tot-v--r{ color:#F2A18C; }
.pte-wrap .pte-tot-v--nb{ color:#C7B0EC; }

/* ── Leer / Error / Loading / Skeleton ─────────────────────────────────── */
.pte-wrap .pte-empty-state{ color:var(--muted); }
.pte-wrap .pte-error{ color:var(--accent); background:var(--accent-soft); border-radius:var(--r-sm); }
.pte-wrap .pte-loading-indicator{ color:var(--muted); }
.pte-wrap .pte-skeleton{
  background:linear-gradient(90deg,var(--surf-2) 25%,var(--surf-3) 50%,var(--surf-2) 75%);
  background-size:400% 100%;
  border-radius:var(--r-xs);
}

/* ── Kontext-/Gruppen-/Mehr-Menü (gerendert via .pte-ctx-menu) ─────────── */
.pte-ctx-menu{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-pop);
  font-family:var(--font-body);
}
.pte-ctx-item{ color:var(--text); font-family:var(--font-body); }
.pte-ctx-item:hover{ background:var(--surf-2); }
.pte-ctx-item--danger{ color:var(--accent); }
.pte-ctx-item--danger:hover{ background:var(--accent-soft); }
.pte-ctx-item--ai{ color:var(--violet); font-weight:500; }
.pte-ctx-item--ai:hover{ background:var(--violet-soft); color:var(--violet); }

/* einfaches Kontext-Menü (.pte-context-menu) */
.pte-context-menu button{ color:var(--text); font-family:var(--font-body); }
.pte-context-menu button:hover{ background:var(--surf-2); }
.pte-context-menu hr{ border-top:1px solid var(--border); }

/* ── KI-Textbaustein-Dialog (.pte-ai-box, außerhalb des Wraps) ─────────── */
.pte-ai-box{
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);
  font-family:var(--font-body);
  color:var(--text);
}
.pte-ai-head{ border-bottom:1px solid var(--border); }
.pte-ai-title{ font-family:var(--font-head); color:var(--ink); }
.pte-ai-sub{ color:var(--muted); }
.pte-ai-close{ color:var(--muted); border-radius:var(--r-xs); }
.pte-ai-close:hover{ background:var(--surf-2); color:var(--ink); }
.pte-ai-loading{ color:var(--violet); }
.pte-ai-spinner{ border-color:var(--violet-soft); border-top-color:var(--violet); }
.pte-ai-card{ border:1px solid var(--violet-soft); border-radius:var(--r-md); }
.pte-ai-card:hover{ border-color:var(--violet); }
.pte-ai-card-head{ background:var(--violet-soft); border-bottom:1px solid var(--violet-soft); }
.pte-ai-label{ color:var(--violet); }
.pte-ai-pick{ background:var(--violet); color:#fff; border-radius:var(--r-xs); font-family:var(--font-body); }
.pte-ai-pick:hover{ background:#6d28d9; }
.pte-ai-ctitle{ color:var(--ink); }
.pte-ai-cdesc{ color:var(--text-2); }


/* ===== gemergt aus sh-redesign-customers.css ===== */
/* =========================================================================
   ServiceHub — Redesign „Kunden" (REIN OPTISCH, additiv)
   Bereich: Kundenliste (#administration-customers / renderAdministrationCustomersView)
            + Kunden-Detail (renderCustomerDetailView, „customer-detail")
   ──────────────────────────────────────────────────────────────────────────
   NULL Funktionsänderung. Reines CSS. Keine globalen Basis-Klassen neu
   definiert (.btn/.badge/.data-table/.input gehören dem Fundament) — alles
   nur unter den Kunden-Scopes re-getuned.

   SCOPE-STRATEGIE (beide Views rendern in #mainContent, ohne eigenen Wrapper):
     • Detail  → #mainContent:has(.sh-smartbtns):has([data-customer-detail-tab])
                 (Smart-Buttons + Kunden-Detail-Tabs = nur Kunden-Detail)
     • Liste   → #mainContent:has([data-row-customer-id])
                 ODER #mainContent:has([data-action="view-customer-detail"])
                 (Kunden-Tabellenzeilen / „Details"-Button = nur Kundenliste)

   Tokens lokal gescoped (gleiche Werte wie sh-detail-drawer.css / theme.css),
   damit die Optik unabhängig von der Ladereihenfolge greift. Light + Dark.
   ========================================================================= */


/* ---------- Tokens (Light) — auf die Kunden-Scopes ---------- */
#mainContent:has([data-row-customer-id]),
#mainContent:has([data-action="view-customer-detail"]),
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]){
  --shc-accent:#E73D25; --shc-accent-700:#C5331E; --shc-accent-600:#D6371F;
  --shc-accent-soft:#FCEDE7; --shc-accent-line:rgba(231,61,37,.22);
  --shc-honey:#D99A2B; --shc-honey-soft:#FBF0DA;
  --shc-ok:#16A34A; --shc-ok-soft:#E9F8EF;
  --shc-warn:#C7791A; --shc-warn-soft:#FBF1E0;
  --shc-info:#2F6BD6; --shc-info-soft:#EAF1FC;
  --shc-violet:#7C5BD6; --shc-violet-soft:#F0ECFB;
  --shc-bg:#FAF6F2; --shc-surface:#FFFFFF; --shc-surf-2:#F6F1EB; --shc-surf-3:#EFE8E0;
  --shc-ink:#231C17; --shc-text:#463D35; --shc-text-2:#6B6157; --shc-muted:#9A8F84;
  --shc-border:#EEE5DC; --shc-border-2:#E3D9CE; --shc-field:#F6F1EB;
  --shc-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --shc-font-body:'Figtree',system-ui,sans-serif;
  --shc-font-mono:'Space Mono',ui-monospace,monospace;
  --shc-r-xs:7px; --shc-r-sm:9px; --shc-r-md:12px; --shc-r-lg:16px; --shc-r-pill:999px;
  --shc-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --shc-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --shc-sh-lg:0 18px 44px rgba(120,80,50,.14);
  --shc-sh-accent:0 5px 14px rgba(231,61,37,.28);
  --shc-ring:0 0 0 3px var(--shc-accent-soft);
  --shc-tr:.16s cubic-bezier(.2,.7,.3,1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] #mainContent:has([data-row-customer-id]),
[data-theme="dark"] #mainContent:has([data-action="view-customer-detail"]),
[data-theme="dark"] #mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]){
  --shc-accent:#F2543B; --shc-accent-700:#E0432B; --shc-accent-600:#EC4A30;
  --shc-accent-soft:rgba(242,84,59,.16); --shc-accent-line:rgba(242,84,59,.30);
  --shc-honey:#E6AE4A; --shc-honey-soft:rgba(230,174,74,.16);
  --shc-ok:#3BC07A; --shc-ok-soft:rgba(59,192,122,.15);
  --shc-warn:#E5A33C; --shc-warn-soft:rgba(229,163,60,.15);
  --shc-info:#5C8FE8; --shc-info-soft:rgba(92,143,232,.16);
  --shc-violet:#9D82E6; --shc-violet-soft:rgba(157,130,230,.16);
  --shc-bg:#15120F; --shc-surface:#1E1A16; --shc-surf-2:#241F1A; --shc-surf-3:#2C2620;
  --shc-ink:#F6F1EC; --shc-text:#E2D8CE; --shc-text-2:#B3A99E; --shc-muted:#8C8175;
  --shc-border:#2E2822; --shc-border-2:#3A332B; --shc-field:#241F1A;
  --shc-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --shc-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --shc-sh-lg:0 18px 44px rgba(0,0,0,.5);
  --shc-sh-accent:0 5px 14px rgba(0,0,0,.4);
  --shc-ring:0 0 0 3px var(--shc-accent-soft);
}

/* Gemeinsamer Scope-Alias für beide Views (Lesbarkeit) */
/* (CSS kennt keine Variablen-Selektoren → wir wiederholen die drei Scopes je Regel.) */

/* =========================================================================
   1) KUNDENLISTE
   Scope: #mainContent:has([data-row-customer-id])  (Tabellenzeilen)
          + Fallback #mainContent:has([data-action="view-customer-detail"])
            (greift auch bei leerer Liste, solange Spalten-Aktionen existieren)
   ========================================================================= */

/* ---- Seiten-Header ---- */
#mainContent:has([data-row-customer-id]) .page-header.sh-header,
#mainContent:has([data-action="view-customer-detail"]) .page-header.sh-header{
  font-family:var(--shc-font-body);
}
#mainContent:has([data-row-customer-id]) .sh-header__left h1,
#mainContent:has([data-action="view-customer-detail"]) .sh-header__left h1{
  font-family:var(--shc-font-head); color:var(--shc-ink);
  letter-spacing:-.02em; font-weight:700;
}
#mainContent:has([data-row-customer-id]) .sh-header__context,
#mainContent:has([data-action="view-customer-detail"]) .sh-header__context{
  color:var(--shc-muted);
}

/* ---- Panel-Karten (Such-/Tabellenbox) ---- */
#mainContent:has([data-row-customer-id]) .panel,
#mainContent:has([data-action="view-customer-detail"]) .panel{
  background:var(--shc-surface);
  border:1px solid var(--shc-border);
  border-radius:var(--shc-r-lg);
  box-shadow:var(--shc-sh-md);
}

/* ---- Suchfeld + Steuer-Leiste ---- */
#mainContent:has([data-row-customer-id]) .field-label,
#mainContent:has([data-action="view-customer-detail"]) .field-label{
  font-size:12.5px; font-weight:600; color:var(--shc-text-2);
}
#mainContent:has([data-row-customer-id]) #customersListSearch,
#mainContent:has([data-action="view-customer-detail"]) #customersListSearch,
#mainContent:has([data-row-customer-id]) #customersGroupBy,
#mainContent:has([data-action="view-customer-detail"]) #customersGroupBy{
  background:var(--shc-surface);
  border:1px solid var(--shc-border-2);
  border-radius:var(--shc-r-sm);
  color:var(--shc-ink);
  transition:border-color var(--shc-tr),box-shadow var(--shc-tr);
}
#mainContent:has([data-row-customer-id]) #customersListSearch:focus,
#mainContent:has([data-action="view-customer-detail"]) #customersListSearch:focus,
#mainContent:has([data-row-customer-id]) #customersGroupBy:focus,
#mainContent:has([data-action="view-customer-detail"]) #customersGroupBy:focus{
  outline:none; border-color:var(--shc-accent); box-shadow:var(--shc-ring);
}

/* ---- Tabelle ---- */
#mainContent:has([data-row-customer-id]) .table-wrap,
#mainContent:has([data-action="view-customer-detail"]) .table-wrap{
  border-radius:var(--shc-r-lg);
}
#mainContent:has([data-row-customer-id]) .data-table,
#mainContent:has([data-action="view-customer-detail"]) .data-table{
  font-family:var(--shc-font-body);
  border-collapse:collapse; width:100%;
}
#mainContent:has([data-row-customer-id]) .data-table thead th,
#mainContent:has([data-action="view-customer-detail"]) .data-table thead th{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--shc-muted); text-align:left;
  background:var(--shc-surf-2);
  padding:11px 16px; border-bottom:1px solid var(--shc-border);
}
#mainContent:has([data-row-customer-id]) .data-table tbody td,
#mainContent:has([data-action="view-customer-detail"]) .data-table tbody td{
  padding:13px 16px;
  border-bottom:1px solid var(--shc-border);
  font-size:13px; color:var(--shc-text); vertical-align:middle;
}
#mainContent:has([data-row-customer-id]) .data-table tbody tr,
#mainContent:has([data-action="view-customer-detail"]) .data-table tbody tr{
  transition:background .12s;
}
#mainContent:has([data-row-customer-id]) .data-table tbody tr:hover,
#mainContent:has([data-action="view-customer-detail"]) .data-table tbody tr:hover{
  background:var(--shc-surf-2);
}
/* Erste Spalte (Kundennr.) als Mono-Akzent, Name etwas kräftiger */
#mainContent:has([data-row-customer-id]) .data-table tbody td:first-child{
  font-family:var(--shc-font-mono); font-size:12px; color:var(--shc-text-2);
}
#mainContent:has([data-row-customer-id]) .data-table tbody td:nth-child(2){
  font-weight:600; color:var(--shc-ink);
}

/* ---- Gruppen-Zeilen (Gruppieren nach Betreuer/Ort/Status/Preisgr.) ---- */
#mainContent:has([data-row-customer-id]) .sh-group-row td{
  background:var(--shc-surf-3);
  font-family:var(--shc-font-head);
  color:var(--shc-ink);
  border-bottom:1px solid var(--shc-border-2);
}
#mainContent:has([data-row-customer-id]) .sh-group-caret{
  color:var(--shc-accent);
}
#mainContent:has([data-row-customer-id]) .sh-group-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:18px; padding:0 7px;
  margin-left:6px;
  background:var(--shc-accent-soft); color:var(--shc-accent);
  border-radius:var(--shc-r-pill);
  font-family:var(--shc-font-body); font-size:11px; font-weight:700;
}

/* ---- Leerzustand ---- */
#mainContent:has([data-row-customer-id]) .sh-empty-state,
#mainContent:has([data-action="view-customer-detail"]) .sh-empty-state{
  color:var(--shc-text-2);
}
#mainContent:has([data-row-customer-id]) .sh-empty-state__icon,
#mainContent:has([data-action="view-customer-detail"]) .sh-empty-state__icon{
  opacity:.9;
}
#mainContent:has([data-row-customer-id]) .sh-empty-state__text strong,
#mainContent:has([data-action="view-customer-detail"]) .sh-empty-state__text strong{
  font-family:var(--shc-font-head); color:var(--shc-ink);
}

/* =========================================================================
   2) KUNDEN-DETAIL
   Scope: #mainContent:has(.sh-smartbtns):has([data-customer-detail-tab])
   ========================================================================= */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]){
  font-family:var(--shc-font-body); color:var(--shc-text);
}

/* ---- Detail-Header ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-header__left h1{
  font-family:var(--shc-font-head); color:var(--shc-ink);
  letter-spacing:-.02em; font-weight:700;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-header__context{
  color:var(--shc-muted);
}

/* ---- Smart-Buttons (verknüpfte Zähler + Umsatz) ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-smartbtns{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:4px 0 16px;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-smartbtn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  min-width:120px;
  padding:12px 16px;
  background:var(--shc-surface);
  border:1px solid var(--shc-border);
  border-left:3px solid var(--shc-accent);
  border-radius:var(--shc-r-md);
  box-shadow:var(--shc-sh-sm);
  color:var(--shc-text);
  cursor:pointer;
  transition:transform var(--shc-tr),box-shadow var(--shc-tr),border-color var(--shc-tr);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) button.sh-smartbtn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shc-sh-md);
  border-color:var(--shc-border-2);
  border-left-color:var(--shc-accent-700);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-smartbtn--info{
  border-left-color:var(--shc-info);
  cursor:default;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-smartbtn__num{
  font-family:var(--shc-font-head); font-size:20px; font-weight:700;
  color:var(--shc-ink); line-height:1.1; letter-spacing:-.01em;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-smartbtn--info .sh-smartbtn__num{
  color:var(--shc-info); font-size:16px;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-smartbtn__lbl{
  font-size:11.5px; font-weight:600; color:var(--shc-muted);
  text-transform:uppercase; letter-spacing:.04em;
}

/* ---- Tabs ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-tabs{
  border-bottom:1px solid var(--shc-border);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-tabs__btn{
  font-family:var(--shc-font-body); font-weight:600; font-size:13px;
  color:var(--shc-text-2);
  transition:color var(--shc-tr),border-color var(--shc-tr);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-tabs__btn:hover{
  color:var(--shc-ink);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-tabs__item--active .sh-tabs__btn,
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-tabs__btn.active{
  color:var(--shc-accent);
  border-bottom-color:var(--shc-accent);
}

/* ---- Panels (Stammdaten, Ansprechpartner, …) ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .panel,
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-panel{
  background:var(--shc-surface);
  border:1px solid var(--shc-border);
  border-radius:var(--shc-r-lg);
  box-shadow:var(--shc-sh-md);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-panel__title,
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .panel > h2{
  font-family:var(--shc-font-head); color:var(--shc-ink);
  letter-spacing:-.01em; font-weight:700;
}

/* ---- Stammdaten-Definitionsliste (sh-dl) ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-dl__row{
  border-bottom:1px solid var(--shc-border);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-dl__row:last-child{
  border-bottom:none;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-dl__label{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--shc-muted);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-dl__value{
  color:var(--shc-ink); font-weight:500;
}
/* E-Mail-/Telefon-Links im Wert in Akzentfarbe */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-dl__value a{
  color:var(--shc-accent);
}

/* ---- Tabellen in Detail-Tabs (Ansprechpartner/Standorte/Opportunities) ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .data-table{
  font-family:var(--shc-font-body); border-collapse:collapse; width:100%;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .data-table thead th{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--shc-muted); text-align:left;
  background:var(--shc-surf-2);
  padding:11px 16px; border-bottom:1px solid var(--shc-border);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .data-table tbody td{
  padding:12px 16px; border-bottom:1px solid var(--shc-border);
  font-size:13px; color:var(--shc-text); vertical-align:middle;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .data-table tbody tr{
  transition:background .12s;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .data-table tbody tr:hover{
  background:var(--shc-surf-2);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .data-table a{
  color:var(--shc-accent);
}

/* ---- Karten-Listen (Notizen / Wiedervorlagen / CRM-Aktivitäten) ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .list--cards{
  list-style:none; padding:0; display:flex; flex-direction:column; gap:10px;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .list--cards .list-item{
  background:var(--shc-surf-2);
  border:1px solid var(--shc-border);
  border-radius:var(--shc-r-md);
  padding:12px 14px;
  color:var(--shc-text);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .list--cards .list-item strong{
  color:var(--shc-ink); font-weight:600;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .list--cards .list-item .muted{
  color:var(--shc-muted);
}

/* ---- Timeline ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .timeline-list li{
  border-bottom-color:var(--shc-border) !important;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .timeline-list strong{
  color:var(--shc-ink);
}

/* ---- Badges in Detail-Tabs (Hauptansprechpartner / Primär / Wiedervorlage) ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-badge{
  border-radius:var(--shc-r-pill); font-weight:600; font-size:11.5px;
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-badge--info{
  background:var(--shc-info-soft); color:var(--shc-info);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-badge--success{
  background:var(--shc-ok-soft); color:var(--shc-ok);
}
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-badge--warning{
  background:var(--shc-warn-soft); color:var(--shc-warn);
}

/* ---- Empty-State im Detail ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-empty-state__text strong{
  font-family:var(--shc-font-head); color:var(--shc-ink);
}

/* ---- Chatter-Box am Seitenende ---- */
#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) #cust-chatter{
  background:var(--shc-surface);
  border:1px solid var(--shc-border);
  border-radius:var(--shc-r-lg);
  box-shadow:var(--shc-sh-md);
}

/* =========================================================================
   3) Responsive Feinschliff (nur Kunden-Scopes)
   ========================================================================= */
@media (max-width:640px){
  #mainContent:has(.sh-smartbtns):has([data-customer-detail-tab]) .sh-smartbtn{
    flex:1 1 calc(50% - 10px); min-width:0;
  }
}


/* ===== gemergt aus sh-redesign-dispatch.css ===== */
/* =========================================================================
   ServiceHub — REDESIGN (rein optisch) · Bereich: DISPOSITION / DISPATCH
   ──────────────────────────────────────────────────────────────────────────
   Additive CSS-Schicht. NULL Funktionsänderung, kein Markup, keine Logik.
   Deckt die Planungs-Oberflächen ab:
     • Disposition  (.disposition-toolbar / .disposition-kpis / .disposition-table)
     • Dispatch-Board / Kalender  (.sh-cal + .sh-cal__*)
     • Wochenplanung  (.dispatch-planning-* / .dispatch-waiting-room)
   Warme Karten, weiche Schatten, Status in Token-Farben.

   Scoping: Dispatch-Klassen sind eindeutig genug → direkt angesprochen.
   Tokens werden lokal auf den Bereichs-Wurzeln gesetzt (kein Verlass auf
   Ladereihenfolge). Globale Basis (.btn/.badge/.data-table/:root) wird NICHT
   neu definiert. Light + Dark via [data-theme="dark"].
   ========================================================================= */


/* ---------- Tokens (Light) — lokal auf die Dispatch-Wurzeln gescoped ---------- */
.disposition-toolbar,
.disposition-kpis,
.disposition-table,
.dispatch-planning-grid-wrapper,
.dispatch-waiting-room,
.sh-cal{
  --shd-accent:#E73D25; --shd-accent-700:#C5331E; --shd-accent-600:#D6371F;
  --shd-accent-soft:#FCEDE7; --shd-accent-line:rgba(231,61,37,.22);
  --shd-honey:#D99A2B; --shd-honey-soft:#FBF0DA;
  --shd-ok:#16A34A; --shd-ok-soft:#E9F8EF;
  --shd-warn:#C7791A; --shd-warn-soft:#FBF1E0;
  --shd-info:#2F6BD6; --shd-info-soft:#EAF1FC;
  --shd-violet:#7C5BD6; --shd-violet-soft:#F0ECFB;
  --shd-bg:#FAF6F2; --shd-surface:#FFFFFF; --shd-surf-2:#F6F1EB; --shd-surf-3:#EFE8E0;
  --shd-ink:#231C17; --shd-text:#463D35; --shd-text-2:#6B6157; --shd-muted:#9A8F84;
  --shd-border:#EEE5DC; --shd-border-2:#E3D9CE; --shd-field:#F6F1EB;
  --shd-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --shd-font-body:'Figtree',system-ui,sans-serif;
  --shd-font-mono:'Space Mono',ui-monospace,monospace;
  --shd-r-xs:7px; --shd-r-sm:9px; --shd-r-md:12px; --shd-r-lg:16px; --shd-r-pill:999px;
  --shd-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --shd-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --shd-sh-lg:0 18px 44px rgba(120,80,50,.14);
  --shd-ring:0 0 0 3px var(--shd-accent-soft);
  --shd-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .disposition-toolbar,
[data-theme="dark"] .disposition-kpis,
[data-theme="dark"] .disposition-table,
[data-theme="dark"] .dispatch-planning-grid-wrapper,
[data-theme="dark"] .dispatch-waiting-room,
[data-theme="dark"] .sh-cal{
  --shd-accent:#F2543B; --shd-accent-700:#E0432B; --shd-accent-600:#EC4A30;
  --shd-accent-soft:rgba(242,84,59,.16); --shd-accent-line:rgba(242,84,59,.30);
  --shd-honey:#E6AE4A; --shd-honey-soft:rgba(230,174,74,.16);
  --shd-ok:#3BC07A; --shd-ok-soft:rgba(59,192,122,.15);
  --shd-warn:#E5A33C; --shd-warn-soft:rgba(229,163,60,.15);
  --shd-info:#5C8FE8; --shd-info-soft:rgba(92,143,232,.16);
  --shd-violet:#9D82E6; --shd-violet-soft:rgba(157,130,230,.16);
  --shd-bg:#15120F; --shd-surface:#1E1A16; --shd-surf-2:#241F1A; --shd-surf-3:#2C2620;
  --shd-ink:#F6F1EC; --shd-text:#E2D8CE; --shd-text-2:#B3A99E; --shd-muted:#8C8175;
  --shd-border:#2E2822; --shd-border-2:#3A332B; --shd-field:#241F1A;
  --shd-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --shd-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --shd-sh-lg:0 18px 44px rgba(0,0,0,.5);
}

/* =========================================================================
   1) DISPOSITION — Filterleiste
   ========================================================================= */
.disposition-toolbar{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-radius:var(--shd-r-lg);
  box-shadow:var(--shd-sh-md);
  padding:14px 16px;
  gap:10px 14px;
  align-items:center;
}
.disposition-toolbar .filter-label{
  font-family:var(--shd-font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--shd-muted);
}
.disposition-toolbar .filter-input,
.disposition-toolbar .filter-select{
  font-family:var(--shd-font-body);
  font-size:13px;
  color:var(--shd-text);
  background:var(--shd-field);
  border:1px solid var(--shd-border-2);
  border-radius:var(--shd-r-sm);
  padding:8px 11px;
  transition:border-color var(--shd-tr),box-shadow var(--shd-tr),background var(--shd-tr);
}
.disposition-toolbar .filter-input:hover,
.disposition-toolbar .filter-select:hover{ border-color:var(--shd-accent-line); }
.disposition-toolbar .filter-input:focus,
.disposition-toolbar .filter-select:focus{
  outline:none;
  border-color:var(--shd-accent);
  background:var(--shd-surface);
  box-shadow:var(--shd-ring);
}
.disposition-toolbar label.filter-label{ gap:7px; color:var(--shd-text-2); }
.disposition-toolbar input[type="checkbox"]{ accent-color:var(--shd-accent); width:15px; height:15px; }

/* =========================================================================
   2) DISPOSITION — KPI-Kacheln
   ========================================================================= */
.disposition-kpis{ gap:12px; }
.disposition-kpis .kpi-card{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-radius:var(--shd-r-lg);
  box-shadow:var(--shd-sh-md);
  padding:16px 18px;
  position:relative;
  overflow:hidden;
  transition:transform var(--shd-tr),box-shadow var(--shd-tr),border-color var(--shd-tr);
}
.disposition-kpis .kpi-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(var(--shd-accent),var(--shd-accent-600));
  opacity:.85;
}
.disposition-kpis .kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shd-sh-lg);
  border-color:var(--shd-accent-line);
}
.disposition-kpis .kpi-card .kpi-value,
.disposition-kpis .kpi-card .kpi-number,
.disposition-kpis .kpi-card strong{
  font-family:var(--shd-font-head);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  color:var(--shd-ink);
}
.disposition-kpis .kpi-card .kpi-label,
.disposition-kpis .kpi-card small,
.disposition-kpis .kpi-card .muted{
  font-family:var(--shd-font-body);
  color:var(--shd-muted);
}

/* =========================================================================
   3) DISPOSITION — Tabelle (weiche Karte statt harter Rahmen)
   ========================================================================= */
.disposition-table{
  font-family:var(--shd-font-body);
  border-radius:var(--shd-r-lg);
  overflow:hidden;
}
.disposition-table thead th{
  background:var(--shd-surf-2);
  color:var(--shd-text-2);
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--shd-border-2);
  padding:11px 12px;
}
.disposition-table tbody td{
  color:var(--shd-text);
  border-bottom:1px solid var(--shd-border);
  padding:11px 12px;
  vertical-align:middle;
}
.disposition-table tbody tr{ transition:background var(--shd-tr); }
.disposition-table tbody tr:hover{ background:var(--shd-surf-2); }
.disposition-table .disposition-actions{ white-space:nowrap; }
/* Ungeplante Aufträge deutlich, aber warm hervorheben (Honig-Ton) */
.disposition-table .row-ungeplant,
.disposition-table tr.row-ungeplant{
  background:var(--shd-honey-soft);
  box-shadow:inset 3px 0 0 var(--shd-honey);
}
.disposition-table .row-ungeplant:hover{ background:var(--shd-honey-soft); }

/* =========================================================================
   4) DISPATCH-BOARD / KALENDER (.sh-cal)
   Weiches Kalender-Raster, heutiger Tag im Akzent, Einsätze als Token-Chips.
   ========================================================================= */
.sh-cal{
  font-family:var(--shd-font-body);
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-radius:var(--shd-r-lg);
  box-shadow:var(--shd-sh-md);
  overflow:hidden;
}
.sh-cal__dows{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  background:var(--shd-surf-2);
  border-bottom:1px solid var(--shd-border-2);
}
.sh-cal__dow{
  padding:9px 10px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--shd-muted);
  text-align:center;
}
.sh-cal__cells{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1px;
  background:var(--shd-border);
}
.sh-cal__cell{
  background:var(--shd-surface);
  min-height:104px;
  padding:7px 8px;
  transition:background var(--shd-tr);
}
.sh-cal__cell:hover{ background:var(--shd-surf-2); }
.sh-cal__cell.is-out{ background:var(--shd-surf-3); color:var(--shd-muted); }
.sh-cal__cell.is-today{
  background:var(--shd-accent-soft);
  box-shadow:inset 0 0 0 2px var(--shd-accent-line);
}
.sh-cal__num{
  font-family:var(--shd-font-head);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:600;
  color:var(--shd-text);
  margin-bottom:6px;
}
.sh-cal__cell.is-today .sh-cal__num{ color:var(--shd-accent-700); }
.sh-cal__cell.is-out .sh-cal__num{ color:var(--shd-muted); font-weight:500; }
.sh-cal__evs{ display:flex; flex-direction:column; gap:4px; }
.sh-cal__ev{
  display:block;
  text-decoration:none;
  background:var(--shd-info-soft);
  color:var(--shd-info);
  border-left:3px solid var(--shd-info);
  border-radius:var(--shd-r-xs);
  padding:4px 8px;
  font-size:11.5px;
  font-weight:600;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:transform var(--shd-tr),box-shadow var(--shd-tr),filter var(--shd-tr);
}
.sh-cal__ev:hover{
  transform:translateY(-1px);
  box-shadow:var(--shd-sh-sm);
  filter:saturate(1.08);
}
.sh-cal__ev-t{
  font-family:var(--shd-font-mono);
  font-size:10.5px;
  font-weight:700;
  opacity:.85;
}
.sh-cal__more{
  font-size:10.5px;
  font-weight:600;
  color:var(--shd-muted);
  padding:2px 4px;
}

/* =========================================================================
   5) WOCHENPLANUNG — Planungs-Board (.dispatch-planning-*)
   Techniker-Spalten / Tages-Slots als weiches Raster.
   ========================================================================= */
.dispatch-planning-grid-wrapper{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-radius:var(--shd-r-lg);
  box-shadow:var(--shd-sh-md);
  padding:6px;
}
.dispatch-planning-table{
  font-family:var(--shd-font-body);
  border-collapse:separate;
  border-spacing:0;
}
.dispatch-planning-table thead th{
  background:var(--shd-ink);
  color:#FCEDE7;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:9px 6px;
  text-align:center;
  border:1px solid var(--shd-border-2);
}
.dispatch-planning-table th.dispatch-planning-day--today{
  background:var(--shd-accent);
  color:#fff;
}
.dispatch-planning-tech{
  background:var(--shd-surf-2);
  border:1px solid var(--shd-border);
  color:var(--shd-text);
  font-size:13px;
  vertical-align:top;
  padding:10px 12px;
}
.dispatch-planning-tech strong{
  font-family:var(--shd-font-head);
  font-weight:600;
  color:var(--shd-ink);
  letter-spacing:-.01em;
}
.dispatch-planning-cell{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  vertical-align:top;
  padding:5px;
  transition:background var(--shd-tr),border-color var(--shd-tr);
}
.dispatch-planning-cell--today{ background:var(--shd-accent-soft); }
.dispatch-planning-cell.dispatch-drop-over{
  background:var(--shd-accent-soft);
  border-color:var(--shd-accent);
  box-shadow:inset 0 0 0 2px var(--shd-accent-line);
}

/* Einsatz-Karten im Board — weiche Karte, Status als linker Token-Balken */
.dispatch-planning-card{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-left:3px solid var(--shd-info);
  border-radius:var(--shd-r-sm);
  box-shadow:var(--shd-sh-sm);
  padding:7px 9px;
  margin-bottom:5px;
  font-size:12px;
  line-height:1.35;
  color:var(--shd-text);
  cursor:grab;
  transition:transform var(--shd-tr),box-shadow var(--shd-tr),border-color var(--shd-tr);
}
.dispatch-planning-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shd-sh-md);
  border-color:var(--shd-accent-line);
}
.dispatch-planning-card:active{ cursor:grabbing; }
.dispatch-planning-card.dispatch-dragging{ opacity:.55; transform:scale(.97); }
.dispatch-planning-card--success{ border-left-color:var(--shd-ok); }
.dispatch-planning-card--warning{ border-left-color:var(--shd-warn); }
.dispatch-planning-card--danger { border-left-color:var(--shd-accent-700); }
.dispatch-planning-card--accent { border-left-color:var(--shd-accent); }
.dispatch-planning-card--neutral{ border-left-color:var(--shd-border-2); }

.dispatch-card-type{
  font-family:var(--shd-font-mono);
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--shd-muted);
  margin-right:5px;
}
.dispatch-card-customer{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--shd-text-2);
}

/* =========================================================================
   6) WARTEZIMMER — ungeplante Einsätze (.dispatch-waiting-room)
   ========================================================================= */
.dispatch-waiting-room{
  margin-top:16px;
  padding:16px 18px;
  background:var(--shd-surf-2);
  border:1.5px dashed var(--shd-border-2);
  border-radius:var(--shd-r-lg);
}
.dispatch-waiting-room__title{
  font-family:var(--shd-font-head);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--shd-ink);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.dispatch-waiting-room__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:var(--shd-r-pill);
  background:var(--shd-honey);
  color:#fff;
  font-family:var(--shd-font-body);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.dispatch-waiting-room__grid{ display:flex; flex-wrap:wrap; gap:9px; }
.dispatch-waiting-room__card{
  padding:9px 12px;
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-left:3px solid var(--shd-honey);
  border-radius:var(--shd-r-sm);
  box-shadow:var(--shd-sh-sm);
  font-size:12.5px;
  color:var(--shd-text);
  cursor:grab;
  min-width:200px;
  max-width:300px;
  transition:transform var(--shd-tr),box-shadow var(--shd-tr),border-color var(--shd-tr);
}
.dispatch-waiting-room__card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shd-sh-md);
  border-color:var(--shd-accent-line);
}
.dispatch-waiting-room__card:active{ cursor:grabbing; }
.dispatch-waiting-room__card.dispatch-dragging{ opacity:.55; }


/* ===== gemergt aus sh-redesign-material.css ===== */
/* =========================================================================
   ServiceHub — Re-Design „Material & Artikel" (REIN OPTISCH, additiv)
   Bereich: Artikelstamm-Liste (#materialListTable), Material-Detail
   (.del-ov-field / Preis-Flow), Artikelkatalog (#products → .data-table),
   Artikelimport (.ai-upload-zone / #aiPreviewTable / .article-import-*) und
   der zentrale Artikel-Picker (.ap-*).
   ─────────────────────────────────────────────────────────────────────────
   NULL Funktionsänderung. Kein display:none auf Controls. Nur Farbe/Rahmen/
   Radius/Schatten/Typo. Tokens warm, Light + Dark. Selektoren sind über die
   bereichseigenen IDs/Klassen gescoped → kein Übergriff auf andere Module.
   Globale Basis (.btn/.badge/.data-table/:root) wird NICHT neu definiert.
   ========================================================================= */


/* ---------- Tokens (Light), lokal gescoped auf die Material-Bereiche ----------
   Ein gemeinsamer Selektor-Block, damit jede Bereichswurzel die --sh-* Tokens
   trägt (unabhängig von Ladereihenfolge / .sh-redesign-Wrapper). */
#materialListTable,
.del-ov-field,
.ai-upload-zone,
#aiPreviewTable,
.ai-kpi-grid,
.article-import-file-meta,
.ap-dropdown,
.ap-input{
  --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-shadow:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --sh-shadow-sm:0 1px 2px rgba(120,80,50,.06);
}
[data-theme="dark"] #materialListTable,
[data-theme="dark"] .del-ov-field,
[data-theme="dark"] .ai-upload-zone,
[data-theme="dark"] #aiPreviewTable,
[data-theme="dark"] .ai-kpi-grid,
[data-theme="dark"] .article-import-file-meta,
[data-theme="dark"] .ap-dropdown,
[data-theme="dark"] .ap-input{
  --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-shadow:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --sh-shadow-sm:0 1px 2px rgba(0,0,0,.4);
}

/* =========================================================================
   1) ARTIKELSTAMM-LISTE — #materialListTable
   ========================================================================= */
#materialListTable{
  font-family:var(--sh-font-body);
  border-collapse:separate;
  border-spacing:0;
}
#materialListTable thead th{
  background:var(--sh-surf-2);
  color:var(--sh-text-2);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:1px solid var(--sh-border-2);
  padding-top:11px;padding-bottom:11px;
}
#materialListTable thead th:first-child{border-top-left-radius:var(--sh-r-md)}
#materialListTable thead th:last-child{border-top-right-radius:var(--sh-r-md)}
#materialListTable tbody td{
  border-top:1px solid var(--sh-border);
  color:var(--sh-text);
  font-size:13px;
}
#materialListTable tbody tr{transition:background .14s cubic-bezier(.2,.7,.3,1)}
#materialListTable tbody tr:hover td{background:var(--sh-accent-soft)}
/* interne / externe Artikelnr → Mono-Chip-Optik (überschreibt inline-Mini-Styles
   gezielt, ohne die Logik zu berühren) */
#materialListTable tbody td code{
  font-family:var(--sh-font-mono);
  background:var(--sh-surf-2);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-r-xs);
  padding:2px 7px;
  color:var(--sh-ink);
  font-size:11.5px;
  letter-spacing:-.01em;
}
#materialListTable tbody td:nth-child(2) code{color:var(--sh-text-2)}
/* numerische Spalten in Mono-Optik (Preis/Marge/Rabatt sind rechtsbündig) */
#materialListTable tbody td[style*="text-align:right"]{
  font-family:var(--sh-font-mono);
  font-size:12.5px;
}
/* Spalten-Resize-Griff in Token-Akzent */
.mat-col-resize{transition:background .14s ease}
.mat-col-resize:hover{background:var(--sh-accent) !important;opacity:.45 !important}
.mat-col-resize:active{background:var(--sh-accent-700) !important;opacity:.85 !important}

/* =========================================================================
   2) MATERIAL-DETAIL — Stamm-/Preis-Formularfelder (.del-ov-field)
   ========================================================================= */
.del-ov-field label{
  font-family:var(--sh-font-body);
  font-size:11.5px;
  font-weight:600;
  color:var(--sh-muted);
  display:block;
  margin-bottom:5px;
  letter-spacing:.01em;
}
.del-ov-field input,
.del-ov-field select{
  font-family:var(--sh-font-body);
  border:1px solid var(--sh-border-2) !important;
  border-radius:var(--sh-r-sm) !important;
  background:var(--sh-field);
  color:var(--sh-ink);
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.del-ov-field input:hover,
.del-ov-field select:hover{border-color:var(--sh-accent-line) !important}
.del-ov-field input:focus,
.del-ov-field select:focus{
  border-color:var(--sh-accent) !important;
  background:var(--sh-surface);
  box-shadow:0 0 0 3px var(--sh-accent-soft);
  outline:none;
}
/* numerische Preis-Felder (matVk/matEk/matVat) in Mono */
.del-ov-field input[type="number"]{font-family:var(--sh-font-mono)}

/* =========================================================================
   3) ARTIKELIMPORT — Upload-Zone, KPIs, Vorschau-Tabelle
   ========================================================================= */
.ai-upload-zone{
  border:2px dashed var(--sh-border-2) !important;
  border-radius:var(--sh-r-md) !important;
  background:var(--sh-surf-2);
  transition:border-color .16s ease, background .16s ease;
}
.ai-upload-zone:hover,
.ai-upload-zone--over{
  border-color:var(--sh-accent) !important;
  background:var(--sh-accent-soft) !important;
}
.ai-upload-label{font-family:var(--sh-font-body);color:var(--sh-text-2)}
.ai-upload-label > span{color:var(--sh-text);font-weight:600}

/* KPI-Kacheln der Import-Vorschau (.ai-kpi-grid > Kacheln) */
.ai-kpi-grid > *{
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-r-md);
  box-shadow:var(--sh-shadow-sm);
}

/* Vorschau-Tabelle */
#aiPreviewTable{font-family:var(--sh-font-body);border-collapse:separate;border-spacing:0}
#aiPreviewTable thead th{
  background:var(--sh-surf-2);
  color:var(--sh-text-2);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--sh-border-2);
}
#aiPreviewTable tbody td{border-top:1px solid var(--sh-border);color:var(--sh-text);font-size:13px}
#aiPreviewTable tbody td:nth-child(2){font-family:var(--sh-font-mono);font-size:12px}
#aiPreviewTable tbody td:nth-child(4){font-family:var(--sh-font-mono);text-align:right}

/* Zeilen-Statusfarben (Konflikt / Fehler / aktiver Batch) in Token-Optik */
.article-import-row-conflict td{background:var(--sh-warn-soft) !important}
.article-import-row-error td{background:var(--sh-accent-soft) !important}
.article-import-batch-active td{background:var(--sh-honey-soft) !important}

/* =========================================================================
   4) ARTIKEL-PICKER (.ap-*) — zentrale Auswahlkomponente in Token-Optik
   (verwendet in allen Positionseditoren: Angebot/Auftrag/Lieferschein/Rechnung)
   ========================================================================= */
.ap-dropdown{
  background:var(--sh-surface);
  border:1px solid var(--sh-border-2);
  border-radius:var(--sh-r-md);
  box-shadow:var(--sh-shadow);
  font-family:var(--sh-font-body);
  color:var(--sh-text);
}
.ap-dropdown::-webkit-scrollbar-thumb{background:var(--sh-border-2)}
.ap-dropdown::-webkit-scrollbar-thumb:hover{background:var(--sh-muted)}

.ap-results-header{border-bottom:1px solid var(--sh-border);color:var(--sh-text-2)}
.ap-results-count{color:var(--sh-ink)}
.ap-results-hint{color:var(--sh-muted)}

.ap-result-item{border-bottom:1px solid var(--sh-border);transition:background .12s ease}
.ap-result-item:hover,
.ap-result-item--highlighted{background:var(--sh-accent-soft)}
.ap-result-item--highlighted{
  outline:2px solid var(--sh-accent);
  outline-offset:-2px;
  border-radius:var(--sh-r-xs);
}
.ap-result-item--warning{border-left:3px solid var(--sh-honey)}

.ap-result-artnr{
  font-family:var(--sh-font-mono);
  color:var(--sh-accent-700);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.ap-result-name{color:var(--sh-text)}
.ap-result-detail{color:var(--sh-text-2)}
.ap-result-detail-label{color:var(--sh-muted)}
.ap-result-detail--stock{color:var(--sh-ok)}
.ap-missing{color:var(--sh-accent)}

.ap-warning-badge{
  color:var(--sh-warn);
  background:var(--sh-warn-soft);
  border:1px solid color-mix(in srgb,var(--sh-warn) 35%,transparent);
  border-radius:var(--sh-r-xs);
}
.ap-no-result{color:var(--sh-text-2)}
.ap-no-result-text strong{color:var(--sh-ink)}
.ap-no-result-hint{color:var(--sh-muted)}
.ap-error{color:var(--sh-accent)}

/* Picker-Input innerhalb der Positions-Tabellen-Engine: Fokus-Ring in Token */
.pte-cell .ap-input:focus{
  background:var(--sh-surface);
  box-shadow:inset 0 0 0 2px var(--sh-accent);
  border-radius:var(--sh-r-xs);
}


/* ===== gemergt aus sh-redesign-warehouse.css ===== */
/* =========================================================================
   ServiceHub — Redesign „Lager" (REIN OPTISCH, additiv)
   Bereich: Zentrallager / Lager (renderInventoryView, "inventory")
            Fahrzeuglager (renderVehicleStockView, "vehicle-stock")
            Wareneingang-Formular + Min-Bestand-Warnung
   ──────────────────────────────────────────────────────────────────────────
   NULL Funktionsänderung. Reines CSS. Keine globalen Basis-Klassen neu
   definiert (.btn/.badge/.data-table/.input/:root gehören dem Fundament) —
   alles nur unter den Lager-Scopes re-getuned. Es wird NICHTS versteckt, das
   eine Funktion trägt (Buttons/Felder/Tabs/Links/Zeilen bleiben sichtbar);
   nur Farbe, Schrift, Radius, Schatten, Abstand, Rahmen.

   SCOPE-STRATEGIE (beide Views rendern in #mainContent ohne eigenen Wrapper):
     • Zentrallager / Lager  → #mainContent:has([data-action="inventory-receive"])
                               #mainContent:has([data-action="inventory-erp-reload"])
                               #mainContent:has([data-action="inventory-reload"])
                               #mainContent:has(#inventoryReceiveForm)
     • Fahrzeuglager         → #mainContent:has([data-action="vehicle-stock-reload"])
                               #mainContent:has([data-action="vehicle-to-central"])
                               #mainContent:has(#vehicleStockUserFilter)
   Diese Marker kommen ausschließlich in den Lager-Views vor.

   Tokens lokal gescoped (gleiche warme Werte wie sh-detail-drawer.css /
   theme.css), damit die Optik unabhängig von der Ladereihenfolge greift.
   Light + Dark ([data-theme="dark"]).
   ========================================================================= */


/* ---------- Tokens (Light) — auf die Lager-Scopes ---------- */
#mainContent:has([data-action="inventory-receive"]),
#mainContent:has([data-action="inventory-erp-reload"]),
#mainContent:has([data-action="inventory-reload"]),
#mainContent:has(#inventoryReceiveForm),
#mainContent:has([data-action="vehicle-stock-reload"]),
#mainContent:has([data-action="vehicle-to-central"]),
#mainContent:has(#vehicleStockUserFilter){
  --shw-accent:#E73D25; --shw-accent-700:#C5331E; --shw-accent-600:#D6371F;
  --shw-accent-soft:#FCEDE7; --shw-accent-line:rgba(231,61,37,.22);
  --shw-honey:#D99A2B; --shw-honey-soft:#FBF0DA;
  --shw-ok:#16A34A; --shw-ok-soft:#E9F8EF;
  --shw-warn:#C7791A; --shw-warn-soft:#FBF1E0;
  --shw-info:#2F6BD6; --shw-info-soft:#EAF1FC;
  --shw-violet:#7C5BD6; --shw-violet-soft:#F0ECFB;
  --shw-bg:#FAF6F2; --shw-surface:#FFFFFF; --shw-surf-2:#F6F1EB; --shw-surf-3:#EFE8E0;
  --shw-ink:#231C17; --shw-text:#463D35; --shw-text-2:#6B6157; --shw-muted:#9A8F84;
  --shw-border:#EEE5DC; --shw-border-2:#E3D9CE; --shw-field:#F6F1EB;
  --shw-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --shw-font-body:'Figtree',system-ui,sans-serif;
  --shw-font-mono:'Space Mono',ui-monospace,monospace;
  --shw-r-xs:7px; --shw-r-sm:9px; --shw-r-md:12px; --shw-r-lg:16px; --shw-r-pill:999px;
  --shw-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --shw-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --shw-sh-lg:0 18px 44px rgba(120,80,50,.14);
  --shw-sh-accent:0 5px 14px rgba(231,61,37,.28);
  --shw-ring:0 0 0 3px var(--shw-accent-soft);
  --shw-tr:.16s cubic-bezier(.2,.7,.3,1);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] #mainContent:has([data-action="inventory-receive"]),
[data-theme="dark"] #mainContent:has([data-action="inventory-erp-reload"]),
[data-theme="dark"] #mainContent:has([data-action="inventory-reload"]),
[data-theme="dark"] #mainContent:has(#inventoryReceiveForm),
[data-theme="dark"] #mainContent:has([data-action="vehicle-stock-reload"]),
[data-theme="dark"] #mainContent:has([data-action="vehicle-to-central"]),
[data-theme="dark"] #mainContent:has(#vehicleStockUserFilter){
  --shw-accent:#F2543B; --shw-accent-700:#E0432B; --shw-accent-600:#EC4A30;
  --shw-accent-soft:rgba(242,84,59,.16); --shw-accent-line:rgba(242,84,59,.30);
  --shw-honey:#E6AE4A; --shw-honey-soft:rgba(230,174,74,.16);
  --shw-ok:#3BC07A; --shw-ok-soft:rgba(59,192,122,.15);
  --shw-warn:#E5A33C; --shw-warn-soft:rgba(229,163,60,.15);
  --shw-info:#5C8FE8; --shw-info-soft:rgba(92,143,232,.16);
  --shw-violet:#9D82E6; --shw-violet-soft:rgba(157,130,230,.16);
  --shw-bg:#15120F; --shw-surface:#1E1A16; --shw-surf-2:#241F1A; --shw-surf-3:#2C2620;
  --shw-ink:#F6F1EC; --shw-text:#E2D8CE; --shw-text-2:#B3A99E; --shw-muted:#8C8175;
  --shw-border:#2E2822; --shw-border-2:#3A332B; --shw-field:#241F1A;
  --shw-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --shw-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --shw-sh-lg:0 18px 44px rgba(0,0,0,.5);
  --shw-sh-accent:0 5px 14px rgba(242,84,59,.30);
  --shw-ring:0 0 0 3px var(--shw-accent-soft);
}

/* =========================================================================
   Ab hier: ein gemeinsamer Scope-Alias. Jede Regel wird für die beiden
   View-Familien (Zentrallager + Fahrzeuglager) wiederholt, gescoped auf
   #mainContent mit einem ihrer eindeutigen Marker. Der Lesbarkeit halber
   bündelt ein CSS-Custom-Selektor-Muster via :is() die Marker-Liste.
   ========================================================================= */

/* ---------- Seiten-Kopf ---------- */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
){
  font-family:var(--shw-font-body);
  color:var(--shw-text);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:4px 2px 18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--shw-border);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .page-header h1{
  font-family:var(--shw-font-head);
  font-size:23px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--shw-ink);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .page-header .subtitle{
  font-size:13px;
  color:var(--shw-muted);
  margin-top:5px;
}

/* ---------- Panels (Karten) ---------- */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .panel{
  background:var(--shw-surface);
  border:1px solid var(--shw-border);
  border-radius:var(--shw-r-lg);
  box-shadow:var(--shw-sh-md);
  padding:18px 20px;
  margin-bottom:18px;
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .panel h2,
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .panel h3{
  font-family:var(--shw-font-head);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--shw-ink);
  margin-bottom:12px;
}

/* ---------- Filter-Toolbar ---------- */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .filter-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
}

/* Panel, das nur die Toolbar enthält: kompakter, dezenter Hintergrund */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .panel:has(> .filter-toolbar){
  padding:12px 14px;
  background:var(--shw-surf-2);
  box-shadow:var(--shw-sh-sm);
}

/* ---------- Eingaben + Selects (Tokens, kein globaler Neuaufbau) ---------- */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .input,
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .select{
  background-color:var(--shw-surface);
  border:1px solid var(--shw-border-2);
  border-radius:var(--shw-r-sm);
  color:var(--shw-ink);
  transition:var(--shw-tr);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .input:focus,
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .select:focus{
  outline:none;
  border-color:var(--shw-accent);
  box-shadow:var(--shw-ring);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .input[type="search"]{
  min-width:220px;
}

/* ---------- Bestands-Tabelle ---------- */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .table-wrap{
  border-radius:var(--shw-r-md);
  overflow:hidden;
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--shw-font-body);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table thead th{
  font-family:var(--shw-font-head);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--shw-muted);
  text-align:left;
  padding:11px 14px;
  background:var(--shw-surf-2);
  border-bottom:1px solid var(--shw-border);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table tbody td{
  padding:12px 14px;
  font-size:13px;
  color:var(--shw-text);
  border-bottom:1px solid var(--shw-border);
  vertical-align:middle;
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table tbody tr{
  transition:background .12s;
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table tbody tr:hover{
  background:var(--shw-surf-2);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table tbody tr:last-child td{
  border-bottom:none;
}

/* erste Spalte (Artikel/Techniker) prominenter */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table tbody td:first-child{
  font-weight:600;
  color:var(--shw-ink);
}

/* Mengen-/Preis-relevante Zellen in Mono für Lesbarkeit */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm)
) .data-table tbody td:nth-child(4),
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm)
) .data-table tbody td:nth-child(6){
  font-family:var(--shw-font-mono);
}

/* Mengenspalte Fahrzeuglager (3. Spalte) in Mono */
#mainContent:is(
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table tbody td:nth-child(3){
  font-family:var(--shw-font-mono);
}

/* ---------- Min-Bestand-Warnung (warn) ---------- */
/* Inventory-View markiert Unterbestand mit td.text-warning */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table td.text-warning{
  color:var(--shw-warn);
  font-weight:700;
  font-family:var(--shw-font-mono);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table td.text-warning::after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:7px;
  border-radius:50%;
  background:var(--shw-warn);
  vertical-align:middle;
}

/* Generisches text-warning außerhalb der Tabelle */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .text-warning{
  color:var(--shw-warn);
}

/* Status-Badges, falls im Lager-Kontext gerendert */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .badge-danger{
  background:var(--shw-accent-soft);
  color:var(--shw-accent-700);
  border-radius:var(--shw-r-pill);
  font-weight:600;
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .badge-warning{
  background:var(--shw-warn-soft);
  color:var(--shw-warn);
  border-radius:var(--shw-r-pill);
  font-weight:600;
}

/* ---------- Zeilen-Aktionsbuttons (Wareneingang/Korrektur/Umbuchung) ---------- */
/* .btn-ghost wird global definiert; hier nur warm nachtönen + kompakter Sitz */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table .btn-ghost.btn-sm{
  border:1px solid var(--shw-border-2);
  background:var(--shw-surface);
  color:var(--shw-text-2);
  border-radius:var(--shw-r-pill);
  transition:var(--shw-tr);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table .btn-ghost.btn-sm:hover{
  border-color:var(--shw-accent);
  color:var(--shw-accent);
  background:var(--shw-accent-soft);
}

/* ---------- Primär-Buttons (Aktualisieren / Wareneingang buchen) ---------- */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .btn-primary{
  background:var(--shw-accent);
  color:#fff;
  border-radius:var(--shw-r-pill);
  box-shadow:var(--shw-sh-accent);
  transition:var(--shw-tr);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .btn-primary:hover{
  background:var(--shw-accent-700);
  transform:translateY(-1px);
}

/* ---------- Wareneingang-Formular ---------- */
#mainContent:has(#inventoryReceiveForm) .panel:has(#inventoryReceiveForm){
  background:linear-gradient(180deg,var(--shw-accent-soft) 0%,var(--shw-surface) 64px);
  border-color:var(--shw-accent-line);
}

#mainContent:has(#inventoryReceiveForm) #inventoryReceiveForm .field-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px 16px;
  margin-bottom:16px;
}

#mainContent:has(#inventoryReceiveForm) #inventoryReceiveForm .field-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12.5px;
  font-weight:600;
  color:var(--shw-text-2);
}

#mainContent:has(#inventoryReceiveForm) #inventoryReceiveForm .field-label .input,
#mainContent:has(#inventoryReceiveForm) #inventoryReceiveForm .field-label .select{
  background-color:var(--shw-surface);
  border:1px solid var(--shw-border-2);
  border-radius:var(--shw-r-sm);
  color:var(--shw-ink);
}

#mainContent:has(#inventoryReceiveForm) #inventoryReceiveForm .field-label .input:focus,
#mainContent:has(#inventoryReceiveForm) #inventoryReceiveForm .field-label .select:focus{
  outline:none;
  border-color:var(--shw-accent);
  box-shadow:var(--shw-ring);
}

/* ---------- Leerzustand / Hinweistexte ---------- */
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table td.muted,
#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .muted{
  color:var(--shw-muted);
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .data-table td.muted{
  text-align:center;
  padding:26px 14px;
  font-size:13px;
}

#mainContent:is(
  :has([data-action="inventory-receive"]),
  :has([data-action="inventory-erp-reload"]),
  :has([data-action="inventory-reload"]),
  :has(#inventoryReceiveForm),
  :has([data-action="vehicle-stock-reload"]),
  :has([data-action="vehicle-to-central"]),
  :has(#vehicleStockUserFilter)
) .error-text{
  color:var(--shw-accent-700);
  font-weight:600;
}

/* ---------- Mobil ---------- */
@media (max-width:640px){
  #mainContent:is(
    :has([data-action="inventory-receive"]),
    :has([data-action="inventory-erp-reload"]),
    :has([data-action="inventory-reload"]),
    :has(#inventoryReceiveForm),
    :has([data-action="vehicle-stock-reload"]),
    :has([data-action="vehicle-to-central"]),
    :has(#vehicleStockUserFilter)
  ) .filter-toolbar{
    gap:8px;
  }
  #mainContent:is(
    :has([data-action="inventory-receive"]),
    :has([data-action="inventory-erp-reload"]),
    :has([data-action="inventory-reload"]),
    :has(#inventoryReceiveForm),
    :has([data-action="vehicle-stock-reload"]),
    :has([data-action="vehicle-to-central"]),
    :has(#vehicleStockUserFilter)
  ) .input[type="search"]{
    min-width:0;
    flex:1 1 100%;
  }
  #mainContent:has(#inventoryReceiveForm) #inventoryReceiveForm .field-grid{
    grid-template-columns:1fr;
  }
}


/* ===== gemergt aus sh-redesign-purchasing.css ===== */
/* =========================================================================
   ServiceHub — Redesign: EINKAUF / PURCHASING
   ──────────────────────────────────────────────────────────────────────────
   REIN OPTISCH. Additive Schicht (lädt zuletzt → gewinnt die Kaskade).
   Re-tunt NUR die Einkaufs-Oberflächen der internen App nach dem warmen
   Redesign-System (theme.css / sh-detail-drawer.css / sh-redesign-orders.css):
     · Einkauf-Landing      .admin-cards (Lieferanten / Artikelkatalog / Lager …)
     · Bestell-Liste        #mainContent:has(#purchasingSupplierFilter)
     · Bestell-Detail       #mainContent:has(.sh-smartbtns):has(p [data-supplier-open])
     · Bestell-Formular      #mainContent:has(form [data-nav-view="purchasing"])
     · Lieferanten-Liste    #mainContent:has(table [data-supplier-open])
     · Lieferanten-Detail   #mainContent:has(#supplier-chatter)

   KEINE Funktions-/Markup-/Logik-Änderung. Es wird NICHTS versteckt, das eine
   Funktion trägt (Buttons/Felder/Tabs/Links/Zeilen bleiben) — nur Farbe,
   Schrift, Radius, Schatten, Abstand, Rahmen.

   Scope: Alle Regeln hängen über :has() an einem Marker, der für den jeweiligen
   Einkaufs-Screen eindeutig ist. Tokens (warme Palette) sind lokal auf die
   Einkaufs-Container gescoped → unabhängig von der Ladereihenfolge.
   Globale Basis (.btn/.badge/.data-table/.input/:root-Tokens) wird NICHT neu
   definiert. Light + Dark ([data-theme="dark"]).
   ========================================================================= */



/* ---------- Tokens (Light) — auf die Einkaufs-Container gescoped ---------- */
#mainContent:has(#purchasingSupplierFilter),
#mainContent:has(table [data-supplier-open]),
#mainContent:has(#supplier-chatter),
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]),
#mainContent:has(form [data-nav-view="purchasing"]),
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) {
  --shp-accent: #E73D25;
  --shp-accent-700: #C5331E;
  --shp-accent-soft: #FCEDE7;
  --shp-accent-line: rgba(231, 61, 37, .22);
  --shp-honey: #D99A2B;
  --shp-honey-soft: #FBF0DA;
  --shp-ok: #16A34A;
  --shp-ok-soft: #E9F8EF;
  --shp-warn: #C7791A;
  --shp-warn-soft: #FBF1E0;
  --shp-info: #2F6BD6;
  --shp-info-soft: #EAF1FC;
  --shp-violet: #7C5BD6;
  --shp-violet-soft: #F0ECFB;

  --shp-bg: #FAF6F2;
  --shp-surface: #FFFFFF;
  --shp-surf-2: #F6F1EB;
  --shp-surf-3: #EFE8E0;
  --shp-field: #F6F1EB;

  --shp-ink: #231C17;
  --shp-text: #463D35;
  --shp-text-2: #6B6157;
  --shp-muted: #9A8F84;
  --shp-border: #EEE5DC;
  --shp-border-2: #E3D9CE;

  --shp-font-head: 'Space Grotesk', 'Figtree', system-ui, sans-serif;
  --shp-font-body: 'Figtree', system-ui, sans-serif;
  --shp-font-mono: 'Space Mono', ui-monospace, monospace;

  --shp-r-sm: 9px;
  --shp-r-md: 12px;
  --shp-r-lg: 16px;
  --shp-r-pill: 999px;

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

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] #mainContent:has(#purchasingSupplierFilter),
[data-theme="dark"] #mainContent:has(table [data-supplier-open]),
[data-theme="dark"] #mainContent:has(#supplier-chatter),
[data-theme="dark"] #mainContent:has(.sh-smartbtns):has(p [data-supplier-open]),
[data-theme="dark"] #mainContent:has(form [data-nav-view="purchasing"]),
[data-theme="dark"] #mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) {
  --shp-accent: #F2543B;
  --shp-accent-700: #E0432B;
  --shp-accent-soft: rgba(242, 84, 59, .16);
  --shp-accent-line: rgba(242, 84, 59, .30);
  --shp-honey: #E6AE4A;
  --shp-honey-soft: rgba(230, 174, 74, .16);
  --shp-ok: #3BC07A;
  --shp-ok-soft: rgba(59, 192, 122, .15);
  --shp-warn: #E5A33C;
  --shp-warn-soft: rgba(229, 163, 60, .15);
  --shp-info: #5C8FE8;
  --shp-info-soft: rgba(92, 143, 232, .16);
  --shp-violet: #9D82E6;
  --shp-violet-soft: rgba(157, 130, 230, .16);

  --shp-bg: #15120F;
  --shp-surface: #1E1A16;
  --shp-surf-2: #241F1A;
  --shp-surf-3: #2C2620;
  --shp-field: #241F1A;

  --shp-ink: #F6F1EC;
  --shp-text: #E2D8CE;
  --shp-text-2: #B3A99E;
  --shp-muted: #8C8175;
  --shp-border: #2E2822;
  --shp-border-2: #3A332B;

  --shp-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shp-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --shp-sh-accent: 0 5px 14px rgba(0, 0, 0, .5);
}

/* =========================================================================
   GEMEINSAM — Seitenkopf der Einkaufs-Screens
   (Scope-Liste exakt wie die Token-Selektoren, damit nur Einkauf betroffen ist)
   ========================================================================= */
#mainContent:has(#purchasingSupplierFilter) .page-header h1,
#mainContent:has(table [data-supplier-open]) .page-header h1,
#mainContent:has(#supplier-chatter) .page-header h1,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .page-header h1,
#mainContent:has(form [data-nav-view="purchasing"]) .page-header h1,
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .page-header h1 {
  font-family: var(--shp-font-head);
  color: var(--shp-ink);
  letter-spacing: -.015em;
  font-weight: 700;
}
#mainContent:has(#purchasingSupplierFilter) .page-header .subtitle,
#mainContent:has(table [data-supplier-open]) .page-header .subtitle,
#mainContent:has(#supplier-chatter) .page-header .subtitle,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .page-header .subtitle,
#mainContent:has(form [data-nav-view="purchasing"]) .page-header .subtitle,
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .page-header .subtitle {
  color: var(--shp-text-2);
  font-family: var(--shp-font-body);
}

/* =========================================================================
   EINKAUF-LANDING  —  Kachel-Navigation (Lieferanten / Katalog / Lager …)
   Scope: .admin-cards mit Lieferanten- UND Artikelkatalog-Kachel (= Einkauf).
   ========================================================================= */
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .admin-cards {
  font-family: var(--shp-font-body);
  gap: 16px;
}
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .admin-card {
  background: var(--shp-surface);
  border: 1px solid var(--shp-border);
  border-radius: var(--shp-r-lg);
  box-shadow: var(--shp-sh-sm);
  transition: var(--shp-tr);
  position: relative;
  overflow: hidden;
}
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .admin-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--shp-border-2);
  transition: var(--shp-tr);
}
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .admin-card:hover {
  border-color: var(--shp-accent-line);
  box-shadow: var(--shp-sh-md);
  transform: translateY(-2px);
}
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .admin-card:hover::before {
  background: var(--shp-accent);
}
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .admin-card h2 {
  font-family: var(--shp-font-head);
  color: var(--shp-ink);
  font-weight: 700;
  letter-spacing: -.01em;
}
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .admin-card p {
  color: var(--shp-text-2);
}
#mainContent:has(.admin-cards [data-nav-view="suppliers"]):has(.admin-cards [data-nav-view="products"]) .badge.badge-neutral {
  background: var(--shp-surf-2);
  color: var(--shp-text-2);
  border-radius: var(--shp-r-pill);
}

/* =========================================================================
   GEMEINSAM — Panels & Filter-Toolbar auf Einkaufs-Screens
   ========================================================================= */
#mainContent:has(#purchasingSupplierFilter) .panel,
#mainContent:has(table [data-supplier-open]) .panel,
#mainContent:has(#supplier-chatter) .panel,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .panel,
#mainContent:has(form [data-nav-view="purchasing"]) .panel {
  background: var(--shp-surface);
  border: 1px solid var(--shp-border);
  border-radius: var(--shp-r-lg);
  box-shadow: var(--shp-sh-md);
  font-family: var(--shp-font-body);
}
#mainContent:has(#purchasingSupplierFilter) .panel > h2,
#mainContent:has(table [data-supplier-open]) .panel > h2,
#mainContent:has(#supplier-chatter) .panel > h2,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .panel > h2,
#mainContent:has(form [data-nav-view="purchasing"]) .panel > h2 {
  font-family: var(--shp-font-head);
  color: var(--shp-ink);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Filter-Toolbar der Bestell-Liste */
#mainContent:has(#purchasingSupplierFilter) .filter-toolbar {
  gap: 10px;
  align-items: center;
}
#mainContent:has(#purchasingSupplierFilter) .filter-toolbar .select {
  background: var(--shp-field);
  border: 1px solid var(--shp-border-2);
  color: var(--shp-text);
  border-radius: var(--shp-r-sm);
  font-family: var(--shp-font-body);
  transition: var(--shp-tr);
}
#mainContent:has(#purchasingSupplierFilter) .filter-toolbar .select:hover {
  border-color: var(--shp-border);
}
#mainContent:has(#purchasingSupplierFilter) .filter-toolbar .select:focus {
  outline: none;
  border-color: var(--shp-accent);
  box-shadow: 0 0 0 3px var(--shp-accent-soft);
}

/* =========================================================================
   GEMEINSAM — Tabellen auf Einkaufs-Screens
   (Bestell-Liste, Lieferanten-Liste, Positionen, Wareneingänge)
   ========================================================================= */
#mainContent:has(#purchasingSupplierFilter) .table-wrap,
#mainContent:has(table [data-supplier-open]) .table-wrap,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .table-wrap {
  border-radius: var(--shp-r-md);
  overflow: hidden;
}
#mainContent:has(#purchasingSupplierFilter) .data-table,
#mainContent:has(table [data-supplier-open]) .data-table,
#mainContent:has(#supplier-chatter) .data-table,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table {
  font-family: var(--shp-font-body);
  border-collapse: collapse;
  width: 100%;
}
#mainContent:has(#purchasingSupplierFilter) .data-table thead th,
#mainContent:has(table [data-supplier-open]) .data-table thead th,
#mainContent:has(#supplier-chatter) .data-table thead th,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table thead th {
  background: var(--shp-surf-2);
  color: var(--shp-text-2);
  border-bottom: 1px solid var(--shp-border-2);
  font-family: var(--shp-font-head);
  font-weight: 600;
  letter-spacing: .01em;
}
#mainContent:has(#purchasingSupplierFilter) .data-table tbody td,
#mainContent:has(table [data-supplier-open]) .data-table tbody td,
#mainContent:has(#supplier-chatter) .data-table tbody td,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table tbody td {
  color: var(--shp-text);
  border-bottom: 1px solid var(--shp-border);
}
#mainContent:has(#purchasingSupplierFilter) .data-table tbody tr,
#mainContent:has(table [data-supplier-open]) .data-table tbody tr,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table tbody tr {
  transition: background var(--shp-tr);
}
#mainContent:has(#purchasingSupplierFilter) .data-table tbody tr:hover td,
#mainContent:has(table [data-supplier-open]) .data-table tbody tr:hover td,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table tbody tr:hover td {
  background: var(--shp-accent-soft);
}
/* Beträge / Nummern in Mono für ruhige Zahlen-Ästhetik */
#mainContent:has(#purchasingSupplierFilter) .data-table td.small,
#mainContent:has(#supplier-chatter) .data-table code {
  font-family: var(--shp-font-mono);
  color: var(--shp-text-2);
  font-size: .9em;
}
/* Bestellnummer (1. Spalte) der Bestell-Liste monospace */
#mainContent:has(#purchasingSupplierFilter) .data-table tbody td:first-child {
  font-family: var(--shp-font-mono);
  color: var(--shp-ink);
  font-size: .92em;
}
/* Leerzustands-Zeile dezent */
#mainContent:has(#purchasingSupplierFilter) .data-table tbody td.muted,
#mainContent:has(table [data-supplier-open]) .data-table tbody td.muted,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table tbody td.muted {
  color: var(--shp-muted);
  font-family: var(--shp-font-body);
}

/* Gruppen-Zeilen (Gruppieren nach Status/Lieferant) in der Bestell-Liste */
#mainContent:has(#purchasingSupplierFilter) .data-table tr.sh-group-row td {
  background: var(--shp-surf-2);
  color: var(--shp-text);
  border-top: 1px solid var(--shp-border-2);
  border-bottom: 1px solid var(--shp-border-2);
  font-family: var(--shp-font-head);
}
#mainContent:has(#purchasingSupplierFilter) .data-table tr.sh-group-row:hover td {
  background: var(--shp-surf-3);
}
#mainContent:has(#purchasingSupplierFilter) .data-table tr.sh-group-row .sh-group-count {
  background: var(--shp-accent-soft);
  color: var(--shp-accent-700);
  border-radius: var(--shp-r-pill);
  padding: 1px 9px;
  font-size: .78em;
  font-weight: 700;
}
#mainContent:has(#purchasingSupplierFilter) .data-table tr.sh-group-row .sh-group-caret {
  color: var(--shp-muted);
}

/* "Öffnen"/"Details" — weiches Ghost-Pillen-Design in Tabellen-Aktionen */
#mainContent:has(#purchasingSupplierFilter) .data-table .btn-ghost,
#mainContent:has(table [data-supplier-open]) .data-table .btn-ghost,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table .btn-ghost {
  border: 1px solid var(--shp-border-2);
  color: var(--shp-text);
  background: var(--shp-surface);
  border-radius: var(--shp-r-pill);
  transition: var(--shp-tr);
}
#mainContent:has(#purchasingSupplierFilter) .data-table .btn-ghost:hover,
#mainContent:has(table [data-supplier-open]) .data-table .btn-ghost:hover,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table .btn-ghost:hover {
  border-color: var(--shp-accent);
  color: var(--shp-accent);
  background: var(--shp-accent-soft);
}
/* Lösch-Aktion behält Warnton beim Hover (nur Farbe, keine Funktion) */
#mainContent:has(table [data-supplier-open]) .data-table .btn-ghost.btn-danger:hover,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table .btn-ghost.btn-danger:hover {
  border-color: var(--shp-accent);
  color: var(--shp-accent-700);
  background: var(--shp-accent-soft);
}

/* "Angezeigt: N"-Fußnote */
#mainContent:has(#purchasingSupplierFilter) .panel > .muted {
  color: var(--shp-muted);
  font-family: var(--shp-font-body);
}

/* =========================================================================
   BESTELL-DETAIL  —  Smart-Buttons, Kopf-Stammdaten, Positionen
   Scope: PO-Detail = Smart-Buttons + Lieferanten-Link im Kopf (eindeutig ggü.
   Kunden-Detail, das keinen [data-supplier-open] trägt).
   ========================================================================= */
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .sh-smartbtns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .sh-smartbtn {
  background: var(--shp-surface);
  border: 1px solid var(--shp-border);
  border-radius: var(--shp-r-md);
  box-shadow: var(--shp-sh-sm);
  padding: 12px 18px;
  min-width: 120px;
  transition: var(--shp-tr);
}
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .sh-smartbtn:hover {
  border-color: var(--shp-accent-line);
  box-shadow: var(--shp-sh-md);
  transform: translateY(-1px);
}
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .sh-smartbtn__num {
  font-family: var(--shp-font-head);
  color: var(--shp-ink);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  display: block;
}
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .sh-smartbtn--info .sh-smartbtn__num {
  color: var(--shp-info);
}
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .sh-smartbtn__lbl {
  color: var(--shp-text-2);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Kopf-Stammdaten: Labels (.muted) vs. Werte */
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .form-grid .muted {
  color: var(--shp-muted);
  font-family: var(--shp-font-body);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .form-grid p {
  color: var(--shp-ink);
}
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) a[data-supplier-open],
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) a[data-nav-order],
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) a[data-nav-project] {
  color: var(--shp-accent);
  text-decoration: none;
  font-weight: 600;
  transition: var(--shp-tr);
}
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) a[data-supplier-open]:hover,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) a[data-nav-order]:hover,
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) a[data-nav-project]:hover {
  color: var(--shp-accent-700);
  text-decoration: underline;
}

/* Positions-/Wareneingangs-Beträge in Mono */
#mainContent:has(.sh-smartbtns):has(p [data-supplier-open]) .data-table tbody td {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   LIEFERANTEN-DETAIL  —  Stammdaten + Chatter
   ========================================================================= */
#mainContent:has(#supplier-chatter) .form-grid .muted {
  color: var(--shp-muted);
  font-family: var(--shp-font-body);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
#mainContent:has(#supplier-chatter) .form-grid p {
  color: var(--shp-ink);
}
#mainContent:has(#supplier-chatter) .panel a[data-nav-view="purchasing"] {
  color: var(--shp-accent);
  font-weight: 600;
  text-decoration: none;
  transition: var(--shp-tr);
}
#mainContent:has(#supplier-chatter) .panel a[data-nav-view="purchasing"]:hover {
  color: var(--shp-accent-700);
  text-decoration: underline;
}

/* =========================================================================
   BESTELL-FORMULAR  (Neue / Bestellung bearbeiten)  —  Felder & Aktionsleiste
   Scope: Formular mit "Abbrechen → purchasing".
   ========================================================================= */
#mainContent:has(form [data-nav-view="purchasing"]) form .input,
#mainContent:has(form [data-nav-view="purchasing"]) form .select,
#mainContent:has(form [data-nav-view="purchasing"]) form input[type="text"],
#mainContent:has(form [data-nav-view="purchasing"]) form input[type="number"],
#mainContent:has(form [data-nav-view="purchasing"]) form input[type="date"],
#mainContent:has(form [data-nav-view="purchasing"]) form textarea {
  background: var(--shp-field);
  border: 1px solid var(--shp-border-2);
  color: var(--shp-text);
  border-radius: var(--shp-r-sm);
  font-family: var(--shp-font-body);
  transition: var(--shp-tr);
}
#mainContent:has(form [data-nav-view="purchasing"]) form .input:focus,
#mainContent:has(form [data-nav-view="purchasing"]) form .select:focus,
#mainContent:has(form [data-nav-view="purchasing"]) form input:focus,
#mainContent:has(form [data-nav-view="purchasing"]) form textarea:focus {
  outline: none;
  border-color: var(--shp-accent);
  box-shadow: 0 0 0 3px var(--shp-accent-soft);
}
#mainContent:has(form [data-nav-view="purchasing"]) form label {
  color: var(--shp-text-2);
  font-family: var(--shp-font-body);
}
#mainContent:has(form [data-nav-view="purchasing"]) .actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* =========================================================================
   FALLBACK ohne :has()  (sehr alte Browser)
   Konservative Grundtöne, damit die Einkaufs-Flächen warm wirken, selbst wenn
   die :has()-Scopes oben nicht greifen. Es wird NICHTS versteckt.
   ========================================================================= */
@supports not (selector(:has(*))) {
  .admin-cards .admin-card {
    border-radius: 16px;
  }
}


/* ===== gemergt aus sh-redesign-crm.css ===== */
/* =========================================================================
   ServiceHub — Re-Design CRM (rein optisch, additiv)
   Bereich: CRM / Vertrieb — Leads, Pipeline, Opportunities, Aktivitäten,
   Wiedervorlagen, CRM-Dashboard.
   ──────────────────────────────────────────────────────────────────────────
   NULL Funktionsänderung. Nur Farbe/Rahmen/Radius/Schatten/Typo.
   Keine Layout-Umbauten, kein display:none auf funktionale Controls.

   SCOPING (wichtig, da CRM-Views direkt in #mainContent rendern und die
   Kanban-Klassen .sh-kanban* app-weit auch von den Aufträgen genutzt werden):
   → Alles ist auf  #mainContent:has(#shCrmGuide)  gescoped.
     #shCrmGuide ist das CRM-Leitfaden-Band, das sh-crm-guide.js NUR auf
     CRM-Seiten als erstes Kind in #mainContent injiziert. Damit greift dieses
     CSS ausschließlich auf CRM-Ansichten und fasst die Auftrags-Kanban NICHT an.
   Tokens lokal gescoped (gleiche Werte wie theme.css / sh-detail-drawer.css),
   damit nichts von der Ladereihenfolge abhängt. Light + Dark via [data-theme].
   ========================================================================= */



/* ---------- Tokens (Light), lokal auf den CRM-Scope ---------- */
#mainContent:has(#shCrmGuide){
  --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-shadow-sm:0 1px 2px rgba(120,80,50,.06);
  --sh-shadow-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --sh-shadow-lg:0 18px 44px rgba(120,80,50,.14);
  --sh-shadow-accent:0 5px 14px rgba(231,61,37,.28);
  --sh-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] #mainContent:has(#shCrmGuide){
  --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-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-shadow-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --sh-shadow-lg:0 18px 44px rgba(0,0,0,.5);
  --sh-shadow-accent:0 5px 14px rgba(0,0,0,.45);
}

/* Kurz-Alias für den Scope, damit die Selektoren lesbar bleiben. */
/* (CSS hat keine Variablen für Selektoren — daher unten #mainContent:has(#shCrmGuide) ausgeschrieben.) */

/* =========================================================================
   1) Seitenkopf (page-header / sh-header)
   ========================================================================= */
#mainContent:has(#shCrmGuide) .page-header h1{
  font-family:var(--sh-font-head);
  color:var(--sh-ink);
  letter-spacing:-.02em;
  font-weight:700;
}
#mainContent:has(#shCrmGuide) .page-header .subtitle,
#mainContent:has(#shCrmGuide) .sh-header__context{
  color:var(--sh-text-2);
}

/* =========================================================================
   2) Leitfaden-Band (sh-crmg) — sanfter ins warme System einbetten
   (rein farblich; Struktur/Logik bleibt unangetastet)
   ========================================================================= */
#mainContent #shCrmGuide.sh-crmg{
  border-color:var(--sh-border);
  border-left:4px solid var(--sh-accent);
  border-radius:var(--sh-r-md);
  background:var(--sh-accent-soft);
  box-shadow:var(--sh-shadow-sm);
}
#mainContent #shCrmGuide .sh-crmg__title,
#mainContent #shCrmGuide .sh-crmg__chev,
#mainContent #shCrmGuide .sh-crmg__glostoggle{
  color:var(--sh-accent);
}
#mainContent #shCrmGuide .sh-crmg__step{
  background:var(--sh-surface);
  border-color:var(--sh-border);
  border-radius:var(--sh-r-pill);
  color:var(--sh-text);
}
#mainContent #shCrmGuide .sh-crmg__step b{
  background:var(--sh-accent);
}
#mainContent #shCrmGuide .sh-crmg__step i{ color:var(--sh-muted); }
#mainContent #shCrmGuide .sh-crmg__step--win{
  background:var(--sh-ok-soft);
  border-color:color-mix(in srgb, var(--sh-ok) 30%, transparent);
}
#mainContent #shCrmGuide .sh-crmg__step--win b{ background:var(--sh-ok); }
#mainContent #shCrmGuide .sh-crmg__arr{ color:var(--sh-muted); }
#mainContent #shCrmGuide .sh-crmg__here{ color:var(--sh-text); }
#mainContent #shCrmGuide .sh-crmg__glossary dt{ color:var(--sh-ink); }
#mainContent #shCrmGuide .sh-crmg__glossary dd{ color:var(--sh-text-2); }

/* =========================================================================
   3) Panels / Karten — weiche, warme Flächen mit dezentem Schatten
   ========================================================================= */
#mainContent:has(#shCrmGuide) .panel{
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-r-lg);
  box-shadow:var(--sh-shadow-md);
}
#mainContent:has(#shCrmGuide) .panel h2{
  font-family:var(--sh-font-head);
  color:var(--sh-ink);
  letter-spacing:-.01em;
  font-weight:700;
}
/* Kennzahl-Werte im CRM-Dashboard (inline-gestylte Ziffern) warm einfärben */
#mainContent:has(#shCrmGuide) .panel .muted{ color:var(--sh-muted); }

/* =========================================================================
   4) Pipeline / Opportunities — Kanban als weiche Karten-Spalten
   (Klassen .sh-kanban* sind app-weit; greifen hier NUR im CRM-Scope)
   ========================================================================= */
#mainContent:has(#shCrmGuide) .sh-kanban-wrap{
  background:transparent;
}
#mainContent:has(#shCrmGuide) .sh-kanban{
  gap:16px;
}

/* Phasen-Spalte = weiche Karte */
#mainContent:has(#shCrmGuide) .sh-kanban__col{
  background:var(--sh-surf-2);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-r-lg);
  box-shadow:var(--sh-shadow-sm);
  overflow:hidden;
}
/* zarte tonale Kopf-Akzentlinie je Phase (oben), Spaltenkörper bleibt ruhig */
#mainContent:has(#shCrmGuide) .sh-kanban__col-head{
  position:relative;
  padding:13px 14px 11px;
  background:var(--sh-surface);
  border-bottom:1px solid var(--sh-border);
}
#mainContent:has(#shCrmGuide) .sh-kanban__col-head::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:var(--sh-muted);
  opacity:.85;
}
#mainContent:has(#shCrmGuide) .sh-kanban__col--neutral .sh-kanban__col-head::before{ background:var(--sh-muted); }
#mainContent:has(#shCrmGuide) .sh-kanban__col--info    .sh-kanban__col-head::before{ background:var(--sh-info); }
#mainContent:has(#shCrmGuide) .sh-kanban__col--warning .sh-kanban__col-head::before{ background:var(--sh-honey); }
#mainContent:has(#shCrmGuide) .sh-kanban__col--success .sh-kanban__col-head::before{ background:var(--sh-ok); }
#mainContent:has(#shCrmGuide) .sh-kanban__col--danger  .sh-kanban__col-head::before{ background:var(--sh-accent); }

#mainContent:has(#shCrmGuide) .sh-kanban__col-title{
  font-family:var(--sh-font-head);
  font-weight:700;
  color:var(--sh-ink);
  letter-spacing:-.01em;
}
#mainContent:has(#shCrmGuide) .sh-kanban__col-meta{
  color:var(--sh-text-2);
  font-weight:600;
}
#mainContent:has(#shCrmGuide) .sh-kanban__col-sum{
  font-family:var(--sh-font-mono);
  color:var(--sh-ink);
}
#mainContent:has(#shCrmGuide) .sh-kanban__col-body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#mainContent:has(#shCrmGuide) .sh-kanban__col-empty{
  color:var(--sh-muted);
  font-size:12.5px;
  text-align:center;
  padding:14px 8px;
  border:1px dashed var(--sh-border-2);
  border-radius:var(--sh-r-sm);
  background:transparent;
}

/* Opportunity-/Lead-Karte */
#mainContent:has(#shCrmGuide) .sh-kanban__card{
  display:block;
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-radius:var(--sh-r-md);
  box-shadow:var(--sh-shadow-sm);
  padding:12px 13px;
  transition:var(--sh-tr);
  cursor:pointer;
  text-decoration:none;
}
#mainContent:has(#shCrmGuide) .sh-kanban__card:hover{
  border-color:var(--sh-accent-line);
  box-shadow:var(--sh-shadow-md);
  transform:translateY(-1px);
}
#mainContent:has(#shCrmGuide) .sh-kanban__card--dragging{
  box-shadow:var(--sh-shadow-lg);
  border-color:var(--sh-accent);
  opacity:.92;
}
#mainContent:has(#shCrmGuide) .sh-kanban__card-title{
  font-family:var(--sh-font-head);
  font-weight:600;
  color:var(--sh-ink);
  letter-spacing:-.01em;
  line-height:1.3;
  margin-bottom:4px;
}
#mainContent:has(#shCrmGuide) .sh-kanban__card-customer{
  font-size:12.5px;
  color:var(--sh-text-2);
  margin-bottom:8px;
}
#mainContent:has(#shCrmGuide) .sh-kanban__card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:8px;
  border-top:1px solid var(--sh-border);
}
#mainContent:has(#shCrmGuide) .sh-kanban__card-amount{
  font-family:var(--sh-font-mono);
  font-weight:700;
  color:var(--sh-accent);
  font-size:13px;
}
#mainContent:has(#shCrmGuide) .sh-kanban__card-date{
  font-size:11.5px;
  color:var(--sh-muted);
  font-family:var(--sh-font-mono);
}
/* Drop-Ziel-Hervorhebung (falls genutzt) */
#mainContent:has(#shCrmGuide) .sh-kanban__col--drop{
  outline:2px dashed var(--sh-accent);
  outline-offset:-3px;
  background:var(--sh-accent-soft);
}

/* =========================================================================
   5) Tabellen (Leads / Aktivitäten / Wiedervorlagen) — data-table im CRM-Scope
   ========================================================================= */
#mainContent:has(#shCrmGuide) .data-table thead th{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--sh-muted);
  border-bottom:1px solid var(--sh-border);
  background:var(--sh-surf-2);
}
#mainContent:has(#shCrmGuide) .data-table tbody td{
  border-bottom:1px solid var(--sh-border);
  color:var(--sh-text);
  vertical-align:middle;
}
#mainContent:has(#shCrmGuide) .data-table tbody tr{
  transition:background .12s;
}
#mainContent:has(#shCrmGuide) .data-table tbody tr:hover{
  background:var(--sh-surf-2);
}
#mainContent:has(#shCrmGuide) .data-table tbody tr:last-child td{
  border-bottom:none;
}
#mainContent:has(#shCrmGuide) .data-table .muted{ color:var(--sh-muted); }

/* =========================================================================
   6) Aktivitäts-/Wiedervorlage-Karten (Dashboard-Liste .list--cards)
   ========================================================================= */
#mainContent:has(#shCrmGuide) .list--cards{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0;
  margin:0 0 12px;
}
#mainContent:has(#shCrmGuide) .list--cards .list-item{
  background:var(--sh-surface);
  border:1px solid var(--sh-border);
  border-left:3px solid var(--sh-honey);
  border-radius:var(--sh-r-sm);
  padding:11px 14px;
  box-shadow:var(--sh-shadow-sm);
  color:var(--sh-text);
  transition:var(--sh-tr);
}
#mainContent:has(#shCrmGuide) .list--cards .list-item:hover{
  border-color:var(--sh-border-2);
  box-shadow:var(--sh-shadow-md);
}
#mainContent:has(#shCrmGuide) .list--cards .list-item .muted{
  color:var(--sh-muted);
  font-family:var(--sh-font-mono);
  font-size:11.5px;
}

/* =========================================================================
   7) Statusbar (Lead-/Opportunity-Fluss) — falls vorhanden, warm tönen
   (nur Farben; ShStatusbar bringt eigene Struktur mit)
   ========================================================================= */
#mainContent:has(#shCrmGuide) .sh-cp-statusbar{
  --sh-statusbar-accent:var(--sh-accent);
}

/* =========================================================================
   8) Detail-Stammdaten (Lead-/Opportunity-Detail: <p><strong>…) lesbarer
   ========================================================================= */
#mainContent:has(#shCrmGuide) .panel p strong{
  color:var(--sh-ink);
  font-weight:600;
}

/* =========================================================================
   9) Buttons im CRM-Scope — nur weiche Politur über bestehende .btn-Basis
   (Basis .btn / .btn-primary / .btn-ghost gehört dem Fundament; hier nur
   Radius/Schatten-Feinschliff, keine Neudefinition der Grundgeometrie)
   ========================================================================= */
#mainContent:has(#shCrmGuide) .btn-primary{
  box-shadow:var(--sh-shadow-accent);
}
#mainContent:has(#shCrmGuide) .btn-primary:hover{
  transform:translateY(-1px);
}

/* =========================================================================
   10) Responsive — Kanban-Spalten auf schmalen Screens ruhig stapeln
   (nur Optik; keine Funktion entfällt)
   ========================================================================= */
@media (max-width:760px){
  #mainContent:has(#shCrmGuide) .sh-kanban{
    gap:12px;
  }
}


/* ===== gemergt aus sh-redesign-finance.css ===== */
/* =========================================================================
   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.
   ========================================================================= */


/* =========================================================================
   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;
  }
}


/* ===== gemergt aus sh-redesign-modals.css ===== */
/* =========================================================================
   ServiceHub — Re-Design: MODALE / DIALOGE  (rein optisch, additiv)
   Bereich: alle <dialog>-Modale AUSSER dem Detail-Drawer.
   Trifft die echten App-Container:
     dialog.modal            (Login, Kunde, Projekt, Asset, Review, AI-Center …)
     dialog.modal-dialog     (Abwesenheits-Dialoge)
     dialog.dialog           (JS-Dialoge: Rechnung/Artikel/Mailbox/Vorlagen …)
   + deren Innenleben (.panel, header>h2, .modal-section, .modal-subhead,
     .modal-divider, .modal-actions, .dialog-body, .dialog-footer, Buttons,
     Felder). Warmes Design (Space Grotesk / Figtree / Space Mono), 16px-Radius,
     warmer Pop-Schatten, Scrim rgba(35,25,18,.4) + blur. Light + Dark.

   REGELN dieser Datei:
   - NUR Optik. Keine Logik/Markup. Kein display:none auf funktionale Controls.
   - Tokens lokal auf die Modal-Container gescoped → unabhängig von Ladereihenfolge.
   - Globale Basis (:root-Tokens, .btn/.badge/.data-table) wird NICHT neu definiert.
   - Werte exakt wie sh-detail-drawer.css / theme.css (warm).
   ========================================================================= */


/* ---------------------------------------------------------------------------
   Tokens (Light) — lokal auf die Modal-Container gescoped
   --------------------------------------------------------------------------- */
dialog.modal,
dialog.modal-dialog,
dialog.dialog{
  --shm-accent:#E73D25; --shm-accent-700:#C5331E; --shm-accent-600:#D6371F;
  --shm-accent-soft:#FCEDE7; --shm-accent-line:rgba(231,61,37,.22);
  --shm-honey:#D99A2B; --shm-honey-soft:#FBF0DA;
  --shm-ok:#16A34A; --shm-ok-soft:#E9F8EF;
  --shm-warn:#C7791A; --shm-warn-soft:#FBF1E0;
  --shm-info:#2F6BD6; --shm-info-soft:#EAF1FC;
  --shm-violet:#7C5BD6; --shm-violet-soft:#F0ECFB;
  --shm-bg:#FAF6F2; --shm-surface:#FFFFFF; --shm-surf-2:#F6F1EB; --shm-surf-3:#EFE8E0;
  --shm-ink:#231C17; --shm-text:#463D35; --shm-text-2:#6B6157; --shm-muted:#9A8F84;
  --shm-border:#EEE5DC; --shm-border-2:#E3D9CE; --shm-field:#F6F1EB;
  --shm-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --shm-font-body:'Figtree',system-ui,sans-serif;
  --shm-font-mono:'Space Mono',ui-monospace,monospace;
  --shm-r-xs:7px; --shm-r-sm:9px; --shm-r-md:12px; --shm-r-lg:16px; --shm-r-pill:999px;
  --shm-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --shm-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --shm-pop:0 24px 60px rgba(60,40,25,.20),0 6px 18px rgba(120,80,50,.10);
  --shm-accent-sh:0 5px 14px rgba(231,61,37,.28);
  --shm-ring:0 0 0 3px var(--shm-accent-soft);
  --shm-tr:.16s cubic-bezier(.2,.7,.3,1);
  --shm-scrim:rgba(35,25,18,.40);
}

/* ---------------------------------------------------------------------------
   Tokens (Dark)
   --------------------------------------------------------------------------- */
[data-theme="dark"] dialog.modal,
[data-theme="dark"] dialog.modal-dialog,
[data-theme="dark"] dialog.dialog{
  --shm-accent:#F2543B; --shm-accent-700:#E0432B; --shm-accent-600:#EC4A30;
  --shm-accent-soft:rgba(242,84,59,.16); --shm-accent-line:rgba(242,84,59,.30);
  --shm-honey:#E6AE4A; --shm-honey-soft:rgba(230,174,74,.16);
  --shm-ok:#3BC07A; --shm-ok-soft:rgba(59,192,122,.15);
  --shm-warn:#E5A33C; --shm-warn-soft:rgba(229,163,60,.15);
  --shm-info:#5C8FE8; --shm-info-soft:rgba(92,143,232,.16);
  --shm-violet:#9D82E6; --shm-violet-soft:rgba(157,130,230,.16);
  --shm-bg:#15120F; --shm-surface:#1E1A16; --shm-surf-2:#241F1A; --shm-surf-3:#2C2620;
  --shm-ink:#F6F1EC; --shm-text:#E2D8CE; --shm-text-2:#B3A99E; --shm-muted:#8C8175;
  --shm-border:#2E2822; --shm-border-2:#3A332B; --shm-field:#241F1A;
  --shm-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --shm-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --shm-pop:0 24px 60px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.4);
  --shm-accent-sh:0 5px 14px rgba(242,84,59,.30);
  --shm-ring:0 0 0 3px var(--shm-accent-soft);
  --shm-scrim:rgba(0,0,0,.55);
}

/* ===========================================================================
   1) Modal-Schale + Scrim
   =========================================================================== */
dialog.modal,
dialog.modal-dialog,
dialog.dialog{
  border:1px solid var(--shm-border);
  border-radius:var(--shm-r-lg);
  background:var(--shm-surface);
  color:var(--shm-text);
  box-shadow:var(--shm-pop);
  padding:0;
  font-family:var(--shm-font-body);
  overflow:hidden;
}

/* Scrim (Backdrop) — warmer, weicher Schleier mit Blur */
dialog.modal::backdrop,
dialog.modal-dialog::backdrop,
dialog.dialog::backdrop{
  background:var(--shm-scrim);
  -webkit-backdrop-filter:blur(3px) saturate(.9);
  backdrop-filter:blur(3px) saturate(.9);
}
/* Login-Overlay bleibt heller (Markup gibt eigene Backdrop-Farbe vor); nur Radius/Blur dazu */
[data-theme="dark"] dialog.modal.login-modal::backdrop{
  background:rgba(10,8,6,.85);
}

/* sanftes Auftauchen — rein dekorativ, keine Funktionsänderung */
@keyframes shm-pop-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  dialog.modal[open],
  dialog.modal-dialog[open],
  dialog.dialog[open]{ animation:shm-pop-in .18s cubic-bezier(.2,.7,.3,1) both; }
}

/* ===========================================================================
   2) Inneres Panel / Form-Wrapper
   =========================================================================== */
dialog.modal > .panel,
dialog.modal > form > .panel{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:22px 24px;
}
dialog.modal > .panel:hover,
dialog.modal > form > .panel:hover{ box-shadow:none; }

/* Padding für die JS-Dialog-Form-Schale */
dialog.dialog > form,
dialog.modal-dialog > form{ background:transparent; }

/* ===========================================================================
   3) Kopfzeile  (header>h2  /  .modal-header  /  .panel h2)
   =========================================================================== */
dialog.modal > form > header,
dialog.dialog > form > header,
dialog.modal-dialog > form > header,
dialog.modal > header,
dialog.dialog > header,
dialog.modal-dialog > header,
dialog.modal .modal-header,
dialog.dialog .modal-header{
  padding:20px 24px 14px;
  border-bottom:1px solid var(--shm-border);
  background:var(--shm-surf-2);
}
dialog.modal > form > header h1,
dialog.modal > form > header h2,
dialog.dialog > form > header h2,
dialog.modal-dialog > form > header h2,
dialog.modal > header h2,
dialog.dialog > header h2,
dialog.modal-dialog > header h2,
dialog.modal .panel > h2:first-child,
dialog.modal .modal-header h2,
dialog.dialog .modal-header h2,
dialog.modal-dialog > form > h2:first-child,
dialog.dialog > form > h2:first-child{
  font-family:var(--shm-font-head);
  font-size:18px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--shm-ink);
  margin:0;
  line-height:1.25;
}

/* Bare <h2> direkt in der Form (Abwesenheits-Dialoge u.a.) als Kopfzeile rahmen */
dialog.modal-dialog > form > h2:first-child,
dialog.dialog > form > h2:first-child{
  padding:20px 24px 14px;
  border-bottom:1px solid var(--shm-border);
  background:var(--shm-surf-2);
}

/* Body bekommt nach gestyltem Header wieder Luft */
dialog.dialog > form > .dialog-body,
dialog.modal-dialog > form > .dialog-body,
dialog.modal > form > .dialog-body{
  padding:20px 24px;
}
dialog.dialog .dialog-body,
dialog.modal-dialog .dialog-body{
  color:var(--shm-text);
}

/* Überschriften 2./3. Ebene im Modal */
dialog.modal .panel h3,
dialog.dialog h3,
dialog.modal-dialog h3{
  color:var(--shm-muted);
  font-weight:600;
}

/* ===========================================================================
   4) Abschnitte / Sub-Überschrift / Divider
   =========================================================================== */
dialog.modal .modal-section,
dialog.dialog .modal-section{
  padding:18px 24px;
  border-top:1px solid var(--shm-border);
}
dialog.modal .modal-subhead,
dialog.dialog .modal-subhead,
dialog.modal-dialog .modal-subhead{
  font-family:var(--shm-font-head);
  font-size:13.5px;
  font-weight:700;
  color:var(--shm-ink);
  letter-spacing:-.005em;
}
dialog.modal .modal-divider,
dialog.dialog .modal-divider,
dialog.modal-dialog .modal-divider{
  background:var(--shm-border);
  height:1px;
  border:0;
}

/* ===========================================================================
   5) Felder im Modal  (input/select/textarea + .field-row)
   =========================================================================== */
dialog.modal input[type="text"],
dialog.modal input[type="email"],
dialog.modal input[type="password"],
dialog.modal input[type="number"],
dialog.modal input[type="date"],
dialog.modal input[type="datetime-local"],
dialog.modal input[type="time"],
dialog.modal input[type="tel"],
dialog.modal input[type="url"],
dialog.modal input[type="search"],
dialog.modal select,
dialog.modal textarea,
dialog.modal-dialog input[type="text"],
dialog.modal-dialog input[type="email"],
dialog.modal-dialog input[type="password"],
dialog.modal-dialog input[type="number"],
dialog.modal-dialog input[type="date"],
dialog.modal-dialog input[type="datetime-local"],
dialog.modal-dialog input[type="time"],
dialog.modal-dialog input[type="tel"],
dialog.modal-dialog input[type="url"],
dialog.modal-dialog select,
dialog.modal-dialog textarea,
dialog.dialog input[type="text"],
dialog.dialog input[type="email"],
dialog.dialog input[type="password"],
dialog.dialog input[type="number"],
dialog.dialog input[type="date"],
dialog.dialog input[type="datetime-local"],
dialog.dialog input[type="time"],
dialog.dialog input[type="tel"],
dialog.dialog input[type="url"],
dialog.dialog input[type="search"],
dialog.dialog select,
dialog.dialog textarea{
  background:var(--shm-surface);
  border:1px solid var(--shm-border-2);
  border-radius:var(--shm-r-sm);
  color:var(--shm-ink);
  transition:border-color var(--shm-tr),box-shadow var(--shm-tr);
}
dialog.modal input::placeholder,
dialog.modal textarea::placeholder,
dialog.modal-dialog input::placeholder,
dialog.modal-dialog textarea::placeholder,
dialog.dialog input::placeholder,
dialog.dialog textarea::placeholder{ color:var(--shm-muted); }

dialog.modal input:focus,
dialog.modal select:focus,
dialog.modal textarea:focus,
dialog.modal-dialog input:focus,
dialog.modal-dialog select:focus,
dialog.modal-dialog textarea:focus,
dialog.dialog input:focus,
dialog.dialog select:focus,
dialog.dialog textarea:focus{
  outline:none;
  border-color:var(--shm-accent);
  box-shadow:var(--shm-ring);
}

/* Feld-Label-Optik */
dialog.modal .field-label > span:first-child,
dialog.dialog .field-label > span:first-child,
dialog.modal-dialog .field-label > span:first-child,
dialog.modal label,
dialog.dialog .dialog-body label,
dialog.modal-dialog .dialog-body label{
  color:var(--shm-text-2);
  font-weight:600;
}
dialog.modal .field-label .req,
dialog.dialog .field-label .req,
dialog.modal-dialog .field-label .req{ color:var(--shm-accent); }

dialog.modal .hint,
dialog.dialog .hint,
dialog.modal-dialog .hint{ color:var(--shm-muted); }

/* ===========================================================================
   6) Buttons im Modal  (.btn-Familie, additiv überfärbt)
   =========================================================================== */
dialog.modal .btn,
dialog.dialog .btn,
dialog.modal-dialog .btn{
  border-radius:var(--shm-r-pill);
  font-weight:600;
  transition:var(--shm-tr);
}
dialog.modal .btn-primary,
dialog.dialog .btn-primary,
dialog.modal-dialog .btn-primary{
  background:var(--shm-accent);
  border-color:var(--shm-accent);
  color:#fff;
  box-shadow:var(--shm-accent-sh);
}
dialog.modal .btn-primary:hover,
dialog.dialog .btn-primary:hover,
dialog.modal-dialog .btn-primary:hover{
  background:var(--shm-accent-700);
  border-color:var(--shm-accent-700);
  transform:translateY(-1px);
}
dialog.modal .btn-ghost,
dialog.modal .btn-secondary,
dialog.dialog .btn-ghost,
dialog.dialog .btn-secondary,
dialog.modal-dialog .btn-ghost,
dialog.modal-dialog .btn-secondary{
  background:var(--shm-surface);
  border:1px solid var(--shm-border-2);
  color:var(--shm-text);
}
dialog.modal .btn-ghost:hover,
dialog.modal .btn-secondary:hover,
dialog.dialog .btn-ghost:hover,
dialog.dialog .btn-secondary:hover,
dialog.modal-dialog .btn-ghost:hover,
dialog.modal-dialog .btn-secondary:hover{
  border-color:var(--shm-accent);
  color:var(--shm-accent);
  background:var(--shm-accent-soft);
}
dialog.modal .btn-danger,
dialog.dialog .btn-danger,
dialog.modal-dialog .btn-danger{
  background:var(--shm-accent-700);
  border-color:var(--shm-accent-700);
  color:#fff;
}

/* Login-Brand-Mark in der warmen Akzentfarbe */
dialog.modal.login-modal .login-brand-mark{
  background:var(--shm-accent);
  box-shadow:var(--shm-accent-sh);
}
dialog.modal.login-modal .login-brand,
dialog.modal.login-modal .login-panel{
  border-color:var(--shm-border);
}

/* ===========================================================================
   7) Aktions-Leiste am Fuß  (.modal-actions / .dialog-footer)
   =========================================================================== */
dialog.modal .modal-actions,
dialog.dialog .modal-actions,
dialog.modal-dialog .modal-actions,
dialog.dialog > form > .dialog-footer,
dialog.dialog .dialog-footer,
dialog.modal-dialog .dialog-footer{
  margin:0;
  padding:14px 24px;
  border-top:1px solid var(--shm-border);
  background:var(--shm-surf-2);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
/* Wenn die Aktionen direkt im Panel sitzen (kein eigener Footer-Streifen),
   bleibt der schmalere Innen-Abstand erhalten. */
dialog.modal > .panel > .modal-actions,
dialog.modal > form > .panel > .modal-actions{
  margin-top:18px;
  padding:0;
  border-top:none;
  background:transparent;
}

/* ===========================================================================
   8) Review-/Spezialmodale: nur Innen-Panel angleichen (Optik)
   =========================================================================== */
dialog.modal.review-assign-modal .panel,
dialog.modal.review-create-order-modal .panel,
dialog.modal.ai-command-center-dialog .panel{
  background:transparent;
  border:none;
  box-shadow:none;
}

/* ===========================================================================
   9) Scrollbar im Modal (warm)
   =========================================================================== */
dialog.modal::-webkit-scrollbar,
dialog.modal-dialog::-webkit-scrollbar,
dialog.dialog::-webkit-scrollbar,
dialog.modal .dialog-body::-webkit-scrollbar,
dialog.dialog .dialog-body::-webkit-scrollbar{ width:9px;height:9px; }
dialog.modal::-webkit-scrollbar-thumb,
dialog.modal-dialog::-webkit-scrollbar-thumb,
dialog.dialog::-webkit-scrollbar-thumb,
dialog.modal .dialog-body::-webkit-scrollbar-thumb,
dialog.dialog .dialog-body::-webkit-scrollbar-thumb{
  background:var(--shm-border-2);
  border-radius:var(--shm-r-pill);
}


/* ===== gemergt aus sh-redesign-admin.css ===== */
/* =========================================================================
   ServiceHub — Re-Design · Bereich ADMIN  ·  REIN OPTISCH, additiv
   --------------------------------------------------------------------------
   Bereich: System / Administration / Einstellungen + Process-Intelligence +
   Observability + Reports/Auswertungen.

   ECHTE Selektoren (aus internal.js / *-view.js):
     - Admin-Landing / Untermenüs : .admin-cards, .admin-card, .admin-group,
                                     .admin-group-title  (Karten mit h2/h3 + p)
     - Process Intelligence       : .pi-view (Root) → .pi-header, .pi-kpis,
                                     .pi-insight(s), .pi-toggle, .pi-privacy,
                                     .pi-retention, .pi-cleanup, .pi-friction
     - Reports / Auswertungen     : .rpt-container (Root) → .rpt-filters,
                                     .rpt-tabs/.rpt-tab, .rpt-kpi(-row),
                                     .rpt-card, .rpt-chart-card, .rpt-table
     - Observability              : generische .sh-* Klassen ohne eigenen Root →
                                     nur über observability-EINDEUTIGE Attribut-
                                     Anker ([data-obs-tab]) gescoped, damit die
                                     global verwendeten .sh-* NICHT app-weit
                                     umdefiniert werden.

   HARTE REGELN dieser Datei:
   - GENAU diese eine Datei. Kein Markup/JS, keine Felder/Tabs/Buttons entfernt.
   - Nur Farbe / Rahmen / Radius / Schatten / Abstand / Fokus → warmes
     ELMETIC-Token-System (Space Grotesk / Figtree / Space Mono).
   - Tokens lokal auf die Bereichs-Roots gescoped (--sh-*), damit die Datei
     UNABHÄNGIG von der Ladereihenfolge des Token-Fundaments wirkt. Globale
     Basis (.btn/.badge/.input/.data-table/:root-Tokens) wird NICHT neu
     definiert — gehört dem Fundament.
   - Light + Dark ([data-theme="dark"]) nach Token-Vertrag.
   ========================================================================= */



/* =========================================================================
   0) TOKENS — lokal auf die Admin-Bereichs-Roots gescoped (Light)
   ========================================================================= */
.admin-cards,
.admin-group,
.pi-view,
.rpt-container,
[data-obs-tab],
#mainContent .sh-toolbar:has([id^="obsFilter"]) {
  --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-field: #F6F1EB;

  --sh-ink: #231C17;
  --sh-text: #463D35;
  --sh-text-2: #6B6157;
  --sh-muted: #9A8F84;
  --sh-border: #EEE5DC;
  --sh-border-2: #E3D9CE;

  --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-sh-sm: 0 1px 2px rgba(120, 80, 50, .06);
  --sh-sh-md: 0 6px 20px rgba(120, 80, 50, .07), 0 1px 2px rgba(120, 80, 50, .05);
  --sh-sh-lg: 0 18px 44px rgba(120, 80, 50, .14);
  --sh-sh-accent: 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);
}

/* ---------- Tokens (Dark) ---------- */
[data-theme="dark"] .admin-cards,
[data-theme="dark"] .admin-group,
[data-theme="dark"] .pi-view,
[data-theme="dark"] .rpt-container,
[data-theme="dark"] [data-obs-tab],
[data-theme="dark"] #mainContent .sh-toolbar:has([id^="obsFilter"]) {
  --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-field: #241F1A;

  --sh-ink: #F6F1EC;
  --sh-text: #E2D8CE;
  --sh-text-2: #B3A99E;
  --sh-muted: #8C8175;
  --sh-border: #2E2822;
  --sh-border-2: #3A332B;

  --sh-sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sh-md: 0 6px 20px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sh-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --sh-sh-accent: 0 5px 14px rgba(242, 84, 59, .30);
  --sh-ring: 0 0 0 3px var(--sh-accent-soft);
}

/* =========================================================================
   1) ADMIN-LANDING — Karten-Raster (.admin-cards) + Karten (.admin-card)
      + Gruppen (.admin-group / .admin-group-title)
      Nur Optik: weiche warme Flächen, zarte Rahmen, runde Ecken, ruhiger
      Hover. Kein Layout-/Grid-Eingriff über das Bestehende hinaus.
   ========================================================================= */

/* Karten-Grid: gleichmässige warme Abstände (additiv, robustes Raster) */
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 14px;
}

/* Gruppen-Block: linke Akzentkante warm + Titel in Space Grotesk */
.admin-group {
  border-left-color: var(--sh-accent) !important;
  margin-bottom: 22px;
}
.admin-group-title {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.admin-group > .muted {
  color: var(--sh-text-2);
}

/* Karte: warme Oberfläche, weicher Rahmen/Radius/Schatten */
.admin-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-lg);
  box-shadow: var(--sh-sh-sm);
  color: var(--sh-text);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr),
              transform var(--sh-tr), background var(--sh-tr);
  position: relative;
  overflow: hidden;
}
/* feine Akzent-Lasur an der Oberkante */
.admin-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sh-accent), var(--sh-honey));
  opacity: 0;
  transition: opacity var(--sh-tr);
}
.admin-card:hover {
  border-color: var(--sh-accent-line);
  box-shadow: var(--sh-sh-md);
  transform: translateY(-2px);
  background: var(--sh-surface);
}
.admin-card:hover::before {
  opacity: 1;
}
.admin-card:focus-visible {
  outline: none;
  box-shadow: var(--sh-ring);
  border-color: var(--sh-accent);
}
.admin-card h2,
.admin-card h3 {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.admin-card:hover h2,
.admin-card:hover h3 {
  color: var(--sh-accent-700);
}
.admin-card p {
  color: var(--sh-text-2);
  line-height: 1.5;
}

/* =========================================================================
   2) PROCESS INTELLIGENCE  (.pi-view = Root)
   ========================================================================= */
.pi-view {
  font-family: var(--sh-font-body);
  color: var(--sh-text);
}

/* Kopfbereich */
.pi-header__actions {
  gap: .5rem;
}

/* KPI-Kacheln (sh-kpi innerhalb der pi-view) — warm, edel, ruhig */
.pi-view .sh-kpi,
.pi-kpis .sh-kpi {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  padding: 14px 16px;
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
.pi-view .sh-kpi:hover,
.pi-kpis .sh-kpi:hover {
  border-color: var(--sh-accent-line);
  box-shadow: var(--sh-sh-md);
}
.pi-view .sh-kpi__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sh-muted);
}
.pi-view .sh-kpi__value {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.pi-view .sh-kpi__sub {
  color: var(--sh-text-2);
  font-size: .8rem;
}
.pi-view .sh-kpi--accent .sh-kpi__value { color: var(--sh-accent); }
.pi-view .sh-kpi--success .sh-kpi__value,
.pi-view .sh-kpi--ok .sh-kpi__value { color: var(--sh-ok); }
.pi-view .sh-kpi--warning .sh-kpi__value,
.pi-view .sh-kpi--warn .sh-kpi__value { color: var(--sh-warn); }
.pi-view .sh-kpi--danger .sh-kpi__value { color: var(--sh-accent-700); }
.pi-view .sh-kpi--info .sh-kpi__value { color: var(--sh-info); }

/* Tabs der PI-View (sh-tabs, im pi-view-Scope) */
.pi-view .sh-tabs {
  border-bottom: 2px solid var(--sh-border);
}
.pi-view .sh-tabs__btn {
  font-family: var(--sh-font-body);
  font-weight: 600;
  color: var(--sh-text-2);
  border-radius: var(--sh-r-sm) var(--sh-r-sm) 0 0;
  transition: color var(--sh-tr), background var(--sh-tr),
              border-color var(--sh-tr);
}
.pi-view .sh-tabs__btn:hover {
  color: var(--sh-ink);
  background: var(--sh-surf-2);
}
.pi-view .sh-tabs__btn.is-active {
  color: var(--sh-accent);
  border-bottom-color: var(--sh-accent);
}

/* Insight-Karten */
.pi-insights {
  gap: 14px;
}
.pi-insight {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-left: 4px solid var(--sh-border-2);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  padding: 16px 18px;
  transition: box-shadow var(--sh-tr), border-color var(--sh-tr);
}
.pi-insight:hover {
  box-shadow: var(--sh-sh-md);
}
.pi-insight--danger { border-left-color: var(--sh-accent-700); }
.pi-insight--warning { border-left-color: var(--sh-warn); }
.pi-insight--accent { border-left-color: var(--sh-accent); }
.pi-insight--neutral { border-left-color: var(--sh-border-2); }
.pi-insight__title {
  font-family: var(--sh-font-head);
  font-weight: 700;
  color: var(--sh-ink);
  letter-spacing: -.01em;
}
.pi-insight__scope {
  color: var(--sh-muted);
}
.pi-insight__desc {
  color: var(--sh-text);
}
.pi-insight__evidence,
.pi-insight__action {
  color: var(--sh-text-2);
}

/* Reibungs-Chips */
.pi-friction .sh-badge,
.pi-friction .sh-badge--neutral {
  background: var(--sh-surf-2);
  color: var(--sh-text-2);
  border-radius: var(--sh-r-pill);
}

/* Einstellungen / Toggle-Listen / Datenschutz */
.pi-settings,
.pi-privacy {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  padding: 16px 18px;
}
.pi-toggle {
  padding: .5rem .25rem;
  border-radius: var(--sh-r-sm);
  transition: background var(--sh-tr);
}
.pi-toggle:hover {
  background: var(--sh-surf-2);
}
.pi-toggle > span {
  color: var(--sh-text);
  font-weight: 500;
}
.pi-toggle small {
  color: var(--sh-muted);
}
.pi-toggle input[type="checkbox"] {
  accent-color: var(--sh-accent);
  width: 16px;
  height: 16px;
}
.pi-retention,
.pi-cleanup {
  margin-top: .9rem;
  color: var(--sh-text-2);
}
.pi-privacy__yes { color: var(--sh-ok); }
.pi-privacy__no { color: var(--sh-accent-700); }

/* =========================================================================
   3) REPORTS / AUSWERTUNGEN  (.rpt-container = Root)
   ========================================================================= */
.rpt-container {
  font-family: var(--sh-font-body);
  color: var(--sh-text);
}
.rpt-header h1 {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}

/* Filterleiste */
.rpt-filters {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
}
.rpt-input {
  border: 1px solid var(--sh-border-2);
  border-radius: var(--sh-r-sm);
  background: var(--sh-field);
  color: var(--sh-text);
  font-family: var(--sh-font-body);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
.rpt-input:focus {
  outline: none;
  border-color: var(--sh-accent);
  box-shadow: var(--sh-ring);
}
.rpt-date-range {
  color: var(--sh-text-2);
}

/* Tabs */
.rpt-tabs {
  border-bottom: 2px solid var(--sh-border);
}
.rpt-tab {
  font-family: var(--sh-font-body);
  font-weight: 600;
  color: var(--sh-text-2);
  border-radius: var(--sh-r-sm) var(--sh-r-sm) 0 0;
  transition: color var(--sh-tr), background var(--sh-tr),
              border-color var(--sh-tr);
}
.rpt-tab:hover {
  color: var(--sh-ink);
  background: var(--sh-surf-2);
}
.rpt-tab--active {
  color: var(--sh-accent);
  border-bottom-color: var(--sh-accent);
}

/* KPI-Kacheln */
.rpt-kpi-row {
  gap: 14px;
}
.rpt-kpi {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
.rpt-kpi:hover {
  border-color: var(--sh-accent-line);
  box-shadow: var(--sh-sh-md);
}
.rpt-kpi-value {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.rpt-kpi-label {
  color: var(--sh-muted);
  letter-spacing: .05em;
}
.rpt-kpi--success .rpt-kpi-value { color: var(--sh-ok); }
.rpt-kpi--warning .rpt-kpi-value { color: var(--sh-warn); }
.rpt-kpi--danger .rpt-kpi-value { color: var(--sh-accent-700); }

/* Inhalts-/Chart-Karten */
.rpt-card,
.rpt-chart-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-lg);
  box-shadow: var(--sh-sh-sm);
}
.rpt-card h3 {
  font-family: var(--sh-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.rpt-hint {
  color: var(--sh-muted);
}

/* Tabellen (innerhalb Reports) */
.rpt-table th {
  color: var(--sh-muted);
  border-bottom: 2px solid var(--sh-border-2);
  letter-spacing: .04em;
}
.rpt-table td {
  border-bottom: 1px solid var(--sh-border);
  color: var(--sh-text);
}
.rpt-table tbody tr:nth-child(even) {
  background: var(--sh-surf-2);
}
.rpt-table tbody tr:hover {
  background: var(--sh-accent-soft);
}
.rpt-table a {
  color: var(--sh-accent);
  font-weight: 600;
}
.rpt-table a:hover {
  color: var(--sh-accent-700);
}
.rpt-text-right { text-align: right; }
.rpt-table .rpt-text-right,
.rpt-table td.rpt-text-right {
  font-family: var(--sh-font-mono);
}

/* Lade-/Leer-/Fehlerzustände */
.rpt-loading,
.rpt-empty {
  color: var(--sh-muted);
}
.rpt-error {
  color: var(--sh-accent-700);
}

/* =========================================================================
   4) OBSERVABILITY  — generische .sh-* Klassen, NUR über den eindeutigen
      Observability-Anker [data-obs-tab] / #obsFilter* gescoped, damit die
      global verwendeten .sh-* nicht app-weit verändert werden.
   ========================================================================= */

/* Tab-Leiste (jeder Button trägt data-obs-tab) */
.sh-tabs:has([data-obs-tab]) {
  border-bottom: 2px solid var(--sh-border);
}
.sh-tabs__btn[data-obs-tab] {
  font-family: var(--sh-font-body);
  font-weight: 600;
  color: var(--sh-text-2);
  border-radius: var(--sh-r-sm) var(--sh-r-sm) 0 0;
  transition: color var(--sh-tr), background var(--sh-tr),
              border-color var(--sh-tr);
}
.sh-tabs__btn[data-obs-tab]:hover {
  color: var(--sh-ink);
  background: var(--sh-surf-2);
}
.sh-tabs__btn[data-obs-tab].is-active {
  color: var(--sh-accent);
  border-bottom-color: var(--sh-accent);
}

/* Toolbar der Observability (enthält die obs-Filter-Felder) */
#mainContent .sh-toolbar:has([id^="obsFilter"]) {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-r-md);
  box-shadow: var(--sh-sh-sm);
  padding: 12px 14px !important;
}
.sh-input[id^="obsFilter"],
.sh-input#obsAutoRefresh {
  border: 1px solid var(--sh-border-2);
  border-radius: var(--sh-r-sm);
  background: var(--sh-field);
  color: var(--sh-text);
  font-family: var(--sh-font-body);
  transition: border-color var(--sh-tr), box-shadow var(--sh-tr);
}
.sh-input[id^="obsFilter"]:focus,
.sh-input#obsAutoRefresh:focus {
  outline: none;
  border-color: var(--sh-accent);
  box-shadow: var(--sh-ring);
}

/* =========================================================================
   5) RESPONSIVE — Admin-Karten-Raster auf schmalen Schirmen ruhig stapeln
   ========================================================================= */
@media (max-width: 640px) {
  .admin-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}