/* ══════════════════════════════════════════════════════════════════════════
   PRethinkable · App-Design-System
   ──────────────────────────────────────────────────────────────────────────
   Eine Datei für alle internen Seiten. Ersetzt die 13 einzeln gepflegten
   :root-Blöcke, die sich über die Zeit auseinandergelebt hatten (mal --soft,
   mal --ink-soft; --accent mal Weiß, mal Grün).

   Aufbau:
     1. Farb-Tokens (Dark + Light)
     2. Alias-Tokens  — alte Namen zeigen auf die neuen, damit bestehendes
                        Seiten-CSS unverändert weiterläuft
     3. Maße, Typo, Bewegung
     4. Basis (Reset, Body, Typo, Scrollbar)
     5. Shell (Topbar mit Gruppen-Dropdowns)
     6. Befehlspalette (⌘K)
     7. Primitives (.card .btn .badge .table .field .toolbar .empty …)

   THEME: Das Attribut data-theme auf <html> wird IMMER vom Bootstrap-Skript
   in _head.html gesetzt (light|dark) — auch bei Systemeinstellung. Deshalb
   braucht dieses Stylesheet keine prefers-color-scheme-Query und die hellen
   Werte stehen nur einmal da.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Farb-Tokens ─────────────────────────────────────────────────────── */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Flächen — von hinten nach vorn */
  --bg:          #0a0e18;
  --surface:     #121826;
  --surface-2:   #0e1420;
  --surface-3:   #1b2334;   /* Hover / hervorgehobene Zeile */
  --overlay:     rgba(4, 8, 20, .72);

  /* Schrift */
  --ink:         #f2f4f8;
  --ink-muted:   #b4bdcd;
  --soft:        #838ea3;
  --ink-faint:   #78839a;

  /* rgb-Kanäle für durchscheinende Flächen und Ränder.
     rgba(var(--fg-rgb), .12) statt rgba(255,255,255,.12) — dadurch kippen
     Trennlinien, Hover-Flächen und Schatten im hellen Theme automatisch mit. */
  --fg-rgb:      255, 255, 255;
  /* Schlagschatten und Verdunklungsflächen sind zwei verschiedene Dinge und
     brauchen im hellen Theme verschiedene Antworten: ein Schatten wird dort
     weich und grau, ein Modal-Hintergrund muss dunkel bleiben, sonst dimmt er
     nicht mehr. Im dunklen Theme fallen beide zusammen. */
  --shadow-rgb:  0, 0, 0;
  --scrim-rgb:   0, 0, 0;
  /* Glanzkante oben auf Karten — bleibt in beiden Themes weiß. Auf einer
     hellen Karte ist sie damit schlicht unsichtbar, statt als dunkle Linie
     aufzufallen. */
  --hilite-rgb:  255, 255, 255;

  --line:        rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .26);

  /* Akzent — dieselbe Marke wie prethinkable.com.
     Die Vollton-Schaltflächen waren vorher weiß (mehrere Seiten definierten
     --accent als #ffffff). Weiß auf Weiß funktioniert im hellen Theme nicht,
     deshalb tragen sie jetzt die Markenfarbe. Wer das dunkle Theme wieder
     weiß haben will, ändert genau diese zwei Zeilen:
       --accent: #ffffff;  --accent-ink: #07121f; */
  --accent:      #22c55e;
  --accent-hov:  #34d777;
  --accent-ink:  #04140a;   /* Schrift auf Akzentfläche */
  --accent-bg:   rgba(34, 197, 94, .14);
  --accent-line: rgba(34, 197, 94, .38);

  /* Semantik */
  --good:        #4ade80;
  --good-bg:     rgba(74, 222, 128, .14);
  --mid:         #f59e0b;
  --mid-bg:      rgba(245, 158, 11, .14);
  --bad:         #ef4444;
  --bad-bg:      rgba(239, 68, 68, .14);
  --info:        #38bdf8;
  --info-bg:     rgba(56, 189, 248, .14);
  --purple:      #a78bfa;
  --purple-bg:   rgba(167, 139, 250, .14);

  /* Lead-Status — vier Zwischenstufen des Trichters (Neu … Angebot) tragen
     bewusst denselben neutralen Ton statt vier verschiedener Farben: sie sind
     Positionen im selben Ablauf, keine vier verschiedenen Dinge. Farbe bleibt
     dort, wo sie etwas bedeutet — gewonnen (Grün) und abgelehnt (gedämpft). */
  --s-neu:       var(--soft);
  --s-kontakt:   var(--soft);
  --s-termin:    var(--soft);
  --s-angebot:   var(--soft);
  --s-kunde:     #4ade80;
  --s-nein:      #6b7383;

  /* Priorität — "Hoch" bleibt die eine Alarmfarbe, der Rest ist neutral. */
  --prio-hoch:    #ef4444;
  --prio-mittel:  var(--soft);
  --prio-niedrig: var(--soft);

  /* Fläche unter weißer Schrift: --bad selbst käme nur auf 3,76:1. */
  --alert:       #dc2626;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #f4f6f9;
  --surface:     #ffffff;
  /* Eine Spur heller als naheliegend: auf #eef1f5 rutschten Akzent-,
     Warn- und Sekundärtext auf 4,42:1 und damit knapp unter die
     Lesbarkeitsschwelle. */
  --surface-2:   #f1f4f8;
  --surface-3:   #e4e9f0;
  --overlay:     rgba(18, 24, 38, .38);

  --ink:         #101722;
  --ink-muted:   #3d4756;
  --soft:        #5c6675;
  --ink-faint:   #667080;

  --fg-rgb:      16, 23, 34;
  --shadow-rgb:  100, 116, 139;   /* weicher Grauschatten statt harter Kante */
  --scrim-rgb:   12, 17, 26;      /* Modal-Hintergrund dimmt auch hier */
  --hilite-rgb:  255, 255, 255;

  --line:        rgba(16, 23, 34, .13);
  --line-strong: rgba(16, 23, 34, .26);

  /* Auf Weiß braucht Grün mehr Tiefe, sonst trägt es keinen Text. */
  --accent:      #15803d;
  --accent-hov:  #166534;
  --accent-ink:  #ffffff;
  --accent-bg:   rgba(21, 128, 61, .11);
  --accent-line: rgba(21, 128, 61, .34);

  --good:        #15803d;
  --good-bg:     rgba(21, 128, 61, .11);
  --mid:         #b45309;
  --mid-bg:      rgba(180, 83, 9, .11);
  --bad:         #c81e1e;
  --bad-bg:      rgba(200, 30, 30, .10);
  --info:        #0369a1;
  --info-bg:     rgba(3, 105, 161, .10);
  --purple:      #7c3aed;
  --purple-bg:   rgba(124, 58, 237, .10);

  --s-neu:       var(--soft);
  --s-kontakt:   var(--soft);
  --s-termin:    var(--soft);
  --s-angebot:   var(--soft);
  --s-kunde:     #15803d;
  --s-nein:      #767f8e;

  --prio-hoch:    #c81e1e;
  --prio-mittel:  var(--soft);
  --prio-niedrig: var(--soft);

  --alert:       #c81e1e;

  --shadow-sm: 0 1px 2px rgba(16, 23, 34, .07);
  --shadow-md: 0 6px 20px rgba(16, 23, 34, .10);
  --shadow-lg: 0 18px 48px rgba(16, 23, 34, .16);
}

/* ── 2. Alias-Tokens ────────────────────────────────────────────────────────
   Jeder Variablenname, der irgendwo im Seiten-CSS vorkam, zeigt hier auf
   seinen kanonischen Gegenpart. Dadurch konnten die :root-Blöcke aus den
   Seiten entfernt werden, ohne eine einzige var()-Verwendung anzufassen. */

:root {
  --ink-soft:    var(--soft);
  --surface2:    var(--surface-2);
  --s2:          var(--surface-2);
  --amber:       var(--mid);
  --green:       var(--good);
  --leo:         var(--info);      /* Partner-Chat "Leo" */
  --accent-soft: var(--accent-bg);
}

/* ── 3. Maße, Typo, Bewegung ───────────────────────────────────────────── */

:root {
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shell-h: 54px;          /* Höhe der Topbar */
  --page-w:  1240px;        /* eine Inhaltsbreite für alle Seiten */
  --page-pad: 26px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .14s;
  --t-base: .22s;
}

/* ── 4. Basis ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Wechselt der Nutzer das Theme, sollen Flächen weich überblenden statt zu
   springen. Beim ersten Laden ist die Klasse noch nicht gesetzt, sonst würde
   die Seite sichtbar von Dark nach Light kriechen. */
html.theme-anim,
html.theme-anim body,
html.theme-anim .card,
html.theme-anim .app-shell {
  transition: background-color .28s ease, border-color .28s ease;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(23px, 2.7vw, 30px); font-weight: 300; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

a { color: inherit; }
code, pre, kbd { font-family: var(--mono); }

::selection { background: var(--accent-bg); color: var(--ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scrollleisten passen sich dem Theme an — sonst klebt im hellen Modus eine
   dunkle Leiste am Rand. */
* { scrollbar-color: rgba(var(--fg-rgb), .22) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(var(--fg-rgb), .18);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--fg-rgb), .3); background-clip: content-box; }

/* Einheitliche Seitenbreite. Bestehende .wrap-Regeln der Seiten überschreiben
   das noch lokal; wo sie entfernt wurden, greift dieser Wert. */
.page, .wrap {
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 26px var(--page-pad) 72px;
}
.page--wide  { max-width: 1600px; }
.page--narrow { max-width: 860px; }

.page-head { margin-bottom: 24px; }
.page-head h1 { text-wrap: balance; }
.page-head p { margin: 6px 0 0; color: var(--soft); font-size: 13.5px; }

/* ══ 5. Shell ══════════════════════════════════════════════════════════════
   Vier Gruppen statt zehn gleichrangiger Ziele. Die Gruppe, in der die
   aktuelle Seite liegt, ist markiert — man sieht also immer, wo man steckt,
   auch wenn das Menü zu ist. */

.app-shell {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; gap: 10px;
  height: var(--shell-h);
  padding: 0 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.shell-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; flex-shrink: 0;
  padding: 6px 8px; margin-left: -8px; border-radius: var(--radius-sm);
}
.shell-brand:hover { background: rgba(var(--fg-rgb), .06); }
.shell-brand span { color: var(--soft); font-weight: 400; }
.shell-mark {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

/* Breadcrumb: ersetzt das alte nav_subtitle und funktioniert jetzt auf jeder
   Seite, nicht nur auf /analyse. */
.shell-crumb {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13px; color: var(--soft);
}
.shell-crumb-sep { color: var(--ink-faint); }
.shell-crumb-up {
  color: var(--soft); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color var(--t-fast), border-color var(--t-fast);
}
.shell-crumb-up:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.shell-crumb-now {
  color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.shell-groups { display: flex; align-items: center; gap: 2px; margin-left: 6px; }

.shell-group { position: relative; }

.shell-group-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 11px;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--soft); background: none; border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.shell-group-btn:hover { color: var(--ink); background: rgba(var(--fg-rgb), .07); }
.shell-group-btn .caret {
  width: 9px; height: 9px; flex-shrink: 0; opacity: .55;
  transition: transform var(--t-base) var(--ease);
}
.shell-group.open .shell-group-btn { color: var(--ink); background: rgba(var(--fg-rgb), .09); }
.shell-group.open .shell-group-btn .caret { transform: rotate(180deg); }

/* Die Gruppe, in der die aktuelle Seite liegt — sichtbar, ohne dass man das
   Menü aufklappen muss. */
.shell-group-btn.here { color: var(--ink); }
.shell-group-btn.here::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

/* Zähler an der Gruppe, solange sie zu ist — offene Aufgaben bleiben so
   sichtbar, ohne dass man das Menü aufklappen muss. */
.shell-group-count {
  min-width: 16px; height: 16px; padding: 0 4px;
  display: none; align-items: center; justify-content: center;
  background: var(--alert); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: var(--radius-pill);
}
.shell-group-count.on { display: inline-flex; }

.shell-menu {
  position: absolute; top: calc(100% + 7px); left: 0;
  min-width: 246px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity var(--t-fast) ease, transform var(--t-base) var(--ease),
              visibility var(--t-fast);
}
.shell-group.open .shell-menu { opacity: 1; visibility: visible; transform: none; }

.shell-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--ink-muted); text-decoration: none; font-size: 13.5px;
  transition: background var(--t-fast), color var(--t-fast);
}
.shell-menu-item:hover,
.shell-menu-item:focus-visible { background: rgba(var(--fg-rgb), .07); color: var(--ink); }
.shell-menu-item.active { color: var(--ink); font-weight: 600; background: var(--accent-bg); }
.shell-menu-item .mi-ico {
  width: 17px; height: 17px; flex-shrink: 0; opacity: .8;
}
.shell-menu-item.active .mi-ico { opacity: 1; color: var(--accent); }
.shell-menu-item .mi-text { flex: 1; min-width: 0; }
.shell-menu-item .mi-desc {
  display: block; font-size: 11.5px; font-weight: 400;
  color: var(--soft); line-height: 1.35; margin-top: 1px;
}
.shell-menu-item .mi-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: none; align-items: center; justify-content: center;
  background: var(--alert); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  border-radius: var(--radius-pill); flex-shrink: 0;
}
.shell-menu-item .mi-count.on { display: inline-flex; }

.shell-menu-sep { height: 1px; margin: 5px 8px; background: var(--line); }

.shell-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }

.shell-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px 0 11px; min-width: 168px;
  font: inherit; font-size: 12.5px; color: var(--soft);
  background: rgba(var(--fg-rgb), .05);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.shell-search:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(var(--fg-rgb), .08); }
.shell-search .s-ico { width: 14px; height: 14px; flex-shrink: 0; }
.shell-search .s-label { flex: 1; }
/* Bei 10,5px auf getönter Fläche reicht --soft nicht (gemessen 3,3:1) —
   das Kürzel steht auf --ink-muted. */
.shell-search kbd {
  font-size: 10.5px; font-weight: 600; color: var(--ink-muted);
  background: rgba(var(--fg-rgb), .08); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 5px; line-height: 1;
}

.shell-icon-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--soft); background: none;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.shell-icon-btn:hover { color: var(--ink); background: rgba(var(--fg-rgb), .08); }
.shell-icon-btn svg { width: 16px; height: 16px; }

/* Im Dark-Theme zeigt der Umschalter die Sonne (= "hier klicken für hell"),
   im Light-Theme den Mond. */
.theme-toggle .ico-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

.shell-burger { display: none; }

/* ── Shell · schmale Fenster ─────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .shell-search { min-width: 0; padding: 0 9px; }
  .shell-search .s-label, .shell-search kbd { display: none; }
}

@media (max-width: 900px) {
  .shell-crumb { display: none; }
}

@media (max-width: 820px) {
  .app-shell { padding: 0 12px; }

  .shell-burger {
    display: inline-flex; order: 9;
  }

  /* Die vier Gruppen werden zu einem Panel, das unter der Leiste aufklappt.
     Kein Akkordeon mehr: alle Ziele stehen sofort da, nach Gruppen sortiert. */
  .shell-groups {
    position: fixed; top: var(--shell-h); left: 0; right: 0;
    max-height: calc(100dvh - var(--shell-h));
    overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 10px 12px 22px;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--t-fast) ease, transform var(--t-base) var(--ease),
                visibility var(--t-fast);
    /* WICHTIG: pointer-events, nicht nur visibility.

       visibility vererbt sich zwar, lässt sich vom Kind aber überschreiben —
       und genau das tut .shell-menu weiter unten (visibility: visible), damit
       im aufgeklappten Panel alle Einträge dastehen. Folge: das ZUGEKLAPPTE
       Panel war zwar durchsichtig (opacity: 0 wirkt auf den ganzen Teilbaum),
       seine Links waren aber weiterhin anklickbar. Auf einem 390×844-Handy
       lag dieser unsichtbare Block über 790 px der Seite: fast jeder Tipp auf
       eine Karte, einen Filter oder einen Knopf landete in Wahrheit auf einem
       Menüpunkt und sprang auf /generator oder /analyse.

       pointer-events lässt sich von Kindern zwar auch überschreiben, tut es
       hier aber nirgends — und der Zustand hängt so an einer Stelle, die man
       beim Lesen der Regel sieht. */
    pointer-events: none;
  }
  .app-shell.nav-open .shell-groups {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  }

  .shell-group-btn {
    width: 100%; justify-content: flex-start; height: auto;
    padding: 14px 8px 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-faint);
    pointer-events: none;   /* auf Mobil sind es Überschriften, keine Schalter */
  }
  .shell-group-btn .caret { display: none; }
  .shell-group-btn.here::after { display: none; }
  .shell-group-btn.here { color: var(--accent); }

  .shell-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0; background: none; border: none; box-shadow: none;
  }
  .shell-menu-item { padding: 11px 10px; font-size: 15px; }
  .shell-menu-sep { display: none; }
}

/* ══ 6. Befehlspalette (⌘K) ═══════════════════════════════════════════════
   Löst die Attrappe ab, die von jeder Seite außer /admin nur nach
   /admin?cmdk=1 gesprungen ist. Sucht jetzt überall Seiten, Leads, Kunden
   und Aktionen. */

.cmdk-back {
  position: fixed; inset: 0; z-index: 900;
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cmdk-back.open { display: flex; }

.cmdk {
  width: 100%; max-width: 580px; max-height: 62vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: cmdk-in .18s var(--ease);
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

.cmdk-field {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.cmdk-field svg { width: 17px; height: 17px; color: var(--soft); flex-shrink: 0; }
.cmdk-field input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: 15.5px; color: var(--ink);
}
.cmdk-field input::placeholder { color: var(--ink-faint); }
.cmdk-field .cmdk-esc {
  font-size: 10.5px; font-weight: 600; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; line-height: 1;
}

.cmdk-list { overflow-y: auto; padding: 6px; flex: 1; overscroll-behavior: contain; }

.cmdk-group {
  padding: 10px 10px 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint);
}

.cmdk-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--ink-muted); text-decoration: none; cursor: pointer;
  scroll-margin: 8px;
}
.cmdk-item .ci-ico { width: 16px; height: 16px; flex-shrink: 0; opacity: .75; }
.cmdk-item .ci-main { flex: 1; min-width: 0; }
.cmdk-item .ci-title { display: block; font-size: 13.5px; color: var(--ink); }
.cmdk-item .ci-sub {
  display: block; font-size: 11.5px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-item .ci-tag {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px;
  border-radius: var(--radius-pill); background: rgba(var(--fg-rgb), .08);
  color: var(--soft); flex-shrink: 0;
}
.cmdk-item[aria-selected="true"] { background: var(--accent-bg); }
.cmdk-item[aria-selected="true"] .ci-ico { opacity: 1; color: var(--accent); }

.cmdk-empty { padding: 30px 16px; text-align: center; color: var(--ink-faint); font-size: 13px; }

.cmdk-foot {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  padding: 9px 16px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-faint);
}
.cmdk-foot kbd {
  font-size: 10px; background: rgba(var(--fg-rgb), .08);
  border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px;
}

/* ══ 7. Primitives ════════════════════════════════════════════════════════ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.card--flush { padding: 0; overflow: hidden; }
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.card-head h2, .card-head h3 { flex: 1; min-width: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--ink); background: rgba(var(--fg-rgb), .06);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background: rgba(var(--fg-rgb), .11); border-color: var(--line-strong); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }

.btn--primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-hov); border-color: var(--accent-hov); }

.btn--ghost { background: none; border-color: transparent; color: var(--soft); }
.btn--ghost:hover { background: rgba(var(--fg-rgb), .07); color: var(--ink); }

.btn--danger { color: var(--bad); border-color: var(--bad-bg); background: var(--bad-bg); }
.btn--danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn--lg { height: 40px; padding: 0 18px; font-size: 14px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
  background: rgba(var(--fg-rgb), .08); color: var(--soft);
}
.badge--good   { background: var(--good-bg);   color: var(--good); }
.badge--mid    { background: var(--mid-bg);    color: var(--mid); }
.badge--bad    { background: var(--bad-bg);    color: var(--bad); }
.badge--info   { background: var(--info-bg);   color: var(--info); }
.badge--accent { background: var(--accent-bg); color: var(--accent); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soft);
}
.input, .field input, .field select, .field textarea {
  width: 100%; padding: 9px 11px;
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent-line); background: var(--surface);
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; padding: 9px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--soft);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: rgba(var(--fg-rgb), .035); }

/* Breite Tabellen scrollen in sich, statt die Seite zu verbreitern. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar .spacer { flex: 1; }

.empty {
  padding: 44px 20px; text-align: center;
  color: var(--ink-faint); font-size: 13.5px;
}

.muted { color: var(--soft); }
.faint { color: var(--ink-faint); }
.mono  { font-family: var(--mono); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}