/* ==========================================================================
   AIRH Status Chip / Indicator — Futuristic Neumorphism
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Base Status Chip
   --------------------------------------------------------------------------- */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  line-height: var(--leading-normal);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Status Dot (inside chip)
   --------------------------------------------------------------------------- */
.status-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ---------------------------------------------------------------------------
   Color Variants
   --------------------------------------------------------------------------- */
.status-chip--active,
.status-chip--valid,
.status-chip--approved,
.status-chip--success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-chip--active .status-chip__dot,
.status-chip--valid .status-chip__dot,
.status-chip--approved .status-chip__dot,
.status-chip--success .status-chip__dot {
  background-color: var(--color-success);
}

.status-chip--pending,
.status-chip--review,
.status-chip--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.status-chip--pending .status-chip__dot,
.status-chip--review .status-chip__dot {
  background-color: var(--color-warning);
}

.status-chip--expired,
.status-chip--error,
.status-chip--rejected {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
}

.status-chip--expired .status-chip__dot,
.status-chip--error .status-chip__dot,
.status-chip--rejected .status-chip__dot {
  background-color: var(--color-error);
}

.status-chip--inactive,
.status-chip--draft {
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  box-shadow: var(--neu-inset-sm);
}

.status-chip--inactive .status-chip__dot,
.status-chip--draft .status-chip__dot {
  background-color: var(--color-text-tertiary);
}

.status-chip--info,
.status-chip--in-progress {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
}

.status-chip--info .status-chip__dot,
.status-chip--in-progress .status-chip__dot {
  background-color: var(--color-info);
}

/* ---------------------------------------------------------------------------
   Sizes
   --------------------------------------------------------------------------- */
.status-chip--sm {
  font-size: 10px;
  padding: 2px 8px;
  gap: var(--space-1);
}

.status-chip--sm .status-chip__dot { width: 5px; height: 5px; }

.status-chip--lg {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
}

.status-chip--lg .status-chip__dot { width: 7px; height: 7px; }

/* ---------------------------------------------------------------------------
   Outline Variant — Neumorphic inset
   --------------------------------------------------------------------------- */
.status-chip--outline {
  background: var(--color-bg-primary);
  border: none;
  padding: 3px 10px;
  box-shadow: var(--neu-inset-sm);
}

/* ---------------------------------------------------------------------------
   Dot Only (no bg) — Status indicator
   --------------------------------------------------------------------------- */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.status-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.status-indicator--active .status-indicator__dot { background-color: var(--color-success); }
.status-indicator--pending .status-indicator__dot { background-color: var(--color-warning); }
.status-indicator--expired .status-indicator__dot { background-color: var(--color-error); }
.status-indicator--inactive .status-indicator__dot { background-color: var(--color-text-disabled); }
.status-indicator--info .status-indicator__dot { background-color: var(--color-info); }

/* Animated pulse for active */
.status-indicator--active .status-indicator__dot { position: relative; }

.status-indicator--active .status-indicator__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-success);
  animation: statusPulse 2s ease-in-out infinite;
}

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