/* Badges Component */

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

/* Default Badge */
.badge--default {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}

/* Success Badge */
.badge--success {
  background: var(--success-light);
  color: var(--success-dark);
  border: 1px solid var(--success);
}

/* Warning Badge */
.badge--warning {
  background: var(--warning-light);
  color: var(--warning-dark);
  border: 1px solid var(--warning);
}

/* Danger Badge */
.badge--danger {
  background: var(--danger-light);
  color: var(--danger-dark);
  border: 1px solid var(--danger);
}

/* Info Badge */
.badge--info {
  background: var(--info-light);
  color: var(--info-dark);
  border: 1px solid var(--info);
}

/* Larger Badge */
.badge--lg {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* Dataset/Batch Badge */
.badge--batch {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
}

/* Info Boxes / Alerts */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border-left: 4px solid;
  font-size: var(--text-base);
  line-height: 1.6;
}

.alert__icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
}

.alert__content {
  flex: 1;
}

.alert__content strong {
  font-weight: var(--font-bold);
}

/* Alert Variants */
.alert--info {
  background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
  border-color: var(--blue-600);
  color: var(--blue-900);
}

.alert--warning {
  background: linear-gradient(135deg, var(--warning-light), #FEF9C3);
  border-color: var(--warning);
  color: var(--warning-dark);
}

.alert--danger {
  background: linear-gradient(135deg, var(--danger-light), #FEE2E2);
  border-color: var(--danger);
  color: var(--danger-dark);
}

.alert--success {
  background: linear-gradient(135deg, var(--success-light), #D1FAE5);
  border-color: var(--success);
  color: var(--success-dark);
}

/* Blocked File Badge */
.blocked-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--danger-light);
  color: var(--danger);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1px solid var(--danger);
}

.blocked-badge::before {
  content: "⚠";
}

/* Status Dot */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot--success {
  background: var(--success);
}

.status-dot--warning {
  background: var(--warning);
}

.status-dot--danger {
  background: var(--danger);
}

.status-dot--info {
  background: var(--info);
}

/* Dark Badge (for fully redacted) */
.badge--dark {
  background: var(--gray-800);
  color: white;
  border: 1px solid var(--gray-900);
}

/* Dark Alert (for redacted files) */
.alert--dark {
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
  border-color: var(--gray-800);
  color: var(--gray-900);
}

.alert--dark .alert__icon {
  color: var(--gray-800);
}