/* =========================================================================
   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"]).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

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