/* ============================================================
   BADGES / PILLS / TAGS
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:var(--space-1);
  min-height:22px; padding:1px var(--space-2);
  border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:var(--fw-medium); line-height:1;
  white-space:nowrap; width:max-content;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; background:currentColor; }
.badge .icon{ width:13px; height:13px; flex:0 0 auto; }
.badge > span{ flex:0 1 auto; }

/* Статусні (заливка-tint + насичений текст) */
.badge--success{ background:var(--success-tint); color:var(--success-text); }
.badge--success .dot{ background:var(--success-base); }
.badge--error{   background:var(--error-tint);   color:var(--error-text); }
.badge--error .dot{ background:var(--error-base); }
.badge--warning{ background:var(--warning-tint); color:var(--warning-text); }
.badge--warning .dot{ background:var(--warning-base); }
.badge--info{    background:var(--info-tint);    color:var(--info-text); }
.badge--info .dot{ background:var(--info-base); }
.badge--neutral{ background:var(--bg-active);    color:var(--text-sub); }
.badge--neutral .dot{ background:var(--text-soft); }
.badge--purple{  background:var(--purple-tint);  color:var(--purple-text); }

/* Виділений (обведення) */
.badge--outline{ background:var(--bg-surface); border:1px solid var(--stroke); color:var(--text-sub); }

/* Лічильник (у навігації / кнопках) */
.badge-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:var(--radius-pill);
  background:var(--bg-active); color:var(--text-sub);
  font-size:var(--text-xs); font-weight:var(--fw-semibold);
}
.badge-count--accent{ background:var(--primary); color:#fff; }
.badge-count--danger{ background:var(--error-base); color:#fff; }   /* «горить» — малиновий лічильник */
.badge-count--dot{ min-width:8px; width:8px; height:8px; padding:0; background:var(--primary); }

/* Лічильник зверху-праворуч іконки — рівне коло, текст по центру, без обідка */
.notif-count{
  position:absolute; top:2px; right:2px;
  width:16px; height:16px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary); color:#fff;
  font-size:9px; font-weight:var(--fw-bold); line-height:1; text-align:center;
  border-radius:50%; border:none;
}

/* PRO / FREE значки */
.tag-mini{
  display:inline-flex; align-items:center;
  height:18px; padding:0 6px; border-radius:var(--radius-sm);
  font-size:10px; font-weight:var(--fw-bold); letter-spacing:.04em; text-transform:uppercase;
}
.tag-mini--pro{ background:var(--primary-tint); color:var(--primary-700); }
.tag-mini--free{ background:var(--bg-active); color:var(--text-sub); }
.tag-mini--new{ background:var(--success-tint); color:var(--success-text); }

/* Видаляємі теги (chips) */
.chip{
  display:inline-flex; align-items:center; gap:var(--space-1);
  height:26px; padding:0 var(--space-2) 0 var(--space-3);
  border-radius:var(--radius-sm);
  background:var(--bg-subtle); border:1px solid var(--stroke);
  font-size:var(--text-sm); color:var(--text-main);
}
.chip__x{ display:inline-flex; color:var(--text-soft); border-radius:var(--radius-sm); }
.chip__x .icon{ width:14px; height:14px; }
.chip__x:hover{ color:var(--text-main); background:var(--bg-active); }