/* ============================================
   BADGES - Dark Theme
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
}

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

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

/* Info */
.badge.info,
.badge-info {
    background-color: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

a.badge.info:hover, button.badge.info:hover,
a.badge-info:hover, button.badge-info:hover {
    background-color: rgba(99, 102, 241, 0.3);
}

/* White/Light */
.badge.white,
.badge-white {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-surface-50);
    border: 1px solid var(--color-surface-400);
}

/* Danger */
.badge.danger,
.badge-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

a.badge.danger:hover, button.badge.danger:hover,
a.badge-danger:hover, button.badge-danger:hover {
    background-color: rgba(239, 68, 68, 0.3);
}

/* Default/Neutral */
.badge.default,
.badge-default {
    background-color: var(--color-surface-500);
    color: var(--color-surface-100);
}

a.badge.default:hover, button.badge.default:hover,
a.badge-default:hover, button.badge-default:hover {
    background-color: var(--color-surface-400);
}

/* Secondary (muted) */
.badge.secondary,
.badge-secondary {
    background-color: var(--color-surface-500);
    color: var(--color-surface-200);
    border: 1px solid var(--color-surface-400);
}

a.badge.secondary:hover, button.badge.secondary:hover,
a.badge-secondary:hover, button.badge-secondary:hover {
    background-color: var(--color-surface-400);
    color: var(--color-surface-100);
}

/* Success */
.badge.success,
.badge-success {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

a.badge.success:hover, button.badge.success:hover,
a.badge-success:hover, button.badge-success:hover {
    background-color: rgba(34, 197, 94, 0.3);
}

/* Primary */
.badge.primary,
.badge-primary {
    background-color: var(--color-primary);
    color: white;
}

a.badge.primary:hover, button.badge.primary:hover,
a.badge-primary:hover, button.badge-primary:hover {
    background-color: var(--color-primary-600);
}

/* Warning */
.badge.warning,
.badge-warning {
    background-color: rgba(234, 179, 8, 0.2);
    color: #facc15;
}

a.badge.warning:hover, button.badge.warning:hover,
a.badge-warning:hover, button.badge-warning:hover {
    background-color: rgba(234, 179, 8, 0.3);
}

/* Accent (Yellow highlight like mobile app) */
.badge.accent,
.badge-accent {
    background-color: rgba(229, 216, 92, 0.2);
    color: var(--color-accent);
}

a.badge.accent:hover, button.badge.accent:hover,
a.badge-accent:hover, button.badge-accent:hover {
    background-color: rgba(229, 216, 92, 0.3);
}

/* Dismiss buttons */
.badge button[data-dismiss-target] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
    width: 1rem;
    margin-left: 0.25rem;
    font-size: 0.875rem;
    background: transparent;
    border-radius: 9999px;
    transition: background-color 0.15s, color 0.15s;
}

.badge.lg button[data-dismiss-target] {
    height: 1.25rem;
    width: 1.25rem;
}

.badge.info button[data-dismiss-target],
.badge-info button[data-dismiss-target] {
    color: #c7d2fe;
}

.badge.info button[data-dismiss-target]:hover,
.badge-info button[data-dismiss-target]:hover {
    background-color: rgba(99, 102, 241, 0.3);
    color: #e0e7ff;
}

.badge.danger button[data-dismiss-target],
.badge-danger button[data-dismiss-target] {
    color: #fca5a5;
}

.badge.danger button[data-dismiss-target]:hover,
.badge-danger button[data-dismiss-target]:hover {
    background-color: rgba(239, 68, 68, 0.3);
    color: #fecaca;
}

.badge.success button[data-dismiss-target],
.badge-success button[data-dismiss-target] {
    color: #86efac;
}

.badge.success button[data-dismiss-target]:hover,
.badge-success button[data-dismiss-target]:hover {
    background-color: rgba(34, 197, 94, 0.3);
    color: #bbf7d0;
}

.badge.warning button[data-dismiss-target],
.badge-warning button[data-dismiss-target] {
    color: #fde047;
}

.badge.warning button[data-dismiss-target]:hover,
.badge-warning button[data-dismiss-target]:hover {
    background-color: rgba(234, 179, 8, 0.3);
    color: #fef08a;
}