/**
 * Digiclose Badge Component
 *
 * Status badges based on design project: /home/cneise/design
 * CSS Variables: public/css/vars.css
 *
 * Badge Classes:
 * - .badge-status      : Base badge styling (pill shape)
 * - .badge-success     : Green - paid, accepted, completed
 * - .badge-warning     : Orange - pending, in progress
 * - .badge-error       : Red - open, rejected, failed
 * - .badge-danger      : Alias for .badge-error
 * - .badge-info        : Blue - informational, sent
 *
 * Updated: 2025-01-09
 */

/* ===========================================
   BASE BADGE STYLES
   =========================================== */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    white-space: nowrap;
    line-height: 1.5;
}

/* ===========================================
   BADGE VARIANTS
   =========================================== */

/* Success - Bezahlt, Akzeptiert, Erledigt */
.badge-success {
    background-color: var(--theme-status-success-bg);
    color: var(--theme-status-success-text);
}

/* Warning - Ausstehend, In Bearbeitung */
.badge-warning {
    background-color: var(--theme-status-warning-bg);
    color: var(--theme-status-warning-text);
}

/* Error/Danger - Offen, Abgelehnt, Fehler */
.badge-error,
.badge-danger {
    background-color: var(--theme-status-error-bg);
    color: var(--theme-status-error-text);
}

/* Info - Gesendet, Informativ */
.badge-info {
    background-color: var(--theme-status-info-bg);
    color: var(--theme-status-info-text);
}

/* ===========================================
   LEGACY BOOTSTRAP BADGE OVERRIDES
   Keeps backwards compatibility with existing templates
   =========================================== */

.badge.bg-success {
    background-color: var(--theme-status-success) !important;
    color: white !important;
}

.badge.bg-danger {
    background-color: var(--theme-status-error) !important;
    color: white !important;
}

.badge.bg-warning {
    background-color: var(--theme-status-warning) !important;
    color: white !important;
}

.badge.bg-info {
    background-color: var(--theme-status-info) !important;
    color: white !important;
}

.badge.bg-primary {
    background-color: var(--theme-status-error) !important;
    color: white !important;
}

/* ===========================================
   BADGE WITH ICON
   =========================================== */

.badge-status > i,
.badge-status > svg {
    width: 0.75rem;
    height: 0.75rem;
}

/* ===========================================
   BADGE SIZES
   =========================================== */

.badge-sm {
    padding: 0.0625rem 0.5rem;
    font-size: 0.6875rem;
}

.badge-lg {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}