Organize CSS systematically

When working with CSS/SCSS, prioritize organization and avoid duplication by following these principles:

1. Extract related styles into dedicated files - Group thematically related CSS rules (like motion controls, accessibility overrides, or component variants) into separate SCSS files and import them centrally for better maintainability.

2. Leverage existing component styles - Before writing new styles, check if similar functionality already exists in existing components. Reuse or extend existing styles rather than duplicating them.

3. Consider all affected elements systematically - When implementing CSS changes (especially broad ones like accessibility features), identify and address all related UI elements that should be modified consistently.

Example of good organization:

// motion-control.scss - dedicated file for motion-related overrides
@media (prefers-reduced-motion: reduce) {
  .fa-spin,
  .icon.spin,
  .status-icon--spin,
  .argo-button,
  .application-resource-tree__node-animation,
  [class*="sliding-panel"],
  .argo-dropdown__content,
  .tippy-popper *,
  .Toastify--animate {
      animation: none !important;
      transition: none !important;
  }
}

This approach keeps styles organized, reduces code duplication, and makes the codebase more maintainable.