/**
 * UsageBadge Styles
 *
 * Small, visually distinct inline badge for usage indicators
 * Phase 3: Frontend Display
 */

.usage-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.usage-badge--ok {
  color: var(--accent, #1D9E75);
  background: rgba(29, 158, 117, 0.1);
}

.usage-badge--warning {
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
}

.usage-badge--exceeded {
  color: var(--danger, #D85A30);
  background: rgba(216, 90, 48, 0.1);
  font-weight: 600;
}

/* Responsive: Even smaller on mobile */
@media (max-width: 640px) {
  .usage-badge {
    font-size: 0.7rem;
    padding: 1px 4px;
    margin-left: 4px;
  }
}