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

@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 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;
  }
}