/* =============================================
   Status Badges & Category Tags — UI-0069, UI-0070
   ============================================= */

/* --- Base Badge (Status) --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 0.75rem; /* 12px */
  font-weight: var(--font-semibold);
  line-height: 1;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: middle;
}

/* --- Status Badge Variants --- */

/* New */
.badge--new {
  background-color: var(--color-electric-light, #E8F1FD);
  color: var(--color-electric, #2F80ED);
  border-color: var(--color-electric-light, #E8F1FD);
}

/* Active / Success */
.badge--active {
  background-color: var(--color-success-light, #D1FAE5);
  color: var(--color-success, #10B981);
  border-color: var(--color-success-light, #D1FAE5);
}

/* Warning / Pending */
.badge--warning {
  background-color: var(--color-warning-light, #FEF3C7);
  color: var(--color-warning, #F59E0B);
  border-color: var(--color-warning-light, #FEF3C7);
}

/* Error / Failed */
.badge--error {
  background-color: var(--color-error-light, #FEE2E2);
  color: var(--color-error, #EF4444);
  border-color: var(--color-error-light, #FEE2E2);
}

/* Neutral / Inactive */
.badge--neutral {
  background-color: var(--bg-subtle, #F7F8FA);
  color: var(--text-secondary, #4A5568);
  border-color: var(--border-default, #E2E8F0);
}

/* Comparison — Finding #20 */
.badge--comparison {
  background-color: #EDE9FE;
  color: #7C3AED;
  border-color: #EDE9FE;
}

/* --- Tier Badge Variants --- */

/* Starter Tier */
.badge--starter {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Growth Tier */
.badge--growth {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Scale Tier */
.badge--scale {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* --- Additional Status Badge Variants --- */

/* Success (alias for active, for consistency) */
.badge--success {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

/* Danger (alias for error, for consistency) */
.badge--danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Info */
.badge--info {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.2);
}

/* --- Status Dot Indicator --- */
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

/* =============================================
   Category Tag Component — UI-0070
   ============================================= */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 0.75rem; /* 12px */
  font-weight: var(--font-medium);
  line-height: 1;
  border-radius: 20px;
  background-color: var(--bg-subtle, #F7F8FA);
  border: 1px solid var(--border-default, #E2E8F0);
  color: var(--text-secondary, #4A5568);
  white-space: nowrap;
  vertical-align: middle;
  cursor: default;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.tag:hover {
  border-color: var(--border-strong, #B0BAC5);
}

/* Clickable tag variant */
a.tag,
button.tag {
  cursor: pointer;
  text-decoration: none;
}

a.tag:hover,
button.tag:hover {
  border-color: var(--border-strong, #B0BAC5);
}

/* =============================================
   Badges & Tags — Mobile Responsive
   ============================================= */
@media (max-width: 768px) {
  .badge,
  .tag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 639px) {
  .badge {
    font-size: 11px;
    padding: 3px 8px;
  }

  .tag {
    font-size: 11px;
    padding: 3px 8px;
  }
}

@media (max-width: 480px) {
  .badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  .tag {
    font-size: 10px;
    padding: 2px 6px;
  }

  .badge__dot {
    width: 5px;
    height: 5px;
  }
}