/* ──────────────────────────────────────────────────────
   deepIng brand theme — override applied AFTER crm-shell.css
   Replaces navy with dark gray, gold accent with brand blue.
   Signal colors (red/yellow/green) reserved for Ampeln only.
   ────────────────────────────────────────────────────── */

:root {
  /* surfaces */
  --bg:        #F1F1F0;
  --bg-2:      #E7E6E3;
  --surface:   #FFFFFF;
  --surface-2: #F7F7F5;

  /* text */
  --ink:       #1F1E1D;
  --ink-2:     #3F3E3D;   /* was navy #1B3A5C — now dark gray */
  --muted:     #605F5E;   /* brand dark gray */
  --muted-2:   #A09F9E;   /* brand light gray */

  /* lines */
  --line:      #DBDAD7;
  --line-2:    #E8E7E5;

  /* primary / accent */
  --primary:   #3F3E3D;   /* topstrip, brand bar — dark gray */
  --primary-2: #5F5E5C;
  --accent:    #3269B4;   /* deepIng brand blue */
  --accent-2:  #2569B8;
  --accent-tint: #D3E1F3;
  --accent-3:  #A7C2E7;
  --accent-4:  #7CA4DA;

  /* WARM replaced with brand blue (gold removed from palette) */
  --warm:      #3269B4;

  /* Signal — ampel only */
  --success:   #5DA953;   /* brand green */
  --warn:      #FDBD1A;   /* brand yellow */
  --danger:    #E34A6B;   /* brand red */
}

/* ─── Sidebar active state ──────────────────────────── */
.nav-item.active {
  background: var(--ink-2);
  color: #fff;
  border-left-color: var(--accent);  /* was warm gold */
}

/* Brand mark: blue + gray instead of blue + gold */
.brand-mark {
  background: linear-gradient(135deg, #3269B4 0%, #6E7191 100%);
}
.brand-mark::after {
  background: var(--primary);
}

/* ─── FAB ──────────────────────────────────────────── */
.fab {
  background: var(--accent);   /* was warm gold */
  box-shadow: 0 6px 16px rgba(50,105,180,.30);
}
.fab:hover { background: var(--accent-2); }

/* ─── AI Daily Briefing card — re-skin in gray + blue ─ */
.ai-brief {
  background: linear-gradient(135deg, #2F2E2D 0%, #3F3E3D 55%, #555350 100%);
  box-shadow: 0 2px 4px rgba(31,30,29,.10);
}
.ai-brief::before {
  background: radial-gradient(circle at center, rgba(50,105,180,.28) 0%, transparent 65%);
}
.ai-brief-glyph {
  background: rgba(50,105,180,.22);
  color: var(--accent-3);
  border: 1px solid rgba(167,194,231,.45);
}

/* AI badge kinds — risk/win keep ampel; nba/signal switch to brand */
.ai-badge.kind-risk   { background: rgba(227,74,107,.22); color: #FFBAC4; border: 1px solid rgba(227,74,107,.45); }
.ai-badge.kind-nba    { background: rgba(50,105,180,.22); color: var(--accent-3); border: 1px solid rgba(50,105,180,.5); }
.ai-badge.kind-signal { background: rgba(110,113,145,.30); color: #C8CADB; border: 1px solid rgba(160,163,189,.5); }
.ai-badge.kind-win    { background: rgba(93,169,83,.22); color: #B6E0AC; border: 1px solid rgba(93,169,83,.55); }

.ai-cta { color: var(--accent-3); }
.ai-cta:hover { color: #fff; }

/* ─── Trend pills — strictly directional indicators ── */
/* Kept Ampel-style because they ARE traffic-light semantics; if
   strictly only health dots should be signaled, comment these out. */
.trend.up   { background: rgba(93,169,83,.10);  color: var(--success); }
.trend.down { background: rgba(227,74,107,.10); color: var(--danger);  }
.trend.flat { background: var(--surface-2);     color: var(--muted);   }

/* ─── Agenda tags — replace gold/green with brand greys ── */
.agenda-tag.call  { background: rgba(50,105,180,.10);  color: var(--accent);   border-color: rgba(50,105,180,.25); }
.agenda-tag.mtg   { background: rgba(124,164,218,.20); color: #2569B8;         border-color: rgba(124,164,218,.45); }
.agenda-tag.task  { background: rgba(110,113,145,.12); color: var(--muted);    border-color: rgba(110,113,145,.30); }
.agenda-tag.email { background: rgba(160,159,158,.15); color: var(--muted);    border-color: var(--line); }

/* ─── Stage pills — neutral scale, no green/gold ─── */
.stage-pill         { background: var(--accent-tint); color: var(--ink-2); }
.stage-pill .dot    { background: var(--accent); }
.stage-pill.qual    { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.stage-pill.qual .dot  { background: var(--muted-2); }
.stage-pill.prop    { background: rgba(50,105,180,.10); color: var(--accent); }
.stage-pill.prop .dot  { background: var(--accent); }
.stage-pill.neg     { background: rgba(110,113,145,.15); color: #4D4F69; }
.stage-pill.neg .dot   { background: #6E7191; }
.stage-pill.close   { background: rgba(63,62,61,.10); color: var(--ink-2); border: 1px solid rgba(63,62,61,.20); }
.stage-pill.close .dot { background: var(--ink-2); }

/* ─── Health dots — the canonical Ampel ──────────── */
.health.g { background: var(--success); }
.health.y { background: var(--warn); }
.health.r { background: var(--danger); }

/* Chip text color in topbar/header */
.chip { background: var(--accent-tint); color: var(--ink-2); border-color: var(--line); }
.chip .x { background: rgba(63,62,61,.18); color: var(--ink-2); }

/* ─── Buttons stay dark gray ──────────────────────── */
.btn { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--accent-tint); }

/* But: inside the dark AI Briefing card, ghost buttons need to stay light */
.ai-brief-actions .btn,
.ai-brief-actions .btn.ghost {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.ai-brief-actions .btn:hover,
.ai-brief-actions .btn.ghost:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* ──────────────────────────────────────────────────────
   AI surfaces — switch hard-coded gold (191,161,104) tints
   to brand-blue (50,105,180) tints
   ────────────────────────────────────────────────────── */

/* Forecast — AI projection in chart */
.fc-ai-band     { fill: var(--accent); fill-opacity: .18; }
.fc-ai-line     { stroke: var(--accent); }
.fc-ai-dot      { fill: var(--accent); }
.fc-ai-lbl      { fill: var(--accent-2); }
.fc-legend .sw.ai-band { background: var(--accent); opacity: .35; }
.fc-legend .sw.ai-line { background: var(--accent); }

/* Forecast — AI projection summary tile */
.fc-tile.ai {
  background: linear-gradient(135deg, rgba(50,105,180,.08), rgba(50,105,180,.02));
  border-color: rgba(50,105,180,.35);
}
.fc-tile.ai::before {
  background: rgba(50,105,180,.18);
  color: var(--accent-2);
}

/* Forecast — AI insight panel */
.ai-insight {
  background: linear-gradient(180deg, rgba(50,105,180,.06), rgba(50,105,180,.01));
  border-color: rgba(50,105,180,.30);
}
.ai-insight .card-hd {
  background: rgba(50,105,180,.06);
  border-bottom-color: rgba(50,105,180,.22);
}
.ai-insight .card-hd h3 { color: var(--accent-2); }
.ai-insight-item .conf {
  background: rgba(50,105,180,.14);
  color: var(--accent-2);
}

/* Forms — AI helper text */
.form-helper.ai {
  color: var(--accent-2);
  background: rgba(50,105,180,.08);
  border-left-color: var(--accent);
}

/* Side panel — AI suggestions card */
.side-card.ai {
  background: linear-gradient(180deg, rgba(50,105,180,.07), rgba(50,105,180,.01));
  border-color: rgba(50,105,180,.30);
}
.side-card.ai .card-hd {
  background: rgba(50,105,180,.07);
  border-bottom-color: rgba(50,105,180,.22);
}
.side-card.ai .card-hd h3 { color: var(--accent-2); }

/* ──────────────────────────────────────────────────────
   Warning surfaces — switch gold tints to signal YELLOW
   (genuine Ampel: yellow = at risk / warning)
   ────────────────────────────────────────────────────── */

.agenda-tag.task {
  background: rgba(253,189,26,.16);
  color: #7A5A0F;
  border-color: rgba(253,189,26,.45);
}

.lc-q-tag.match {
  background: rgba(50,105,180,.10);
  color: var(--accent);
  border-color: rgba(50,105,180,.30);
}

.lc-detail-score {
  background: rgba(50,105,180,.08);
  border-color: rgba(50,105,180,.30);
}
.lc-detail-score .lbl,
.lc-detail-score .v {
  color: var(--accent-2);
}

/* Integrations Hub: warning pill / card */
.health-title .pill.warn {
  background: rgba(253,189,26,.16);
  color: #7A5A0F;
  border-color: rgba(253,189,26,.45);
}
.health-title .pill.warn .dot { background: var(--warn); }

.obj-card.warn { border-left-color: var(--warn); }
.obj-hd .badge.warn {
  background: rgba(253,189,26,.16);
  color: #7A5A0F;
}

/* Customer Journey: service-ticket marker */
.j-event.svc::before {
  background: var(--warn);
  border-color: var(--warn);
}
.j-event-type.tkt { color: #7A5A0F; }

/* Sidebar active border was relabelled to accent earlier — make sure */
.nav-item.active { border-left-color: var(--accent); }

/* Module/section accents using warm in shell still resolve to brand blue */