/* css/components/badges.css - Status badges, Tier badges, Dots, Tags */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    user-select: none;
    text-transform: capitalize;
}

/* Badge dot */
.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: currentColor;
}

/* ==========================================================================
   STATUS BADGES
   ========================================================================== */
/* Active / Approved / Completed / Success (Green) */
.badge-success,
.badge-active,
.badge-approved,
.badge-completed {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .badge-active,
html[data-theme="dark"] .badge-approved,
html[data-theme="dark"] .badge-completed {
    background-color: rgba(16, 185, 129, 0.15);
    color: #34D399;
}

/* Pending / Processing / In Review (Amber) */
.badge-warning,
.badge-pending,
.badge-processing,
.badge-under_review {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .badge-pending,
html[data-theme="dark"] .badge-processing,
html[data-theme="dark"] .badge-under_review {
    background-color: rgba(245, 158, 11, 0.15);
    color: #FBBF24;
}

/* Shipped / Delivered / Info (Blue) */
.badge-info,
.badge-shipped,
.badge-delivered,
.badge-dispatched {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .badge-shipped,
html[data-theme="dark"] .badge-delivered,
html[data-theme="dark"] .badge-dispatched {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}

/* Cancelled / Rejected / Error / Failed (Red) */
.badge-error,
.badge-cancelled,
.badge-rejected,
.badge-failed {
    background-color: var(--color-error-light);
    color: var(--color-error-dark);
}

html[data-theme="dark"] .badge-error,
html[data-theme="dark"] .badge-cancelled,
html[data-theme="dark"] .badge-rejected,
html[data-theme="dark"] .badge-failed {
    background-color: rgba(239, 68, 68, 0.15);
    color: #F87171;
}

/* Inactive / Neutral / Draft (Gray) */
.badge-neutral,
.badge-inactive,
.badge-draft {
    background-color: var(--surface-active);
    color: var(--text-secondary);
}

html[data-theme="dark"] .badge-neutral,
html[data-theme="dark"] .badge-inactive,
html[data-theme="dark"] .badge-draft {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

/* Primary / Brand (Orange) */
.badge-primary,
.badge-featured {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary-500);
}

html[data-theme="dark"] .badge-primary,
html[data-theme="dark"] .badge-featured {
    background-color: rgba(255, 136, 0, 0.2);
    color: #FFA142;
}

/* ==========================================================================
   TIER BADGES
   ========================================================================== */
.badge-tier-1 {
    background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
    color: #334155;
    font-weight: 700;
}

.badge-tier-2 {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #92400E;
    font-weight: 700;
}

.badge-tier-3 {
    background: linear-gradient(135deg, #FFEDD5, #FED7AA);
    color: #C2410C;
    border: 1px solid rgba(255, 136, 0, 0.3);
    font-weight: 700;
}