/* Status and pill styling */
.pill { 
  background: rgba(31, 41, 55, 0.9); 
  color: #e5e7eb; 
  border-radius: 12px; 
  padding: 3px 8px; 
  font-size: 9px; 
  font-weight: 400;
  border: 1px solid rgba(75, 85, 99, 0.3);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  cursor: default;
  display: inline-block;
}

.pill:hover {
  background: rgba(31, 41, 55, 0.95);
  border-color: rgba(75, 85, 99, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Status text styling */
.status {
  background: rgba(31, 41, 55, 0.9);
  color: #e5e7eb;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 400;
  border: 1px solid rgba(75, 85, 99, 0.3);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  cursor: default;
  display: inline-block;
}

.status:hover {
  background: rgba(31, 41, 55, 0.95);
  border-color: rgba(75, 85, 99, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Status type variations */
.status.error {
  background: rgba(220, 38, 38, 0.9);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fef2f2;
}

.status.warning {
  background: rgba(245, 158, 11, 0.9);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fffbeb;
}

.status.success {
  background: rgba(34, 197, 94, 0.9);
  border-color: rgba(74, 222, 128, 0.3);
  color: #f0fdf4;
}

.status.info {
  background: rgba(59, 130, 246, 0.9);
  border-color: rgba(96, 165, 250, 0.3);
  color: #eff6ff;
}