IBX-12207: Updated header and main menu styling

[tischsoic]

Warning

Merge order: design-system#126 (dark-mode mechanism) → design-system#131 (dark input variants) → this PR. The header search consumes the design system's dark input, so merging this first renders it with light input styling on the dark header.

🎫 Issue	IBX-12207

Related PRs:

• IBX-12207: Aligned default profile image with the harmonized user avatar design user#137
• https://github.com/ibexa/site-context/pull/148
• IBX-12207: Added dark mode variants for text inputs, labels and helper text design-system#131
• IBX-12207: Aligned toggle label with its widget design-system#132

Description:

Restyles the existing back-office header and main menu to the new design. SCSS only, except one attribute pair in menu/user.html.twig (see below). No renamed selectors — Behat locators and JS hooks are untouched.

• Header: background #0e1216, no bottom border, padding 12/16 → the bar is 64px (was 72px), search field 500px wide, purple accents (primary-30 hover / primary-50 pressed) replacing the old blue on the bell, avatar, search and match highlight.
• Menu: same #0e1216 surface with a #323639 top border. That border is load-bearing — header and menu are now the same colour and would otherwise merge. The scrollbar track was set to the menu background so only the thumb shows.
• Search: now consumes the design system's dark input variant (--ids-mode: dark on the wrapper, light re-asserted on the white autocomplete panel), which let ~40 lines of duplicated colour rules go. Only the purple accent and the field's size stay local. The accent override sits on .ids-input-text .ids-input because the DS re-points those custom properties on the input element itself, where an inherited ancestor value cannot win.
• Focus states per design: bell 24×24 ring, avatar 26×26 ring, both drawn so the box never changes size — an earlier version moved the notification dot when focused.
• Bell keyboard access: the bell is a <div>, so it got role="button" + tabindex="0"; without it the design's focus state was unreachable.
• Because the bar shrank to 64px, the seven hardcoded 72/73/53px offsets that assumed the old height are updated in lockstep (main container, menu, preview, extra actions, side panel, user popup). Missing one shears the layout by 8px.

Not included: "Site: All context" and "Ask AI" from the design have no markup yet; the avatar's initials colours live in ibexa/user (related PR); disabled states are skipped since none of these elements ever renders disabled.

For QA:

• Dashboard: 64px header, no seam between header and menu, app-switcher still slides its white panel full-bleed.
• Hover + click the bell, the avatar and "Site: All context" — all purple, no blue left.
• Tab through the header: bell and avatar show a focus ring; the notification dot must not move.
• Global search: focus (purple border), type (purple search button, purple match highlight), clear button hover; the autocomplete panel must stay light with correctly styled buttons.
• Focus mode on/off; user popup opens flush under the header; notifications side panel and content preview have no gap at the top; error page header still aligned.

Documentation:

[sonarqubecloud]

Quality Gate failed

Failed conditions
B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE