From 632e4ae0d137ddab1fbf94fe7a3925f87fd29025 Mon Sep 17 00:00:00 2001
From: louispaulb <louis.targo@gmail.com>
Date: Tue, 24 Mar 2026 16:08:56 -0400
Subject: [PATCH] =?UTF-8?q?Refactor:=20modular=20architecture=20=E2=80=94?=
 =?UTF-8?q?=20extract=20composables=20&=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extract useDragDrop.js (drag/drop, block move, resize)
- Extract useSelection.js (lasso, multi-select, hover linking)
- Extract WeekCalendar.vue, MonthCalendar.vue, RightPanel.vue
- DispatchV2Page.vue: 3018 → 1438 lines (orchestration only)
- Remove <style scoped> — styles cascade to child components
- Add .dockerignore (build context 214MB → 112KB)
- Add infra/ with docker-compose reference and .env.example

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .dockerignore                                 |    4 +
 ARCHITECTURE.md                               |  161 --
 infra/.env.example                            |    8 +
 infra/docker-compose.erpnext.yaml             |  138 +
 src/composables/useDragDrop.js                |  229 ++
 src/composables/useSelection.js               |  147 ++
 .../dispatch/components/MonthCalendar.vue     |   72 +
 .../dispatch/components/RightPanel.vue        |  104 +
 .../dispatch/components/WeekCalendar.vue      |  112 +
 src/pages/DispatchV2Page.vue                  | 2301 ++++-------------
 10 files changed, 1304 insertions(+), 1972 deletions(-)
 create mode 100644 .dockerignore
 delete mode 100644 ARCHITECTURE.md
 create mode 100644 infra/.env.example
 create mode 100644 infra/docker-compose.erpnext.yaml
 create mode 100644 src/composables/useDragDrop.js
 create mode 100644 src/composables/useSelection.js
 create mode 100644 src/modules/dispatch/components/MonthCalendar.vue
 create mode 100644 src/modules/dispatch/components/RightPanel.vue
 create mode 100644 src/modules/dispatch/components/WeekCalendar.vue

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..62b26e1
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.git
+*.md
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
deleted file mode 100644
index bb19f6d..0000000
--- a/ARCHITECTURE.md
+++ /dev/null
@@ -1,161 +0,0 @@
-# OSS/BSS Field Dispatch — Architecture
-
-## Overview
-
-Field service dispatch & scheduling PWA integrated with ERPNext (Frappe) on PostgreSQL.
-Manages technicians, work orders, route optimization, and team scheduling.
-
-## Stack
-
-| Layer | Technology | Notes |
-|-------|-----------|-------|
-| **Frontend** | Vue 3 + Quasar (PWA) | `<script setup>`, Composition API, custom dark UI |
-| **State** | Pinia | Single `dispatch` store |
-| **Backend** | ERPNext / Frappe | REST API, Server Scripts, Doctypes |
-| **Database** | PostgreSQL | Native (no MariaDB), `pg_trgm` + `unaccent` for address search |
-| **Maps** | Mapbox GL JS | Route directions, optimization API, dark style |
-| **Deploy** | Docker | Frappe containers, PWA served as static assets |
-| **Git** | Gitea | `git.targo.ca/louis/OSS-BSS-Field-Dispatch` |
-
-## Directory Structure
-
-```
-src/
-├── api/                              # ERPNext REST calls
-│   ├── dispatch.js                   # Jobs, techs, tags CRUD + createTag
-│   ├── auth.js                       # Login, CSRF token
-│   ├── service-request.js            # Open service requests
-│   ├── booking.js                    # Booking API
-│   ├── contractor.js                 # Contractor API
-│   └── settings.js                   # Dispatch Settings (single doctype)
-│
-├── components/                       # Reusable UI widgets
-│   └── TagInput.vue                  # Auto-suggest tag input with inline creation
-│
-├── composables/                      # Shared logic (no UI)
-│   ├── useHelpers.js                 # Pure utils: dates, formatting, icons, colors
-│   ├── useScheduler.js               # Timeline algorithm: pinned anchors + auto-flow
-│   ├── useMap.js                     # Mapbox: init, markers, routes, geo-fix, drag
-│   ├── useBottomPanel.js             # Unassigned list: grouping, multi-select, criteria
-│   └── useUndo.js                    # Undo stack (30 actions max)
-│
-├── modules/
-│   └── dispatch/
-│       └── components/               # Dispatch-specific components
-│           ├── TimelineRow.vue       # Single tech row with job blocks
-│           ├── BottomPanel.vue       # Unassigned jobs table (date-grouped)
-│           ├── JobEditModal.vue      # Edit job modal (double-click)
-│           └── WoCreateModal.vue     # Create work order modal
-│
-├── pages/                            # Route-level pages
-│   ├── DispatchV2Page.vue            # Main dispatch board (active)
-│   ├── DispatchPage.vue              # Legacy v1 (deprecated)
-│   ├── MobilePage.vue                # Mobile tech view
-│   ├── AdminPage.vue                 # Admin settings
-│   ├── BookingPage.vue               # Customer booking
-│   ├── TechBidPage.vue              # Tech bidding
-│   └── ContractorPage.vue           # Contractor view
-│
-├── stores/
-│   ├── dispatch.js                   # Jobs, technicians, tags state
-│   └── auth.js                       # Auth state
-│
-├── config/
-│   └── erpnext.js                    # MAPBOX_TOKEN, TECH_COLORS, BASE_URL
-│
-└── router/index.js                   # Vue Router (hash mode)
-```
-
-## Routes
-
-| Path | Page | Description |
-|------|------|-------------|
-| `/#/dispatch2` | DispatchV2Page | **Main app** — scheduling board |
-| `/#/` | DispatchPage | Legacy v1 |
-| `/#/mobile` | MobilePage | Mobile tech interface |
-| `/#/admin` | AdminPage | Settings |
-| `/#/booking` | BookingPage | Customer booking |
-| `/#/bid` | TechBidPage | Tech bidding |
-| `/#/contractor` | ContractorPage | Contractor portal |
-
-## ERPNext Doctypes
-
-| Doctype | Type | Fields |
-|---------|------|--------|
-| **Dispatch Job** | Document | subject, address, lat/lng, priority, duration_h, status, assigned_tech, scheduled_date, start_time, end_date, note |
-| **Dispatch Technician** | Document | technician_id, full_name, status, user, lat/lng |
-| **Dispatch Tag** | Document | label, color, category (Skill/Service/Region/Equipment/Custom) |
-| **Dispatch Job Assistant** | Child Table (of Job) | tech_id, tech_name, duration_h, note, pinned |
-| **Dispatch Tag Link** | Child Table | tag (Link → Dispatch Tag) |
-| **Dispatch Settings** | Single | API keys, Mapbox token |
-
-## PostgreSQL Extensions
-
-| Extension | Usage |
-|-----------|-------|
-| `pg_trgm` | Trigram fuzzy search on `rqa_addresses.search_text` |
-| `unaccent` | Accent-insensitive search (riviere = rivière) |
-
-**Address table:** `rqa_addresses` — 5.2M Quebec civic addresses with pre-computed `search_text` column, GIN trigram index.
-
-## Key Features
-
-### Scheduling
-- **Day view**: Timeline with pinned time anchors + auto-flow for unpinned jobs
-- **Week view**: Calendar grid with job chips, lasso multi-select
-- **Month view**: Overview with tech avatars per day
-- **Travel time**: Mapbox Directions API, displayed between job blocks
-
-### Dispatch
-- **Auto-distribute**: Ordered criteria (urgency → load balance → proximity → skills)
-- **Multi-drag**: Select multiple jobs in bottom panel, drag to tech or batch-assign
-- **Route optimization**: Nearest-neighbor + Mapbox Optimization API (TSP)
-
-### Job Management
-- **Assistants**: Multi-tech jobs with floating/pinned modes
-- **Tags/Skills**: Auto-suggest input with inline tag creation
-- **Address autocomplete**: Server Script → PostgreSQL with pg_trgm
-- **Undo**: Ctrl+Z for assign/unassign/optimize/distribute (30-deep stack)
-
-### UI
-- **Sidebar**: Icon strip with flyout panels on hover
-- **Single click**: Right panel with job details
-- **Double click**: Edit modal (title, address, note, duration, priority, tags)
-- **Context menu**: Right-click on jobs and techs
-- **Lasso**: Rectangle selection in day and week views
-- **Map**: Mapbox dark style, route visualization, geo-fix by click
-
-## Component Communication
-
-```
-DispatchV2Page (orchestrator)
-  │
-  ├── provide/inject ──→ shared state (store, colors, functions)
-  │
-  ├── TimelineRow ←──── events (job-click, drag, resize, ctx)
-  ├── BottomPanel ←──── events (select, batch-assign, drag)
-  ├── JobEditModal ←─── v-model + confirm event
-  ├── WoCreateModal ←── v-model + confirm event
-  └── TagInput ←──────── v-model + create event
-```
-
-## Planned Modules
-
-| Module | Directory | Status |
-|--------|-----------|--------|
-| Dispatch | `modules/dispatch/` | Active |
-| Timesheet | `modules/timesheet/` | Planned |
-| HRMS | `modules/hrms/` | Planned |
-| ERP | `modules/erp/` | Planned |
-| OSS/BSS | `modules/oss-bss/` | Planned |
-
-## Deploy
-
-```bash
-# Build + deploy to ERPNext Docker
-./deploy.sh
-
-# Dev server (hot reload, proxies API to ERPNext)
-npx @quasar/cli dev -m pwa
-# → http://localhost:9000/#/dispatch2
-```
diff --git a/infra/.env.example b/infra/.env.example
new file mode 100644
index 0000000..62380a6
--- /dev/null
+++ b/infra/.env.example
@@ -0,0 +1,8 @@
+# ERPNext
+ERPNEXT_VERSION=v15.49.2
+DB_ROOT_PASSWORD=admin
+
+# PostgreSQL (address autocomplete)
+PG_DB=dispatch
+PG_USER=dispatch
+PG_PASSWORD=dispatch
diff --git a/infra/docker-compose.erpnext.yaml b/infra/docker-compose.erpnext.yaml
new file mode 100644
index 0000000..8415afd
--- /dev/null
+++ b/infra/docker-compose.erpnext.yaml
@@ -0,0 +1,138 @@
+# ERPNext Docker Compose — reference config for rebuilding infrastructure
+# Based on frappe_docker: https://github.com/frappe/frappe_docker
+#
+# Usage:
+#   cp .env.example .env   (edit vars)
+#   docker compose -f docker-compose.erpnext.yaml up -d
+#
+# After ERPNext is running, deploy the dispatch PWA:
+#   cd ../dispatch-app && bash deploy.sh
+
+x-customizable-image: &customizable_image
+  image: ${CUSTOM_IMAGE:-frappe/erpnext}:${CUSTOM_TAG:-v15.49.2}
+  pull_policy: ${PULL_POLICY:-always}
+  restart: unless-stopped
+
+x-depends-on-configurator: &depends_on_configurator
+  depends_on:
+    configurator:
+      condition: service_completed_successfully
+
+x-backend-defaults: &backend_defaults
+  <<: [*depends_on_configurator, *customizable_image]
+  volumes:
+    - sites:/home/frappe/frappe-bench/sites
+
+services:
+  configurator:
+    <<: *backend_defaults
+    platform: linux/amd64
+    entrypoint: ["bash", "-c"]
+    command:
+      - >
+        ls -1 apps > sites/apps.txt;
+        bench set-config -g db_host $$DB_HOST;
+        bench set-config -gp db_port $$DB_PORT;
+        bench set-config -g redis_cache "redis://$$REDIS_CACHE";
+        bench set-config -g redis_queue "redis://$$REDIS_QUEUE";
+        bench set-config -g redis_socketio "redis://$$REDIS_QUEUE";
+        bench set-config -gp socketio_port $$SOCKETIO_PORT;
+    environment:
+      DB_HOST: ${DB_HOST:-db}
+      DB_PORT: ${DB_PORT:-3306}
+      REDIS_CACHE: ${REDIS_CACHE:-redis-cache:6379}
+      REDIS_QUEUE: ${REDIS_QUEUE:-redis-queue:6379}
+      SOCKETIO_PORT: 9000
+    depends_on:
+      db:
+        condition: service_healthy
+      redis-cache:
+        condition: service_started
+      redis-queue:
+        condition: service_started
+    restart: on-failure
+
+  backend:
+    <<: *backend_defaults
+    platform: linux/amd64
+
+  frontend:
+    <<: *customizable_image
+    platform: linux/amd64
+    command: ["nginx-entrypoint.sh"]
+    environment:
+      BACKEND: backend:8000
+      SOCKETIO: websocket:9000
+      FRAPPE_SITE_NAME_HEADER: $$host
+      PROXY_READ_TIMEOUT: 120
+      CLIENT_MAX_BODY_SIZE: 50m
+    volumes:
+      - sites:/home/frappe/frappe-bench/sites
+    ports:
+      - "8080:8080"
+    depends_on:
+      - backend
+      - websocket
+
+  websocket:
+    <<: [*depends_on_configurator, *customizable_image]
+    platform: linux/amd64
+    command: ["node", "/home/frappe/frappe-bench/apps/frappe/socketio.js"]
+    volumes:
+      - sites:/home/frappe/frappe-bench/sites
+
+  queue-short:
+    <<: *backend_defaults
+    platform: linux/amd64
+    command: bench worker --queue short,default
+
+  queue-long:
+    <<: *backend_defaults
+    platform: linux/amd64
+    command: bench worker --queue long,default,short
+
+  scheduler:
+    <<: *backend_defaults
+    platform: linux/amd64
+    command: bench schedule
+
+  db:
+    image: mariadb:10.11
+    platform: linux/amd64
+    restart: unless-stopped
+    command: ['--character-set-server=utf8mb4', '--collation-server=utf8mb4_unicode_ci', '--skip-character-set-client-handshake']
+    environment:
+      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD:-admin}
+    volumes:
+      - db-data:/var/lib/mysql
+    healthcheck:
+      test: mysqladmin ping -h localhost --password=$$MYSQL_ROOT_PASSWORD
+      interval: 5s
+      retries: 10
+
+  redis-cache:
+    image: redis:7-alpine
+    restart: unless-stopped
+
+  redis-queue:
+    image: redis:7-alpine
+    restart: unless-stopped
+
+  # PostgreSQL for address autocomplete (rqa_addresses table)
+  postgres:
+    image: postgres:14-alpine
+    platform: linux/amd64
+    restart: unless-stopped
+    environment:
+      POSTGRES_DB: ${PG_DB:-dispatch}
+      POSTGRES_USER: ${PG_USER:-dispatch}
+      POSTGRES_PASSWORD: ${PG_PASSWORD:-dispatch}
+    volumes:
+      - pg-data:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+
+volumes:
+  sites:
+  db-data:
+  pg-data:
diff --git a/src/composables/useDragDrop.js b/src/composables/useDragDrop.js
new file mode 100644
index 0000000..709565a
--- /dev/null
+++ b/src/composables/useDragDrop.js
@@ -0,0 +1,229 @@
+// ── Drag & Drop composable: job drag, tech drag, block move, block resize, batch drag ──
+import { ref } from 'vue'
+import { snapH, hToTime, fmtDur, localDateStr, SNAP } from './useHelpers'
+import { updateJob } from 'src/api/dispatch'
+
+export function useDragDrop (deps) {
+  const {
+    store, pxPerHr, dayW, periodStart, periodDays, H_START,
+    getJobDate, bottomSelected,
+    pushUndo, smartAssign, invalidateRoutes,
+  } = deps
+
+  const dragJob       = ref(null)
+  const dragSrc       = ref(null)
+  const dragIsAssist  = ref(false)
+  const dropGhost     = ref(null)
+  const dragTech      = ref(null)
+  const dragBatchIds  = ref(null)
+
+  function cleanupDropIndicators () {
+    document.querySelectorAll('.sb-block-drop-hover').forEach(el => el.classList.remove('sb-block-drop-hover'))
+    dropGhost.value = null
+  }
+
+  function onJobDragStart (e, job, srcTechId, isAssist = false) {
+    dragJob.value = job; dragSrc.value = srcTechId || null; dragIsAssist.value = isAssist
+    if (!srcTechId && bottomSelected.value.size > 1 && bottomSelected.value.has(job.id)) {
+      dragBatchIds.value = new Set(bottomSelected.value)
+      e.dataTransfer.setData('text/plain', `batch:${dragBatchIds.value.size}`)
+    } else {
+      dragBatchIds.value = null
+    }
+    e.dataTransfer.effectAllowed = 'move'
+    e.target.addEventListener('dragend', () => { cleanupDropIndicators(); dragIsAssist.value = false; dragBatchIds.value = null }, { once: true })
+  }
+
+  function onTimelineDragOver (e, tech) {
+    e.preventDefault()
+    if (!dragJob.value && !dragTech.value) return
+    const x = e.clientX - e.currentTarget.getBoundingClientRect().left
+    dropGhost.value = { techId: tech.id, x, dateStr: xToDateStr(x) }
+  }
+
+  function onTimelineDragLeave (e) {
+    if (!e.currentTarget.contains(e.relatedTarget)) dropGhost.value = null
+  }
+
+  function onTechDragStart (e, tech) {
+    dragTech.value = tech
+    e.dataTransfer.effectAllowed = 'copyMove'
+    e.dataTransfer.setData('text/plain', tech.id)
+    e.target.addEventListener('dragend', () => { dragTech.value = null; cleanupDropIndicators() }, { once: true })
+    return tech
+  }
+
+  function onBlockDrop (e, job) {
+    if (dragTech.value) {
+      e.preventDefault(); e.stopPropagation()
+      cleanupDropIndicators()
+      pushUndo({ type: 'removeAssistant', jobId: job.id, techId: dragTech.value.id, duration: 0, note: '' })
+      store.addAssistant(job.id, dragTech.value.id)
+      dragTech.value = null
+      invalidateRoutes()
+    }
+  }
+
+  function assignDroppedJob (tech, dateStr) {
+    if (!dragJob.value) return
+    if (dragIsAssist.value) {
+      dragJob.value = null; dragSrc.value = null; dragIsAssist.value = false; return
+    }
+    if (dragBatchIds.value && dragBatchIds.value.size > 1) {
+      dragBatchIds.value.forEach(jobId => {
+        const j = store.jobs.find(x => x.id === jobId)
+        if (j && !j.assignedTech) {
+          pushUndo({ type: 'unassignJob', jobId: j.id, techId: j.assignedTech, routeOrder: j.routeOrder, scheduledDate: j.scheduledDate, assistants: [...(j.assistants || [])] })
+          smartAssign(j, tech.id, dateStr)
+        }
+      })
+      bottomSelected.value = new Set()
+      dragBatchIds.value = null
+    } else {
+      const job = dragJob.value
+      pushUndo({ type: 'unassignJob', jobId: job.id, techId: job.assignedTech, routeOrder: job.routeOrder, scheduledDate: job.scheduledDate, assistants: [...(job.assistants || [])] })
+      smartAssign(job, tech.id, dateStr)
+    }
+    dropGhost.value = null; dragJob.value = null; dragSrc.value = null
+    invalidateRoutes()
+  }
+
+  function onTimelineDrop (e, tech) {
+    e.preventDefault()
+    cleanupDropIndicators()
+
+    if (dragTech.value) {
+      const els = document.elementsFromPoint(e.clientX, e.clientY)
+      const blockEl = els.find(el => el.dataset?.jobId)
+      if (blockEl) {
+        const job = store.jobs.find(j => j.id === blockEl.dataset.jobId)
+        if (job) {
+          pushUndo({ type: 'removeAssistant', jobId: job.id, techId: dragTech.value.id, duration: 0, note: '' })
+          store.addAssistant(job.id, dragTech.value.id)
+          dragTech.value = null; invalidateRoutes(); return
+        }
+      }
+      dragTech.value = null; return
+    }
+
+    if (!dragJob.value) return
+
+    if (dragJob.value.assignedTech === tech.id) {
+      const rect = e.currentTarget.getBoundingClientRect()
+      const x = (e.clientX || e.pageX) - rect.left
+      const dropH = H_START + x / pxPerHr.value
+      const dayStr = localDateStr(periodStart.value)
+      pushUndo({ type: 'optimizeRoute', techId: tech.id, prevQueue: [...tech.queue] })
+      const draggedJob = dragJob.value
+      tech.queue = tech.queue.filter(j => j.id !== draggedJob.id)
+      const dayJobs = tech.queue.filter(j => getJobDate(j.id) === dayStr)
+      const queueDayStart = tech.queue.findIndex(j => getJobDate(j.id) === dayStr)
+      let slot = dayJobs.length, cursor = 8
+      for (let i = 0; i < dayJobs.length; i++) {
+        const dur = parseFloat(dayJobs[i].duration) || 1
+        if (dropH < cursor + dur / 2) { slot = i; break }
+        cursor += dur + 0.5
+      }
+      const insertAt = queueDayStart >= 0 ? queueDayStart + slot : tech.queue.length
+      tech.queue.splice(insertAt, 0, draggedJob)
+      tech.queue.forEach((q, i) => { q.routeOrder = i; updateJob(q.name || q.id, { route_order: i }).catch(() => {}) })
+      dragJob.value = null; dragSrc.value = null; invalidateRoutes(); return
+    }
+
+    if (dragIsAssist.value) {
+      dragJob.value = null; dragSrc.value = null; dragIsAssist.value = false; return
+    }
+
+    assignDroppedJob(tech, xToDateStr(e.clientX - e.currentTarget.getBoundingClientRect().left))
+  }
+
+  function onCalDrop (e, tech, dateStr) { assignDroppedJob(tech, dateStr) }
+
+  function xToDateStr (x) {
+    const di = Math.max(0, Math.min(periodDays.value - 1, Math.floor(x / dayW.value)))
+    const d = new Date(periodStart.value); d.setDate(d.getDate() + di)
+    return localDateStr(d)
+  }
+
+  function startBlockMove (e, job, block) {
+    if (e.button !== 0) return
+    const startX = e.clientX, startY = e.clientY
+    const startLeft = parseFloat(block.style.left) || 0
+    let moving = false
+    function onMove (ev) {
+      const dx = ev.clientX - startX, dy = ev.clientY - startY
+      if (!moving && Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 5) { cleanup(); return }
+      if (!moving && Math.abs(dx) > 5) { moving = true; block.style.zIndex = '10' }
+      if (!moving) return
+      ev.preventDefault()
+      const newLeft = Math.max(0, startLeft + dx)
+      const newH = snapH(H_START + newLeft / pxPerHr.value)
+      block.style.left = ((newH - H_START) * pxPerHr.value) + 'px'
+      const meta = block.querySelector('.sb-block-meta')
+      if (meta) meta.textContent = `${hToTime(newH)} · ${fmtDur(job.duration)}`
+    }
+    function cleanup () {
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+    }
+    function onUp (ev) {
+      cleanup()
+      if (!moving) return
+      block.style.zIndex = ''
+      const dx = ev.clientX - startX
+      const newH = snapH(H_START + Math.max(0, startLeft + dx) / pxPerHr.value)
+      job.startHour = newH; job.startTime = hToTime(newH)
+      store.setJobSchedule(job.id, job.scheduledDate, hToTime(newH))
+      invalidateRoutes()
+    }
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+  }
+
+  function startResize (e, job, mode, assistTechId) {
+    e.preventDefault()
+    const startX = e.clientX
+    const startDur = mode === 'assist'
+      ? (job.assistants.find(a => a.techId === assistTechId)?.duration || job.duration)
+      : job.duration
+    const block = e.target.parentElement
+    const startW = block.offsetWidth
+    function onMove (ev) {
+      const dx = ev.clientX - startX
+      const newDur = Math.max(SNAP, snapH(Math.max(18, startW + dx) / pxPerHr.value))
+      block.style.width = (newDur * pxPerHr.value) + 'px'
+      const meta = block.querySelector('.sb-block-meta')
+      if (meta) meta.textContent = mode === 'assist' ? `assistant · ${fmtDur(newDur)}` : fmtDur(newDur)
+    }
+    function onUp (ev) {
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+      const dx = ev.clientX - startX
+      const newDur = Math.max(SNAP, snapH(Math.max(18, startW + dx) / pxPerHr.value))
+      if (mode === 'assist' && assistTechId) {
+        const assist = job.assistants.find(a => a.techId === assistTechId)
+        if (assist) {
+          assist.duration = newDur
+          updateJob(job.name || job.id, {
+            assistants: job.assistants.map(a => ({ tech_id: a.techId, tech_name: a.techName, duration_h: a.duration, note: a.note || '', pinned: a.pinned ? 1 : 0 })),
+          }).catch(() => {})
+        }
+      } else {
+        job.duration = newDur
+        updateJob(job.name || job.id, { duration_h: newDur }).catch(() => {})
+      }
+      invalidateRoutes()
+    }
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+  }
+
+  return {
+    dragJob, dragSrc, dragIsAssist, dropGhost, dragTech, dragBatchIds,
+    cleanupDropIndicators,
+    onJobDragStart, onTimelineDragOver, onTimelineDragLeave,
+    onTechDragStart, onBlockDrop,
+    assignDroppedJob, onTimelineDrop, onCalDrop, xToDateStr,
+    startBlockMove, startResize,
+  }
+}
diff --git a/src/composables/useSelection.js b/src/composables/useSelection.js
new file mode 100644
index 0000000..ee2ad3b
--- /dev/null
+++ b/src/composables/useSelection.js
@@ -0,0 +1,147 @@
+// ── Selection composable: lasso, multi-select, hover linking, batch ops ───────
+import { ref, computed } from 'vue'
+import { localDateStr } from './useHelpers'
+
+export function useSelection (deps) {
+  const { store, periodStart, smartAssign, invalidateRoutes, fullUnassign } = deps
+
+  const hoveredJobId = ref(null)
+  const selectedJob  = ref(null)   // { job, techId, isAssist?, assistTechId? }
+  const multiSelect  = ref([])     // [{ job, techId, isAssist?, assistTechId? }]
+
+  // ── Select / toggle ─────────────────────────────────────────────────────────
+  function selectJob (job, techId, isAssist = false, assistTechId = null, event = null, rightPanel = null) {
+    const entry = { job, techId, isAssist, assistTechId }
+    const isMulti = event && (event.ctrlKey || event.metaKey)
+    if (isMulti) {
+      const idx = multiSelect.value.findIndex(s => s.job.id === job.id && s.isAssist === isAssist)
+      if (idx >= 0) multiSelect.value.splice(idx, 1)
+      else multiSelect.value.push(entry)
+      selectedJob.value = entry
+    } else {
+      multiSelect.value = []
+      const same = selectedJob.value?.job?.id === job.id && selectedJob.value?.isAssist === isAssist && selectedJob.value?.assistTechId === assistTechId
+      selectedJob.value = same ? null : entry
+      if (!same && rightPanel !== undefined) {
+        const tech = store.technicians.find(t => t.id === (techId || job.assignedTech))
+        if (rightPanel !== null && typeof rightPanel === 'object' && 'value' in rightPanel) {
+          rightPanel.value = { mode: 'details', data: { job, tech: tech || null } }
+        }
+      } else if (rightPanel !== null && typeof rightPanel === 'object' && 'value' in rightPanel) {
+        rightPanel.value = null
+      }
+    }
+  }
+
+  function isJobMultiSelected (jobId, isAssist = false) {
+    return multiSelect.value.some(s => s.job.id === jobId && s.isAssist === isAssist)
+  }
+
+  // ── Batch ops ─────────────────────────────────────────────────────────────────
+  function batchUnassign () {
+    if (!multiSelect.value.length) return
+    multiSelect.value.forEach(s => {
+      if (s.isAssist && s.assistTechId) store.removeAssistant(s.job.id, s.assistTechId)
+      else fullUnassign(s.job)
+    })
+    multiSelect.value = []; selectedJob.value = null
+    invalidateRoutes()
+  }
+
+  function batchMoveTo (techId) {
+    if (!multiSelect.value.length) return
+    const dayStr = localDateStr(periodStart.value)
+    multiSelect.value.filter(s => !s.isAssist).forEach(s => smartAssign(s.job, techId, dayStr))
+    multiSelect.value = []; selectedJob.value = null
+    invalidateRoutes()
+  }
+
+  // ── Lasso ─────────────────────────────────────────────────────────────────────
+  const lasso = ref(null)
+  const boardScroll = ref(null)
+
+  const lassoStyle = computed(() => {
+    if (!lasso.value) return {}
+    const l = lasso.value
+    return {
+      left: Math.min(l.x1, l.x2) + 'px', top: Math.min(l.y1, l.y2) + 'px',
+      width: Math.abs(l.x2 - l.x1) + 'px', height: Math.abs(l.y2 - l.y1) + 'px',
+    }
+  })
+
+  function startLasso (e) {
+    if (e.target.closest('.sb-block, .sb-chip, .sb-res-cell, .sb-travel-trail, button, input, select, a')) return
+    if (e.button !== 0) return
+    e.preventDefault()
+    if (!e.ctrlKey && !e.metaKey) {
+      if (selectedJob.value || multiSelect.value.length) {
+        selectedJob.value = null; multiSelect.value = []
+      }
+    }
+    const rect = boardScroll.value.getBoundingClientRect()
+    const x = e.clientX - rect.left + boardScroll.value.scrollLeft
+    const y = e.clientY - rect.top + boardScroll.value.scrollTop
+    lasso.value = { x1: x, y1: y, x2: x, y2: y }
+  }
+
+  function moveLasso (e) {
+    if (!lasso.value) return
+    e.preventDefault()
+    const rect = boardScroll.value.getBoundingClientRect()
+    lasso.value.x2 = e.clientX - rect.left + boardScroll.value.scrollLeft
+    lasso.value.y2 = e.clientY - rect.top + boardScroll.value.scrollTop
+  }
+
+  function endLasso () {
+    if (!lasso.value) return
+    const l = lasso.value
+    const w = Math.abs(l.x2 - l.x1), h = Math.abs(l.y2 - l.y1)
+    if (w > 10 && h > 10) {
+      const boardRect = boardScroll.value.getBoundingClientRect()
+      const lassoLeft = Math.min(l.x1, l.x2) - boardScroll.value.scrollLeft + boardRect.left
+      const lassoTop = Math.min(l.y1, l.y2) - boardScroll.value.scrollTop + boardRect.top
+      const lassoRight = lassoLeft + w, lassoBottom = lassoTop + h
+      const blocks = boardScroll.value.querySelectorAll('.sb-block[data-job-id], .sb-chip')
+      const selected = []
+      blocks.forEach(el => {
+        const r = el.getBoundingClientRect()
+        if (r.right > lassoLeft && r.left < lassoRight && r.bottom > lassoTop && r.top < lassoBottom) {
+          const jobId = el.dataset?.jobId
+          if (jobId) {
+            const job = store.jobs.find(j => j.id === jobId)
+            if (job) selected.push({ job, techId: job.assignedTech, isAssist: false, assistTechId: null })
+          }
+        }
+      })
+      if (selected.length) {
+        multiSelect.value = selected
+        if (selected.length === 1) selectedJob.value = selected[0]
+      }
+    }
+    lasso.value = null
+  }
+
+  // ── Hover linking helpers ─────────────────────────────────────────────────────
+  function techHasLinkedJob (tech) {
+    const hId = hoveredJobId.value, sId = selectedJob.value?.job?.id
+    if (hId && (tech.assistJobs || []).some(j => j.id === hId)) return true
+    if (hId && tech.queue.some(j => j.id === hId)) return true
+    if (sId && !selectedJob.value?.isAssist && (tech.assistJobs || []).some(j => j.id === sId)) return true
+    if (sId && selectedJob.value?.isAssist && tech.queue.some(j => j.id === sId)) return true
+    return false
+  }
+
+  function techIsHovered (tech) {
+    const hId = hoveredJobId.value
+    if (!hId) return false
+    const job = tech.queue.find(j => j.id === hId)
+    return job && job.assistants?.length > 0
+  }
+
+  return {
+    hoveredJobId, selectedJob, multiSelect,
+    selectJob, isJobMultiSelected, batchUnassign, batchMoveTo,
+    lasso, boardScroll, lassoStyle, startLasso, moveLasso, endLasso,
+    techHasLinkedJob, techIsHovered,
+  }
+}
diff --git a/src/modules/dispatch/components/MonthCalendar.vue b/src/modules/dispatch/components/MonthCalendar.vue
new file mode 100644
index 0000000..19b50d9
--- /dev/null
+++ b/src/modules/dispatch/components/MonthCalendar.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { inject, computed } from 'vue'
+import { localDateStr, startOfWeek, jobSpansDate } from 'src/composables/useHelpers'
+
+const props = defineProps({
+  anchorDate: Date,
+  filteredResources: Array,
+  todayStr: String,
+})
+
+const emit = defineEmits(['go-to-day', 'select-tech'])
+
+const TECH_COLORS = inject('TECH_COLORS')
+
+function isDayToday (d) { return localDateStr(d) === props.todayStr }
+
+const monthWeeks = computed(() => {
+  const first = new Date(props.anchorDate.getFullYear(), props.anchorDate.getMonth(), 1)
+  const last  = new Date(props.anchorDate.getFullYear(), props.anchorDate.getMonth() + 1, 0)
+  const start = startOfWeek(first)
+  const end   = new Date(last)
+  const dow   = end.getDay()
+  if (dow !== 0) end.setDate(end.getDate() + (7 - dow))
+  const weeks = []; let cur = new Date(start)
+  while (cur <= end) {
+    const week = []
+    for (let i = 0; i < 7; i++) { week.push(new Date(cur)); cur.setDate(cur.getDate() + 1) }
+    weeks.push(week)
+  }
+  return weeks
+})
+
+function techsActiveOnDay (dateStr) {
+  return props.filteredResources.filter(tech =>
+    tech.queue.some(j => jobSpansDate(j, dateStr)) ||
+    (tech.assistJobs || []).some(j => jobSpansDate(j, dateStr) && j.assistants.find(a => a.techId === tech.id)?.pinned)
+  )
+}
+
+function dayJobCount (dateStr) {
+  const jobIds = new Set()
+  props.filteredResources.forEach(t => t.queue.filter(j => jobSpansDate(j, dateStr)).forEach(j => jobIds.add(j.id)))
+  return jobIds.size
+}
+</script>
+
+<template>
+<div class="sb-month-wrap">
+  <div class="sb-month-dow-hdr">
+    <div v-for="wd in ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim']" :key="wd" class="sb-month-dow">{{ wd }}</div>
+  </div>
+  <div v-for="(week, wi) in monthWeeks" :key="wi" class="sb-month-week">
+    <div v-for="day in week" :key="localDateStr(day)"
+         class="sb-month-day"
+         :class="{ 'sb-month-day-out': day.getMonth() !== anchorDate.getMonth(), 'sb-month-day-today': isDayToday(day) }"
+         @click="emit('go-to-day', day)">
+      <div class="sb-month-day-num">{{ day.getDate() }}</div>
+      <div class="sb-month-avatars">
+        <div v-for="tech in techsActiveOnDay(localDateStr(day))" :key="tech.id"
+             class="sb-month-avatar" :style="'background:'+TECH_COLORS[tech.colorIdx]"
+             :title="tech.fullName + ' — ' + tech.queue.filter(j=>jobSpansDate(j,localDateStr(day))).length + ' job(s)'"
+             @click.stop="emit('select-tech', tech)">
+          {{ tech.fullName.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
+        </div>
+      </div>
+      <div v-if="dayJobCount(localDateStr(day))" class="sb-month-job-count">
+        {{ dayJobCount(localDateStr(day)) }} job{{ dayJobCount(localDateStr(day))>1?'s':'' }}
+      </div>
+    </div>
+  </div>
+</div>
+</template>
diff --git a/src/modules/dispatch/components/RightPanel.vue b/src/modules/dispatch/components/RightPanel.vue
new file mode 100644
index 0000000..8427113
--- /dev/null
+++ b/src/modules/dispatch/components/RightPanel.vue
@@ -0,0 +1,104 @@
+<script setup>
+import { inject } from 'vue'
+import { fmtDur, prioLabel, prioClass, ICON } from 'src/composables/useHelpers'
+import TagInput from 'src/components/TagInput.vue'
+
+const props = defineProps({
+  panel: Object, // { mode, data: { job, tech } } or null
+})
+
+const emit = defineEmits([
+  'close', 'edit', 'move', 'geofix', 'unassign',
+  'set-end-date', 'remove-assistant', 'assign-pending',
+  'update-tags',
+])
+
+const store = inject('store')
+const TECH_COLORS = inject('TECH_COLORS')
+const jobColor = inject('jobColor')
+const getTagColor = inject('getTagColor')
+const onCreateTag = inject('onCreateTag')
+</script>
+
+<template>
+<transition name="sb-slide-right">
+<aside v-if="panel" class="sb-right">
+  <div class="sb-rp-hdr">
+    <span class="sb-rp-title">{{ {details:'Détails',pending:'Demande entrante'}[panel.mode] || 'Détails' }}</span>
+    <button class="sb-rp-close" @click="emit('close')">✕</button>
+  </div>
+
+  <!-- JOB DETAILS -->
+  <template v-if="panel.mode==='details'">
+    <div class="sb-rp-body">
+      <div class="sb-rp-color-bar" :style="'background:'+jobColor(panel.data?.job||{})"></div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Titre</span><strong>{{ panel.data?.job?.subject }}</strong></div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Adresse</span>{{ panel.data?.job?.address || '—' }}</div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Durée</span>{{ fmtDur(panel.data?.job?.duration) }}</div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Priorité</span>
+        <span :class="prioClass(panel.data?.job?.priority)">{{ prioLabel(panel.data?.job?.priority) }}</span>
+      </div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Technicien</span>{{ panel.data?.tech?.fullName || '—' }}</div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Date planifiée</span>
+        {{ panel.data?.job?.scheduledDate || '—' }}
+        <span v-if="panel.data?.job?.endDate"> → {{ panel.data.job.endDate }}</span>
+      </div>
+      <div v-if="panel.data?.job?.assignedTech" class="sb-rp-field">
+        <span class="sb-rp-lbl">Date de fin</span>
+        <input type="date" class="sb-form-input" :value="panel.data?.job?.endDate || ''"
+               @change="emit('set-end-date', panel.data.job, $event.target.value)" style="margin-top:2px" />
+      </div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Statut</span>{{ panel.data?.job?.status }}</div>
+      <div v-if="panel.data?.job?.note" class="sb-rp-field"><span class="sb-rp-lbl">Note</span>{{ panel.data.job.note }}</div>
+      <div class="sb-rp-field">
+        <span class="sb-rp-lbl">Tags</span>
+        <TagInput v-if="panel.data?.job"
+                  :model-value="panel.data.job.tags || []"
+                  @update:model-value="v => emit('update-tags', panel.data.job, v)"
+                  :all-tags="store.allTags" :get-color="getTagColor" @create="onCreateTag" />
+      </div>
+      <div v-if="panel.data?.job?.assistants?.length" class="sb-rp-field">
+        <span class="sb-rp-lbl">Assistants</span>
+        <div v-for="a in panel.data.job.assistants" :key="a.techId" style="display:flex;align-items:center;gap:6px;margin-top:3px">
+          <span class="sb-assist-badge" :style="'background:'+TECH_COLORS[store.technicians.find(t=>t.id===a.techId)?.colorIdx||0]">
+            {{ (a.techName||'').split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
+          </span>
+          <span style="font-size:0.72rem">{{ a.techName }} · {{ fmtDur(a.duration) }}{{ a.note ? ' · '+a.note : '' }}</span>
+          <button style="margin-left:auto;background:none;border:none;color:#ef4444;cursor:pointer;font-size:0.7rem"
+                  @click="emit('remove-assistant', panel.data.job.id, a.techId)">✕</button>
+        </div>
+      </div>
+    </div>
+    <div class="sb-rp-actions">
+      <button class="sb-rp-primary" @click="emit('edit', panel.data.job)">✏ Modifier</button>
+      <button class="sb-rp-btn" @click="emit('move', panel.data.job, panel.data.tech?.id)">↔ Déplacer / Réassigner</button>
+      <button class="sb-rp-btn" @click="emit('geofix', panel.data.job)">📍 Géofixer sur la carte</button>
+      <button v-if="panel.data?.job?.assignedTech" class="sb-rp-btn sb-ctx-warn" @click="emit('unassign', panel.data.job)">✕ Désaffecter</button>
+    </div>
+  </template>
+
+  <!-- PENDING REQUEST -->
+  <template v-if="panel.mode==='pending'">
+    <div class="sb-rp-body">
+      <div class="sb-rp-color-bar" :style="'background:'+(panel.data?.urgency==='urgent'?'#ef4444':'#f59e0b')"></div>
+      <div v-if="panel.data?.urgency==='urgent'" class="sb-rp-urgent-tag">🚨 Urgent</div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Client</span><strong>{{ panel.data?.customer_name }}</strong></div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Téléphone</span>{{ panel.data?.phone || '—' }}</div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Service</span>{{ panel.data?.service_type }}</div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Problème</span>{{ panel.data?.problem_type || '—' }}</div>
+      <div class="sb-rp-field"><span class="sb-rp-lbl">Adresse</span>{{ panel.data?.address }}</div>
+      <div v-if="panel.data?.budget_label" class="sb-rp-field"><span class="sb-rp-lbl">Budget</span>{{ panel.data?.budget_label }}</div>
+      <div class="sbf-title" style="margin-top:0.75rem">Assigner à</div>
+      <div class="sb-assign-grid">
+        <button v-for="tech in store.technicians" :key="tech.id"
+                class="sb-assign-btn" :style="'border-color:'+TECH_COLORS[tech.colorIdx]"
+                @click="emit('assign-pending', tech.id)">
+          <span class="sb-assign-dot" :style="'background:'+TECH_COLORS[tech.colorIdx]"></span>
+          {{ tech.fullName }}
+        </button>
+      </div>
+    </div>
+  </template>
+</aside>
+</transition>
+</template>
diff --git a/src/modules/dispatch/components/WeekCalendar.vue b/src/modules/dispatch/components/WeekCalendar.vue
new file mode 100644
index 0000000..0bb3bb6
--- /dev/null
+++ b/src/modules/dispatch/components/WeekCalendar.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { inject } from 'vue'
+import {
+  localDateStr, fmtDur, shortAddr, dayLoadColor, stOf,
+  ICON, jobSpansDate,
+} from 'src/composables/useHelpers'
+
+const props = defineProps({
+  filteredResources: Array,
+  dayColumns: Array,
+  selectedTechId: String,
+  dropGhost: Object,
+  todayStr: String,
+})
+
+const emit = defineEmits([
+  'go-to-day', 'select-tech', 'ctx-tech',
+  'tech-reorder-start', 'tech-reorder-drop',
+  'cal-drop', 'job-dragstart', 'job-click', 'job-dblclick', 'job-ctx',
+  'clear-filters',
+])
+
+const store = inject('store')
+const TECH_COLORS = inject('TECH_COLORS')
+const jobColor = inject('jobColor')
+const selectedJob = inject('selectedJob')
+const isJobMultiSelected = inject('isJobMultiSelected')
+const getTagColor = inject('getTagColor')
+
+function isDayToday (d) { return localDateStr(d) === props.todayStr }
+
+defineExpose({ isDayToday })
+</script>
+
+<template>
+<div class="sb-grid sb-grid-cal">
+  <!-- Header -->
+  <div class="sb-grid-hdr">
+    <div class="sb-res-hdr">Ressources <span class="sbf-count">{{ filteredResources.length }}</span></div>
+    <div class="sb-cal-hdr">
+      <div v-for="d in dayColumns" :key="'ch-'+localDateStr(d)"
+           class="sb-cal-hdr-cell" :class="{ 'sb-col-today': isDayToday(d) }"
+           style="cursor:pointer" @click="emit('go-to-day', d)">
+        <span class="sb-cal-wd">{{ d.toLocaleDateString('fr-CA',{weekday:'short'}) }}</span>
+        <span class="sb-cal-dn" :class="{ 'sb-today-bubble': isDayToday(d) }">{{ d.getDate() }}</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Loading / empty -->
+  <div v-if="store.loading" class="sb-loading-row">Chargement…</div>
+  <div v-else-if="!filteredResources.length" class="sb-empty-row">
+    Aucune ressource.
+    <button class="sbf-primary-btn" style="display:inline-block;margin-left:0.75rem" @click="emit('clear-filters')">Réinitialiser</button>
+  </div>
+
+  <!-- Rows -->
+  <div v-for="tech in filteredResources" :key="tech.id"
+       class="sb-row sb-row-cal" :class="{ 'sb-row-sel': selectedTechId===tech.id }">
+    <div class="sb-res-cell" @click="emit('select-tech', tech)" @contextmenu.prevent="emit('ctx-tech', $event, tech)"
+         draggable="true" @dragstart="emit('tech-reorder-start', $event, tech)"
+         @dragover.prevent="()=>{}" @drop.prevent="emit('tech-reorder-drop', $event, tech)">
+      <div class="sb-avatar" :style="'background:'+TECH_COLORS[tech.colorIdx]">
+        {{ tech.fullName.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
+      </div>
+      <div class="sb-res-info">
+        <div class="sb-res-name">{{ tech.fullName }}
+          <span v-for="t in (tech.tags||[]).slice(0,3)" :key="t" class="sb-res-tag-dot" :style="'background:'+getTagColor(t)" :title="t"></span>
+        </div>
+        <div class="sb-res-sub">
+          <span class="sb-st" :class="stOf(tech).cls">{{ stOf(tech).label }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="sb-cal-row">
+      <div v-for="d in dayColumns" :key="localDateStr(d)"
+           class="sb-cal-cell" :class="{ 'sb-bg-today': isDayToday(d), 'sb-bg-alt': dayColumns.indexOf(d)%2===1 }"
+           :data-date-str="localDateStr(d)"
+           @dblclick="emit('go-to-day', d)"
+           @dragover.prevent="()=>{}" @dragleave="()=>{}"
+           @drop.prevent="emit('cal-drop', $event, tech, localDateStr(d))">
+        <div v-if="dropGhost?.techId===tech.id && dropGhost.dateStr===localDateStr(d)" class="sb-cal-drop"></div>
+        <template v-for="job in [...tech.queue.filter(j=>jobSpansDate(j,localDateStr(d))), ...(tech.assistJobs||[]).filter(j=>jobSpansDate(j,localDateStr(d))&&j.assistants.find(a=>a.techId===tech.id)?.pinned).map(j=>({...j,_isAssistChip:true,_assistDur:j.assistants.find(a=>a.techId===tech.id)?.duration||j.duration}))]" :key="job.id+(job._isAssistChip?'-a':'')">
+          <div class="sb-chip"
+               :class="{ 'sb-chip-sel': selectedJob?.job?.id===job.id, 'sb-chip-multi': isJobMultiSelected(job.id), 'sb-chip-assist': job._isAssistChip }"
+               :data-job-id="job.id"
+               :style="'border-left-color:'+jobColor(job)+';background:'+jobColor(job)+'cc;color:#fff'"
+               :draggable="job._isAssistChip ? 'false' : 'true'"
+               @dragstart="!job._isAssistChip && emit('job-dragstart', $event, job, tech.id)"
+               @click.stop="emit('job-click', job, tech.id, false, null, $event)"
+               @dblclick.stop="emit('job-dblclick', job)"
+               @contextmenu.prevent="emit('job-ctx', $event, job, tech.id)">
+            <div class="sb-chip-line1">
+              <span v-if="job.priority==='high'" class="sb-chip-urgent"></span>
+              <span v-if="job._isAssistChip" class="sb-chip-assist-tag" v-html="ICON.pin"></span>
+              {{ job.subject }}
+            </div>
+            <div v-if="job.address" class="sb-chip-line2"><span v-html="ICON.mapPin"></span> {{ shortAddr(job.address) }}</div>
+          </div>
+        </template>
+        <!-- Day load bar -->
+        <div v-if="[...tech.queue.filter(j=>jobSpansDate(j,localDateStr(d)))].length" class="sb-day-load">
+          <div class="sb-day-load-track">
+            <div class="sb-day-load-fill" :style="{ width: Math.min(100, tech.queue.filter(j=>jobSpansDate(j,localDateStr(d))).reduce((a,j)=>a+(parseFloat(j.duration)||0),0)/8*100)+'%', background: dayLoadColor(tech.queue.filter(j=>jobSpansDate(j,localDateStr(d))).reduce((a,j)=>a+(parseFloat(j.duration)||0),0)/8) }"></div>
+          </div>
+          <span class="sb-day-load-label">{{ fmtDur(tech.queue.filter(j=>jobSpansDate(j,localDateStr(d))).reduce((a,j)=>a+(parseFloat(j.duration)||0),0)) }}/8h</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
diff --git a/src/pages/DispatchV2Page.vue b/src/pages/DispatchV2Page.vue
index 14c07ea..ea6714e 100644
--- a/src/pages/DispatchV2Page.vue
+++ b/src/pages/DispatchV2Page.vue
@@ -2,38 +2,43 @@
 import { ref, computed, watch, onMounted, onUnmounted, nextTick, provide } from 'vue'
 import { useDispatchStore } from 'src/stores/dispatch'
 import { TECH_COLORS, MAPBOX_TOKEN } from 'src/config/erpnext'
-import { fetchOpenRequests, updateServiceRequestStatus } from 'src/api/service-request'
+import { fetchOpenRequests } from 'src/api/service-request'
 import { updateJob, updateTech, createTag as apiCreateTag } from 'src/api/dispatch'
+
+// ── Components ──────────────────────────────────────────────────────────────────
 import TagInput from 'src/components/TagInput.vue'
 import TimelineRow from 'src/modules/dispatch/components/TimelineRow.vue'
 import BottomPanel from 'src/modules/dispatch/components/BottomPanel.vue'
 import JobEditModal from 'src/modules/dispatch/components/JobEditModal.vue'
 import WoCreateModal from 'src/modules/dispatch/components/WoCreateModal.vue'
+import WeekCalendar from 'src/modules/dispatch/components/WeekCalendar.vue'
+import MonthCalendar from 'src/modules/dispatch/components/MonthCalendar.vue'
+import RightPanel from 'src/modules/dispatch/components/RightPanel.vue'
+
+// ── Composables ─────────────────────────────────────────────────────────────────
 import {
-  localDateStr, startOfWeek, startOfMonth, timeToH, hToTime, fmtDur,
-  SNAP_MIN, SNAP, snapH, dayLoadColor, shortAddr,
-  SVC_COLORS, SVC_ICONS, jobSvcCode, jobSpansDate, sortJobsByTime,
-  stOf, prioLabel, prioClass, jobStatusIcon,
-  jobColor as _jobColorBase, ICON, jobTypeIcon, prioColor,
+  localDateStr, startOfWeek, startOfMonth, timeToH, fmtDur,
+  SVC_COLORS, prioLabel, prioClass,
+  jobColor as _jobColorBase, ICON, prioColor,
 } from 'src/composables/useHelpers'
 import { useScheduler } from 'src/composables/useScheduler'
 import { useUndo } from 'src/composables/useUndo'
 import { useMap } from 'src/composables/useMap'
 import { useBottomPanel } from 'src/composables/useBottomPanel'
+import { useDragDrop } from 'src/composables/useDragDrop'
+import { useSelection } from 'src/composables/useSelection'
 
 // ─── Store ────────────────────────────────────────────────────────────────────
 const store = useDispatchStore()
 
 // ─── Date / View ─────────────────────────────────────────────────────────────
-const currentView = ref(localStorage.getItem('sbv2-view') || 'week') // 'day'|'week'|'month'
+const currentView = ref(localStorage.getItem('sbv2-view') || 'week')
 const savedDate   = localStorage.getItem('sbv2-date')
 const anchorDate  = ref(savedDate ? new Date(savedDate + 'T00:00:00') : new Date())
 
 watch(currentView, v => localStorage.setItem('sbv2-view', v))
 watch(anchorDate, d => localStorage.setItem('sbv2-date', localDateStr(d)))
 
-// localDateStr, startOfWeek, startOfMonth imported from useHelpers
-
 const periodStart = computed(() => {
   const d = new Date(anchorDate.value); d.setHours(0,0,0,0)
   if (currentView.value === 'day')   return d
@@ -64,7 +69,6 @@ const periodLabel = computed(() => {
   return s.toLocaleDateString('fr-CA', { month:'long', year:'numeric' })
 })
 const todayStr = localDateStr(new Date())
-function isDayToday (d) { return localDateStr(d) === todayStr }
 
 function prevPeriod () {
   const d = new Date(anchorDate.value)
@@ -83,8 +87,6 @@ function nextPeriod () {
 function goToToday () { anchorDate.value = new Date(); currentView.value = 'day' }
 function goToDay (d) { anchorDate.value = new Date(d); currentView.value = 'day' }
 
-// shortAddr imported from useHelpers
-
 // ─── Tags ────────────────────────────────────────────────────────────────────
 const techTagModal = ref(null)
 function getTagColor (tagLabel) {
@@ -92,15 +94,12 @@ function getTagColor (tagLabel) {
   return t?.color || '#6b7280'
 }
 async function onCreateTag (label) {
-  // Create tag in ERPNext and add to store
   try {
     const created = await apiCreateTag(label, 'Custom', '#6b7280')
     if (created) store.allTags.push({ name: created.name, label: created.label, color: created.color || '#6b7280', category: created.category || 'Custom' })
   } catch (e) {
-    // Tag may already exist — add to local list anyway
-    if (!store.allTags.some(t => t.label === label)) {
+    if (!store.allTags.some(t => t.label === label))
       store.allTags.push({ name: label, label, color: '#6b7280', category: 'Custom' })
-    }
   }
 }
 function persistJobTags (job) {
@@ -137,17 +136,16 @@ function selectAddr (addr, target) {
   addrResults.value = []
 }
 
-
 function setEndDate (job, endDate) {
   job.endDate = endDate || null
   updateJob(job.name || job.id, { end_date: endDate || '' }).catch(() => {})
 }
 
 // ─── Layout state ─────────────────────────────────────────────────────────────
-const sidebarCollapsed = ref(localStorage.getItem('sbv2-sideCollapsed') !== 'false') // collapsed by default
-const sidebarFlyout    = ref(null) // 'filter'|'unassigned'|'projects'|null
+const sidebarCollapsed = ref(localStorage.getItem('sbv2-sideCollapsed') !== 'false')
+const sidebarFlyout    = ref(null)
 const mapVisible  = ref(localStorage.getItem('sbv2-map') === 'true')
-const rightPanel  = ref(null)   // { mode: 'details', data: { job, tech } }
+const rightPanel  = ref(null)
 const searchQuery = ref('')
 
 watch(sidebarCollapsed, v => localStorage.setItem('sbv2-sideCollapsed', v ? 'true' : 'false'))
@@ -157,26 +155,16 @@ watch(mapVisible, v => localStorage.setItem('sbv2-map', v ? 'true' : 'false'))
 const editModal = ref(null)
 function openEditModal (job) {
   editModal.value = {
-    job,
-    subject:  job.subject || '',
-    address:  job.address || '',
-    note:     job.note || '',
-    duration: job.duration || 1,
-    priority: job.priority || 'low',
-    tags:     [...(job.tags || [])],
-    latitude: job.latitude || null,
-    longitude: job.longitude || null,
+    job, subject: job.subject || '', address: job.address || '',
+    note: job.note || '', duration: job.duration || 1,
+    priority: job.priority || 'low', tags: [...(job.tags || [])],
+    latitude: job.latitude || null, longitude: job.longitude || null,
   }
 }
 function confirmEdit () {
   if (!editModal.value) return
   const { job, subject, address, note, duration, priority, tags, latitude, longitude } = editModal.value
-  job.subject  = subject
-  job.address  = address
-  job.note     = note
-  job.duration = parseFloat(duration) || 1
-  job.priority = priority
-  job.tags     = [...tags]
+  Object.assign(job, { subject, address, note, duration: parseFloat(duration) || 1, priority, tags: [...tags] })
   if (latitude) job.latitude = latitude
   if (longitude) job.longitude = longitude
   updateJob(job.name || job.id, {
@@ -198,36 +186,25 @@ watch(filterStatus, v => localStorage.setItem('sbv2-filterStatus', v))
 const resSelectorOpen  = ref(false)
 const tempSelectedIds  = ref([])
 
-const techSort     = ref(localStorage.getItem('sbv2-techSort') || 'default') // 'default'|'alpha'|'manual'
-const manualOrder  = ref(JSON.parse(localStorage.getItem('sbv2-techOrder') || '[]'))
+const techSort    = ref(localStorage.getItem('sbv2-techSort') || 'default')
+const manualOrder = ref(JSON.parse(localStorage.getItem('sbv2-techOrder') || '[]'))
 watch(techSort, v => localStorage.setItem('sbv2-techSort', v))
 
 const filteredResources = computed(() => {
   let list = store.technicians
-  if (searchQuery.value) {
-    const q = searchQuery.value.toLowerCase()
-    list = list.filter(t => t.fullName.toLowerCase().includes(q))
-  }
+  if (searchQuery.value) { const q = searchQuery.value.toLowerCase(); list = list.filter(t => t.fullName.toLowerCase().includes(q)) }
   if (filterStatus.value) list = list.filter(t => (t.status||'available') === filterStatus.value)
   if (selectedResIds.value.length) list = list.filter(t => selectedResIds.value.includes(t.id))
   if (filterTags.value.length) list = list.filter(t => filterTags.value.every(ft => (t.tags||[]).includes(ft)))
   if (techSort.value === 'alpha') {
-    list = [...list].sort((a, b) => {
-      const aLast = a.fullName.split(' ').pop().toLowerCase()
-      const bLast = b.fullName.split(' ').pop().toLowerCase()
-      return aLast.localeCompare(bLast)
-    })
+    list = [...list].sort((a, b) => a.fullName.split(' ').pop().toLowerCase().localeCompare(b.fullName.split(' ').pop().toLowerCase()))
   } else if (techSort.value === 'manual' && manualOrder.value.length) {
     const order = manualOrder.value
-    list = [...list].sort((a, b) => {
-      const ai = order.indexOf(a.id); const bi = order.indexOf(b.id)
-      return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)
-    })
+    list = [...list].sort((a, b) => (order.indexOf(a.id) === -1 ? 999 : order.indexOf(a.id)) - (order.indexOf(b.id) === -1 ? 999 : order.indexOf(b.id)))
   }
   return list
 })
 
-// Drag-reorder techs
 const dragReorderTech = ref(null)
 function onTechReorderStart (e, tech) {
   dragReorderTech.value = tech
@@ -239,12 +216,9 @@ function onTechReorderDrop (e, targetTech) {
   if (!dragReorderTech.value || dragReorderTech.value.id === targetTech.id) { dragReorderTech.value = null; return }
   techSort.value = 'manual'
   const ids = filteredResources.value.map(t => t.id)
-  const fromIdx = ids.indexOf(dragReorderTech.value.id)
-  const toIdx = ids.indexOf(targetTech.id)
-  ids.splice(fromIdx, 1)
-  ids.splice(toIdx, 0, dragReorderTech.value.id)
-  manualOrder.value = ids
-  localStorage.setItem('sbv2-techOrder', JSON.stringify(ids))
+  const fromIdx = ids.indexOf(dragReorderTech.value.id), toIdx = ids.indexOf(targetTech.id)
+  ids.splice(fromIdx, 1); ids.splice(toIdx, 0, dragReorderTech.value.id)
+  manualOrder.value = ids; localStorage.setItem('sbv2-techOrder', JSON.stringify(ids))
   dragReorderTech.value = null
 }
 
@@ -252,43 +226,27 @@ function openResSelector () { tempSelectedIds.value = [...selectedResIds.value];
 function applyResSelector () { selectedResIds.value = [...tempSelectedIds.value]; resSelectorOpen.value = false }
 function toggleTempRes (id) {
   const idx = tempSelectedIds.value.indexOf(id)
-  if (idx >= 0) tempSelectedIds.value.splice(idx, 1)
-  else tempSelectedIds.value.push(id)
+  if (idx >= 0) tempSelectedIds.value.splice(idx, 1); else tempSelectedIds.value.push(id)
 }
 function clearFilters () { selectedResIds.value = []; filterStatus.value = ''; searchQuery.value = ''; filterTags.value = []; localStorage.removeItem('sbv2-filterTags') }
 
-// ─── Job schedule helpers — backed by store (ERPNext) ─────────────────────────
-function getJobDate (jobId) {
-  return store.jobs.find(j => j.id === jobId)?.scheduledDate || null
-}
-function getJobTime (jobId) {
-  return store.jobs.find(j => j.id === jobId)?.startTime || null
-}
+// ─── Job schedule helpers ─────────────────────────────────────────────────────
+function getJobDate (jobId) { return store.jobs.find(j => j.id === jobId)?.scheduledDate || null }
+function getJobTime (jobId) { return store.jobs.find(j => j.id === jobId)?.startTime || null }
 function setJobTime (jobId, time) {
   const job = store.jobs.find(j => j.id === jobId)
   if (!job) return
   store.setJobSchedule(jobId, job.scheduledDate, time || null)
   job.startHour = time ? timeToH(time) : null
 }
-// timeToH, hToTime, fmtDur, dayLoadColor, sortJobsByTime imported from useHelpers
 
-
-// Time-pin modal
-const timeModal = ref(null)  // { job, techId, time }
+const timeModal = ref(null)
 function openTimeModal (job, techId) {
   const cur = getJobTime(job.id)
   timeModal.value = { job, techId, time: cur || '08:00', hasPin: !!cur }
 }
-function confirmTime () {
-  if (!timeModal.value) return
-  setJobTime(timeModal.value.job.id, timeModal.value.time)
-  timeModal.value = null
-}
-function clearTime () {
-  if (!timeModal.value) return
-  setJobTime(timeModal.value.job.id, null)
-  timeModal.value = null
-}
+function confirmTime () { if (!timeModal.value) return; setJobTime(timeModal.value.job.id, timeModal.value.time); timeModal.value = null }
+function clearTime () { if (!timeModal.value) return; setJobTime(timeModal.value.job.id, null); timeModal.value = null }
 
 // ─── Unscheduled / Pending ────────────────────────────────────────────────────
 const pendingReqs    = ref([])
@@ -301,34 +259,25 @@ async function loadPendingReqs () {
 const unscheduledJobs = computed(() => store.jobs.filter(j => !j.assignedTech))
 const teamJobs = computed(() => store.jobs.filter(j => j.assistants?.length > 0))
 
-// ─── Bottom panel composable ──────────────────────────────────────────────────
-// (extracted to useBottomPanel.js — wired after pushUndo/smartAssign/invalidateRoutes are defined)
-
-// ─── Service colors & labels ──────────────────────────────────────────────────
-// SVC_COLORS, SVC_ICONS, jobSvcCode imported from useHelpers
-// jobColor wrapper (needs store access)
+// ─── Job color ────────────────────────────────────────────────────────────────
 function jobColor (job) { return _jobColorBase(job, TECH_COLORS, store) }
 
 // ─── Timeline geometry ────────────────────────────────────────────────────────
-const PX_PER_HR  = ref(80)
-const ROW_H      = 68
-
+const PX_PER_HR = ref(80)
+const ROW_H     = 68
 const pxPerHr = computed(() => {
   if (currentView.value === 'week')  return PX_PER_HR.value * 0.55
   if (currentView.value === 'month') return 0
   return PX_PER_HR.value
 })
-const dayW = computed(() => {
-  if (currentView.value === 'month') return 110
-  return (H_END - H_START) * pxPerHr.value
-})
+const dayW = computed(() => currentView.value === 'month' ? 110 : (H_END - H_START) * pxPerHr.value)
 const totalW = computed(() => dayW.value * periodDays.value)
 
 // ─── Scheduler composable ────────────────────────────────────────────────────
 const {
   H_START, H_END, routeLegs, routeGeometry,
   techAllJobsForDate, techDayJobsWithTravel,
-  techBookingsByDay, periodLoadH, techsActiveOnDay, dayJobCount,
+  periodLoadH,
 } = useScheduler(store, currentView, periodStart, periodDays, dayColumns, pxPerHr, getJobDate, getJobTime, jobColor)
 
 const hourTicks = computed(() => {
@@ -343,440 +292,14 @@ const hourTicks = computed(() => {
   return ticks
 })
 
-function blockStyle (job, techId) {
-  const dateStr = getJobDate(job.id)
-  if (!dateStr) return null
-  const jd = new Date(dateStr + 'T00:00:00')
-  const ps = new Date(periodStart.value); ps.setHours(0,0,0,0)
-  const pe = new Date(ps); pe.setDate(pe.getDate() + periodDays.value)
-  if (jd < ps || jd >= pe) return null
-  const di   = Math.round((jd - ps) / 86400000)
-  const dur  = parseFloat(job.duration) || 1
-  const startH = job.startHour ?? 8
-  if (currentView.value === 'month') {
-    return { left: (di * 110 + 2) + 'px', width: Math.max(40, dur * 16) + 'px', top:'6px', bottom:'6px', position:'absolute' }
-  }
-  const left  = di * dayW.value + (startH - H_START) * pxPerHr.value
-  const width = Math.max(18, dur * 60 * (pxPerHr.value / 60))
-  return { left: left+'px', width: width+'px', top:'6px', bottom:'6px', position:'absolute' }
-}
+const isCalView = computed(() => currentView.value === 'week')
+const unassignDropActive = ref(false)
 
-function techBookings (tech) {
-  return tech.queue.map(job => ({ job, style: blockStyle(job, tech.id) })).filter(b => b.style)
-}
+// ─── Undo composable ─────────────────────────────────────────────────────────
+const { pushUndo, performUndo } = useUndo(store, invalidateRoutes)
 
-// techDayJobsWithTravel, routeLegs, routeGeometry, techAllJobsForDate from useScheduler
-
-// computeDayRoute, drawMapMarkers, drawSelectedRoute — provided by useMap composable (below)
-// Forward-declared as let so invalidateRoutes/watchers can reference them before composable init
-let computeDayRoute = () => {}, drawMapMarkers = () => {}, drawSelectedRoute = () => {}, getMap = () => null
-
-// Invalidate cached routes and recompute (called after job assign/move/unassign)
-function invalidateRoutes () {
-  routeLegs.value = {}
-  routeGeometry.value = {}
-  if (currentView.value === 'day') {
-    const ds = localDateStr(periodStart.value)
-    filteredResources.value.forEach(tech => computeDayRoute(tech, ds))
-  }
-  nextTick(() => { if (getMap()) { drawMapMarkers(); drawSelectedRoute() } })
-}
-
-// Trigger route fetches whenever day view is shown or date changes
-watch(
-  [currentView, () => anchorDate.value.getTime(), filteredResources],
-  () => {
-    if (currentView.value !== 'day') return
-    // Clear old routes so stale data doesn't linger while new routes load
-    routeLegs.value = {}
-    routeGeometry.value = {}
-    const ds = localDateStr(periodStart.value)
-    filteredResources.value.forEach(tech => computeDayRoute(tech, ds))
-    if (getMap()) { drawMapMarkers(); drawSelectedRoute() }
-  },
-)
-
-// Calendar view: group jobs by day column
-// jobSpansDate imported from useHelpers
-
-// techBookingsByDay, periodLoadH from useScheduler
-const isCalView  = computed(() => currentView.value === 'week')
-
-// Month view helpers
-const monthWeeks = computed(() => {
-  if (currentView.value !== 'month') return []
-  const first = new Date(anchorDate.value.getFullYear(), anchorDate.value.getMonth(), 1)
-  const last  = new Date(anchorDate.value.getFullYear(), anchorDate.value.getMonth() + 1, 0)
-  const start = startOfWeek(first)
-  const end   = new Date(last)
-  const dow   = end.getDay()
-  if (dow !== 0) end.setDate(end.getDate() + (7 - dow))
-  const weeks = []; let cur = new Date(start)
-  while (cur <= end) {
-    const week = []
-    for (let i = 0; i < 7; i++) { week.push(new Date(cur)); cur.setDate(cur.getDate() + 1) }
-    weeks.push(week)
-  }
-  return weeks
-})
-// techsActiveOnDay, dayJobCount from useScheduler (need filteredResources wrapper)
-function techsActiveOnDayW (dateStr) { return techsActiveOnDay(dateStr, filteredResources.value) }
-function dayJobCountW (dateStr) { return dayJobCount(dateStr, filteredResources.value) }
-
-// ─── Drag & Drop ─────────────────────────────────────────────────────────────
-const dragJob    = ref(null)
-const dragSrc    = ref(null)  // source techId or null
-const dragIsAssist = ref(false) // true when dragging an assist block
-const dropGhost  = ref(null)  // { techId, x, dateStr }
-
-function cleanupDropIndicators () {
-  document.querySelectorAll('.sb-block-drop-hover').forEach(el => el.classList.remove('sb-block-drop-hover'))
-  dropGhost.value = null
-}
-const dragBatchIds = ref(null) // Set of job IDs when multi-dragging from bottom panel
-function onJobDragStart (e, job, srcTechId, isAssist = false) {
-  dragJob.value = job; dragSrc.value = srcTechId || null; dragIsAssist.value = isAssist
-  // Multi-drag: if this job is part of a bottom-panel selection, carry all selected
-  if (!srcTechId && bottomSelected.value.size > 1 && bottomSelected.value.has(job.id)) {
-    dragBatchIds.value = new Set(bottomSelected.value)
-    e.dataTransfer.setData('text/plain', `batch:${dragBatchIds.value.size}`)
-  } else {
-    dragBatchIds.value = null
-  }
-  e.dataTransfer.effectAllowed = 'move'
-  e.target.addEventListener('dragend', () => { cleanupDropIndicators(); dragIsAssist.value = false; dragBatchIds.value = null }, { once: true })
-}
-function onTimelineDragOver (e, tech) {
-  e.preventDefault()
-  if (!dragJob.value && !dragTech.value) return
-  const x = e.clientX - e.currentTarget.getBoundingClientRect().left
-  dropGhost.value = { techId: tech.id, x, dateStr: xToDateStr(x) }
-}
-function onTimelineDragLeave (e) {
-  if (!e.currentTarget.contains(e.relatedTarget)) dropGhost.value = null
-}
-// ─── Tech drag (for assistant assignment) ─────────────────────────────────────
-const dragTech = ref(null)
-function onTechDragStart (e, tech) {
-  dragTech.value = tech
-  dragReorderTech.value = tech
-  e.dataTransfer.effectAllowed = 'copyMove'
-  e.dataTransfer.setData('text/plain', tech.id)
-  e.target.addEventListener('dragend', () => { dragTech.value = null; cleanupDropIndicators() }, { once: true })
-}
-function onBlockDrop (e, job) {
-  if (dragTech.value) {
-    e.preventDefault()
-    e.stopPropagation()
-    cleanupDropIndicators()
-    pushUndo({ type: 'removeAssistant', jobId: job.id, techId: dragTech.value.id, duration: 0, note: '' })
-    store.addAssistant(job.id, dragTech.value.id)
-    dragTech.value = null
-    invalidateRoutes()
-  }
-  // For job reorder: don't stop or prevent — let it bubble to onTimelineDrop
-}
-
-
-// ─── Snap helper (5min grid) ──────────────────────────────────────────────────
-// SNAP_MIN, SNAP, snapH imported from useHelpers
-
-// ─── Block horizontal move (drag to reposition in timeline) ───────────────────
-function startBlockMove (e, job, block) {
-  if (e.button !== 0) return
-  const startX = e.clientX
-  const startY = e.clientY
-  const startLeft = parseFloat(block.style.left) || 0
-  let moving = false
-
-  function onMove (ev) {
-    const dx = ev.clientX - startX
-    const dy = ev.clientY - startY
-    // If vertical movement > horizontal, abort (let HTML5 drag handle it)
-    if (!moving && Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 5) { cleanup(); return }
-    if (!moving && Math.abs(dx) > 5) { moving = true; block.style.zIndex = '10' }
-    if (!moving) return
-    ev.preventDefault()
-    const newLeft = Math.max(0, startLeft + dx)
-    const newH = snapH(H_START + newLeft / pxPerHr.value)
-    block.style.left = ((newH - H_START) * pxPerHr.value) + 'px'
-    const meta = block.querySelector('.sb-block-meta')
-    if (meta) meta.textContent = `${hToTime(newH)} · ${fmtDur(job.duration)}`
-  }
-
-  function cleanup () {
-    document.removeEventListener('mousemove', onMove)
-    document.removeEventListener('mouseup', onUp)
-  }
-
-  function onUp (ev) {
-    cleanup()
-    if (!moving) return // was a click
-    block.style.zIndex = ''
-    const dx = ev.clientX - startX
-    const newLeft = Math.max(0, startLeft + dx)
-    const newH = snapH(H_START + newLeft / pxPerHr.value)
-    const time = hToTime(newH)
-    job.startHour = newH
-    job.startTime = time
-    store.setJobSchedule(job.id, job.scheduledDate, time)
-    invalidateRoutes()
-  }
-
-  document.addEventListener('mousemove', onMove)
-  document.addEventListener('mouseup', onUp)
-}
-
-// ─── Block resize ─────────────────────────────────────────────────────────────
-function startResize (e, job, mode, assistTechId) {
-  e.preventDefault()
-  const startX   = e.clientX
-  const startDur = mode === 'assist'
-    ? (job.assistants.find(a => a.techId === assistTechId)?.duration || job.duration)
-    : job.duration
-  const block    = e.target.parentElement
-  const startW   = block.offsetWidth
-
-  function onMove (ev) {
-    const dx     = ev.clientX - startX
-    const newW   = Math.max(18, startW + dx)
-    const newDur = Math.max(SNAP, snapH(newW / pxPerHr.value))
-    block.style.width = (newDur * pxPerHr.value) + 'px'
-    // Live label update
-    const meta = block.querySelector('.sb-block-meta')
-    if (meta) {
-      meta.textContent = mode === 'assist'
-        ? `assistant · ${fmtDur(newDur)}`
-        : fmtDur(newDur)
-    }
-  }
-
-  function onUp (ev) {
-    document.removeEventListener('mousemove', onMove)
-    document.removeEventListener('mouseup', onUp)
-    const dx     = ev.clientX - startX
-    const newW   = Math.max(18, startW + dx)
-    const newDur = Math.max(SNAP, snapH(newW / pxPerHr.value))
-
-    if (mode === 'assist' && assistTechId) {
-      const assist = job.assistants.find(a => a.techId === assistTechId)
-      if (assist) {
-        assist.duration = newDur
-        updateJob(job.name || job.id, {
-          assistants: job.assistants.map(a => ({ tech_id: a.techId, tech_name: a.techName, duration_h: a.duration, note: a.note || '', pinned: a.pinned ? 1 : 0 })),
-        }).catch(() => {})
-      }
-    } else {
-      job.duration = newDur
-      updateJob(job.name || job.id, { duration_h: newDur }).catch(() => {})
-    }
-    invalidateRoutes()
-  }
-
-  document.addEventListener('mousemove', onMove)
-  document.addEventListener('mouseup', onUp)
-}
-
-function assignDroppedJob (tech, dateStr) {
-  if (!dragJob.value) return
-  if (dragIsAssist.value) {
-    dragJob.value = null; dragSrc.value = null; dragIsAssist.value = false
-    return
-  }
-  // Batch drag from bottom panel
-  if (dragBatchIds.value && dragBatchIds.value.size > 1) {
-    dragBatchIds.value.forEach(jobId => {
-      const j = store.jobs.find(x => x.id === jobId)
-      if (j && !j.assignedTech) {
-        pushUndo({ type: 'unassignJob', jobId: j.id, techId: j.assignedTech, routeOrder: j.routeOrder, scheduledDate: j.scheduledDate, assistants: [...(j.assistants||[])] })
-        smartAssign(j, tech.id, dateStr)
-      }
-    })
-    bottomSelected.value = new Set()
-    dragBatchIds.value = null
-  } else {
-    const job = dragJob.value
-    pushUndo({ type: 'unassignJob', jobId: job.id, techId: job.assignedTech, routeOrder: job.routeOrder, scheduledDate: job.scheduledDate, assistants: [...(job.assistants||[])] })
-    smartAssign(job, tech.id, dateStr)
-  }
-  dropGhost.value = null; dragJob.value = null; dragSrc.value = null
-  invalidateRoutes()
-}
-function onTimelineDrop (e, tech) {
-  e.preventDefault()
-  cleanupDropIndicators()
-
-  // Tech dropped on timeline → check if over a block to add as assistant
-  if (dragTech.value) {
-    const els = document.elementsFromPoint(e.clientX, e.clientY)
-    const blockEl = els.find(el => el.dataset?.jobId)
-    if (blockEl) {
-      const job = store.jobs.find(j => j.id === blockEl.dataset.jobId)
-      if (job) {
-        pushUndo({ type: 'removeAssistant', jobId: job.id, techId: dragTech.value.id, duration: 0, note: '' })
-        store.addAssistant(job.id, dragTech.value.id)
-        dragTech.value = null
-        invalidateRoutes()
-        return
-      }
-    }
-    dragTech.value = null
-    return
-  }
-
-  if (!dragJob.value) return
-
-  // If dropping a job already on this tech → reorder based on drop X position
-  if (dragJob.value.assignedTech === tech.id) {
-    const rect = e.currentTarget.getBoundingClientRect()
-    const x = (e.clientX || e.pageX) - rect.left
-    const dropH = H_START + x / pxPerHr.value
-    const dayStr = localDateStr(periodStart.value)
-
-    pushUndo({ type: 'optimizeRoute', techId: tech.id, prevQueue: [...tech.queue] })
-
-    // Remove dragged job from queue
-    const draggedJob = dragJob.value
-    tech.queue = tech.queue.filter(j => j.id !== draggedJob.id)
-
-    // Find insert index: count how many remaining day-jobs have a rendered position before dropH
-    const dayJobs = tech.queue.filter(j => getJobDate(j.id) === dayStr)
-    let insertBefore = dayJobs.length // default: end
-    for (let i = 0; i < dayJobs.length; i++) {
-      // Use routeOrder as proxy for position
-      const globalIdx = tech.queue.indexOf(dayJobs[i])
-      if (globalIdx >= 0) {
-        // Estimate this job's start position based on queue order
-        insertBefore = i
-        // We want to insert before the first job that would appear after the drop point
-        // Simple: use the midpoint of each block as threshold
-        break
-      }
-    }
-
-    // Simpler approach: insert at position based on drop hour relative to block count
-    // Re-insert at the right queue position
-    const queueDayStart = tech.queue.findIndex(j => getJobDate(j.id) === dayStr)
-    const dayCount = dayJobs.length
-    // Map dropH to a slot index: divide the timeline into N+1 slots
-    let slot = dayCount // end by default
-    let cursor = 8
-    for (let i = 0; i < dayJobs.length; i++) {
-      const dur = parseFloat(dayJobs[i].duration) || 1
-      const midpoint = cursor + dur / 2
-      if (dropH < midpoint) { slot = i; break }
-      cursor += dur + 0.5 // rough travel gap
-    }
-
-    const insertAt = queueDayStart >= 0 ? queueDayStart + slot : tech.queue.length
-    tech.queue.splice(insertAt, 0, draggedJob)
-
-    tech.queue.forEach((q, i) => {
-      q.routeOrder = i
-      updateJob(q.name || q.id, { route_order: i }).catch(() => {})
-    })
-    dragJob.value = null; dragSrc.value = null
-    invalidateRoutes()
-    return
-  }
-
-  // Assist blocks can only reorder, not reassign
-  if (dragIsAssist.value) {
-    dragJob.value = null; dragSrc.value = null; dragIsAssist.value = false
-    return
-  }
-
-  // Otherwise: assign from unassigned or another tech
-  assignDroppedJob(tech, xToDateStr(e.clientX - e.currentTarget.getBoundingClientRect().left))
-}
-function onCalDrop (e, tech, dateStr) {
-  assignDroppedJob(tech, dateStr)
-}
-function xToDateStr (x) {
-  const di = Math.max(0, Math.min(periodDays.value - 1, Math.floor(x / dayW.value)))
-  const d  = new Date(periodStart.value); d.setDate(d.getDate() + di)
-  return localDateStr(d)
-}
-
-// ─── Context menu ─────────────────────────────────────────────────────────────
-const ctxMenu = ref(null)
-function openCtxMenu (e, job, techId) {
-  e.preventDefault(); e.stopPropagation()
-  ctxMenu.value = { x: Math.min(e.clientX, window.innerWidth-180), y: Math.min(e.clientY, window.innerHeight-200), job, techId }
-}
-function closeCtxMenu () { ctxMenu.value = null }
-
-// ─── Assistant context menu ───────────────────────────────────────────────────
-const assistCtx = ref(null)
-function openAssistCtx (e, job, techId) {
-  e.preventDefault(); e.stopPropagation()
-  assistCtx.value = { x: Math.min(e.clientX, window.innerWidth-200), y: Math.min(e.clientY, window.innerHeight-150), job, techId }
-}
-function assistCtxTogglePin () {
-  if (!assistCtx.value) return
-  const { job, techId } = assistCtx.value
-  const assist = job.assistants.find(a => a.techId === techId)
-  if (assist) {
-    assist.pinned = !assist.pinned
-    updateJob(job.name || job.id, {
-      assistants: job.assistants.map(a => ({ tech_id: a.techId, tech_name: a.techName, duration_h: a.duration, note: a.note || '', pinned: a.pinned ? 1 : 0 })),
-    }).catch(() => {})
-    invalidateRoutes()
-  }
-  assistCtx.value = null
-}
-function assistCtxRemove () {
-  if (!assistCtx.value) return
-  store.removeAssistant(assistCtx.value.job.id, assistCtx.value.techId)
-  invalidateRoutes()
-  assistCtx.value = null
-}
-function assistCtxNote () {
-  if (!assistCtx.value) return
-  const { job, techId } = assistCtx.value
-  const assist = job.assistants.find(a => a.techId === techId)
-  assistNoteModal.value = { job, techId, note: assist?.note || '' }
-  assistCtx.value = null
-}
-const assistNoteModal = ref(null)
-function confirmAssistNote () {
-  if (!assistNoteModal.value) return
-  const { job, techId, note } = assistNoteModal.value
-  const assist = job.assistants.find(a => a.techId === techId)
-  if (assist) {
-    assist.note = note
-    updateJob(job.name || job.id, {
-      assistants: job.assistants.map(a => ({ tech_id: a.techId, tech_name: a.techName, duration_h: a.duration, note: a.note || '', pinned: a.pinned ? 1 : 0 })),
-    }).catch(() => {})
-  }
-  assistNoteModal.value = null
-}
-
-function ctxDetails () {
-  const { job, techId } = ctxMenu.value
-  const tech = store.technicians.find(t => t.id === techId)
-  rightPanel.value = { mode: 'details', data: { job, tech } }; closeCtxMenu()
-}
-function ctxMove () {
-  const { job, techId } = ctxMenu.value
-  openMoveModal(job, techId); closeCtxMenu()
-}
-// Centralized unassign: clears assistants and rebuilds assistJobs
-function fullUnassign (job) {
-  pushUndo({ type: 'unassignJob', jobId: job.id, techId: job.assignedTech, routeOrder: job.routeOrder, scheduledDate: job.scheduledDate, assistants: [...job.assistants] })
-  if (job.assistants.length) {
-    job.assistants = []
-    updateJob(job.name || job.id, { assistants: [] }).catch(() => {})
-  }
-  store.unassignJob(job.id)
-  store.technicians.forEach(t => { t.assistJobs = store.jobs.filter(j => j.assistants.some(a => a.techId === t.id)) })
-  if (selectedJob.value?.job?.id === job.id) selectedJob.value = null
-  invalidateRoutes()
-}
-
-// Smart assign: if new tech is an assistant, remove circular dependency
+// ─── Smart assign & full unassign ─────────────────────────────────────────────
 function smartAssign (job, newTechId, dateStr) {
-  // Remove the new tech from assistants if they're listed
   if (job.assistants.some(a => a.techId === newTechId)) {
     job.assistants = job.assistants.filter(a => a.techId !== newTechId)
     updateJob(job.name || job.id, {
@@ -787,20 +310,15 @@ function smartAssign (job, newTechId, dateStr) {
   store.technicians.forEach(t => { t.assistJobs = store.jobs.filter(j => j.assistants.some(a => a.techId === t.id)) })
 }
 
-function ctxUnschedule () {
-  const { job } = ctxMenu.value
-  fullUnassign(job)
-  closeCtxMenu()
+function fullUnassign (job) {
+  pushUndo({ type: 'unassignJob', jobId: job.id, techId: job.assignedTech, routeOrder: job.routeOrder, scheduledDate: job.scheduledDate, assistants: [...job.assistants] })
+  if (job.assistants.length) { job.assistants = []; updateJob(job.name || job.id, { assistants: [] }).catch(() => {}) }
+  store.unassignJob(job.id)
+  store.technicians.forEach(t => { t.assistJobs = store.jobs.filter(j => j.assistants.some(a => a.techId === t.id)) })
+  if (selectedJob.value?.job?.id === job.id) selectedJob.value = null
+  invalidateRoutes()
 }
 
-// ─── Selection, Hover & Undo ─────────────────────────────────────────────────
-const hoveredJobId  = ref(null)
-const selectedJob   = ref(null)   // { job, techId, isAssist?, assistTechId? }
-const multiSelect   = ref([])     // [{ job, techId, isAssist?, assistTechId? }]
-const unassignDropActive = ref(false)
-// ─── Undo composable ─────────────────────────────────────────────────────────
-const { pushUndo, performUndo } = useUndo(store, invalidateRoutes)
-
 // ─── Bottom panel composable ──────────────────────────────────────────────────
 const {
   bottomPanelOpen, bottomPanelH, unassignedGrouped, startBottomResize,
@@ -809,217 +327,34 @@ const {
   btColWidths, btColW, startColResize,
 } = useBottomPanel(store, todayStr, unscheduledJobs, { pushUndo, smartAssign, invalidateRoutes, periodStart })
 
-// Check if a tech row should be elevated (has a linked block for hovered/selected job)
-function techHasLinkedJob (tech) {
-  const hId = hoveredJobId.value
-  const sId = selectedJob.value?.job?.id
-  // Hovering a lead block → elevate rows with assistant blocks for that job
-  if (hId && (tech.assistJobs || []).some(j => j.id === hId)) return true
-  // Hovering an assistant block → elevate the row of the lead tech
-  if (hId && tech.queue.some(j => j.id === hId)) return true
-  // Selected (non-assist) → elevate assistant rows
-  if (sId && !selectedJob.value?.isAssist && (tech.assistJobs || []).some(j => j.id === sId)) return true
-  // Selected assist → elevate lead row
-  if (sId && selectedJob.value?.isAssist && tech.queue.some(j => j.id === sId)) return true
-  return false
-}
-
-// Check if this tech's row is the one being hovered (lead block with assistants)
-function techIsHovered (tech) {
-  const hId = hoveredJobId.value
-  if (!hId) return false
-  const job = tech.queue.find(j => j.id === hId)
-  return job && job.assistants?.length > 0
-}
+// ─── Selection composable ────────────────────────────────────────────────────
+const {
+  hoveredJobId, selectedJob, multiSelect,
+  selectJob: _selectJob, isJobMultiSelected, batchUnassign, batchMoveTo,
+  lasso, boardScroll, lassoStyle, startLasso, moveLasso, endLasso,
+  techHasLinkedJob, techIsHovered,
+} = useSelection({ store, periodStart, smartAssign, invalidateRoutes, fullUnassign })
 
+// Wrap selectJob to pass rightPanel ref
 function selectJob (job, techId, isAssist = false, assistTechId = null, event = null) {
-  const entry = { job, techId, isAssist, assistTechId }
-  const isMulti = event && (event.ctrlKey || event.metaKey)
-
-  if (isMulti) {
-    const idx = multiSelect.value.findIndex(s => s.job.id === job.id && s.isAssist === isAssist)
-    if (idx >= 0) multiSelect.value.splice(idx, 1)
-    else multiSelect.value.push(entry)
-    selectedJob.value = entry
-  } else {
-    multiSelect.value = []
-    const same = selectedJob.value?.job?.id === job.id && selectedJob.value?.isAssist === isAssist && selectedJob.value?.assistTechId === assistTechId
-    selectedJob.value = same ? null : entry
-    // Single click → open right panel with details
-    if (!same) {
-      const tech = store.technicians.find(t => t.id === (techId || job.assignedTech))
-      rightPanel.value = { mode: 'details', data: { job, tech: tech || null } }
-    } else {
-      rightPanel.value = null
-    }
-  }
+  _selectJob(job, techId, isAssist, assistTechId, event, rightPanel)
 }
 
-function isJobMultiSelected (jobId, isAssist = false) {
-  return multiSelect.value.some(s => s.job.id === jobId && s.isAssist === isAssist)
-}
-
-function batchUnassign () {
-  if (!multiSelect.value.length) return
-  multiSelect.value.forEach(s => {
-    if (s.isAssist && s.assistTechId) {
-      store.removeAssistant(s.job.id, s.assistTechId)
-    } else {
-      fullUnassign(s.job)
-    }
-  })
-  multiSelect.value = []
-  selectedJob.value = null
-  invalidateRoutes()
-}
-
-// ─── Lasso selection ─────────────────────────────────────────────────────────
-const lasso = ref(null) // { x1, y1, x2, y2 } in board-relative coords
-const boardScroll = ref(null)
-
-const lassoStyle = computed(() => {
-  if (!lasso.value) return {}
-  const l = lasso.value
-  const left = Math.min(l.x1, l.x2)
-  const top = Math.min(l.y1, l.y2)
-  const width = Math.abs(l.x2 - l.x1)
-  const height = Math.abs(l.y2 - l.y1)
-  return { left: left + 'px', top: top + 'px', width: width + 'px', height: height + 'px' }
+// ─── Drag & Drop composable ──────────────────────────────────────────────────
+const {
+  dragJob, dragSrc, dragIsAssist, dropGhost,
+  onJobDragStart, onTimelineDragOver, onTimelineDragLeave,
+  onTechDragStart,
+  onTimelineDrop, onCalDrop,
+  startBlockMove, startResize,
+} = useDragDrop({
+  store, pxPerHr, dayW, periodStart, periodDays, H_START,
+  getJobDate, bottomSelected,
+  pushUndo, smartAssign, invalidateRoutes,
 })
 
-function startLasso (e) {
-  if (e.target.closest('.sb-block, .sb-chip, .sb-res-cell, .sb-travel-trail, button, input, select, a')) return
-  if (e.button !== 0) return
-  e.preventDefault()
-  // Click on empty space clears selection
-  if (!e.ctrlKey && !e.metaKey) {
-    if (selectedJob.value || multiSelect.value.length) {
-      selectedJob.value = null
-      multiSelect.value = []
-    }
-  }
-  const rect = boardScroll.value.getBoundingClientRect()
-  const x = e.clientX - rect.left + boardScroll.value.scrollLeft
-  const y = e.clientY - rect.top + boardScroll.value.scrollTop
-  lasso.value = { x1: x, y1: y, x2: x, y2: y }
-}
-
-function moveLasso (e) {
-  if (!lasso.value) return
-  e.preventDefault()
-  const rect = boardScroll.value.getBoundingClientRect()
-  lasso.value.x2 = e.clientX - rect.left + boardScroll.value.scrollLeft
-  lasso.value.y2 = e.clientY - rect.top + boardScroll.value.scrollTop
-}
-
-function endLasso () {
-  if (!lasso.value) return
-  const l = lasso.value
-  const w = Math.abs(l.x2 - l.x1)
-  const h = Math.abs(l.y2 - l.y1)
-
-  // Only select if the rectangle is meaningful (>10px)
-  if (w > 10 && h > 10) {
-    const boardRect = boardScroll.value.getBoundingClientRect()
-    const lassoLeft = Math.min(l.x1, l.x2) - boardScroll.value.scrollLeft + boardRect.left
-    const lassoTop = Math.min(l.y1, l.y2) - boardScroll.value.scrollTop + boardRect.top
-    const lassoRight = lassoLeft + w
-    const lassoBottom = lassoTop + h
-
-    // Find all blocks that intersect the lasso rectangle
-    const blocks = boardScroll.value.querySelectorAll('.sb-block[data-job-id], .sb-chip')
-    const selected = []
-    blocks.forEach(el => {
-      const r = el.getBoundingClientRect()
-      if (r.right > lassoLeft && r.left < lassoRight && r.bottom > lassoTop && r.top < lassoBottom) {
-        const jobId = el.dataset?.jobId
-        if (jobId) {
-          const job = store.jobs.find(j => j.id === jobId)
-          if (job) selected.push({ job, techId: job.assignedTech, isAssist: false, assistTechId: null })
-        }
-      }
-    })
-
-    if (selected.length) {
-      multiSelect.value = selected
-      if (selected.length === 1) selectedJob.value = selected[0]
-    }
-  }
-
-  lasso.value = null
-}
-
-function batchMoveTo (techId) {
-  if (!multiSelect.value.length) return
-  const dayStr = localDateStr(periodStart.value)
-  multiSelect.value.filter(s => !s.isAssist).forEach(s => {
-    smartAssign(s.job, techId, dayStr)
-  })
-  multiSelect.value = []
-  selectedJob.value = null
-  invalidateRoutes()
-}
-
-
-function onDropUnassign (e) {
-  e.preventDefault()
-  if (dragJob.value) { fullUnassign(dragJob.value); dragJob.value = null; dragSrc.value = null }
-  unassignDropActive.value = false
-}
-
-// ─── WO creation modal ────────────────────────────────────────────────────────
-const woModal = ref(null)
-function openWoModal (prefillDate = null, prefillTech = null) {
-  woModal.value = {
-    subject:    '',
-    address:    '',
-    latitude:   null,
-    longitude:  null,
-    duration_h: 1,
-    priority:   'low',
-    note:       '',
-    tags:       [],
-    techId:     prefillTech || '',
-    date:       prefillDate || todayStr,
-  }
-}
-async function confirmWo () {
-  if (!woModal.value || !woModal.value.subject.trim()) return
-  const { subject, address, duration_h, priority, techId, date, latitude, longitude, note, tags } = woModal.value
-  const job = await store.createJob({ subject, address, duration_h, priority, assigned_tech: techId || null, scheduled_date: date || null, latitude: latitude || null, longitude: longitude || null, note: note || '', tags: tags.map(t => ({ tag: t })) })
-  woModal.value = null
-}
-
-// ─── Move modal ───────────────────────────────────────────────────────────────
-const moveModalOpen = ref(false)
-const moveForm      = ref(null)
-
-function openMoveModal (job, srcTechId) {
-  moveForm.value = {
-    job, srcTechId,
-    newTechId: srcTechId,
-    newDate:   getJobDate(job.id) || todayStr,
-  }
-  moveModalOpen.value = true
-}
-async function confirmMove () {
-  if (!moveForm.value) return
-  const { job, srcTechId, newTechId, newDate } = moveForm.value
-  pushUndo({ type: 'unassignJob', jobId: job.id, techId: srcTechId, routeOrder: job.routeOrder, scheduledDate: job.scheduledDate, assistants: [...(job.assistants||[])] })
-  if (newTechId !== srcTechId) {
-    smartAssign(job, newTechId, newDate)
-  } else {
-    store.setJobSchedule(job.id, newDate)
-  }
-  moveModalOpen.value = false
-  bookingOverlay.value = null
-  invalidateRoutes()
-}
-
-// ─── Left overlay (booking details) ──────────────────────────────────────────
-const bookingOverlay = ref(null) // { job, tech } or null
-
 // ─── Map composable ──────────────────────────────────────────────────────────
+let computeDayRoute = () => {}, drawMapMarkers = () => {}, drawSelectedRoute = () => {}, getMap = () => null
 const _map = useMap({
   store, MAPBOX_TOKEN, TECH_COLORS,
   currentView, periodStart, filteredResources, mapVisible,
@@ -1029,19 +364,127 @@ const _map = useMap({
 })
 const { mapContainer, selectedTechId, mapMarkers, mapPanelW, geoFixJob, mapDragJob,
   startGeoFix, cancelGeoFix, startMapResize, initMap, selectTechOnBoard, destroyMap, loadMapboxCss } = _map
-// Re-assign forward-declared functions so earlier code (invalidateRoutes, watchers) uses map composable
 computeDayRoute = _map.computeDayRoute
 drawMapMarkers = _map.drawMapMarkers
 drawSelectedRoute = _map.drawSelectedRoute
 getMap = _map.getMap
 
-// ─── Auto-distribute (selected jobs only) ─────────────────────────────────────
+// ─── Route invalidation ──────────────────────────────────────────────────────
+function invalidateRoutes () {
+  routeLegs.value = {}; routeGeometry.value = {}
+  if (currentView.value === 'day') {
+    const ds = localDateStr(periodStart.value)
+    filteredResources.value.forEach(tech => computeDayRoute(tech, ds))
+  }
+  nextTick(() => { if (getMap()) { drawMapMarkers(); drawSelectedRoute() } })
+}
+
+watch(
+  [currentView, () => anchorDate.value.getTime(), filteredResources],
+  () => {
+    if (currentView.value !== 'day') return
+    routeLegs.value = {}; routeGeometry.value = {}
+    const ds = localDateStr(periodStart.value)
+    filteredResources.value.forEach(tech => computeDayRoute(tech, ds))
+    if (getMap()) { drawMapMarkers(); drawSelectedRoute() }
+  },
+)
+
+// ─── Context menus ────────────────────────────────────────────────────────────
+const ctxMenu   = ref(null)
+const techCtx   = ref(null)
+const assistCtx = ref(null)
+const assistNoteModal = ref(null)
+
+function openCtxMenu (e, job, techId) {
+  e.preventDefault(); e.stopPropagation()
+  ctxMenu.value = { x: Math.min(e.clientX, window.innerWidth-180), y: Math.min(e.clientY, window.innerHeight-200), job, techId }
+}
+function closeCtxMenu () { ctxMenu.value = null }
+function openTechCtx (e, tech) {
+  e.preventDefault(); e.stopPropagation()
+  techCtx.value = { x: Math.min(e.clientX, window.innerWidth-200), y: Math.min(e.clientY, window.innerHeight-200), tech }
+}
+function openAssistCtx (e, job, techId) {
+  e.preventDefault(); e.stopPropagation()
+  assistCtx.value = { x: Math.min(e.clientX, window.innerWidth-200), y: Math.min(e.clientY, window.innerHeight-150), job, techId }
+}
+function assistCtxTogglePin () {
+  if (!assistCtx.value) return
+  const { job, techId } = assistCtx.value
+  const assist = job.assistants.find(a => a.techId === techId)
+  if (assist) {
+    assist.pinned = !assist.pinned
+    updateJob(job.name || job.id, { assistants: job.assistants.map(a => ({ tech_id: a.techId, tech_name: a.techName, duration_h: a.duration, note: a.note || '', pinned: a.pinned ? 1 : 0 })) }).catch(() => {})
+    invalidateRoutes()
+  }
+  assistCtx.value = null
+}
+function assistCtxRemove () {
+  if (!assistCtx.value) return
+  store.removeAssistant(assistCtx.value.job.id, assistCtx.value.techId)
+  invalidateRoutes(); assistCtx.value = null
+}
+function assistCtxNote () {
+  if (!assistCtx.value) return
+  const { job, techId } = assistCtx.value
+  const assist = job.assistants.find(a => a.techId === techId)
+  assistNoteModal.value = { job, techId, note: assist?.note || '' }
+  assistCtx.value = null
+}
+function confirmAssistNote () {
+  if (!assistNoteModal.value) return
+  const { job, techId, note } = assistNoteModal.value
+  const assist = job.assistants.find(a => a.techId === techId)
+  if (assist) {
+    assist.note = note
+    updateJob(job.name || job.id, { assistants: job.assistants.map(a => ({ tech_id: a.techId, tech_name: a.techName, duration_h: a.duration, note: a.note || '', pinned: a.pinned ? 1 : 0 })) }).catch(() => {})
+  }
+  assistNoteModal.value = null
+}
+
+function ctxDetails () {
+  const { job, techId } = ctxMenu.value
+  rightPanel.value = { mode: 'details', data: { job, tech: store.technicians.find(t => t.id === techId) } }; closeCtxMenu()
+}
+function ctxMove () { const { job, techId } = ctxMenu.value; openMoveModal(job, techId); closeCtxMenu() }
+function ctxUnschedule () { fullUnassign(ctxMenu.value.job); closeCtxMenu() }
+
+// ─── Move modal ───────────────────────────────────────────────────────────────
+const moveModalOpen = ref(false)
+const moveForm = ref(null)
+function openMoveModal (job, srcTechId) {
+  moveForm.value = { job, srcTechId, newTechId: srcTechId, newDate: getJobDate(job.id) || todayStr }
+  moveModalOpen.value = true
+}
+async function confirmMove () {
+  if (!moveForm.value) return
+  const { job, srcTechId, newTechId, newDate } = moveForm.value
+  pushUndo({ type: 'unassignJob', jobId: job.id, techId: srcTechId, routeOrder: job.routeOrder, scheduledDate: job.scheduledDate, assistants: [...(job.assistants||[])] })
+  if (newTechId !== srcTechId) smartAssign(job, newTechId, newDate)
+  else store.setJobSchedule(job.id, newDate)
+  moveModalOpen.value = false; bookingOverlay.value = null; invalidateRoutes()
+}
+
+// ─── Booking overlay ──────────────────────────────────────────────────────────
+const bookingOverlay = ref(null)
+
+// ─── WO creation modal ────────────────────────────────────────────────────────
+const woModal = ref(null)
+function openWoModal (prefillDate = null, prefillTech = null) {
+  woModal.value = { subject: '', address: '', latitude: null, longitude: null, duration_h: 1, priority: 'low', note: '', tags: [], techId: prefillTech || '', date: prefillDate || todayStr }
+}
+async function confirmWo () {
+  if (!woModal.value || !woModal.value.subject.trim()) return
+  const { subject, address, duration_h, priority, techId, date, latitude, longitude, note, tags } = woModal.value
+  await store.createJob({ subject, address, duration_h, priority, assigned_tech: techId || null, scheduled_date: date || null, latitude: latitude || null, longitude: longitude || null, note: note || '', tags: tags.map(t => ({ tag: t })) })
+  woModal.value = null
+}
+
+// ─── Auto-distribute ─────────────────────────────────────────────────────────
 async function autoDistribute () {
   const techs = filteredResources.value
   if (!techs.length) return
-
-  // Selected → assign each to their own scheduledDate (or today if none)
-  // No selection → only today's unassigned jobs
   const today = todayStr
   let pool
   if (bottomSelected.value.size) {
@@ -1051,205 +494,126 @@ async function autoDistribute () {
   }
   const unassigned = pool.filter(j => j.coords && (j.coords[0] !== 0 || j.coords[1] !== 0))
   if (!unassigned.length) return
-
-  const prevQueues = {}
-  techs.forEach(t => { prevQueues[t.id] = [...t.queue] })
+  const prevQueues = {}; techs.forEach(t => { prevQueues[t.id] = [...t.queue] })
   const prevAssignments = unassigned.map(j => ({ jobId: j.id, techId: j.assignedTech, scheduledDate: j.scheduledDate }))
-
-  function techLoadForDay (tech, dayStr) {
-    return tech.queue.filter(j => getJobDate(j.id) === dayStr).reduce((s, j) => s + (parseFloat(j.duration) || 1), 0)
-  }
-  function dist (a, b) {
-    if (!a || !b) return 999
-    const dx = (a[0] - b[0]) * 80, dy = (a[1] - b[1]) * 111
-    return Math.sqrt(dx * dx + dy * dy)
-  }
+  function techLoadForDay (tech, dayStr) { return tech.queue.filter(j => getJobDate(j.id) === dayStr).reduce((s, j) => s + (parseFloat(j.duration) || 1), 0) }
+  function dist (a, b) { if (!a || !b) return 999; const dx = (a[0] - b[0]) * 80, dy = (a[1] - b[1]) * 111; return Math.sqrt(dx * dx + dy * dy) }
   function techLastPosForDay (tech, dayStr) {
-    const dayJobs = tech.queue.filter(j => getJobDate(j.id) === dayStr)
-    if (dayJobs.length) { const last = dayJobs[dayJobs.length - 1]; if (last.coords && last.coords[0] !== 0) return last.coords }
+    const dj = tech.queue.filter(j => getJobDate(j.id) === dayStr)
+    if (dj.length) { const last = dj[dj.length - 1]; if (last.coords && last.coords[0] !== 0) return last.coords }
     return tech.coords
   }
-
   const criteria = dispatchCriteria.value.filter(c => c.enabled)
-  const sorted = [...unassigned].sort((a, b) => {
-    for (const c of criteria) {
-      if (c.id === 'urgency') {
-        const p = { high: 0, medium: 1, low: 2 }
-        const diff = (p[a.priority] ?? 2) - (p[b.priority] ?? 2)
-        if (diff !== 0) return diff
-      }
-    }
-    return 0
-  })
-
+  const sorted = [...unassigned].sort((a, b) => { for (const c of criteria) { if (c.id === 'urgency') { const p = { high: 0, medium: 1, low: 2 }; const diff = (p[a.priority] ?? 2) - (p[b.priority] ?? 2); if (diff !== 0) return diff } } return 0 })
   const useSkills = criteria.some(c => c.id === 'skills')
-  const weights = {}
-  criteria.forEach((c, i) => { weights[c.id] = criteria.length - i })
-
+  const weights = {}; criteria.forEach((c, i) => { weights[c.id] = criteria.length - i })
   sorted.forEach(job => {
     const assignDay = job.scheduledDate || today
     let bestTech = null, bestScore = Infinity
     techs.forEach(tech => {
       let score = 0
-      const load = techLoadForDay(tech, assignDay)
-      const travelH = dist(techLastPosForDay(tech, assignDay), job.coords) / 60
-      if (weights.balance) score += load * (weights.balance || 1)
-      if (weights.proximity) score += travelH * (weights.proximity || 1)
-      if (weights.skills && useSkills) {
-        const jobTags = job.tags || [], techTags = tech.tags || []
-        const matched = jobTags.filter(t => techTags.includes(t)).length
-        score += (jobTags.length > 0 ? (jobTags.length - matched) * 2 : 0) * (weights.skills || 1)
-      }
+      if (weights.balance) score += techLoadForDay(tech, assignDay) * (weights.balance || 1)
+      if (weights.proximity) score += dist(techLastPosForDay(tech, assignDay), job.coords) / 60 * (weights.proximity || 1)
+      if (weights.skills && useSkills) { const jt = job.tags || [], tt = tech.tags || []; score += (jt.length > 0 ? (jt.length - jt.filter(t => tt.includes(t)).length) * 2 : 0) * (weights.skills || 1) }
       if (score < bestScore) { bestScore = score; bestTech = tech }
     })
     if (bestTech) smartAssign(job, bestTech.id, assignDay)
   })
-
   pushUndo({ type: 'autoDistribute', assignments: prevAssignments, prevQueues })
-  bottomSelected.value = new Set()
-  invalidateRoutes()
+  bottomSelected.value = new Set(); invalidateRoutes()
 }
 
-// ─── Tech context menu (was deleted during map extraction) ────────────────────
-const techCtx = ref(null)
-function openTechCtx (e, tech) {
-  e.preventDefault(); e.stopPropagation()
-  techCtx.value = { x: Math.min(e.clientX, window.innerWidth - 220), y: Math.min(e.clientY, window.innerHeight - 120), tech }
-}
-
-// ─── Optimize route for a single tech ─────────────────────────────────────────
+// ─── Optimize route ───────────────────────────────────────────────────────────
 async function optimizeRoute () {
   if (!techCtx.value) return
-  const tech = techCtx.value.tech
-  techCtx.value = null
+  const tech = techCtx.value.tech; techCtx.value = null
   const dayStr = localDateStr(periodStart.value)
   const dayJobs = tech.queue.filter(j => getJobDate(j.id) === dayStr)
   if (dayJobs.length < 2) return
   const jobsWithCoords = dayJobs.filter(j => j.coords && (j.coords[0] !== 0 || j.coords[1] !== 0))
   if (jobsWithCoords.length < 2) return
-
-  const urgent = jobsWithCoords.filter(j => j.priority === 'high')
-  const normal = jobsWithCoords.filter(j => j.priority !== 'high')
-  function nearestNeighbor (start, jobs) {
-    const result = [], remaining = [...jobs]
-    let cur = start
-    while (remaining.length) {
-      let bestIdx = 0, bestDist = Infinity
-      remaining.forEach((j, i) => { const dx = j.coords[0] - cur[0], dy = j.coords[1] - cur[1]; const d = dx*dx + dy*dy; if (d < bestDist) { bestDist = d; bestIdx = i } })
-      const picked = remaining.splice(bestIdx, 1)[0]; result.push(picked); cur = picked.coords
-    }
-    return result
-  }
+  const urgent = jobsWithCoords.filter(j => j.priority === 'high'), normal = jobsWithCoords.filter(j => j.priority !== 'high')
+  function nearestNeighbor (start, jobs) { const result = [], remaining = [...jobs]; let cur = start; while (remaining.length) { let bi = 0, bd = Infinity; remaining.forEach((j, i) => { const dx = j.coords[0] - cur[0], dy = j.coords[1] - cur[1], d = dx*dx + dy*dy; if (d < bd) { bd = d; bi = i } }); const p = remaining.splice(bi, 1)[0]; result.push(p); cur = p.coords } return result }
   const home = (tech.coords?.[0] && tech.coords?.[1]) ? tech.coords : jobsWithCoords[0].coords
   const orderedUrgent = nearestNeighbor(home, urgent)
-  const lastPos = orderedUrgent.length ? orderedUrgent[orderedUrgent.length - 1].coords : home
-  const orderedNormal = nearestNeighbor(lastPos, normal)
+  const orderedNormal = nearestNeighbor(orderedUrgent.length ? orderedUrgent.at(-1).coords : home, normal)
   const reordered = [...orderedUrgent, ...orderedNormal]
-
   try {
     const hasHome = !!(tech.coords?.[0] && tech.coords?.[1])
-    const coords = []
-    if (hasHome) coords.push(`${tech.coords[0]},${tech.coords[1]}`)
-    reordered.forEach(j => coords.push(`${j.coords[0]},${j.coords[1]}`))
+    const coords = []; if (hasHome) coords.push(`${tech.coords[0]},${tech.coords[1]}`); reordered.forEach(j => coords.push(`${j.coords[0]},${j.coords[1]}`))
     if (coords.length <= 12) {
       const url = `https://api.mapbox.com/optimized-trips/v1/mapbox/driving/${coords.join(';')}?overview=false${hasHome ? '&source=first' : ''}&roundtrip=false&destination=any&access_token=${MAPBOX_TOKEN}`
       const res = await fetch(url); const data = await res.json()
       if (data.code === 'Ok' && data.waypoints) {
-        const offset = hasHome ? 1 : 0
-        const urgentCount = orderedUrgent.length
-        const mapboxUrgent = reordered.slice(0, urgentCount).map((job, i) => ({ job, optOrder: data.waypoints[i + offset].waypoint_index })).sort((a, b) => a.optOrder - b.optOrder).map(x => x.job)
-        const mapboxNormal = reordered.slice(urgentCount).map((job, i) => ({ job, optOrder: data.waypoints[i + urgentCount + offset].waypoint_index })).sort((a, b) => a.optOrder - b.optOrder).map(x => x.job)
-        reordered.length = 0; reordered.push(...mapboxUrgent, ...mapboxNormal)
+        const off = hasHome ? 1 : 0, uc = orderedUrgent.length
+        const mu = reordered.slice(0, uc).map((j, i) => ({ job: j, o: data.waypoints[i + off].waypoint_index })).sort((a, b) => a.o - b.o).map(x => x.job)
+        const mn = reordered.slice(uc).map((j, i) => ({ job: j, o: data.waypoints[i + uc + off].waypoint_index })).sort((a, b) => a.o - b.o).map(x => x.job)
+        reordered.length = 0; reordered.push(...mu, ...mn)
       }
     }
   } catch (_) {}
-
   pushUndo({ type: 'optimizeRoute', techId: tech.id, prevQueue: [...tech.queue] })
   const otherJobs = tech.queue.filter(j => getJobDate(j.id) !== dayStr)
   tech.queue = [...reordered, ...otherJobs]
-  tech.queue.forEach((job, i) => { job.routeOrder = i; updateJob(job.name || job.id, { route_order: i, start_time: '' }).catch(() => {}) })
+  tech.queue.forEach((j, i) => { j.routeOrder = i; updateJob(j.name || j.id, { route_order: i, start_time: '' }).catch(() => {}) })
   invalidateRoutes()
 }
 
-// ─── Board tabs (visual, not implemented as routes) ───────────────────────────
+// ─── Board tabs ───────────────────────────────────────────────────────────────
 const boardTabs = ref(['Vue principale','Par région'])
 const activeTab = ref('Vue principale')
 
-// stOf, prioLabel, prioClass, jobStatusIcon imported from useHelpers
+// ─── Unassign drop handler ────────────────────────────────────────────────────
+function onDropUnassign (e) {
+  e.preventDefault()
+  if (dragJob.value) { fullUnassign(dragJob.value); dragJob.value = null; dragSrc.value = null }
+  unassignDropActive.value = false
+}
 
 // ─── Keyboard ─────────────────────────────────────────────────────────────────
 function onKeyDown (e) {
   if (e.key === 'Escape') {
-    closeCtxMenu(); assistCtx.value = null; techCtx.value = null; assistNoteModal.value = null; moveModalOpen.value = false; resSelectorOpen.value = false
-    rightPanel.value = null; timeModal.value = null; woModal.value = null; editModal.value = null; dispatchCriteriaModal.value = false
-    bookingOverlay.value = null; sidebarFlyout.value = null
-    selectedJob.value = null
-    multiSelect.value = []
+    closeCtxMenu(); assistCtx.value = null; techCtx.value = null; assistNoteModal.value = null
+    moveModalOpen.value = false; resSelectorOpen.value = false; rightPanel.value = null
+    timeModal.value = null; woModal.value = null; editModal.value = null
+    dispatchCriteriaModal.value = false; bookingOverlay.value = null; sidebarFlyout.value = null
+    selectedJob.value = null; multiSelect.value = []
   }
-  // Undo: CMD+Z / CTRL+Z
   if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
     if (['INPUT','TEXTAREA','SELECT'].includes(document.activeElement?.tagName)) return
-    e.preventDefault()
-    performUndo()
-    return
+    e.preventDefault(); performUndo(); return
   }
-  // Delete/Backspace: remove selected
   if ((e.key === 'Delete' || e.key === 'Backspace') && (selectedJob.value || multiSelect.value.length)) {
     if (['INPUT','TEXTAREA','SELECT'].includes(document.activeElement?.tagName)) return
     e.preventDefault()
-    // Multi-select delete
     if (multiSelect.value.length) { batchUnassign(); return }
-    const { job, techId, isAssist, assistTechId } = selectedJob.value
+    const { job, isAssist, assistTechId } = selectedJob.value
     if (isAssist && assistTechId) {
       const assist = job.assistants.find(a => a.techId === assistTechId)
       pushUndo({ type: 'removeAssistant', jobId: job.id, techId: assistTechId, duration: assist?.duration || 0, note: assist?.note || '' })
       store.removeAssistant(job.id, assistTechId)
-    } else {
-      fullUnassign(job)
-    }
-    selectedJob.value = null
-    invalidateRoutes()
+    } else { fullUnassign(job) }
+    selectedJob.value = null; invalidateRoutes()
   }
 }
 
-// ─── Refresh (preserves view state) ──────────────────────────────────────────
+// ─── Refresh ──────────────────────────────────────────────────────────────────
 async function refreshData () {
-  // Save current UI state before reload
-  const prevTechId   = selectedTechId.value
-
+  const prevTechId = selectedTechId.value
   await store.loadAll()
-
-  // Re-apply locally geo-fixed coordinates (overrides ERPNext values)
   const savedCoords = JSON.parse(localStorage.getItem('dispatch-job-coords') || '{}')
-  Object.entries(savedCoords).forEach(([jobId, coords]) => {
-    const job = store.jobs.find(j => j.id === jobId)
-    if (job) job.coords = coords
-  })
-
-  // Recompute routes with fresh objects + correct coords
-  routeLegs.value = {}
-  routeGeometry.value = {}
+  Object.entries(savedCoords).forEach(([jobId, coords]) => { const job = store.jobs.find(j => j.id === jobId); if (job) job.coords = coords })
+  routeLegs.value = {}; routeGeometry.value = {}
   const _ds = localDateStr(periodStart.value)
   filteredResources.value.forEach(tech => computeDayRoute(tech, _ds))
-
-  // Restore booking overlay with fresh object references
-  const prevBookingJobId = bookingOverlay.value?.job?.id
-  const prevBookingTechId = bookingOverlay.value?.tech?.id
-  if (prevBookingJobId) {
-    const j = store.jobs.find(j => j.id === prevBookingJobId)
-    const t = prevBookingTechId ? store.technicians.find(t => t.id === prevBookingTechId) : null
-    if (j) bookingOverlay.value = { job: j, tech: t }
-  }
-
-  // Restore selected tech
+  const pj = bookingOverlay.value?.job?.id, pt = bookingOverlay.value?.tech?.id
+  if (pj) { const j = store.jobs.find(j => j.id === pj); const t = pt ? store.technicians.find(t => t.id === pt) : null; if (j) bookingOverlay.value = { job: j, tech: t } }
   selectedTechId.value = prevTechId
-
   if (getMap()) { drawMapMarkers(); drawSelectedRoute() }
-
   await loadPendingReqs()
 }
 
-// ─── Provide shared state for child components ───────────────────────────────
+// ─── Provide for child components ─────────────────────────────────────────────
 provide('store', store)
 provide('TECH_COLORS', TECH_COLORS)
 provide('MAPBOX_TOKEN', MAPBOX_TOKEN)
@@ -1269,50 +633,35 @@ provide('selectAddr', selectAddr)
 // ─── Lifecycle ────────────────────────────────────────────────────────────────
 onMounted(async () => {
   if (!store.technicians.length) await store.loadAll()
-  // Apply any locally geo-fixed coordinates (overrides ERPNext defaults)
   const savedCoords = JSON.parse(localStorage.getItem('dispatch-job-coords') || '{}')
-  Object.entries(savedCoords).forEach(([jobId, coords]) => {
-    const job = store.jobs.find(j => j.id === jobId)
-    if (job) job.coords = coords
-  })
-  // Routes were computed before coords were applied — clear cache and redo
-  routeLegs.value = {}
-  routeGeometry.value = {}
+  Object.entries(savedCoords).forEach(([jobId, coords]) => { const job = store.jobs.find(j => j.id === jobId); if (job) job.coords = coords })
+  routeLegs.value = {}; routeGeometry.value = {}
   const _ds = localDateStr(periodStart.value)
   filteredResources.value.forEach(tech => computeDayRoute(tech, _ds))
   await loadPendingReqs()
   document.addEventListener('keydown', onKeyDown)
   document.addEventListener('click', () => { closeCtxMenu(); assistCtx.value = null; techCtx.value = null })
-  // load mapbox css
   if (!document.getElementById('mapbox-css')) {
     const l = document.createElement('link'); l.id='mapbox-css'; l.rel='stylesheet'
     l.href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css'; document.head.appendChild(l)
   }
 })
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKeyDown)
-  document.removeEventListener('click', closeCtxMenu)
-  destroyMap()
-})
+onUnmounted(() => { document.removeEventListener('keydown', onKeyDown); document.removeEventListener('click', closeCtxMenu); destroyMap() })
 </script>
 
 <template>
 <div class="sb-root">
 
-  <!-- ══════════════ HEADER ══════════════ -->
+  <!-- ══ HEADER ══ -->
   <header class="sb-header">
     <div class="sb-header-left">
       <a class="sb-logo-btn" href="/desk/dispatch-job" title="Dispatch Jobs — ERPNext">Dispatch</a>
       <input class="sb-search" v-model="searchQuery" placeholder="🔍 Ressource…" />
       <div class="sb-tabs">
-        <button v-for="tab in boardTabs" :key="tab"
-                class="sb-tab" :class="{ active: activeTab===tab }" @click="activeTab=tab">
-          {{ tab }}
-        </button>
+        <button v-for="tab in boardTabs" :key="tab" class="sb-tab" :class="{ active: activeTab===tab }" @click="activeTab=tab">{{ tab }}</button>
         <button class="sb-tab sb-tab-add" title="Nouvelle vue">+</button>
       </div>
     </div>
-
     <div class="sb-header-center">
       <button class="sb-hbtn sb-today-btn" @click="goToToday">Aujourd'hui</button>
       <button class="sb-hbtn" @click="prevPeriod">‹</button>
@@ -1324,7 +673,6 @@ onUnmounted(() => {
         <button :class="{ active: currentView==='month' }" @click="currentView='month'">Mois</button>
       </div>
     </div>
-
     <div class="sb-header-right">
       <button class="sb-icon-btn" :class="{ active: bottomPanelOpen }" @click="bottomPanelOpen=!bottomPanelOpen" title="Jobs non assignées">
         📋 <span v-if="unscheduledJobs.length" class="sbs-count" style="position:relative;top:-2px;right:auto">{{ unscheduledJobs.length }}</span>
@@ -1332,21 +680,17 @@ onUnmounted(() => {
       <button v-if="currentView==='day'" class="sb-icon-btn" :class="{ active: mapVisible }" @click="mapVisible=!mapVisible" title="Carte">🗺 Carte</button>
       <button class="sb-icon-btn" @click="refreshData()" title="Actualiser">↻</button>
       <button class="sb-wo-btn" @click="openWoModal()" title="Nouveau work order">+ WO</button>
-      <div class="sb-erp-dot" :class="{ ok: store.erpStatus==='ok' }"
-           :title="{ ok:'ERPNext ✓', error:'Hors ligne', loading:'Connexion…' }[store.erpStatus]||'ERPNext'"></div>
+      <div class="sb-erp-dot" :class="{ ok: store.erpStatus==='ok' }" :title="{ ok:'ERPNext ✓', error:'Hors ligne', loading:'Connexion…' }[store.erpStatus]||'ERPNext'"></div>
     </div>
   </header>
 
-  <!-- ══════════════ BODY ══════════════ -->
+  <!-- ══ BODY ══ -->
   <div class="sb-body">
 
-    <!-- ── LEFT SIDEBAR: Icon strip + flyout ── -->
+    <!-- Sidebar icon strip -->
     <aside class="sb-sidebar-strip">
-      <div class="sbs-search-wrap">
-        <input class="sbs-search" v-model="searchQuery" placeholder="🔍" title="Rechercher une ressource" />
-      </div>
-      <button class="sbs-icon" :class="{ active: sidebarFlyout==='filter' }"
-              @mouseenter="sidebarFlyout='filter'" title="Filtres & Ressources">
+      <div class="sbs-search-wrap"><input class="sbs-search" v-model="searchQuery" placeholder="🔍" title="Rechercher une ressource" /></div>
+      <button class="sbs-icon" :class="{ active: sidebarFlyout==='filter' }" @mouseenter="sidebarFlyout='filter'" title="Filtres & Ressources">
         <span v-html="ICON.wrench"></span>
         <span v-if="filterStatus||selectedResIds.length||filterTags.length" class="sbs-badge"></span>
       </button>
@@ -1354,21 +698,16 @@ onUnmounted(() => {
         <span style="font-size:1rem">📋</span>
         <span v-if="unscheduledJobs.length" class="sbs-count">{{ unscheduledJobs.length }}</span>
       </button>
-      <button v-if="teamJobs.length" class="sbs-icon" :class="{ active: sidebarFlyout==='projects' }"
-              @mouseenter="sidebarFlyout='projects'" title="Projets">
-        <span style="font-size:1rem">👥</span>
-        <span class="sbs-count">{{ teamJobs.length }}</span>
+      <button v-if="teamJobs.length" class="sbs-icon" :class="{ active: sidebarFlyout==='projects' }" @mouseenter="sidebarFlyout='projects'" title="Projets">
+        <span style="font-size:1rem">👥</span><span class="sbs-count">{{ teamJobs.length }}</span>
       </button>
       <div style="flex:1"></div>
-      <a class="sbs-icon" href="/desk/dispatch-job" title="ERPNext" target="_blank">
-        <span style="font-size:0.9rem">↗</span>
-      </a>
+      <a class="sbs-icon" href="/desk/dispatch-job" title="ERPNext" target="_blank"><span style="font-size:0.9rem">↗</span></a>
     </aside>
 
-    <!-- Flyout panels (appears on hover) -->
+    <!-- Flyout panels -->
     <transition name="sb-slide-left">
     <div v-if="sidebarFlyout" class="sb-flyout" @mouseleave="sidebarFlyout=null">
-      <!-- FILTER flyout -->
       <template v-if="sidebarFlyout==='filter'">
         <div class="sbf-section">
           <div class="sbf-title">Ressources</div>
@@ -1376,36 +715,22 @@ onUnmounted(() => {
           <button class="sbf-primary-btn" style="margin-top:0.3rem" @click="openResSelector">Sélectionner les ressources</button>
           <label class="sbf-lbl" style="margin-top:0.3rem">Tri</label>
           <select class="sbf-select" v-model="techSort">
-            <option value="default">Par défaut</option>
-            <option value="alpha">Alphabétique (nom)</option>
-            <option value="manual">Manuel (drag)</option>
+            <option value="default">Par défaut</option><option value="alpha">Alphabétique (nom)</option><option value="manual">Manuel (drag)</option>
           </select>
-          <div v-if="selectedResIds.length" class="sbf-chip">
-            {{ selectedResIds.length }} sélectionnée{{ selectedResIds.length>1?'s':'' }}
-            <button @click="selectedResIds=[]">✕</button>
-          </div>
+          <div v-if="selectedResIds.length" class="sbf-chip">{{ selectedResIds.length }} sélectionnée{{ selectedResIds.length>1?'s':'' }}<button @click="selectedResIds=[]">✕</button></div>
         </div>
         <div class="sbf-section">
           <div class="sbf-title">Filtres</div>
           <label class="sbf-lbl">Statut</label>
           <select class="sbf-select" v-model="filterStatus">
-            <option value="">Tous</option>
-            <option value="available">Disponible</option>
-            <option value="en-route">En route</option>
-            <option value="busy">En cours</option>
-            <option value="off">Hors shift</option>
+            <option value="">Tous</option><option value="available">Disponible</option><option value="en-route">En route</option><option value="busy">En cours</option><option value="off">Hors shift</option>
           </select>
           <label class="sbf-lbl">Tags</label>
-          <TagInput :model-value="filterTags"
-                    @update:model-value="v => { filterTags = v; localStorage.setItem('sbv2-filterTags', JSON.stringify(v)) }"
+          <TagInput :model-value="filterTags" @update:model-value="v => { filterTags = v; localStorage.setItem('sbv2-filterTags', JSON.stringify(v)) }"
                     :all-tags="store.allTags" :get-color="getTagColor" :can-create="false" placeholder="Filtrer par tag…" />
-          <button v-if="filterStatus||selectedResIds.length||searchQuery||filterTags.length" class="sbf-clear-btn" @click="clearFilters">
-            ✕ Réinitialiser
-          </button>
+          <button v-if="filterStatus||selectedResIds.length||searchQuery||filterTags.length" class="sbf-clear-btn" @click="clearFilters">✕ Réinitialiser</button>
         </div>
       </template>
-
-      <!-- PROJECTS flyout -->
       <template v-if="sidebarFlyout==='projects'">
         <div class="sbf-section sbf-section-grow">
           <div class="sbf-title">Projets <span class="sbf-count">{{ teamJobs.length }}</span></div>
@@ -1416,14 +741,10 @@ onUnmounted(() => {
               <div class="sbf-card-title">{{ job.subject }}</div>
               <div class="sbf-card-meta">⏱ {{ fmtDur(job.duration) }} · {{ job.scheduledDate || '—' }}</div>
               <div class="sbf-team-badges">
-                <span class="sb-assist-badge sb-assist-badge-lead"
-                      :style="'background:'+TECH_COLORS[store.technicians.find(t=>t.id===job.assignedTech)?.colorIdx||0]"
-                      :title="store.technicians.find(t=>t.id===job.assignedTech)?.fullName || '?'">
+                <span class="sb-assist-badge sb-assist-badge-lead" :style="'background:'+TECH_COLORS[store.technicians.find(t=>t.id===job.assignedTech)?.colorIdx||0]">
                   {{ (store.technicians.find(t=>t.id===job.assignedTech)?.fullName||'?').split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
                 </span>
-                <span v-for="a in job.assistants" :key="a.techId" class="sb-assist-badge"
-                      :style="'background:'+TECH_COLORS[store.technicians.find(t=>t.id===a.techId)?.colorIdx||0]"
-                      :title="a.techName">
+                <span v-for="a in job.assistants" :key="a.techId" class="sb-assist-badge" :style="'background:'+TECH_COLORS[store.technicians.find(t=>t.id===a.techId)?.colorIdx||0]" :title="a.techName">
                   {{ (a.techName||'').split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
                 </span>
               </div>
@@ -1434,49 +755,35 @@ onUnmounted(() => {
     </div>
     </transition>
 
-    <!-- ── LEFT OVERLAY (booking details) ── -->
+    <!-- Booking overlay (left) -->
     <div v-if="bookingOverlay" class="sb-overlay-backdrop" @click.self="bookingOverlay=null"></div>
     <transition name="sb-slide-left">
     <div v-if="bookingOverlay" class="sb-left-overlay" @click.stop="()=>{}">
-      <div class="sb-rp-hdr">
-        <span class="sb-rp-title">Réservation</span>
-        <button class="sb-rp-close" @click="bookingOverlay=null">✕</button>
-      </div>
+      <div class="sb-rp-hdr"><span class="sb-rp-title">Réservation</span><button class="sb-rp-close" @click="bookingOverlay=null">✕</button></div>
       <div class="sb-rp-body">
         <div class="sb-rp-color-bar" :style="'background:'+jobColor(bookingOverlay.job||{})"></div>
         <div class="sb-rp-field"><span class="sb-rp-lbl">Titre</span><strong>{{ bookingOverlay.job?.subject }}</strong></div>
         <div class="sb-rp-field"><span class="sb-rp-lbl">Adresse</span>{{ bookingOverlay.job?.address }}</div>
         <div class="sb-rp-field"><span class="sb-rp-lbl">Durée</span>{{ fmtDur(bookingOverlay.job?.duration) }}</div>
-        <div class="sb-rp-field"><span class="sb-rp-lbl">Priorité</span>
-          <span :class="prioClass(bookingOverlay.job?.priority)">{{ prioLabel(bookingOverlay.job?.priority) }}</span>
-        </div>
+        <div class="sb-rp-field"><span class="sb-rp-lbl">Priorité</span><span :class="prioClass(bookingOverlay.job?.priority)">{{ prioLabel(bookingOverlay.job?.priority) }}</span></div>
         <div class="sb-rp-field"><span class="sb-rp-lbl">Technicien</span>{{ bookingOverlay.tech?.fullName || '—' }}</div>
-        <div class="sb-rp-field"><span class="sb-rp-lbl">Date planifiée</span>
-          {{ bookingOverlay.job?.scheduledDate || '—' }}
-          <span v-if="bookingOverlay.job?.endDate"> → {{ bookingOverlay.job.endDate }}</span>
-        </div>
+        <div class="sb-rp-field"><span class="sb-rp-lbl">Date planifiée</span>{{ bookingOverlay.job?.scheduledDate || '—' }}<span v-if="bookingOverlay.job?.endDate"> → {{ bookingOverlay.job.endDate }}</span></div>
         <div v-if="bookingOverlay.job?.assignedTech" class="sb-rp-field">
           <span class="sb-rp-lbl">Date de fin</span>
-          <input type="date" class="sb-form-input" :value="bookingOverlay.job?.endDate || ''"
-                 @change="setEndDate(bookingOverlay.job, $event.target.value)" style="margin-top:2px" />
+          <input type="date" class="sb-form-input" :value="bookingOverlay.job?.endDate || ''" @change="setEndDate(bookingOverlay.job, $event.target.value)" style="margin-top:2px" />
         </div>
         <div class="sb-rp-field"><span class="sb-rp-lbl">Statut</span>{{ bookingOverlay.job?.status }}</div>
-        <div class="sb-rp-field">
-          <span class="sb-rp-lbl">Tags</span>
-          <TagInput v-if="bookingOverlay.job"
-                    :model-value="bookingOverlay.job.tags || []"
+        <div class="sb-rp-field"><span class="sb-rp-lbl">Tags</span>
+          <TagInput v-if="bookingOverlay.job" :model-value="bookingOverlay.job.tags || []"
                     @update:model-value="v => { bookingOverlay.job.tags = v; persistJobTags(bookingOverlay.job) }"
                     :all-tags="store.allTags" :get-color="getTagColor" @create="onCreateTag" />
         </div>
         <div v-if="bookingOverlay.job?.assistants?.length" class="sb-rp-field">
           <span class="sb-rp-lbl">Assistants</span>
           <div v-for="a in bookingOverlay.job.assistants" :key="a.techId" style="display:flex;align-items:center;gap:6px;margin-top:3px">
-            <span class="sb-assist-badge" :style="'background:'+TECH_COLORS[store.technicians.find(t=>t.id===a.techId)?.colorIdx||0]">
-              {{ (a.techName||'').split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
-            </span>
+            <span class="sb-assist-badge" :style="'background:'+TECH_COLORS[store.technicians.find(t=>t.id===a.techId)?.colorIdx||0]">{{ (a.techName||'').split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}</span>
             <span style="font-size:0.72rem">{{ a.techName }} · {{ fmtDur(a.duration) }}{{ a.note ? ' · '+a.note : '' }}</span>
-            <button style="margin-left:auto;background:none;border:none;color:#ef4444;cursor:pointer;font-size:0.7rem"
-                    @click="store.removeAssistant(bookingOverlay.job.id, a.techId); invalidateRoutes()">✕</button>
+            <button style="margin-left:auto;background:none;border:none;color:#ef4444;cursor:pointer;font-size:0.7rem" @click="store.removeAssistant(bookingOverlay.job.id, a.techId); invalidateRoutes()">✕</button>
           </div>
         </div>
       </div>
@@ -1488,224 +795,85 @@ onUnmounted(() => {
     </div>
     </transition>
 
-    <!-- ── CENTER COLUMN (board + bottom panel) ── -->
+    <!-- Center column -->
     <div class="sb-center-col">
+      <div class="sb-board" ref="boardScroll" @mousedown="startLasso($event)" @mousemove="moveLasso($event)" @mouseup="endLasso($event)">
+        <div v-if="lasso" class="sb-lasso" :style="lassoStyle"></div>
 
-    <!-- ── CENTER TIMELINE ── -->
-    <div class="sb-board" ref="boardScroll"
-         @mousedown="startLasso($event)"
-         @mousemove="moveLasso($event)"
-         @mouseup="endLasso($event)">
-      <!-- Lasso rectangle -->
-      <div v-if="lasso" class="sb-lasso" :style="lassoStyle"></div>
-      <!-- ════════ CALENDAR VIEW (week / month) ════════ -->
-      <div v-if="isCalView" class="sb-grid sb-grid-cal">
+        <!-- Week view -->
+        <WeekCalendar v-if="isCalView"
+          :filtered-resources="filteredResources" :day-columns="dayColumns"
+          :selected-tech-id="selectedTechId" :drop-ghost="dropGhost" :today-str="todayStr"
+          @go-to-day="goToDay" @select-tech="selectTechOnBoard" @ctx-tech="openTechCtx"
+          @tech-reorder-start="onTechReorderStart" @tech-reorder-drop="onTechReorderDrop"
+          @cal-drop="onCalDrop" @job-dragstart="onJobDragStart"
+          @job-click="selectJob" @job-dblclick="openEditModal" @job-ctx="openCtxMenu"
+          @clear-filters="clearFilters" />
 
-        <!-- Calendar header -->
-        <div class="sb-grid-hdr">
-          <div class="sb-res-hdr">
-            Ressources <span class="sbf-count">{{ filteredResources.length }}</span>
-          </div>
-          <div class="sb-cal-hdr">
-            <div v-for="d in dayColumns" :key="'ch-'+localDateStr(d)"
-                 class="sb-cal-hdr-cell" :class="{ 'sb-col-today': isDayToday(d) }"
-                 style="cursor:pointer" @click="goToDay(d)">
-              <span class="sb-cal-wd">{{ d.toLocaleDateString('fr-CA',{weekday:'short'}) }}</span>
-              <span class="sb-cal-dn" :class="{ 'sb-today-bubble': isDayToday(d) }">{{ d.getDate() }}</span>
-              <span v-if="currentView==='month'" class="sb-cal-mo">{{ d.toLocaleDateString('fr-CA',{month:'short'}) }}</span>
-            </div>
-          </div>
-        </div>
+        <!-- Month view -->
+        <MonthCalendar v-else-if="currentView==='month'"
+          :anchor-date="anchorDate" :filtered-resources="filteredResources" :today-str="todayStr"
+          @go-to-day="goToDay" @select-tech="selectTechOnBoard" />
 
-        <!-- Loading / empty -->
-        <div v-if="store.loading" class="sb-loading-row">Chargement…</div>
-        <div v-else-if="!filteredResources.length" class="sb-empty-row">
-          Aucune ressource.
-          <button class="sbf-primary-btn" style="display:inline-block;margin-left:0.75rem" @click="clearFilters">Réinitialiser</button>
-        </div>
-
-        <!-- Resource rows (calendar) -->
-        <div v-for="tech in filteredResources" :key="tech.id"
-             class="sb-row sb-row-cal" :class="{ 'sb-row-sel': selectedTechId===tech.id }">
-
-          <!-- Resource cell (frozen) -->
-          <div class="sb-res-cell" @click="selectTechOnBoard(tech)" @contextmenu.prevent="openTechCtx($event, tech)"
-               draggable="true" @dragstart="onTechReorderStart($event, tech)"
-               @dragover.prevent="()=>{}" @drop.prevent="onTechReorderDrop($event, tech)">
-            <div class="sb-avatar" :style="'background:'+TECH_COLORS[tech.colorIdx]">
-              {{ tech.fullName.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
-            </div>
-            <div class="sb-res-info">
-              <div class="sb-res-name">{{ tech.fullName }}
-                <span v-for="t in (tech.tags||[]).slice(0,3)" :key="t" class="sb-res-tag-dot" :style="'background:'+getTagColor(t)" :title="t"></span>
-              </div>
-              <div class="sb-res-sub">
-                <span class="sb-st" :class="stOf(tech).cls">{{ stOf(tech).label }}</span>
+        <!-- Day view -->
+        <div v-else class="sb-grid" :style="'min-width:'+(220+totalW)+'px'">
+          <div class="sb-grid-hdr">
+            <div class="sb-res-hdr">Ressources <span class="sbf-count">{{ filteredResources.length }}</span></div>
+            <div class="sb-time-hdr-wrap" :style="'width:'+totalW+'px;position:relative;height:100%'">
+              <div v-for="tick in hourTicks" :key="'dht-'+tick.x" class="sb-htick" :style="'left:'+tick.x+'px'">
+                <span v-if="tick.label" class="sb-htick-lbl">{{ tick.label }}</span>
               </div>
             </div>
           </div>
-
-          <!-- Calendar day cells -->
-          <div class="sb-cal-row">
-            <div v-for="{ day, dateStr, jobs } in techBookingsByDay(tech)" :key="dateStr"
-                 class="sb-cal-cell" :class="{ 'sb-bg-today': isDayToday(day), 'sb-bg-alt': dayColumns.indexOf(day)%2===1 }"
-                 @dblclick="goToDay(day)"
-                 @dragover.prevent="dropGhost={ techId:tech.id, x:0, dateStr }"
-                 @dragleave="dropGhost=null"
-                 @drop.prevent="onCalDrop($event, tech, dateStr)">
-              <!-- Drop highlight -->
-              <div v-if="dropGhost?.techId===tech.id && dropGhost.dateStr===dateStr" class="sb-cal-drop"></div>
-              <!-- Job chips (week view) -->
-              <div v-for="job in jobs" :key="job.id + (job._isAssistChip ? '-a' : '')"
-                   class="sb-chip"
-                   :class="{ 'sb-chip-done': job.status==='completed', 'sb-chip-pinned': getJobTime(job.id), 'sb-chip-sel': selectedJob?.job?.id===job.id, 'sb-chip-multi': isJobMultiSelected(job.id), 'sb-chip-assist': job._isAssistChip }"
-                   :data-job-id="job.id"
-                   :style="'border-left-color:'+jobColor(job)+';background:'+jobColor(job)+'cc;color:#fff'"
-                   :draggable="job._isAssistChip ? 'false' : 'true'"
-                   @dragstart="!job._isAssistChip && onJobDragStart($event, job, tech.id)"
-                   @click.stop="selectJob(job, tech.id, false, null, $event)"
-                   @dblclick.stop="openEditModal(job)"
-                   @contextmenu.prevent="openCtxMenu($event, job, tech.id)">
-                <div class="sb-chip-line1">
-                  <span v-if="job.priority==='high'" class="sb-chip-urgent"></span>
-                  <span v-if="job._isAssistChip" class="sb-chip-assist-tag" v-html="ICON.pin"></span>
-                  {{ job.subject }}
-                </div>
-                <div v-if="job.address" class="sb-chip-line2"><span v-html="ICON.mapPin"></span> {{ shortAddr(job.address) }}</div>
-              </div>
-              <!-- Daily load bar -->
-              <div v-if="jobs.length" class="sb-day-load">
-                <div class="sb-day-load-track">
-                  <div class="sb-day-load-fill" :style="{ width: Math.min(100, jobs.reduce((a,j)=>a+(parseFloat(j._assistDur||j.duration)||0),0)/8*100)+'%', background: dayLoadColor(jobs.reduce((a,j)=>a+(parseFloat(j._assistDur||j.duration)||0),0)/8) }"></div>
-                </div>
-                <span class="sb-day-load-label">{{ fmtDur(jobs.reduce((a,j)=>a+(parseFloat(j._assistDur||j.duration)||0),0)) }}/8h</span>
-              </div>
-            </div>
+          <div v-if="store.loading" class="sb-loading-row">Chargement…</div>
+          <div v-else-if="!filteredResources.length" class="sb-empty-row">
+            Aucune ressource. <button class="sbf-primary-btn" style="display:inline-block;margin-left:0.75rem" @click="clearFilters">Réinitialiser</button>
           </div>
-
-        </div><!-- /resource rows cal -->
-
-      </div><!-- /sb-grid-cal -->
-
-      <!-- ════════ MONTH VIEW ════════ -->
-      <div v-else-if="currentView==='month'" class="sb-month-wrap">
-        <!-- Day-of-week header -->
-        <div class="sb-month-dow-hdr">
-          <div v-for="wd in ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim']" :key="wd" class="sb-month-dow">{{ wd }}</div>
+          <TimelineRow v-for="tech in filteredResources" :key="tech.id"
+               :tech="tech" :segments="techDayJobsWithTravel(tech)"
+               :hour-ticks="hourTicks" :total-w="totalW" :px-per-hr="pxPerHr"
+               :h-start="H_START" :h-end="H_END" :row-h="ROW_H"
+               :is-selected="selectedTechId===tech.id"
+               :is-elevated="techHasLinkedJob(tech)||techIsHovered(tech)"
+               :drop-ghost-x="dropGhost?.techId===tech.id ? dropGhost.x : null"
+               @select-tech="selectTechOnBoard" @ctx-tech="openTechCtx"
+               @drag-tech-start="onTechDragStart" @reorder-drop="onTechReorderDrop"
+               @timeline-dragover="onTimelineDragOver" @timeline-dragleave="onTimelineDragLeave"
+               @timeline-drop="onTimelineDrop"
+               @job-dragstart="onJobDragStart" @job-click="selectJob"
+               @job-dblclick="openEditModal" @job-ctx="openCtxMenu"
+               @assist-ctx="openAssistCtx"
+               @hover-job="id => hoveredJobId=id" @unhover-job="hoveredJobId=null"
+               @block-move="startBlockMove" @block-resize="startResize" />
         </div>
-        <!-- Week rows -->
-        <div v-for="(week, wi) in monthWeeks" :key="wi" class="sb-month-week">
-          <div v-for="day in week" :key="localDateStr(day)"
-               class="sb-month-day"
-               :class="{
-                 'sb-month-day-out': day.getMonth() !== anchorDate.getMonth(),
-                 'sb-month-day-today': isDayToday(day)
-               }"
-               @click="anchorDate=new Date(day); currentView='day'">
-            <div class="sb-month-day-num">{{ day.getDate() }}</div>
-            <div class="sb-month-avatars">
-              <div v-for="tech in techsActiveOnDayW(localDateStr(day))" :key="tech.id"
-                   class="sb-month-avatar"
-                   :style="'background:'+TECH_COLORS[tech.colorIdx]"
-                   :title="tech.fullName + ' — ' + tech.queue.filter(j=>jobSpansDate(j,localDateStr(day))).length + ' job(s)'"
-                   @click.stop="selectTechOnBoard(tech)">
-                {{ tech.fullName.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
-              </div>
-            </div>
-            <div v-if="dayJobCountW(localDateStr(day))" class="sb-month-job-count">
-              {{ dayJobCountW(localDateStr(day)) }} job{{ dayJobCountW(localDateStr(day))>1?'s':'' }}
-            </div>
-          </div>
-        </div>
-      </div><!-- /month -->
+      </div>
 
-      <!-- ════════ DAY VIEW ════════ -->
-      <div v-else class="sb-grid" :style="'min-width:'+(220+totalW)+'px'">
+      <!-- Bottom panel -->
+      <BottomPanel :open="bottomPanelOpen" :height="bottomPanelH"
+                   :groups="unassignedGrouped" :unscheduled-count="unscheduledJobs.length"
+                   :selected="bottomSelected" :drop-active="unassignDropActive"
+                   @update:open="v => bottomPanelOpen = v" @resize-start="startBottomResize"
+                   @toggle-select="toggleBottomSelect" @select-all="selectAllBottom" @clear-select="clearBottomSelect"
+                   @batch-assign="batchAssignBottom" @auto-distribute="autoDistribute"
+                   @open-criteria="dispatchCriteriaModal=true"
+                   @row-click="(job) => rightPanel={ mode:'details', data:{ job, tech:null } }"
+                   @row-dblclick="openEditModal"
+                   @row-dragstart="(e, job) => onJobDragStart(e, job, null)"
+                   @drop-unassign="(e, type) => { if(type==='over') unassignDropActive=!!dragJob; else if(type==='leave') unassignDropActive=false; else onDropUnassign(e) }" />
+    </div>
 
-        <!-- Hour header -->
-        <div class="sb-grid-hdr">
-          <div class="sb-res-hdr">
-            Ressources <span class="sbf-count">{{ filteredResources.length }}</span>
-          </div>
-          <div class="sb-time-hdr-wrap" :style="'width:'+totalW+'px;position:relative;height:100%'">
-            <div v-for="tick in hourTicks" :key="'dht-'+tick.x"
-                 class="sb-htick" :style="'left:'+tick.x+'px'">
-              <span v-if="tick.label" class="sb-htick-lbl">{{ tick.label }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Loading / empty -->
-        <div v-if="store.loading" class="sb-loading-row">Chargement…</div>
-        <div v-else-if="!filteredResources.length" class="sb-empty-row">
-          Aucune ressource.
-          <button class="sbf-primary-btn" style="display:inline-block;margin-left:0.75rem" @click="clearFilters">Réinitialiser</button>
-        </div>
-
-        <!-- Resource rows (day) — extracted to TimelineRow component -->
-        <TimelineRow v-for="tech in filteredResources" :key="tech.id"
-             :tech="tech" :segments="techDayJobsWithTravel(tech)"
-             :hour-ticks="hourTicks" :total-w="totalW" :px-per-hr="pxPerHr"
-             :h-start="H_START" :h-end="H_END" :row-h="ROW_H"
-             :is-selected="selectedTechId===tech.id"
-             :is-elevated="techHasLinkedJob(tech)||techIsHovered(tech)"
-             :drop-ghost-x="dropGhost?.techId===tech.id ? dropGhost.x : null"
-             @select-tech="selectTechOnBoard"
-             @ctx-tech="openTechCtx"
-             @drag-tech-start="onTechDragStart"
-             @reorder-drop="onTechReorderDrop"
-             @timeline-dragover="onTimelineDragOver"
-             @timeline-dragleave="onTimelineDragLeave"
-             @timeline-drop="onTimelineDrop"
-             @job-dragstart="onJobDragStart"
-             @job-click="selectJob"
-             @job-dblclick="openEditModal"
-             @job-ctx="openCtxMenu"
-             @assist-ctx="openAssistCtx"
-             @hover-job="id => hoveredJobId=id"
-             @unhover-job="hoveredJobId=null"
-             @block-move="startBlockMove"
-             @block-resize="startResize"
-        />
-
-      </div><!-- /sb-grid day -->
-    </div><!-- /sb-board -->
-
-    <!-- ── BOTTOM PANEL ── -->
-    <BottomPanel :open="bottomPanelOpen" :height="bottomPanelH"
-                 :groups="unassignedGrouped" :unscheduled-count="unscheduledJobs.length"
-                 :selected="bottomSelected" :drop-active="unassignDropActive"
-                 @update:open="v => bottomPanelOpen = v"
-                 @resize-start="startBottomResize"
-                 @toggle-select="toggleBottomSelect"
-                 @select-all="selectAllBottom" @clear-select="clearBottomSelect"
-                 @batch-assign="batchAssignBottom"
-                 @auto-distribute="autoDistribute"
-                 @open-criteria="dispatchCriteriaModal=true"
-                 @row-click="(job) => rightPanel={ mode:'details', data:{ job, tech:null } }"
-                 @row-dblclick="openEditModal"
-                 @row-dragstart="(e, job) => onJobDragStart(e, job, null)"
-                 @drop-unassign="(e, type) => { if(type==='over') unassignDropActive=!!dragJob; else if(type==='leave') unassignDropActive=false; else onDropUnassign(e) }"
-    />
-
-    </div><!-- /sb-center-col -->
-
-    <!-- ── MAP PANEL ── -->
+    <!-- Map panel -->
     <div v-if="mapVisible" class="sb-map-backdrop" @click="mapVisible=false"></div>
-    <div v-if="mapVisible" class="sb-map-panel" @click.stop="()=>{}"
-         :style="`width:${mapPanelW}px;min-width:${mapPanelW}px`">
+    <div v-if="mapVisible" class="sb-map-panel" @click.stop="()=>{}" :style="`width:${mapPanelW}px;min-width:${mapPanelW}px`">
       <div class="sb-map-resize-handle" @mousedown.prevent="startMapResize"></div>
       <div class="sb-map-bar" :class="{ 'sb-map-bar-geofix': geoFixJob }">
         <span class="sb-map-title">Carte</span>
-        <!-- Geo-fix mode -->
         <template v-if="geoFixJob">
           <span class="sb-geofix-hint">📍 Cliquer sur la carte pour placer <strong>{{ geoFixJob.subject }}</strong></span>
           <button class="sb-geofix-cancel" @click="cancelGeoFix">✕ Annuler</button>
         </template>
-        <!-- Normal mode -->
         <template v-else>
-          <span v-if="selectedTechId" class="sb-map-tech"
-                :style="'color:'+TECH_COLORS[store.technicians.find(t=>t.id===selectedTechId)?.colorIdx||0]">
+          <span v-if="selectedTechId" class="sb-map-tech" :style="'color:'+TECH_COLORS[store.technicians.find(t=>t.id===selectedTechId)?.colorIdx||0]">
             ● {{ store.technicians.find(t=>t.id===selectedTechId)?.fullName }}
             <span class="sb-map-route-hint">· Glisser une job sur le trajet</span>
           </span>
@@ -1721,95 +889,19 @@ onUnmounted(() => {
       <div ref="mapContainer" class="sb-map"></div>
     </div>
 
-    <!-- ── RIGHT PANEL ── -->
-    <transition name="sb-slide-right">
-    <aside v-if="rightPanel" class="sb-right">
-      <div class="sb-rp-hdr">
-        <span class="sb-rp-title">
-          {{ {details:'Détails',pending:'Demande entrante'}[rightPanel.mode] || 'Détails' }}
-        </span>
-        <button class="sb-rp-close" @click="rightPanel=null; selectedJob=null">✕</button>
-      </div>
+    <!-- Right panel -->
+    <RightPanel :panel="rightPanel"
+      @close="rightPanel=null; selectedJob=null"
+      @edit="openEditModal" @move="openMoveModal" @geofix="startGeoFix"
+      @unassign="job => { fullUnassign(job); rightPanel=null }"
+      @set-end-date="setEndDate"
+      @remove-assistant="(jobId, techId) => { store.removeAssistant(jobId, techId); invalidateRoutes() }"
+      @assign-pending="() => rightPanel=null"
+      @update-tags="(job, v) => { job.tags = v; persistJobTags(job) }" />
 
-      <!-- JOB DETAILS (single click) -->
-      <template v-if="rightPanel.mode==='details'">
-        <div class="sb-rp-body">
-          <div class="sb-rp-color-bar" :style="'background:'+jobColor(rightPanel.data?.job||{})"></div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Titre</span><strong>{{ rightPanel.data?.job?.subject }}</strong></div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Adresse</span>{{ rightPanel.data?.job?.address || '—' }}</div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Durée</span>{{ fmtDur(rightPanel.data?.job?.duration) }}</div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Priorité</span>
-            <span :class="prioClass(rightPanel.data?.job?.priority)">{{ prioLabel(rightPanel.data?.job?.priority) }}</span>
-          </div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Technicien</span>{{ rightPanel.data?.tech?.fullName || '—' }}</div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Date planifiée</span>
-            {{ rightPanel.data?.job?.scheduledDate || '—' }}
-            <span v-if="rightPanel.data?.job?.endDate"> → {{ rightPanel.data.job.endDate }}</span>
-          </div>
-          <div v-if="rightPanel.data?.job?.assignedTech" class="sb-rp-field">
-            <span class="sb-rp-lbl">Date de fin</span>
-            <input type="date" class="sb-form-input" :value="rightPanel.data?.job?.endDate || ''"
-                   @change="setEndDate(rightPanel.data.job, $event.target.value)" style="margin-top:2px" />
-          </div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Statut</span>{{ rightPanel.data?.job?.status }}</div>
-          <div v-if="rightPanel.data?.job?.note" class="sb-rp-field"><span class="sb-rp-lbl">Note</span>{{ rightPanel.data.job.note }}</div>
-          <div class="sb-rp-field">
-            <span class="sb-rp-lbl">Tags</span>
-            <TagInput v-if="rightPanel.data?.job"
-                      :model-value="rightPanel.data.job.tags || []"
-                      @update:model-value="v => { rightPanel.data.job.tags = v; persistJobTags(rightPanel.data.job) }"
-                      :all-tags="store.allTags" :get-color="getTagColor" @create="onCreateTag" />
-          </div>
-          <div v-if="rightPanel.data?.job?.assistants?.length" class="sb-rp-field">
-            <span class="sb-rp-lbl">Assistants</span>
-            <div v-for="a in rightPanel.data.job.assistants" :key="a.techId" style="display:flex;align-items:center;gap:6px;margin-top:3px">
-              <span class="sb-assist-badge" :style="'background:'+TECH_COLORS[store.technicians.find(t=>t.id===a.techId)?.colorIdx||0]">
-                {{ (a.techName||'').split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
-              </span>
-              <span style="font-size:0.72rem">{{ a.techName }} · {{ fmtDur(a.duration) }}{{ a.note ? ' · '+a.note : '' }}</span>
-              <button style="margin-left:auto;background:none;border:none;color:#ef4444;cursor:pointer;font-size:0.7rem"
-                      @click="store.removeAssistant(rightPanel.data.job.id, a.techId); invalidateRoutes()">✕</button>
-            </div>
-          </div>
-        </div>
-        <div class="sb-rp-actions">
-          <button class="sb-rp-primary" @click="openEditModal(rightPanel.data.job)">✏ Modifier</button>
-          <button class="sb-rp-btn" @click="openMoveModal(rightPanel.data.job, rightPanel.data.tech?.id)">↔ Déplacer / Réassigner</button>
-          <button class="sb-rp-btn" @click="startGeoFix(rightPanel.data.job)">📍 Géofixer sur la carte</button>
-          <button v-if="rightPanel.data?.job?.assignedTech" class="sb-rp-btn sb-ctx-warn" @click="fullUnassign(rightPanel.data.job); rightPanel=null">✕ Désaffecter</button>
-        </div>
-      </template>
+  </div>
 
-      <!-- PENDING REQUEST -->
-      <template v-if="rightPanel.mode==='pending'">
-        <div class="sb-rp-body">
-          <div class="sb-rp-color-bar" :style="'background:'+(rightPanel.data?.urgency==='urgent'?'#ef4444':'#f59e0b')"></div>
-          <div v-if="rightPanel.data?.urgency==='urgent'" class="sb-rp-urgent-tag">🚨 Urgent</div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Client</span><strong>{{ rightPanel.data?.customer_name }}</strong></div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Téléphone</span>{{ rightPanel.data?.phone || '—' }}</div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Service</span>{{ rightPanel.data?.service_type }}</div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Problème</span>{{ rightPanel.data?.problem_type || '—' }}</div>
-          <div class="sb-rp-field"><span class="sb-rp-lbl">Adresse</span>{{ rightPanel.data?.address }}</div>
-          <div v-if="rightPanel.data?.budget_label" class="sb-rp-field"><span class="sb-rp-lbl">Budget</span>{{ rightPanel.data?.budget_label }}</div>
-          <div class="sbf-title" style="margin-top:0.75rem">Assigner à</div>
-          <div class="sb-assign-grid">
-            <button v-for="tech in store.technicians" :key="tech.id"
-                    class="sb-assign-btn"
-                    :style="'border-color:'+TECH_COLORS[tech.colorIdx]"
-                    @click="rightPanel=null">
-              <span class="sb-assign-dot" :style="'background:'+TECH_COLORS[tech.colorIdx]"></span>
-              {{ tech.fullName }}
-            </button>
-          </div>
-        </div>
-      </template>
-
-    </aside>
-    </transition>
-
-  </div><!-- /.sb-body -->
-
-  <!-- ══ CONTEXT MENU ══ -->
+  <!-- ══ CONTEXT MENUS ══ -->
   <div v-if="ctxMenu" class="sb-ctx" :style="'left:'+ctxMenu.x+'px;top:'+ctxMenu.y+'px'" @click.stop="()=>{}">
     <button class="sb-ctx-item" @click="ctxDetails()">📄 Voir détails</button>
     <button class="sb-ctx-item" @click="ctxMove()">↔ Déplacer / Réassigner</button>
@@ -1819,22 +911,6 @@ onUnmounted(() => {
     <button class="sb-ctx-item sb-ctx-warn" @click="ctxUnschedule()">✕ Désaffecter</button>
   </div>
 
-  <!-- ══ MULTI-SELECT TOOLBAR ══ -->
-  <transition name="sb-slide-up">
-  <div v-if="multiSelect.length" class="sb-multi-bar">
-    <span class="sb-multi-count">{{ multiSelect.length }} sélectionné{{ multiSelect.length>1?'s':'' }}</span>
-    <button class="sb-multi-btn" @click="batchUnassign()">✕ Désaffecter</button>
-    <span class="sb-multi-sep">|</span>
-    <span class="sb-multi-lbl">Déplacer vers :</span>
-    <button v-for="t in store.technicians" :key="t.id" class="sb-multi-tech"
-            :style="'border-color:'+TECH_COLORS[t.colorIdx]" @click="batchMoveTo(t.id)">
-      {{ t.fullName.split(' ').map(n=>n[0]).join('').toUpperCase() }}
-    </button>
-    <button class="sb-multi-btn sb-multi-clear" @click="multiSelect=[]; selectedJob=null">Annuler</button>
-  </div>
-  </transition>
-
-  <!-- ══ TECH CONTEXT MENU ══ -->
   <div v-if="techCtx" class="sb-ctx" :style="'left:'+techCtx.x+'px;top:'+techCtx.y+'px'" @click.stop="()=>{}">
     <button class="sb-ctx-item" @click="selectTechOnBoard(techCtx.tech); techCtx=null">🗺 Voir sur la carte</button>
     <button class="sb-ctx-item" @click="optimizeRoute()">🔀 Optimiser la route</button>
@@ -1843,25 +919,6 @@ onUnmounted(() => {
     <button class="sb-ctx-item" @click="window.open('/desk/Dispatch Technician/'+techCtx.tech.name,'_blank'); techCtx=null">↗ Ouvrir dans ERPNext</button>
   </div>
 
-  <!-- ══ TECH TAG MODAL ══ -->
-  <div v-if="techTagModal" class="sb-overlay" @click.self="techTagModal=null">
-    <div class="sb-modal">
-      <div class="sb-modal-hdr">
-        <span>🏷 Tags — {{ techTagModal.fullName }}</span>
-        <button class="sb-rp-close" @click="techTagModal=null">✕</button>
-      </div>
-      <div class="sb-modal-body">
-        <TagInput :model-value="techTagModal.tags || []"
-                  @update:model-value="v => { techTagModal.tags = v; persistTechTags(techTagModal) }"
-                  :all-tags="store.allTags" :get-color="getTagColor" @create="onCreateTag" />
-      </div>
-      <div class="sb-modal-ftr">
-        <button class="sb-rp-primary" @click="techTagModal=null">Fermer</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- ══ ASSISTANT CONTEXT MENU ══ -->
   <div v-if="assistCtx" class="sb-ctx" :style="'left:'+assistCtx.x+'px;top:'+assistCtx.y+'px'" @click.stop="()=>{}">
     <button class="sb-ctx-item" @click="assistCtxTogglePin()">
       {{ assistCtx?.job?.assistants?.find(a=>a.techId===assistCtx?.techId)?.pinned ? '↕ Rendre flottant' : '📌 Prioriser dans le timeline' }}
@@ -1872,44 +929,51 @@ onUnmounted(() => {
     <button class="sb-ctx-item sb-ctx-warn" @click="assistCtxRemove()">✕ Retirer l'assistant</button>
   </div>
 
-  <!-- ══ ASSISTANT NOTE MODAL ══ -->
+  <!-- ══ MULTI-SELECT TOOLBAR ══ -->
+  <transition name="sb-slide-up">
+  <div v-if="multiSelect.length" class="sb-multi-bar">
+    <span class="sb-multi-count">{{ multiSelect.length }} sélectionné{{ multiSelect.length>1?'s':'' }}</span>
+    <button class="sb-multi-btn" @click="batchUnassign()">✕ Désaffecter</button>
+    <span class="sb-multi-sep">|</span>
+    <span class="sb-multi-lbl">Déplacer vers :</span>
+    <button v-for="t in store.technicians" :key="t.id" class="sb-multi-tech" :style="'border-color:'+TECH_COLORS[t.colorIdx]" @click="batchMoveTo(t.id)">
+      {{ t.fullName.split(' ').map(n=>n[0]).join('').toUpperCase() }}
+    </button>
+    <button class="sb-multi-btn sb-multi-clear" @click="multiSelect=[]; selectedJob=null">Annuler</button>
+  </div>
+  </transition>
+
+  <!-- ══ MODALS ══ -->
+  <div v-if="techTagModal" class="sb-overlay" @click.self="techTagModal=null">
+    <div class="sb-modal">
+      <div class="sb-modal-hdr"><span>🏷 Tags — {{ techTagModal.fullName }}</span><button class="sb-rp-close" @click="techTagModal=null">✕</button></div>
+      <div class="sb-modal-body">
+        <TagInput :model-value="techTagModal.tags || []" @update:model-value="v => { techTagModal.tags = v; persistTechTags(techTagModal) }"
+                  :all-tags="store.allTags" :get-color="getTagColor" @create="onCreateTag" />
+      </div>
+      <div class="sb-modal-ftr"><button class="sb-rp-primary" @click="techTagModal=null">Fermer</button></div>
+    </div>
+  </div>
+
   <div v-if="assistNoteModal" class="sb-overlay" @click.self="assistNoteModal=null">
     <div class="sb-modal">
-      <div class="sb-modal-hdr">
-        <span>📝 Note assistant</span>
-        <button class="sb-rp-close" @click="assistNoteModal=null">✕</button>
-      </div>
+      <div class="sb-modal-hdr"><span>📝 Note assistant</span><button class="sb-rp-close" @click="assistNoteModal=null">✕</button></div>
       <div class="sb-modal-body">
         <label class="sb-form-lbl">Titre / note pour cette tâche</label>
         <input type="text" class="sb-form-input" v-model="assistNoteModal.note" placeholder="Ex: Livraison outil, Support câblage..." @keyup.enter="confirmAssistNote" />
         <p style="font-size:0.6rem;color:#7b80a0;margin-top:0.3rem">Job parent : {{ assistNoteModal.job?.subject }}</p>
       </div>
-      <div class="sb-modal-footer">
-        <button class="sb-rp-primary" @click="confirmAssistNote">Enregistrer</button>
-        <button class="sb-rp-btn" @click="assistNoteModal=null">Annuler</button>
-      </div>
+      <div class="sb-modal-footer"><button class="sb-rp-primary" @click="confirmAssistNote">Enregistrer</button><button class="sb-rp-btn" @click="assistNoteModal=null">Annuler</button></div>
     </div>
   </div>
 
-  <!-- ══ TIME PIN MODAL ══ -->
   <div v-if="timeModal" class="sb-overlay" @click.self="timeModal=null">
     <div class="sb-modal">
-      <div class="sb-modal-hdr">
-        <span>🕐 Heure de début fixe</span>
-        <button class="sb-rp-close" @click="timeModal=null">✕</button>
-      </div>
+      <div class="sb-modal-hdr"><span>🕐 Heure de début fixe</span><button class="sb-rp-close" @click="timeModal=null">✕</button></div>
       <div class="sb-modal-body">
-        <div class="sb-form-row">
-          <label class="sb-form-lbl">Job</label>
-          <div class="sb-form-val">{{ timeModal.job?.subject }}</div>
-        </div>
-        <div class="sb-form-row">
-          <label class="sb-form-lbl">Heure fixe</label>
-          <input type="time" class="sb-form-input" v-model="timeModal.time" />
-        </div>
-        <div v-if="timeModal.hasPin" style="font-size:0.68rem;color:#f59e0b;margin-top:0.4rem">
-          ⚠ Heure actuellement fixée — modifier ou supprimer ci-dessous.
-        </div>
+        <div class="sb-form-row"><label class="sb-form-lbl">Job</label><div class="sb-form-val">{{ timeModal.job?.subject }}</div></div>
+        <div class="sb-form-row"><label class="sb-form-lbl">Heure fixe</label><input type="time" class="sb-form-input" v-model="timeModal.time" /></div>
+        <div v-if="timeModal.hasPin" style="font-size:0.68rem;color:#f59e0b;margin-top:0.4rem">⚠ Heure actuellement fixée — modifier ou supprimer ci-dessous.</div>
       </div>
       <div class="sb-modal-ftr">
         <button class="sbf-primary-btn" @click="confirmTime">📌 Fixer</button>
@@ -1919,124 +983,74 @@ onUnmounted(() => {
     </div>
   </div>
 
-  <!-- ══ MOVE BOOKING MODAL ══ -->
   <div v-if="moveModalOpen" class="sb-overlay" @click.self="moveModalOpen=false">
     <div class="sb-modal">
-      <div class="sb-modal-hdr">
-        <span>Déplacer la réservation</span>
-        <button class="sb-rp-close" @click="moveModalOpen=false">✕</button>
-      </div>
+      <div class="sb-modal-hdr"><span>Déplacer la réservation</span><button class="sb-rp-close" @click="moveModalOpen=false">✕</button></div>
       <div class="sb-modal-body" v-if="moveForm">
-        <div class="sb-form-row">
-          <label class="sb-form-lbl">Ticket</label>
-          <div class="sb-form-val">{{ moveForm.job?.subject }}</div>
-        </div>
-        <div class="sb-form-row">
-          <label class="sb-form-lbl">Technicien actuel</label>
-          <div class="sb-form-val">{{ store.technicians.find(t=>t.id===moveForm.srcTechId)?.fullName || '—' }}</div>
-        </div>
-        <div class="sb-form-row">
-          <label class="sb-form-lbl">Nouveau technicien</label>
-          <select class="sb-form-sel" v-model="moveForm.newTechId">
-            <option v-for="t in store.technicians" :key="t.id" :value="t.id">{{ t.fullName }}</option>
-          </select>
-        </div>
-        <div class="sb-form-row">
-          <label class="sb-form-lbl">Nouvelle date</label>
-          <input type="date" class="sb-form-input" v-model="moveForm.newDate" />
+        <div class="sb-form-row"><label class="sb-form-lbl">Ticket</label><div class="sb-form-val">{{ moveForm.job?.subject }}</div></div>
+        <div class="sb-form-row"><label class="sb-form-lbl">Technicien actuel</label><div class="sb-form-val">{{ store.technicians.find(t=>t.id===moveForm.srcTechId)?.fullName || '—' }}</div></div>
+        <div class="sb-form-row"><label class="sb-form-lbl">Nouveau technicien</label>
+          <select class="sb-form-sel" v-model="moveForm.newTechId"><option v-for="t in store.technicians" :key="t.id" :value="t.id">{{ t.fullName }}</option></select>
         </div>
+        <div class="sb-form-row"><label class="sb-form-lbl">Nouvelle date</label><input type="date" class="sb-form-input" v-model="moveForm.newDate" /></div>
       </div>
-      <div class="sb-modal-ftr">
-        <button class="sbf-primary-btn" @click="confirmMove">✓ Confirmer</button>
-        <button class="sb-rp-btn" @click="moveModalOpen=false">Annuler</button>
-      </div>
+      <div class="sb-modal-ftr"><button class="sbf-primary-btn" @click="confirmMove">✓ Confirmer</button><button class="sb-rp-btn" @click="moveModalOpen=false">Annuler</button></div>
     </div>
   </div>
 
-  <!-- ══ RESOURCE SELECTOR MODAL ══ -->
   <div v-if="resSelectorOpen" class="sb-overlay" @click.self="resSelectorOpen=false">
     <div class="sb-modal sb-modal-wide">
-      <div class="sb-modal-hdr">
-        <span>Sélectionner les ressources à afficher</span>
-        <button class="sb-rp-close" @click="resSelectorOpen=false">✕</button>
-      </div>
+      <div class="sb-modal-hdr"><span>Sélectionner les ressources à afficher</span><button class="sb-rp-close" @click="resSelectorOpen=false">✕</button></div>
       <div class="sb-modal-body">
         <div class="sb-res-sel-wrap">
           <div class="sb-res-sel-col">
             <div class="sb-res-sel-hdr">Disponibles</div>
-            <div v-for="t in store.technicians.filter(x=>!tempSelectedIds.includes(x.id))" :key="t.id"
-                 class="sb-res-sel-item" @click="toggleTempRes(t.id)">
-              <div class="sb-avatar-xs" :style="'background:'+TECH_COLORS[t.colorIdx]">
-                {{ t.fullName.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
-              </div>
-              {{ t.fullName }}
+            <div v-for="t in store.technicians.filter(x=>!tempSelectedIds.includes(x.id))" :key="t.id" class="sb-res-sel-item" @click="toggleTempRes(t.id)">
+              <div class="sb-avatar-xs" :style="'background:'+TECH_COLORS[t.colorIdx]">{{ t.fullName.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}</div>{{ t.fullName }}
             </div>
             <div v-if="!store.technicians.filter(x=>!tempSelectedIds.includes(x.id)).length" class="sbf-empty">Toutes sélectionnées</div>
           </div>
           <div class="sb-res-sel-arrow">→</div>
           <div class="sb-res-sel-col">
             <div class="sb-res-sel-hdr">Sélectionnées <span class="sbf-count">{{ tempSelectedIds.length || 'Toutes' }}</span></div>
-            <div v-for="t in store.technicians.filter(x=>tempSelectedIds.includes(x.id))" :key="t.id"
-                 class="sb-res-sel-item sb-res-sel-active" @click="toggleTempRes(t.id)">
-              <div class="sb-avatar-xs" :style="'background:'+TECH_COLORS[t.colorIdx]">
-                {{ t.fullName.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}
-              </div>
-              {{ t.fullName }}
-              <span class="sb-res-sel-rm">✕</span>
+            <div v-for="t in store.technicians.filter(x=>tempSelectedIds.includes(x.id))" :key="t.id" class="sb-res-sel-item sb-res-sel-active" @click="toggleTempRes(t.id)">
+              <div class="sb-avatar-xs" :style="'background:'+TECH_COLORS[t.colorIdx]">{{ t.fullName.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2) }}</div>{{ t.fullName }}<span class="sb-res-sel-rm">✕</span>
             </div>
             <div v-if="!tempSelectedIds.length" class="sbf-empty">Toutes affichées</div>
           </div>
         </div>
       </div>
-      <div class="sb-modal-ftr">
-        <button class="sbf-primary-btn" @click="applyResSelector">Appliquer</button>
-        <button class="sb-rp-btn" @click="resSelectorOpen=false">Annuler</button>
-      </div>
+      <div class="sb-modal-ftr"><button class="sbf-primary-btn" @click="applyResSelector">Appliquer</button><button class="sb-rp-btn" @click="resSelectorOpen=false">Annuler</button></div>
     </div>
   </div>
 
-  <!-- ══ CREATE WORK ORDER MODAL ══ -->
   <WoCreateModal v-model="woModal" @confirm="confirmWo" />
-
-  <!-- ══ EDIT JOB MODAL ══ -->
   <JobEditModal v-model="editModal" @confirm="confirmEdit" />
 
-  <!-- (old inline modals removed — now in components) -->
-  <!-- keep anchor for search -->
-  <!-- ══ DISPATCH CRITERIA MODAL ══ -->
   <div v-if="dispatchCriteriaModal" class="sb-overlay" @click.self="dispatchCriteriaModal=false">
     <div class="sb-modal">
-      <div class="sb-modal-hdr">
-        <span>⚙ Critères de dispatch automatique</span>
-        <button class="sb-rp-close" @click="dispatchCriteriaModal=false">✕</button>
-      </div>
+      <div class="sb-modal-hdr"><span>⚙ Critères de dispatch automatique</span><button class="sb-rp-close" @click="dispatchCriteriaModal=false">✕</button></div>
       <div class="sb-modal-body">
         <p style="font-size:0.65rem;color:var(--sb-muted);margin:0 0 0.5rem">Glissez pour réordonner. Les critères du haut ont plus de poids.</p>
         <div v-for="(c, i) in dispatchCriteria" :key="c.id" class="sb-crit-row">
           <span class="sb-crit-order">{{ i + 1 }}</span>
-          <label class="sb-crit-label">
-            <input type="checkbox" v-model="c.enabled" />
-            {{ c.label }}
-          </label>
+          <label class="sb-crit-label"><input type="checkbox" v-model="c.enabled" />{{ c.label }}</label>
           <div class="sb-crit-arrows">
             <button :disabled="i===0" @click="moveCriterion(i,-1)">▲</button>
             <button :disabled="i===dispatchCriteria.length-1" @click="moveCriterion(i,1)">▼</button>
           </div>
         </div>
       </div>
-      <div class="sb-modal-ftr">
-        <button class="sbf-primary-btn" @click="saveDispatchCriteria">✓ Enregistrer</button>
-        <button class="sb-rp-btn" @click="dispatchCriteriaModal=false">Annuler</button>
-      </div>
+      <div class="sb-modal-ftr"><button class="sbf-primary-btn" @click="saveDispatchCriteria">✓ Enregistrer</button><button class="sb-rp-btn" @click="dispatchCriteriaModal=false">Annuler</button></div>
     </div>
   </div>
 
 </div>
 </template>
 
-<style scoped>
+<style>
 /* ── Root ── */
-:global(html), :global(body) { margin:0; padding:0; height:100%; overflow:hidden; }
+html, body { margin:0; padding:0; height:100%; overflow:hidden; }
 .sb-root {
   --sb-bg: #0d0f18; --sb-sidebar: #111422; --sb-card: #181c2e; --sb-card-h: #1e2338;
   --sb-border: rgba(255,255,255,0.06); --sb-border-acc: rgba(99,102,241,0.4);
@@ -2049,43 +1063,29 @@ onUnmounted(() => {
 }
 
 /* ── Header ── */
-.sb-header {
-  display: flex; align-items: center; gap: 0.5rem;
-  padding: 0 0.75rem;
-  background: var(--sb-sidebar);
-  border-bottom: 1px solid var(--sb-border);
-  box-shadow: 0 1px 12px rgba(0,0,0,0.4);
-  z-index: 30; overflow: hidden;
-}
-.sb-header-left  { display:flex; align-items:center; gap:0.4rem; flex-shrink:0; }
-.sb-header-center{ display:flex; align-items:center; gap:0.35rem; flex:1; justify-content:center; }
+.sb-header { display:flex; align-items:center; gap:0.5rem; padding:0 0.75rem; background:var(--sb-sidebar); border-bottom:1px solid var(--sb-border); box-shadow:0 1px 12px rgba(0,0,0,0.4); z-index:30; overflow:hidden; }
+.sb-header-left { display:flex; align-items:center; gap:0.4rem; flex-shrink:0; }
+.sb-header-center { display:flex; align-items:center; gap:0.35rem; flex:1; justify-content:center; }
 .sb-header-right { display:flex; align-items:center; gap:0.35rem; flex-shrink:0; margin-left:auto; }
-
 .sb-logo-btn { background:none; border:1px solid var(--sb-border); border-radius:6px; color:var(--sb-muted); font-size:0.72rem; font-weight:700; padding:0.2rem 0.55rem; cursor:pointer; white-space:nowrap; text-decoration:none; }
 .sb-logo-btn:hover { color:var(--sb-text); border-color:var(--sb-border-acc); }
-
 .sb-tabs { display:flex; align-items:center; border-left:1px solid var(--sb-border); margin-left:0.25rem; padding-left:0.4rem; gap:0.15rem; }
 .sb-tab { background:none; border:none; color:var(--sb-muted); font-size:0.72rem; font-weight:600; padding:0.3rem 0.6rem; cursor:pointer; border-bottom:2px solid transparent; transition:color 0.15s, border-color 0.15s; white-space:nowrap; }
 .sb-tab.active { color:var(--sb-acc); border-bottom-color:var(--sb-acc); }
 .sb-tab-add { opacity:0.45; font-size:1rem; padding:0.15rem 0.4rem; }
 .sb-tab-add:hover { opacity:1; }
-
 .sb-hbtn { background:none; border:1px solid var(--sb-border); border-radius:6px; color:var(--sb-text); font-size:0.85rem; padding:0.2rem 0.55rem; cursor:pointer; }
 .sb-hbtn:hover { background:var(--sb-card); }
 .sb-today-btn { font-size:0.7rem; font-weight:700; }
 .sb-period-label { font-size:0.78rem; font-weight:600; min-width:180px; text-align:center; white-space:nowrap; }
-
 .sb-view-sw { display:flex; background:var(--sb-card); border:1px solid var(--sb-border); border-radius:6px; overflow:hidden; }
 .sb-view-sw button { background:none; border:none; color:var(--sb-muted); font-size:0.68rem; font-weight:700; padding:0.22rem 0.6rem; cursor:pointer; transition:color 0.12s, background 0.12s; }
 .sb-view-sw button.active { background:none; color:var(--sb-acc); box-shadow:inset 0 0 0 1.5px var(--sb-acc); }
-
 .sb-search { background:var(--sb-card); border:1px solid var(--sb-border); border-radius:6px; color:var(--sb-text); font-size:0.72rem; padding:0.22rem 0.55rem; width:160px; outline:none; }
 .sb-search::placeholder { color:var(--sb-muted); }
 .sb-search:focus { border-color:var(--sb-border-acc); }
-
 .sb-icon-btn { background:none; border:1px solid var(--sb-border); border-radius:6px; color:var(--sb-muted); font-size:0.68rem; font-weight:600; padding:0.22rem 0.55rem; cursor:pointer; white-space:nowrap; transition:color 0.12s, border-color 0.12s; }
 .sb-icon-btn:hover, .sb-icon-btn.active { color:var(--sb-text); border-color:var(--sb-border-acc); background:var(--sb-card); }
-
 .sb-erp-dot { width:7px; height:7px; border-radius:50%; background:var(--sb-red); transition:background 0.3s; }
 .sb-erp-dot.ok { background:var(--sb-green); }
 .sb-wo-btn { background:var(--sb-acc); border:none; border-radius:6px; color:#fff; font-size:0.7rem; font-weight:800; padding:0.22rem 0.65rem; cursor:pointer; white-space:nowrap; }
@@ -2094,69 +1094,25 @@ onUnmounted(() => {
 /* ── Body ── */
 .sb-body { grid-row:2; display:flex; overflow:hidden; min-height:0; position:relative; }
 
-/* ── Sidebar icon strip ── */
-.sb-sidebar-strip {
-  width:48px; min-width:48px; flex-shrink:0;
-  display:flex; flex-direction:column; align-items:center;
-  background:var(--sb-sidebar); border-right:1px solid var(--sb-border);
-  padding:6px 0; gap:2px; z-index:20;
-}
+/* ── Sidebar ── */
+.sb-sidebar-strip { width:48px; min-width:48px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; background:var(--sb-sidebar); border-right:1px solid var(--sb-border); padding:6px 0; gap:2px; z-index:20; }
 .sbs-search-wrap { width:100%; padding:0 6px; margin-bottom:4px; }
-.sbs-search {
-  width:100%; background:var(--sb-card); border:1px solid var(--sb-border); border-radius:6px;
-  color:var(--sb-text); font-size:0.72rem; padding:5px 4px; outline:none; text-align:center;
-  box-sizing:border-box;
-}
+.sbs-search { width:100%; background:var(--sb-card); border:1px solid var(--sb-border); border-radius:6px; color:var(--sb-text); font-size:0.72rem; padding:5px 4px; outline:none; text-align:center; box-sizing:border-box; }
 .sbs-search:focus { border-color:var(--sb-border-acc); }
-.sbs-icon {
-  width:36px; height:36px; border-radius:8px; border:none;
-  background:none; color:var(--sb-muted); cursor:pointer;
-  display:flex; align-items:center; justify-content:center;
-  position:relative; transition:background 0.12s, color 0.12s;
-  text-decoration:none;
-}
+.sbs-icon { width:36px; height:36px; border-radius:8px; border:none; background:none; color:var(--sb-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative; transition:background 0.12s, color 0.12s; text-decoration:none; }
 .sbs-icon:hover, .sbs-icon.active { background:var(--sb-card); color:var(--sb-text); }
 .sbs-icon svg { width:16px; height:16px; }
-.sbs-badge {
-  position:absolute; top:4px; right:4px; width:7px; height:7px;
-  border-radius:50%; background:var(--sb-acc);
-}
-.sbs-count {
-  position:absolute; top:2px; right:0; min-width:14px; height:14px;
-  border-radius:7px; background:var(--sb-acc); color:#fff;
-  font-size:0.5rem; font-weight:700; display:flex; align-items:center; justify-content:center;
-  padding:0 3px;
-}
-.sbs-search-full {
-  width:100%; background:var(--sb-card); border:1px solid var(--sb-border); border-radius:6px;
-  color:var(--sb-text); font-size:0.72rem; padding:0.25rem 0.45rem; outline:none; box-sizing:border-box;
-}
+.sbs-badge { position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:var(--sb-acc); }
+.sbs-count { position:absolute; top:2px; right:0; min-width:14px; height:14px; border-radius:7px; background:var(--sb-acc); color:#fff; font-size:0.5rem; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 3px; }
+.sbs-search-full { width:100%; background:var(--sb-card); border:1px solid var(--sb-border); border-radius:6px; color:var(--sb-text); font-size:0.72rem; padding:0.25rem 0.45rem; outline:none; box-sizing:border-box; }
 .sbs-search-full:focus { border-color:var(--sb-border-acc); }
 
-/* ── Flyout panel ── */
-.sb-flyout {
-  width:260px; min-width:260px; flex-shrink:0;
-  display:flex; flex-direction:column;
-  background:var(--sb-sidebar); border-right:1px solid var(--sb-border);
-  overflow-y:auto; z-index:19;
-  box-shadow:4px 0 16px rgba(0,0,0,0.3);
-}
+/* ── Flyout ── */
+.sb-flyout { width:260px; min-width:260px; flex-shrink:0; display:flex; flex-direction:column; background:var(--sb-sidebar); border-right:1px solid var(--sb-border); overflow-y:auto; z-index:19; box-shadow:4px 0 16px rgba(0,0,0,0.3); }
 .sb-flyout::-webkit-scrollbar { width:3px; }
 .sb-flyout::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); }
-
-/* ── Filter panel (kept for flyout sections) ── */
-.sb-overlay-backdrop {
-  position:absolute; top:0; left:0; right:0; bottom:0; z-index:24;
-  background:rgba(0,0,0,0.3);
-}
-.sb-left-overlay {
-  position:absolute; top:0; left:0; z-index:25;
-  width:280px; min-width:280px; height:100%;
-  display:flex; flex-direction:column;
-  background:var(--sb-sidebar); color:var(--sb-text);
-  border-right:1px solid var(--sb-border);
-  box-shadow:4px 0 16px rgba(0,0,0,0.5);
-}
+.sb-overlay-backdrop { position:absolute; top:0; left:0; right:0; bottom:0; z-index:24; background:rgba(0,0,0,0.3); }
+.sb-left-overlay { position:absolute; top:0; left:0; z-index:25; width:280px; min-width:280px; height:100%; display:flex; flex-direction:column; background:var(--sb-sidebar); color:var(--sb-text); border-right:1px solid var(--sb-border); box-shadow:4px 0 16px rgba(0,0,0,0.5); }
 .sbf-section { padding:0.6rem 0.65rem; border-bottom:1px solid var(--sb-border); flex-shrink:0; }
 .sbf-section-grow { flex:1; overflow-y:auto; padding:0.5rem 0.65rem; display:flex; flex-direction:column; gap:0.3rem; }
 .sbf-section-grow::-webkit-scrollbar { width:3px; }
@@ -2175,214 +1131,92 @@ onUnmounted(() => {
 .sbf-clear-btn:hover { background:rgba(239,68,68,0.08); }
 .sbf-drop-active { background:rgba(99,102,241,0.07); border-radius:6px; }
 .sbf-drop-hint { font-size:0.68rem; color:var(--sb-acc); font-weight:700; text-align:center; padding:0.4rem; border:1.5px dashed var(--sb-border-acc); border-radius:6px; margin-bottom:0.35rem; }
-.sbf-loading { font-size:0.72rem; color:var(--sb-muted); font-style:italic; padding:0.4rem 0; }
-.sbf-empty   { font-size:0.72rem; color:var(--sb-muted); font-style:italic; padding:0.25rem 0; }
-
-.sbf-card {
-  display:flex; border-radius:7px; overflow:hidden; cursor:grab;
-  background:var(--sb-card); border:1px solid var(--sb-border);
-  transition:border-color 0.12s, transform 0.12s;
-}
+.sbf-empty { font-size:0.72rem; color:var(--sb-muted); font-style:italic; padding:0.25rem 0; }
+.sbf-card { display:flex; border-radius:7px; overflow:hidden; cursor:grab; background:var(--sb-card); border:1px solid var(--sb-border); transition:border-color 0.12s, transform 0.12s; }
 .sbf-card:hover { border-color:var(--sb-border-acc); transform:translateY(-1px); }
-.sbf-card-req { cursor:pointer; }
-.sbf-card-urgent { border-left:3px solid rgba(239,68,68,0.6); }
 .sbf-card-stripe { width:4px; flex-shrink:0; }
 .sbf-card-body { flex:1; min-width:0; padding:0.35rem 0.45rem; }
 .sbf-card-title { font-size:0.72rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-.sbf-card-meta  { font-size:0.62rem; color:var(--sb-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-.sbf-drag-hint  { color:var(--sb-muted); font-size:0.9rem; padding:0.3rem 0.3rem 0.3rem 0; opacity:0.4; display:flex; align-items:center; }
+.sbf-card-meta { font-size:0.62rem; color:var(--sb-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 
-/* ── Center column (board + bottom panel) ── */
+/* ── Center ── */
 .sb-center-col { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
-
-/* ── Board ── */
 .sb-board { flex:1; overflow:auto; min-width:0; position:relative; min-height:0; }
 .sb-board::-webkit-scrollbar { width:5px; height:5px; }
 .sb-board::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }
 
+/* ── Grid ── */
 .sb-grid { display:flex; flex-direction:column; }
-
-/* Calendar grid fills available width, no horizontal scroll */
 .sb-grid-cal { display:flex; flex-direction:column; width:100%; min-width:0; }
-
-/* Grid header */
-.sb-grid-hdr {
-  display:flex; height:46px; flex-shrink:0;
-  position:sticky; top:0; z-index:15;
-  background:var(--sb-sidebar); border-bottom:1px solid var(--sb-border);
-}
-.sb-res-hdr {
-  width:200px; min-width:200px; flex-shrink:0; position:sticky; left:0; z-index:16;
-  background:var(--sb-sidebar); border-right:1px solid var(--sb-border);
-  display:flex; align-items:center; padding:0 0.75rem;
-  font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--sb-muted);
-  gap:0.35rem;
-}
+.sb-grid-hdr { display:flex; height:46px; flex-shrink:0; position:sticky; top:0; z-index:15; background:var(--sb-sidebar); border-bottom:1px solid var(--sb-border); }
+.sb-res-hdr { width:200px; min-width:200px; flex-shrink:0; position:sticky; left:0; z-index:16; background:var(--sb-sidebar); border-right:1px solid var(--sb-border); display:flex; align-items:center; padding:0 0.75rem; font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--sb-muted); gap:0.35rem; }
 .sb-time-hdr-wrap { overflow:hidden; position:relative; }
-
-/* Calendar header (week/month) */
 .sb-cal-hdr { display:flex; flex:1; overflow:hidden; }
-.sb-cal-hdr-cell {
-  flex:1; min-width:0;
-  border-left:1px solid var(--sb-border);
-  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
-  padding:2px 0;
-}
+.sb-cal-hdr-cell { flex:1; min-width:0; border-left:1px solid var(--sb-border); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:2px 0; }
 .sb-cal-hdr-cell.sb-col-today { background:rgba(99,102,241,0.06); }
 .sb-cal-wd { font-size:0.58rem; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; color:var(--sb-muted); }
 .sb-cal-dn { font-size:0.82rem; font-weight:700; color:var(--sb-text); line-height:1; }
-.sb-cal-mo { font-size:0.55rem; color:var(--sb-muted); }
 .sb-today-bubble { background:var(--sb-acc); color:#fff !important; border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
-
-/* Day view: hour ticks */
 .sb-htick { position:absolute; top:0; height:100%; border-left:1px solid var(--sb-border); }
 .sb-htick-lbl { position:absolute; top:6px; left:4px; font-size:0.58rem; color:var(--sb-muted); white-space:nowrap; font-weight:600; }
 
-/* Resource rows */
+/* ── Rows ── */
 .sb-row { display:flex; border-bottom:1px solid var(--sb-border); transition:background 0.12s; }
 .sb-row-cal { align-items:stretch; min-height:44px; height:auto !important; }
 .sb-row-sel { background:rgba(99,102,241,0.04); }
 .sb-row-elevated { position:relative; z-index:8; }
 .sb-row-elevated .sb-timeline { overflow:visible; }
 .sb-loading-row, .sb-empty-row { padding:2rem; text-align:center; color:var(--sb-muted); font-style:italic; }
-
-/* Calendar row: flex day cells */
 .sb-cal-row { display:flex; flex:1; min-width:0; overflow:hidden; }
-.sb-cal-cell {
-  flex:1; min-width:0;
-  border-left:1px solid var(--sb-border);
-  padding:2px 3px;
-  position:relative;
-  display:flex; flex-direction:column; gap:3px;
-  transition:background 0.1s;
-}
+.sb-cal-cell { flex:1; min-width:0; border-left:1px solid var(--sb-border); padding:2px 3px; position:relative; display:flex; flex-direction:column; gap:3px; transition:background 0.1s; }
 .sb-cal-cell:hover { background:rgba(255,255,255,0.02); }
 .sb-cal-drop { position:absolute; inset:1px; border:1.5px dashed var(--sb-acc); border-radius:4px; background:rgba(99,102,241,0.08); pointer-events:none; z-index:2; }
-
-/* Job chip (calendar view) */
-.sb-chip {
-  font-size:0.62rem; font-weight:600;
-  padding:4px 6px;
-  border-radius:5px;
-  border-left:3px solid transparent;
-  border-radius:6px;
-  border-left:3px solid transparent;
-  overflow:hidden;
-  cursor:pointer;
-  transition:background 0.1s;
-  color:var(--sb-text);
-  line-height:1.5;
-  z-index:1; position:relative;
-}
+.sb-chip { font-size:0.62rem; font-weight:600; padding:4px 6px; border-radius:6px; border-left:3px solid transparent; overflow:hidden; cursor:pointer; transition:background 0.1s; color:var(--sb-text); line-height:1.5; z-index:1; position:relative; }
 .sb-chip:hover { background:rgba(255,255,255,0.12); }
 .sb-chip-done { opacity:0.45; text-decoration:line-through; }
-.sb-chip-pinned { border-left-width:3px; }
-.sb-chip-sel    { outline:1.5px solid #6366f1; outline-offset:1px; }
+.sb-chip-sel { outline:1.5px solid #6366f1; outline-offset:1px; }
 .sb-chip-assist { opacity:0.7; border-left-style:dashed !important; font-style:italic; }
 .sb-chip-assist-tag { font-size:0.5rem; margin-right:2px; }
-
-/* Tags */
-/* Address autocomplete */
-.sb-addr-wrap { position:relative; }
-.sb-addr-dropdown { position:absolute; top:100%; left:0; right:0; z-index:50; background:#181c2e; border:1px solid rgba(99,102,241,0.3); border-radius:6px; max-height:200px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
-.sb-addr-item { padding:6px 10px; cursor:pointer; font-size:0.72rem; color:#e2e4ef; border-bottom:1px solid rgba(255,255,255,0.04); }
-.sb-addr-item:hover { background:rgba(99,102,241,0.12); }
-.sb-addr-item strong { color:#fff; }
-.sb-addr-city { float:right; font-size:0.6rem; color:#7b80a0; }
-.sb-addr-confirmed { font-size:0.6rem; color:#10b981; margin-top:3px; }
-.sb-addr-cp { font-size:0.6rem; color:#6366f1; margin-left:4px; }
-
-/* WO modal layout */
-.sb-modal-wo { min-width:500px; max-width:720px; }
-.sb-wo-body { display:flex; gap:1rem; }
-.sb-wo-form { flex:1; min-width:0; }
-.sb-wo-minimap { width:280px; flex-shrink:0; display:flex; align-items:flex-start; }
-.sb-minimap-img { width:100%; border-radius:8px; border:1px solid rgba(255,255,255,0.06); }
-
-.sb-tag-chips { display:flex; flex-wrap:wrap; gap:3px; margin-top:2px; }
-.sb-tag-chip { display:inline-flex; align-items:center; gap:2px; font-size:0.55rem; font-weight:600; color:#fff; padding:1px 6px; border-radius:10px; white-space:nowrap; }
-.sb-tag-rm { background:none; border:none; color:rgba(255,255,255,0.6); cursor:pointer; font-size:0.7rem; padding:0 1px; margin-left:1px; }
-.sb-tag-rm:hover { color:#fff; }
-.sb-tag-add { background:#181c2e; border:1px solid rgba(255,255,255,0.06); border-radius:10px; color:#7b80a0; font-size:0.55rem; padding:1px 6px; cursor:pointer; margin-top:2px; }
-.sb-tag-filter { margin-bottom:4px; }
-.sb-tag-chip-active { cursor:pointer; }
-.sb-tag-chip-active:hover { filter:brightness(0.8); }
-.sb-chip-time { font-size:0.55rem; color:var(--sb-muted); margin-right:3px; font-variant-numeric:tabular-nums; }
-.sb-chip-line1 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:3px; }
+.sb-chip-multi { outline:2px solid #f59e0b; outline-offset:1px; }
 .sb-chip-urgent { width:6px; height:6px; border-radius:50%; background:#ef4444; flex-shrink:0; box-shadow:0 0 4px #ef4444; }
+.sb-chip-line1 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:3px; }
 .sb-chip-line2 { font-size:0.52rem; color:rgba(255,255,255,0.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.1; display:flex; align-items:center; gap:2px; }
 .sb-chip-line2 svg { width:9px; height:9px; flex-shrink:0; }
-
-/* Mini load bar under stacked chips */
 .sb-day-load { margin-top:auto; flex-shrink:0; padding:2px 2px 1px; display:flex; align-items:center; gap:3px; }
 .sb-day-load-track { flex:1; height:3px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; }
 .sb-day-load-fill { height:100%; border-radius:2px; transition:width 0.3s, background 0.3s; }
 .sb-day-load-label { font-size:0.5rem; font-weight:700; color:var(--sb-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
-
-/* Pin indicator on day-view block */
-.sb-block-pin { font-size:0.6rem; margin-right:2px; opacity:0.8; }
-
-/* Resource cell (frozen) */
-.sb-res-cell {
-  width:200px; min-width:200px; flex-shrink:0;
-  position:sticky; left:0; z-index:5; align-self:stretch;
-  background:var(--sb-sidebar); border-right:1px solid var(--sb-border);
-  display:flex; align-items:center; gap:0.5rem;
-  padding:0 0.65rem; cursor:pointer;
-  transition:background 0.12s;
-}
+.sb-res-cell { width:200px; min-width:200px; flex-shrink:0; position:sticky; left:0; z-index:5; align-self:stretch; background:var(--sb-sidebar); border-right:1px solid var(--sb-border); display:flex; align-items:center; gap:0.5rem; padding:0 0.65rem; cursor:pointer; transition:background 0.12s; }
 .sb-res-cell:hover { background:var(--sb-card-h); }
-.sb-avatar {
-  width:32px; height:32px; border-radius:50%; flex-shrink:0;
-  display:flex; align-items:center; justify-content:center;
-  font-size:0.68rem; font-weight:700; color:#fff;
-}
+.sb-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; color:#fff; }
 .sb-res-info { flex:1; min-width:0; }
 .sb-res-name { font-size:0.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:3px; }
 .sb-res-tag-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
-.sb-res-sub  { display:flex; align-items:center; gap:0.3rem; margin:0.1rem 0; }
-.sb-load     { font-size:0.58rem; color:var(--sb-muted); }
+.sb-res-sub { display:flex; align-items:center; gap:0.3rem; margin:0.1rem 0; }
+.sb-load { font-size:0.58rem; color:var(--sb-muted); }
 .sb-util-bar { height:3px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; margin-top:0.15rem; }
-.sb-util-fill{ height:100%; border-radius:2px; transition:width 0.3s, background 0.3s; }
+.sb-util-fill { height:100%; border-radius:2px; transition:width 0.3s, background 0.3s; }
 .sb-capacity-line { position:absolute; top:0; bottom:0; width:1px; border-left:1px dashed rgba(255,255,255,0.18); z-index:1; pointer-events:none; }
-
-/* Status badges */
 .sb-st { font-size:0.58rem; font-weight:700; padding:0.07rem 0.3rem; border-radius:4px; white-space:nowrap; }
 .st-available { background:rgba(16,185,129,0.15); color:var(--sb-green); }
-.st-enroute   { background:rgba(245,158,11,0.15); color:var(--sb-orange); }
-.st-busy      { background:rgba(99,102,241,0.15); color:#818cf8; }
-.st-off       { background:rgba(239,68,68,0.1);  color:var(--sb-red); }
-
-/* Priority */
+.st-enroute { background:rgba(245,158,11,0.15); color:var(--sb-orange); }
+.st-busy { background:rgba(99,102,241,0.15); color:#818cf8; }
+.st-off { background:rgba(239,68,68,0.1); color:var(--sb-red); }
 .prio-high { color:var(--sb-red); font-weight:700; }
-.prio-med  { color:var(--sb-orange); font-weight:700; }
-.prio-low  { color:var(--sb-green); }
-
-/* Timeline cell */
+.prio-med { color:var(--sb-orange); font-weight:700; }
+.prio-low { color:var(--sb-green); }
 .sb-timeline { position:relative; flex:1; overflow:hidden; }
 .sb-day-bg, .sb-month-bg { position:absolute; top:0; bottom:0; }
-.sb-bg-alt   { background:rgba(255,255,255,0.012); }
+.sb-bg-alt { background:rgba(255,255,255,0.012); }
 .sb-bg-today { background:rgba(99,102,241,0.06); }
 .sb-hour-guide { position:absolute; top:0; bottom:0; width:1px; background:var(--sb-border); opacity:0.6; pointer-events:none; }
 .sb-quarter-guide { position:absolute; top:0; bottom:0; width:1px; background:var(--sb-border); opacity:0.2; pointer-events:none; }
 .sb-drop-line { position:absolute; top:2px; bottom:2px; width:3px; background:#6366f1; border-radius:2px; box-shadow:0 0 10px #6366f1, 0 0 4px #6366f1; pointer-events:none; z-index:20; transform:translateX(-1px); }
-
-/* Booking blocks */
-.sb-block {
-  position:absolute; border-radius:6px; overflow:hidden;
-  display:flex; align-items:center;
-  cursor:grab; z-index:4;
-  box-shadow:0 2px 8px rgba(0,0,0,0.35);
-  transition:box-shadow 0.12s, transform 0.12s;
-  min-width:18px;
-}
+.sb-block { position:absolute; border-radius:6px; overflow:hidden; display:flex; align-items:center; cursor:grab; z-index:4; box-shadow:0 2px 8px rgba(0,0,0,0.35); transition:box-shadow 0.12s, transform 0.12s; min-width:18px; }
 .sb-block:hover { box-shadow:0 4px 16px rgba(0,0,0,0.5); transform:translateY(-1px); z-index:5; }
 .sb-block-done { opacity:0.55; }
 .sb-block.sb-block-sel { outline:2px solid #6366f1; outline-offset:1px; z-index:6 !important; }
 .sb-block.sb-block-multi { outline:2px solid #f59e0b; outline-offset:1px; z-index:6 !important; }
-.sb-chip-multi { outline:2px solid #f59e0b; outline-offset:1px; }
-
-/* Multi-select floating toolbar */
 .sb-multi-bar { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:200; background:#181c2e; color:#e2e4ef; border:1px solid rgba(99,102,241,0.3); border-radius:10px; padding:6px 14px; display:flex; align-items:center; gap:8px; box-shadow:0 8px 32px rgba(0,0,0,0.5); font-size:0.72rem; }
 .sb-multi-count { font-weight:700; color:#f59e0b; }
 .sb-multi-btn { background:none; border:1px solid rgba(255,255,255,0.1); border-radius:5px; color:#e2e4ef; font-size:0.65rem; padding:3px 8px; cursor:pointer; }
@@ -2395,292 +1229,140 @@ onUnmounted(() => {
 .sb-multi-tech:hover { filter:brightness(1.3); }
 .sb-slide-up-enter-active, .sb-slide-up-leave-active { transition:transform 0.2s, opacity 0.2s; }
 .sb-slide-up-enter-from, .sb-slide-up-leave-to { transform:translateX(-50%) translateY(20px); opacity:0; }
-
-/* Lasso selection rectangle */
 .sb-lasso { position:absolute; border:1.5px dashed #f59e0b; background:rgba(245,158,11,0.08); border-radius:3px; pointer-events:none; z-index:50; }
 .sb-board:has(.sb-lasso) { user-select:none; -webkit-user-select:none; cursor:crosshair; }
 .sb-block.sb-block-linked { outline:2px dashed #6366f1; outline-offset:1px; z-index:7 !important; opacity:1 !important; box-shadow:0 4px 16px rgba(99,102,241,0.3) !important; transform:translateY(-1px); }
 .sb-block-status-icon { display:inline-flex; align-items:center; margin-right:5px; flex-shrink:0; }
 .sb-block-status-icon svg { width:13px; height:13px; }
-
-/* Assistant badges on job blocks */
 .sb-block-assistants { display:flex; gap:2px; position:absolute; top:2px; right:2px; }
 .sb-assist-badge { width:16px; height:16px; border-radius:50%; font-size:0.45rem; font-weight:800; color:#fff; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(0,0,0,0.3); }
 .sb-assist-badge-lead { border-color:rgba(255,255,255,0.5); }
 .sb-block-team { outline:1.5px solid rgba(255,255,255,0.25); outline-offset:1px; }
 .sb-block-drop-hover { outline:2px solid #6366f1 !important; outline-offset:1px; filter:brightness(1.3); }
-
-/* Assistant block in timeline */
 .sb-block-assist { opacity:0.7; border:1.5px dashed rgba(255,255,255,0.25); cursor:pointer; z-index:3; background-image:repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 8px) !important; }
 .sb-block-assist .sb-block-meta { font-size:0.52rem; }
 .sb-block-assist:hover { opacity:0.9; }
 .sb-block-assist-pinned { opacity:0.85; border-style:solid; background-image:none !important; }
-
-/* Move handle (left edge) */
 .sb-move-handle { position:absolute; left:0; top:0; bottom:0; width:8px; cursor:grab; z-index:6; }
 .sb-move-handle:hover { background:rgba(255,255,255,0.15); border-radius:6px 0 0 6px; }
 .sb-move-handle::after { content:'⠿'; position:absolute; left:1px; top:50%; transform:translateY(-50%); font-size:0.5rem; color:rgba(255,255,255,0.4); }
 .sb-move-handle:active { cursor:grabbing; }
-
-/* Resize handle (right edge) */
 .sb-resize-handle { position:absolute; right:0; top:0; bottom:0; width:6px; cursor:ew-resize; z-index:6; }
 .sb-resize-handle:hover { background:rgba(255,255,255,0.15); border-radius:0 6px 6px 0; }
 .sb-resize-handle::after { content:''; position:absolute; right:2px; top:50%; transform:translateY(-50%); width:2px; height:12px; border-radius:1px; background:rgba(255,255,255,0.3); }
-
-/* Team badges in sidebar */
 .sbf-team-badges { display:flex; gap:2px; margin-top:2px; }
-
-/* Status icon colours (chip + block) */
 .sb-type-icon { display:inline-flex; align-items:center; margin-right:3px; flex-shrink:0; vertical-align:middle; }
 .sb-type-icon svg { width:11px; height:11px; }
-.si-open        { color:rgba(255,255,255,0.35); }
-.si-assigned    { color:#60a5fa; }
-.si-inprogress  { color:#f59e0b; }
-.si-done        { color:#10b981; }
-.si-cancelled   { color:#ef4444; }
 .sb-block-color-bar { width:3px; height:100%; flex-shrink:0; background:rgba(0,0,0,0.25); }
 .sb-block-inner { flex:1; min-width:0; padding:0 5px; }
 .sb-block-title { font-size:0.68rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
-.sb-block-meta  { font-size:0.58rem; color:rgba(255,255,255,0.7); white-space:nowrap; }
-.sb-block-addr  { font-size:0.52rem; color:rgba(255,255,255,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:2px; }
+.sb-block-meta { font-size:0.58rem; color:rgba(255,255,255,0.7); white-space:nowrap; }
+.sb-block-addr { font-size:0.52rem; color:rgba(255,255,255,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:2px; }
 .sb-block-addr svg { width:9px; height:9px; flex-shrink:0; }
 .sb-block-pin { display:inline-flex; align-items:center; margin-right:2px; }
 .sb-block-pin svg { width:10px; height:10px; }
-.sb-block-check { font-size:0.7rem; color:rgba(255,255,255,0.9); margin-right:4px; flex-shrink:0; }
-
-/* Travel trail (day view) */
-.sb-travel-trail {
-  position:absolute; border-radius:4px; z-index:2;
-  display:flex; align-items:center; justify-content:center;
-  pointer-events:none; transition:opacity 0.2s;
-}
-.sb-travel-route { border-left-style:solid; }   /* real Mapbox route — more opaque */
-.sb-travel-est   { border-left-style:dashed; opacity:0.7; }  /* estimated — dashed, lighter */
+.sb-travel-trail { position:absolute; border-radius:4px; z-index:2; display:flex; align-items:center; justify-content:center; pointer-events:none; transition:opacity 0.2s; }
+.sb-travel-route { border-left-style:solid; }
+.sb-travel-est { border-left-style:dashed; opacity:0.7; }
 .sb-travel-lbl { font-size:0.55rem; color:rgba(255,255,255,0.65); white-space:nowrap; font-style:italic; }
 
-/* Daily summary (week/month) */
-.sb-day-summary { padding:3px 4px; display:flex; flex-direction:column; gap:2px; cursor:pointer; }
-.sb-day-summary-bar { height:3px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; }
-.sb-day-summary-fill { height:100%; border-radius:2px; transition:width 0.3s; }
-.sb-day-summary-lbl { font-size:0.58rem; color:var(--sb-muted); white-space:nowrap; }
-.sb-day-job-count { color:var(--sb-muted); opacity:0.75; }
-
-/* ── Bottom panel (unassigned jobs table) ── */
-.sb-bottom-panel {
-  flex-shrink:0; border-top:1px solid var(--sb-border);
-  display:flex; flex-direction:column; background:var(--sb-sidebar);
-  position:relative; overflow:hidden;
-}
-.sb-bottom-resize {
-  position:absolute; top:0; left:0; right:0; height:4px; z-index:10;
-  cursor:row-resize; background:transparent;
-}
+/* ── Bottom panel ── */
+.sb-bottom-panel { flex-shrink:0; border-top:1px solid var(--sb-border); display:flex; flex-direction:column; background:var(--sb-sidebar); position:relative; overflow:hidden; }
+.sb-bottom-resize { position:absolute; top:0; left:0; right:0; height:4px; z-index:10; cursor:row-resize; background:transparent; }
 .sb-bottom-resize:hover { background:rgba(99,102,241,0.35); }
-.sb-bottom-hdr {
-  display:flex; align-items:center; gap:0.5rem;
-  padding:0.35rem 0.75rem; border-bottom:1px solid var(--sb-border);
-  flex-shrink:0;
-}
-.sb-bottom-title {
-  font-size:0.62rem; font-weight:800; text-transform:uppercase;
-  letter-spacing:0.07em; color:var(--sb-muted); display:flex; align-items:center; gap:0.35rem;
-}
+.sb-bottom-hdr { display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.75rem; border-bottom:1px solid var(--sb-border); flex-shrink:0; }
+.sb-bottom-title { font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--sb-muted); display:flex; align-items:center; gap:0.35rem; }
 .sb-bottom-close { background:none; border:none; color:var(--sb-muted); cursor:pointer; font-size:0.9rem; margin-left:auto; }
 .sb-bottom-close:hover { color:var(--sb-red); }
 .sb-bottom-body { flex:1; overflow-y:auto; overflow-x:auto; }
 .sb-bottom-body::-webkit-scrollbar { width:4px; height:4px; }
 .sb-bottom-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); }
-
-.sb-bottom-date-sep {
-  display:flex; align-items:center; gap:0.4rem;
-  padding:0.3rem 0.75rem; background:rgba(99,102,241,0.06);
-  border-bottom:1px solid var(--sb-border); position:sticky; top:0; z-index:2;
-}
+.sb-bottom-date-sep { display:flex; align-items:center; gap:0.4rem; padding:0.3rem 0.75rem; background:rgba(99,102,241,0.06); border-bottom:1px solid var(--sb-border); position:sticky; top:0; z-index:2; }
 .sb-bottom-date-label { font-size:0.62rem; font-weight:800; color:var(--sb-acc); text-transform:uppercase; letter-spacing:0.05em; }
 .sb-bottom-date-count { font-size:0.55rem; color:var(--sb-muted); }
-
 .sb-bottom-scroll { flex:1; overflow-y:auto; overflow-x:hidden; }
 .sb-bottom-scroll::-webkit-scrollbar { width:4px; }
 .sb-bottom-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); }
-
 .sb-bottom-table { width:100%; border-collapse:collapse; font-size:0.72rem; table-layout:fixed; }
-.sb-bottom-table thead th {
-  position:sticky; top:0; z-index:3;
-  background:var(--sb-sidebar); text-align:left;
-  font-size:0.55rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em;
-  color:var(--sb-muted); padding:0.3rem 0.5rem; border-bottom:1px solid var(--sb-border);
-  white-space:nowrap; position:relative; overflow:hidden;
-}
-.sb-col-resize {
-  position:absolute; right:0; top:0; bottom:0; width:5px;
-  cursor:col-resize; z-index:4;
-}
+.sb-bottom-table thead th { position:sticky; top:0; z-index:3; background:var(--sb-sidebar); text-align:left; font-size:0.55rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--sb-muted); padding:0.3rem 0.5rem; border-bottom:1px solid var(--sb-border); white-space:nowrap; overflow:hidden; }
+.sb-col-resize { position:absolute; right:0; top:0; bottom:0; width:5px; cursor:col-resize; z-index:4; }
 .sb-col-resize:hover { background:rgba(99,102,241,0.35); }
-
-.sb-bottom-row {
-  cursor:pointer; transition:background 0.1s; border-bottom:1px solid var(--sb-border);
-}
+.sb-bottom-row { cursor:pointer; transition:background 0.1s; border-bottom:1px solid var(--sb-border); }
 .sb-bottom-row:hover { background:var(--sb-card-h); }
 .sb-bottom-row-sel { background:rgba(99,102,241,0.1) !important; }
 .sb-bottom-row-sel:hover { background:rgba(99,102,241,0.15) !important; }
 .sb-bottom-row td { padding:0.3rem 0.5rem; white-space:nowrap; color:var(--sb-text); overflow:hidden; text-overflow:ellipsis; }
-
-/* Checkbox */
 .sb-bt-chk { padding:0 !important; text-align:center !important; }
-.sb-bt-checkbox {
-  display:inline-block; width:14px; height:14px; border-radius:3px;
-  border:1.5px solid var(--sb-muted); vertical-align:middle; position:relative;
-}
+.sb-bt-checkbox { display:inline-block; width:14px; height:14px; border-radius:3px; border:1.5px solid var(--sb-muted); vertical-align:middle; position:relative; }
 .sb-bt-checkbox.checked { background:var(--sb-acc); border-color:var(--sb-acc); }
 .sb-bt-checkbox.checked::after { content:'✓'; position:absolute; inset:0; color:#fff; font-size:0.55rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
-
-.sb-bt-prio { padding-right:0 !important; }
 .sb-bt-prio-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
 .sb-bt-name-text { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
 .sb-bt-addr { color:var(--sb-muted); font-size:0.65rem; overflow:hidden; text-overflow:ellipsis; }
-
-/* Duration with mini progress bar */
 .sb-bt-dur-wrap { display:flex; align-items:center; gap:6px; }
 .sb-bt-dur-bar { flex:1; height:4px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; min-width:30px; }
 .sb-bt-dur-fill { height:100%; border-radius:2px; transition:width 0.2s; }
 .sb-bt-dur-lbl { font-size:0.62rem; color:var(--sb-muted); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:28px; }
-
 .sb-bt-prio-tag { font-size:0.6rem; font-weight:700; padding:1px 6px; border-radius:4px; }
-.sb-bt-skill-chip {
-  display:inline-flex; align-items:center;
-  font-size:0.55rem; font-weight:600; color:var(--sb-text);
-  background:rgba(255,255,255,0.08); border:1px solid var(--sb-border);
-  padding:1px 6px; border-radius:10px; margin-right:3px; white-space:nowrap;
-}
+.sb-bt-skill-chip { display:inline-flex; align-items:center; font-size:0.55rem; font-weight:600; color:var(--sb-text); background:rgba(255,255,255,0.08); border:1px solid var(--sb-border); padding:1px 6px; border-radius:10px; margin-right:3px; white-space:nowrap; }
 .sb-bt-no-tag { font-size:0.6rem; color:rgba(255,255,255,0.2); }
-
-/* Bottom panel header extras */
 .sb-bottom-sel-count { font-size:0.65rem; font-weight:700; color:var(--sb-acc); }
 .sb-bottom-sel-lbl { font-size:0.72rem; color:var(--sb-muted); }
 .sb-bottom-sel-clear { background:none; border:none; color:var(--sb-muted); cursor:pointer; font-size:0.8rem; }
 .sb-bottom-sel-clear:hover { color:var(--sb-red); }
 .sb-bottom-sel-all { background:none; border:1px solid var(--sb-border); border-radius:4px; color:var(--sb-muted); font-size:0.58rem; padding:2px 6px; cursor:pointer; }
 .sb-bottom-sel-all:hover { color:var(--sb-text); border-color:var(--sb-border-acc); }
-
-/* Criteria modal */
-.sb-crit-row {
-  display:flex; align-items:center; gap:0.5rem;
-  padding:0.4rem 0.5rem; border-bottom:1px solid var(--sb-border);
-  background:var(--sb-card); border-radius:6px; margin-bottom:4px;
-}
+.sb-crit-row { display:flex; align-items:center; gap:0.5rem; padding:0.4rem 0.5rem; border-bottom:1px solid var(--sb-border); background:var(--sb-card); border-radius:6px; margin-bottom:4px; }
 .sb-crit-order { font-size:0.65rem; font-weight:800; color:var(--sb-acc); width:18px; text-align:center; flex-shrink:0; }
 .sb-crit-label { flex:1; font-size:0.72rem; color:var(--sb-text); display:flex; align-items:center; gap:0.4rem; cursor:pointer; }
 .sb-crit-label input[type="checkbox"] { accent-color:var(--sb-acc); }
 .sb-crit-arrows { display:flex; flex-direction:column; gap:1px; }
-.sb-crit-arrows button {
-  background:none; border:1px solid var(--sb-border); border-radius:3px;
-  color:var(--sb-muted); font-size:0.5rem; padding:0 4px; cursor:pointer; line-height:1.2;
-}
+.sb-crit-arrows button { background:none; border:1px solid var(--sb-border); border-radius:3px; color:var(--sb-muted); font-size:0.5rem; padding:0 4px; cursor:pointer; line-height:1.2; }
 .sb-crit-arrows button:hover:not(:disabled) { color:var(--sb-text); border-color:var(--sb-border-acc); }
 .sb-crit-arrows button:disabled { opacity:0.25; cursor:default; }
 
-/* ── Month calendar ── */
-.sb-month-wrap {
-  flex:1; overflow-y:auto; display:flex; flex-direction:column;
-  padding:0.5rem; gap:0.25rem;
-}
-.sb-month-dow-hdr {
-  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; flex-shrink:0;
-}
-.sb-month-dow {
-  text-align:center; font-size:0.6rem; font-weight:800; color:var(--sb-muted);
-  padding:0.25rem 0; text-transform:uppercase; letter-spacing:0.07em;
-}
+/* ── Month ── */
+.sb-month-wrap { flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:0.5rem; gap:0.25rem; }
+.sb-month-dow-hdr { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; flex-shrink:0; }
+.sb-month-dow { text-align:center; font-size:0.6rem; font-weight:800; color:var(--sb-muted); padding:0.25rem 0; text-transform:uppercase; letter-spacing:0.07em; }
 .sb-month-week { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
-.sb-month-day {
-  background:var(--sb-card); border:1px solid var(--sb-border); border-radius:6px;
-  padding:0.3rem 0.35rem; min-height:80px; cursor:pointer;
-  display:flex; flex-direction:column; gap:3px;
-  transition:background 0.1s;
-}
+.sb-month-day { background:var(--sb-card); border:1px solid var(--sb-border); border-radius:6px; padding:0.3rem 0.35rem; min-height:80px; cursor:pointer; display:flex; flex-direction:column; gap:3px; transition:background 0.1s; }
 .sb-month-day:hover { background:var(--sb-card-h); }
 .sb-month-day-out { opacity:0.28; pointer-events:none; }
 .sb-month-day-today { border-color:var(--sb-acc); }
-.sb-month-day-num {
-  font-size:0.7rem; font-weight:700; color:var(--sb-text);
-  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
-  border-radius:50%; flex-shrink:0;
-}
+.sb-month-day-num { font-size:0.7rem; font-weight:700; color:var(--sb-text); width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; }
 .sb-month-day-today .sb-month-day-num { background:var(--sb-acc); color:#fff; }
 .sb-month-avatars { display:flex; flex-wrap:wrap; gap:2px; }
-.sb-month-avatar {
-  width:18px; height:18px; border-radius:50%;
-  display:flex; align-items:center; justify-content:center;
-  font-size:0.48rem; font-weight:800; color:#fff; flex-shrink:0;
-  cursor:pointer; transition:transform 0.1s; box-shadow:0 1px 3px rgba(0,0,0,0.4);
-}
+.sb-month-avatar { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.48rem; font-weight:800; color:#fff; flex-shrink:0; cursor:pointer; transition:transform 0.1s; box-shadow:0 1px 3px rgba(0,0,0,0.4); }
 .sb-month-avatar:hover { transform:scale(1.3); z-index:2; position:relative; }
 .sb-month-job-count { font-size:0.52rem; color:var(--sb-muted); margin-top:auto; }
 
-/* ── Map panel ── */
-.sb-map-backdrop {
-  position:absolute; top:0; left:0; right:0; bottom:0; z-index:14;
-  background:rgba(0,0,0,0.15);
-}
-.sb-map-panel {
-  flex-shrink:0; z-index:15;
-  display:flex; flex-direction:column;
-  border-left:1px solid var(--sb-border); overflow:hidden;
-  position:relative;
-}
-.sb-map-resize-handle {
-  position:absolute; left:0; top:0; bottom:0; width:5px; z-index:10;
-  cursor:col-resize;
-  background:transparent;
-  transition:background 0.15s;
-}
+/* ── Map ── */
+.sb-map-backdrop { position:absolute; top:0; left:0; right:0; bottom:0; z-index:14; background:rgba(0,0,0,0.15); }
+.sb-map-panel { flex-shrink:0; z-index:15; display:flex; flex-direction:column; border-left:1px solid var(--sb-border); overflow:hidden; position:relative; }
+.sb-map-resize-handle { position:absolute; left:0; top:0; bottom:0; width:5px; z-index:10; cursor:col-resize; background:transparent; transition:background 0.15s; }
 .sb-map-resize-handle:hover { background:rgba(99,102,241,0.35); }
-.sb-map-bar {
-  display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.65rem;
-  background:var(--sb-sidebar); border-bottom:1px solid var(--sb-border); flex-shrink:0;
-}
+.sb-map-bar { display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.65rem; background:var(--sb-sidebar); border-bottom:1px solid var(--sb-border); flex-shrink:0; }
 .sb-map-title { font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--sb-muted); }
-.sb-map-tech  { font-size:0.7rem; font-weight:700; }
+.sb-map-tech { font-size:0.7rem; font-weight:700; }
 .sb-map-route-hint { font-size:0.58rem; font-weight:400; color:rgba(255,255,255,0.35); margin-left:0.25rem; }
-.sb-map-hint  { font-size:0.62rem; color:var(--sb-muted); font-style:italic; flex:1; }
-/* Geo-fix mode */
+.sb-map-hint { font-size:0.62rem; color:var(--sb-muted); font-style:italic; flex:1; }
 .sb-map-bar-geofix { background:rgba(99,102,241,0.18); border-bottom-color:var(--sb-border-acc); }
 .sb-geofix-hint { flex:1; font-size:0.68rem; color:var(--sb-text); animation:sb-geofix-pulse 1.4s ease-in-out infinite; }
 .sb-geofix-cancel { background:none; border:1px solid var(--sb-border-acc); border-radius:5px; color:var(--sb-muted); font-size:0.65rem; padding:0.18rem 0.45rem; cursor:pointer; }
 .sb-geofix-cancel:hover { color:var(--sb-red); border-color:rgba(239,68,68,0.4); }
 @keyframes sb-geofix-pulse { 0%,100%{ opacity:1 } 50%{ opacity:0.55 } }
 .sb-map-close { background:none; border:none; color:var(--sb-muted); cursor:pointer; font-size:0.9rem; margin-left:auto; }
-.sb-map-legend{ display:flex; flex-wrap:wrap; gap:0.3rem 0.6rem; padding:0.3rem 0.65rem; background:var(--sb-sidebar); border-bottom:1px solid var(--sb-border); flex-shrink:0; }
+.sb-map-legend { display:flex; flex-wrap:wrap; gap:0.3rem 0.6rem; padding:0.3rem 0.65rem; background:var(--sb-sidebar); border-bottom:1px solid var(--sb-border); flex-shrink:0; }
 .sb-legend-item { display:flex; align-items:center; gap:0.2rem; font-size:0.62rem; color:var(--sb-muted); }
-.sb-legend-dot  { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
+.sb-legend-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
 .sb-map { flex:1; min-height:0; }
-
-/* ── Map markers ── */
-:global(.sb-map-tech-pin) {
-  width: 36px; height: 36px; border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 0.65rem; font-weight: 800; color: #fff;
-  border: 2.5px solid;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.55);
-  cursor: pointer;
-  transition: transform 0.15s;
-}
-:global(.sb-map-tech-pin:hover) { transform: scale(1.2); }
-:global(.sb-map-drag-ghost) {
-  padding: 4px 8px; border-radius: 6px;
-  background: rgba(99,102,241,0.9); color: #fff;
-  font-size: 0.68rem; font-weight: 700;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
-  max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  user-select: none;
-}
+.sb-map-tech-pin { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:800; color:#fff; border:2.5px solid; box-shadow:0 2px 10px rgba(0,0,0,0.55); cursor:pointer; transition:transform 0.15s; }
+.sb-map-tech-pin:hover { transform:scale(1.2); }
+.sb-map-drag-ghost { padding:4px 8px; border-radius:6px; background:rgba(99,102,241,0.9); color:#fff; font-size:0.68rem; font-weight:700; box-shadow:0 4px 16px rgba(0,0,0,0.55); max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; user-select:none; }
 
 /* ── Right panel ── */
-.sb-right {
-  width:280px; min-width:280px; flex-shrink:0;
-  display:flex; flex-direction:column;
-  background:#111422; color:#e2e4ef; border-left:1px solid rgba(255,255,255,0.06); overflow:hidden;
-}
+.sb-right { width:280px; min-width:280px; flex-shrink:0; display:flex; flex-direction:column; background:#111422; color:#e2e4ef; border-left:1px solid rgba(255,255,255,0.06); overflow:hidden; }
 .sb-rp-hdr { display:flex; align-items:center; padding:0.55rem 0.75rem; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; }
 .sb-rp-title { font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#7b80a0; flex:1; }
 .sb-rp-close { background:none; border:none; color:#7b80a0; cursor:pointer; font-size:0.95rem; transition:color 0.12s; }
@@ -2692,29 +1374,18 @@ onUnmounted(() => {
 .sb-rp-urgent-tag { background:rgba(239,68,68,0.15); color:#ef4444; font-size:0.7rem; font-weight:700; padding:0.25rem 0.5rem; border-radius:6px; display:inline-block; margin-bottom:0.5rem; }
 .sb-rp-field { margin-bottom:0.45rem; color:#e2e4ef; }
 .sb-rp-lbl { display:block; font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#7b80a0; margin-bottom:0.1rem; }
-.sb-rp-avatar { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; color:#fff; margin:0 auto 0.75rem; }
-.sb-rp-util-bar { height:3px; background:rgba(255,255,255,0.07); border-radius:2px; overflow:hidden; margin-top:0.25rem; }
-.sb-rp-queue-item { display:flex; align-items:flex-start; gap:0.4rem; padding:0.3rem 0; border-top:1px solid rgba(255,255,255,0.06); }
-.sb-rp-q-num  { width:18px; height:18px; border-radius:50%; background:#181c2e; display:flex; align-items:center; justify-content:center; font-size:0.58rem; font-weight:700; flex-shrink:0; margin-top:1px; }
-.sb-rp-q-title{ font-size:0.72rem; font-weight:600; color:#e2e4ef; }
-.sb-rp-q-meta { font-size:0.62rem; color:#7b80a0; }
 .sb-rp-actions { padding:0.65rem 0.75rem; border-top:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; gap:0.35rem; flex-shrink:0; }
 .sb-rp-primary { background:#6366f1; border:none; border-radius:7px; color:#fff; font-size:0.72rem; font-weight:700; padding:0.4rem 0.75rem; cursor:pointer; }
 .sb-rp-primary:hover { filter:brightness(1.12); }
 .sb-rp-btn { background:none; border:1px solid rgba(255,255,255,0.06); border-radius:7px; color:#7b80a0; font-size:0.7rem; padding:0.35rem 0.75rem; cursor:pointer; transition:border-color 0.12s, color 0.12s; }
 .sb-rp-btn:hover { border-color:rgba(99,102,241,0.4); color:#e2e4ef; }
 .sb-assign-grid { display:flex; flex-direction:column; gap:0.3rem; }
-.sb-assign-btn  { display:flex; align-items:center; gap:0.4rem; background:none; border:1px solid rgba(255,255,255,0.06); border-radius:6px; color:#e2e4ef; font-size:0.7rem; padding:0.3rem 0.55rem; cursor:pointer; transition:background 0.12s; text-align:left; }
+.sb-assign-btn { display:flex; align-items:center; gap:0.4rem; background:none; border:1px solid rgba(255,255,255,0.06); border-radius:6px; color:#e2e4ef; font-size:0.7rem; padding:0.3rem 0.55rem; cursor:pointer; transition:background 0.12s; text-align:left; }
 .sb-assign-btn:hover { background:#181c2e; }
-.sb-assign-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+.sb-assign-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
 
 /* ── Context menu ── */
-.sb-ctx {
-  position:fixed; z-index:200;
-  background:#181c2e; color:#e2e4ef; border:1px solid rgba(99,102,241,0.4); border-radius:9px;
-  padding:0.3rem; box-shadow:0 8px 28px rgba(0,0,0,0.55);
-  min-width:180px;
-}
+.sb-ctx { position:fixed; z-index:200; background:#181c2e; color:#e2e4ef; border:1px solid rgba(99,102,241,0.4); border-radius:9px; padding:0.3rem; box-shadow:0 8px 28px rgba(0,0,0,0.55); min-width:180px; }
 .sb-ctx-item { display:block; width:100%; background:none; border:none; border-radius:6px; color:#e2e4ef; font-size:0.75rem; padding:0.4rem 0.7rem; cursor:pointer; text-align:left; transition:background 0.1s; }
 .sb-ctx-item:hover { background:#1e2338; }
 .sb-ctx-sep { height:1px; background:rgba(255,255,255,0.06); margin:0.2rem 0; }
@@ -2726,30 +1397,38 @@ onUnmounted(() => {
 .sb-modal-wide { min-width:580px; max-width:680px; }
 .sb-modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; border-bottom:1px solid rgba(255,255,255,0.06); font-weight:700; font-size:0.85rem; color:#e2e4ef; }
 .sb-modal-body { padding:0.75rem 1rem; color:#e2e4ef; }
-.sb-modal-ftr  { padding:0.65rem 1rem; border-top:1px solid rgba(255,255,255,0.06); display:flex; gap:0.5rem; }
-.sb-form-row   { margin-bottom:0.6rem; }
-.sb-form-lbl   { display:block; font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#7b80a0; margin-bottom:0.2rem; }
-.sb-form-val   { font-size:0.78rem; font-weight:600; color:#e2e4ef; }
-.sb-form-sel   { width:100%; background:#181c2e; border:1px solid rgba(255,255,255,0.06); border-radius:6px; color:#e2e4ef; font-size:0.75rem; padding:0.3rem 0.5rem; cursor:pointer; }
+.sb-modal-ftr { padding:0.65rem 1rem; border-top:1px solid rgba(255,255,255,0.06); display:flex; gap:0.5rem; }
+.sb-modal-footer { padding:0.65rem 1rem; border-top:1px solid rgba(255,255,255,0.06); display:flex; gap:0.5rem; }
+.sb-form-row { margin-bottom:0.6rem; }
+.sb-form-lbl { display:block; font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#7b80a0; margin-bottom:0.2rem; }
+.sb-form-val { font-size:0.78rem; font-weight:600; color:#e2e4ef; }
+.sb-form-sel { width:100%; background:#181c2e; border:1px solid rgba(255,255,255,0.06); border-radius:6px; color:#e2e4ef; font-size:0.75rem; padding:0.3rem 0.5rem; cursor:pointer; }
 .sb-form-input { width:100%; background:#181c2e; border:1px solid rgba(255,255,255,0.06); border-radius:6px; color:#e2e4ef; font-size:0.75rem; padding:0.3rem 0.5rem; box-sizing:border-box; }
 .sb-form-sel:focus, .sb-form-input:focus { border-color:rgba(99,102,241,0.4); outline:none; }
-
-/* Resource selector */
-.sb-res-sel-wrap  { display:flex; gap:1rem; align-items:flex-start; }
-.sb-res-sel-col   { flex:1; background:#181c2e; border:1px solid rgba(255,255,255,0.06); border-radius:8px; overflow:hidden; max-height:300px; overflow-y:auto; }
+.sb-addr-wrap { position:relative; }
+.sb-addr-dropdown { position:absolute; top:100%; left:0; right:0; z-index:50; background:#181c2e; border:1px solid rgba(99,102,241,0.3); border-radius:6px; max-height:200px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
+.sb-addr-item { padding:6px 10px; cursor:pointer; font-size:0.72rem; color:#e2e4ef; border-bottom:1px solid rgba(255,255,255,0.04); }
+.sb-addr-item:hover { background:rgba(99,102,241,0.12); }
+.sb-addr-item strong { color:#fff; }
+.sb-addr-city { float:right; font-size:0.6rem; color:#7b80a0; }
+.sb-addr-confirmed { font-size:0.6rem; color:#10b981; margin-top:3px; }
+.sb-addr-cp { font-size:0.6rem; color:#6366f1; margin-left:4px; }
+.sb-modal-wo { min-width:500px; max-width:720px; }
+.sb-wo-body { display:flex; gap:1rem; }
+.sb-wo-form { flex:1; min-width:0; }
+.sb-wo-minimap { width:280px; flex-shrink:0; display:flex; align-items:flex-start; }
+.sb-minimap-img { width:100%; border-radius:8px; border:1px solid rgba(255,255,255,0.06); }
+.sb-res-sel-wrap { display:flex; gap:1rem; align-items:flex-start; }
+.sb-res-sel-col { flex:1; background:#181c2e; border:1px solid rgba(255,255,255,0.06); border-radius:8px; overflow:hidden; max-height:300px; overflow-y:auto; }
 .sb-res-sel-col::-webkit-scrollbar { width:3px; }
 .sb-res-sel-col::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); }
-.sb-res-sel-hdr   { padding:0.4rem 0.6rem; background:#111422; font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#7b80a0; border-bottom:1px solid rgba(255,255,255,0.06); }
-.sb-res-sel-item  { display:flex; align-items:center; gap:0.45rem; padding:0.4rem 0.6rem; cursor:pointer; font-size:0.72rem; color:#e2e4ef; transition:background 0.1s; border-bottom:1px solid rgba(255,255,255,0.06); }
+.sb-res-sel-hdr { padding:0.4rem 0.6rem; background:#111422; font-size:0.6rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#7b80a0; border-bottom:1px solid rgba(255,255,255,0.06); }
+.sb-res-sel-item { display:flex; align-items:center; gap:0.45rem; padding:0.4rem 0.6rem; cursor:pointer; font-size:0.72rem; color:#e2e4ef; transition:background 0.1s; border-bottom:1px solid rgba(255,255,255,0.06); }
 .sb-res-sel-item:hover { background:#1e2338; }
 .sb-res-sel-active { color:#6366f1; }
-.sb-res-sel-rm    { margin-left:auto; color:#7b80a0; font-size:0.8rem; }
+.sb-res-sel-rm { margin-left:auto; color:#7b80a0; font-size:0.8rem; }
 .sb-res-sel-arrow { font-size:1.2rem; color:#7b80a0; align-self:center; flex-shrink:0; }
-.sb-avatar-xs {
-  width:22px; height:22px; border-radius:50%; flex-shrink:0;
-  display:flex; align-items:center; justify-content:center;
-  font-size:0.55rem; font-weight:700; color:#fff;
-}
+.sb-avatar-xs { width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.55rem; font-weight:700; color:#fff; }
 
 /* ── Transitions ── */
 .sb-slide-left-enter-active, .sb-slide-left-leave-active { transition:width 0.18s, min-width 0.18s, opacity 0.18s; }