/* ══════════════════════════════════════════════════════════════
   Control: Badges
   Status-Pills und -Badges für die gesamte Anwendung.
   Alle Varianten teilen eine gemeinsame Basis (display, font,
   border-radius). Farben werden über Modifier-Klassen gesetzt.

   Größen:
     .z-badge          → Standard (0.7rem / 11.2px, Padding 2px 8px)
     .z-badge-lg       → Größer (0.75rem / 12px, Padding 4px 12px)

   Formen:
     (default)         → border-radius: 0.25rem (leicht gerundet)
     .z-pill           → border-radius: 9999px (Pill-Form)

   Varianten:
     .z-badge-success  → grün (Aktiv, Verbunden, OK)
     .z-badge-danger   → rot (Fehler, Pflicht, entfernt)
     .z-badge-warning  → amber/gelb (Empfohlen, Warnung)
     .z-badge-info     → blau (Optional, Info)
     .z-badge-neutral  → grau (Inaktiv, default)
     .z-badge-muted    → noch dezenter grau (Deaktiviert)

   Verwendung:
     <span class="z-badge z-badge-success">Aktiv</span>
     <span class="z-badge z-pill z-badge-danger">Pflicht</span>
     <span class="z-badge z-badge-lg z-pill z-badge-neutral">Nicht verbunden</span>
   ══════════════════════════════════════════════════════════════ */


/* ── Basis ─────────────────────────────────────────────────── */

.z-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;         /* 11.2px */
    font-weight: 600;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 0.25rem;
    white-space: nowrap;
    vertical-align: middle;
    font-family: inherit;
}


/* ── Größen-Modifier ──────────────────────────────────────── */

.z-badge-lg {
    font-size: 0.75rem;        /* 12px */
    padding: 4px 12px;
}


/* ── Form-Modifier ────────────────────────────────────────── */

.z-pill {
    border-radius: 9999px;
}


/* ── Farb-Varianten ───────────────────────────────────────── */

.z-badge-success {
    background: #05966920;
    color: #059669;
}

.z-badge-danger {
    background: #dc262620;
    color: #dc2626;
}

.z-badge-warning {
    background: #f59e0b20;
    color: #d97706;
}

.z-badge-info {
    background: #2563eb20;
    color: #2563eb;
}

.z-badge-neutral {
    background: #e5e7eb;
    color: #6b7280;
}

.z-badge-muted {
    background: #f3f4f6;
    color: #9ca3af;
}


/* ── Semantische Varianten (CSS-Variablen) ────────────────── */
/* Für Badges die im Dark Mode korrekte Farben brauchen       */

.z-badge-ok {
    background: var(--z-success-bg, #dcfce7);
    color: var(--z-success-text, #166534);
}

.z-badge-error {
    background: var(--z-error-bg, #fef2f2);
    color: var(--z-error-text, #991b1b);
}

.z-badge-warn-var {
    background: var(--z-warning-bg, #fefce8);
    color: var(--z-warning-text, #854d0e);
}

.z-badge-testing {
    background: var(--z-bg-hover);
    color: var(--z-text-muted);
}