/**
 * AIDocBot - Badges Component
 * Design System Version 1.0
 */

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

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

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

/* Primary Badge */
.badge-primary {
    background: var(--brand-primary-lighter);
    color: var(--brand-primary);
}

/* Accent Badge */
.badge-accent {
    background: var(--brand-accent-lighter);
    color: var(--brand-accent);
}

/* Success Badge */
.badge-success {
    background: var(--success-light);
    color: var(--success);
}

/* Error Badge */
.badge-error {
    background: var(--error-light);
    color: var(--error);
}

/* Warning Badge */
.badge-warning {
    background: var(--warning-light);
    color: var(--warning-hover);
}

/* Info Badge */
.badge-info {
    background: var(--info-light);
    color: var(--info);
}

/* Neutral Badge */
.badge-neutral {
    background: var(--neutral-100);
    color: var(--neutral-600);
}

/* Dark Badge */
.badge-dark {
    background: var(--neutral-800);
    color: white;
}

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

.badge-sm {
    padding: 2px var(--space-2);
    font-size: 10px;
}

.badge-lg {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

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

.badge i {
    font-size: 12px;
}

.badge-sm i {
    font-size: 10px;
}

.badge-lg i {
    font-size: 14px;
}

/* ========================================
   BADGE DOT VARIANT
   ======================================== */

.badge-dot {
    position: relative;
    padding-left: var(--space-4);
}

    .badge-dot::before {
        content: '';
        position: absolute;
        left: var(--space-2);
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

/* ========================================
   BADGE PILL (ROUNDED)
   ======================================== */

.badge-pill {
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
}

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

.badge-outline-primary {
    background: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
}

.badge-outline-success {
    background: transparent;
    color: var(--success);
    border: 1px solid var(--success);
}

.badge-outline-error {
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
}

.badge-outline-warning {
    background: transparent;
    color: var(--warning);
    border: 1px solid var(--warning);
}

.badge-outline-neutral {
    background: transparent;
    color: var(--neutral-600);
    border: 1px solid var(--neutral-300);
}

/* ========================================
   STATUS BADGES (with specific meanings)
   ======================================== */

.badge-active {
    background: var(--success-light);
    color: var(--success);
}

.badge-inactive {
    background: var(--neutral-100);
    color: var(--neutral-600);
}

.badge-pending {
    background: var(--warning-light);
    color: var(--warning-hover);
}

.badge-archived {
    background: var(--neutral-200);
    color: var(--neutral-600);
}

.badge-new {
    background: var(--brand-accent-lighter);
    color: var(--brand-accent);
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* ========================================
   BADGE IN CONTEXT
   ======================================== */

/* Badge in buttons */
button .badge {
    margin-left: var(--space-2);
}

/* Badge in nav items */
.nav-link .badge {
    margin-left: var(--space-2);
}

/* Badge in table cells */
td .badge {
    vertical-align: middle;
}

/* ========================================
   BADGE GROUPS
   ======================================== */

.badge-group {
    display: inline-flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

/* ========================================
   CLOSE BUTTON FOR BADGES
   ======================================== */

.badge-dismissible {
    padding-right: var(--space-5);
    position: relative;
}

.badge-close {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: currentColor;
    opacity: 0.7;
    font-size: 14px;
    line-height: 1;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .badge-close:hover {
        opacity: 1;
    }

/* ========================================
   BADGE COUNTER (for notifications)
   ======================================== */

.badge-counter {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--error);
    color: white;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-semibold);
    line-height: 1;
}

.badge-counter-sm {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
}

.badge-counter-lg {
    min-width: 24px;
    height: 24px;
    font-size: 12px;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .badge {
        font-size: 10px;
        padding: 2px var(--space-2);
    }

    .badge-lg {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-3);
    }
}