/* === Vendors module styles ============================================
 * Most styles reuse customers.css (.cust-card, .cust-grid, etc.).
 * Only the vendor-specific bits live here.
 * ===================================================================== */

/* ─── Type filter strip (below toolbar) ──────────────────────────── */
.vend-type-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-5);
  margin-top: calc(var(--s-5) * -1 + var(--s-2));
  padding-top: var(--s-3);
  padding-bottom: 2px;
}

/* ─── Color-coded type tags on cards ─────────────────────────────── */
.vend-type-tag--primary  { background: var(--primary-tint); color: var(--primary-deep); }
.vend-type-tag--coral    { background: var(--coral-tint);   color: var(--coral); }
.vend-type-tag--indigo   { background: var(--info-tint);    color: var(--indigo); }
.vend-type-tag--amber    { background: var(--amber-tint);   color: var(--amber-lo); }
.vend-type-tag--rose     { background: var(--rose-tint);    color: var(--rose); }
.vend-type-tag--purple   { background: var(--purple-tint);  color: var(--purple); }
.vend-type-tag--pink     { background: var(--pink-tint);    color: var(--pink); }
.vend-type-tag--neutral  { background: var(--surface-2);    color: var(--t2); }

/* ─── Type-filter pills (color-coded ring on active) ─────────────── */
.cust-pill--type-primary.is-active  { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-deep); }
.cust-pill--type-coral.is-active    { background: var(--coral-tint);   border-color: var(--coral);   color: var(--coral); }
.cust-pill--type-indigo.is-active   { background: var(--info-tint);    border-color: var(--indigo);  color: var(--indigo); }
.cust-pill--type-amber.is-active    { background: var(--amber-tint);   border-color: var(--amber);   color: var(--amber-lo); }
.cust-pill--type-rose.is-active     { background: var(--rose-tint);    border-color: var(--rose);    color: var(--rose); }
.cust-pill--type-purple.is-active   { background: var(--purple-tint);  border-color: var(--purple);  color: var(--purple); }
.cust-pill--type-pink.is-active     { background: var(--pink-tint);    border-color: var(--pink);    color: var(--pink); }
.cust-pill--type-neutral.is-active  { background: var(--surface-2);    border-color: var(--b2);      color: var(--t2); }

/* ─── Ad-platform badge (replaces the green Retainer badge color) ── */
.vend-badge--ad {
  background: var(--coral-tint) !important;
  color: var(--coral) !important;
}