/* Components — Buttons, badges, loaders, alerts */

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.badge--active { color: var(--status-active); background: rgba(52, 211, 153, 0.12); }
.badge--paused { color: var(--status-paused); background: rgba(251, 191, 36, 0.12); }
.badge--completed { color: var(--status-completed); background: rgba(96, 165, 250, 0.12); }
.badge--archived { color: var(--status-archived); background: rgba(107, 114, 128, 0.12); }

.badge--prospect { color: var(--deal-prospect); background: rgba(167, 139, 250, 0.12); }
.badge--qualified { color: var(--deal-qualified); background: var(--accent-subtle); }
.badge--proposal { color: var(--deal-proposal); background: rgba(251, 191, 36, 0.12); }
.badge--negotiation { color: var(--deal-negotiation); background: rgba(251, 146, 60, 0.12); }
.badge--won { color: var(--deal-won); background: rgba(52, 211, 153, 0.12); }
.badge--lost { color: var(--deal-lost); background: rgba(239, 68, 68, 0.12); }

.badge--todo { color: var(--task-todo); background: rgba(107, 114, 128, 0.12); }
.badge--in_progress { color: var(--task-in-progress); background: var(--accent-subtle); }
.badge--review { color: var(--task-review); background: rgba(167, 139, 250, 0.12); }
.badge--done { color: var(--task-done); background: rgba(52, 211, 153, 0.12); }

.badge--low { color: var(--priority-low); }
.badge--medium { color: var(--priority-medium); }
.badge--high { color: var(--priority-high); }
.badge--urgent { color: var(--priority-urgent); }

/* Value display */
.value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.value--positive { color: var(--status-active); }
.value--negative { color: var(--deal-lost); }

/* Loader */
.loader {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader--centered {
  display: flex;
  justify-content: center;
  padding: var(--space-2xl);
}

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Tooltip (CSS only) */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

[data-tooltip]:hover::after {
  opacity: 1;
}