/* =========================================================================
   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.
   ========================================================================= */
@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), 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);
}