feat(ui): simplify A3 workspace and refresh saved AI availability

docs/ui-modernisation/visual-correction/OWNER_GLOBAL_SIMPLIFICATION.md

@@ -0,0 +1,255 @@
+# Jobjakt — A3 Global Visual Simplification: Desktop and Mobile
+
+This extends my previous A3 visual correction request.
+
+**The clean, modern, less-boxed design must apply to the ENTIRE application on BOTH desktop and mobile.**
+
+I do not want desktop layouts filled with cards inside cards, bordered panels inside bordered panels, or unnecessary containers simply because more space is available.
+
+This is a global design requirement, not a mobile-only adjustment.
+
+## 1. Global design principles
+
+Across every screen and viewport:
+
+- Remove unnecessary nested cards and panels.
+- Reduce visible borders and competing background surfaces.
+- Use typography, spacing and alignment to establish hierarchy.
+- Avoid excessive shadows and decorative dividers.
+- Use whitespace deliberately without creating overly sparse layouts.
+- Keep the interface professional, modern and cohesive.
+- Maintain useful information density.
+- Make primary actions obvious and secondary actions quieter.
+- Preserve all advanced functionality.
+
+I want something closer to the approved A3 mockups, rather than a lightly restyled version of the original application.
+
+## 2. Desktop layouts
+
+Desktop screens should use the extra space to improve workflows, not create additional layers of containers.
+
+### Global application shell
+
+- Clean, collapsible sidebar.
+- Minimal top navigation.
+- Consistent page headings.
+- Clearly organised actions.
+- No unnecessary outer card surrounding entire page content.
+- Avoid duplicated navigation and repeated titles.
+
+### Dashboard
+
+Use a coherent dashboard grid.
+
+Individual widgets may use subtle cards where they help distinguish independent information, but avoid nested cards within widgets.
+
+Allow users to rearrange, resize, add and hide widgets.
+
+Keep the dashboard informative without looking visually fragmented.
+
+### Job applications
+
+Prioritise clear tables, Kanban boards and useful contextual information.
+
+Avoid placing the entire table inside several layers of outlined containers.
+
+Use lightweight rows, subtle separators and clear status indicators.
+
+### Application details
+
+Preserve the approved A3 layout with contextual information on the right.
+
+Use a clean content hierarchy rather than stacking unrelated cards.
+
+Keep documents, correspondence, interviews and application history easy to navigate.
+
+### Job discovery
+
+Use a clear desktop layout with:
+
+- Filters on the left.
+- Results in the centre.
+- Job details on the right where appropriate.
+
+Prefer integrated panels with restrained separators rather than separate floating cards everywhere.
+
+### CV Builder
+
+Preserve the approved A3 design:
+
+- Editor left.
+- Live preview right.
+- Clear, compact document toolbar.
+- Lightweight section navigation.
+- AI assistance integrated contextually.
+
+Avoid enclosing the editor, its sections, the preview and every toolbar in multiple nested bordered surfaces.
+
+The CV itself may retain a paper-like visual appearance, because that represents a genuine document.
+
+### Career Profile
+
+Use clean sections with clear edit actions.
+
+Avoid individual cards for every small piece of information.
+
+### Settings and administration
+
+Use clear grouped settings, forms, tables and section headings.
+
+Prefer subtle separators over nested outlined panels.
+
+Do not make every setting a standalone card.
+
+## 3. Responsive behaviour
+
+Design desktop, tablet and mobile as parts of the same cohesive system.
+
+Do not create a clean mobile experience while leaving desktop cluttered.
+
+Test:
+
+- 320 px.
+- 360 px.
+- 390 px.
+- 430 px.
+- 768 px.
+- 1024 px.
+- 1280 px.
+- 1440 px.
+- 1920 px.
+
+Check English/Norwegian and both light/dark modes.
+
+Ensure long European translations do not break layouts.
+
+No clipped labels, excessive empty space, overlapping controls or unnecessary horizontal scrolling.
+
+## 4. Establish reusable visual rules
+
+Implement the design using shared MUI theme tokens, layout components and appropriate variants.
+
+Avoid one-off CSS fixes for every screen.
+
+Establish consistent rules for:
+
+- Page backgrounds.
+- Content surfaces.
+- Borders.
+- Elevation.
+- Dividers.
+- Spacing.
+- Typography.
+- Toolbars.
+- Section headings.
+- Forms.
+- Tables.
+- Dialogs.
+- Sidebar panels.
+- Dashboard widgets.
+
+Use card-like containers only where there is a genuine conceptual or functional reason.
+
+A useful rule:
+
+**If removing a border, background or card wrapper does not harm comprehension, remove it.**
+
+Do not simply make borders transparent while retaining excessive nested padding and empty space. Simplify the actual component hierarchy and layout.
+
+## 5. Audit visual density
+
+Perform a real rendered-app audit.
+
+Identify:
+
+- Nested card depth.
+- Repeated decorative surfaces.
+- Excessive page padding.
+- Oversized toolbars.
+- Unnecessary titles.
+- Wasted vertical space.
+- Inconsistent content widths.
+- Overly prominent secondary actions.
+
+Compare representative actual screens against the approved A3 prototypes.
+
+Include desktop and mobile screenshots, before and after.
+
+Where feasible, measure improvements such as reduced nested-surface depth and additional usable content area, without treating numerical targets as substitutes for visual quality.
+
+## 6. Preserve functionality
+
+Retain the existing 57 preservation groups and 34 routes.
+
+Do not remove functionality merely to achieve a cleaner appearance.
+
+Preserve:
+
+- CV editing and revisions.
+- Undo/redo.
+- Document exports.
+- Job tracking.
+- Dashboard customisation.
+- Career Profile.
+- AI features and qualification restrictions.
+- Administration.
+- Accessibility.
+- Existing localisation.
+- Data integrity protections.
+
+Complex workflows can remain powerful without looking cluttered.
+
+## 7. Implementation and verification
+
+Apply this across the existing approved A3 implementation milestones.
+
+Start with shared components and the actual CV Builder, then propagate the design system through the application.
+
+For every meaningful increment:
+
+- Run appropriate tests.
+- Compare actual screenshots against A3.
+- Verify desktop and mobile layouts.
+- Test light and dark themes.
+- Test English and Norwegian.
+- Check keyboard accessibility.
+- Preserve existing workflows.
+- Commit validated checkpoints.
+
+Do not stop after simplifying one example page.
+
+Track all relevant routes in a visual-consistency coverage matrix until the entire application has been assessed.
+
+## 8. Autonomy
+
+This is an approved visual direction.
+
+Do not repeatedly ask for approval for routine border removal, spacing refinement, component flattening or visual consistency fixes.
+
+Continue independently authorised A3 implementation work.
+
+Pause only for mandatory owner gates or significant deviations from the approved design.
+
+If blocked, record the issue and continue other eligible work.
+
+Do not use the autonomous orchestrator.
+
+Do not merge into main or deploy production.
+
+## Final objective
+
+I want Jobjakt to have **one clean, premium-quality visual language across desktop, tablet and mobile**.
+
+No excessive cards within cards.
+
+No unnecessary borders.
+
+No cluttered toolbars.
+
+No wasted screen space.
+
+Use thoughtful information architecture, typography, whitespace, restrained surfaces and clear interactions.
+
+**Bring the actual application substantially closer to the approved A3 previews on every screen size, not just mobile.**
+
+Continue implementation and comprehensive visual qualification.