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

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

@@ -0,0 +1,356 @@
+# Jobjakt — A3 Visual Correction: Clean, Flat, Modern UI
+
+I want to make an important correction to the ongoing A3 UI/UX implementation.
+
+The current application still looks too much like the original interface, with excessive cards, outlined containers, nested boxes and visually cluttered sections.
+
+**I do not want boxes inside boxes inside boxes.**
+
+The approved A3 previews were significantly cleaner, and I want the actual application to match that visual direction much more closely.
+
+This is owner feedback on the ongoing approved A3 implementation. It does not revoke the existing foundation approval or require restarting the design process.
+
+## 1. Main design direction
+
+Adopt a cleaner, flatter, more cohesive visual system across the entire application.
+
+Prioritise:
+
+- Minimal unnecessary borders.
+- Fewer card backgrounds.
+- Clear typography and visual hierarchy.
+- Better spacing and alignment.
+- Less visual noise.
+- More consistent controls.
+- More usable content space.
+- Clear distinction between primary and secondary actions.
+- Smooth, cohesive workflows.
+- Professional, contemporary SaaS styling.
+
+The result should feel like a modern application, not a dashboard built from dozens of independent Material UI cards.
+
+**Flat does not mean everything must be borderless.** Use borders, backgrounds and elevation where they communicate meaningful structure, but not by default.
+
+## 2. Use the approved A3 design as the reference
+
+Inspect the actual approved design assets and documentation, including:
+
+`docs/product-modernisation/08-a3-handoff/`
+
+Review the consolidated A3 prototype and selected layouts, including the original A1 dashboard, D1 foundation, B1 application tracking, CV editor and application details.
+
+Compare actual rendered Jobjakt screens against those prototypes.
+
+Do not treat the existing implementation as the visual reference merely because it is already implemented.
+
+I want the actual application to move towards the approved A3 visual quality.
+
+Do not generate new design concepts or restart the design selection process.
+
+## 3. Remove excessive nested containers
+
+Audit the use of:
+
+- MUI Card.
+- MUI Paper.
+- Outlined Box components.
+- Container borders.
+- Nested surface backgrounds.
+- Unnecessary dividers.
+- Repeated section headers.
+- Excessive panel padding.
+- Redundant card shadows.
+- Nested accordion surfaces.
+
+Identify places where multiple visual containers represent one continuous workflow.
+
+Flatten these layouts.
+
+For example, instead of:
+
+Page → Card → Card → Section → Outlined Panel → Control
+
+Prefer:
+
+Page → Clear section heading → Content and controls
+
+Use typography, spacing and subtle section dividers to establish hierarchy.
+
+Avoid enclosing an entire page in a card and then placing more cards inside it.
+
+Use contained cards for genuinely distinct objects such as independent dashboard widgets, where appropriate.
+
+Do not remove necessary semantic grouping or accessible controls merely to eliminate visible borders.
+
+## 4. CV Builder — Immediate priority
+
+The current mobile CV Builder is especially cluttered.
+
+The screenshot shows:
+
+- A large bordered CV information panel.
+- Download and editor controls inside that panel.
+- Another bordered editing-controls panel.
+- Nested tabs and AI tools.
+- Additional outlined controls inside those sections.
+- Truncated tab labels at narrow widths.
+- Excessive vertical space used before the actual editing content.
+
+Redesign this to feel like one cohesive editing workspace.
+
+### CV header
+
+Use a compact document header with:
+
+- Back navigation.
+- CV title.
+- Save status.
+- Primary action where appropriate.
+- Secondary actions in a menu.
+
+Avoid a large card solely to display the CV title and actions.
+
+### Editing controls
+
+Use a clean, integrated toolbar.
+
+Avoid enclosing the whole toolbar inside another bordered container.
+
+### Tabs
+
+Use lightweight, accessible tabs.
+
+Ensure every tab remains usable on narrow screens.
+
+Consider scrolling tabs, a suitable overflow control or a more compact navigation pattern.
+
+Do not clip text.
+
+### AI tools
+
+Use simple, readable sections.
+
+Avoid unnecessary cards around every AI suggestion.
+
+Use subtle row separation and expandable details where useful.
+
+Keep AI contextual and optional.
+
+### Desktop layout
+
+Preserve the approved A3 arrangement:
+
+- Editor on the left.
+- Live preview on the right.
+
+### Mobile layout
+
+Use a dedicated mobile editing experience.
+
+- Prioritise the actual editing area.
+- Provide an intuitive Edit/Preview switch.
+- Avoid wasting vertical space on toolbars.
+- Keep essential actions accessible.
+- Preserve scroll position and editing state where practical.
+- Ensure fixed bottom navigation doesn't obscure content.
+
+Do not remove undo/redo, version history, AI tools, template controls, export options or other existing functionality.
+
+## 5. Simplify global navigation
+
+Review the current desktop and mobile headers.
+
+The existing mobile header uses too much space and has too many separate outlined icon controls.
+
+Follow the approved A3 approach:
+
+- Grouped, collapsible desktop sidebar.
+- Hybrid mobile navigation.
+- Compact top app bar.
+- Clearly prioritised actions.
+- Consistent active states.
+- Contextual secondary controls.
+
+Do not duplicate primary navigation actions unnecessarily between header and bottom navigation.
+
+Avoid unnecessary outlined circles around every icon.
+
+Keep language and account controls accessible without allowing them to dominate the interface.
+
+## 6. Apply this across the whole application
+
+This is not only a CV Builder change.
+
+Carry the same visual principles into:
+
+- Dashboard.
+- Job applications.
+- Application details.
+- Job discovery.
+- Career Profile.
+- CV templates.
+- CV import.
+- Cover letters.
+- Calendar.
+- Correspondence.
+- Documents.
+- Settings.
+- Automations.
+- Administration.
+- Onboarding.
+
+Avoid rebuilding every page independently.
+
+Improve shared layout primitives, design tokens and component variants so that the cleaner styling remains consistent.
+
+However, do not introduce a blanket CSS override that removes all borders indiscriminately.
+
+Use intentional component-level design.
+
+## 7. Mobile-first visual qualification
+
+The screenshot was captured at approximately 320 px width.
+
+This width must be properly supported.
+
+Test at least:
+
+- 320 px.
+- 360 px.
+- 390 px.
+- 430 px.
+- 768 px.
+- 1024 px.
+- 1440 px.
+
+Check both:
+
+- English and Norwegian Bokmål.
+- Light and dark themes.
+
+Also account for longer future European translations.
+
+Verify:
+
+- No clipped tabs.
+- No unexpected horizontal scrolling.
+- No overlapping controls.
+- No text hidden behind fixed navigation.
+- No excessively narrow content columns.
+- No unnecessary vertical padding.
+- Appropriate touch targets.
+- Clear content hierarchy.
+- Accessible keyboard and focus behaviour.
+
+Do not solve narrow-screen issues by hiding important features without a usable alternative.
+
+## 8. Visual hierarchy
+
+Establish a consistent hierarchy using:
+
+1. Page heading.
+2. Section heading.
+3. Primary content.
+4. Supporting content.
+5. Contextual actions.
+
+Avoid using bordered containers as the main method of distinguishing all five levels.
+
+Prefer typography, spacing and alignment.
+
+Use accent colours deliberately.
+
+Not every action needs a coloured background.
+
+Primary actions should stand out because they matter, not because nearly every button has a prominent fill.
+
+## 9. Compare with the prototypes
+
+Create side-by-side comparisons of:
+
+- Approved A3 prototype.
+- Current application before changes.
+- Updated application after changes.
+
+Do this for representative desktop and mobile screens.
+
+Pay particular attention to visual density, borders, nested surfaces, padding, navigation, typography and readability.
+
+Capture actual browser screenshots.
+
+Use the existing A3 design specifications as the primary reference.
+
+Do not claim visual parity without inspecting the rendered application.
+
+## 10. Preserve functionality
+
+All 57 preservation groups and 34 routes remain mandatory.
+
+Preserve existing application functionality, including:
+
+- CV revisions.
+- Undo/redo.
+- Imports and exports.
+- Career Profile data.
+- Dashboard customisation.
+- Authentication.
+- Job application records.
+- AI qualification restrictions.
+- Administration.
+- Existing language behaviour.
+- Accessibility functionality.
+- RD21 protections.
+
+This is a visual and UX improvement, not permission to delete advanced features.
+
+## 11. Validation and checkpoints
+
+Implement the corrections through the existing approved A3 workstream.
+
+Prioritise shared design-system improvements and the CV Builder mobile experience, then apply the same approach to other screens as their milestones are implemented.
+
+For each completed increment:
+
+- Run relevant tests.
+- Run typecheck, lint and build.
+- Capture browser screenshots.
+- Check English/Norwegian and both themes.
+- Verify mobile layouts.
+- Review preservation requirements.
+- Record visual differences against A3.
+- Commit validated changes.
+- Continue to the next authorised increment.
+
+Do not repeatedly ask for approval for ordinary spacing, border or component-style improvements already covered by this direction.
+
+Retain genuine mandatory milestone gates.
+
+If another workstream is blocked, continue independent authorised work.
+
+## 12. What I want to see
+
+The result should be:
+
+**Clean, cohesive, spacious where appropriate, but still information-dense and functional.**
+
+I want Jobjakt to feel like one professionally designed application rather than multiple boxed interfaces stacked inside one another.
+
+The UI should look much closer to the selected A3 previews.
+
+Avoid excessive decorative containers, oversized cards, repetitive headings and unnecessary borders.
+
+Do not use the autonomous orchestrator.
+
+Do not merge into main or deploy production.
+
+## Final instruction
+
+Treat this as an important design correction for the ongoing A3 implementation.
+
+Begin by auditing the current nested-container patterns and improving the actual mobile CV Builder and shared layout components.
+
+Then propagate the improvements through the remaining approved A3 implementation milestones.
+
+Keep the design clean and consistent across desktop and mobile.
+
+**The objective is to match the sophistication and simplicity of the approved A3 previews, not merely to restyle the original interface.**