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