.status-action-btn {
  /* Colors using CSS custom properties (variables) for consistency */
  --primary-color: #abd037;
  --primary-hover: #9abb32;
  --text-color: #003a5d;

  /* Base styles */
  background-color: var(--primary-color);
  color: var(--text-color);
  
  /* Border styles grouped together */
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  
  /* Typography */
  text-transform: uppercase;
  font-family: "bryant", sans-serif; /* Added fallback font */
  
  /* Interactive states */
  cursor: pointer;
  
  /* Smooth transition for hover effects */
  transition: all 0.3s ease;
  
  /* Optional but recommended */
  padding: 0.5rem 1rem; /* Better spacing */
  font-weight: 500; /* Better readability */
  line-height: 1.5; /* Better text spacing */
}

.status-action-btn:hover,
.status-action-btn:focus {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--text-color);
  
  /* Accessibility */
  outline: none;
  box-shadow: 0 0 0 2px rgba(171, 208, 55, 0.25); /* Focus indicator */
}

/* Accessibility - for keyboard navigation */
.status-action-btn:focus-visible {
  outline: 2px solid var(--text-color);
  outline-offset: 2px;
}

/* Optional - active state */
.status-action-btn:active {
  transform: translateY(1px); /* Subtle push effect */
}

/* Optional - disabled state */
.status-action-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}