Move hovered css definition outside component to avoid recreation on every render

[gauravsingh001-cyber]

Description

In OutlookEventItem.tsx, the hovered CSS hook is currently defined inside the React component. Because of this, the CSS is recreated on every component render.

While this does not cause a functional bug, it is not optimal from a performance perspective and also differs from the pattern used in several other parts of the Rocket.Chat codebase.

Current Implementation

The CSS hook is defined inside the component:

const hovered = css`
  &:hover {
    cursor: pointer;
  }

  &:hover,
  &:focus {
    background: ${Palette.surface['surface-hover']};
  }
`;

This causes a new style object to be generated each time the component re-renders.

Expected Improvement

The CSS definition should be moved outside the component so that it is created only once and reused across renders.

## Benefits

* Avoid unnecessary recreation of CSS on each render
* Slight performance improvement
* Aligns with common styling patterns used across the codebase

## Affected File

apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx

## Additional Context

This is a small refactoring improvement and does not affect existing functionality.