---
name: VisitorPlus Enterprise Logistics
colors:
  surface: '#031427'
  surface-dim: '#031427'
  surface-bright: '#2a3a4f'
  surface-container-lowest: '#000f21'
  surface-container-low: '#0b1c30'
  surface-container: '#102034'
  surface-container-high: '#1b2b3f'
  surface-container-highest: '#26364a'
  on-surface: '#d3e4fe'
  on-surface-variant: '#c6c6cd'
  inverse-surface: '#d3e4fe'
  inverse-on-surface: '#213145'
  outline: '#909097'
  outline-variant: '#45464d'
  surface-tint: '#bec6e0'
  primary: '#bec6e0'
  on-primary: '#283044'
  primary-container: '#0f172a'
  on-primary-container: '#798098'
  inverse-primary: '#565e74'
  secondary: '#4edea3'
  on-secondary: '#003824'
  secondary-container: '#00a572'
  on-secondary-container: '#00311f'
  tertiary: '#ffb3ad'
  on-tertiary: '#68000a'
  tertiary-container: '#390003'
  on-tertiary-container: '#eb4141'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#dae2fd'
  primary-fixed-dim: '#bec6e0'
  on-primary-fixed: '#131b2e'
  on-primary-fixed-variant: '#3f465c'
  secondary-fixed: '#6ffbbe'
  secondary-fixed-dim: '#4edea3'
  on-secondary-fixed: '#002113'
  on-secondary-fixed-variant: '#005236'
  tertiary-fixed: '#ffdad7'
  tertiary-fixed-dim: '#ffb3ad'
  on-tertiary-fixed: '#410004'
  on-tertiary-fixed-variant: '#930013'
  background: '#031427'
  on-background: '#d3e4fe'
  surface-variant: '#26364a'
typography:
  display-hero:
    fontFamily: Plus Jakarta Sans
    fontSize: 2rem
    fontWeight: '700'
    lineHeight: 2.5rem
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 1.5rem
    fontWeight: '600'
    lineHeight: 2rem
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 1.25rem
    fontWeight: '600'
    lineHeight: 1.75rem
  headline-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 1.125rem
    fontWeight: '600'
    lineHeight: 1.5rem
  body-lg:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: '400'
    lineHeight: 1.625rem
  body-md:
    fontFamily: Inter
    fontSize: 0.875rem
    fontWeight: '400'
    lineHeight: 1.375rem
  body-sm:
    fontFamily: Inter
    fontSize: 0.75rem
    fontWeight: '400'
    lineHeight: 1.125rem
  label-md:
    fontFamily: Inter
    fontSize: 0.8125rem
    fontWeight: '500'
    lineHeight: 1rem
  label-sm:
    fontFamily: Inter
    fontSize: 0.6875rem
    fontWeight: '600'
    lineHeight: 0.875rem
  tabular-numeric:
    fontFamily: Inter
    fontSize: 0.9375rem
    fontWeight: '500'
    lineHeight: 1.25rem
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  gutter: 1rem
  margin: 1.25rem
  space-xs: 0.25rem
  space-sm: 0.5rem
  space-md: 0.875rem
  space-lg: 1.25rem
  space-xl: 1.75rem
---

## Brand & Style

The visual identity embodies an institutional, disciplined mission-control interface engineered for enterprise fleet dispatchers, logistics regional leads, and field territory managers. The system balances operational density with visual clarity, preventing cognitive fatigue during prolonged multi-monitor supervision of nationwide supply routes.

The design philosophy adheres to **Corporate Modernism with Tonal Layering**. It leverages deep slate foundations to eliminate ambient glare, while precision-engineered status accents (emerald green for active operations, crimson for stalled corridors, and electric sky for real-time telemetry) draw the eye strictly to variance and actionable anomalies. Micro-interactions are subtle, snappy, and utilitarian—omitting ornamental skeuomorphism or gratuitous motion in favor of zero-latency visual feedback.

The RTL layout architecture prioritizes native Persian reading patterns, establishing clear optical anchoring from right to left while maintaining seamless alphanumeric parity for Latin vehicle identification tags, GPS coordinates, and international metric standards.

## Colors

The color system is calibrated for high-density, 24/7 operations rooms. It strictly minimizes eye strain while providing crisp, unambiguous semantic status indicators.

- **Foundational Surfaces**:
  - `Base Canvas`: `#090D16` (Ultra-deep obsidian slate for primary app backdrop)
  - `Surface 1 (Panels & Shell)`: `#0F172A` (Seed slate navy for sidebars, top app bar, and fixed containers)
  - `Surface 2 (Cards & Metrics)`: `#1E293B` (Mid-tone slate for data cards, modal containers, and route stops)
  - `Surface 3 (Hover & Active Overlays)`: `#334155` (Subtle boundary interaction fill)

- **Functional & Telemetry Accents**:
  - `Status Active / Tehran-Karaj Online`: `#10B981` (Emerald active indicator, telemetry pings, on-time milestones)
  - `Status Critical / Inactive Route`: `#EF4444` (Vibrant crimson for delayed checkpoints, route blocks, or offline zones)
  - `Telemetry Signal / Allocation Accent`: `#38BDF8` (Precision sky-blue for selected route vectors, salesperson allocations, and active GPS pins)
  - `Warning / Congestion Index`: `#F59E0B` (Amber for medium traffic density and SLA risk windows)

- **Typography & Content Hierarchy**:
  - `Text Primary`: `#F8FAFC` (98% contrast against surfaces for numbers and Persian headlines)
  - `Text Secondary`: `#94A3B8` (Subdued slate for labels, timestamps, and route addresses)
  - `Text Tertiary / Disabled`: `#475569` (Muted metadata and structural divider lines)

## Typography

The typography stack pairs Latin system fonts with native modern Persian web typography specifications (Vazirmatn / Shabnam aesthetic). When rendered in browser runtime, the system falls back seamlessly to `Vazirmatn, Shabnam, Tahoma, sans-serif` for all Farsi Unicode ranges while leveraging the primary font stack for telemetry digits, duration codes, and international license plate indicators.

- **RTL Rhythm & Punctuation**: Line heights for Persian body copy are expanded by 10-15% compared to typical Western layouts to account for complex Farsi ascenders and descenders (such as *ک*, *گ*, and *ی*).
- **Tabular Numerals**: All duration counters, Persian Toman currency indicators, kilometer markers, and stop sequences utilize `font-variant-numeric: tabular-nums` to maintain absolute spatial alignment within dense route matrices and printable tables.
- **Micro-Labels**: Used exclusively for route stop identifiers (e.g., "ایستگاه ۱۲ / منطقه ۵") with strict uppercase/weighted treatment to establish clear hierarchy without clutter.

## Layout & Spacing

The dashboard employs an asymmetric, multi-panel operational grid engineered for full-screen web applications.

- **Shell Architecture**:
  - `Primary Navigation Sidebar (Right-anchored for RTL)`: Fixed width of `260px` collapsing to `68px` on mobile/tablet viewports.
  - `Route & Stop Panel (Secondary Drawer)`: Fixed width of `380px` containing the sequential stop timeline, traffic indices, and salesperson allocations.
  - `Central Telemetry Canvas (Neshan/Leaflet map & metrics)`: Fluid workspace expanding to utilize all remaining viewport dimensions.
- **Responsive Adaptations**:
  - **Desktop (>1280px)**: Three-column layout: Permanent Right Sidebar + Fluid Interactive Map / Metrics Canvas + Left Route Timeline Drawer.
  - **Tablet (768px - 1279px)**: Collapsed icon navigation, tabbed switcher between Leaflet Map view and Timeline Stop panels.
  - **Mobile (<767px)**: Full-width stacked view with bottom sheet navigation for stop inspection.
- **A4 PDF Export Sandbox**: A locked, standard `210mm x 297mm` printing layout utilizing a strict 8mm internal gutter grid, suppressing interactive chrome while preserving tabular route manifests.

## Elevation & Depth

This design system eschews floating drop shadows in favor of **structural depth through tonal layering and hair-thin border definitions**.

- **Elevation Level 0 (Base Layer)**: `#090D16` canvas background for background map views.
- **Elevation Level 1 (Structural Shells)**: `#0F172A` with a `1px` inner border of `rgba(148, 163, 184, 0.08)`. Used for side navigation bars, static metric headers, and map overlay docks.
- **Elevation Level 2 (Interactive Floating Cards & Stop Tiles)**: `#1E293B` surrounded by a `1px` subtle border of `rgba(148, 163, 184, 0.14)`. When hovered, surfaces shift to `#243347` with an ambient glow of `rgba(56, 189, 248, 0.12)`.
- **Elevation Level 3 (Dialogs, Modals & Allocation Dropdowns)**: `#1E293B` elevated with a double border ring: `1px solid rgba(148, 163, 184, 0.2)` and a soft shadow `0 16px 36px -8px rgba(0, 0, 0, 0.65)`.
- **Map Overlays**: Neshan/Leaflet interface controllers, zoom buttons, and layer toggles float with a glass-frosted backdrop (`backdrop-filter: blur(12px)`) over `#0F172A` at 88% opacity.

## Shapes

The design system uses a strict **Soft (`1`)** shape token system. A disciplined corner radius of `0.25rem` (4px) to `0.5rem` (8px) communicates industrial precision and maximizes useful screen real estate for dense logistics tables.

- **Standard Elements (Buttons, Inputs, Badges, Table Rows)**: `0.25rem` (4px) corner radius.
- **Structural Containers (Telemetry Cards, Modal Shells, Map Floating Panels)**: `0.5rem` (8px) corner radius.
- **Status Pills & Route Milestone Markers**: Fully rounded capsules (`9999px`) reserved strictly for circular salesperson avatars, vehicle map pin halos, and small stop counter badges (1 through 15).

## Components

### 1. Metric Cards (KPI Tiles)
- Built on Surface 2 (`#1E293B`) with a 1px border (`rgba(148, 163, 184, 0.12)`).
- Contains localized Persian figures, trend delta chip (+12% vs yesterday), and a mini sparkline graph.
- Right-aligned metric title in `label-sm` slate text, primary metric value in `display-hero` tabular numeric typography.

### 2. Route Timeline Node (Up to 15 Stops)
- Vertically stacked sequence with an RTL-oriented connecting trace line on the right side.
- **Active Node**: Numbered badge (e.g., ۱, ۲, ۳) filled with `#10B981` (Emerald) or `#38BDF8` (Sky Blue) with a subtle outer pulse.
- Stop card displaying: Store/Owner Name (`headline-sm`), full Persian address with neighborhood code, instant contact trigger button (call icon), and an estimated dwell/traffic duration pill (e.g., `۴۵ دقیقه با ترافیک سنگین`).
- Inactive/Skipped Stop: Struck-through text with `#EF4444` badge and violation/skip log.

### 3. Salesperson Intelligent Allocation Controls
- Profile capsule with high-contrast Persian typography: Avatar, Full Name, Assigned Territory (e.g., منطقه ۳ - تهران), active quota completion bar, and battery/connection telemetry.
- Reassignment trigger: Micro-select dropdown with immediate optimistic UI update.

### 4. Interactive Map Layer (Neshan / Leaflet Custom Styling)
- Custom dark basemap tileset with attenuated road brightness to prioritize active route vectors.
- Waypoint markers: Numbered vector pins matching the timeline stop order. Active route paths drawn in `#38BDF8` with animated directional dashes for in-transit agents.
- Traffic overlay: Integrated polyline coloring (Emerald for free flow, Amber for moderate, Crimson for jammed arteries).

### 5. Form Fields & Action Controls
- **Inputs & Search**: Slate surface (`#0F172A`) with high-contrast text, clear icon anchored to the left, and search magnifying glass anchored to the right for RTL entry.
- **Buttons**:
  - *Primary*: Slate-navy button with Sky-Blue fill (`#0284C7`) or Emerald accent (`#059669`) for positive commitments (Save Route, Dispatch).
  - *Secondary*: Surface 2 outline button with muted text hover states.
- **Badges**: Low-saturation background tints (15% opacity) with 100% solid status text to ensure readability without overpowering adjacent map telemetry.

### 6. A4 PDF Export Preview Component
- Fixed aspect ratio preview container with a white/light canvas simulation togglable from the dark workspace.
- Formatted with institutional header, company stamp space, tabular route sequence with Persian signatures and verification checkboxes for physical field receipt.