/* ============================================
   SHARED BADGE STYLES
   Status badges, labels, and tags
   ============================================ */

/* ===== Base Badge ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

/* ===== Status Badges ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Active/Success States */
.status-badge.active,
.status-badge.success,
.status-badge.completed,
.badge.success,
.badge.active {
    background: var(--success-light, rgba(34, 197, 94, 0.15));
    color: var(--success, #22c55e);
}

/* Inactive/Cancelled States */
.status-badge.inactive,
.status-badge.cancelled,
.status-badge.failed,
.badge.inactive,
.badge.cancelled {
    background: var(--danger-light, rgba(239, 68, 68, 0.15));
    color: var(--danger, #ef4444);
}

/* Pending/Warning States */
.status-badge.pending,
.status-badge.warning,
.badge.pending,
.badge.warning {
    background: var(--warning-light, rgba(245, 158, 11, 0.15));
    color: var(--warning, #f59e0b);
}

/* In Progress States */
.status-badge.progress,
.status-badge.in-progress,
.status-badge.inprogress,
.badge.progress {
    background: var(--info-light, rgba(59, 130, 246, 0.15));
    color: var(--info, #3b82f6);
}

/* Ready State */
.status-badge.ready,
.badge.ready {
    background: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

/* Refunded State */
.status-badge.refunded,
.badge.refunded {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

/* ===== Semantic Badges ===== */
.badge.primary,
.badge-primary {
    background: var(--accent-primary-light, rgba(99, 102, 241, 0.15));
    color: var(--accent-primary, #6366f1);
}

.badge.secondary,
.badge-secondary {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.badge.danger,
.badge-danger {
    background: var(--danger-light, rgba(239, 68, 68, 0.15));
    color: var(--danger, #ef4444);
}

.badge.success,
.badge-success {
    background: var(--success-light, rgba(34, 197, 94, 0.15));
    color: var(--success, #22c55e);
}

.badge.warning,
.badge-warning {
    background: var(--warning-light, rgba(245, 158, 11, 0.15));
    color: var(--warning, #f59e0b);
}

.badge.info,
.badge-info {
    background: var(--info-light, rgba(59, 130, 246, 0.15));
    color: var(--info, #3b82f6);
}

/* ===== Size Variants ===== */
.badge.sm,
.badge-sm,
.status-badge.sm {
    padding: 2px 8px;
    font-size: 10px;
}

.badge.lg,
.badge-lg,
.status-badge.lg {
    padding: 6px 16px;
    font-size: 14px;
}

/* ===== Role Badges ===== */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.role-badge.admin {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.role-badge.manager {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.role-badge.staff {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ===== Count Badge ===== */
.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--accent-primary, #6366f1);
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.count-badge.danger {
    background: var(--danger, #ef4444);
}

.count-badge.success {
    background: var(--success, #22c55e);
}

/* ===== Tag/Pill Badge ===== */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    background: var(--accent-primary-light, rgba(99, 102, 241, 0.15));
    color: var(--text-primary, #ffffff);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.tag.removable {
    padding-right: 8px;
}

.tag .remove-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.2s;
}

.tag .remove-btn:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* ===== Category Badge ===== */
.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #ffffff);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    transition: all 0.2s ease;
    cursor: pointer;
}

.category-badge:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.12));
    border-color: var(--accent-primary, #6366f1);
}

.category-badge.active {
    background: var(--accent-primary, #6366f1);
    border-color: var(--accent-primary, #6366f1);
    color: white;
}

/* ===== Light Mode Overrides ===== */
[data-theme="light"] .badge,
[data-theme="light"] .status-badge {
    /* Colors remain the same, just ensure visibility */
}

[data-theme="light"] .tag {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-color, #e2e8f0);
    color: var(--text-primary, #1e293b);
}

[data-theme="light"] .category-badge {
    background: var(--bg-tertiary, #f1f5f9);
    border-color: var(--border-color, #e2e8f0);
    color: var(--text-primary, #1e293b);
}

/* ===== Location Badge ===== */
.location-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

/* Shared across all locations - Purple to make obvious */
.location-badge.shared {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Location-specific */
.location-badge.specific {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.2) 100%);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Masked at current location */
.location-badge.masked {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

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

[data-theme="light"] .location-badge.shared {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.15) 100%);
    color: #7c3aed;
    border-color: rgba(139, 92, 246, 0.4);
}

[data-theme="light"] .location-badge.specific {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.4);
}

[data-theme="light"] .location-badge.masked {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.4);
}