/* =====================================================================
   UniMate Component — Badges & Tags v1.0
   Variants: status, count, premium tier
   ===================================================================== */

/* ── Base Badge ──────────────────────────────────────────────────────── */
.um-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--um-space-1);
  padding: var(--um-space-0-5) var(--um-space-2);
  border-radius: var(--um-radius-full);
  font-family: var(--um-font-body);
  font-size: var(--um-text-xs);
  font-weight: var(--um-weight-semibold);
  line-height: var(--um-leading-tight);
  white-space: nowrap;
  vertical-align: middle;
}

.um-badge i,
.um-badge svg {
  font-size: 0.85em;
  flex-shrink: 0;
}

/* ── Color Variants ──────────────────────────────────────────────────── */
.um-badge--primary {
  background: var(--um-primary-subtle);
  color: var(--um-primary);
}

.um-badge--secondary {
  background: rgba(59, 130, 246, 0.1);
  color: var(--um-secondary-500);
}

.um-badge--success {
  background: var(--um-success-light);
  color: var(--um-success-dark);
}

.um-badge--warning {
  background: var(--um-warning-light);
  color: var(--um-warning-dark);
}

.um-badge--danger {
  background: var(--um-danger-light);
  color: var(--um-danger-dark);
}

.um-badge--info {
  background: var(--um-info-light);
  color: var(--um-info-dark);
}

.um-badge--neutral {
  background: var(--um-surface-sunken);
  color: var(--um-text-secondary);
}

/* ── Solid Variants ──────────────────────────────────────────────────── */
.um-badge--solid-primary {
  background: var(--um-primary);
  color: var(--um-primary-contrast);
}

.um-badge--solid-success {
  background: var(--um-success);
  color: #ffffff;
}

.um-badge--solid-danger {
  background: var(--um-danger);
  color: #ffffff;
}

/* ── Count Badge (numeric, round) ────────────────────────────────────── */
.um-badge--count {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--um-space-1-5);
  border-radius: var(--um-radius-full);
  font-size: var(--um-text-2xs);
  font-weight: var(--um-weight-bold);
  line-height: 20px;
  text-align: center;
  justify-content: center;
}

.um-badge--count-sm {
  min-width: 16px;
  height: 16px;
  padding: 0 var(--um-space-1);
  font-size: 9px;
  line-height: 16px;
}

.um-badge--count-lg {
  min-width: 24px;
  height: 24px;
  padding: 0 var(--um-space-2);
  font-size: var(--um-text-xs);
  line-height: 24px;
}

/* ── Premium Tier Badges ─────────────────────────────────────────────── */
.um-badge--tier-free {
  background: var(--um-surface-sunken);
  color: var(--um-text-secondary);
  border: 1px solid var(--um-border);
}

.um-badge--tier-plus {
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.um-badge--tier-pro {
  background: linear-gradient(135deg, #3b82f6, #93c5fd);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.um-badge--tier-max {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #78350f;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* ── Status Dot ──────────────────────────────────────────────────────── */
.um-badge--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.um-badge--dot.um-badge--success::before { background: var(--um-success); }
.um-badge--dot.um-badge--warning::before { background: var(--um-warning); }
.um-badge--dot.um-badge--danger::before  { background: var(--um-danger); }
.um-badge--dot.um-badge--info::before    { background: var(--um-info); }
.um-badge--dot.um-badge--neutral::before { background: var(--um-text-muted); }

/* ── Tag (larger, removable) ─────────────────────────────────────────── */
.um-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--um-space-1-5);
  padding: var(--um-space-1) var(--um-space-3);
  border-radius: var(--um-radius-md);
  font-size: var(--um-text-sm);
  font-weight: var(--um-weight-medium);
  background: var(--um-surface-sunken);
  color: var(--um-text);
  border: 1px solid var(--um-border);
}

.um-tag__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--um-text-muted);
  font-size: 10px;
  cursor: pointer;
  transition: all var(--um-duration-fast) var(--um-ease-default);
  padding: 0;
  margin-right: calc(-1 * var(--um-space-1));
}

.um-tag__remove:hover {
  background: var(--um-danger-light);
  color: var(--um-danger);
}