/* ============================================================
   BEEZUI — Badge
   ============================================================ */

/* ---- Base ---- */
.bz-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2px;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid transparent;
  box-sizing: border-box;
  vertical-align: middle;
  user-select: none;

  /* default: soft primary */
  background: var(--bz-primary-light);
  color: var(--bz-primary);
  border-color: transparent;
}

/* ---- Sizes ---- */
.bz-badge.bz-badge-xs { height: 16px; font-size: 9px;  padding: 0 5px; }
.bz-badge.bz-badge-sm { height: 18px; font-size: 10px; padding: 0 6px; }
.bz-badge.bz-badge-md { height: 20px; font-size: 11px; padding: 0 8px; } /* default */
.bz-badge.bz-badge-lg { height: 24px; font-size: 12px; padding: 0 10px; gap: 5px; }
.bz-badge.bz-badge-xl { height: 28px; font-size: 13px; padding: 0 12px; gap: 6px; }

/* Pill (fully rounded) */
.bz-badge.bz-badge-pill { border-radius: 99px; }

/* Square (icon-only) */
.bz-badge.bz-badge-sq {
  padding: 0;
  width: 20px;
  justify-content: center;
  border-radius: 4px;
}
.bz-badge.bz-badge-sq.bz-badge-xs { width: 16px; }
.bz-badge.bz-badge-sq.bz-badge-sm { width: 18px; }
.bz-badge.bz-badge-sq.bz-badge-lg { width: 24px; }
.bz-badge.bz-badge-sq.bz-badge-xl { width: 28px; }
.bz-badge.bz-badge-sq.bz-badge-pill { border-radius: 50%; }

/* ================================================================
   SOFT variants (light bg, colored text) — default style
   ================================================================ */
.bz-badge-primary { background: #e8f0fb; color: #1a6fc4; }
.bz-badge-secondary{ background: #f1f5f9; color: #475569; }
.bz-badge-success  { background: #dcfce7; color: #16a34a; }
.bz-badge-warning  { background: #fef3c7; color: #b45309; }
.bz-badge-danger   { background: #fee2e2; color: #dc2626; }
.bz-badge-info     { background: #e0f2fe; color: #0284c7; }
.bz-badge-dark     { background: #e2e8f0; color: #1e293b; }
.bz-badge-light    { background: #f8fafc; color: #64748b; border-color: var(--bz-border-light); }
.bz-badge-purple   { background: #ede9fe; color: #7c3aed; }
.bz-badge-pink     { background: #fce7f3; color: #db2777; }
.bz-badge-orange   { background: #ffedd5; color: #c2410c; }
.bz-badge-teal     { background: #ccfbf1; color: #0f766e; }

/* ================================================================
   SOLID variants (filled bg, white text)
   ================================================================ */
.bz-badge.bz-badge-solid.bz-badge-primary   { background: #1a6fc4; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-secondary { background: #475569; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-success   { background: #16a34a; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-warning   { background: #d97706; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-danger    { background: #dc2626; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-info      { background: #0284c7; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-dark      { background: #1e293b; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-purple    { background: #7c3aed; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-pink      { background: #db2777; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-orange    { background: #c2410c; color: #fff; }
.bz-badge.bz-badge-solid.bz-badge-teal      { background: #0f766e; color: #fff; }

/* ================================================================
   OUTLINE variants (transparent bg, colored border + text)
   ================================================================ */
.bz-badge.bz-badge-outline { background: transparent; }
.bz-badge.bz-badge-outline.bz-badge-primary   { border-color: #1a6fc4; color: #1a6fc4; }
.bz-badge.bz-badge-outline.bz-badge-secondary { border-color: #94a3b8; color: #475569; }
.bz-badge.bz-badge-outline.bz-badge-success   { border-color: #16a34a; color: #16a34a; }
.bz-badge.bz-badge-outline.bz-badge-warning   { border-color: #d97706; color: #b45309; }
.bz-badge.bz-badge-outline.bz-badge-danger    { border-color: #dc2626; color: #dc2626; }
.bz-badge.bz-badge-outline.bz-badge-info      { border-color: #0284c7; color: #0284c7; }
.bz-badge.bz-badge-outline.bz-badge-dark      { border-color: #475569; color: #1e293b; }
.bz-badge.bz-badge-outline.bz-badge-purple    { border-color: #7c3aed; color: #7c3aed; }
.bz-badge.bz-badge-outline.bz-badge-pink      { border-color: #db2777; color: #db2777; }
.bz-badge.bz-badge-outline.bz-badge-orange    { border-color: #c2410c; color: #c2410c; }
.bz-badge.bz-badge-outline.bz-badge-teal      { border-color: #0f766e; color: #0f766e; }

/* ================================================================
   DOT indicator
   ================================================================ */
.bz-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--bz-primary);
}
.bz-badge-dot.bz-badge-primary   { background: #1a6fc4; }
.bz-badge-dot.bz-badge-secondary { background: #94a3b8; }
.bz-badge-dot.bz-badge-success   { background: #16a34a; }
.bz-badge-dot.bz-badge-warning   { background: #d97706; }
.bz-badge-dot.bz-badge-danger    { background: #dc2626; }
.bz-badge-dot.bz-badge-info      { background: #0284c7; }
.bz-badge-dot.bz-badge-purple    { background: #7c3aed; }
.bz-badge-dot.bz-badge-pink      { background: #db2777; }
.bz-badge-dot.bz-badge-teal      { background: #0f766e; }

/* Pulsing dot (live/online indicator) */
.bz-badge-dot.bz-dot-pulse {
  position: relative;
  animation: bz-dot-pulse-anim 1.8s ease-in-out infinite;
}
@keyframes bz-dot-pulse-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.75); }
}

/* Leading dot inside a badge */
.bz-badge .bz-badge-dot { width: 6px; height: 6px; }
.bz-badge.bz-badge-sm .bz-badge-dot,
.bz-badge.bz-badge-xs .bz-badge-dot { width: 5px; height: 5px; }
.bz-badge.bz-badge-lg .bz-badge-dot,
.bz-badge.bz-badge-xl .bz-badge-dot { width: 7px; height: 7px; }

/* ================================================================
   CLOSE button
   ================================================================ */
.bz-badge-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-left: 1px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  opacity: .65;
  padding: 0;
  transition: opacity .12s, background .12s;
  flex-shrink: 0;
}
.bz-badge-close:hover { opacity: 1; background: rgba(0,0,0,.12); }
.bz-badge.bz-badge-lg .bz-badge-close,
.bz-badge.bz-badge-xl .bz-badge-close { width: 16px; height: 16px; font-size: 12px; }

/* ================================================================
   COUNTER badge (notification bubble — absolute positioned)
   ================================================================ */
.bz-badge-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: #dc2626;
  color: #fff;
  border: 2px solid var(--bz-surface);
  box-sizing: border-box;
  white-space: nowrap;
  pointer-events: none;
}
.bz-badge-counter.bz-bc-primary  { background: #1a6fc4; }
.bz-badge-counter.bz-bc-success  { background: #16a34a; }
.bz-badge-counter.bz-bc-warning  { background: #d97706; }
.bz-badge-counter.bz-bc-info     { background: #0284c7; }

/* Wrapper that positions the counter on a target element */
.bz-badge-wrap {
  position: relative;
  display: inline-flex;
}
.bz-badge-wrap .bz-badge-counter {
  position: absolute;
  top: -6px;
  right: -8px;
}

/* ================================================================
   TAG / CHIP — closable, larger interactive variant
   ================================================================ */
.bz-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid var(--bz-border);
  background: var(--bz-surface);
  color: var(--bz-text);
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  user-select: none;
  transition: background .12s, border-color .12s;
  vertical-align: middle;
  box-sizing: border-box;
}
.bz-tag.bz-tag-pill { border-radius: 99px; }
.bz-tag:hover { background: var(--bz-bg); }
.bz-tag.bz-tag-active {
  background: var(--bz-primary-light);
  border-color: var(--bz-primary);
  color: var(--bz-primary);
}

/* Tag icon slot */
.bz-tag-icon { font-size: 13px; opacity: .8; flex-shrink: 0; }

/* Tag close */
.bz-tag-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-left: 1px;
  border: none; border-radius: 50%;
  background: transparent; color: inherit;
  cursor: pointer; font-size: 12px;
  opacity: .5; padding: 0;
  transition: opacity .12s, background .12s;
  flex-shrink: 0;
}
.bz-tag-close:hover { opacity: 1; background: rgba(0,0,0,.1); }

/* ================================================================
   GROUP
   ================================================================ */
.bz-badge-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* ================================================================
   STATUS badge (with text + dot, horizontal)
   ================================================================ */
.bz-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--bz-text-muted);
}
.bz-status .bz-badge-dot { width: 7px; height: 7px; }
.bz-status.bz-status-online  { color: #16a34a; }
.bz-status.bz-status-offline { color: #94a3b8; }
.bz-status.bz-status-busy    { color: #dc2626; }
.bz-status.bz-status-away    { color: #d97706; }