/**
 * UDM Badge Styles - Globale Badge-Klassen für konsistente Darstellung
 *
 * Design-Prinzip:
 * - UI-Badges (Metainformationen) nutzen theme-adaptive Farben
 * - Heller Hintergrund + dunkler Text für guten Kontrast mit Theme-Icons
 * - Status-Badges behalten ihre semantischen Farben (nicht hier definiert)
 *
 * Erstellt: 2026-01-31
 */

/* ============================================
   UI-Badges (Metainformationen, theme-adaptiv)
   ============================================ */

/**
 * Standard UI-Badge
 * Verwendung: Anzahl-Anzeigen, Metainformationen, nicht-kritische Badges
 * Beispiele: Anhang-Anzahl, Kommentar-Anzahl, Kinder-Anzahl
 */
.udm-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;

    /* Theme-adaptive Farben: Hell */
    background-color: var(--bs-light-border-subtle);
    color: var(--bs-dark);
    /* Icons in Badges erben automatisch die Text-Farbe */
    /* UiIconHelper setzt Theme-Primärfarbe für Icons */
}

/**
 * Kleines UI-Badge
 * Für kompakte Darstellungen
 */
.udm-badge-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
}

/**
 * Großes UI-Badge
 * Für wichtigere Metainformationen
 */
.udm-badge-lg {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

/**
 * UI-Badge mit Icon
 * Zusätzlicher Abstand für Icons
 */
.udm-badge i {
    margin-right: 0.25rem;
}

.udm-badge i:last-child {
    margin-right: 0;
    margin-left: 0.25rem;
}

/* ============================================
   Status-Badges (semantische Farben, fest)
   ============================================ */

/**
 * WICHTIG: Status-Badges nutzen KEINE dieser Klassen!
 * Status-Badges haben feste semantische Farben aus der Datenbank.
 *
 * Beispiel für Status-Badge:
 * <span class="badge" style="background-color: @statusColor; color: white;">
 *     @statusText
 * </span>
 */

/* ============================================
   Spezial-Varianten (optional)
   ============================================ */

/**
 * Badge mit fester Breite
 * Für perfekte Ausrichtung in Listen
 */
.udm-badge-fixed {
    min-width: 60px;
}

/**
 * Badge für Anzahl-Anzeigen
 * Rund, kompakt
 */
.udm-badge-count {
    border-radius: 50%;
    min-width: 24px;
    height: 24px;
    padding: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Dark Theme Support
   ============================================ */

/**
 * Die Variablen --bs-light und --bs-dark passen sich
 * automatisch dem Theme an:
 *
 * Helles Theme:
 * - --bs-light: #f8f9fa (hellgrau)
 * - --bs-dark: #212529 (dunkelgrau/schwarz)
 *
 * Dunkles Theme:
 * - --bs-light: wird dunkler (für Kontrast)
 * - --bs-dark: wird heller (für Kontrast)
 *
 * Icons vom UiIconHelper nutzen Theme-Primärfarbe
 * und funktionieren mit hellem Hintergrund optimal.
 */

/* ============================================
   Beispiele
   ============================================ */

/**
 * Verwendung in Razor-Komponenten:
 *
 * <!-- Standard UI-Badge mit Anzahl -->
 * <span class="udm-badge">
 *     <i class="@GetIconClass()"></i>
 *     @count
 * </span>
 *
 * <!-- Kleines Badge -->
 * <span class="udm-badge udm-badge-sm">
 *     @count
 * </span>
 *
 * <!-- Badge mit fester Breite -->
 * <span class="udm-badge udm-badge-fixed">
 *     @text
 * </span>
 *
 * <!-- Rundes Zähl-Badge -->
 * <span class="udm-badge udm-badge-count">
 *     5
 * </span>
 *
 * <!-- Status-Badge (NICHT udm-badge verwenden!) -->
 * <span class="badge" style="background-color: @statusColor; color: white;">
 *     @statusText
 * </span>
 */