/* ===================================
   BADGE ATOM - Atomic Design Foundation
   ===================================

   Single source of truth for all badge variants.
   Uses design tokens from design-tokens.css
*/

/* Base badge styles */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0_5) var(--space-2);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-xs);
  line-height: var(--line-height-tight);
  border-radius: var(--border-radius-sm);
  border: var(--border-width-1) solid transparent;
  white-space: nowrap;
  user-select: none;
}

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

.badge-default {
  background-color: var(--bg-muted);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

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

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

.badge-error {
  background-color: var(--color-error-light);
  color: var(--color-error-hover);
  border-color: var(--color-error);
}

.badge-info {
  background-color: var(--color-info-light);
  color: var(--color-info-hover);
  border-color: var(--color-info);
}

.badge-neutral {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
  border-color: var(--color-neutral-300);
}

/* ===================================
   TASK-TYPE VARIANTS (Inbox)
   ===================================
   Used in the Inbox/Tasks panel row header to identify the underlying
   task type (repair / qa / generic). Always rendered, regardless of any
   active type filter. Colours derive from the platform's warm palette
   tokens; no hardcoded values.
*/

.badge-task-type-repair {
  background-color: var(--color-warning-light);
  color: var(--color-warning-hover);
  border-color: var(--color-warning);
}

.badge-task-type-qa {
  background-color: var(--color-info-light);
  color: var(--color-info-hover);
  border-color: var(--color-info);
}

.badge-task-type-task {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
  border-color: var(--color-neutral-300);
}

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

.badge-sm {
  padding: var(--space-0_5) var(--space-1_5);
  font-size: var(--text-2xs);
}

.badge-md {
  padding: var(--space-0_5) var(--space-2);
  font-size: var(--text-xs);
}

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

/* ===================================
   BADGE ICONS
   =================================== */

.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.badge-icon svg {
  stroke-width: 2.5;
}

/* ===================================
   BADGE MODIFIERS
   =================================== */

.badge-pill {
  border-radius: var(--border-radius-full);
}

.badge-dot {
  width: var(--space-2);
  height: var(--space-2);
  padding: 0;
  border-radius: var(--border-radius-full);
  border: none;
}

.badge-dot.badge-sm {
  width: var(--space-1_5);
  height: var(--space-1_5);
}

.badge-dot.badge-lg {
  width: var(--space-2_5);
  height: var(--space-2_5);
}

/* Remove gap for dot badges */
.badge.badge-dot {
  gap: 0;
}

/* ===================================
   BADGE ANIMATIONS
   =================================== */

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

.badge-pulse {
  animation: badge-pulse 2s infinite;
}

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

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

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

@media (max-width: 640px) {
  .badge {
    font-size: var(--text-2xs);
    padding: var(--space-0_5) var(--space-1_5);
  }

  .badge-lg {
    font-size: var(--text-xs);
    padding: var(--space-0_5) var(--space-2);
  }
}