# FleetLume UI v10 Design and Responsive Guide

## Design direction

The interface is designed as an operational control center rather than a generic administration dashboard. Navigation uses a dark fleet-console treatment while workspace content uses bright surfaces, clear data density, and high-visibility exception states.

## Breakpoints

- Above 1280 px: full desktop layout with expanded navigation and multi-column dashboards.
- 1025–1280 px: compact desktop layout with simplified profile and Autopilot controls.
- 781–1024 px: off-canvas navigation, mobile dock, and reduced multi-column layouts.
- 681–780 px: two-column metrics, simplified page banners, and stacked module layouts.
- 680 px and below: tables become labeled cards and form layouts become single-column.
- 460 px and below: compact phone layout with simplified top bar and edge-to-edge workspace spacing.

## Mobile tables

`app-v10.js` reads table headings and assigns a `data-label` to each table cell. At phone widths, `app-v10.css` changes each row into a record card and uses those labels to preserve context without horizontal scrolling.

## Existing functionality

The redesign does not remove or rename application routes, forms, controllers, models, database fields, telematics integrations, cron jobs, or automated trip-monitoring behavior. The existing v9 installation and upgrade process remains valid.

## Customizing the theme

The main design tokens are at the top of `public/assets/css/app-v10.css`:

- `--fl-sidebar`
- `--fl-primary`
- `--fl-cyan`
- `--fl-bg`
- `--fl-surface`
- `--fl-ink`
- `--fl-line`
- `--fl-radius`
- `--fl-shadow`

Changing these variables updates the portal consistently without editing each module.

## Browser support

The interface targets current versions of Chrome, Edge, Firefox, and Safari. It uses progressive enhancements such as backdrop blur, dynamic viewport units, and `color-mix()`. Core layouts and controls remain usable when a browser provides a simpler fallback.