/* ============================================================
   TJ Labs Signal Engine - UI
   Aufbau und Optik an lemlist orientiert: helle Flaeche, schmale
   weisse Sidebar, Karten mit 1px-Rand, Pill-Badges, Slide-over-Detail.

   >>> CI-BLOCK <<<
   Das ist der einzige Ort, an dem die Corporate Identity steht.
   Hex, Font und Logo hier tauschen - der Rest der UI zieht nach.

   Uebernommen von tj-labs.de: die Markenskala (dort als Tailwind-Token
   `brand-50` bis `brand-900`), die Hausschrift Figtree, die Zinc-Graustufen
   und die Wortmarke. Die Werte sind abgelesen, nicht geraten.

   EINE ABWEICHUNG, und die ist Absicht: `--brand-contrast` ist das dunkle
   Braun der Website und nicht Weiss. Weisse Schrift auf #ff7a40 kommt auf ein
   Kontrastverhaeltnis von 2,6:1 und faellt damit durch WCAG AA (verlangt 4,5:1
   fuer Fliesstext, 3:1 fuer Bedienelemente). Das Braun #5a2a15 liegt bei
   4,6:1 - und die Website selbst benutzt es als Textfarbe. Beschriftungen auf
   orangen Flaechen waeren sonst in dieser Oberflaeche, in der man Zahlen
   liest, schlecht lesbar.
   ============================================================ */
:root {
  /* --- CI: Farben (tj-labs.de) --- */
  --brand:            #ff7a40;   /* brand-500: Buttons, aktive Navigation */
  --brand-strong:     #e6653a;   /* brand-600: Hover-Zustand */
  --brand-soft:       #fff7ed;   /* brand-50: Flaeche hinter aktiver Navigation */
  --brand-contrast:   #5a2a15;   /* Schrift auf Primaerfarbe, siehe Hinweis oben */
  /* Markenfarbe als SCHRIFT auf hellem Grund. Dasselbe Orange waere hier
     unlesbar: #ff7a40 auf #fff7ed ergibt 2,4:1. brand-700 kommt auf 4,9:1 und
     ist derselbe Farbton, nur tiefer. Flaeche bleibt --brand, Schrift wird
     --brand-ink - das ist die Trennung, die eine helle Markenfarbe braucht. */
  --brand-ink:        #c2410c;   /* brand-700 */
  /* Die Website hat nur EINEN Markenton. Der Akzent (Heat, Kombi-Treffer) ist
     darum das tiefere brand-700 statt einer erfundenen zweiten Farbe: Hitze
     liest sich als intensiveres Orange und bleibt in der Palette. */
  --accent:           #c2410c;   /* brand-700 */
  --accent-soft:      #ffedd5;   /* brand-100 */

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

  /* --- CI: Logo ---
     Die Wortmarke von tj-labs.de gibt es als eine Datei, und die ist fuer
     dunklen Grund gemacht: "TJ" in Orange, "LABS" in Weiss. Auf der hellen
     Flaeche dieser Oberflaeche waere die Haelfte unsichtbar. Verwendet wird
     deshalb die Marke allein (aus derselben Datei freigestellt, unveraendert
     in der Farbe), der Name steht daneben als Text. Gibt es eine Fassung fuer
     hellen Grund, kommt sie hier rein. */
  --logo-mark-url: url("/logo-mark.png");

  /* --- Flaechen & Linien --- */
  --bg:            #fafafa;      /* zinc-50 */
  --surface:       #ffffff;
  --surface-2:     #f4f4f5;      /* zinc-100 */
  --border:        #e4e4e7;      /* zinc-200 */
  --border-strong: #d4d4d8;      /* zinc-300 */

  /* --- Schrift (zinc, wie auf der Website) --- */
  --text:        #18181b;        /* zinc-900 */
  --text-muted:  #52525b;        /* zinc-600 */
  --text-subtle: #a1a1aa;        /* zinc-400 */

  /* --- Semantik --- */
  --pass:      #0f9d58;
  --pass-soft: #e7f6ed;
  --fail:      #d93025;
  --fail-soft: #fdecea;
  --unknown:      #b26b00;
  --unknown-soft: #fff6e5;

  /* --- Form --- */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 20, 28, .05);
  --shadow:    0 4px 14px rgba(16, 20, 28, .08);
  --shadow-lg: 0 16px 48px rgba(16, 20, 28, .16);
  --sidebar-w: 236px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117; --surface: #151b24; --surface-2: #1a212b;
    --border: #232b36; --border-strong: #2f3845;
    --text: #e8eaef; --text-muted: #9aa4b2; --text-subtle: #6e7889;
    /* Im Dunkelmodus kehrt sich die Kontrastlage um: das tiefe brand-700 ist
       auf dunklem Grund zu dunkel, hier traegt das helle Orange (6,6:1 auf der
       weichen Flaeche). Die weiche Flaeche ist ein warmer Braunton statt des
       frueheren Indigo. */
    --brand-soft: #2a1710; --brand-ink: #ff7a40; --accent-soft: #33180a;
    --pass-soft: #10291c; --fail-soft: #2d1513; --unknown-soft: #2b2007;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.5);
    --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg: #0d1117; --surface: #151b24; --surface-2: #1a212b;
  --border: #232b36; --border-strong: #2f3845;
  --text: #e8eaef; --text-muted: #9aa4b2; --text-subtle: #6e7889;
  /* Gleiche Werte wie im Media-Query darueber - Begruendung dort. */
  --brand-soft: #2a1710; --brand-ink: #ff7a40; --accent-soft: #33180a;
  --pass-soft: #10291c; --fail-soft: #2d1513; --unknown-soft: #2b2007;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

/* ---------------- Layout ---------------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 16px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.brand-mark {
  width: 34px; height: 34px; flex: none;
  background-image: var(--logo-mark-url);
  background-repeat: no-repeat; background-position: center;
  background-size: contain;
}
.brand-name { font-weight: 650; letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: var(--text-subtle); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); padding: 14px 8px 6px; font-weight: 600; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--r-sm); color: var(--text-muted); font-weight: 500; text-decoration: none;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.nav a .ico { width: 16px; height: 16px; flex: none; }
.nav a .count { margin-left: auto; font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.sidebar-foot { margin-top: auto; padding: 12px 8px 0; font-size: 11px; color: var(--text-subtle); border-top: 1px solid var(--border); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 14px 24px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.topbar .sub { color: var(--text-subtle); font-size: 12px; }
.topbar .spacer { flex: 1; }
.content { padding: 22px 24px 60px; }

/* ---------------- Bausteine ---------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.card-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.card-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
.card-head .sub { font-size: 12px; color: var(--text-subtle); }
.card-body { padding: 16px; }
.grid { display: grid; gap: 14px; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); font-weight: 600; }
.tile .v { font-size: 26px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.tile .h { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--r-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-weight: 550; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn-sm { padding: 4px 9px; font-size: 12px; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { color: var(--fail); border-color: var(--border-strong); }
.btn-danger:hover { background: var(--fail-soft); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  font-family: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); font-weight: 550; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.filters .grow { flex: 1; min-width: 180px; }

/* ---------------- Tabellen ---------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-subtle); font-weight: 600; padding: 9px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.clickable { cursor: pointer; }
tbody tr.dq { opacity: .55; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { padding: 44px 16px; text-align: center; color: var(--text-subtle); }

.avatar {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 650;
  background: var(--brand-soft); color: var(--brand-ink); overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.lead-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.lead-cell .nm { font-weight: 600; }
.lead-cell .dm { font-size: 12px; color: var(--text-subtle); }

/* ---------------- Badges & Heat ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.badge.pass { background: var(--pass-soft); color: var(--pass); border-color: transparent; }
.badge.fail { background: var(--fail-soft); color: var(--fail); border-color: transparent; }
.badge.unknown { background: var(--unknown-soft); color: var(--unknown); border-color: transparent; }
.badge.brand { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
.badge.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.job { background: var(--brand-soft); color: var(--brand-ink); border-color: transparent; }
.badge.tech { background: #e8f1fe; color: #1558d6; border-color: transparent; }
.badge.growth { background: var(--pass-soft); color: var(--pass); border-color: transparent; }
.badge.intent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.negative { background: var(--fail-soft); color: var(--fail); border-color: transparent; }
.badge-row { display: flex; flex-wrap: wrap; gap: 4px; }

.heat { display: flex; align-items: center; gap: 8px; min-width: 104px; }
.heat-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; min-width: 48px; }
.heat-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.heat-val { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13px; width: 32px; text-align: right; }

.pitch {
  margin-top: 6px; padding: 8px 10px; border-left: 2px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px; color: var(--text); font-style: italic;
}

/* ---------------- Slide-over Detail ---------------- */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(16, 20, 28, .4);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 40;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(760px, 94vw);
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  z-index: 50; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; }
.drawer-head h2 { margin: 0; font-size: 16px; font-weight: 650; }
.drawer-body { overflow-y: auto; padding: 18px 20px 40px; flex: 1; }
.drawer-section { margin-bottom: 24px; }
.drawer-section > h3 {
  margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-subtle); font-weight: 650;
}

.gate { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.gate:last-child { border-bottom: none; }
.gate .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gate .dot.pass { background: var(--pass); } .gate .dot.fail { background: var(--fail); } .gate .dot.unknown { background: var(--unknown); }
.gate .gl { font-weight: 550; }
.gate .gd { margin-left: auto; font-size: 12px; color: var(--text-muted); text-align: right; }

.contrib { font-size: 12px; }
.contrib td { padding: 7px 8px; }
.contrib .bar { height: 4px; border-radius: 2px; background: var(--brand); display: block; }
.contrib .bar.neg { background: var(--fail); }
.decay { font-variant-numeric: tabular-nums; color: var(--text-muted); }

.kv { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--text-subtle); }
.kv dd { margin: 0; }

.prov { font-size: 11px; color: var(--text-subtle); font-family: var(--font-mono); }
.timeline { border-left: 2px solid var(--border); padding-left: 14px; margin-left: 4px; }
.timeline .ev { position: relative; padding-bottom: 12px; font-size: 12px; }
.timeline .ev::before {
  content: ''; position: absolute; left: -20px; top: 5px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--brand); border: 2px solid var(--surface);
}
.timeline .ev .t { color: var(--text-subtle); font-variant-numeric: tabular-nums; }

.note { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12px; color: var(--text-muted); }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: var(--r);
  box-shadow: var(--shadow-lg); z-index: 90; opacity: 0; transition: all .2s ease; font-size: 13px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.spinner { width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { padding: 40px; text-align: center; color: var(--text-subtle); }

.slider-row { display: flex; align-items: center; gap: 10px; }
.slider-row input[type="range"] { flex: 1; accent-color: var(--brand); }
.slider-row .w { font-variant-numeric: tabular-nums; font-weight: 650; width: 48px; text-align: right; }
.mono { font-family: var(--font-mono); font-size: 12px; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .sidebar .brand { padding: 0 12px 0 4px; }
  .nav { flex-direction: row; }
  .nav-label, .sidebar-foot, .nav a .count { display: none; }
  .content { padding: 16px; }
  .topbar { padding: 12px 16px; }
}

/* Anmeldemaske. Liegt ueber allem, weil ohne Sitzung nichts anderes sinnvoll
   bedienbar ist. */
#anmeldung {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background: var(--bg);
}
.anmelde-karte {
  width: min(360px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-lg);
}