/**
 * UsageBadge Styles - Dezente Version
 *
 * Sehr kleine, subtile Badge für Usage-Anzeige
 * Phase 3: Frontend Display
 */

.usage-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 10px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.usage-badge:hover {
  opacity: 0.9;
}

.usage-badge--ok {
  color: var(--text3, #888);
  background: rgba(136, 135, 128, 0.08);
}

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

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

.usage-badge--exceeded:hover {
  opacity: 1;
}

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