/* DKT KPI + H2H pipeline patterns, Ma Capsule + teal accent (H2H / DKT lineage) */

:root {
  --mkt-teal: #13a6c3;
  --mkt-teal-soft: rgba(19, 166, 195, 0.12);
  --mkt-teal-bar: linear-gradient(90deg, #13a6c3, #4ecdc4);
}

/* DKT-style KPI strip */
.dkt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.dkt-kpi-tile {
  background: var(--card);
  border: 1.5px solid var(--bdr);
  border-radius: var(--r18);
  padding: 16px 18px;
  box-shadow: var(--s1);
  position: relative;
  overflow: hidden;
  transition: var(--tr);
}

.dkt-kpi-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--mkt-teal-bar);
  border-radius: 4px 0 0 4px;
}

.dkt-kpi-tile:hover {
  box-shadow: var(--s2);
}

.dkt-kpi-tile .dkt-kpi-ico {
  font-size: 20px;
  color: var(--mkt-teal);
  margin-bottom: 8px;
}

.dkt-kpi-val {
  font-family: "Syne", sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.dkt-kpi-lbl {
  font-size: 11px;
  font-weight: 800;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
}

/* H2H-style note / composer strip */
.h2h-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--mkt-teal-soft);
  border: 1.5px solid rgba(19, 166, 195, 0.25);
  border-radius: var(--r18);
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.h2h-strip i {
  color: var(--mkt-teal);
  font-size: 18px;
}

/* Pipeline funnel (H2H lists + DKT stats) */
.mkt-pipeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-pipe-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mkt-pipe-label {
  flex: 0 0 120px;
  font-size: 12px;
  font-weight: 700;
  color: var(--t2);
}

.mkt-pipe-bar-wrap {
  flex: 1;
  height: 28px;
  background: var(--bg2);
  border-radius: 10px;
  border: 1px solid var(--bdr);
  overflow: hidden;
}

.mkt-pipe-bar {
  height: 100%;
  background: var(--mkt-teal-bar);
  border-radius: 10px;
  min-width: 4px;
  transition: width 0.35s ease;
}

.mkt-pipe-count {
  flex: 0 0 36px;
  text-align: right;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}

/* Deal stage pills (H2H status) */
.mkt-stage-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mkt-stage-pill.lead {
  background: rgba(139, 92, 246, 0.15);
  color: var(--purple);
}

.mkt-stage-pill.qualified {
  background: rgba(19, 166, 195, 0.18);
  color: #0e7490;
}

.mkt-stage-pill.proposal {
  background: rgba(247, 151, 30, 0.2);
  color: #c2410c;
}

.mkt-stage-pill.negotiation {
  background: rgba(255, 107, 157, 0.18);
  color: #be185d;
}

.mkt-stage-pill.won {
  background: rgba(17, 153, 142, 0.2);
  color: var(--green);
}

.mkt-stage-pill.lost {
  background: rgba(235, 51, 73, 0.15);
  color: var(--rose);
}

/* Activity type icon row */
.mkt-act-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--bg2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mkt-teal);
  flex-shrink: 0;
}

.mkt-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .mkt-two-col {
    grid-template-columns: 1fr;
  }

  .mkt-pipe-label {
    flex: 0 0 90px;
  }
}