/* Badge Component - Sistema de Design Padronizado */

:root {
  /* Badge Tokens - Cores e Variantes */
  --badge-radius: 999px; /* pill */
  --badge-font-weight: 600;
  
  /* Tamanhos */
  --badge-sm-font-size: 12px;
  --badge-sm-line-height: 16px;
  --badge-sm-px: 8px;
  --badge-sm-height: 20px;
  --badge-sm-gap: 6px;
  
  --badge-md-font-size: 13px;
  --badge-md-line-height: 18px;
  --badge-md-px: 10px;
  --badge-md-height: 24px;
  --badge-md-gap: 8px;
  
  /* Variantes - Neutral */
  --badge-neutral-solid-bg: #2B2F36;
  --badge-neutral-solid-text: #FFFFFF;
  --badge-neutral-solid-border: transparent;
  
  --badge-neutral-soft-bg: #EEF1F4;
  --badge-neutral-soft-text: #2B2F36;
  --badge-neutral-soft-border: transparent;
  
  --badge-neutral-outline-bg: transparent;
  --badge-neutral-outline-text: #2B2F36;
  --badge-neutral-outline-border: #D0D7DE;
  
  /* Variantes - Info */
  --badge-info-solid-bg: #2563EB;
  --badge-info-solid-text: #FFFFFF;
  --badge-info-solid-border: transparent;
  
  --badge-info-soft-bg: #DBEAFE;
  --badge-info-soft-text: #1E40AF;
  --badge-info-soft-border: transparent;
  
  --badge-info-outline-bg: transparent;
  --badge-info-outline-text: #1E40AF;
  --badge-info-outline-border: #93C5FD;
  
  /* Variantes - Success */
  --badge-success-solid-bg: #16A34A;
  --badge-success-solid-text: #FFFFFF;
  --badge-success-solid-border: transparent;
  
  --badge-success-soft-bg: #DCFCE7;
  --badge-success-soft-text: #166534;
  --badge-success-soft-border: transparent;
  
  --badge-success-outline-bg: transparent;
  --badge-success-outline-text: #166534;
  --badge-success-outline-border: #86EFAC;
  
  /* Variantes - Warning */
  --badge-warning-solid-bg: #F59E0B;
  --badge-warning-solid-text: #111827;
  --badge-warning-solid-border: transparent;
  
  --badge-warning-soft-bg: #FEF3C7;
  --badge-warning-soft-text: #92400E;
  --badge-warning-soft-border: transparent;
  
  --badge-warning-outline-bg: transparent;
  --badge-warning-outline-text: #92400E;
  --badge-warning-outline-border: #FCD34D;
  
  /* Variantes - Danger */
  --badge-danger-solid-bg: #DC2626;
  --badge-danger-solid-text: #FFFFFF;
  --badge-danger-solid-border: transparent;
  
  --badge-danger-soft-bg: #FEE2E2;
  --badge-danger-soft-text: #991B1B;
  --badge-danger-soft-border: transparent;
  
  --badge-danger-outline-bg: transparent;
  --badge-danger-outline-text: #991B1B;
  --badge-danger-outline-border: #FCA5A5;
}

/* Base Badge */
.badge-component {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--badge-md-gap);
  height: var(--badge-md-height);
  padding-left: var(--badge-md-px);
  padding-right: var(--badge-md-px);
  border-radius: var(--badge-radius);
  font-size: var(--badge-md-font-size);
  line-height: var(--badge-md-line-height);
  font-weight: var(--badge-font-weight);
  white-space: nowrap;
  user-select: none;
  border: 1px solid;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

/* Tamanhos */
.badge-component.badge-sm {
  gap: var(--badge-sm-gap);
  height: var(--badge-sm-height);
  padding-left: var(--badge-sm-px);
  padding-right: var(--badge-sm-px);
  font-size: var(--badge-sm-font-size);
  line-height: var(--badge-sm-line-height);
}

.badge-component.badge-md {
  gap: var(--badge-md-gap);
  height: var(--badge-md-height);
  padding-left: var(--badge-md-px);
  padding-right: var(--badge-md-px);
  font-size: var(--badge-md-font-size);
  line-height: var(--badge-md-line-height);
}

/* Variantes - Neutral */
.badge-component.badge-neutral.badge-solid {
  background: var(--badge-neutral-solid-bg);
  color: var(--badge-neutral-solid-text);
  border-color: var(--badge-neutral-solid-border);
}

.badge-component.badge-neutral.badge-soft {
  background: var(--badge-neutral-soft-bg);
  color: var(--badge-neutral-soft-text);
  border-color: var(--badge-neutral-soft-border);
}

.badge-component.badge-neutral.badge-outline {
  background: var(--badge-neutral-outline-bg);
  color: var(--badge-neutral-outline-text);
  border-color: var(--badge-neutral-outline-border);
}

/* Variantes - Info */
.badge-component.badge-info.badge-solid {
  background: var(--badge-info-solid-bg);
  color: var(--badge-info-solid-text);
  border-color: var(--badge-info-solid-border);
}

.badge-component.badge-info.badge-soft {
  background: var(--badge-info-soft-bg);
  color: var(--badge-info-soft-text);
  border-color: var(--badge-info-soft-border);
}

.badge-component.badge-info.badge-outline {
  background: var(--badge-info-outline-bg);
  color: var(--badge-info-outline-text);
  border-color: var(--badge-info-outline-border);
}

/* Variantes - Success */
.badge-component.badge-success.badge-solid {
  background: var(--badge-success-solid-bg);
  color: var(--badge-success-solid-text);
  border-color: var(--badge-success-solid-border);
}

.badge-component.badge-success.badge-soft {
  background: var(--badge-success-soft-bg);
  color: var(--badge-success-soft-text);
  border-color: var(--badge-success-soft-border);
}

.badge-component.badge-success.badge-outline {
  background: var(--badge-success-outline-bg);
  color: var(--badge-success-outline-text);
  border-color: var(--badge-success-outline-border);
}

/* Variantes - Warning */
.badge-component.badge-warning.badge-solid {
  background: var(--badge-warning-solid-bg);
  color: var(--badge-warning-solid-text);
  border-color: var(--badge-warning-solid-border);
}

.badge-component.badge-warning.badge-soft {
  background: var(--badge-warning-soft-bg);
  color: var(--badge-warning-soft-text);
  border-color: var(--badge-warning-soft-border);
}

.badge-component.badge-warning.badge-outline {
  background: var(--badge-warning-outline-bg);
  color: var(--badge-warning-outline-text);
  border-color: var(--badge-warning-outline-border);
}

/* Variantes - Danger */
.badge-component.badge-danger.badge-solid {
  background: var(--badge-danger-solid-bg);
  color: var(--badge-danger-solid-text);
  border-color: var(--badge-danger-solid-border);
}

.badge-component.badge-danger.badge-soft {
  background: var(--badge-danger-soft-bg);
  color: var(--badge-danger-soft-text);
  border-color: var(--badge-danger-soft-border);
}

.badge-component.badge-danger.badge-outline {
  background: var(--badge-danger-outline-bg);
  color: var(--badge-danger-outline-text);
  border-color: var(--badge-danger-outline-border);
}

/* Ícones dentro do badge */
.badge-component .badge-icon-left {
  display: inline-flex;
  align-items: center;
  margin-right: calc(var(--badge-md-gap) / 2);
}

.badge-component .badge-icon-right {
  display: inline-flex;
  align-items: center;
  margin-left: calc(var(--badge-md-gap) / 2);
}

.badge-component.badge-sm .badge-icon-left {
  margin-right: calc(var(--badge-sm-gap) / 2);
}

.badge-component.badge-sm .badge-icon-right {
  margin-left: calc(var(--badge-sm-gap) / 2);
}

/* Hover effect (opcional, pode ser removido se não desejar) */
.badge-component:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Badge com largura fixa (para consistência em tabelas) */
.badge-component.badge-fixed-width {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge com largura fixa pequena */
.badge-component.badge-fixed-width-sm {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}