mitai-jinkendo/frontend/src/components/UsageBadge.css

/**
 * 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;
  }
}

/* ============================================================================
   Badge Container Styles - Positioning
   ============================================================================

   Zentrale Konfiguration für Badge-Platzierung in verschiedenen Kontexten.
   Alle Anpassungen an Layout/Spacing hier vornehmen!
*/

/* Badge rechts außen (für Headings/Titles) */
.badge-container-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Badge rechts im Button (mit Beschreibung darunter) */
.badge-button-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.badge-button-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.badge-button-description {
  font-size: 11px;
  opacity: 0.8;
  display: block;
  margin-top: 2px;
  text-align: left;
}

/* Mobile Anpassungen */
@media (max-width: 640px) {
  .badge-container-right {
    gap: 8px;
  }

  .badge-button-description {
    font-size: 10px;
  }
}