/* ==========================================================================
   AIRH Badges & Counters — Futuristic Neumorphism
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Base Badge — Neumorphic inset
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  gap: var(--space-1);
}

/* ---------------------------------------------------------------------------
   Color Variants
   --------------------------------------------------------------------------- */
.badge--default {
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  box-shadow: var(--neu-inset-sm);
}

.badge--primary {
  background: linear-gradient(135deg, rgba(35, 131, 226, 0.12), rgba(99, 102, 241, 0.12));
  color: var(--color-accent);
}

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

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

.badge--error {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
}

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

/* Solid variants — Gradient */
.badge--primary-solid {
  background: linear-gradient(135deg, var(--color-accent), #6366f1);
  color: #ffffff;
  box-shadow: var(--neu-raised-sm);
}

.badge--success-solid {
  background: linear-gradient(135deg, var(--color-success), #10b981);
  color: #ffffff;
  box-shadow: var(--neu-raised-sm);
}

.badge--error-solid {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  box-shadow: var(--neu-raised-sm);
}

/* ---------------------------------------------------------------------------
   Sizes
   --------------------------------------------------------------------------- */
.badge--sm {
  font-size: 10px;
  padding: 2px 6px;
}

.badge--lg {
  font-size: var(--text-sm);
  padding: 4px 10px;
}

/* ---------------------------------------------------------------------------
   Notification Count Badge — Raised gradient
   --------------------------------------------------------------------------- */
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--neu-raised-sm);
}

.badge-count--sm {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
}

.badge-count--lg {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: var(--text-xs);
}

/* Positioned on parent (use with position: relative parent) */
.badge-count--positioned {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* Animate in */
.badge-count--animated {
  animation: badgePop 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------------
   Dot Badge (no text) — Raised dot
   --------------------------------------------------------------------------- */
.badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.badge-dot--success { background-color: var(--color-success); }
.badge-dot--warning { background-color: var(--color-warning); }
.badge-dot--error { background-color: var(--color-error); }
.badge-dot--info { background-color: var(--color-info); }
.badge-dot--neutral { background-color: var(--color-text-disabled); }

/* Pulsing dot */
.badge-dot--pulse { position: relative; }

.badge-dot--pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: inherit;
  animation: badgeDotPulse 2s ease-in-out infinite;
}

@keyframes badgeDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(2); opacity: 0; }
}

/* Dot sizes */
.badge-dot--sm { width: 6px; height: 6px; }
.badge-dot--lg { width: 10px; height: 10px; }