diff --git a/src/index.js b/src/index.js
index 005c13d..f2c90d2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+import logger from './utils/logger';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
@@ -38,6 +39,8 @@ if (process.env.NODE_ENV !== 'development') {
   console.warn = () => {}; // Optionally disable console.warn
 }
 
+logger.info('NearlExpress console application starting...');
+
 // const root = ReactDOM.createRoot(document.getElementById('root'));
 
 // ==============================|| MAIN - REACT DOM RENDER  ||============================== //
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
index 1a559a2..23040ce 100644
--- a/src/layout/MainLayout/index.js
+++ b/src/layout/MainLayout/index.js
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import { Outlet } from 'react-router-dom';
 
 // material-ui
@@ -22,6 +23,7 @@ const MainLayout = () => {
   const matchDownXL = useMediaQuery(theme.breakpoints.down('xl'));
   const downLG = useMediaQuery(theme.breakpoints.down('lg'));
 
+  const { drawerOpen } = useSelector((state) => state.menu);
   const { container, miniDrawer, menuOrientation } = useConfig();
 
   const isHorizontal = menuOrientation === MenuOrientation.HORIZONTAL && !downLG;
@@ -39,7 +41,14 @@ const MainLayout = () => {
     <Box sx={{ display: 'flex', width: '100%' }}>
       <Header />
       {!isHorizontal ? <Drawer /> : <HorizontalBar />}
-      <Box component="main" sx={{ width: 'calc(100% - 260px)', flexGrow: 1, p: { xs: 2, sm: 3 } }}>
+      <Box
+        component="main"
+        sx={{
+          width: isHorizontal ? '100%' : drawerOpen ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' },
+          flexGrow: 1,
+          p: { xs: 2, sm: 3 }
+        }}
+      >
         <Toolbar sx={{ mt: isHorizontal ? 8 : 'inherit' }} />
         <Container
           // maxWidth={container ? 'xl' : false}
diff --git a/src/pages/nearle/deliveries/deliveries.js b/src/pages/nearle/deliveries/deliveries.js
index 0c3f3cb..65409b2 100644
--- a/src/pages/nearle/deliveries/deliveries.js
+++ b/src/pages/nearle/deliveries/deliveries.js
@@ -1,3 +1,4 @@
+import logger from '../../../utils/logger';
 import { enqueueSnackbar } from 'notistack';
 import { DeleteFilled, EditOutlined } from '@ant-design/icons';
 import { useState, useEffect, Fragment, useRef } from 'react';
@@ -258,18 +259,19 @@ const Deliveries = () => {
   // =========================================== ||  changerider || ===========================================
   const changeRiderMutation = useMutation({
     mutationFn: ({ selectedRider, selectedRow }) => changeRiderAPI(selectedRider, selectedRow),
-    onSuccess: (res) => {
+    onSuccess: (res, { selectedRider, selectedRow }) => {
       setLoading1(false);
       setChangeDialogOpen(false);
       if (res.data.message === 'Success') {
+        logger.info(`Rider changed successfully for order ID ${selectedRow?.orderid}. New Rider: ${selectedRider?.firstname} ${selectedRider?.lastname}`);
         opentoast('Rider Changed Successfully', 'success');
       }
       fetchCountRefetch(); // Refresh count data
       fetchDeliveriesRefetch(); // Refresh deliveries
       notifyRiderMutation.mutate(selectedRider.userfcmtoken);
     },
-    onError: (err) => {
-      console.log(err);
+    onError: (err, { selectedRider, selectedRow }) => {
+      logger.error(`Failed to change rider for order ID ${selectedRow?.orderid}:`, err);
       opentoast(err.message, 'error');
       setLoading1(false);
     }
@@ -1236,7 +1238,7 @@ const Deliveries = () => {
                                   Notify Rider
                                 </MenuItem>
                               )}
-                              {['pending', 'accepted', 'arrived'].includes(selectedRow?.orderstatus) && (
+                              {/* {['pending', 'accepted', 'arrived'].includes(selectedRow?.orderstatus) && (
                                 <MenuItem
                                   onClick={() => {
                                     if (!appId) {
@@ -1250,7 +1252,7 @@ const Deliveries = () => {
                                 >
                                   Change Rider
                                 </MenuItem>
-                              )}
+                              )} */}
                               {(roleid == 1 || roleid == 2) && (
                                 <MenuItem
                                   onClick={() => {
@@ -1487,7 +1489,7 @@ const Deliveries = () => {
                 renderInput={(params) => <TextField {...params} label="Choose Rider" />}
                 onChange={(e, value) => {
                   setSelectedRider(value);
-                  console.log('selected rider', value);
+                  logger.debug('Rider selected in dropdown:', value ? `${value.firstname} ${value.lastname}` : 'None');
                 }}
               />
             </Grid>
@@ -1509,6 +1511,7 @@ const Deliveries = () => {
               color="primary"
               onClick={() => {
                 setLoading1(true);
+                logger.info(`Initiating rider assignment change for order ID ${selectedRow?.orderid} to rider: ${selectedRider?.firstname} ${selectedRider?.lastname}`);
                 changeRiderMutation.mutate({ selectedRider, selectedRow });
               }}
             >
diff --git a/src/pages/nearle/dispatch/Dispatch.css b/src/pages/nearle/dispatch/Dispatch.css
index e114bc5..29479bc 100644
--- a/src/pages/nearle/dispatch/Dispatch.css
+++ b/src/pages/nearle/dispatch/Dispatch.css
@@ -166,8 +166,15 @@
 }
 
 @keyframes logo-city-menu-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .dispatch-container .logo-city-menu::-webkit-scrollbar {
@@ -264,7 +271,7 @@
 
 /* Tabs */
 .dispatch-container #strat-row {
-  height: 48px;
+  height: 54px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -277,7 +284,7 @@
 .dispatch-container .sbt {
   padding: 8px 14px;
   border-radius: 10px;
-  border: 1px solid var(--border);
+  border: 1px solid rgba(15, 23, 42, 0.08);
   background: var(--bg);
   color: var(--text-muted);
   font-size: 13px;
@@ -430,8 +437,13 @@
   border: 1px solid var(--border);
 }
 
-.dispatch-container .live-status-ready { color: var(--success); }
-.dispatch-container .live-status-error { color: #ef4444; }
+.dispatch-container .live-status-ready {
+  color: var(--success);
+}
+
+.dispatch-container .live-status-error {
+  color: #ef4444;
+}
 
 .dispatch-container .live-status-sub {
   color: var(--text-muted);
@@ -448,12 +460,28 @@
   animation: live-pulse 1.2s ease-in-out infinite;
 }
 
-.dispatch-container .live-dot.ready { background: var(--success); animation: none; }
-.dispatch-container .live-dot.error { background: #ef4444; animation: none; }
+.dispatch-container .live-dot.ready {
+  background: var(--success);
+  animation: none;
+}
+
+.dispatch-container .live-dot.error {
+  background: #ef4444;
+  animation: none;
+}
 
 @keyframes live-pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50%      { opacity: 0.4; transform: scale(0.85); }
+
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
 }
 
 /* ── Date picker chip ─────────────────────────────────────────────
@@ -468,7 +496,8 @@
    indigo border + halo on hover/focus, subtle lift on interaction.
    ──────────────────────────────────────────────────────────────── */
 .dispatch-container .date-chip {
-  position: relative; /* anchors .date-cal-popover */
+  position: relative;
+  /* anchors .date-cal-popover */
   display: inline-flex;
   align-items: stretch;
   gap: 0;
@@ -476,28 +505,28 @@
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 12px;
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
-              0 4px 12px rgba(15, 23, 42, 0.06);
+    0 4px 12px rgba(15, 23, 42, 0.06);
   transition: border-color 0.18s ease, box-shadow 0.18s ease,
-              transform 0.18s ease;
+    transform 0.18s ease;
 }
 
 .dispatch-container .date-chip.is-open {
   border-color: #6366f1;
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2),
-              0 12px 30px rgba(99, 102, 241, 0.22);
+    0 12px 30px rgba(99, 102, 241, 0.22);
 }
 
 .dispatch-container .date-chip:hover {
   border-color: rgba(99, 102, 241, 0.45);
   box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06),
-              0 8px 22px rgba(99, 102, 241, 0.15);
+    0 8px 22px rgba(99, 102, 241, 0.15);
   transform: translateY(-1px);
 }
 
 .dispatch-container .date-chip:focus-within {
   border-color: #6366f1;
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2),
-              0 8px 22px rgba(99, 102, 241, 0.22);
+    0 8px 22px rgba(99, 102, 241, 0.22);
 }
 
 /* Center card — visible chrome the operator reads. Renders as a <button>
@@ -618,7 +647,7 @@
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 16px;
   box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18),
-              0 4px 12px rgba(15, 23, 42, 0.06);
+    0 4px 12px rgba(15, 23, 42, 0.06);
   animation: date-cal-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -635,17 +664,26 @@
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
 }
+
 .dispatch-container .date-cal-popover::before {
   border-bottom: 8px solid rgba(15, 23, 42, 0.08);
 }
+
 .dispatch-container .date-cal-popover::after {
   border-bottom: 8px solid #ffffff;
   margin-bottom: -1px;
 }
 
 @keyframes date-cal-in {
-  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 /* Month header ─────────────────────────────────────────────────── */
@@ -728,7 +766,7 @@
   font-weight: 600;
   cursor: pointer;
   transition: background 0.12s ease, color 0.12s ease,
-              box-shadow 0.18s ease, transform 0.12s ease;
+    box-shadow 0.18s ease, transform 0.12s ease;
 }
 
 .dispatch-container .date-cal-day:hover:not(:disabled):not(.is-selected) {
@@ -803,7 +841,7 @@
   letter-spacing: 0.02em;
   cursor: pointer;
   transition: background 0.15s ease, border-color 0.15s ease,
-              color 0.15s ease, transform 0.12s ease;
+    color 0.15s ease, transform 0.12s ease;
 }
 
 .dispatch-container .date-cal-preset:hover {
@@ -1365,9 +1403,20 @@
 }
 
 @keyframes cmark-pulse {
-  0%   { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4); transform: scale(1); }
-  70%  { box-shadow: 0 0 0 14px rgba(59, 130, 246, 0),   0 4px 12px rgba(0, 0, 0, 0.4); transform: scale(1.18); }
-  100% { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0),   0 4px 12px rgba(0, 0, 0, 0.4); transform: scale(1); }
+  0% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
+    transform: scale(1);
+  }
+
+  70% {
+    box-shadow: 0 0 0 14px rgba(59, 130, 246, 0), 0 4px 12px rgba(0, 0, 0, 0.4);
+    transform: scale(1.18);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 4px 12px rgba(0, 0, 0, 0.4);
+    transform: scale(1);
+  }
 }
 
 /* Leaflet sets overflow:hidden on its panes; the flag pokes up past the marker bounds,
@@ -1440,8 +1489,15 @@
 }
 
 @keyframes rider-pulse {
-  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.25); }
-  50%      { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.15); }
+
+  0%,
+  100% {
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.25);
+  }
+
+  50% {
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 8px rgba(255, 255, 255, 0.15);
+  }
 }
 
 /* Live rider pin (from /partners/getriderlogs/) — colored teardrop with a
@@ -1504,7 +1560,8 @@
   display: flex;
   min-height: 0;
   overflow: hidden;
-  position: relative; /* anchor for the compare-divider-badge */
+  position: relative;
+  /* anchor for the compare-divider-badge */
 }
 
 /* Sidebar */
@@ -1517,8 +1574,8 @@
   border-right: 1px solid var(--border);
   z-index: 5;
   transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
-              flex-basis 0.32s cubic-bezier(0.4, 0, 0.2, 1),
-              border-right-color 0.2s ease;
+    flex-basis 0.32s cubic-bezier(0.4, 0, 0.2, 1),
+    border-right-color 0.2s ease;
   overflow: hidden;
 }
 
@@ -1553,13 +1610,13 @@
   line-height: 1;
   cursor: pointer;
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12),
-              0 1px 3px rgba(15, 23, 42, 0.06);
+    0 1px 3px rgba(15, 23, 42, 0.06);
   z-index: 1200;
   transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1),
-              background 0.18s ease,
-              color 0.18s ease,
-              transform 0.18s ease,
-              box-shadow 0.18s ease;
+    background 0.18s ease,
+    color 0.18s ease,
+    transform 0.18s ease,
+    box-shadow 0.18s ease;
 }
 
 .dispatch-container .sidebar-toggle-tab:hover {
@@ -1610,7 +1667,7 @@
   pointer-events: none;
 }
 
-.dispatch-container .sb-header > * {
+.dispatch-container .sb-header>* {
   position: relative;
 }
 
@@ -2042,27 +2099,47 @@
   background: linear-gradient(135deg, rgba(59, 130, 246, 0.09), rgba(99, 102, 241, 0.04));
   border-color: rgba(59, 130, 246, 0.22);
 }
-.dispatch-container .rd-stat-orders .rd-stat-value { color: #2563eb; }
+
+.dispatch-container .rd-stat-orders .rd-stat-value {
+  color: #2563eb;
+}
 
 .dispatch-container .rd-stat-distance {
   background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(249, 115, 22, 0.04));
   border-color: rgba(245, 158, 11, 0.25);
 }
-.dispatch-container .rd-stat-distance .rd-stat-value { color: #d97706; }
+
+.dispatch-container .rd-stat-distance .rd-stat-value {
+  color: #d97706;
+}
 
 .dispatch-container .rd-stat-profit.is-gain {
   background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(20, 184, 166, 0.04));
   border-color: rgba(34, 197, 94, 0.35);
 }
-.dispatch-container .rd-stat-profit.is-gain .rd-stat-value { color: #16a34a; }
-.dispatch-container .rd-stat-profit.is-gain .rd-stat-label { color: #16a34a; opacity: 0.75; }
+
+.dispatch-container .rd-stat-profit.is-gain .rd-stat-value {
+  color: #16a34a;
+}
+
+.dispatch-container .rd-stat-profit.is-gain .rd-stat-label {
+  color: #16a34a;
+  opacity: 0.75;
+}
 
 .dispatch-container .rd-stat-profit.is-loss {
   background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(244, 63, 94, 0.04));
   border-color: rgba(239, 68, 68, 0.35);
 }
-.dispatch-container .rd-stat-profit.is-loss .rd-stat-value { color: #dc2626; }
-.dispatch-container .rd-stat-profit.is-loss .rd-stat-label { color: #dc2626; opacity: 0.75; }
+
+.dispatch-container .rd-stat-profit.is-loss .rd-stat-value {
+  color: #dc2626;
+}
+
+.dispatch-container .rd-stat-profit.is-loss .rd-stat-label {
+  color: #dc2626;
+  opacity: 0.75;
+}
 
 .dispatch-container .trip-block {
   margin-bottom: 24px;
@@ -2247,9 +2324,21 @@
   letter-spacing: 0.04em;
 }
 
-.dispatch-container .step-type.type-economy   { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
-.dispatch-container .step-type.type-risky     { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
-.dispatch-container .step-type.type-express   { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
+.dispatch-container .step-type.type-economy {
+  background: rgba(34, 197, 94, 0.15);
+  color: #16a34a;
+}
+
+.dispatch-container .step-type.type-risky {
+  background: rgba(239, 68, 68, 0.15);
+  color: #dc2626;
+}
+
+.dispatch-container .step-type.type-express {
+  background: rgba(59, 130, 246, 0.15);
+  color: #2563eb;
+}
+
 .dispatch-container .step-type:not(.type-economy):not(.type-risky):not(.type-express) {
   background: rgba(100, 116, 139, 0.15);
   color: #475569;
@@ -2408,6 +2497,7 @@
   background: rgba(34, 197, 94, 0.08);
   border-color: rgba(34, 197, 94, 0.25);
 }
+
 .dispatch-container .zone-stat-pill.profit-positive .zone-stat-value {
   color: var(--success);
 }
@@ -2416,6 +2506,7 @@
   background: rgba(239, 68, 68, 0.08);
   border-color: rgba(239, 68, 68, 0.25);
 }
+
 .dispatch-container .zone-stat-pill.profit-negative .zone-stat-value {
   color: #ef4444;
 }
@@ -2640,8 +2731,15 @@
 }
 
 @keyframes zone-suburb-panel-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .dispatch-container .zone-suburb-panel-head {
@@ -3077,13 +3175,27 @@
 }
 
 @keyframes compare-actual-pulse {
-  0%, 100% { box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15); }
-  50%      { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.05); }
+
+  0%,
+  100% {
+    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15);
+  }
+
+  50% {
+    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.05);
+  }
 }
 
 @keyframes compare-label-in {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Right half of Compare mode */
@@ -3101,8 +3213,15 @@
 }
 
 @keyframes compare-slide-in {
-  from { opacity: 0; transform: translateX(18px); }
-  to   { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(18px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 
@@ -3340,7 +3459,9 @@
 }
 
 @keyframes compare-spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* Summary stats card at the bottom of the Compare pane */
@@ -3461,16 +3582,26 @@
   border-color: rgba(34, 197, 94, 0.16);
 }
 
-.dispatch-container .compare-overall-stat.is-profit .compare-overall-stat-value { color: #16a34a; }
-.dispatch-container .compare-overall-stat.is-profit .compare-overall-stat-icon  { color: #22c55e; }
+.dispatch-container .compare-overall-stat.is-profit .compare-overall-stat-value {
+  color: #16a34a;
+}
+
+.dispatch-container .compare-overall-stat.is-profit .compare-overall-stat-icon {
+  color: #22c55e;
+}
 
 .dispatch-container .compare-overall-stat.is-loss {
   background: rgba(239, 68, 68, 0.06);
   border-color: rgba(239, 68, 68, 0.16);
 }
 
-.dispatch-container .compare-overall-stat.is-loss .compare-overall-stat-value { color: #dc2626; }
-.dispatch-container .compare-overall-stat.is-loss .compare-overall-stat-icon  { color: #ef4444; }
+.dispatch-container .compare-overall-stat.is-loss .compare-overall-stat-value {
+  color: #dc2626;
+}
+
+.dispatch-container .compare-overall-stat.is-loss .compare-overall-stat-icon {
+  color: #ef4444;
+}
 
 /* ── Compare UI v2 ──────────────────────────────────────────────
    Redesigned compare pane: rich header (title + sync toggle + step
@@ -3592,15 +3723,18 @@
   cursor: pointer;
   transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
 }
+
 .dispatch-container .compare-timeline-toggle:hover {
   border-color: rgba(99, 102, 241, 0.4);
   color: #4338ca;
   background: rgba(99, 102, 241, 0.06);
 }
+
 .dispatch-container .compare-timeline-toggle svg {
   font-size: 18px;
   transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 .dispatch-container .compare-timeline-toggle.is-open svg {
   transform: rotate(180deg);
   color: #4338ca;
@@ -3643,7 +3777,8 @@
   color: #64748b;
   display: flex;
   align-items: center;
-  height: 32px; /* aligns with circle height */
+  height: 32px;
+  /* aligns with circle height */
 }
 
 .dispatch-container .compare-timeline-scrollable {
@@ -3687,7 +3822,8 @@
 
 /* Actual track overrides for the spacer alignment */
 .dispatch-container .compare-timeline-track.is-actual .compare-step-spacer {
-  margin-bottom: 22px; /* Centers spacer dynamically relative to the 32px circle */
+  margin-bottom: 22px;
+  /* Centers spacer dynamically relative to the 32px circle */
 }
 
 .dispatch-container .compare-step-spacer {
@@ -3775,11 +3911,9 @@
 }
 
 .dispatch-container .compare-step.is-no-data .compare-step-circle {
-  background: repeating-linear-gradient(
-    45deg,
-    #e2e8f0 0 4px,
-    #f1f5f9 4px 8px
-  );
+  background: repeating-linear-gradient(45deg,
+      #e2e8f0 0 4px,
+      #f1f5f9 4px 8px);
   color: #94a3b8;
 }
 
@@ -3793,7 +3927,9 @@
 }
 
 @keyframes compare-step-spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .dispatch-container .compare-step-tick {
@@ -3855,11 +3991,9 @@
 }
 
 .dispatch-container .compare-legend-swatch.is-planned {
-  background: repeating-linear-gradient(
-    90deg,
-    #6366f1 0 5px,
-    transparent 5px 9px
-  );
+  background: repeating-linear-gradient(90deg,
+      #6366f1 0 5px,
+      transparent 5px 9px);
   height: 3px;
 }
 
@@ -3881,16 +4015,12 @@
    gap so the eye reads "dashed line" without losing the step-color
    gradient underneath. */
 .dispatch-container .compare-legend-swatch.is-step-color.is-dashed {
-  -webkit-mask-image: repeating-linear-gradient(
-    90deg,
-    #000 0 5px,
-    transparent 5px 9px
-  );
-  mask-image: repeating-linear-gradient(
-    90deg,
-    #000 0 5px,
-    transparent 5px 9px
-  );
+  -webkit-mask-image: repeating-linear-gradient(90deg,
+      #000 0 5px,
+      transparent 5px 9px);
+  mask-image: repeating-linear-gradient(90deg,
+      #000 0 5px,
+      transparent 5px 9px);
 }
 
 /* Small status note in the legend strip — replaces the now-removed
@@ -3909,11 +4039,9 @@
 }
 
 .dispatch-container .compare-legend-swatch.is-transit {
-  background: repeating-linear-gradient(
-    90deg,
-    #94a3b8 0 3px,
-    transparent 3px 6px
-  );
+  background: repeating-linear-gradient(90deg,
+      #94a3b8 0 3px,
+      transparent 3px 6px);
   height: 2px;
 }
 
@@ -3936,8 +4064,15 @@
 }
 
 @keyframes compare-delta-in {
-  from { opacity: 0; transform: translateY(6px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .dispatch-container .compare-delta-title {
@@ -4047,8 +4182,13 @@
   line-height: 1.15;
 }
 
-.dispatch-container .compare-delta-cell-val.is-over { color: #dc2626; }
-.dispatch-container .compare-delta-cell-val.is-under { color: #16a34a; }
+.dispatch-container .compare-delta-cell-val.is-over {
+  color: #dc2626;
+}
+
+.dispatch-container .compare-delta-cell-val.is-under {
+  color: #16a34a;
+}
 
 .dispatch-container .compare-delta-cell-unit {
   font-size: 13px;
@@ -4088,7 +4228,7 @@
     0 0 0 1px rgba(255, 255, 255, 0.18);
   cursor: pointer;
   transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-              box-shadow 0.2s ease;
+    box-shadow 0.2s ease;
 }
 
 .dispatch-container .compare-step-pin:hover {
@@ -4136,13 +4276,16 @@
 }
 
 @keyframes compare-pin-pulse {
-  0%, 100% {
+
+  0%,
+  100% {
     box-shadow:
       0 8px 22px rgba(15, 23, 42, 0.38),
       0 0 0 3px #ffffff,
       0 0 0 5px var(--pin-color, #6366f1),
       0 0 18px 6px color-mix(in srgb, var(--pin-color, #6366f1) 35%, transparent);
   }
+
   50% {
     box-shadow:
       0 10px 28px rgba(15, 23, 42, 0.5),
@@ -4153,8 +4296,15 @@
 }
 
 @keyframes compare-pin-halo {
-  0%   { inset: -2px; opacity: 0.7; }
-  100% { inset: -16px; opacity: 0; }
+  0% {
+    inset: -2px;
+    opacity: 0.7;
+  }
+
+  100% {
+    inset: -16px;
+    opacity: 0;
+  }
 }
 
 /* Anomaly ring — replaces the colored outer ring with a red one when the
@@ -4177,13 +4327,16 @@
 }
 
 @keyframes compare-pin-pulse-anomaly {
-  0%, 100% {
+
+  0%,
+  100% {
     box-shadow:
       0 8px 22px rgba(220, 38, 38, 0.5),
       0 0 0 3px #ffffff,
       0 0 0 5px #dc2626,
       0 0 22px 8px rgba(220, 38, 38, 0.45);
   }
+
   50% {
     box-shadow:
       0 10px 28px rgba(220, 38, 38, 0.65),
@@ -4231,7 +4384,7 @@
   align-items: center;
   justify-content: center;
   box-shadow: 0 5px 14px rgba(15, 23, 42, 0.32),
-              0 0 0 1px rgba(255, 255, 255, 0.6);
+    0 0 0 1px rgba(255, 255, 255, 0.6);
   transition: transform 0.18s ease, box-shadow 0.18s ease;
   cursor: pointer;
 }
@@ -4240,7 +4393,7 @@
   transform: scale(1.1);
   z-index: 1100;
   box-shadow: 0 7px 20px rgba(15, 23, 42, 0.4),
-              0 0 0 1px rgba(255, 255, 255, 0.7);
+    0 0 0 1px rgba(255, 255, 255, 0.7);
 }
 
 .dispatch-container .compare-start-pin svg {
@@ -4258,7 +4411,7 @@
   border: 0;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(15, 23, 42, 0.4),
-              0 0 0 1px rgba(255, 255, 255, 0.06);
+    0 0 0 1px rgba(255, 255, 255, 0.06);
   padding: 0;
   white-space: normal;
   font-family: inherit;
@@ -4270,12 +4423,15 @@
 .dispatch-container .compare-tooltip.leaflet-tooltip-top::before {
   border-top-color: rgba(15, 23, 42, 0.95);
 }
+
 .dispatch-container .compare-tooltip.leaflet-tooltip-bottom::before {
   border-bottom-color: rgba(15, 23, 42, 0.95);
 }
+
 .dispatch-container .compare-tooltip.leaflet-tooltip-left::before {
   border-left-color: rgba(15, 23, 42, 0.95);
 }
+
 .dispatch-container .compare-tooltip.leaflet-tooltip-right::before {
   border-right-color: rgba(15, 23, 42, 0.95);
 }
@@ -4678,8 +4834,15 @@
 }
 
 @keyframes kitchen-mark-pulse {
-  0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.9), 0 0 40px rgba(245, 158, 11, 0.5), 0 0 0 0 rgba(245, 158, 11, 0.55); }
-  50%      { box-shadow: 0 0 30px rgba(245, 158, 11, 1),   0 0 60px rgba(245, 158, 11, 0.7), 0 0 0 18px rgba(245, 158, 11, 0); }
+
+  0%,
+  100% {
+    box-shadow: 0 0 20px rgba(245, 158, 11, 0.9), 0 0 40px rgba(245, 158, 11, 0.5), 0 0 0 0 rgba(245, 158, 11, 0.55);
+  }
+
+  50% {
+    box-shadow: 0 0 30px rgba(245, 158, 11, 1), 0 0 60px rgba(245, 158, 11, 0.7), 0 0 0 18px rgba(245, 158, 11, 0);
+  }
 }
 
 /* Popups - Clean White Look */
@@ -4736,8 +4899,17 @@
 }
 
 @keyframes pu-pulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.2); opacity: 0.5; }
+
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.2);
+    opacity: 0.5;
+  }
 }
 
 .dispatch-container .pu-rider-wrap {
@@ -4914,8 +5086,15 @@
 }
 
 @keyframes pu-pulse-ring {
-  0% { transform: scale(0.5); opacity: 0.8; }
-  100% { transform: scale(1.6); opacity: 0; }
+  0% {
+    transform: scale(0.5);
+    opacity: 0.8;
+  }
+
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
 }
 
 .dispatch-container .live-rider-popup .pu-hdr-title {
@@ -5285,8 +5464,15 @@
 }
 
 @keyframes dispatch-popup-in {
-  from { opacity: 0; transform: translateY(4px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 .dispatch-container .dispatch-popup .leaflet-popup-content {
@@ -5599,9 +5785,11 @@
     width: 360px;
     flex-basis: 360px;
   }
+
   .dispatch-container .sidebar-toggle-tab {
     left: 360px;
   }
+
   .dispatch-container .sidebar-toggle-tab.is-collapsed {
     left: 0;
   }
@@ -5613,31 +5801,40 @@
     width: 320px;
     flex-basis: 320px;
   }
+
   .dispatch-container .sidebar-toggle-tab {
     left: 320px;
   }
+
   .dispatch-container .sidebar-toggle-tab.is-collapsed {
     left: 0;
   }
+
   .dispatch-container .rd-rider-name {
     font-size: 24px;
   }
+
   .dispatch-container .rd-stat-value {
     font-size: 20px;
   }
+
   .dispatch-container .sb-tile-value {
     font-size: 20px;
   }
+
   .dispatch-container #hdr {
     padding: 0 16px;
   }
+
   .dispatch-container #strat-row {
     padding: 0 16px;
     gap: 6px;
   }
+
   .dispatch-container #batch-row {
     padding: 8px 16px;
   }
+
   .dispatch-container .sbt {
     padding: 7px 11px;
     font-size: 12px;
@@ -5651,9 +5848,11 @@
     width: 290px;
     flex-basis: 290px;
   }
+
   .dispatch-container .sidebar-toggle-tab {
     left: 290px;
   }
+
   .dispatch-container .sidebar-toggle-tab.is-collapsed {
     left: 0;
   }
@@ -5663,30 +5862,37 @@
   .dispatch-container .logo-city-wrap {
     display: none;
   }
+
   .dispatch-container .logo-name {
     font-size: 16px;
   }
+
   .dispatch-container #clock {
     font-size: 12px;
     padding: 5px 10px;
   }
+
   .dispatch-container .hdr-stats {
     gap: 6px;
     margin-right: 8px;
   }
+
   .dispatch-container .strat-stat {
     padding: 5px 9px;
     font-size: 11px;
     gap: 4px;
   }
+
   /* Hide the verbose "Profit / Loss" text label; keep icon + value */
   .dispatch-container .strat-stat-label {
     display: none;
   }
+
   .dispatch-container .live-status {
     font-size: 11px;
     padding: 5px 8px;
   }
+
   /* Hide the "/ N today" sub-text to keep status compact */
   .dispatch-container .live-status-sub {
     display: none;
@@ -5698,6 +5904,7 @@
     font-size: 12px;
     gap: 5px;
   }
+
   .dispatch-container .sbt .sbt-icon {
     width: 16px;
     height: 16px;
@@ -5710,6 +5917,7 @@
     font-size: 11px;
     gap: 4px;
   }
+
   .dispatch-container .batch-btn-count {
     min-width: 18px;
     height: 16px;
@@ -5721,39 +5929,50 @@
   .dispatch-container .sb-header {
     padding: 14px 14px 12px;
   }
+
   .dispatch-container .sb-tile-value {
     font-size: 18px;
   }
+
   .dispatch-container .sb-tile {
     padding: 8px 10px;
     gap: 8px;
   }
+
   .dispatch-container .sb-tile-icon {
     width: 28px;
     height: 28px;
     font-size: 16px;
   }
+
   .dispatch-container .rcard {
     padding: 12px;
   }
+
   .dispatch-container .rcard-name {
     font-size: 13px;
   }
+
   .dispatch-container .rcard-zone {
     font-size: 11px;
   }
+
   .dispatch-container .step-wrap {
     padding: 12px;
   }
+
   .dispatch-container #route-detail {
     padding: 16px;
   }
+
   .dispatch-container .rd-rider-name {
     font-size: 20px;
   }
+
   .dispatch-container .rd-stat-value {
     font-size: 17px;
   }
+
   .dispatch-container .rd-stat {
     padding: 12px 8px 10px;
   }
@@ -5762,6 +5981,7 @@
   .dispatch-container #ov-tr {
     width: 160px;
   }
+
   .dispatch-container .rchip {
     padding: 6px 8px;
     font-size: 11px;
@@ -5774,9 +5994,11 @@
     width: 250px;
     flex-basis: 250px;
   }
+
   .dispatch-container .sidebar-toggle-tab {
     left: 250px;
   }
+
   .dispatch-container .sidebar-toggle-tab.is-collapsed {
     left: 0;
   }
@@ -5789,9 +6011,11 @@
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
   }
+
   .dispatch-container #strat-row::-webkit-scrollbar {
     display: none;
   }
+
   /* Keep buttons from shrinking inside the scroll container */
   .dispatch-container .sbt {
     flex-shrink: 0;
@@ -5803,10 +6027,12 @@
   .dispatch-container .zone-stat-label {
     display: none;
   }
+
   .dispatch-container .zone-stat-pill {
     padding: 3px 7px;
     gap: 3px;
   }
+
   .dispatch-container .zone-stat-value {
     font-size: 12px;
   }
@@ -5815,15 +6041,19 @@
   .dispatch-container .rd-stats-grid {
     gap: 6px;
   }
+
   .dispatch-container .rd-stat {
     padding: 10px 6px 8px;
   }
+
   .dispatch-container .rd-stat-value {
     font-size: 15px;
   }
+
   .dispatch-container .rd-stat-label {
     font-size: 9px;
   }
+
   .dispatch-container .rd-stat-icon {
     font-size: 15px;
   }
@@ -5837,6 +6067,7 @@
   .dispatch-container .zone-card-name {
     font-size: 13px;
   }
+
   .dispatch-container .zone-card-sub {
     font-size: 10px;
   }
@@ -5845,6 +6076,7 @@
   .dispatch-container #riders-panel {
     padding: 12px;
   }
+
   .dispatch-container .trip-header {
     padding: 10px 12px;
   }
@@ -6111,9 +6343,9 @@
 }
 
 .dispatch-container .ri-snap-head {
-  padding-bottom: 12px;
+  padding: 6px 0 18px;
   border-bottom: 1px dashed rgba(123, 31, 162, 0.18);
-  margin-bottom: 14px;
+  margin-bottom: 20px;
 }
 
 .dispatch-container .ri-snap-name {
@@ -6198,8 +6430,15 @@
 }
 
 @keyframes ri-live-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
-  50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
+
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
+  }
+
+  50% {
+    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
+  }
 }
 
 .dispatch-container .ri-snap-time {
@@ -6334,7 +6573,8 @@
   border-radius: 0 0 10px 10px;
   overflow: hidden;
   position: relative;
-  z-index: 0; /* Keep leaflet panes below the strat-row tooltips */
+  z-index: 0;
+  /* Keep leaflet panes below the strat-row tooltips */
 }
 
 .dispatch-container .ri-map .leaflet-container {
@@ -6369,6 +6609,7 @@
   .dispatch-container .rider-info-mode {
     flex-direction: column;
   }
+
   .dispatch-container .ri-sidebar {
     width: 100%;
     min-width: 0;
@@ -6376,9 +6617,11 @@
     border-right: 0;
     border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.08));
   }
+
   .dispatch-container .ri-main {
     padding: 16px;
   }
+
   .dispatch-container .ri-snap-grid {
     grid-template-columns: 1fr;
   }
@@ -6386,46 +6629,59 @@
 
 /* ── Laptop Responsive Tuning (max-width: 1366px) ── */
 @media (max-width: 1366px) {
+
   /* Header adjustments */
   .dispatch-container #hdr {
     height: 48px;
     padding: 0 16px;
   }
+
   .dispatch-container .logo-name {
     font-size: 15px;
   }
+
   .dispatch-container .logo-badge {
     width: 28px;
     height: 28px;
     font-size: 13px;
     border-radius: 6px;
   }
+
   .dispatch-container .logo {
     gap: 8px;
   }
+
   .dispatch-container #clock {
     font-size: 11px;
     padding: 4px 10px;
   }
+
   .dispatch-container .hdr-stats {
     gap: 8px;
     margin-right: 8px;
   }
+
   .dispatch-container .strat-stat {
     padding: 4px 8px;
     font-size: 11px;
     gap: 4px;
   }
+
   .dispatch-container .strat-stat-label {
-    display: none; /* Hide profit/loss labels early to fit numbers */
+    display: none;
+    /* Hide profit/loss labels early to fit numbers */
   }
+
   .dispatch-container .live-status {
     font-size: 11px;
     padding: 4px 8px;
   }
+
   .dispatch-container .live-status-sub {
-    display: none; /* Hide total orders suffix to save space */
+    display: none;
+    /* Hide total orders suffix to save space */
   }
+
   /* Date chip — compact mode: drop the "Date" mini-label and tighten the
      main card so the chip fits in cramped mobile toolbars. The prev/next
      day arrows stay since they're the fastest way to scrub by day on a
@@ -6433,18 +6689,22 @@
   .dispatch-container .date-chip-label {
     display: none;
   }
+
   .dispatch-container .date-chip-main {
     padding: 6px 10px;
     gap: 8px;
   }
+
   .dispatch-container .date-chip-icon {
     width: 24px;
     height: 24px;
     font-size: 13px;
   }
+
   .dispatch-container .date-chip-value {
     font-size: 12px;
   }
+
   .dispatch-container .date-chip-nav {
     width: 28px;
     font-size: 16px;
@@ -6452,19 +6712,23 @@
 
   /* Strategy Tab Row adjustments */
   .dispatch-container #strat-row {
-    height: 38px;
+    height: 48px;
     padding: 0 16px;
+    gap: 8px;
+  }
+
+  .dispatch-container .sbt {
+    padding: 6px 12px;
+    font-size: 12px;
+    border-radius: 8px;
+    border: 1px solid rgba(15, 23, 42, 0.08);
     gap: 6px;
   }
-  .dispatch-container .sbt {
-    padding: 6px 10px;
-    font-size: 11px;
-    gap: 5px;
-  }
+
   .dispatch-container .sbt .sbt-icon {
-    width: 15px;
-    height: 15px;
-    font-size: 15px;
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
   }
 
   /* Batch Slots Row adjustments */
@@ -6472,9 +6736,11 @@
     padding: 6px 16px;
     gap: 6px;
   }
+
   .dispatch-container .batch-label {
     font-size: 11px;
   }
+
   .dispatch-container .batch-btn {
     padding: 4px 8px;
     font-size: 11px;
@@ -6485,6 +6751,7 @@
     width: 320px;
     flex-basis: 320px;
   }
+
   .dispatch-container .sidebar-toggle-tab {
     left: 320px;
   }
@@ -6494,9 +6761,11 @@
     width: 250px;
     flex-basis: 250px;
   }
+
   .dispatch-container #body.compare-mode .sidebar-toggle-tab {
     left: 250px;
   }
+
   .dispatch-container #body.compare-mode .sidebar-toggle-tab.is-collapsed {
     left: 0;
   }
@@ -6505,40 +6774,52 @@
   .dispatch-container .sb-header {
     padding: 10px 12px;
   }
+
   .dispatch-container .sb-tile {
     padding: 6px 8px;
     gap: 6px;
   }
+
   .dispatch-container .sb-tile-value {
     font-size: 16px;
   }
+
   .dispatch-container .rcard {
     padding: 10px;
   }
+
   .dispatch-container .rcard-name {
     font-size: 12px;
   }
+
   .dispatch-container .rcard-zone {
     font-size: 10px;
   }
+
   .dispatch-container .step-wrap {
     padding: 10px;
   }
+
   .dispatch-container #route-detail {
     padding: 12px;
   }
+
   .dispatch-container .rd-rider-name {
     font-size: 18px;
   }
+
   .dispatch-container .rd-stats-grid {
     gap: 4px;
   }
+
   .dispatch-container .rd-stat {
     padding: 8px 4px 6px;
   }
+
   .dispatch-container .rd-stat-value {
     font-size: 14px;
   }
+
   .dispatch-container .rd-stat-label {
     font-size: 9px;
   }
@@ -6548,24 +6829,29 @@
     padding: 8px 12px 6px;
     gap: 6px;
   }
+
   .dispatch-container .compare-header-row .compare-title {
     font-size: 13px;
     gap: 8px;
   }
+
   .dispatch-container .compare-title-dot {
     width: 8px;
     height: 8px;
   }
+
   .dispatch-container .compare-title-badge {
     padding: 2px 6px;
     font-size: 9px;
   }
+
   .dispatch-container .compare-overall-btn,
   .dispatch-container .compare-sync-toggle {
     padding: 4px 8px;
     font-size: 10px;
     gap: 4px;
   }
+
   .dispatch-container .compare-overall-btn svg,
   .dispatch-container .compare-sync-toggle svg {
     font-size: 12px;
@@ -6575,39 +6861,50 @@
   .dispatch-container .compare-timeline-wrap {
     gap: 4px;
   }
+
   .dispatch-container .compare-timeline-container {
     padding: 6px 10px;
     gap: 12px;
     border-radius: 8px;
   }
+
   .dispatch-container .compare-timeline-labels {
     padding-right: 10px;
     gap: 12px;
     border-right-width: 1px;
   }
+
   .dispatch-container .compare-timeline-label {
     font-size: 9px;
-    height: 24px; /* aligns with 24px circle height */
+    height: 24px;
+    /* aligns with 24px circle height */
   }
+
   .dispatch-container .compare-timeline-scrollable {
     flex: 1;
     overflow-x: auto;
     display: flex;
     flex-direction: column;
     gap: 12px;
-    scrollbar-width: none; /* Hide standard Firefox scrollbar */
-    -ms-overflow-style: none; /* Hide IE scrollbar */
+    scrollbar-width: none;
+    /* Hide standard Firefox scrollbar */
+    -ms-overflow-style: none;
+    /* Hide IE scrollbar */
   }
+
   .dispatch-container .compare-timeline-scrollable::-webkit-scrollbar {
     height: 4px;
   }
+
   .dispatch-container .compare-timeline-scrollable::-webkit-scrollbar-track {
     background: transparent;
   }
+
   .dispatch-container .compare-timeline-scrollable::-webkit-scrollbar-thumb {
     background: rgba(99, 102, 241, 0.25);
     border-radius: 999px;
   }
+
   .dispatch-container .compare-timeline-scrollable:hover::-webkit-scrollbar-thumb {
     background: rgba(99, 102, 241, 0.5);
   }
@@ -6616,6 +6913,7 @@
   .dispatch-container .compare-timeline-track.is-planned .compare-step {
     height: 24px;
   }
+
   .dispatch-container .compare-timeline-track.is-planned .compare-step-spacer {
     margin-bottom: 0;
     align-self: center;
@@ -6623,18 +6921,22 @@
 
   /* Actual track overrides for the spacer alignment */
   .dispatch-container .compare-timeline-track.is-actual .compare-step-spacer {
-    margin-bottom: 14px; /* Centers spacer dynamically relative to the 24px circle */
+    margin-bottom: 14px;
+    /* Centers spacer dynamically relative to the 24px circle */
   }
 
   .dispatch-container .compare-step {
-    gap: 4px; /* Tighten spacer-circle layout vertical spacing */
+    gap: 4px;
+    /* Tighten spacer-circle layout vertical spacing */
   }
+
   .dispatch-container .compare-step-circle {
     width: 24px;
     height: 24px;
     font-size: 10px;
     box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.6);
   }
+
   .dispatch-container .compare-step.is-focused .compare-step-circle {
     transform: scale(1.1);
     box-shadow:
@@ -6642,13 +6944,17 @@
       0 0 0 2px #fff,
       0 0 0 3px var(--step-color, #6366f1);
   }
+
   .dispatch-container .compare-step-spacer {
     width: 10px;
-    margin-bottom: 14px; /* Shift connecting lines up for 24px circles */
+    margin-bottom: 14px;
+    /* Shift connecting lines up for 24px circles */
   }
+
   .dispatch-container .compare-step-tick {
     font-size: 9px;
   }
+
   .dispatch-container .compare-step-flag {
     top: -3px;
     right: -3px;
@@ -6661,6 +6967,7 @@
   .dispatch-container .compare-progress-strip {
     margin-top: 2px;
   }
+
   .dispatch-container .compare-progress-text {
     font-size: 9px;
   }
@@ -6671,15 +6978,19 @@
     margin-top: 0;
     gap: 8px;
   }
+
   .dispatch-container .compare-legend-item {
     font-size: 9px;
   }
+
   .dispatch-container .compare-legend-swatch {
     width: 10px;
     height: 10px;
   }
+
   .dispatch-container .compare-legend-note {
-    display: none; /* Hide wordy GPS smoothing notes */
+    display: none;
+    /* Hide wordy GPS smoothing notes */
   }
 
   /* Bottom Delta Card panel compression for 14" laptops */
@@ -6687,43 +6998,53 @@
     padding: 8px 12px;
     gap: 6px;
   }
+
   .dispatch-container .compare-delta-title {
     margin-bottom: 4px;
     gap: 8px;
   }
+
   .dispatch-container .compare-delta-step-badge {
     width: 20px;
     height: 20px;
     font-size: 11px;
   }
+
   .dispatch-container .compare-delta-title-main {
     font-size: 12px;
   }
+
   .dispatch-container .compare-delta-title-sub {
     font-size: 9px;
   }
+
   .dispatch-container .compare-delta-status {
     padding: 2px 6px;
     font-size: 9px;
   }
-  
+
   .dispatch-container .compare-delta-grid {
     gap: 6px;
   }
+
   .dispatch-container .compare-delta-cell {
     padding: 5px 8px 4px;
     border-radius: 8px;
   }
+
   .dispatch-container .compare-delta-cell-label {
     font-size: 9px;
     margin-bottom: 1px;
   }
+
   .dispatch-container .compare-delta-cell-val {
     font-size: 13px;
   }
+
   .dispatch-container .compare-delta-cell-unit {
     font-size: 8px;
   }
+
   .dispatch-container .compare-delta-cell-sub {
     font-size: 9px;
     margin-top: 1px;
@@ -6732,40 +7053,55 @@
 
 /* ── Laptop Height Tuning (max-height: 750px) ── */
 @media (max-height: 750px) {
+
   /* Let's shrink header rows even further on short screen heights */
   .dispatch-container #hdr {
     height: 42px;
   }
+
   .dispatch-container #strat-row {
-    height: 34px;
+    height: 42px;
   }
+
+  .dispatch-container #strat-row .sbt {
+    padding: 5px 10px;
+    font-size: 11px;
+    border-radius: 6px;
+    border: 1px solid rgba(15, 23, 42, 0.08);
+  }
+
   .dispatch-container #batch-row {
     padding: 4px 16px;
   }
-  
+
   /* Dual-map Compare Mode Header compression */
   .dispatch-container .compare-header-v2 {
     padding: 8px 12px 6px;
     gap: 6px;
   }
+
   .dispatch-container .compare-header-row .compare-title {
     font-size: 13px;
     gap: 8px;
   }
+
   .dispatch-container .compare-title-dot {
     width: 8px;
     height: 8px;
   }
+
   .dispatch-container .compare-title-badge {
     padding: 2px 6px;
     font-size: 9px;
   }
+
   .dispatch-container .compare-overall-btn,
   .dispatch-container .compare-sync-toggle {
     padding: 4px 8px;
     font-size: 10px;
     gap: 4px;
   }
+
   .dispatch-container .compare-overall-btn svg,
   .dispatch-container .compare-sync-toggle svg {
     font-size: 12px;
@@ -6775,20 +7111,25 @@
   .dispatch-container .compare-timeline-wrap {
     gap: 4px;
   }
+
   .dispatch-container .compare-timeline-container {
     padding: 6px 10px;
     gap: 12px;
     border-radius: 8px;
   }
+
   .dispatch-container .compare-timeline-labels {
     padding-right: 10px;
     gap: 12px;
     border-right-width: 1px;
   }
+
   .dispatch-container .compare-timeline-label {
     font-size: 9px;
-    height: 24px; /* aligns with 24px circle height */
+    height: 24px;
+    /* aligns with 24px circle height */
   }
+
   .dispatch-container .compare-timeline-scrollable {
     flex: 1;
     overflow-x: auto;
@@ -6797,11 +7138,12 @@
     gap: 12px;
     padding-bottom: 2px;
   }
-  
+
   /* Planned track overrides to align vertically centered since there are no ticks */
   .dispatch-container .compare-timeline-track.is-planned .compare-step {
     height: 24px;
   }
+
   .dispatch-container .compare-timeline-track.is-planned .compare-step-spacer {
     margin-bottom: 0;
     align-self: center;
@@ -6809,18 +7151,22 @@
 
   /* Actual track overrides for the spacer alignment */
   .dispatch-container .compare-timeline-track.is-actual .compare-step-spacer {
-    margin-bottom: 14px; /* Centers spacer dynamically relative to the 24px circle */
+    margin-bottom: 14px;
+    /* Centers spacer dynamically relative to the 24px circle */
   }
 
   .dispatch-container .compare-step {
-    gap: 4px; /* Reduced from 11px to bring timeline elements tighter */
+    gap: 4px;
+    /* Reduced from 11px to bring timeline elements tighter */
   }
+
   .dispatch-container .compare-step-circle {
     width: 24px;
     height: 24px;
     font-size: 10px;
     box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.6);
   }
+
   .dispatch-container .compare-step.is-focused .compare-step-circle {
     transform: scale(1.1);
     box-shadow:
@@ -6828,10 +7174,13 @@
       0 0 0 2px #fff,
       0 0 0 3px var(--step-color, #6366f1);
   }
+
   .dispatch-container .compare-step-spacer {
     width: 10px;
-    margin-bottom: 14px; /* Shift spacer dynamically up to align with 24px circles */
+    margin-bottom: 14px;
+    /* Shift spacer dynamically up to align with 24px circles */
   }
+
   .dispatch-container .compare-step-tick {
     font-size: 9px;
   }
@@ -6840,6 +7189,7 @@
   .dispatch-container .compare-progress-strip {
     margin-top: 2px;
   }
+
   .dispatch-container .compare-progress-text {
     font-size: 9px;
   }
@@ -6850,15 +7200,19 @@
     margin-top: 0;
     gap: 8px;
   }
+
   .dispatch-container .compare-legend-item {
     font-size: 9px;
   }
+
   .dispatch-container .compare-legend-swatch {
     width: 10px;
     height: 10px;
   }
+
   .dispatch-container .compare-legend-note {
-    display: none; /* Hide verbose Kalman note on short screens */
+    display: none;
+    /* Hide verbose Kalman note on short screens */
   }
 
   /* Bottom Delta Card panel compression */
@@ -6866,44 +7220,54 @@
     padding: 8px 12px;
     gap: 6px;
   }
+
   .dispatch-container .compare-delta-title {
     margin-bottom: 4px;
     gap: 8px;
   }
+
   .dispatch-container .compare-delta-step-badge {
     width: 20px;
     height: 20px;
     font-size: 11px;
   }
+
   .dispatch-container .compare-delta-title-main {
     font-size: 12px;
   }
+
   .dispatch-container .compare-delta-title-sub {
     font-size: 9px;
   }
+
   .dispatch-container .compare-delta-status {
     padding: 2px 6px;
     font-size: 9px;
   }
-  
+
   /* Delta Grid - cells and labels */
   .dispatch-container .compare-delta-grid {
     gap: 6px;
   }
+
   .dispatch-container .compare-delta-cell {
     padding: 5px 8px 4px;
     border-radius: 8px;
   }
+
   .dispatch-container .compare-delta-cell-label {
     font-size: 9px;
     margin-bottom: 1px;
   }
+
   .dispatch-container .compare-delta-cell-val {
     font-size: 13px;
   }
+
   .dispatch-container .compare-delta-cell-unit {
     font-size: 8px;
   }
+
   .dispatch-container .compare-delta-cell-sub {
     font-size: 9px;
     margin-top: 1px;
@@ -6914,6 +7278,7 @@
 .dispatch-container .compare-delta.is-collapsible.is-collapsed {
   padding-bottom: 12px;
 }
+
 .dispatch-container .compare-delta-toggle-icon {
   display: inline-flex;
   align-items: center;
@@ -6922,6 +7287,7 @@
   font-size: 18px;
   transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
 }
+
 .dispatch-container .compare-delta-title:hover .compare-delta-toggle-icon {
   color: var(--accent, #6366f1);
 }
@@ -6930,6 +7296,7 @@
   .dispatch-container .compare-delta.is-collapsible.is-collapsed {
     padding-bottom: 8px;
   }
+
   .dispatch-container .compare-delta-toggle-icon {
     font-size: 15px;
   }
@@ -6939,6 +7306,7 @@
   .dispatch-container .compare-delta.is-collapsible.is-collapsed {
     padding-bottom: 8px;
   }
+
   .dispatch-container .compare-delta-toggle-icon {
     font-size: 15px;
   }
@@ -6979,7 +7347,7 @@
   background: #ffffff;
   border-radius: 14px;
   box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08),
-              0 0 0 1px rgba(15, 23, 42, 0.06);
+    0 0 0 1px rgba(15, 23, 42, 0.06);
   overflow: hidden;
   animation: compare-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -7004,7 +7372,7 @@
   border-radius: 14px;
   border-right: 0;
   box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08),
-              0 0 0 1px rgba(15, 23, 42, 0.06);
+    0 0 0 1px rgba(15, 23, 42, 0.06);
   overflow: hidden;
 }
 
@@ -7026,7 +7394,7 @@
   backdrop-filter: blur(8px);
   border-radius: 10px;
   box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12),
-              0 0 0 1px rgba(15, 23, 42, 0.08);
+    0 0 0 1px rgba(15, 23, 42, 0.08);
   animation: compare-label-in 0.22s ease-out;
 }
 
@@ -7043,7 +7411,7 @@
   border-radius: 7px;
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease,
-              box-shadow 0.15s ease, transform 0.15s ease;
+    box-shadow 0.15s ease, transform 0.15s ease;
   white-space: nowrap;
 }
 
@@ -7079,7 +7447,7 @@
   background: #ffffff;
   border-radius: 14px;
   box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08),
-              0 0 0 1px rgba(15, 23, 42, 0.06);
+    0 0 0 1px rgba(15, 23, 42, 0.06);
   overflow: hidden;
   animation: compare-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -7149,6 +7517,7 @@
   cursor: pointer;
   transition: background 0.15s ease, transform 0.15s ease;
 }
+
 .dispatch-container .cdp-close:hover {
   background: rgba(255, 255, 255, 0.32);
   transform: rotate(90deg);
@@ -7164,8 +7533,14 @@
   gap: 14px;
 }
 
-.dispatch-container .cdp-scroll::-webkit-scrollbar { width: 8px; }
-.dispatch-container .cdp-scroll::-webkit-scrollbar-track { background: transparent; }
+.dispatch-container .cdp-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.dispatch-container .cdp-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 .dispatch-container .cdp-scroll::-webkit-scrollbar-thumb {
   background: rgba(15, 23, 42, 0.14);
   border-radius: 999px;
@@ -7209,7 +7584,11 @@
   color: #dc2626;
 }
 
-.dispatch-container .cdp-section-title { flex: 1; min-width: 0; }
+.dispatch-container .cdp-section-title {
+  flex: 1;
+  min-width: 0;
+}
+
 .dispatch-container .cdp-section-sub {
   font-size: 10px;
   font-weight: 700;
@@ -7230,6 +7609,7 @@
   cursor: pointer;
   text-transform: none;
 }
+
 .dispatch-container .cdp-section-clear:hover {
   background: rgba(99, 102, 241, 0.2);
 }
@@ -7251,6 +7631,7 @@
   gap: 4px;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
+
 .dispatch-container .cdp-tile:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
@@ -7281,6 +7662,7 @@
   text-transform: uppercase;
   color: #64748b;
 }
+
 .dispatch-container .cdp-tile-label svg {
   font-size: 13px;
 }
@@ -7292,8 +7674,14 @@
   line-height: 1.1;
   letter-spacing: -0.01em;
 }
-.dispatch-container .cdp-tile-value.is-over { color: #dc2626; }
-.dispatch-container .cdp-tile-value.is-under { color: #16a34a; }
+
+.dispatch-container .cdp-tile-value.is-over {
+  color: #dc2626;
+}
+
+.dispatch-container .cdp-tile-value.is-under {
+  color: #16a34a;
+}
 
 .dispatch-container .cdp-tile-unit {
   font-size: 12px;
@@ -7333,10 +7721,12 @@
   cursor: pointer;
   transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
 }
+
 .dispatch-container .cdp-dev-item:hover {
   transform: translateX(2px);
   box-shadow: 0 3px 10px rgba(239, 68, 68, 0.12);
 }
+
 .dispatch-container .cdp-dev-item.is-focused {
   border-color: rgba(239, 68, 68, 0.6);
   background: #fef2f2;
@@ -7354,7 +7744,7 @@
   font-weight: 800;
   flex-shrink: 0;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6),
-              0 1px 3px rgba(15, 23, 42, 0.15);
+    0 1px 3px rgba(15, 23, 42, 0.15);
 }
 
 .dispatch-container .cdp-dev-body {
@@ -7390,6 +7780,7 @@
   background: rgba(239, 68, 68, 0.1);
   color: #dc2626;
 }
+
 .dispatch-container .cdp-dev-chip.is-over {
   background: rgba(239, 68, 68, 0.12);
   color: #dc2626;
@@ -7407,6 +7798,7 @@
   cursor: pointer;
   transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
 }
+
 .dispatch-container .cdp-step:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
@@ -7449,7 +7841,7 @@
   flex-shrink: 0;
   position: relative;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6),
-              0 1px 3px rgba(15, 23, 42, 0.15);
+    0 1px 3px rgba(15, 23, 42, 0.15);
 }
 
 .dispatch-container .cdp-step-check,
@@ -7467,8 +7859,14 @@
   font-size: 13px;
   box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
 }
-.dispatch-container .cdp-step-check { color: #16a34a; }
-.dispatch-container .cdp-step-flag { color: #dc2626; }
+
+.dispatch-container .cdp-step-check {
+  color: #16a34a;
+}
+
+.dispatch-container .cdp-step-flag {
+  color: #dc2626;
+}
 
 .dispatch-container .cdp-step-body {
   flex: 1;
@@ -7532,20 +7930,37 @@
   font-weight: 700;
   color: #475569;
 }
+
 .dispatch-container .cdp-step-delta svg {
   font-size: 15px;
   color: #94a3b8;
 }
+
 .dispatch-container .cdp-step-delta small {
   font-size: 12px;
   font-weight: 700;
   color: #94a3b8;
 }
-.dispatch-container .cdp-step-delta small.is-over { color: #dc2626; }
-.dispatch-container .cdp-step-delta.is-over { color: #dc2626; }
-.dispatch-container .cdp-step-delta.is-over svg { color: #dc2626; }
-.dispatch-container .cdp-step-delta.is-under { color: #16a34a; }
-.dispatch-container .cdp-step-delta.is-under svg { color: #16a34a; }
+
+.dispatch-container .cdp-step-delta small.is-over {
+  color: #dc2626;
+}
+
+.dispatch-container .cdp-step-delta.is-over {
+  color: #dc2626;
+}
+
+.dispatch-container .cdp-step-delta.is-over svg {
+  color: #dc2626;
+}
+
+.dispatch-container .cdp-step-delta.is-under {
+  color: #16a34a;
+}
+
+.dispatch-container .cdp-step-delta.is-under svg {
+  color: #16a34a;
+}
 
 /* Responsive — narrow screens collapse to a single column. Header strip
    stacks on top, then the unified map, then the data panel scrolls
@@ -7556,15 +7971,18 @@
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: auto minmax(360px, 1fr) auto;
   }
+
   .dispatch-container #body.compare-mode #compare-map-wrap {
     grid-column: 1;
     grid-row: 1;
   }
+
   .dispatch-container #body.compare-mode #map-wrap,
   .dispatch-container #body.compare-mode #map-wrap.compare-split {
     grid-column: 1;
     grid-row: 2;
   }
+
   .dispatch-container .compare-data-panel {
     grid-column: 1;
     grid-row: 3;
@@ -7685,6 +8103,7 @@
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
+
 .dispatch-container .cdp-timing-active-pulse {
   width: 6px;
   height: 6px;
@@ -7693,10 +8112,19 @@
   box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
   animation: cdp-timing-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+
 @keyframes cdp-timing-pulse {
-  0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.55); }
-  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
-  100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
+  0% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
+  }
+
+  70% {
+    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
 }
 
 .dispatch-container .cdp-timing-clock {
@@ -7732,11 +8160,18 @@
   letter-spacing: 0.07em;
   text-transform: uppercase;
 }
+
 .dispatch-container .cdp-clock-label svg {
   font-size: 13px;
 }
-.dispatch-container .cdp-clock-card.is-start .cdp-clock-label svg { color: #10b981; }
-.dispatch-container .cdp-clock-card.is-end .cdp-clock-label svg { color: #f59e0b; }
+
+.dispatch-container .cdp-clock-card.is-start .cdp-clock-label svg {
+  color: #10b981;
+}
+
+.dispatch-container .cdp-clock-card.is-end .cdp-clock-label svg {
+  color: #f59e0b;
+}
 
 .dispatch-container .cdp-clock-face {
   position: relative;
@@ -7752,6 +8187,7 @@
     inset 0 1px 0 rgba(255, 255, 255, 0.07),
     inset 0 -1px 0 rgba(0, 0, 0, 0.4);
 }
+
 .dispatch-container .cdp-clock-face::after {
   content: '';
   position: absolute;
@@ -7760,9 +8196,11 @@
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
   pointer-events: none;
 }
+
 .dispatch-container .cdp-clock-card.is-start .cdp-clock-face {
   border-top: 1px solid rgba(16, 185, 129, 0.4);
 }
+
 .dispatch-container .cdp-clock-card.is-end .cdp-clock-face {
   border-top: 1px solid rgba(245, 158, 11, 0.4);
 }
@@ -7795,8 +8233,14 @@
   text-transform: uppercase;
   color: #94a3b8;
 }
-.dispatch-container .cdp-clock-card.is-start .cdp-clock-caption { color: #16a34a; }
-.dispatch-container .cdp-clock-card.is-end .cdp-clock-caption { color: #d97706; }
+
+.dispatch-container .cdp-clock-card.is-start .cdp-clock-caption {
+  color: #16a34a;
+}
+
+.dispatch-container .cdp-clock-card.is-end .cdp-clock-caption {
+  color: #d97706;
+}
 
 /* Timeline track — line stretches the full column with the duration
    badge anchored on top. */
@@ -7830,6 +8274,7 @@
   transform: translateY(-50%);
   z-index: 1;
 }
+
 .dispatch-container .cdp-clock-track-dot.is-start {
   left: 0;
   background: #10b981;
@@ -7837,6 +8282,7 @@
     0 0 0 2px #fff,
     0 0 0 5px rgba(16, 185, 129, 0.25);
 }
+
 .dispatch-container .cdp-clock-track-dot.is-end {
   right: 0;
   background: #f59e0b;
@@ -7885,6 +8331,7 @@
   letter-spacing: -0.01em;
   line-height: 1.1;
 }
+
 .dispatch-container .cdp-clock-duration-sub {
   font-size: 8px;
   font-weight: 800;
@@ -7912,6 +8359,7 @@
   border: 1px solid rgba(15, 23, 42, 0.07);
   transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
+
 .dispatch-container .cdp-timing-stat:hover {
   border-color: rgba(99, 102, 241, 0.3);
   box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
@@ -7990,6 +8438,7 @@
 .dispatch-container .cdp-stops-dots {
   flex-wrap: wrap;
 }
+
 .dispatch-container .cdp-stop-dot {
   width: 6px;
   height: 6px;
@@ -8054,6 +8503,7 @@
   overflow: hidden;
   transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
 }
+
 .dispatch-container .cdp-highlight:hover {
   transform: translateX(2px);
   box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
@@ -8078,9 +8528,11 @@
   background: linear-gradient(90deg, rgba(16, 185, 129, 0.07) 0%, #fff 65%);
   border-color: rgba(16, 185, 129, 0.28);
 }
+
 .dispatch-container .cdp-highlight.is-best:hover {
   border-color: rgba(16, 185, 129, 0.5);
 }
+
 .dispatch-container .cdp-highlight.is-best .cdp-highlight-rail {
   background: linear-gradient(180deg, #10b981 0%, #16a34a 100%);
 }
@@ -8089,9 +8541,11 @@
   background: linear-gradient(90deg, rgba(239, 68, 68, 0.07) 0%, #fff 65%);
   border-color: rgba(239, 68, 68, 0.28);
 }
+
 .dispatch-container .cdp-highlight.is-worst:hover {
   border-color: rgba(239, 68, 68, 0.5);
 }
+
 .dispatch-container .cdp-highlight.is-worst .cdp-highlight-rail {
   background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
 }
@@ -8113,8 +8567,14 @@
   text-transform: uppercase;
   min-width: 0;
 }
-.dispatch-container .cdp-highlight.is-best .cdp-highlight-label { color: #16a34a; }
-.dispatch-container .cdp-highlight.is-worst .cdp-highlight-label { color: #dc2626; }
+
+.dispatch-container .cdp-highlight.is-best .cdp-highlight-label {
+  color: #16a34a;
+}
+
+.dispatch-container .cdp-highlight.is-worst .cdp-highlight-label {
+  color: #dc2626;
+}
 
 .dispatch-container .cdp-highlight-chip {
   display: inline-flex;
@@ -8127,10 +8587,12 @@
   color: #fff;
   flex-shrink: 0;
 }
+
 .dispatch-container .cdp-highlight.is-best .cdp-highlight-chip {
   background: linear-gradient(135deg, #10b981 0%, #16a34a 100%);
   box-shadow: 0 1px 3px rgba(16, 185, 129, 0.35);
 }
+
 .dispatch-container .cdp-highlight.is-worst .cdp-highlight-chip {
   background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
   box-shadow: 0 1px 3px rgba(239, 68, 68, 0.35);
@@ -8178,10 +8640,12 @@
   letter-spacing: 0.01em;
   font-variant-numeric: tabular-nums;
 }
+
 .dispatch-container .cdp-highlight-pill.is-bad {
   background: rgba(239, 68, 68, 0.12);
   color: #dc2626;
 }
+
 .dispatch-container .cdp-highlight-pill.is-good {
   background: rgba(16, 185, 129, 0.12);
   color: #16a34a;
@@ -8245,18 +8709,22 @@
   font-weight: 700;
   color: #475569;
 }
+
 .dispatch-container .cdp-trip-stats span svg {
   font-size: 13px;
   color: #94a3b8;
 }
+
 .dispatch-container .cdp-trip-stats span small {
   font-size: 10px;
   font-weight: 700;
   color: #94a3b8;
 }
+
 .dispatch-container .cdp-trip-stats span.is-over {
   color: #dc2626;
 }
+
 .dispatch-container .cdp-trip-stats span.is-over svg {
   color: #dc2626;
 }
@@ -8266,6 +8734,7 @@
   cursor: pointer;
   user-select: none;
 }
+
 .dispatch-container .cdp-section-head-clickable:hover .cdp-section-title {
   color: #4338ca;
 }
@@ -8279,10 +8748,12 @@
   border-radius: 999px;
   flex-shrink: 0;
 }
+
 .dispatch-container .cdp-seq-status.is-good {
   background: rgba(16, 185, 129, 0.12);
   color: #16a34a;
 }
+
 .dispatch-container .cdp-seq-status.is-warn {
   background: rgba(239, 68, 68, 0.12);
   color: #dc2626;
@@ -8296,6 +8767,7 @@
   color: #94a3b8;
   transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
 .dispatch-container .cdp-seq-toggle.is-open {
   transform: rotate(180deg);
   color: #4338ca;
@@ -8313,8 +8785,15 @@
 }
 
 @keyframes cdp-seq-in {
-  from { opacity: 0; transform: translateY(-3px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-3px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .dispatch-container .cdp-seq-diffs {
@@ -8337,10 +8816,12 @@
   cursor: pointer;
   transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
 }
+
 .dispatch-container .cdp-seq-diff:hover {
   transform: translateX(2px);
   box-shadow: 0 3px 10px rgba(239, 68, 68, 0.12);
 }
+
 .dispatch-container .cdp-seq-diff.is-focused {
   border-color: rgba(239, 68, 68, 0.6);
   box-shadow: 0 3px 12px rgba(239, 68, 68, 0.2);
@@ -8358,7 +8839,7 @@
   font-weight: 800;
   flex-shrink: 0;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7),
-              0 1px 3px rgba(15, 23, 42, 0.15);
+    0 1px 3px rgba(15, 23, 42, 0.15);
 }
 
 .dispatch-container .cdp-seq-diff-body {
@@ -8405,6 +8886,7 @@
   background: rgba(16, 185, 129, 0.08);
   border-radius: 8px;
 }
+
 .dispatch-container .cdp-seq-good svg {
   font-size: 18px;
 }
@@ -8418,10 +8900,12 @@
   position: relative;
   padding-right: 40px;
 }
+
 .dispatch-container .cdp-seq-diff.is-group:hover {
   border-color: rgba(99, 102, 241, 0.55);
   box-shadow: 0 3px 10px rgba(99, 102, 241, 0.15);
 }
+
 .dispatch-container .cdp-seq-diff.is-group.is-expanded {
   border-color: rgba(99, 102, 241, 0.6);
   background: linear-gradient(180deg, #e0e7ff 0%, #f5f7ff 100%);
@@ -8438,13 +8922,15 @@
   justify-content: center;
   flex-shrink: 0;
 }
+
 .dispatch-container .cdp-seq-group-num-bg {
   position: absolute;
   inset: 0;
   border-radius: 8px;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7),
-              0 1px 3px rgba(15, 23, 42, 0.15);
+    0 1px 3px rgba(15, 23, 42, 0.15);
 }
+
 .dispatch-container .cdp-seq-group-num-label {
   position: relative;
   color: #fff;
@@ -8484,6 +8970,7 @@
   transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
 }
+
 .dispatch-container .cdp-seq-group-toggle.is-open {
   transform: translateY(-50%) rotate(180deg);
   background: rgba(99, 102, 241, 0.18);
@@ -8506,8 +8993,15 @@
 }
 
 @keyframes cdp-seq-group-in {
-  from { opacity: 0; transform: translateY(-3px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-3px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .dispatch-container .cdp-seq-group-children {
@@ -8527,17 +9021,21 @@
   border-color: rgba(99, 102, 241, 0.15);
   border-radius: 8px;
 }
+
 .dispatch-container .cdp-seq-diff.is-nested .cdp-seq-diff-num {
   width: 26px;
   height: 26px;
   font-size: 13px;
 }
+
 .dispatch-container .cdp-seq-diff.is-nested .cdp-seq-diff-title {
   font-size: 13.5px;
 }
+
 .dispatch-container .cdp-seq-diff.is-nested .cdp-seq-diff-sub {
   font-size: 12.5px;
 }
+
 .dispatch-container .cdp-seq-diff.is-nested .cdp-seq-diff-tag {
   font-size: 12px;
   padding: 2px 8px;
diff --git a/src/pages/nearle/dispatch/Dispatch.js b/src/pages/nearle/dispatch/Dispatch.js
index 88c8760..ca1fbba 100644
--- a/src/pages/nearle/dispatch/Dispatch.js
+++ b/src/pages/nearle/dispatch/Dispatch.js
@@ -60,6 +60,7 @@ import {
 } from './dispatchShared';
 import CompareDataPanel from './CompareDataPanel';
 import './Dispatch.css';
+import logger from '../../../utils/logger';
 
 // Combined-mode rail colors. The per-step palette (STEP_PALETTE) is great for
 // "which step is this" but useless for "is this line planned or actual" when
@@ -126,11 +127,11 @@ const hasValidPickup = (o) => Number.isFinite(toNum(pickupLat(o))) && Number.isF
 //   • Slot 4: evening       (7 PM   → 8 PM)
 //   • Slot 5: night         (8 PM   → midnight)
 const BATCHES_DEFAULT_RAW = [
-  { id: 'slot-1', startHour: 8,            endHour: 12.5 },
+  { id: 'slot-1', startHour: 8, endHour: 12.5 },
   { id: 'slot-2', startHour: 12 + 20 / 60, endHour: 15 },
-  { id: 'slot-3', startHour: 15,           endHour: 19 },
-  { id: 'slot-4', startHour: 19,           endHour: 20 },
-  { id: 'slot-5', startHour: 20,           endHour: 24 }
+  { id: 'slot-3', startHour: 15, endHour: 19 },
+  { id: 'slot-4', startHour: 19, endHour: 20 },
+  { id: 'slot-5', startHour: 20, endHour: 24 }
 ];
 
 // v6: the five-named-wave layout with validation checks for array lengths.
@@ -198,9 +199,9 @@ const TIME_FIELDS = [
   { id: 'delivery', label: 'Delivery', keys: ['deliverytime', 'expecteddeliverytime'] },
   { id: 'assigned', label: 'Assigned', keys: ['assigntime'] },
   { id: 'accepted', label: 'Accepted', keys: ['acceptedtime'] },
-  { id: 'started',  label: 'Started',  keys: ['starttime'] },
-  { id: 'arrived',  label: 'Arrived',  keys: ['arrivaltime'] },
-  { id: 'pickup',   label: 'Pickup',   keys: ['pickuptime'] }
+  { id: 'started', label: 'Started', keys: ['starttime'] },
+  { id: 'arrived', label: 'Arrived', keys: ['arrivaltime'] },
+  { id: 'pickup', label: 'Pickup', keys: ['pickuptime'] }
 ];
 
 const getTimeFieldValue = (r, fieldId) => {
@@ -430,11 +431,11 @@ const formatTimeOnly = (t) => {
 // Each row only renders when the corresponding API field is populated, so the
 // timeline visually shrinks for orders that haven't reached later stages yet.
 const POPUP_TIMELINE = [
-  { key: 'assigntime',   label: 'Assigned' },
+  { key: 'assigntime', label: 'Assigned' },
   { key: 'acceptedtime', label: 'Accepted' },
-  { key: 'arrivaltime',  label: 'Arrived' },
-  { key: 'pickuptime',   label: 'Pickup' },
-  { key: 'starttime',    label: 'Started' },
+  { key: 'arrivaltime', label: 'Arrived' },
+  { key: 'pickuptime', label: 'Pickup' },
+  { key: 'starttime', label: 'Started' },
   { key: 'deliverytime', label: 'Delivered', final: true }
 ];
 
@@ -709,11 +710,11 @@ const Dispatch = ({
   // marker; clicking the marker again unpins it. Stored in a ref because this
   // only drives imperative leaflet calls — no re-render needed.
   const pinnedPopupsRef = useRef(new Set());
-  // Short-lived close timer for the Compare drop-pin popup. Gives the
-  // cursor a ~120ms window to travel from the marker onto the popup
-  // without firing mouseout → closePopup mid-transit. Any new mouseover
-  // cancels a pending close, so the popup glides instead of flickering.
-  const compareHoverTimerRef = useRef(null);
+  // Short-lived close timer for the general map order/marker popups.
+  // Gives the cursor a ~200ms window to travel from the marker onto the popup
+  // or vice versa without immediately triggering a close.
+  const activePopupMarkerRef = useRef(null);
+  const popupHoverTimerRef = useRef(null);
   const isControlled = selectedRiderId !== undefined;
   const [clock, setClock] = useState('');
 
@@ -898,6 +899,7 @@ const Dispatch = ({
   }, [appLocations, selectedAppLocationId]);
 
   const handleLocationPick = (id) => {
+    logger.info('Switching hub/location ID:', id);
     setSelectedAppLocationId(Number(id));
     setLocationMenuOpen(false);
     if (typeof window !== 'undefined') {
@@ -1383,6 +1385,53 @@ const Dispatch = ({
     [isControlled, onRiderSelect]
   );
 
+  // ─── Logger Effects for Rider & Order Updates ───────────────────────
+
+  // Log when the active focused rider changes (uncontrolled click or controlled prop change)
+  const prevFocusedRiderIdRef = useRef(null);
+  useEffect(() => {
+    const activeId = focusedRider ? focusedRider.id : null;
+    if (activeId !== prevFocusedRiderIdRef.current) {
+      if (focusedRider) {
+        logger.info(`Focused rider changed to: ${focusedRider.riderName} (${focusedRider.orders.length} orders)`);
+      } else {
+        logger.info('Focused rider reset to: None');
+      }
+      prevFocusedRiderIdRef.current = activeId;
+    }
+  }, [focusedRider]);
+
+  // Log when selected focused stop (individual order) changes
+  useEffect(() => {
+    if (focusedStop) {
+      logger.info(`Focused order updated: ID ${focusedStop.orderid}`);
+    } else {
+      logger.debug('Focused order selection cleared');
+    }
+  }, [focusedStop]);
+
+  // Log when periodic query refetch completes and updates the overall orders list
+  const prevOrdersCountRef = useRef(0);
+  useEffect(() => {
+    if (allOrders) {
+      if (allOrders.length !== prevOrdersCountRef.current) {
+        logger.info(`Orders database updated: ${allOrders.length} orders actively tracked`);
+        prevOrdersCountRef.current = allOrders.length;
+      }
+    }
+  }, [allOrders]);
+
+  // Log when periodic query refetch completes and updates the live rider locations
+  const prevRidersCountRef = useRef(0);
+  useEffect(() => {
+    if (liveRiderLocations) {
+      if (liveRiderLocations.length !== prevRidersCountRef.current) {
+        logger.info(`Live riders list updated: ${liveRiderLocations.length} active riders mapped`);
+        prevRidersCountRef.current = liveRiderLocations.length;
+      }
+    }
+  }, [liveRiderLocations]);
+
   const activeStats = useMemo(() => {
     if (focusedRider) {
       return {
@@ -1985,19 +2034,19 @@ const Dispatch = ({
           const stepSegs = roadPath
             ? splitPolylineByDrops(roadPath, dropCoords)
             : (() => {
-                const hasPickup = aerialPath.length > dropCoords.length;
-                const out = [];
-                for (let i = 0; i < dropCoords.length; i++) {
-                  const a = hasPickup ? i : i - 1;
-                  const b = hasPickup ? i + 1 : i;
-                  if (a < 0 || a >= aerialPath.length || b >= aerialPath.length) {
-                    out.push([]);
-                  } else {
-                    out.push([aerialPath[a], aerialPath[b]]);
-                  }
+              const hasPickup = aerialPath.length > dropCoords.length;
+              const out = [];
+              for (let i = 0; i < dropCoords.length; i++) {
+                const a = hasPickup ? i : i - 1;
+                const b = hasPickup ? i + 1 : i;
+                if (a < 0 || a >= aerialPath.length || b >= aerialPath.length) {
+                  out.push([]);
+                } else {
+                  out.push([aerialPath[a], aerialPath[b]]);
                 }
-                return out;
-              })();
+              }
+              return out;
+            })();
           // Map each path index → step index by accumulating segment lengths
           // (segments share endpoints so we use length-1 per segment).
           const pathIdxToStepIdx = [];
@@ -2127,8 +2176,44 @@ const Dispatch = ({
   // chips — operators learn the layout once and trust it everywhere.
   const renderOrderPopupContent = (o) => {
     const statusStyle = getStatusStyle(o.orderstatus);
+
+    const isPinned = () => {
+      if (pinnedPopupsRef.current.has(String(o.orderid))) return true;
+      if (compareOpen && focusedRider && o.deliveryid != null) {
+        const track = riderActualTracks.find((t) => String(t.deliveryid) === String(o.deliveryid));
+        if (track && focusedCompareStep === track.sequenceStep) return true;
+      }
+      return false;
+    };
+
+    const handleMouseEnter = () => {
+      if (popupHoverTimerRef.current) {
+        clearTimeout(popupHoverTimerRef.current);
+        popupHoverTimerRef.current = null;
+      }
+    };
+
+    const handleMouseLeave = () => {
+      if (isPinned()) return;
+
+      if (popupHoverTimerRef.current) {
+        clearTimeout(popupHoverTimerRef.current);
+      }
+      popupHoverTimerRef.current = setTimeout(() => {
+        if (activePopupMarkerRef.current) {
+          activePopupMarkerRef.current.closePopup();
+          activePopupMarkerRef.current = null;
+        }
+        popupHoverTimerRef.current = null;
+      }, 200);
+    };
+
     return (
-      <>
+      <div
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={{ height: '100%', width: '100%' }}
+      >
         <div className="pu-header">
           <div className="pu-header-top">
             <div className="pu-id">ORDER #{o.orderid}</div>
@@ -2234,7 +2319,7 @@ const Dispatch = ({
             )}
           </div>
         </div>
-      </>
+      </div>
     );
   };
 
@@ -2318,11 +2403,29 @@ const Dispatch = ({
             else delete orderMarkerRefs.current[String(o.orderid)];
           }}
           eventHandlers={{
-            mouseover: (e) => e.target.openPopup(),
-            mouseout: (e) => {
-              if (!pinnedPopupsRef.current.has(String(o.orderid))) {
-                e.target.closePopup();
+            mouseover: (e) => {
+              const marker = e.target;
+              if (popupHoverTimerRef.current) {
+                clearTimeout(popupHoverTimerRef.current);
+                popupHoverTimerRef.current = null;
               }
+              activePopupMarkerRef.current = marker;
+              marker.openPopup();
+            },
+            mouseout: (e) => {
+              const marker = e.target;
+              if (pinnedPopupsRef.current.has(String(o.orderid))) return;
+
+              if (popupHoverTimerRef.current) {
+                clearTimeout(popupHoverTimerRef.current);
+              }
+              popupHoverTimerRef.current = setTimeout(() => {
+                marker.closePopup();
+                if (activePopupMarkerRef.current === marker) {
+                  activePopupMarkerRef.current = null;
+                }
+                popupHoverTimerRef.current = null;
+              }, 200);
             },
             click: (e) => {
               const id = String(o.orderid);
@@ -2336,7 +2439,7 @@ const Dispatch = ({
             }
           }}
         >
-          <Popup maxWidth={520} minWidth={460} className="dispatch-popup" autoPan={false}>
+          <Popup maxWidth={520} minWidth={460} className="dispatch-popup" autoPan={true} autoPanPadding={[40, 40]}>
             {renderOrderPopupContent(o)}
           </Popup>
         </Marker>
@@ -2836,13 +2939,13 @@ const Dispatch = ({
       )}
 
       <div id="strat-row">
-        <button className={`sbt ${viewMode === 'kitchens' ? 'active' : ''}`} onClick={() => { setViewMode('kitchens'); handleRiderFocus(null); setFocusedKitchen(null); setFocusedZone(null); }}><span className="sbt-icon"><MdPlace /></span> By Location</button>
+        <button className={`sbt ${viewMode === 'kitchens' ? 'active' : ''}`} onClick={() => { logger.info('View mode changed: By Location'); setViewMode('kitchens'); handleRiderFocus(null); setFocusedKitchen(null); setFocusedZone(null); }}><span className="sbt-icon"><MdPlace /></span> By Location</button>
         <button
           className={`sbt ${viewMode === 'zones' ? 'active' : ''}`}
-          onClick={() => { setViewMode('zones'); handleRiderFocus(null); setFocusedKitchen(null); setFocusedZone(null); }}
+          onClick={() => { logger.info('View mode changed: By Zone'); setViewMode('zones'); handleRiderFocus(null); setFocusedKitchen(null); setFocusedZone(null); }}
         ><span className="sbt-icon"><MdMap /></span> By Zone</button>
-        <button className={`sbt ${viewMode === 'riders' ? 'active' : ''}`} onClick={() => { setViewMode('riders'); handleRiderFocus(null); setFocusedKitchen(null); setFocusedZone(null); }}><span className="sbt-icon"><MdDirectionsBike /></span> By Rider</button>
-        <button className={`sbt ${viewMode === 'all' ? 'active' : ''}`} onClick={() => { setViewMode('all'); handleRiderFocus(null); setFocusedKitchen(null); setFocusedZone(null); }}><span className="sbt-icon"><MdPublic /></span> All Routes</button>
+        <button className={`sbt ${viewMode === 'riders' ? 'active' : ''}`} onClick={() => { logger.info('View mode changed: By Rider'); setViewMode('riders'); handleRiderFocus(null); setFocusedKitchen(null); setFocusedZone(null); }}><span className="sbt-icon"><MdDirectionsBike /></span> By Rider</button>
+        <button className={`sbt ${viewMode === 'all' ? 'active' : ''}`} onClick={() => { logger.info('View mode changed: All Routes'); setViewMode('all'); handleRiderFocus(null); setFocusedKitchen(null); setFocusedZone(null); }}><span className="sbt-icon"><MdPublic /></span> All Routes</button>
         <button
           type="button"
           className={`sbt sbt-rider-info ${viewMode === 'rider-info' ? 'active' : ''}`}
@@ -3283,53 +3386,53 @@ const Dispatch = ({
           </div>
         </div>
       ) : (
-      <div id="body" className={`${sidebarCollapsed ? 'sidebar-collapsed' : ''} ${compareOpen ? 'compare-mode' : ''}`.trim()}>
-        <button
-          type="button"
-          className={`sidebar-toggle-tab${sidebarCollapsed ? ' is-collapsed' : ''}`}
-          onClick={() => setSidebarCollapsed((v) => !v)}
-          title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
-          aria-label={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
-        >
-          {sidebarCollapsed ? <MdChevronRight /> : <MdChevronLeft />}
-        </button>
-        <div id="sidebar">
-          {/* Sidebar header — replaces the top-bar meta line. Hidden when a specific
+        <div id="body" className={`${sidebarCollapsed ? 'sidebar-collapsed' : ''} ${compareOpen ? 'compare-mode' : ''}`.trim()}>
+          <button
+            type="button"
+            className={`sidebar-toggle-tab${sidebarCollapsed ? ' is-collapsed' : ''}`}
+            onClick={() => setSidebarCollapsed((v) => !v)}
+            title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
+            aria-label={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
+          >
+            {sidebarCollapsed ? <MdChevronRight /> : <MdChevronLeft />}
+          </button>
+          <div id="sidebar">
+            {/* Sidebar header — replaces the top-bar meta line. Hidden when a specific
               rider is focused, since the focused-rider view already shows that rider's
               stats prominently (name + Orders/Distance/Profit tiles). */}
-          {!focusedRider && (
-          <div className="sb-header">
-            <div className="sb-header-top">
-              <div className="sb-header-title">
-                <span className="sb-title-bar" aria-hidden="true" />
-                <span className="sb-title-text">RIDER DISPATCH</span>
-              </div>
-              <span className="sb-header-scope" title={activeStats.label}>
-                <span className="sb-scope-dot" />
-                {activeStats.label}
-              </span>
-            </div>
+            {!focusedRider && (
+              <div className="sb-header">
+                <div className="sb-header-top">
+                  <div className="sb-header-title">
+                    <span className="sb-title-bar" aria-hidden="true" />
+                    <span className="sb-title-text">RIDER DISPATCH</span>
+                  </div>
+                  <span className="sb-header-scope" title={activeStats.label}>
+                    <span className="sb-scope-dot" />
+                    {activeStats.label}
+                  </span>
+                </div>
 
-            <div className="sb-header-tiles">
-              <div className="sb-tile sb-tile-orders">
-                <span className="sb-tile-icon"><MdInventory2 /></span>
-                <div className="sb-tile-body">
-                  <div className="sb-tile-value">{activeStats.orders}</div>
-                  <div className="sb-tile-label">{activeStats.orders === 1 ? 'Order' : 'Orders'}</div>
+                <div className="sb-header-tiles">
+                  <div className="sb-tile sb-tile-orders">
+                    <span className="sb-tile-icon"><MdInventory2 /></span>
+                    <div className="sb-tile-body">
+                      <div className="sb-tile-value">{activeStats.orders}</div>
+                      <div className="sb-tile-label">{activeStats.orders === 1 ? 'Order' : 'Orders'}</div>
+                    </div>
+                  </div>
+                  <div className="sb-tile sb-tile-riders">
+                    <span className="sb-tile-icon"><MdTwoWheeler /></span>
+                    <div className="sb-tile-body">
+                      <div className="sb-tile-value">{activeStats.riders}</div>
+                      <div className="sb-tile-label">{activeStats.riders === 1 ? 'Rider' : 'Riders'}</div>
+                    </div>
+                  </div>
                 </div>
               </div>
-              <div className="sb-tile sb-tile-riders">
-                <span className="sb-tile-icon"><MdTwoWheeler /></span>
-                <div className="sb-tile-body">
-                  <div className="sb-tile-value">{activeStats.riders}</div>
-                  <div className="sb-tile-label">{activeStats.riders === 1 ? 'Rider' : 'Riders'}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          )}
+            )}
 
-          {/* Stats strip hidden for now — restore by removing this comment wrapper.
+            {/* Stats strip hidden for now — restore by removing this comment wrapper.
           <div id="stats-strip">
             <div className="sc"><div className="sc-lbl">Orders</div><div className="sc-val g">{activeStats.orders}</div><div className="sc-sub">{activeStats.label}</div></div>
             <div className="sc"><div className="sc-lbl">Riders</div><div className="sc-val">{activeStats.riders}</div><div className="sc-sub">Active</div></div>
@@ -3338,640 +3441,640 @@ const Dispatch = ({
           </div>
           */}
 
-          {(focusedRider || focusedKitchen) ? (
-            <div id="route-detail">
-              <button className="rd-back" onClick={() => { handleRiderFocus(null); setFocusedKitchen(null); }}>← Back to {focusedZone ? focusedZone.name : 'list'}</button>
-              {focusedRider ? (
-                <>
-                  <div className="rd-rider-name" style={{ color: focusedRider.color }}>{focusedRider.riderName}</div>
-                  {(() => {
-                    const totalKm = focusedRider.orders.reduce((s, o) => s + parseFloat(o.actualkms || o.kms || 0), 0);
-                    const totalProfit = focusedRider.orders.reduce((s, o) => s + parseFloat(o.profit || 0), 0);
-                    const isLoss = totalProfit < 0;
-                    return (
-                      <div className="rd-stats-grid">
-                        <div className="rd-stat rd-stat-orders">
-                          <div className="rd-stat-icon"><MdInventory2 /></div>
-                          <div className="rd-stat-value">{focusedRider.orders.length}</div>
-                          <div className="rd-stat-label">Orders</div>
-                        </div>
-                        <div className="rd-stat rd-stat-distance">
-                          <div className="rd-stat-icon"><MdStraighten /></div>
-                          <div className="rd-stat-value">{totalKm.toFixed(1)}<span className="rd-stat-unit">km</span></div>
-                          <div className="rd-stat-label">Distance</div>
-                        </div>
-                        <div className={`rd-stat rd-stat-profit ${isLoss ? 'is-loss' : 'is-gain'}`}>
-                          <div className="rd-stat-icon">{isLoss ? <MdTrendingDown /> : <MdTrendingUp />}</div>
-                          <div className="rd-stat-value">
-                            {isLoss ? '-' : ''}₹{Math.abs(totalProfit).toFixed(0)}
+            {(focusedRider || focusedKitchen) ? (
+              <div id="route-detail">
+                <button className="rd-back" onClick={() => { handleRiderFocus(null); setFocusedKitchen(null); }}>← Back to {focusedZone ? focusedZone.name : 'list'}</button>
+                {focusedRider ? (
+                  <>
+                    <div className="rd-rider-name" style={{ color: focusedRider.color }}>{focusedRider.riderName}</div>
+                    {(() => {
+                      const totalKm = focusedRider.orders.reduce((s, o) => s + parseFloat(o.actualkms || o.kms || 0), 0);
+                      const totalProfit = focusedRider.orders.reduce((s, o) => s + parseFloat(o.profit || 0), 0);
+                      const isLoss = totalProfit < 0;
+                      return (
+                        <div className="rd-stats-grid">
+                          <div className="rd-stat rd-stat-orders">
+                            <div className="rd-stat-icon"><MdInventory2 /></div>
+                            <div className="rd-stat-value">{focusedRider.orders.length}</div>
+                            <div className="rd-stat-label">Orders</div>
+                          </div>
+                          <div className="rd-stat rd-stat-distance">
+                            <div className="rd-stat-icon"><MdStraighten /></div>
+                            <div className="rd-stat-value">{totalKm.toFixed(1)}<span className="rd-stat-unit">km</span></div>
+                            <div className="rd-stat-label">Distance</div>
+                          </div>
+                          <div className={`rd-stat rd-stat-profit ${isLoss ? 'is-loss' : 'is-gain'}`}>
+                            <div className="rd-stat-icon">{isLoss ? <MdTrendingDown /> : <MdTrendingUp />}</div>
+                            <div className="rd-stat-value">
+                              {isLoss ? '-' : ''}₹{Math.abs(totalProfit).toFixed(0)}
+                            </div>
+                            <div className="rd-stat-label">{isLoss ? 'Loss' : 'Profit'}</div>
                           </div>
-                          <div className="rd-stat-label">{isLoss ? 'Loss' : 'Profit'}</div>
-                        </div>
-                      </div>
-                    );
-                  })()}
-                  {(() => {
-                    const trips = {};
-                    focusedRider.orders.forEach(o => {
-                      const t = o.trip_number || 1;
-                      if (!trips[t]) trips[t] = [];
-                      trips[t].push(o);
-                    });
-                    // Identify the rider's currently-going-on order — first non-final,
-                    // non-skipped stop in (trip, step) order. Highlighted in light green
-                    // so users see at a glance which delivery is in progress.
-                    const sortedAll = [...focusedRider.orders].sort((a, b) => {
-                      const tA = a.trip_number || 1;
-                      const tB = b.trip_number || 1;
-                      if (tA !== tB) return tA - tB;
-                      return (a.step || 0) - (b.step || 0);
-                    });
-                    const activeOrder = sortedAll.find((o) => {
-                      const s = String(o.orderstatus || '').toLowerCase();
-                      return !FINAL_STATUSES.has(s) && !SKIPPED_STATUSES.has(s);
-                    });
-                    const activeOrderId = activeOrder ? activeOrder.orderid : null;
-                    let prevKitchenKey = null;
-                    return Object.entries(trips)
-                      .sort(([a], [b]) => Number(a) - Number(b))
-                      .map(([tNum, tOrders]) => (
-                      <div key={tNum} className="trip-block">
-                        <div className="trip-header" style={{ background: `${focusedRider.color}12`, borderColor: `${focusedRider.color}30` }}>
-                          <span className="th-badge" style={{ background: focusedRider.color }}>Trip {tNum}</span>
-                          <span className="trip-stats">
-                            <span><Ico><MdLocationOn /></Ico>{tOrders.length} stops</span>
-                            <span><Ico><MdStraighten /></Ico>{tOrders.reduce((s, o) => s + parseFloat(o.actualkms || o.kms || 0), 0).toFixed(1)} km</span>
-                          </span>
                         </div>
+                      );
+                    })()}
+                    {(() => {
+                      const trips = {};
+                      focusedRider.orders.forEach(o => {
+                        const t = o.trip_number || 1;
+                        if (!trips[t]) trips[t] = [];
+                        trips[t].push(o);
+                      });
+                      // Identify the rider's currently-going-on order — first non-final,
+                      // non-skipped stop in (trip, step) order. Highlighted in light green
+                      // so users see at a glance which delivery is in progress.
+                      const sortedAll = [...focusedRider.orders].sort((a, b) => {
+                        const tA = a.trip_number || 1;
+                        const tB = b.trip_number || 1;
+                        if (tA !== tB) return tA - tB;
+                        return (a.step || 0) - (b.step || 0);
+                      });
+                      const activeOrder = sortedAll.find((o) => {
+                        const s = String(o.orderstatus || '').toLowerCase();
+                        return !FINAL_STATUSES.has(s) && !SKIPPED_STATUSES.has(s);
+                      });
+                      const activeOrderId = activeOrder ? activeOrder.orderid : null;
+                      let prevKitchenKey = null;
+                      return Object.entries(trips)
+                        .sort(([a], [b]) => Number(a) - Number(b))
+                        .map(([tNum, tOrders]) => (
+                          <div key={tNum} className="trip-block">
+                            <div className="trip-header" style={{ background: `${focusedRider.color}12`, borderColor: `${focusedRider.color}30` }}>
+                              <span className="th-badge" style={{ background: focusedRider.color }}>Trip {tNum}</span>
+                              <span className="trip-stats">
+                                <span><Ico><MdLocationOn /></Ico>{tOrders.length} stops</span>
+                                <span><Ico><MdStraighten /></Ico>{tOrders.reduce((s, o) => s + parseFloat(o.actualkms || o.kms || 0), 0).toFixed(1)} km</span>
+                              </span>
+                            </div>
+                            <div className="zone-order-grid">
+                              {tOrders.map((o, idx) => {
+                                const kitchenKey = (o.kitchen_key || o.pickupcustomer || 'Unknown').toLowerCase().trim();
+                                const showTransition = prevKitchenKey !== null && kitchenKey !== prevKitchenKey;
+                                prevKitchenKey = kitchenKey;
+                                const isStopActive = focusedStop && focusedStop.orderid === o.orderid;
+                                const isGoingOn = activeOrderId && o.orderid === activeOrderId;
+                                const lat = parseFloat(o.droplat || o.deliverylat);
+                                const lon = parseFloat(o.droplon || o.deliverylong);
+                                const canFocus = Number.isFinite(lat) && Number.isFinite(lon);
+                                const statusStyle = getStatusStyle(o.orderstatus);
+                                const profit = parseFloat(o.profit || 0);
+                                const isLoss = profit < 0;
+                                return (
+                                  <React.Fragment key={o.orderid}>
+                                    {showTransition && (
+                                      <div className="kitchen-transition"><span className="kt-ico"><MdSwapHoriz /></span> Switch to <strong>{o.pickupcustomer}</strong></div>
+                                    )}
+                                    <div
+                                      className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''} ${isGoingOn ? 'going-on' : ''}`}
+                                      role={canFocus ? 'button' : undefined}
+                                      tabIndex={canFocus ? 0 : undefined}
+                                      onClick={canFocus ? () => setFocusedStop(isStopActive ? null : { orderid: o.orderid, lat, lon }) : undefined}
+                                      onKeyDown={canFocus ? (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                          e.preventDefault();
+                                          setFocusedStop(isStopActive ? null : { orderid: o.orderid, lat, lon });
+                                        }
+                                      } : undefined}
+                                      title={canFocus ? (isStopActive ? 'Click to show full trip' : `Show ${o.deliverycustomer || `order #${o.orderid}`} on map`) : undefined}
+                                    >
+                                      <div className="zone-order-card-head">
+                                        <div className="zone-order-num">{o.step || idx + 1}</div>
+                                        <div className="zone-order-id-block">
+                                          <div className="zone-order-id">Order #{o.orderid}</div>
+                                        </div>
+                                        {(() => {
+                                          // Stack the status pill and delivery time vertically on
+                                          // the right of the header so the operator sees the order
+                                          // outcome and the wall-clock time it landed at a glance.
+                                          const actual = formatTimeOnly(o.deliverytime);
+                                          const expected = formatTimeOnly(o.expecteddeliverytime);
+                                          if (!o.orderstatus && !actual && !expected) return null;
+                                          return (
+                                            <div className="zone-order-status-stack">
+                                              {o.orderstatus && (
+                                                <span
+                                                  className="zone-order-status"
+                                                  style={{ background: statusStyle.bg, color: statusStyle.fg }}
+                                                >
+                                                  {statusStyle.label}
+                                                </span>
+                                              )}
+                                              {(actual || expected) && (
+                                                <span
+                                                  className={`zone-order-time ${actual ? '' : 'is-expected'}`}
+                                                  title={actual ? `Delivered at ${actual}` : `Expected at ${expected}`}
+                                                >
+                                                  <MdAccessTime />{actual || expected}
+                                                </span>
+                                              )}
+                                            </div>
+                                          );
+                                        })()}
+                                      </div>
+
+                                      <div className="zone-order-customer">
+                                        <Ico><MdMarkunreadMailbox /></Ico>{o.deliverycustomer || '—'}
+                                      </div>
+
+                                      {o.pickupcustomer && (
+                                        <div className="zone-order-line" title={`Kitchen: ${o.pickupcustomer}`}>
+                                          <Ico><MdRestaurant /></Ico>{o.pickupcustomer}
+                                        </div>
+                                      )}
+                                      {(o.deliverysuburb || o.deliveryaddress) && (
+                                        <div className="zone-order-line" title={o.deliveryaddress || o.deliverysuburb}>
+                                          <Ico><MdLocationOn /></Ico>{o.deliverysuburb || extractArea(o.deliveryaddress)}
+                                        </div>
+                                      )}
+                                      {o.ordernotes && (
+                                        <div className="zone-order-line zone-order-notes" title={o.ordernotes}>
+                                          <Ico><MdNotes /></Ico>{o.ordernotes}
+                                        </div>
+                                      )}
+
+                                      <div className="zone-order-stats">
+                                        <span className="zone-order-chip" title="Distance">
+                                          <Ico><MdStraighten /></Ico>{o.actualkms || o.kms || 0} km
+                                        </span>
+                                        <span className={`zone-order-chip ${isLoss ? 'is-loss' : 'is-profit'}`} title="Profit">
+                                          <Ico><MdAccountBalanceWallet /></Ico>{isLoss ? '-' : ''}₹{Math.abs(profit).toFixed(0)}
+                                        </span>
+                                        {o.deliverycharge != null && (
+                                          <span className="zone-order-chip" title="Delivery charge">
+                                            ₹{parseFloat(o.deliverycharge).toFixed(0)} chg
+                                          </span>
+                                        )}
+                                        {o.ordertype && (
+                                          <span className={`zone-order-chip zone-order-type type-${String(o.ordertype).toLowerCase()}`}>
+                                            {o.ordertype}
+                                          </span>
+                                        )}
+                                        <span className="zone-order-chip zone-order-trip">
+                                          T{o.trip_number || tNum} · S{o.step || idx + 1}
+                                        </span>
+                                      </div>
+                                    </div>
+                                  </React.Fragment>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        ));
+                    })()}
+                  </>
+                ) : (
+                  <>
+                    <div className="rd-rider-name" style={{ color: '#f59e0b' }}>{focusedKitchen.kitchenName}</div>
+                    <div className="rd-rider-sub">
+                      <span><Ico><MdInventory2 /></Ico>{focusedKitchen.orders.length} orders</span>
+                      <span><Ico><MdTwoWheeler /></Ico>{focusedKitchen.riders.size} riders</span>
+                    </div>
+                    {/* Render the kitchen's orders with the same zone-order-card layout
+                      used by the focused-zone view, so By Location, By Zone, and By
+                      Rider all look consistent. Kitchen name is omitted from each
+                      card because the focused kitchen header already provides it. */}
+                    <div className="zone-detail-section">
+                      <div className="zone-section-label">Orders <span className="section-count">({focusedKitchen.orders.length})</span></div>
+                      {focusedKitchen.orders.length === 0 ? (
+                        <div className="zone-suburb-panel-empty">No orders for this kitchen.</div>
+                      ) : (
                         <div className="zone-order-grid">
-                          {tOrders.map((o, idx) => {
-                            const kitchenKey = (o.kitchen_key || o.pickupcustomer || 'Unknown').toLowerCase().trim();
-                            const showTransition = prevKitchenKey !== null && kitchenKey !== prevKitchenKey;
-                            prevKitchenKey = kitchenKey;
-                            const isStopActive = focusedStop && focusedStop.orderid === o.orderid;
-                            const isGoingOn = activeOrderId && o.orderid === activeOrderId;
+                          {focusedKitchen.orders.map((o, idx) => {
                             const lat = parseFloat(o.droplat || o.deliverylat);
                             const lon = parseFloat(o.droplon || o.deliverylong);
                             const canFocus = Number.isFinite(lat) && Number.isFinite(lon);
+                            const isStopActive = focusedStop && focusedStop.orderid === o.orderid;
                             const statusStyle = getStatusStyle(o.orderstatus);
                             const profit = parseFloat(o.profit || 0);
                             const isLoss = profit < 0;
                             return (
-                              <React.Fragment key={o.orderid}>
-                                {showTransition && (
-                                  <div className="kitchen-transition"><span className="kt-ico"><MdSwapHoriz /></span> Switch to <strong>{o.pickupcustomer}</strong></div>
-                                )}
-                                <div
-                                  className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''} ${isGoingOn ? 'going-on' : ''}`}
-                                  role={canFocus ? 'button' : undefined}
-                                  tabIndex={canFocus ? 0 : undefined}
-                                  onClick={canFocus ? () => setFocusedStop(isStopActive ? null : { orderid: o.orderid, lat, lon }) : undefined}
-                                  onKeyDown={canFocus ? (e) => {
-                                    if (e.key === 'Enter' || e.key === ' ') {
-                                      e.preventDefault();
-                                      setFocusedStop(isStopActive ? null : { orderid: o.orderid, lat, lon });
-                                    }
-                                  } : undefined}
-                                  title={canFocus ? (isStopActive ? 'Click to show full trip' : `Show ${o.deliverycustomer || `order #${o.orderid}`} on map`) : undefined}
-                                >
-                                  <div className="zone-order-card-head">
-                                    <div className="zone-order-num">{o.step || idx + 1}</div>
-                                    <div className="zone-order-id-block">
-                                      <div className="zone-order-id">Order #{o.orderid}</div>
+                              <div
+                                key={o.orderid}
+                                className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''}`}
+                                role={canFocus ? 'button' : undefined}
+                                tabIndex={canFocus ? 0 : undefined}
+                                onClick={canFocus ? () => setFocusedStop(isStopActive ? null : { orderid: o.orderid, lat, lon }) : undefined}
+                              >
+                                <div className="zone-order-card-head">
+                                  <div className="zone-order-num">{idx + 1}</div>
+                                  <div className="zone-order-id-block">
+                                    <div className="zone-order-id">Order #{o.orderid}</div>
+                                    <div className="zone-order-rider">
+                                      <Ico><MdTwoWheeler /></Ico>{o.rider_name || o.ridername || 'Unassigned'}
                                     </div>
-                                    {(() => {
-                                      // Stack the status pill and delivery time vertically on
-                                      // the right of the header so the operator sees the order
-                                      // outcome and the wall-clock time it landed at a glance.
-                                      const actual = formatTimeOnly(o.deliverytime);
-                                      const expected = formatTimeOnly(o.expecteddeliverytime);
-                                      if (!o.orderstatus && !actual && !expected) return null;
-                                      return (
-                                        <div className="zone-order-status-stack">
-                                          {o.orderstatus && (
-                                            <span
-                                              className="zone-order-status"
-                                              style={{ background: statusStyle.bg, color: statusStyle.fg }}
-                                            >
-                                              {statusStyle.label}
-                                            </span>
-                                          )}
-                                          {(actual || expected) && (
-                                            <span
-                                              className={`zone-order-time ${actual ? '' : 'is-expected'}`}
-                                              title={actual ? `Delivered at ${actual}` : `Expected at ${expected}`}
-                                            >
-                                              <MdAccessTime />{actual || expected}
-                                            </span>
-                                          )}
-                                        </div>
-                                      );
-                                    })()}
                                   </div>
-
-                                  <div className="zone-order-customer">
-                                    <Ico><MdMarkunreadMailbox /></Ico>{o.deliverycustomer || '—'}
-                                  </div>
-
-                                  {o.pickupcustomer && (
-                                    <div className="zone-order-line" title={`Kitchen: ${o.pickupcustomer}`}>
-                                      <Ico><MdRestaurant /></Ico>{o.pickupcustomer}
-                                    </div>
-                                  )}
-                                  {(o.deliverysuburb || o.deliveryaddress) && (
-                                    <div className="zone-order-line" title={o.deliveryaddress || o.deliverysuburb}>
-                                      <Ico><MdLocationOn /></Ico>{o.deliverysuburb || extractArea(o.deliveryaddress)}
-                                    </div>
-                                  )}
-                                  {o.ordernotes && (
-                                    <div className="zone-order-line zone-order-notes" title={o.ordernotes}>
-                                      <Ico><MdNotes /></Ico>{o.ordernotes}
-                                    </div>
-                                  )}
-
-                                  <div className="zone-order-stats">
-                                    <span className="zone-order-chip" title="Distance">
-                                      <Ico><MdStraighten /></Ico>{o.actualkms || o.kms || 0} km
+                                  {o.orderstatus && (
+                                    <span
+                                      className="zone-order-status"
+                                      style={{ background: statusStyle.bg, color: statusStyle.fg }}
+                                    >
+                                      {statusStyle.label}
                                     </span>
-                                    <span className={`zone-order-chip ${isLoss ? 'is-loss' : 'is-profit'}`} title="Profit">
-                                      <Ico><MdAccountBalanceWallet /></Ico>{isLoss ? '-' : ''}₹{Math.abs(profit).toFixed(0)}
-                                    </span>
-                                    {o.deliverycharge != null && (
-                                      <span className="zone-order-chip" title="Delivery charge">
-                                        ₹{parseFloat(o.deliverycharge).toFixed(0)} chg
-                                      </span>
-                                    )}
-                                    {o.ordertype && (
-                                      <span className={`zone-order-chip zone-order-type type-${String(o.ordertype).toLowerCase()}`}>
-                                        {o.ordertype}
-                                      </span>
-                                    )}
-                                    <span className="zone-order-chip zone-order-trip">
-                                      T{o.trip_number || tNum} · S{o.step || idx + 1}
-                                    </span>
-                                  </div>
+                                  )}
                                 </div>
-                              </React.Fragment>
+
+                                <div className="zone-order-customer">
+                                  <Ico><MdMarkunreadMailbox /></Ico>{o.deliverycustomer || '—'}
+                                </div>
+
+                                {(o.deliverysuburb || o.deliveryaddress) && (
+                                  <div className="zone-order-line" title={o.deliveryaddress || o.deliverysuburb}>
+                                    <Ico><MdLocationOn /></Ico>{o.deliverysuburb || extractArea(o.deliveryaddress)}
+                                  </div>
+                                )}
+                                {o.ordernotes && (
+                                  <div className="zone-order-line zone-order-notes" title={o.ordernotes}>
+                                    <Ico><MdNotes /></Ico>{o.ordernotes}
+                                  </div>
+                                )}
+
+                                <div className="zone-order-stats">
+                                  <span className="zone-order-chip" title="Distance">
+                                    <Ico><MdStraighten /></Ico>{o.actualkms || o.kms || 0} km
+                                  </span>
+                                  <span className={`zone-order-chip ${isLoss ? 'is-loss' : 'is-profit'}`} title="Profit">
+                                    <Ico><MdAccountBalanceWallet /></Ico>{isLoss ? '-' : ''}₹{Math.abs(profit).toFixed(0)}
+                                  </span>
+                                  {o.deliverycharge != null && (
+                                    <span className="zone-order-chip" title="Delivery charge">
+                                      ₹{parseFloat(o.deliverycharge).toFixed(0)} chg
+                                    </span>
+                                  )}
+                                  {o.ordertype && (
+                                    <span className={`zone-order-chip zone-order-type type-${String(o.ordertype).toLowerCase()}`}>
+                                      {o.ordertype}
+                                    </span>
+                                  )}
+                                  <span className="zone-order-chip zone-order-trip">
+                                    T{o.trip_number || '-'} · S{o.step || '-'}
+                                  </span>
+                                </div>
+                              </div>
                             );
                           })}
                         </div>
-                      </div>
-                    ));
-                  })()}
-                </>
-              ) : (
-                <>
-                  <div className="rd-rider-name" style={{ color: '#f59e0b' }}>{focusedKitchen.kitchenName}</div>
-                  <div className="rd-rider-sub">
-                    <span><Ico><MdInventory2 /></Ico>{focusedKitchen.orders.length} orders</span>
-                    <span><Ico><MdTwoWheeler /></Ico>{focusedKitchen.riders.size} riders</span>
-                  </div>
-                  {/* Render the kitchen's orders with the same zone-order-card layout
-                      used by the focused-zone view, so By Location, By Zone, and By
-                      Rider all look consistent. Kitchen name is omitted from each
-                      card because the focused kitchen header already provides it. */}
-                  <div className="zone-detail-section">
-                    <div className="zone-section-label">Orders <span className="section-count">({focusedKitchen.orders.length})</span></div>
-                    {focusedKitchen.orders.length === 0 ? (
-                      <div className="zone-suburb-panel-empty">No orders for this kitchen.</div>
-                    ) : (
-                      <div className="zone-order-grid">
-                        {focusedKitchen.orders.map((o, idx) => {
-                          const lat = parseFloat(o.droplat || o.deliverylat);
-                          const lon = parseFloat(o.droplon || o.deliverylong);
-                          const canFocus = Number.isFinite(lat) && Number.isFinite(lon);
-                          const isStopActive = focusedStop && focusedStop.orderid === o.orderid;
-                          const statusStyle = getStatusStyle(o.orderstatus);
-                          const profit = parseFloat(o.profit || 0);
-                          const isLoss = profit < 0;
-                          return (
-                            <div
-                              key={o.orderid}
-                              className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''}`}
-                              role={canFocus ? 'button' : undefined}
-                              tabIndex={canFocus ? 0 : undefined}
-                              onClick={canFocus ? () => setFocusedStop(isStopActive ? null : { orderid: o.orderid, lat, lon }) : undefined}
-                            >
-                              <div className="zone-order-card-head">
-                                <div className="zone-order-num">{idx + 1}</div>
-                                <div className="zone-order-id-block">
-                                  <div className="zone-order-id">Order #{o.orderid}</div>
-                                  <div className="zone-order-rider">
-                                    <Ico><MdTwoWheeler /></Ico>{o.rider_name || o.ridername || 'Unassigned'}
-                                  </div>
-                                </div>
-                                {o.orderstatus && (
-                                  <span
-                                    className="zone-order-status"
-                                    style={{ background: statusStyle.bg, color: statusStyle.fg }}
-                                  >
-                                    {statusStyle.label}
-                                  </span>
-                                )}
-                              </div>
-
-                              <div className="zone-order-customer">
-                                <Ico><MdMarkunreadMailbox /></Ico>{o.deliverycustomer || '—'}
-                              </div>
-
-                              {(o.deliverysuburb || o.deliveryaddress) && (
-                                <div className="zone-order-line" title={o.deliveryaddress || o.deliverysuburb}>
-                                  <Ico><MdLocationOn /></Ico>{o.deliverysuburb || extractArea(o.deliveryaddress)}
-                                </div>
-                              )}
-                              {o.ordernotes && (
-                                <div className="zone-order-line zone-order-notes" title={o.ordernotes}>
-                                  <Ico><MdNotes /></Ico>{o.ordernotes}
-                                </div>
-                              )}
-
-                              <div className="zone-order-stats">
-                                <span className="zone-order-chip" title="Distance">
-                                  <Ico><MdStraighten /></Ico>{o.actualkms || o.kms || 0} km
-                                </span>
-                                <span className={`zone-order-chip ${isLoss ? 'is-loss' : 'is-profit'}`} title="Profit">
-                                  <Ico><MdAccountBalanceWallet /></Ico>{isLoss ? '-' : ''}₹{Math.abs(profit).toFixed(0)}
-                                </span>
-                                {o.deliverycharge != null && (
-                                  <span className="zone-order-chip" title="Delivery charge">
-                                    ₹{parseFloat(o.deliverycharge).toFixed(0)} chg
-                                  </span>
-                                )}
-                                {o.ordertype && (
-                                  <span className={`zone-order-chip zone-order-type type-${String(o.ordertype).toLowerCase()}`}>
-                                    {o.ordertype}
-                                  </span>
-                                )}
-                                <span className="zone-order-chip zone-order-trip">
-                                  T{o.trip_number || '-'} · S{o.step || '-'}
-                                </span>
-                              </div>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-          ) : focusedZone ? (
-            <div id="route-detail">
-              <button className="rd-back" onClick={() => setFocusedZone(null)}>← Back to zones</button>
-              <div className="rd-rider-name" style={{ color: '#3b82f6' }}>{focusedZone.name}</div>
-              <div className="rd-rider-sub">
-                <span><Ico><MdInventory2 /></Ico>{focusedZone.totalOrders} {focusedZone.totalOrders === 1 ? 'order' : 'orders'}</span>
+                      )}
+                    </div>
+                  </>
+                )}
               </div>
+            ) : focusedZone ? (
+              <div id="route-detail">
+                <button className="rd-back" onClick={() => setFocusedZone(null)}>← Back to zones</button>
+                <div className="rd-rider-name" style={{ color: '#3b82f6' }}>{focusedZone.name}</div>
+                <div className="rd-rider-sub">
+                  <span><Ico><MdInventory2 /></Ico>{focusedZone.totalOrders} {focusedZone.totalOrders === 1 ? 'order' : 'orders'}</span>
+                </div>
 
-              <div className="zone-detail-section">
-                <div className="zone-section-label">Orders <span className="section-count">({focusedZone.orders.length})</span></div>
-                {focusedZone.orders.length === 0 ? (
-                  <div className="zone-suburb-panel-empty">No orders in this zone.</div>
-                ) : (
-                  <div className="zone-order-grid">
-                    {focusedZone.orders.map((o, idx) => {
-                      const lat = parseFloat(o.droplat || o.deliverylat);
-                      const lon = parseFloat(o.droplon || o.deliverylong);
-                      const canFocus = Number.isFinite(lat) && Number.isFinite(lon);
-                      const isStopActive = focusedStop && focusedStop.orderid === o.orderid;
-                      const statusStyle = getStatusStyle(o.orderstatus);
-                      const profit = parseFloat(o.profit || 0);
-                      const isLoss = profit < 0;
-                      return (
-                        <div
-                          key={o.orderid}
-                          className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''}`}
-                          role={canFocus ? 'button' : undefined}
-                          tabIndex={canFocus ? 0 : undefined}
-                          onClick={canFocus ? () => setFocusedStop(isStopActive ? null : { orderid: o.orderid, lat, lon }) : undefined}
-                        >
-                          <div className="zone-order-card-head">
-                            <div className="zone-order-num">
-                              {idx + 1}
-                            </div>
-                            <div className="zone-order-id-block">
-                              <div className="zone-order-id">Order #{o.orderid}</div>
-                              <div className="zone-order-rider">
-                                <Ico><MdTwoWheeler /></Ico>{o.rider_name || o.ridername || 'Unassigned'}
+                <div className="zone-detail-section">
+                  <div className="zone-section-label">Orders <span className="section-count">({focusedZone.orders.length})</span></div>
+                  {focusedZone.orders.length === 0 ? (
+                    <div className="zone-suburb-panel-empty">No orders in this zone.</div>
+                  ) : (
+                    <div className="zone-order-grid">
+                      {focusedZone.orders.map((o, idx) => {
+                        const lat = parseFloat(o.droplat || o.deliverylat);
+                        const lon = parseFloat(o.droplon || o.deliverylong);
+                        const canFocus = Number.isFinite(lat) && Number.isFinite(lon);
+                        const isStopActive = focusedStop && focusedStop.orderid === o.orderid;
+                        const statusStyle = getStatusStyle(o.orderstatus);
+                        const profit = parseFloat(o.profit || 0);
+                        const isLoss = profit < 0;
+                        return (
+                          <div
+                            key={o.orderid}
+                            className={`zone-order-card ${canFocus ? 'clickable' : ''} ${isStopActive ? 'active' : ''}`}
+                            role={canFocus ? 'button' : undefined}
+                            tabIndex={canFocus ? 0 : undefined}
+                            onClick={canFocus ? () => setFocusedStop(isStopActive ? null : { orderid: o.orderid, lat, lon }) : undefined}
+                          >
+                            <div className="zone-order-card-head">
+                              <div className="zone-order-num">
+                                {idx + 1}
                               </div>
+                              <div className="zone-order-id-block">
+                                <div className="zone-order-id">Order #{o.orderid}</div>
+                                <div className="zone-order-rider">
+                                  <Ico><MdTwoWheeler /></Ico>{o.rider_name || o.ridername || 'Unassigned'}
+                                </div>
+                              </div>
+                              {o.orderstatus && (
+                                <span
+                                  className="zone-order-status"
+                                  style={{ background: statusStyle.bg, color: statusStyle.fg }}
+                                >
+                                  {statusStyle.label}
+                                </span>
+                              )}
                             </div>
-                            {o.orderstatus && (
-                              <span
-                                className="zone-order-status"
-                                style={{ background: statusStyle.bg, color: statusStyle.fg }}
-                              >
-                                {statusStyle.label}
-                              </span>
+
+                            <div className="zone-order-customer">
+                              <Ico><MdMarkunreadMailbox /></Ico>{o.deliverycustomer || '—'}
+                            </div>
+
+                            {o.pickupcustomer && (
+                              <div className="zone-order-line" title={`Kitchen: ${o.pickupcustomer}`}>
+                                <Ico><MdRestaurant /></Ico>{o.pickupcustomer}
+                              </div>
                             )}
+                            {(o.deliverysuburb || o.deliveryaddress) && (
+                              <div className="zone-order-line" title={o.deliveryaddress || o.deliverysuburb}>
+                                <Ico><MdLocationOn /></Ico>{o.deliverysuburb || extractArea(o.deliveryaddress)}
+                              </div>
+                            )}
+                            {o.ordernotes && (
+                              <div className="zone-order-line zone-order-notes" title={o.ordernotes}>
+                                <Ico><MdNotes /></Ico>{o.ordernotes}
+                              </div>
+                            )}
+
+                            <div className="zone-order-stats">
+                              <span className="zone-order-chip" title="Distance">
+                                <Ico><MdStraighten /></Ico>{o.actualkms || o.kms || 0} km
+                              </span>
+                              <span className={`zone-order-chip ${isLoss ? 'is-loss' : 'is-profit'}`} title="Profit">
+                                <Ico><MdAccountBalanceWallet /></Ico>{isLoss ? '-' : ''}₹{Math.abs(profit).toFixed(0)}
+                              </span>
+                              {o.deliverycharge != null && (
+                                <span className="zone-order-chip" title="Delivery charge">
+                                  ₹{parseFloat(o.deliverycharge).toFixed(0)} chg
+                                </span>
+                              )}
+                              {o.ordertype && (
+                                <span className={`zone-order-chip zone-order-type type-${String(o.ordertype).toLowerCase()}`}>
+                                  {o.ordertype}
+                                </span>
+                              )}
+                              <span className="zone-order-chip zone-order-trip">
+                                T{o.trip_number || '-'} · S{o.step || '-'}
+                              </span>
+                            </div>
                           </div>
+                        );
+                      })}
+                    </div>
+                  )}
 
-                          <div className="zone-order-customer">
-                            <Ico><MdMarkunreadMailbox /></Ico>{o.deliverycustomer || '—'}
+                </div>
+              </div>
+            ) : (
+              <div id="riders-panel">
+                <div className="ph">{
+                  viewMode === 'zones' ? 'Zone dispatch' :
+                    viewMode === 'kitchens' ? 'Kitchen dispatch' :
+                      'Rider dispatch'
+                }</div>
+                <div id="rider-cards">
+                  {allOrders.length === 0 && !liveIsFetching ? (
+                    (() => {
+                      const slotLabel = BATCHES.find(b => b.id === selectedBatch)?.label;
+                      const hasDayData = shouldFetchLive && liveRows.length > 0;
+                      return (
+                        <div className="empty-slot">
+                          <div className="empty-slot-icon">
+                            <MdInventory2 />
                           </div>
-
-                          {o.pickupcustomer && (
-                            <div className="zone-order-line" title={`Kitchen: ${o.pickupcustomer}`}>
-                              <Ico><MdRestaurant /></Ico>{o.pickupcustomer}
-                            </div>
-                          )}
-                          {(o.deliverysuburb || o.deliveryaddress) && (
-                            <div className="zone-order-line" title={o.deliveryaddress || o.deliverysuburb}>
-                              <Ico><MdLocationOn /></Ico>{o.deliverysuburb || extractArea(o.deliveryaddress)}
-                            </div>
-                          )}
-                          {o.ordernotes && (
-                            <div className="zone-order-line zone-order-notes" title={o.ordernotes}>
-                              <Ico><MdNotes /></Ico>{o.ordernotes}
-                            </div>
-                          )}
-
-                          <div className="zone-order-stats">
-                            <span className="zone-order-chip" title="Distance">
-                              <Ico><MdStraighten /></Ico>{o.actualkms || o.kms || 0} km
-                            </span>
-                            <span className={`zone-order-chip ${isLoss ? 'is-loss' : 'is-profit'}`} title="Profit">
-                              <Ico><MdAccountBalanceWallet /></Ico>{isLoss ? '-' : ''}₹{Math.abs(profit).toFixed(0)}
-                            </span>
-                            {o.deliverycharge != null && (
-                              <span className="zone-order-chip" title="Delivery charge">
-                                ₹{parseFloat(o.deliverycharge).toFixed(0)} chg
-                              </span>
-                            )}
-                            {o.ordertype && (
-                              <span className={`zone-order-chip zone-order-type type-${String(o.ordertype).toLowerCase()}`}>
-                                {o.ordertype}
-                              </span>
-                            )}
-                            <span className="zone-order-chip zone-order-trip">
-                              T{o.trip_number || '-'} · S{o.step || '-'}
-                            </span>
+                          <div className="empty-slot-title">
+                            {slotLabel ? `No orders in ${slotLabel}` : 'No orders'}
+                          </div>
+                          <div className="empty-slot-sub">
+                            {hasDayData
+                              ? `${liveRows.length} order${liveRows.length === 1 ? '' : 's'} exist in other slots today`
+                              : 'No deliveries found for this date'}
                           </div>
                         </div>
                       );
-                    })}
-                  </div>
-                )}
-                
-              </div>
-            </div>
-          ) : (
-            <div id="riders-panel">
-              <div className="ph">{
-                viewMode === 'zones' ? 'Zone dispatch' :
-                viewMode === 'kitchens' ? 'Kitchen dispatch' :
-                'Rider dispatch'
-              }</div>
-              <div id="rider-cards">
-                {allOrders.length === 0 && !liveIsFetching ? (
-                  (() => {
-                    const slotLabel = BATCHES.find(b => b.id === selectedBatch)?.label;
-                    const hasDayData = shouldFetchLive && liveRows.length > 0;
-                    return (
-                      <div className="empty-slot">
-                        <div className="empty-slot-icon">
-                          <MdInventory2 />
-                        </div>
-                        <div className="empty-slot-title">
-                          {slotLabel ? `No orders in ${slotLabel}` : 'No orders'}
-                        </div>
-                        <div className="empty-slot-sub">
-                          {hasDayData
-                            ? `${liveRows.length} order${liveRows.length === 1 ? '' : 's'} exist in other slots today`
-                            : 'No deliveries found for this date'}
-                        </div>
-                      </div>
-                    );
-                  })()
-                ) : viewMode === 'zones' ? (
-                  zoneCards.map((z, i) => {
-                    const delivered = z.statusCounts.delivered || 0;
-                    const profitNeg = z.totalProfit < 0;
-                    return (
-                      <div key={z.id} className="rcard zone-card" onClick={() => setFocusedZone(z)} style={{ animationDelay: `${i * 0.05}s` }}>
-                        <div className="zone-card-header">
-                          <div className="zone-card-emoji"><MdMap /></div>
-                          <div className="zone-card-titles">
-                            <div className="zone-card-name">{z.name}</div>
-                            <div className="zone-card-sub">
-                              {z.activeRidersCount} {z.activeRidersCount === 1 ? 'rider' : 'riders'} · {z.totalOrders} {z.totalOrders === 1 ? 'order' : 'orders'}
+                    })()
+                  ) : viewMode === 'zones' ? (
+                    zoneCards.map((z, i) => {
+                      const delivered = z.statusCounts.delivered || 0;
+                      const profitNeg = z.totalProfit < 0;
+                      return (
+                        <div key={z.id} className="rcard zone-card" onClick={() => setFocusedZone(z)} style={{ animationDelay: `${i * 0.05}s` }}>
+                          <div className="zone-card-header">
+                            <div className="zone-card-emoji"><MdMap /></div>
+                            <div className="zone-card-titles">
+                              <div className="zone-card-name">{z.name}</div>
+                              <div className="zone-card-sub">
+                                {z.activeRidersCount} {z.activeRidersCount === 1 ? 'rider' : 'riders'} · {z.totalOrders} {z.totalOrders === 1 ? 'order' : 'orders'}
+                              </div>
                             </div>
+                            <span className="zone-card-arrow" aria-hidden="true">→</span>
                           </div>
-                          <span className="zone-card-arrow" aria-hidden="true">→</span>
-                        </div>
 
-                        {/* Status segments + delivered counter */}
-                        {z.totalOrders > 0 && (
-                          <div className="zone-progress-row">
-                            <div
-                              className="zone-status-bar"
-                              title={Object.entries(z.statusCounts)
-                                .map(([k, v]) => `${getStatusStyle(k).label}: ${v}`)
-                                .join(' · ')}
-                            >
-                              {Object.entries(z.statusCounts).map(([status, count]) => {
-                                const style = getStatusStyle(status);
-                                const pct = (count / z.totalOrders) * 100;
-                                return (
-                                  <div
-                                    key={status}
-                                    className="zone-status-seg"
-                                    style={{ width: `${pct}%`, background: style.bg }}
-                                  />
-                                );
-                              })}
+                          {/* Status segments + delivered counter */}
+                          {z.totalOrders > 0 && (
+                            <div className="zone-progress-row">
+                              <div
+                                className="zone-status-bar"
+                                title={Object.entries(z.statusCounts)
+                                  .map(([k, v]) => `${getStatusStyle(k).label}: ${v}`)
+                                  .join(' · ')}
+                              >
+                                {Object.entries(z.statusCounts).map(([status, count]) => {
+                                  const style = getStatusStyle(status);
+                                  const pct = (count / z.totalOrders) * 100;
+                                  return (
+                                    <div
+                                      key={status}
+                                      className="zone-status-seg"
+                                      style={{ width: `${pct}%`, background: style.bg }}
+                                    />
+                                  );
+                                })}
+                              </div>
+                              <div className="zone-progress-label">
+                                {delivered}/{z.totalOrders}
+                              </div>
                             </div>
-                            <div className="zone-progress-label">
-                              {delivered}/{z.totalOrders}
-                            </div>
-                          </div>
-                        )}
+                          )}
 
-                        {/* Stat pills */}
-                        <div className="zone-stat-pills">
-                          <span className="zone-stat-pill" title="Areas covered">
-                            <span className="zone-stat-icon"><MdLocationOn /></span>
-                            <span className="zone-stat-value">{z.suburbs.length}</span>
-                            <span className="zone-stat-label">{z.suburbs.length === 1 ? 'area' : 'areas'}</span>
-                          </span>
-                          <span className="zone-stat-pill" title="Total distance">
-                            <span className="zone-stat-icon"><MdStraighten /></span>
-                            <span className="zone-stat-value">{z.totalKms.toFixed(1)}</span>
-                            <span className="zone-stat-label">km</span>
-                          </span>
-                          <span className="zone-stat-pill" title="Kitchens">
-                            <span className="zone-stat-icon"><MdRestaurant /></span>
-                            <span className="zone-stat-value">{z.kitchens.length}</span>
-                            <span className="zone-stat-label">{z.kitchens.length === 1 ? 'kitchen' : 'kitchens'}</span>
-                          </span>
-                          <span className={`zone-stat-pill ${profitNeg ? 'profit-negative' : 'profit-positive'}`} title="Total profit">
-                            <span className="zone-stat-icon"><MdAccountBalanceWallet /></span>
-                            <span className="zone-stat-value">
-                              {profitNeg ? `-₹${Math.abs(z.totalProfit).toFixed(0)}` : `₹${z.totalProfit.toFixed(0)}`}
+                          {/* Stat pills */}
+                          <div className="zone-stat-pills">
+                            <span className="zone-stat-pill" title="Areas covered">
+                              <span className="zone-stat-icon"><MdLocationOn /></span>
+                              <span className="zone-stat-value">{z.suburbs.length}</span>
+                              <span className="zone-stat-label">{z.suburbs.length === 1 ? 'area' : 'areas'}</span>
                             </span>
-                          </span>
-                        </div>
-
-                        {z.suburbs.length > 0 && (
-                          <div className="zone-card-suburbs">
-                            <span className="zone-card-suburbs-text">
-                              {z.suburbs.slice(0, 3).map((s) => s.name).join(' · ')}
+                            <span className="zone-stat-pill" title="Total distance">
+                              <span className="zone-stat-icon"><MdStraighten /></span>
+                              <span className="zone-stat-value">{z.totalKms.toFixed(1)}</span>
+                              <span className="zone-stat-label">km</span>
+                            </span>
+                            <span className="zone-stat-pill" title="Kitchens">
+                              <span className="zone-stat-icon"><MdRestaurant /></span>
+                              <span className="zone-stat-value">{z.kitchens.length}</span>
+                              <span className="zone-stat-label">{z.kitchens.length === 1 ? 'kitchen' : 'kitchens'}</span>
+                            </span>
+                            <span className={`zone-stat-pill ${profitNeg ? 'profit-negative' : 'profit-positive'}`} title="Total profit">
+                              <span className="zone-stat-icon"><MdAccountBalanceWallet /></span>
+                              <span className="zone-stat-value">
+                                {profitNeg ? `-₹${Math.abs(z.totalProfit).toFixed(0)}` : `₹${z.totalProfit.toFixed(0)}`}
+                              </span>
                             </span>
-                            {z.suburbs.length > 3 && (
-                              <span className="zone-card-suburbs-more">+{z.suburbs.length - 3}</span>
-                            )}
                           </div>
-                        )}
-                      </div>
-                    );
-                  })
-                ) : viewMode === 'kitchens' ? (
-                  kitchens.map((k, i) => (
-                    <div key={k.id} className="rcard" onClick={() => setFocusedKitchen(k)} style={{ animationDelay: `${i * 0.05}s` }}>
-                      <div className="rcard-top">
-                        <div className="rcard-emo" style={{ background: '#f59e0b18', borderColor: '#f59e0b50', color: '#f59e0b' }}><MdRestaurant /></div>
-                        <div className="rcard-info">
-                          <div className="rcard-name">{k.kitchenName}</div>
-                          <div className="rcard-zone">{k.riders.size} riders · <Ico><MdAccountBalanceWallet /></Ico>₹{k.orders.reduce((s, o) => s + parseFloat(o.profit || 0), 0).toFixed(0)}</div>
-                        </div>
-                        <div className="rcard-badge" style={{ background: '#f59e0b18', color: '#f59e0b' }}>{k.orders.length}</div>
-                      </div>
-                      <div className="bar-bg"><div className="bar-fg" style={{ width: `${Math.min(100, (k.orders.length / 20) * 100)}%`, background: '#f59e0b' }}></div></div>
-                      <div className="rcard-meta"><span><Ico><MdStraighten /></Ico>{k.orders.reduce((s, o) => s + parseFloat(o.actualkms || o.kms || 0), 0).toFixed(1)} km</span><span>{k.riders.size} riders</span></div>
-                      <div className="step-ids">
-                        {Array.from(k.riders).slice(0, 10).map(rid => (
-                          <span key={rid} className="step-id" style={{ color: getRiderColor(rid) }}>{riders.find(r => r.id === rid)?.riderName.split(' ')[0]}</span>
-                        ))}
-                      </div>
-                    </div>
-                  ))
-                ) : (
-                  riders.map(renderRiderCard)
-                )}
-              </div>
-            </div>
-          )}
-        </div>
 
-        <div id="map-wrap" className={`${viewMode === 'kitchens' ? 'view-mode-kitchens' : ''} ${compareOpen ? 'compare-split' : ''}`.trim()}>
-          <MapContainer
-            center={[11.022, 76.982]}
-            zoom={12}
-            scrollWheelZoom
-            style={{ height: '100%', width: '100%' }}
-            zoomControl={false}
-            renderer={plannedMapRendererRef.current}
-            inertia
-            inertiaDeceleration={2400}
-            inertiaMaxSpeed={2000}
-            wheelDebounceTime={20}
-            wheelPxPerZoomLevel={80}
-            zoomSnap={0.25}
-          >
-            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='&copy; OpenStreetMap contributors' />
-            <ZoomControl position="bottomright" />
-            {compareOpen && <CaptureMap targetRef={leftMapRef} />}
-            <MapController focusedItem={compareFocusItem || ((focusedRider || focusedKitchen) && focusedStop) || focusedRider || focusedKitchen || focusedZone} viewMode={viewMode} orders={allOrders} kitchens={kitchens} locationKey={selectedAppLocationId} />
-            {kitchens
-              .filter(k => Number.isFinite(k.lat) && Number.isFinite(k.lon))
-              .filter(k => !focusedRider || k.riders.has(focusedRider.id))
-              .map((k, i) => (
-                <Marker
-                  key={`k-${i}`}
-                  position={[k.lat, k.lon]}
-                  icon={createKitchenIcon(k.kitchenName, focusedKitchen?.id === k.id)}
-                  zIndexOffset={focusedKitchen?.id === k.id ? 4000 : 2000}
-                  eventHandlers={{
-                    click: () => setFocusedKitchen(k),
-                    mouseover: (e) => e.target.openPopup(),
-                    mouseout: (e) => e.target.closePopup()
-                  }}
-                >
-                  <Popup className="kitchen-popup" maxWidth={220} minWidth={200} autoPan={false}>
-                    <div className="kp-header">KITCHEN</div>
-                    <div className="kp-name">{k.kitchenName}</div>
-                    <div className="kp-stat">
-                      <span className="kp-stat-lbl">Orders</span>
-                      <span className="kp-stat-val">{k.orders.length}</span>
-                    </div>
-                  </Popup>
-                </Marker>
-              ))
-            }
-            {renderMarkers()}
-            {renderRoutes()}
-            {!focusedKitchen && riderPositions
-              .filter(p => activeRiders.has(p.id))
-              .filter(p => !focusedRider || focusedRider.id === p.id)
-              .map(p => {
-                // Prefer the road polyline midpoint; fall back to aerial midpoint until OSRM responds.
-                const segPolyline = osrmRoutes[`${p.id}-seg-${p.nextStep}`];
-                const roadMid = polylineMidpoint(segPolyline);
-                const pos = roadMid || [p.aerialLat, p.aerialLon];
-                const onRoad = Boolean(roadMid);
-                const bikeIcon = L.divIcon({
-                  className: '',
-                  iconSize: [44, 44],
-                  iconAnchor: [22, 22],
-                  popupAnchor: [0, -22],
-                  html: `<div class="rider-bike${onRoad ? ' on-road' : ''}" style="--rider-color:${p.color}">
-                           <div class="rider-bike-ring"></div>
-                           <div class="rider-bike-svg">${MOTORBIKE_SVG}</div>
-                           <div class="rider-bike-progress">${p.completedCount}/${p.totalCount}</div>
-                         </div>`
-                });
-                return (
+                          {z.suburbs.length > 0 && (
+                            <div className="zone-card-suburbs">
+                              <span className="zone-card-suburbs-text">
+                                {z.suburbs.slice(0, 3).map((s) => s.name).join(' · ')}
+                              </span>
+                              {z.suburbs.length > 3 && (
+                                <span className="zone-card-suburbs-more">+{z.suburbs.length - 3}</span>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })
+                  ) : viewMode === 'kitchens' ? (
+                    kitchens.map((k, i) => (
+                      <div key={k.id} className="rcard" onClick={() => setFocusedKitchen(k)} style={{ animationDelay: `${i * 0.05}s` }}>
+                        <div className="rcard-top">
+                          <div className="rcard-emo" style={{ background: '#f59e0b18', borderColor: '#f59e0b50', color: '#f59e0b' }}><MdRestaurant /></div>
+                          <div className="rcard-info">
+                            <div className="rcard-name">{k.kitchenName}</div>
+                            <div className="rcard-zone">{k.riders.size} riders · <Ico><MdAccountBalanceWallet /></Ico>₹{k.orders.reduce((s, o) => s + parseFloat(o.profit || 0), 0).toFixed(0)}</div>
+                          </div>
+                          <div className="rcard-badge" style={{ background: '#f59e0b18', color: '#f59e0b' }}>{k.orders.length}</div>
+                        </div>
+                        <div className="bar-bg"><div className="bar-fg" style={{ width: `${Math.min(100, (k.orders.length / 20) * 100)}%`, background: '#f59e0b' }}></div></div>
+                        <div className="rcard-meta"><span><Ico><MdStraighten /></Ico>{k.orders.reduce((s, o) => s + parseFloat(o.actualkms || o.kms || 0), 0).toFixed(1)} km</span><span>{k.riders.size} riders</span></div>
+                        <div className="step-ids">
+                          {Array.from(k.riders).slice(0, 10).map(rid => (
+                            <span key={rid} className="step-id" style={{ color: getRiderColor(rid) }}>{riders.find(r => r.id === rid)?.riderName.split(' ')[0]}</span>
+                          ))}
+                        </div>
+                      </div>
+                    ))
+                  ) : (
+                    riders.map(renderRiderCard)
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div id="map-wrap" className={`${viewMode === 'kitchens' ? 'view-mode-kitchens' : ''} ${compareOpen ? 'compare-split' : ''}`.trim()}>
+            <MapContainer
+              center={[11.022, 76.982]}
+              zoom={12}
+              scrollWheelZoom
+              style={{ height: '100%', width: '100%' }}
+              zoomControl={false}
+              renderer={plannedMapRendererRef.current}
+              inertia
+              inertiaDeceleration={2400}
+              inertiaMaxSpeed={2000}
+              wheelDebounceTime={20}
+              wheelPxPerZoomLevel={80}
+              zoomSnap={0.25}
+            >
+              <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='&copy; OpenStreetMap contributors' />
+              <ZoomControl position="bottomright" />
+              {compareOpen && <CaptureMap targetRef={leftMapRef} />}
+              <MapController focusedItem={compareFocusItem || ((focusedRider || focusedKitchen) && focusedStop) || focusedRider || focusedKitchen || focusedZone} viewMode={viewMode} orders={allOrders} kitchens={kitchens} locationKey={selectedAppLocationId} />
+              {kitchens
+                .filter(k => Number.isFinite(k.lat) && Number.isFinite(k.lon))
+                .filter(k => !focusedRider || k.riders.has(focusedRider.id))
+                .map((k, i) => (
                   <Marker
-                    key={`bike-${p.id}`}
-                    position={pos}
-                    icon={bikeIcon}
-                    zIndexOffset={3000}
+                    key={`k-${i}`}
+                    position={[k.lat, k.lon]}
+                    icon={createKitchenIcon(k.kitchenName, focusedKitchen?.id === k.id)}
+                    zIndexOffset={focusedKitchen?.id === k.id ? 4000 : 2000}
                     eventHandlers={{
-                      click: () => handleRiderFocus(riders.find((r) => r.id === p.id) || null),
+                      click: () => setFocusedKitchen(k),
                       mouseover: (e) => e.target.openPopup(),
                       mouseout: (e) => e.target.closePopup()
                     }}
                   >
-                    <Popup maxWidth={240} autoPan={false} className="dispatch-popup route-rider-popup">
-                      <div className="pu-hdr-live">
-                        <div className="pu-hdr-left">
-                          <span className="pu-hdr-title">RIDER ROUTE</span>
-                        </div>
-                      </div>
-                      <div className="pu-rider-profile">
-                        <div className="pu-avatar" style={{ backgroundColor: `${p.color}12`, color: p.color }}>
-                          <MdDirectionsBike />
-                        </div>
-                        <div className="pu-rider-info-text">
-                          <div className="pu-rider-name" style={{ color: p.color }}>{p.riderName}</div>
-                          <div className="pu-rider-meta">Active route details</div>
-                        </div>
-                      </div>
-                      <div className="pu-body-content">
-                        <div className="pu-info-row">
-                          <span className="pu-info-label">Progress</span>
-                          <span className="pu-info-value">
-                            <strong>{p.completedCount}</strong> / {p.totalCount} delivered
-                          </span>
-                        </div>
-                        <div className="pu-info-row">
-                          <span className="pu-info-label">Next Stop</span>
-                          <span className="pu-info-value text-indigo" style={{ color: '#4f46e5' }}>
-                            #{p.nextStep} · {p.nextCustomer || '—'}
-                          </span>
-                        </div>
-                        <div className="pu-info-row">
-                          <span className="pu-info-label">Position</span>
-                          <span className="pu-info-value" style={{ color: '#64748b' }}>
-                            {onRoad ? 'On road' : 'Estimating…'}
-                          </span>
-                        </div>
+                    <Popup className="kitchen-popup" maxWidth={220} minWidth={200} autoPan={true} autoPanPadding={[20, 20]}>
+                      <div className="kp-header">KITCHEN</div>
+                      <div className="kp-name">{k.kitchenName}</div>
+                      <div className="kp-stat">
+                        <span className="kp-stat-lbl">Orders</span>
+                        <span className="kp-stat-val">{k.orders.length}</span>
                       </div>
                     </Popup>
                   </Marker>
-                );
-              })}
+                ))
+              }
+              {renderMarkers()}
+              {renderRoutes()}
+              {!focusedKitchen && riderPositions
+                .filter(p => activeRiders.has(p.id))
+                .filter(p => !focusedRider || focusedRider.id === p.id)
+                .map(p => {
+                  // Prefer the road polyline midpoint; fall back to aerial midpoint until OSRM responds.
+                  const segPolyline = osrmRoutes[`${p.id}-seg-${p.nextStep}`];
+                  const roadMid = polylineMidpoint(segPolyline);
+                  const pos = roadMid || [p.aerialLat, p.aerialLon];
+                  const onRoad = Boolean(roadMid);
+                  const bikeIcon = L.divIcon({
+                    className: '',
+                    iconSize: [44, 44],
+                    iconAnchor: [22, 22],
+                    popupAnchor: [0, -22],
+                    html: `<div class="rider-bike${onRoad ? ' on-road' : ''}" style="--rider-color:${p.color}">
+                           <div class="rider-bike-ring"></div>
+                           <div class="rider-bike-svg">${MOTORBIKE_SVG}</div>
+                           <div class="rider-bike-progress">${p.completedCount}/${p.totalCount}</div>
+                         </div>`
+                  });
+                  return (
+                    <Marker
+                      key={`bike-${p.id}`}
+                      position={pos}
+                      icon={bikeIcon}
+                      zIndexOffset={3000}
+                      eventHandlers={{
+                        click: () => handleRiderFocus(riders.find((r) => r.id === p.id) || null),
+                        mouseover: (e) => e.target.openPopup(),
+                        mouseout: (e) => e.target.closePopup()
+                      }}
+                    >
+                      <Popup maxWidth={240} autoPan={true} autoPanPadding={[20, 20]} className="dispatch-popup route-rider-popup">
+                        <div className="pu-hdr-live">
+                          <div className="pu-hdr-left">
+                            <span className="pu-hdr-title">RIDER ROUTE</span>
+                          </div>
+                        </div>
+                        <div className="pu-rider-profile">
+                          <div className="pu-avatar" style={{ backgroundColor: `${p.color}12`, color: p.color }}>
+                            <MdDirectionsBike />
+                          </div>
+                          <div className="pu-rider-info-text">
+                            <div className="pu-rider-name" style={{ color: p.color }}>{p.riderName}</div>
+                            <div className="pu-rider-meta">Active route details</div>
+                          </div>
+                        </div>
+                        <div className="pu-body-content">
+                          <div className="pu-info-row">
+                            <span className="pu-info-label">Progress</span>
+                            <span className="pu-info-value">
+                              <strong>{p.completedCount}</strong> / {p.totalCount} delivered
+                            </span>
+                          </div>
+                          <div className="pu-info-row">
+                            <span className="pu-info-label">Next Stop</span>
+                            <span className="pu-info-value text-indigo" style={{ color: '#4f46e5' }}>
+                              #{p.nextStep} · {p.nextCustomer || '—'}
+                            </span>
+                          </div>
+                          <div className="pu-info-row">
+                            <span className="pu-info-label">Position</span>
+                            <span className="pu-info-value" style={{ color: '#64748b' }}>
+                              {onRoad ? 'On road' : 'Estimating…'}
+                            </span>
+                          </div>
+                        </div>
+                      </Popup>
+                    </Marker>
+                  );
+                })}
 
-            {/* Live rider GPS markers from /partners/getriderlogs/. Mirrors the
+              {/* Live rider GPS markers from /partners/getriderlogs/. Mirrors the
                 Reports → Riders Logs map: green pin when the rider's last log
                 row is `active`, red otherwise, with the rider's username as a
                 label. Scoped to riders who actually have orders in the
@@ -3980,180 +4083,180 @@ const Dispatch = ({
                 rider with zero orders in the current slot is hidden, even if
                 getriderlogs still returns their GPS row. When a specific
                 rider is focused, only that one is shown. */}
-            {liveRiderLocations
-              .filter((r) => riders.some((rd) => String(rd.id) === String(r.id)))
-              .filter((r) => !focusedRider || String(focusedRider.id) === String(r.id))
-              .map((r) => {
-                const isActive = r.status === 'active';
-                const pinColor = isActive ? '#16a34a' : '#dc2626';
-                const liveIcon = L.divIcon({
-                  className: '',
-                  iconSize: [140, 56],
-                  iconAnchor: [12, 41],
-                  popupAnchor: [58, -40],
-                  html: `<div class="live-rider-pin" style="--pin-color:${pinColor}">
+              {liveRiderLocations
+                .filter((r) => riders.some((rd) => String(rd.id) === String(r.id)))
+                .filter((r) => !focusedRider || String(focusedRider.id) === String(r.id))
+                .map((r) => {
+                  const isActive = r.status === 'active';
+                  const pinColor = isActive ? '#16a34a' : '#dc2626';
+                  const liveIcon = L.divIcon({
+                    className: '',
+                    iconSize: [140, 56],
+                    iconAnchor: [12, 41],
+                    popupAnchor: [58, -40],
+                    html: `<div class="live-rider-pin" style="--pin-color:${pinColor}">
                            <div class="live-rider-pin-marker"></div>
                            <div class="live-rider-pin-label">${(r.username || '').replace(/[<>&"']/g, '')}${r.orderid ? ` <span>#${String(r.orderid).replace(/[<>&"']/g, '')}</span>` : ''}</div>
                          </div>`
-                });
-                return (
-                  <Marker
-                    key={`live-${r.id}`}
-                    position={[r.lat, r.lon]}
-                    icon={liveIcon}
-                    zIndexOffset={2500}
-                    eventHandlers={{
-                      click: () => {
-                        const match = riders.find((rd) => String(rd.id) === String(r.id));
-                        if (match) handleRiderFocus(match);
-                      },
-                      mouseover: (e) => e.target.openPopup(),
-                      mouseout: (e) => e.target.closePopup()
-                    }}
-                  >
-                    <Popup maxWidth={260} autoPan={false} className="dispatch-popup live-rider-popup">
-                      <div className="pu-hdr-live">
-                        <div className="pu-hdr-left">
-                          <span className="pu-live-indicator" style={{ '--pulse-color': pinColor }}>
-                            <span className="pu-live-dot"></span>
-                          </span>
-                          <span className="pu-hdr-title">LIVE GPS</span>
-                        </div>
-                        {r.status && (
-                          <span className={`pu-status-badge ${r.status.toLowerCase() === 'active' ? 'active' : 'idle'}`}>
-                            {r.status}
-                          </span>
-                        )}
-                      </div>
-                      <div className="pu-rider-profile">
-                        <div className="pu-avatar" style={{ backgroundColor: `${pinColor}12`, color: pinColor }}>
-                          <MdDirectionsBike />
-                        </div>
-                        <div className="pu-rider-info-text">
-                          <div className="pu-rider-name">{r.username || `Rider #${r.id}`}</div>
-                          <div className="pu-rider-meta">Rider ID: #{r.id}</div>
-                        </div>
-                      </div>
-                      <div className="pu-body-content">
-                        {r.orderid && (
-                          <div className="pu-info-row">
-                            <span className="pu-info-label">Active Order</span>
-                            <span className="pu-info-value pu-order-badge">#{r.orderid}</span>
+                  });
+                  return (
+                    <Marker
+                      key={`live-${r.id}`}
+                      position={[r.lat, r.lon]}
+                      icon={liveIcon}
+                      zIndexOffset={2500}
+                      eventHandlers={{
+                        click: () => {
+                          const match = riders.find((rd) => String(rd.id) === String(r.id));
+                          if (match) handleRiderFocus(match);
+                        },
+                        mouseover: (e) => e.target.openPopup(),
+                        mouseout: (e) => e.target.closePopup()
+                      }}
+                    >
+                      <Popup maxWidth={260} autoPan={true} autoPanPadding={[20, 20]} className="dispatch-popup live-rider-popup">
+                        <div className="pu-hdr-live">
+                          <div className="pu-hdr-left">
+                            <span className="pu-live-indicator" style={{ '--pulse-color': pinColor }}>
+                              <span className="pu-live-dot"></span>
+                            </span>
+                            <span className="pu-hdr-title">LIVE GPS</span>
                           </div>
-                        )}
-                        {r.contactno && (
-                          <div className="pu-info-row">
-                            <span className="pu-info-label">Phone</span>
-                            <a href={`tel:${r.contactno}`} className="pu-info-value pu-phone-link">
-                              {r.contactno}
-                            </a>
+                          {r.status && (
+                            <span className={`pu-status-badge ${r.status.toLowerCase() === 'active' ? 'active' : 'idle'}`}>
+                              {r.status}
+                            </span>
+                          )}
+                        </div>
+                        <div className="pu-rider-profile">
+                          <div className="pu-avatar" style={{ backgroundColor: `${pinColor}12`, color: pinColor }}>
+                            <MdDirectionsBike />
                           </div>
-                        )}
-                        {r.logdate && (
+                          <div className="pu-rider-info-text">
+                            <div className="pu-rider-name">{r.username || `Rider #${r.id}`}</div>
+                            <div className="pu-rider-meta">Rider ID: #{r.id}</div>
+                          </div>
+                        </div>
+                        <div className="pu-body-content">
+                          {r.orderid && (
+                            <div className="pu-info-row">
+                              <span className="pu-info-label">Active Order</span>
+                              <span className="pu-info-value pu-order-badge">#{r.orderid}</span>
+                            </div>
+                          )}
+                          {r.contactno && (
+                            <div className="pu-info-row">
+                              <span className="pu-info-label">Phone</span>
+                              <a href={`tel:${r.contactno}`} className="pu-info-value pu-phone-link">
+                                {r.contactno}
+                              </a>
+                            </div>
+                          )}
+                          {r.logdate && (
+                            <div className="pu-info-row">
+                              <span className="pu-info-label">Last Seen</span>
+                              <span className="pu-info-value pu-time-stamp">
+                                <MdAccessTime className="inline-icon" />{' '}
+                                {dayjs(r.logdate).isValid() ? dayjs(r.logdate).format('hh:mm:ss A') : r.logdate}
+                              </span>
+                            </div>
+                          )}
                           <div className="pu-info-row">
-                            <span className="pu-info-label">Last Seen</span>
-                            <span className="pu-info-value pu-time-stamp">
-                              <MdAccessTime className="inline-icon" />{' '}
-                              {dayjs(r.logdate).isValid() ? dayjs(r.logdate).format('hh:mm:ss A') : r.logdate}
+                            <span className="pu-info-label">Position</span>
+                            <span className="pu-info-value pu-coordinates">
+                              {r.lat.toFixed(5)}, {r.lon.toFixed(5)}
                             </span>
                           </div>
-                        )}
-                        <div className="pu-info-row">
-                          <span className="pu-info-label">Position</span>
-                          <span className="pu-info-value pu-coordinates">
-                            {r.lat.toFixed(5)}, {r.lon.toFixed(5)}
-                          </span>
                         </div>
-                      </div>
-                    </Popup>
-                  </Marker>
-                );
-              })}
+                      </Popup>
+                    </Marker>
+                  );
+                })}
 
-            {/* Compare mode — actual GPS tracks for the focused rider, drawn
+              {/* Compare mode — actual GPS tracks for the focused rider, drawn
                 on the same MapContainer as the planned route. Gated by
                 compareViewMode so the segmented control on the map's top-left
                 can hide them ("Planned only") or hide the planned polylines
                 instead ("Actual only"). In Combined mode both render and the
                 planned polylines switch to a dashed stroke (see renderRoutes)
                 so the operator can read overlap at a glance. */}
-            {compareOpen && focusedRider && compareViewMode !== 'planned' && (riderActualTracks.map((t, i) => {
-              if (t.coords.length === 0) return null;
-              // `color` drives the drop pin, start pin, and tooltip header so
-              // those keep their per-step palette identity (the same colors
-              // the timeline uses). `polylineColor` is what the GPS line
-              // itself draws with — collapsed to a single emerald in Combined
-              // view so the actual layer reads as one cohesive trail next to
-              // the indigo planned rail; Actual-only mode keeps step palette
-              // on the polyline since there's no second layer to confuse with.
-              const color = stepColor(i);
-              const polylineColor = compareViewMode === 'combined'
-                ? COMBINED_ACTUAL_COLOR
-                : color;
-              const startPos = [t.coords[0].lat, t.coords[0].lng];
-              const endPos = [t.coords[t.coords.length - 1].lat, t.coords[t.coords.length - 1].lng];
-              const snapped = osrmTrackRoutes[t.deliveryid];
-              const hasRoad = Array.isArray(snapped) && snapped.length >= 2;
-              const fullPositions = hasRoad
-                ? snapped
-                : t.coords.map((p) => [p.lat, p.lng]);
+              {compareOpen && focusedRider && compareViewMode !== 'planned' && (riderActualTracks.map((t, i) => {
+                if (t.coords.length === 0) return null;
+                // `color` drives the drop pin, start pin, and tooltip header so
+                // those keep their per-step palette identity (the same colors
+                // the timeline uses). `polylineColor` is what the GPS line
+                // itself draws with — collapsed to a single emerald in Combined
+                // view so the actual layer reads as one cohesive trail next to
+                // the indigo planned rail; Actual-only mode keeps step palette
+                // on the polyline since there's no second layer to confuse with.
+                const color = stepColor(i);
+                const polylineColor = compareViewMode === 'combined'
+                  ? COMBINED_ACTUAL_COLOR
+                  : color;
+                const startPos = [t.coords[0].lat, t.coords[0].lng];
+                const endPos = [t.coords[t.coords.length - 1].lat, t.coords[t.coords.length - 1].lng];
+                const snapped = osrmTrackRoutes[t.deliveryid];
+                const hasRoad = Array.isArray(snapped) && snapped.length >= 2;
+                const fullPositions = hasRoad
+                  ? snapped
+                  : t.coords.map((p) => [p.lat, p.lng]);
 
-              let positions = fullPositions;
-              let drawPolyline = true;
-              if (isAnimating) {
-                const progress = animatedActualProgress[t.sequenceStep] || 0;
-                if (progress < 2) {
-                  drawPolyline = false;
-                } else {
-                  positions = fullPositions.slice(0, Math.min(progress, fullPositions.length));
+                let positions = fullPositions;
+                let drawPolyline = true;
+                if (isAnimating) {
+                  const progress = animatedActualProgress[t.sequenceStep] || 0;
+                  if (progress < 2) {
+                    drawPolyline = false;
+                  } else {
+                    positions = fullPositions.slice(0, Math.min(progress, fullPositions.length));
+                  }
                 }
-              }
 
-              const isFocusedStep = focusedCompareStep === t.sequenceStep;
-              const statusLow = String(t.orderstatus || '').toLowerCase();
-              const isDelivered = FINAL_STATUSES.has(statusLow);
-              const isSkipped = SKIPPED_STATUSES.has(statusLow);
-              const delta = compareDeltas.find((d) => d.sequenceStep === t.sequenceStep);
-              const isAnomaly = !!delta?.anomaly;
-              // Look up the corresponding order in the focused rider's set so
-              // the actual-track drop pin can render the same rich popup the
-              // planned-route number marker uses (Timeline, Details, KM chips).
-              // Matched by deliveryid since order.orderid is not in the track
-              // payload but deliveryid is the join key for /getdeliverylogs.
-              const orderForTrack = focusedRider?.orders?.find(
-                (o) => o.deliveryid != null && String(o.deliveryid) === String(t.deliveryid)
-              );
+                const isFocusedStep = focusedCompareStep === t.sequenceStep;
+                const statusLow = String(t.orderstatus || '').toLowerCase();
+                const isDelivered = FINAL_STATUSES.has(statusLow);
+                const isSkipped = SKIPPED_STATUSES.has(statusLow);
+                const delta = compareDeltas.find((d) => d.sequenceStep === t.sequenceStep);
+                const isAnomaly = !!delta?.anomaly;
+                // Look up the corresponding order in the focused rider's set so
+                // the actual-track drop pin can render the same rich popup the
+                // planned-route number marker uses (Timeline, Details, KM chips).
+                // Matched by deliveryid since order.orderid is not in the track
+                // payload but deliveryid is the join key for /getdeliverylogs.
+                const orderForTrack = focusedRider?.orders?.find(
+                  (o) => o.deliveryid != null && String(o.deliveryid) === String(t.deliveryid)
+                );
 
-              const dropClasses = ['compare-step-pin'];
-              if (isFocusedStep) dropClasses.push('is-focused');
-              if (isDelivered) dropClasses.push('is-delivered');
-              if (isSkipped) dropClasses.push('is-skipped');
-              if (isAnomaly) dropClasses.push('is-anomaly');
+                const dropClasses = ['compare-step-pin'];
+                if (isFocusedStep) dropClasses.push('is-focused');
+                if (isDelivered) dropClasses.push('is-delivered');
+                if (isSkipped) dropClasses.push('is-skipped');
+                if (isAnomaly) dropClasses.push('is-anomaly');
 
-              const dropPinHtml =
-                `<div class="${dropClasses.join(' ')}" style="--pin-color:${color}">` +
-                `<span class="compare-step-pin-num">${t.sequenceStep}</span>` +
-                (isDelivered
-                  ? '<svg class="compare-step-pin-check" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
+                const dropPinHtml =
+                  `<div class="${dropClasses.join(' ')}" style="--pin-color:${color}">` +
+                  `<span class="compare-step-pin-num">${t.sequenceStep}</span>` +
+                  (isDelivered
+                    ? '<svg class="compare-step-pin-check" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
                     '<path d="M2.5 6.5 L5 9 L9.5 3.5" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>' +
                     '</svg>'
-                  : '') +
-                '</div>';
-              const sequenceIcon = L.divIcon({
-                className: '',
-                iconSize: [36, 36],
-                iconAnchor: [18, 18],
-                // Lift the popup ~22px above the pin so its tip clears the
-                // marker icon. Without this the popup centers on the marker,
-                // its body overlaps the pin, and the cursor moves onto the
-                // popup → fires mouseout on the marker → popup snaps shut.
-                popupAnchor: [0, -22],
-                html: dropPinHtml
-              });
+                    : '') +
+                  '</div>';
+                const sequenceIcon = L.divIcon({
+                  className: '',
+                  iconSize: [36, 36],
+                  iconAnchor: [18, 18],
+                  // Lift the popup ~22px above the pin so its tip clears the
+                  // marker icon. Without this the popup centers on the marker,
+                  // its body overlaps the pin, and the cursor moves onto the
+                  // popup → fires mouseout on the marker → popup snaps shut.
+                  popupAnchor: [0, -22],
+                  html: dropPinHtml
+                });
 
-              const showStartMarker = t.sequenceStep === 1;
-              const startIconEl = showStartMarker
-                ? L.divIcon({
+                const showStartMarker = t.sequenceStep === 1;
+                const startIconEl = showStartMarker
+                  ? L.divIcon({
                     className: '',
                     iconSize: [40, 40],
                     iconAnchor: [20, 20],
@@ -4163,561 +4266,567 @@ const Dispatch = ({
                       '<path d="M19 6h-2c0-2.76-2.24-5-5-5S7 3.24 7 6H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-7-3c1.66 0 3 1.34 3 3H9c0-1.66 1.34-3 3-3zm0 10c-2.76 0-5-2.24-5-5h2c0 1.66 1.34 3 3 3s3-1.34 3-3h2c0 2.76-2.24 5-5 5z" fill="currentColor"/>' +
                       '</svg></div>'
                   })
-                : null;
+                  : null;
 
-              const handleStepClick = (e) => {
-                if (e.originalEvent) e.originalEvent.stopPropagation();
-                setFocusedCompareStep((prev) =>
-                  prev === t.sequenceStep ? null : t.sequenceStep
-                );
-              };
+                const handleStepClick = (e) => {
+                  if (e.originalEvent) e.originalEvent.stopPropagation();
+                  setFocusedCompareStep((prev) =>
+                    prev === t.sequenceStep ? null : t.sequenceStep
+                  );
+                };
 
-              // Drop pin click — toggles step focus AND opens the rich order
-              // popup, so the actual / combined view answers the same "tell me
-              // about this delivery" question the planned-route number marker
-              // answers. The pickup (start) pin keeps the focus-only handler;
-              // there's no per-delivery order modal attached to step 1's
-              // origin since it's the rider's pickup point, not the drop.
-              const handleEndMarkerClick = (e) => {
-                if (e.originalEvent) e.originalEvent.stopPropagation();
-                setFocusedCompareStep((prev) =>
-                  prev === t.sequenceStep ? null : t.sequenceStep
-                );
-                if (orderForTrack && e.target && typeof e.target.openPopup === 'function') {
-                  e.target.openPopup();
-                }
-              };
+                // Drop pin click — toggles step focus AND opens the rich order
+                // popup, so the actual / combined view answers the same "tell me
+                // about this delivery" question the planned-route number marker
+                // answers. The pickup (start) pin keeps the focus-only handler;
+                // there's no per-delivery order modal attached to step 1's
+                // origin since it's the rider's pickup point, not the drop.
+                const handleEndMarkerClick = (e) => {
+                  if (e.originalEvent) e.originalEvent.stopPropagation();
+                  setFocusedCompareStep((prev) =>
+                    prev === t.sequenceStep ? null : t.sequenceStep
+                  );
+                  if (orderForTrack && e.target && typeof e.target.openPopup === 'function') {
+                    e.target.openPopup();
+                  }
+                };
 
-              // Combined view rail-offset (negative side): mirror image of
-              // the +5px shift applied to the planned polyline in
-              // renderRoutes. With planned at +5 and actual at -5, the two
-              // layers sit as parallel rails ~10px apart when they share
-              // a road, so the operator can read both even on tight match.
-              // Actual-only and Planned-only modes leave offset = 0 since
-              // there's only one layer drawing on the map.
-              const actualOffset = compareViewMode === 'combined' ? -5 : 0;
+                // Combined view rail-offset (negative side): mirror image of
+                // the +5px shift applied to the planned polyline in
+                // renderRoutes. With planned at +5 and actual at -5, the two
+                // layers sit as parallel rails ~10px apart when they share
+                // a road, so the operator can read both even on tight match.
+                // Actual-only and Planned-only modes leave offset = 0 since
+                // there's only one layer drawing on the map.
+                const actualOffset = compareViewMode === 'combined' ? -5 : 0;
 
-              return (
-                <React.Fragment key={`actual-${t.deliveryid}`}>
-                  {drawPolyline && (
-                    <Polyline
-                      positions={positions}
-                      pathOptions={{
-                        color: '#ffffff',
-                        weight: isFocusedStep ? 11 : 9,
-                        opacity: isFocusedStep ? 0.75 : 0.55,
-                        lineJoin: 'round',
-                        lineCap: 'round',
-                        offset: actualOffset
-                      }}
-                    />
-                  )}
-                  {drawPolyline && (
-                    <Polyline
-                      positions={positions}
-                      pathOptions={{
-                        color: polylineColor,
-                        weight: isFocusedStep ? 6.5 : 5,
-                        opacity: isFocusedStep ? 1 : focusedCompareStep ? 0.55 : 0.95,
-                        lineJoin: 'round',
-                        lineCap: 'round',
-                        offset: actualOffset
-                      }}
-                    />
-                  )}
+                return (
+                  <React.Fragment key={`actual-${t.deliveryid}`}>
+                    {drawPolyline && (
+                      <Polyline
+                        positions={positions}
+                        pathOptions={{
+                          color: '#ffffff',
+                          weight: isFocusedStep ? 11 : 9,
+                          opacity: isFocusedStep ? 0.75 : 0.55,
+                          lineJoin: 'round',
+                          lineCap: 'round',
+                          offset: actualOffset
+                        }}
+                      />
+                    )}
+                    {drawPolyline && (
+                      <Polyline
+                        positions={positions}
+                        pathOptions={{
+                          color: polylineColor,
+                          weight: isFocusedStep ? 6.5 : 5,
+                          opacity: isFocusedStep ? 1 : focusedCompareStep ? 0.55 : 0.95,
+                          lineJoin: 'round',
+                          lineCap: 'round',
+                          offset: actualOffset
+                        }}
+                      />
+                    )}
 
-                  {showStartMarker && (
-                    <Marker
-                      position={startPos}
-                      icon={startIconEl}
-                      zIndexOffset={isFocusedStep ? 900 : 100}
-                      eventHandlers={{ click: handleStepClick }}
-                    >
-                      <Tooltip
-                        direction="top"
-                        offset={[0, -12]}
-                        opacity={1}
-                        className="compare-tooltip"
+                    {showStartMarker && (
+                      <Marker
+                        position={startPos}
+                        icon={startIconEl}
+                        zIndexOffset={isFocusedStep ? 900 : 100}
+                        eventHandlers={{ click: handleStepClick }}
                       >
-                        <div className="cmp-tip">
-                          <div className="cmp-tip-header">
-                            <span className="cmp-tip-step" style={{ background: color }}>
-                              <MdLocalMall />
-                            </span>
-                            <div className="cmp-tip-title-stack">
-                              <div className="cmp-tip-title">
-                                {t.pickupcustomer || 'Pickup'}
-                              </div>
-                              <div className="cmp-tip-sub">
-                                {t.coords[0]?.logdate
-                                  ? `Picked up · ${dayjs(t.coords[0].logdate).format('hh:mm A')}`
-                                  : 'Rider trip origin'}
+                        <Tooltip
+                          direction="top"
+                          offset={[0, -12]}
+                          opacity={1}
+                          className="compare-tooltip"
+                        >
+                          <div className="cmp-tip">
+                            <div className="cmp-tip-header">
+                              <span className="cmp-tip-step" style={{ background: color }}>
+                                <MdLocalMall />
+                              </span>
+                              <div className="cmp-tip-title-stack">
+                                <div className="cmp-tip-title">
+                                  {t.pickupcustomer || 'Pickup'}
+                                </div>
+                                <div className="cmp-tip-sub">
+                                  {t.coords[0]?.logdate
+                                    ? `Picked up · ${dayjs(t.coords[0].logdate).format('hh:mm A')}`
+                                    : 'Rider trip origin'}
+                                </div>
                               </div>
                             </div>
+                            <div className="cmp-tip-action">Click for step 1 details</div>
                           </div>
-                          <div className="cmp-tip-action">Click for step 1 details</div>
-                        </div>
-                      </Tooltip>
-                    </Marker>
-                  )}
+                        </Tooltip>
+                      </Marker>
+                    )}
 
-                  <Marker
-                    position={endPos}
-                    icon={sequenceIcon}
-                    zIndexOffset={isFocusedStep ? 1000 : 200}
-                    eventHandlers={
-                      orderForTrack
-                        ? {
+                    <Marker
+                      position={endPos}
+                      icon={sequenceIcon}
+                      zIndexOffset={isFocusedStep ? 1000 : 200}
+                      eventHandlers={
+                        orderForTrack
+                          ? {
                             // Match the planned-route marker UX: hover opens
                             // the rich order popup, leaving it pinned while
                             // a step is focused (so click-to-focus keeps the
                             // modal visible after the cursor moves away). The
-                            // ~120ms grace timer on mouseout lets the cursor
+                            // ~200ms grace timer on mouseout lets the cursor
                             // travel onto the popup itself without flicker.
                             mouseover: (e) => {
-                              if (compareHoverTimerRef.current) {
-                                clearTimeout(compareHoverTimerRef.current);
-                                compareHoverTimerRef.current = null;
+                              const marker = e.target;
+                              if (popupHoverTimerRef.current) {
+                                clearTimeout(popupHoverTimerRef.current);
+                                popupHoverTimerRef.current = null;
                               }
-                              e.target.openPopup();
+                              activePopupMarkerRef.current = marker;
+                              marker.openPopup();
                             },
                             mouseout: (e) => {
                               if (focusedCompareStep === t.sequenceStep) return;
                               const marker = e.target;
-                              if (compareHoverTimerRef.current) {
-                                clearTimeout(compareHoverTimerRef.current);
+                              if (popupHoverTimerRef.current) {
+                                clearTimeout(popupHoverTimerRef.current);
                               }
-                              compareHoverTimerRef.current = setTimeout(() => {
+                              popupHoverTimerRef.current = setTimeout(() => {
                                 marker.closePopup();
-                                compareHoverTimerRef.current = null;
-                              }, 120);
+                                if (activePopupMarkerRef.current === marker) {
+                                  activePopupMarkerRef.current = null;
+                                }
+                                popupHoverTimerRef.current = null;
+                              }, 200);
                             },
                             click: handleEndMarkerClick
                           }
-                        : { click: handleEndMarkerClick }
-                    }
-                  >
-                    {!orderForTrack && (
-                      <Tooltip
-                        direction="top"
-                        offset={[0, -20]}
-                        opacity={1}
-                        className="compare-tooltip"
-                      >
-                        {(() => {
-                          const ss = getStatusStyle(t.orderstatus);
-                          return (
-                            <div className="cmp-tip">
-                              <div className="cmp-tip-header">
-                                <span className="cmp-tip-step" style={{ background: color }}>
-                                  {t.sequenceStep}
-                                </span>
-                                <div className="cmp-tip-title-stack">
-                                  <div className="cmp-tip-title">
-                                    {t.deliverycustomer || `Step ${t.sequenceStep}`}
-                                  </div>
-                                  <div className="cmp-tip-sub">
-                                    {t.deliverytime
-                                      ? `Delivered ${dayjs(t.deliverytime).format('hh:mm A')}`
-                                      : `${t.coords.length} GPS pings`}
-                                  </div>
-                                </div>
-                                {t.orderstatus && (
-                                  <span
-                                    className="cmp-tip-tag"
-                                    style={{ background: ss.bg, color: ss.fg }}
-                                  >
-                                    {ss.label}
+                          : { click: handleEndMarkerClick }
+                      }
+                    >
+                      {!orderForTrack && (
+                        <Tooltip
+                          direction="top"
+                          offset={[0, -20]}
+                          opacity={1}
+                          className="compare-tooltip"
+                        >
+                          {(() => {
+                            const ss = getStatusStyle(t.orderstatus);
+                            return (
+                              <div className="cmp-tip">
+                                <div className="cmp-tip-header">
+                                  <span className="cmp-tip-step" style={{ background: color }}>
+                                    {t.sequenceStep}
                                   </span>
-                                )}
-                              </div>
-                              {isAnomaly && (
-                                <div className="cmp-tip-anomaly">
-                                  Deviation flagged — see details below
+                                  <div className="cmp-tip-title-stack">
+                                    <div className="cmp-tip-title">
+                                      {t.deliverycustomer || `Step ${t.sequenceStep}`}
+                                    </div>
+                                    <div className="cmp-tip-sub">
+                                      {t.deliverytime
+                                        ? `Delivered ${dayjs(t.deliverytime).format('hh:mm A')}`
+                                        : `${t.coords.length} GPS pings`}
+                                    </div>
+                                  </div>
+                                  {t.orderstatus && (
+                                    <span
+                                      className="cmp-tip-tag"
+                                      style={{ background: ss.bg, color: ss.fg }}
+                                    >
+                                      {ss.label}
+                                    </span>
+                                  )}
+                                </div>
+                                {isAnomaly && (
+                                  <div className="cmp-tip-anomaly">
+                                    Deviation flagged — see details below
+                                  </div>
+                                )}
+                                <div className="cmp-tip-action">
+                                  {isFocusedStep ? 'Click to deselect' : 'Click for details'}
                                 </div>
-                              )}
-                              <div className="cmp-tip-action">
-                                {isFocusedStep ? 'Click to deselect' : 'Click for details'}
                               </div>
-                            </div>
-                          );
-                        })()}
-                      </Tooltip>
-                    )}
-                    {orderForTrack && (
-                      <Popup
-                        maxWidth={520}
-                        minWidth={460}
-                        className="dispatch-popup"
-                        autoPan={false}
-                      >
-                        {renderOrderPopupContent(orderForTrack)}
-                      </Popup>
-                    )}
-                  </Marker>
-                </React.Fragment>
-              );
-            }))}
-          </MapContainer>
+                            );
+                          })()}
+                        </Tooltip>
+                      )}
+                      {orderForTrack && (
+                        <Popup
+                          maxWidth={520}
+                          minWidth={460}
+                          className="dispatch-popup"
+                          autoPan={true}
+                          autoPanPadding={[40, 40]}
+                        >
+                          {renderOrderPopupContent(orderForTrack)}
+                        </Popup>
+                      )}
+                    </Marker>
+                  </React.Fragment>
+                );
+              }))}
+            </MapContainer>
 
-          {compareOpen && focusedRider && (
-            <div className="compare-view-switcher" role="group" aria-label="Compare view layer">
-              <button
-                type="button"
-                className={compareViewMode === 'actual' ? 'is-active' : ''}
-                onClick={() => setCompareViewMode('actual')}
-                title="Show only the rider's actual GPS trail"
-              >
-                Actual
-              </button>
-              <button
-                type="button"
-                className={compareViewMode === 'planned' ? 'is-active' : ''}
-                onClick={() => setCompareViewMode('planned')}
-                title="Show only the dispatched planned route"
-              >
-                Planned
-              </button>
-              <button
-                type="button"
-                className={compareViewMode === 'combined' ? 'is-active' : ''}
-                onClick={() => setCompareViewMode('combined')}
-                title="Overlay planned (dashed) and actual (solid) on one map"
-              >
-                Combined
-              </button>
-            </div>
-          )}
+            {compareOpen && focusedRider && (
+              <div className="compare-view-switcher" role="group" aria-label="Compare view layer">
+                <button
+                  type="button"
+                  className={compareViewMode === 'actual' ? 'is-active' : ''}
+                  onClick={() => setCompareViewMode('actual')}
+                  title="Show only the rider's actual GPS trail"
+                >
+                  Actual
+                </button>
+                <button
+                  type="button"
+                  className={compareViewMode === 'planned' ? 'is-active' : ''}
+                  onClick={() => setCompareViewMode('planned')}
+                  title="Show only the dispatched planned route"
+                >
+                  Planned
+                </button>
+                <button
+                  type="button"
+                  className={compareViewMode === 'combined' ? 'is-active' : ''}
+                  onClick={() => setCompareViewMode('combined')}
+                  title="Overlay planned (dashed) and actual (solid) on one map"
+                >
+                  Combined
+                </button>
+              </div>
+            )}
 
-          <div id="ov-tl">
-            {/* <div className="ov-card">
+            <div id="ov-tl">
+              {/* <div className="ov-card">
               <div className="ov-stats">
                 <div><div className="osv g">{activeStats.orders}</div><div className="osl">Orders</div></div>
                 <div><div className="osv">{activeStats.riders}</div><div className="osl">Riders</div></div>
                 <div><div className="osv g">₹{activeStats.profit.toFixed(0)}</div><div className="osl">Profit</div></div>
               </div>
             </div> */}
-          </div>
+            </div>
 
-          <div id="ov-tr">
-            {viewMode === 'kitchens' ? (
-              kitchens.slice(0, 10).map(k => {
-                const total = k.orders.length;
-                const delivered = k.orders.filter((o) =>
-                  FINAL_STATUSES.has(String(o.orderstatus || '').toLowerCase())
-                ).length;
-                const isDone = total > 0 && delivered >= total;
-                return (
-                  <div key={k.id} className={`rchip ${focusedKitchen?.id === k.id ? 'active' : ''}`} onClick={() => setFocusedKitchen(k)} title={`${delivered} delivered of ${total} total`}>
-                    <div className="rchip-dot" style={{ background: '#f59e0b' }}></div>
-                    <span style={{ maxWidth: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{k.kitchenName}</span>
-                    <span className={`rchip-n ${isDone ? 'is-done' : ''}`}>{delivered}/{total}</span>
-                  </div>
-                );
-              })
-            ) : (
-              riders.slice(0, 10).map(r => {
-                const total = r.orders.length;
-                const delivered = r.orders.filter((o) =>
-                  FINAL_STATUSES.has(String(o.orderstatus || '').toLowerCase())
-                ).length;
-                const isDone = total > 0 && delivered >= total;
-                return (
-                  <div key={r.id} className={`rchip ${focusedRider?.id === r.id ? 'active' : ''}`} onClick={() => handleRiderFocus(r)} title={`${delivered} delivered of ${total} total`}>
-                    <div className="rchip-dot" style={{ background: r.color }}></div>
-                    <span style={{ maxWidth: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.riderName}</span>
-                    <span className={`rchip-n ${isDone ? 'is-done' : ''}`}>{delivered}/{total}</span>
-                  </div>
-                );
-              })
-            )}
-          </div>
+            <div id="ov-tr">
+              {viewMode === 'kitchens' ? (
+                kitchens.slice(0, 10).map(k => {
+                  const total = k.orders.length;
+                  const delivered = k.orders.filter((o) =>
+                    FINAL_STATUSES.has(String(o.orderstatus || '').toLowerCase())
+                  ).length;
+                  const isDone = total > 0 && delivered >= total;
+                  return (
+                    <div key={k.id} className={`rchip ${focusedKitchen?.id === k.id ? 'active' : ''}`} onClick={() => setFocusedKitchen(k)} title={`${delivered} delivered of ${total} total`}>
+                      <div className="rchip-dot" style={{ background: '#f59e0b' }}></div>
+                      <span style={{ maxWidth: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{k.kitchenName}</span>
+                      <span className={`rchip-n ${isDone ? 'is-done' : ''}`}>{delivered}/{total}</span>
+                    </div>
+                  );
+                })
+              ) : (
+                riders.slice(0, 10).map(r => {
+                  const total = r.orders.length;
+                  const delivered = r.orders.filter((o) =>
+                    FINAL_STATUSES.has(String(o.orderstatus || '').toLowerCase())
+                  ).length;
+                  const isDone = total > 0 && delivered >= total;
+                  return (
+                    <div key={r.id} className={`rchip ${focusedRider?.id === r.id ? 'active' : ''}`} onClick={() => handleRiderFocus(r)} title={`${delivered} delivered of ${total} total`}>
+                      <div className="rchip-dot" style={{ background: r.color }}></div>
+                      <span style={{ maxWidth: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.riderName}</span>
+                      <span className={`rchip-n ${isDone ? 'is-done' : ''}`}>{delivered}/{total}</span>
+                    </div>
+                  );
+                })
+              )}
+            </div>
 
-          <div id="ov-br">
-            <button className={`sbt ${isAnimating ? 'active' : ''}`} onClick={startAnimation} style={{ boxShadow: 'var(--shadow-lg)', background: isAnimating ? 'var(--accent)' : '#fff' }}>
-              <span>{isAnimating ? '⏹' : '▶'}</span> {isAnimating ? 'Stop' : 'Animate Routes'}
-            </button>
-            {/* Compare planned vs. actual: when no rider is focused yet we
+            <div id="ov-br">
+              <button className={`sbt ${isAnimating ? 'active' : ''}`} onClick={startAnimation} style={{ boxShadow: 'var(--shadow-lg)', background: isAnimating ? 'var(--accent)' : '#fff' }}>
+                <span>{isAnimating ? '⏹' : '▶'}</span> {isAnimating ? 'Stop' : 'Animate Routes'}
+              </button>
+              {/* Compare planned vs. actual: when no rider is focused yet we
                 auto-pick the first rider with orders, so the button always
                 does something visible. The comparison itself is per-rider. */}
-            <button
-              type="button"
-              className={`sbt ${compareOpen ? 'active' : ''}`}
-              onClick={() => {
-                if (compareOpen) { setCompareOpen(false); return; }
-                if (!focusedRider) {
-                  // Prefer a rider whose orders have deliveryids — those are
-                  // the only ones /getdeliverylogs/ can return tracks for, so
-                  // picking such a rider guarantees the comparison map has
-                  // something to draw.
-                  const withDelivery = riders.find((r) =>
-                    (r.orders || []).some((o) => o.deliveryid != null && o.deliveryid !== '' && o.deliveryid !== 0)
-                  );
-                  const fallback = riders.find((r) => r.orders && r.orders.length > 0);
-                  const pick = withDelivery || fallback;
-                  if (pick) {
-                    handleRiderFocus(pick);
-                    // In controlled mode focusedRider won't update until the parent
-                    // re-renders with the new selectedRiderId, so defer the open.
-                    if (isControlled) {
-                      pendingCompareRef.current = true;
-                      return;
+              <button
+                type="button"
+                className={`sbt ${compareOpen ? 'active' : ''}`}
+                onClick={() => {
+                  if (compareOpen) { setCompareOpen(false); return; }
+                  if (!focusedRider) {
+                    // Prefer a rider whose orders have deliveryids — those are
+                    // the only ones /getdeliverylogs/ can return tracks for, so
+                    // picking such a rider guarantees the comparison map has
+                    // something to draw.
+                    const withDelivery = riders.find((r) =>
+                      (r.orders || []).some((o) => o.deliveryid != null && o.deliveryid !== '' && o.deliveryid !== 0)
+                    );
+                    const fallback = riders.find((r) => r.orders && r.orders.length > 0);
+                    const pick = withDelivery || fallback;
+                    if (pick) {
+                      handleRiderFocus(pick);
+                      // In controlled mode focusedRider won't update until the parent
+                      // re-renders with the new selectedRiderId, so defer the open.
+                      if (isControlled) {
+                        pendingCompareRef.current = true;
+                        return;
+                      }
                     }
                   }
-                }
-                setCompareOpen(true);
-              }}
-              title={focusedRider
-                ? `Compare planned vs. actual route for ${focusedRider.riderName}`
-                : 'Compare planned vs. actual route (will focus the first rider)'}
-              style={{
-                boxShadow: 'var(--shadow-lg)',
-                background: compareOpen
-                  ? 'linear-gradient(135deg, #6366f1, #3b82f6)'
-                  : '#fff',
-                marginLeft: 8,
-                color: compareOpen ? '#fff' : undefined
-              }}
-            >
-              <span className="sbt-icon"><MdSwapHoriz /></span>
-              {compareOpen ? 'Exit Compare' : 'Compare'}
-            </button>
+                  setCompareOpen(true);
+                }}
+                title={focusedRider
+                  ? `Compare planned vs. actual route for ${focusedRider.riderName}`
+                  : 'Compare planned vs. actual route (will focus the first rider)'}
+                style={{
+                  boxShadow: 'var(--shadow-lg)',
+                  background: compareOpen
+                    ? 'linear-gradient(135deg, #6366f1, #3b82f6)'
+                    : '#fff',
+                  marginLeft: 8,
+                  color: compareOpen ? '#fff' : undefined
+                }}
+              >
+                <span className="sbt-icon"><MdSwapHoriz /></span>
+                {compareOpen ? 'Exit Compare' : 'Compare'}
+              </button>
+            </div>
           </div>
-        </div>
 
-        {/* Compare-mode second pane — actual GPS tracks per delivery for the
+          {/* Compare-mode second pane — actual GPS tracks per delivery for the
             focused rider. Fans out /deliveries/getdeliverylogs/?deliveryid=X
             (one query per order, cached by deliveryid) and overlays each
             track as a colored polyline + start/end markers. Renders alongside
             #map-wrap when compareOpen so the operator can eyeball planned vs.
             actual side by side. */}
-        {compareOpen && focusedRider && (
-          <div id="compare-map-wrap">
-            {(() => {
-              const total = riderActualTracks.length;
-              const loaded = riderActualTracks.filter((t) => t.coords.length > 0).length;
-              const loading = riderActualTracks.filter((t) => t.isLoading).length;
-              const pct = total > 0 ? Math.round((loaded / total) * 100) : 0;
-              const isDone = total > 0 && loaded === total && loading === 0;
-              const focusedDelta =
-                focusedCompareStep != null
-                  ? compareDeltas.find((d) => d.sequenceStep === focusedCompareStep)
-                  : null;
-              return (
-                <div className="compare-header-v2">
-                  <div className="compare-header-row">
-                    <div className="compare-title">
-                      <span className="compare-title-dot" style={{ background: focusedRider.color }} />
-                      <span className="compare-title-name">{focusedRider.riderName}</span>
-                      <span className="compare-title-badge">ACTUAL vs PLANNED</span>
-                    </div>
-                    <div className="compare-header-tools">
-                      {focusedCompareStep != null && (
+          {compareOpen && focusedRider && (
+            <div id="compare-map-wrap">
+              {(() => {
+                const total = riderActualTracks.length;
+                const loaded = riderActualTracks.filter((t) => t.coords.length > 0).length;
+                const loading = riderActualTracks.filter((t) => t.isLoading).length;
+                const pct = total > 0 ? Math.round((loaded / total) * 100) : 0;
+                const isDone = total > 0 && loaded === total && loading === 0;
+                const focusedDelta =
+                  focusedCompareStep != null
+                    ? compareDeltas.find((d) => d.sequenceStep === focusedCompareStep)
+                    : null;
+                return (
+                  <div className="compare-header-v2">
+                    <div className="compare-header-row">
+                      <div className="compare-title">
+                        <span className="compare-title-dot" style={{ background: focusedRider.color }} />
+                        <span className="compare-title-name">{focusedRider.riderName}</span>
+                        <span className="compare-title-badge">ACTUAL vs PLANNED</span>
+                      </div>
+                      <div className="compare-header-tools">
+                        {focusedCompareStep != null && (
+                          <button
+                            type="button"
+                            className="compare-overall-btn"
+                            onClick={() => setFocusedCompareStep(null)}
+                            title="Zoom out to the whole day"
+                          >
+                            <MdPublic /> Overall
+                          </button>
+                        )}
                         <button
                           type="button"
-                          className="compare-overall-btn"
-                          onClick={() => setFocusedCompareStep(null)}
-                          title="Zoom out to the whole day"
+                          className={`compare-timeline-toggle${compareTimelineOpen ? ' is-open' : ''}`}
+                          onClick={() => setCompareTimelineOpen((v) => !v)}
+                          title={compareTimelineOpen
+                            ? 'Hide planned/actual timeline'
+                            : 'Show planned/actual timeline'}
+                          aria-expanded={compareTimelineOpen}
                         >
-                          <MdPublic /> Overall
+                          <MdExpandMore />
                         </button>
-                      )}
-                      <button
-                        type="button"
-                        className={`compare-timeline-toggle${compareTimelineOpen ? ' is-open' : ''}`}
-                        onClick={() => setCompareTimelineOpen((v) => !v)}
-                        title={compareTimelineOpen
-                          ? 'Hide planned/actual timeline'
-                          : 'Show planned/actual timeline'}
-                        aria-expanded={compareTimelineOpen}
-                      >
-                        <MdExpandMore />
-                      </button>
+                      </div>
                     </div>
-                  </div>
 
-                  {/* Step timeline — every delivery as a tappable dot in chronological
+                    {/* Step timeline — every delivery as a tappable dot in chronological
                       order. The operator can drill into any step to scrutinize that
                       single delivery on both maps. Filled = delivered, ring = pending,
                       dim = cancelled/skipped, ring with spinner = GPS still loading.
                       Whole strip (timeline + progress + legend) collapses via the
                       header chevron — open by default. */}
-                  {compareTimelineOpen && (
-                  <>
-                  <div className="compare-timeline-wrap">
-                    <div className="compare-timeline-container">
-                      <div className="compare-timeline-labels">
-                        <div className="compare-timeline-label">Planned</div>
-                        <div className="compare-timeline-label">Actual</div>
-                      </div>
-                      <div className="compare-timeline-scrollable">
-                        {/* Planned Row */}
-                        <div className="compare-timeline-track is-planned">
-                          {plannedOrdered.map((d, i) => {
-                            const statusLow = String(d.orderstatus || '').toLowerCase();
-                            const isDelivered = FINAL_STATUSES.has(statusLow);
-                            const isSkipped = SKIPPED_STATUSES.has(statusLow);
-                            const isFocused = focusedCompareStep === d.sequenceStep;
-                            const isLoading = d.isLoading && d.coordsCount === 0;
-                            const isNoData = !d.isLoading && d.coordsCount === 0;
-                            const plannedStepNum = d.order?.step || d.sequenceStep;
-                            const color = stepColor(plannedStepNum - 1);
-                            const cls = [
-                              'compare-step',
-                              isFocused && 'is-focused',
-                              isDelivered && 'is-delivered',
-                              isSkipped && 'is-skipped',
-                              !isDelivered && !isSkipped && 'is-pending',
-                              isLoading && 'is-loading',
-                              isNoData && 'is-no-data',
-                              d.anomaly && 'is-anomaly'
-                            ].filter(Boolean).join(' ');
-                            return (
-                              <React.Fragment key={`step-p-${d.deliveryid}`}>
-                                {i > 0 && <span className="compare-step-spacer" />}
-                                <button
-                                  type="button"
-                                  className={cls}
-                                  style={{ '--step-color': color }}
-                                  onClick={() =>
-                                    setFocusedCompareStep((prev) =>
-                                      prev === d.sequenceStep ? null : d.sequenceStep
-                                    )
-                                  }
-                                  title={
-                                    `Planned Step ${plannedStepNum}` +
-                                    (d.deliverycustomer ? ` · ${d.deliverycustomer}` : '') +
-                                    (d.anomaly ? ' · deviation flagged' : '')
-                                  }
-                                >
-                                  <span className="compare-step-circle">
-                                    {isLoading ? <span className="compare-step-spin" /> : plannedStepNum}
-                                  </span>
-                                </button>
-                              </React.Fragment>
-                            );
-                          })}
+                    {compareTimelineOpen && (
+                      <>
+                        <div className="compare-timeline-wrap">
+                          <div className="compare-timeline-container">
+                            <div className="compare-timeline-labels">
+                              <div className="compare-timeline-label">Planned</div>
+                              <div className="compare-timeline-label">Actual</div>
+                            </div>
+                            <div className="compare-timeline-scrollable">
+                              {/* Planned Row */}
+                              <div className="compare-timeline-track is-planned">
+                                {plannedOrdered.map((d, i) => {
+                                  const statusLow = String(d.orderstatus || '').toLowerCase();
+                                  const isDelivered = FINAL_STATUSES.has(statusLow);
+                                  const isSkipped = SKIPPED_STATUSES.has(statusLow);
+                                  const isFocused = focusedCompareStep === d.sequenceStep;
+                                  const isLoading = d.isLoading && d.coordsCount === 0;
+                                  const isNoData = !d.isLoading && d.coordsCount === 0;
+                                  const plannedStepNum = d.order?.step || d.sequenceStep;
+                                  const color = stepColor(plannedStepNum - 1);
+                                  const cls = [
+                                    'compare-step',
+                                    isFocused && 'is-focused',
+                                    isDelivered && 'is-delivered',
+                                    isSkipped && 'is-skipped',
+                                    !isDelivered && !isSkipped && 'is-pending',
+                                    isLoading && 'is-loading',
+                                    isNoData && 'is-no-data',
+                                    d.anomaly && 'is-anomaly'
+                                  ].filter(Boolean).join(' ');
+                                  return (
+                                    <React.Fragment key={`step-p-${d.deliveryid}`}>
+                                      {i > 0 && <span className="compare-step-spacer" />}
+                                      <button
+                                        type="button"
+                                        className={cls}
+                                        style={{ '--step-color': color }}
+                                        onClick={() =>
+                                          setFocusedCompareStep((prev) =>
+                                            prev === d.sequenceStep ? null : d.sequenceStep
+                                          )
+                                        }
+                                        title={
+                                          `Planned Step ${plannedStepNum}` +
+                                          (d.deliverycustomer ? ` · ${d.deliverycustomer}` : '') +
+                                          (d.anomaly ? ' · deviation flagged' : '')
+                                        }
+                                      >
+                                        <span className="compare-step-circle">
+                                          {isLoading ? <span className="compare-step-spin" /> : plannedStepNum}
+                                        </span>
+                                      </button>
+                                    </React.Fragment>
+                                  );
+                                })}
+                              </div>
+
+                              {/* Actual Row */}
+                              <div className="compare-timeline-track is-actual">
+                                {actualOrdered.map((d, i) => {
+                                  const statusLow = String(d.orderstatus || '').toLowerCase();
+                                  const isDelivered = FINAL_STATUSES.has(statusLow);
+                                  const isSkipped = SKIPPED_STATUSES.has(statusLow);
+                                  const isFocused = focusedCompareStep === d.sequenceStep;
+                                  const isLoading = d.isLoading && d.coordsCount === 0;
+                                  const isNoData = !d.isLoading && d.coordsCount === 0;
+                                  const plannedStepNum = d.order?.step || d.sequenceStep;
+                                  const color = stepColor(plannedStepNum - 1);
+                                  const cls = [
+                                    'compare-step',
+                                    isFocused && 'is-focused',
+                                    isDelivered && 'is-delivered',
+                                    isSkipped && 'is-skipped',
+                                    !isDelivered && !isSkipped && 'is-pending',
+                                    isLoading && 'is-loading',
+                                    isNoData && 'is-no-data',
+                                    d.anomaly && 'is-anomaly'
+                                  ].filter(Boolean).join(' ');
+                                  return (
+                                    <React.Fragment key={`step-a-${d.deliveryid}`}>
+                                      {i > 0 && <span className="compare-step-spacer" />}
+                                      <button
+                                        type="button"
+                                        className={cls}
+                                        style={{ '--step-color': color }}
+                                        onClick={() =>
+                                          setFocusedCompareStep((prev) =>
+                                            prev === d.sequenceStep ? null : d.sequenceStep
+                                          )
+                                        }
+                                        title={
+                                          `Actual Visit ${i + 1} (Planned Step ${plannedStepNum})` +
+                                          (d.deliverycustomer ? ` · ${d.deliverycustomer}` : '') +
+                                          (d.actualTs ? ` · ${d.actualTs.format('hh:mm A')}` : '') +
+                                          (d.anomaly ? ' · deviation flagged' : '')
+                                        }
+                                      >
+                                        <span className="compare-step-circle">
+                                          {isLoading ? <span className="compare-step-spin" /> : plannedStepNum}
+                                        </span>
+                                        {d.actualTs && (
+                                          <span className="compare-step-tick">
+                                            {d.actualTs.format('HH:mm')}
+                                          </span>
+                                        )}
+                                        {d.anomaly && <span className="compare-step-flag" title="Deviation flagged" />}
+                                      </button>
+                                    </React.Fragment>
+                                  );
+                                })}
+                              </div>
+                            </div>
+                          </div>
+                          <div className="compare-progress-strip">
+                            <div className="compare-progress-bar-wrap">
+                              <div
+                                className={`compare-progress-bar-fill${isDone ? ' is-done' : ''}`}
+                                style={{ width: `${pct}%` }}
+                              />
+                            </div>
+                            <span className="compare-progress-text">
+                              {loading > 0 ? `Loading GPS… ${loaded}/${total}` : `${loaded}/${total} tracks`}
+                            </span>
+                          </div>
                         </div>
 
-                        {/* Actual Row */}
-                        <div className="compare-timeline-track is-actual">
-                          {actualOrdered.map((d, i) => {
-                            const statusLow = String(d.orderstatus || '').toLowerCase();
-                            const isDelivered = FINAL_STATUSES.has(statusLow);
-                            const isSkipped = SKIPPED_STATUSES.has(statusLow);
-                            const isFocused = focusedCompareStep === d.sequenceStep;
-                            const isLoading = d.isLoading && d.coordsCount === 0;
-                            const isNoData = !d.isLoading && d.coordsCount === 0;
-                            const plannedStepNum = d.order?.step || d.sequenceStep;
-                            const color = stepColor(plannedStepNum - 1);
-                            const cls = [
-                              'compare-step',
-                              isFocused && 'is-focused',
-                              isDelivered && 'is-delivered',
-                              isSkipped && 'is-skipped',
-                              !isDelivered && !isSkipped && 'is-pending',
-                              isLoading && 'is-loading',
-                              isNoData && 'is-no-data',
-                              d.anomaly && 'is-anomaly'
-                            ].filter(Boolean).join(' ');
-                            return (
-                              <React.Fragment key={`step-a-${d.deliveryid}`}>
-                                {i > 0 && <span className="compare-step-spacer" />}
-                                <button
-                                  type="button"
-                                  className={cls}
-                                  style={{ '--step-color': color }}
-                                  onClick={() =>
-                                    setFocusedCompareStep((prev) =>
-                                      prev === d.sequenceStep ? null : d.sequenceStep
-                                    )
-                                  }
-                                  title={
-                                    `Actual Visit ${i + 1} (Planned Step ${plannedStepNum})` +
-                                    (d.deliverycustomer ? ` · ${d.deliverycustomer}` : '') +
-                                    (d.actualTs ? ` · ${d.actualTs.format('hh:mm A')}` : '') +
-                                    (d.anomaly ? ' · deviation flagged' : '')
-                                  }
-                                >
-                                  <span className="compare-step-circle">
-                                    {isLoading ? <span className="compare-step-spin" /> : plannedStepNum}
-                                  </span>
-                                  {d.actualTs && (
-                                    <span className="compare-step-tick">
-                                      {d.actualTs.format('HH:mm')}
-                                    </span>
-                                  )}
-                                  {d.anomaly && <span className="compare-step-flag" title="Deviation flagged" />}
-                                </button>
-                              </React.Fragment>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    </div>
-                    <div className="compare-progress-strip">
-                      <div className="compare-progress-bar-wrap">
-                        <div
-                          className={`compare-progress-bar-fill${isDone ? ' is-done' : ''}`}
-                          style={{ width: `${pct}%` }}
-                        />
-                      </div>
-                      <span className="compare-progress-text">
-                        {loading > 0 ? `Loading GPS… ${loaded}/${total}` : `${loaded}/${total} tracks`}
-                      </span>
-                    </div>
-                  </div>
-
-                  {/* Legend strip — one line of icons so the operator instantly knows
+                        {/* Legend strip — one line of icons so the operator instantly knows
                       what each line/marker means. Lives in the header so it doesn't
                       compete with the map for vertical real estate. */}
-                  {(() => {
-                    // Two color stories depending on view mode:
-                    //   • Combined: polylines collapse to fixed indigo (planned)
-                    //     and emerald (actual) so the two overlaid layers can be
-                    //     told apart at a glance. Legend swatches mirror this.
-                    //   • Planned-only / Actual-only: single layer on the map,
-                    //     so polylines keep STEP_PALETTE and the swatch shows
-                    //     the focused step's color or a step-gradient strip
-                    //     (signals "varies by step").
-                    const isCombined = compareViewMode === 'combined';
-                    const stepSwatchBg = focusedDelta
-                      ? stepColor(focusedDelta.sequenceStep - 1)
-                      : `linear-gradient(90deg, ${STEP_PALETTE.slice(0, 6).join(', ')})`;
-                    const plannedSwatchBg = isCombined ? COMBINED_PLANNED_COLOR : stepSwatchBg;
-                    const actualSwatchBg = isCombined ? COMBINED_ACTUAL_COLOR : stepSwatchBg;
-                    return (
-                      <div className="compare-legend">
-                        <span className="compare-legend-item">
-                          <span
-                            className="compare-legend-swatch is-step-color is-dashed"
-                            style={{ background: plannedSwatchBg }}
-                          />
-                          Planned (dashed)
-                        </span>
-                        <span className="compare-legend-item">
-                          <span
-                            className="compare-legend-swatch is-step-color"
-                            style={{ background: actualSwatchBg }}
-                          />
-                          Actual GPS (solid)
-                        </span>
-                        <span className="compare-legend-note">
-                          Kalman-smoothed GPS · OSRM road-snapped
-                        </span>
-                      </div>
-                    );
-                  })()}
-                  </>
-                  )}
-                </div>
-              );
-            })()}
+                        {(() => {
+                          // Two color stories depending on view mode:
+                          //   • Combined: polylines collapse to fixed indigo (planned)
+                          //     and emerald (actual) so the two overlaid layers can be
+                          //     told apart at a glance. Legend swatches mirror this.
+                          //   • Planned-only / Actual-only: single layer on the map,
+                          //     so polylines keep STEP_PALETTE and the swatch shows
+                          //     the focused step's color or a step-gradient strip
+                          //     (signals "varies by step").
+                          const isCombined = compareViewMode === 'combined';
+                          const stepSwatchBg = focusedDelta
+                            ? stepColor(focusedDelta.sequenceStep - 1)
+                            : `linear-gradient(90deg, ${STEP_PALETTE.slice(0, 6).join(', ')})`;
+                          const plannedSwatchBg = isCombined ? COMBINED_PLANNED_COLOR : stepSwatchBg;
+                          const actualSwatchBg = isCombined ? COMBINED_ACTUAL_COLOR : stepSwatchBg;
+                          return (
+                            <div className="compare-legend">
+                              <span className="compare-legend-item">
+                                <span
+                                  className="compare-legend-swatch is-step-color is-dashed"
+                                  style={{ background: plannedSwatchBg }}
+                                />
+                                Planned (dashed)
+                              </span>
+                              <span className="compare-legend-item">
+                                <span
+                                  className="compare-legend-swatch is-step-color"
+                                  style={{ background: actualSwatchBg }}
+                                />
+                                Actual GPS (solid)
+                              </span>
+                              <span className="compare-legend-note">
+                                Kalman-smoothed GPS · OSRM road-snapped
+                              </span>
+                            </div>
+                          );
+                        })()}
+                      </>
+                    )}
+                  </div>
+                );
+              })()}
 
-          </div>
-        )}
+            </div>
+          )}
 
-        {/* Right-side data panel — full-height column in Compare mode. Renders
+          {/* Right-side data panel — full-height column in Compare mode. Renders
             day-overview tiles (distance, deviation, on-time, profit), the
             focused-step delta when a step is selected, a deviations list of
             anomaly steps, and a per-step list showing whether each step was
@@ -4725,22 +4834,22 @@ const Dispatch = ({
             vs expected, and the order profit. Clicking any step row mirrors
             the timeline click — sets focusedCompareStep so both maps zoom
             onto that delivery. */}
-        {compareOpen && focusedRider && (
-          <CompareDataPanel
-            focusedRider={focusedRider}
-            compareDeltas={compareDeltas}
-            compareSummary={compareSummary}
-            actualOrdered={actualOrdered}
-            focusedCompareStep={focusedCompareStep}
-            setFocusedCompareStep={setFocusedCompareStep}
-            sequenceOpen={sequenceOpen}
-            setSequenceOpen={setSequenceOpen}
-            expandedSeqGroups={expandedSeqGroups}
-            setExpandedSeqGroups={setExpandedSeqGroups}
-            onClose={() => setCompareOpen(false)}
-          />
-        )}
-      </div>
+          {compareOpen && focusedRider && (
+            <CompareDataPanel
+              focusedRider={focusedRider}
+              compareDeltas={compareDeltas}
+              compareSummary={compareSummary}
+              actualOrdered={actualOrdered}
+              focusedCompareStep={focusedCompareStep}
+              setFocusedCompareStep={setFocusedCompareStep}
+              sequenceOpen={sequenceOpen}
+              setSequenceOpen={setSequenceOpen}
+              expandedSeqGroups={expandedSeqGroups}
+              setExpandedSeqGroups={setExpandedSeqGroups}
+              onClose={() => setCompareOpen(false)}
+            />
+          )}
+        </div>
       )}
 
     </div>
diff --git a/src/pages/nearle/orders/OrdersRedesign.css b/src/pages/nearle/orders/OrdersRedesign.css
new file mode 100644
index 0000000..08cae27
--- /dev/null
+++ b/src/pages/nearle/orders/OrdersRedesign.css
@@ -0,0 +1,1302 @@
+/* OrdersRedesign.css - Premium Aesthetics & Micro-Animations */
+
+/* ============================================== */
+/*   Pickup / Drop Location Panel (Redesign)      */
+/* ============================================== */
+.location-panel {
+  position: relative;
+  padding: 16px 18px 16px 18px;
+  border-radius: 12px;
+  border: 1px solid #eef2f6;
+  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  height: 100%;
+}
+
+.location-panel:hover {
+  box-shadow: 0 10px 30px -10px rgba(62, 73, 84, 0.10);
+}
+
+.location-panel::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 22px;
+  bottom: 22px;
+  width: 4px;
+  border-radius: 0 4px 4px 0;
+}
+
+.pickup-panel::before {
+  background: linear-gradient(180deg, #1890ff, #096dd9);
+}
+
+.drop-panel::before {
+  background: linear-gradient(180deg, #a855f7, #65387a);
+}
+
+.lp-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 22px;
+  padding-bottom: 18px;
+  border-bottom: 1px dashed #e2e8f0;
+}
+
+.lp-header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* Completion pill in panel header */
+.lp-completion-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11.5px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  padding: 4px 11px;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.14);
+  color: #64748b;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  line-height: 1;
+}
+
+.lp-completion-pill--ok {
+  background: rgba(34, 197, 94, 0.12);
+  color: #15803d;
+  border-color: rgba(34, 197, 94, 0.30);
+}
+
+.lp-completion-pill--ok::before {
+  content: '✓';
+  margin-right: 4px;
+  font-weight: 900;
+}
+
+/* Distance pill — sits alongside the completion pill in each panel header.
+   Same shape language as the completion pill so the header reads as a coherent row of chips. */
+.lp-distance-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11.5px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.10), rgba(168, 85, 247, 0.10));
+  color: #1e293b;
+  border: 1px solid rgba(101, 56, 122, 0.20);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.lp-distance-pill .lp-distance-arrow {
+  color: #94a3b8;
+  font-weight: 600;
+}
+
+.pickup-panel .lp-distance-pill {
+  border-color: rgba(24, 144, 255, 0.25);
+}
+
+.drop-panel .lp-distance-pill {
+  border-color: rgba(101, 56, 122, 0.25);
+}
+
+/* Compact icon-only swap button placed inside each panel header's action row.
+   Color follows the panel's accent so it doesn't look like a generic floating button. */
+.lp-swap-btn {
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 10px !important;
+  border: 1px solid #e2e8f0 !important;
+  background: #ffffff !important;
+  color: #475569 !important;
+  transition: all 0.2s ease;
+}
+
+.lp-swap-btn:hover {
+  background: #f8fafc !important;
+  border-color: #cbd5e1 !important;
+  color: #1e293b !important;
+  transform: rotate(180deg);
+}
+
+.pickup-panel .lp-swap-btn:hover {
+  color: #1890ff !important;
+  border-color: rgba(24, 144, 255, 0.35) !important;
+}
+
+.drop-panel .lp-swap-btn:hover {
+  color: #65387a !important;
+  border-color: rgba(101, 56, 122, 0.35) !important;
+}
+
+.lp-swap-btn.Mui-disabled {
+  background: #f8fafc !important;
+  border-color: #eef2f6 !important;
+  color: #cbd5e1 !important;
+}
+
+.lp-header-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.lp-badge {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #fff;
+  flex-shrink: 0;
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10);
+}
+
+.pickup-panel .lp-badge {
+  background: linear-gradient(135deg, #1890ff, #096dd9);
+  box-shadow: 0 6px 14px rgba(24, 144, 255, 0.30);
+}
+
+.drop-panel .lp-badge {
+  background: linear-gradient(135deg, #a855f7, #65387a);
+  box-shadow: 0 6px 14px rgba(101, 56, 122, 0.30);
+}
+
+.lp-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1e293b;
+  line-height: 1.2;
+}
+
+.lp-subtitle {
+  font-size: 13.5px;
+  color: #94a3b8;
+  margin-top: 3px;
+}
+
+.lp-action-btn {
+  text-transform: none !important;
+  font-weight: 600 !important;
+  font-size: 13.5px !important;
+  border-radius: 10px !important;
+  padding: 7px 14px !important;
+  letter-spacing: 0.2px !important;
+}
+
+.pickup-panel .lp-action-btn {
+  color: #1890ff !important;
+  background: rgba(24, 144, 255, 0.08) !important;
+}
+
+.pickup-panel .lp-action-btn:hover {
+  background: rgba(24, 144, 255, 0.16) !important;
+}
+
+.drop-panel .lp-action-btn {
+  color: #65387a !important;
+  background: rgba(168, 85, 247, 0.10) !important;
+}
+
+.drop-panel .lp-action-btn:hover {
+  background: rgba(168, 85, 247, 0.18) !important;
+}
+
+.lp-action-btn.Mui-disabled {
+  color: #cbd5e1 !important;
+  background: #f8fafc !important;
+}
+
+/* Ghost variant used for secondary actions (e.g. "Same as Pickup") */
+.lp-action-btn--ghost {
+  color: #475569 !important;
+  background: transparent !important;
+  border: 1px dashed #cbd5e1 !important;
+}
+
+.lp-action-btn--ghost:hover {
+  color: #1e293b !important;
+  background: #f8fafc !important;
+  border-color: #94a3b8 !important;
+}
+
+.lp-action-btn--ghost.Mui-disabled {
+  color: #cbd5e1 !important;
+  background: transparent !important;
+  border-color: #e2e8f0 !important;
+}
+
+/* Inline helper under the address search input — replaces the boxed wrapper */
+.address-search-helper {
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  margin-top: 6px !important;
+  margin-left: 2px !important;
+}
+
+.address-search-helper.pickup-helper {
+  color: #1890ff !important;
+}
+
+.address-search-helper.drop-helper {
+  color: #65387a !important;
+}
+
+/* Field group caption */
+.field-group-caption {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12.5px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+  color: #64748b;
+  margin-bottom: 14px;
+}
+
+.field-group-caption::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, #e2e8f0 0%, transparent 100%);
+}
+
+.field-group-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.pickup-panel .field-group-dot {
+  background: #1890ff;
+}
+
+.drop-panel .field-group-dot {
+  background: #65387a;
+}
+
+/* Address search highlight */
+.address-search-block {
+  background: rgba(24, 144, 255, 0.04);
+  border-radius: 12px;
+  padding: 16px;
+  border: 1px solid rgba(24, 144, 255, 0.12);
+  transition: border-color 0.2s ease;
+}
+
+.drop-panel .address-search-block {
+  background: rgba(168, 85, 247, 0.04);
+  border: 1px solid rgba(101, 56, 122, 0.12);
+}
+
+.address-search-block:focus-within {
+  border-color: rgba(24, 144, 255, 0.4);
+}
+
+.drop-panel .address-search-block:focus-within {
+  border-color: rgba(101, 56, 122, 0.4);
+}
+
+.address-search-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  color: #64748b;
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+
+/* Save-for-later pill */
+.save-later-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.04));
+  border: 1px dashed #86efac;
+  border-radius: 999px;
+  padding: 4px 12px 4px 8px;
+  margin-top: 4px;
+}
+
+.save-later-pill .MuiFormControlLabel-root {
+  margin: 0;
+}
+
+.save-later-pill .MuiCheckbox-root {
+  padding: 4px;
+  color: #22c55e;
+}
+
+.save-later-pill .MuiTypography-root {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: #15803d;
+}
+
+/* ============================================== */
+/*   Vertical Route Flow (Pickup -> Drop)         */
+/* ============================================== */
+.route-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.route-flow-link {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  padding: 22px 0 22px 31px;
+  gap: 18px;
+  min-height: 80px;
+}
+
+.route-flow-link::before {
+  content: '';
+  position: absolute;
+  left: 46px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: repeating-linear-gradient(to bottom, #cbd5e1, #cbd5e1 4px, transparent 4px, transparent 8px);
+  z-index: 1;
+}
+
+.route-flow-arrow {
+  position: relative;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 2px solid #cbd5e1;
+  color: #64748b;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+  transition: all 0.25s ease;
+}
+
+.route-flow-arrow:hover {
+  background: linear-gradient(135deg, #1890ff, #65387a);
+  color: #fff;
+  border-color: transparent;
+  transform: scale(1.05);
+}
+
+.route-flow-distance {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08), rgba(168, 85, 247, 0.08));
+  border: 1px dashed rgba(101, 56, 122, 0.25);
+  border-radius: 999px;
+  padding: 6px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.route-flow-distance .dist-value {
+  color: #1890ff;
+  font-weight: 700;
+  font-size: 14.5px;
+}
+
+.route-flow-distance .dist-label {
+  color: #64748b;
+  font-weight: 500;
+  font-size: 13.5px;
+}
+
+.route-flow-distance .dist-route {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-right: 2px;
+}
+
+.route-flow-distance .dist-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.route-flow-distance .dist-dot--pick {
+  background: #1890ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.18);
+}
+
+.route-flow-distance .dist-dot--drop {
+  background: #65387a;
+  box-shadow: 0 0 0 2px rgba(101, 56, 122, 0.18);
+}
+
+.route-flow-distance .dist-arrow {
+  color: #94a3b8;
+  font-size: 11px;
+  line-height: 1;
+}
+
+.route-flow-distance .dist-placeholder {
+  color: #94a3b8;
+  font-weight: 500;
+  font-style: italic;
+  font-size: 13.5px;
+}
+
+/* Swap pickup ↔ drop button in the route connector */
+.route-flow-swap {
+  margin-left: auto !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  text-transform: none !important;
+  font-weight: 600 !important;
+  font-size: 13.5px !important;
+  letter-spacing: 0.2px !important;
+  color: #475569 !important;
+  background: #ffffff !important;
+  border: 1px solid #e2e8f0 !important;
+  border-radius: 999px !important;
+  padding: 6px 14px !important;
+  min-width: 0 !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+}
+
+.route-flow-swap:hover {
+  color: #1e293b !important;
+  background: #f8fafc !important;
+  border-color: #cbd5e1 !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.08);
+}
+
+.route-flow-swap.Mui-disabled {
+  color: #cbd5e1 !important;
+  border-color: #eef2f6 !important;
+  background: #ffffff !important;
+  box-shadow: none;
+}
+
+
+/* Workspace background — dashboard shell.
+   Outer page is locked to 100vh on md+, no body scroll. Columns scroll internally.
+   sx-level rules on the JSX wrapper drive height/overflow per breakpoint — keep this
+   class background-only so it doesn't fight inline styles. */
+.orders-workspace-bg {
+  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%) !important;
+}
+
+/* Internal-scroll columns: thin, on-hover scrollbar that doesn't intrude on the design */
+.dashboard-scroll-col {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
+}
+
+.dashboard-scroll-col::-webkit-scrollbar {
+  width: 8px;
+}
+
+.dashboard-scroll-col::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dashboard-scroll-col::-webkit-scrollbar-thumb {
+  background-color: rgba(148, 163, 184, 0.35);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.dashboard-scroll-col:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(100, 116, 139, 0.55);
+  background-clip: padding-box;
+}
+
+/* Card section title with a leading gradient accent strip.
+   Used by "Other Details" and "Schedule" cards (and any other card section
+   that wants a premium-feeling left-edge accent before its h5 title). */
+.section-title-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.section-title-bar::before {
+  content: '';
+  width: 4px;
+  height: 22px;
+  border-radius: 4px;
+  background: linear-gradient(180deg, #1890ff, #096dd9);
+  flex-shrink: 0;
+}
+
+/* Accent variant for the Schedule card — uses the purple/violet gradient
+   from the drop-panel so users get a subtle visual cue distinguishing
+   sections without needing labels. */
+.section-title-bar--accent::before {
+  background: linear-gradient(180deg, #a855f7, #65387a);
+}
+
+.section-title-bar .MuiTypography-root {
+  margin-bottom: 0 !important;
+  line-height: 1.2;
+}
+
+/* Service Configuration Horizontal Header Row */
+.service-config-bar {
+  background: rgba(255, 255, 255, 0.75) !important;
+  backdrop-filter: blur(16px) !important;
+  -webkit-backdrop-filter: blur(16px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.6) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 4px 20px -5px rgba(148, 163, 184, 0.1) !important;
+  padding: 12px 20px !important;
+  margin-bottom: 12px !important;
+  flex-shrink: 0;
+}
+
+/* Main Dashboard 3-Column Console Wrapper */
+.console-dashboard-layout {
+  display: flex;
+  gap: 16px;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Balanced Left & Right Panes */
+.console-left-pane {
+  flex: 1.7;
+  /* ~63% width */
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.console-right-pane {
+  flex: 1;
+  /* ~37% width */
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+/* Custom Scrollbar for Individual Columns to keep console extremely clean */
+.console-left-pane::-webkit-scrollbar,
+.console-right-pane::-webkit-scrollbar {
+  width: 4px;
+}
+
+.console-left-pane::-webkit-scrollbar-track,
+.console-right-pane::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.console-left-pane::-webkit-scrollbar-thumb,
+.console-right-pane::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.3);
+  border-radius: 99px;
+}
+
+.console-left-pane::-webkit-scrollbar-thumb:hover,
+.console-right-pane::-webkit-scrollbar-thumb:hover {
+  background: rgba(148, 163, 184, 0.5);
+}
+
+/* Glassmorphism Card Style */
+.glass-card {
+  background: rgba(255, 255, 255, 0.8) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.5) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 10px 25px -5px rgba(62, 73, 84, 0.04), 0 4px 12px -2px rgba(62, 73, 84, 0.02) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.glass-card:hover {
+  box-shadow: 0 16px 35px -8px rgba(62, 73, 84, 0.07), 0 6px 16px -3px rgba(62, 73, 84, 0.03) !important;
+  border-color: rgba(255, 255, 255, 0.8) !important;
+}
+
+/* Premium Focus Glows inside Location Panel inputs */
+.pickup-panel .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #0ea5e9 !important;
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
+}
+
+.drop-panel .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+  border-color: #a855f7 !important;
+  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
+}
+
+/* Glowing active weight selector card variants */
+.weight-card-btn.active.weight-light {
+  background: rgba(14, 165, 233, 0.04) !important;
+  border-color: #0ea5e9 !important;
+  box-shadow: 0 6px 16px rgba(14, 165, 233, 0.15) !important;
+}
+
+.weight-card-btn.active.weight-light::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: #0ea5e9;
+}
+
+.weight-card-btn.active.weight-medium {
+  background: rgba(168, 85, 247, 0.04) !important;
+  border-color: #a855f7 !important;
+  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.15) !important;
+}
+
+.weight-card-btn.active.weight-medium::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: #a855f7;
+}
+
+.weight-card-btn.active.weight-heavy {
+  background: rgba(99, 102, 241, 0.04) !important;
+  border-color: #6366f1 !important;
+  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.15) !important;
+}
+
+.weight-card-btn.active.weight-heavy::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: #6366f1;
+}
+
+/* Premium Card Overrides */
+.orders-card {
+  background: #ffffff !important;
+  border: 1px solid #eef2f6 !important;
+  border-radius: 12px !important;
+  box-shadow: 0 10px 25px -5px rgba(62, 73, 84, 0.04), 0 4px 12px -2px rgba(62, 73, 84, 0.02) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  overflow: hidden;
+}
+
+/* ============================================== */
+/*   MUI Field Sizing — Readable on large screens */
+/* ============================================== */
+
+/* Bump TextField input + label sizes inside Pickup/Drop panels and order cards */
+.location-panel .MuiOutlinedInput-root,
+.orders-card .MuiOutlinedInput-root {
+  font-size: 14.5px !important;
+}
+
+.location-panel .MuiOutlinedInput-input,
+.orders-card .MuiOutlinedInput-input {
+  font-size: 14.5px !important;
+  padding-top: 11px !important;
+  padding-bottom: 11px !important;
+}
+
+.location-panel .MuiInputLabel-root,
+.orders-card .MuiInputLabel-root {
+  font-size: 14.5px !important;
+}
+
+/* When label is shrunk (floating up), keep it slightly smaller for the float effect */
+.location-panel .MuiInputLabel-root.MuiInputLabel-shrink,
+.orders-card .MuiInputLabel-root.MuiInputLabel-shrink {
+  font-size: 13px !important;
+}
+
+/* MUI helper text (validation / hints under fields) */
+.location-panel .MuiFormHelperText-root,
+.orders-card .MuiFormHelperText-root {
+  font-size: 12.5px !important;
+}
+
+/* Autocomplete options dropdown */
+.MuiAutocomplete-popper .MuiAutocomplete-option {
+  font-size: 14.5px !important;
+}
+
+/* Card section titles (h5 / h6) inside order cards — bump slightly for hierarchy */
+.orders-card .MuiTypography-h5 {
+  font-size: 19px !important;
+}
+
+.orders-card .MuiTypography-h6 {
+  font-size: 16.5px !important;
+}
+
+.orders-card:hover {
+  box-shadow: 0 16px 35px -8px rgba(62, 73, 84, 0.08), 0 6px 16px -3px rgba(62, 73, 84, 0.03) !important;
+}
+
+/* Glassmorphic elements */
+.glass-panel {
+  background: rgba(255, 255, 255, 0.8) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Trip Route Visual Connector */
+.connector-line-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.connector-line {
+  position: absolute;
+  top: 15%;
+  bottom: 15%;
+  width: 2px;
+  background: repeating-linear-gradient(to bottom,
+      #1890ff,
+      #1890ff 6px,
+      transparent 6px,
+      transparent 12px);
+  z-index: 1;
+}
+
+.connector-icon-wrapper {
+  background: #ffffff;
+  border: 2px solid #1890ff;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(24, 144, 255, 0.15);
+  z-index: 2;
+  transition: all 0.3s ease;
+}
+
+.connector-line-wrapper:hover .connector-icon-wrapper {
+  transform: scale(1.15) rotate(15deg);
+  box-shadow: 0 6px 14px rgba(24, 144, 255, 0.25);
+}
+
+/* Custom Interactive Cargo Weight Selector */
+.weight-selector-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  width: 100%;
+  margin: 8px 0;
+}
+
+.weight-card-btn {
+  background: #ffffff;
+  border: 1.5px solid #eef2f6;
+  border-radius: 10px;
+  padding: 10px 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  text-align: center;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+}
+
+.weight-card-btn:hover {
+  transform: translateY(-1.5px);
+  border-color: #cbd5e1;
+  background-color: #f8fafc;
+}
+
+.weight-card-btn.active {
+  background: rgba(24, 144, 255, 0.04);
+  border-color: #1890ff;
+  box-shadow: 0 4px 12px -2px rgba(24, 144, 255, 0.12);
+}
+
+.weight-card-btn.active::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: #1890ff;
+}
+
+.weight-card-icon {
+  font-size: 18px;
+  margin-bottom: 4px;
+  color: #64748b;
+  transition: all 0.3s ease;
+}
+
+.weight-card-btn.active .weight-card-icon {
+  color: #1890ff;
+  transform: scale(1.08);
+}
+
+.weight-card-label {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: #334155;
+  margin-bottom: 2px;
+}
+
+.weight-card-desc {
+  font-size: 9.5px;
+  color: #64748b;
+  line-height: 1.2;
+}
+
+/* Live Map Preview Container */
+.map-preview-wrapper {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  border: 1px solid #eef2f6;
+  height: 380px;
+  min-height: 380px;
+}
+
+/* Premium Cost & Metrics Dashboard */
+.pricing-summary-card {
+  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%) !important;
+  border: 1px solid #eef2f6 !important;
+  border-radius: 16px !important;
+  padding: 20px !important;
+}
+
+.price-metric-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px dashed #e2e8f0;
+}
+
+.price-metric-item:last-child {
+  border-bottom: none;
+}
+
+.price-metric-label {
+  font-size: 14.5px;
+  color: #475569;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.price-metric-value {
+  font-size: 16px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.price-metric-value.highlight {
+  color: #1890ff;
+}
+
+.total-charge-badge {
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(101, 56, 122, 0.08) 100%);
+  border: 1px solid rgba(24, 144, 255, 0.15);
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 16px;
+}
+
+.total-charge-label {
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: #65387A;
+  margin-bottom: 6px;
+}
+
+.total-charge-val {
+  font-size: 32px;
+  font-weight: 800;
+  color: #65387A;
+  line-height: 1.1;
+}
+
+/* Gradient Action Button */
+.gradient-btn-create {
+  background: linear-gradient(135deg, #1890ff 0%, #65387a 100%) !important;
+  color: #ffffff !important;
+  font-weight: 600 !important;
+  border-radius: 12px !important;
+  padding: 12px 28px !important;
+  box-shadow: 0 8px 20px -4px rgba(24, 144, 255, 0.3) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  border: none !important;
+}
+
+.gradient-btn-create:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 12px 28px -4px rgba(24, 144, 255, 0.45), 0 4px 10px rgba(101, 56, 122, 0.2) !important;
+}
+
+.gradient-btn-create:active {
+  transform: translateY(0) !important;
+}
+
+.gradient-btn-create:disabled {
+  background: #cbd5e1 !important;
+  color: #94a3b8 !important;
+  box-shadow: none !important;
+  cursor: not-allowed !important;
+}
+
+/* Completion checklist */
+.completion-checklist {
+  margin: 16px 0;
+  padding: 0;
+  list-style: none;
+}
+
+.completion-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14.5px;
+  color: #64748b;
+  margin-bottom: 10px;
+  transition: all 0.3s ease;
+  line-height: 1.4;
+}
+
+.completion-item.completed {
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.completion-bullet {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #cbd5e1;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.completion-item.completed .completion-bullet {
+  background-color: #10b981;
+  box-shadow: 0 0 8px #10b981;
+}
+
+/* Saved Address Modal Cards */
+.address-card-btn {
+  width: 100%;
+  border: 1.5px solid #eef2f6 !important;
+  border-radius: 12px !important;
+  padding: 16px !important;
+  background: #ffffff !important;
+  text-transform: none !important;
+  transition: all 0.2s ease !important;
+  margin-bottom: 12px;
+}
+
+.address-card-btn:hover {
+  border-color: #1890ff !important;
+  background-color: rgba(24, 144, 255, 0.02) !important;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+}
+
+.address-card-btn:disabled {
+  background-color: #f8fafc !important;
+  border-color: #e2e8f0 !important;
+  opacity: 0.7;
+}
+
+/* Status pulses */
+.pulse-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #10b981;
+  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+  animation: pulse-green 2s infinite;
+}
+
+@keyframes pulse-green {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
+  }
+
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+}
+
+.pulse-yellow {
+  background: #f59e0b;
+  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
+  animation: pulse-yellow-anim 2s infinite;
+}
+
+@keyframes pulse-yellow-anim {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
+  }
+
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+  }
+}
+
+/* Form layout responsiveness adjustments */
+@media (max-width: 959px) {
+  .connector-line-wrapper {
+    display: none;
+  }
+}
+
+/* ============================================== */
+/*   Side-by-Side Pickup / Drop (md+ breakpoint)  */
+/*   At md+ the route flow rotates to horizontal: */
+/*   [ PICKUP ] [ vertical connector ] [ DROP ]   */
+/* ============================================== */
+@media (min-width: 900px) {
+  .route-flow {
+    flex-direction: row;
+    align-items: stretch;
+    gap: 16px;
+  }
+
+  /* Each panel takes equal share of the row; min-width: 0 prevents flex blow-out */
+  .route-flow > .location-panel {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  /* Stack the inner field grids vertically — at ~340px panel width, side-by-side fields
+     don't have room for label + icon adornment + input. Force one column per panel. */
+  .route-flow > .location-panel .MuiGrid-container > .MuiGrid-item {
+    flex-basis: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* Connector becomes a narrow vertical strip between the two panels */
+  .route-flow-link {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 4px;
+    min-height: 0;
+    min-width: 92px;
+    flex-shrink: 0;
+    gap: 14px;
+  }
+
+  /* The vertical dashed line was a guide for the vertical layout — hide it in row mode.
+     The arrow circle + colored panel borders carry enough visual cue on their own. */
+  .route-flow-link::before {
+    display: none;
+  }
+
+  /* Rotate the down-arrow to point right (pickup → drop direction) */
+  .route-flow-arrow svg {
+    transform: rotate(-90deg);
+    transition: transform 0.25s ease;
+  }
+
+  /* Swap button no longer floats right — it stacks beneath the distance pill */
+  .route-flow-swap {
+    margin-left: 0 !important;
+    margin-top: 0 !important;
+  }
+
+  /* Distance pill: stack vertically inside the narrow connector column —
+     route dots on top, value below — and drop the "Distance" label since the
+     pill's existence is self-explanatory in this position. */
+  .route-flow-distance {
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px 10px;
+    text-align: center;
+    line-height: 1.2;
+  }
+
+  .route-flow-distance .dist-label {
+    display: none;
+  }
+
+  /* Compact the placeholder text so it fits when no addresses are set yet */
+  .route-flow-distance .dist-placeholder {
+    font-size: 11px;
+    line-height: 1.3;
+  }
+}
+
+/* On very wide screens (xl+), restore the 2-col inner grid inside each panel —
+   panels are now wide enough (~440px+) for label + icon + input pairs. */
+@media (min-width: 1536px) {
+  .route-flow > .location-panel .MuiGrid-container > .MuiGrid-item.MuiGrid-grid-sm-6 {
+    flex-basis: 50% !important;
+    max-width: 50% !important;
+  }
+}
+
+/* Act as senior frontend engineer and UI/UX specialist:
+   Scale down visual elements, paddings, and font sizes on laptop screens
+   to reclaim precious screen space and maintain a high-density, premium look. */
+@media (max-width: 1400px) {
+  .orders-card .MuiTypography-h5 {
+    font-size: 17px !important;
+  }
+  
+  .orders-card .MuiTypography-h6 {
+    font-size: 14.5px !important;
+  }
+
+  .lp-title {
+    font-size: 15.5px;
+  }
+  
+  .lp-subtitle {
+    font-size: 12px;
+    margin-top: 1px;
+  }
+
+  .lp-badge {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    font-size: 15px;
+  }
+
+  .lp-action-btn {
+    font-size: 12.5px !important;
+    padding: 5px 10px !important;
+  }
+
+  .route-flow-link {
+    padding: 16px 0 16px 26px;
+    min-height: 60px;
+  }
+
+  .route-flow-link::before {
+    left: 41px;
+  }
+
+  .route-flow-arrow {
+    width: 28px;
+    height: 28px;
+  }
+
+  .route-flow-distance {
+    padding: 4px 12px;
+    font-size: 12.5px;
+  }
+
+  .route-flow-swap {
+    font-size: 12px !important;
+    padding: 4px 10px !important;
+  }
+
+  .map-preview-wrapper {
+    height: 300px;
+    min-height: 300px;
+  }
+
+  .weight-card-btn {
+    padding: 8px 6px;
+  }
+  
+  .weight-card-label {
+    font-size: 11.5px;
+  }
+  
+  .weight-card-desc {
+    font-size: 9px;
+  }
+
+  .orders-card {
+    padding: 16px !important; /* Tighten general card padding from 24px */
+  }
+
+  .orders-card.page-header-row {
+    padding: 10px 16px !important; /* Tighten the header row padding */
+  }
+}
+
+/* Reclaim unused screen space around the workspace card on desktop and laptop viewports */
+@media (min-width: 900px) {
+  /* Expand the maximum width of the layout container so it spans the screen and removes empty margins */
+  .MuiContainer-root:has(.orders-workspace-bg) {
+    max-width: 1600px !important;
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+
+  /* Reduce the spacing outside the page container */
+  main:has(.orders-workspace-bg) {
+    padding: 16px !important;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/nearle/orders/createorder1.js b/src/pages/nearle/orders/createorder1.js
index 5302a3f..83d91ac 100644
--- a/src/pages/nearle/orders/createorder1.js
+++ b/src/pages/nearle/orders/createorder1.js
@@ -20,11 +20,13 @@ import {
   Switch,
   OutlinedInput,
   FormGroup,
-  FormControlLabel
+  FormControlLabel,
+  Box,
+  Card
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { Empty } from 'antd';
-import { FaPhoneAlt } from 'react-icons/fa';
+import { FaPhoneAlt, FaBox, FaBoxes, FaTruck } from 'react-icons/fa';
 import { GiDoorHandle } from 'react-icons/gi';
 import { FaLandmarkDome } from 'react-icons/fa6';
 import ClearIcon from '@mui/icons-material/Clear';
@@ -46,10 +48,124 @@ import dayjs from 'dayjs';
 import { enqueueSnackbar } from 'notistack';
 var utc = require('dayjs/plugin/utc');
 dayjs.extend(utc);
-import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
+import { SearchOutlined, CloseOutlined, CalendarOutlined, ClockCircleOutlined, FileTextOutlined, MessageOutlined } from '@ant-design/icons';
 import MyLocationIcon from '@mui/icons-material/MyLocation';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import { OpenToast } from 'components/third-party/OpenToast';
+import { MapContainer, TileLayer, Marker, Polyline, useMap } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import './OrdersRedesign.css';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import AnimateButton from 'components/@extended/AnimateButton';
+
+const pickupIcon = typeof window !== 'undefined' ? new L.Icon({
+  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+}) : null;
+
+const dropoffIcon = typeof window !== 'undefined' ? new L.Icon({
+  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+}) : null;
+
+const MapBoundsController = ({ startPoint, endPoint }) => {
+  const map = useMap();
+  useEffect(() => {
+    const points = [];
+    const pLat = parseFloat(startPoint?.latitude);
+    const pLng = parseFloat(startPoint?.longitude);
+    const dLat = parseFloat(endPoint?.latitude);
+    const dLng = parseFloat(endPoint?.longitude);
+
+    if (!isNaN(pLat) && !isNaN(pLng) && pLat !== 0 && pLng !== 0) {
+      points.push([pLat, pLng]);
+    }
+    if (!isNaN(dLat) && !isNaN(dLng) && dLat !== 0 && dLng !== 0) {
+      points.push([dLat, dLng]);
+    }
+
+    if (points.length === 1) {
+      map.setView(points[0], 14);
+    } else if (points.length === 2) {
+      map.fitBounds(points, { padding: [50, 50] });
+    }
+  }, [startPoint?.latitude, startPoint?.longitude, endPoint?.latitude, endPoint?.longitude, map]);
+  return null;
+};
+
+const OrderMap = ({ startPoint, endPoint, appLocaLat, appLocaLng }) => {
+  const defaultCenter = [
+    parseFloat(appLocaLat) || 11.0168,
+    parseFloat(appLocaLng) || 76.9558
+  ];
+
+  const hasPick = startPoint?.latitude && startPoint?.longitude && parseFloat(startPoint.latitude) !== 0;
+  const hasDrop = endPoint?.latitude && endPoint?.longitude && parseFloat(endPoint.latitude) !== 0;
+
+  const pickCoords = hasPick ? [parseFloat(startPoint.latitude), parseFloat(startPoint.longitude)] : null;
+  const dropCoords = hasDrop ? [parseFloat(endPoint.latitude), parseFloat(endPoint.longitude)] : null;
+
+  const [routePoints, setRoutePoints] = React.useState([]);
+
+  React.useEffect(() => {
+    if (!hasPick || !hasDrop) {
+      setRoutePoints([]);
+      return;
+    }
+
+    const getOSRMRoute = async () => {
+      const url = `https://router.project-osrm.org/route/v1/driving/${startPoint.longitude},${startPoint.latitude};${endPoint.longitude},${endPoint.latitude}?overview=full&geometries=geojson`;
+      try {
+        const res = await fetch(url);
+        const data = await res.json();
+        if (data.routes?.length) {
+          const points = data.routes[0].geometry.coordinates.map(([lng, lat]) => [lat, lng]);
+          setRoutePoints(points);
+        } else {
+          setRoutePoints([pickCoords, dropCoords]);
+        }
+      } catch (err) {
+        console.error('OSRM Error:', err);
+        setRoutePoints([pickCoords, dropCoords]);
+      }
+    };
+
+    getOSRMRoute();
+  }, [startPoint.latitude, startPoint.longitude, endPoint.latitude, endPoint.longitude, hasPick, hasDrop]);
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%', minHeight: '350px' }}>
+      <MapContainer
+        center={defaultCenter}
+        zoom={12}
+        style={{ width: '100%', height: '100%', minHeight: '350px' }}
+        zoomControl={true}
+      >
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; OpenStreetMap contributors'
+        />
+        {hasPick && <Marker position={pickCoords} icon={pickupIcon} />}
+        {hasDrop && <Marker position={dropCoords} icon={dropoffIcon} />}
+        {routePoints.length > 0 ? (
+          <Polyline positions={routePoints} color="#1890ff" weight={4} />
+        ) : (
+          hasPick && hasDrop && <Polyline positions={[pickCoords, dropCoords]} color="#1890ff" weight={4} />
+        )}
+        <MapBoundsController startPoint={startPoint} endPoint={endPoint} />
+      </MapContainer>
+    </div>
+  );
+};
 
 function loadScript(src, position, id) {
   if (!position) {
@@ -928,990 +1044,1338 @@ const Createorder1 = () => {
     <>
       {loading && <Loader />}
       {loading2 && <Loader />}
-      <Grid
-        container
-        spacing={3}
+
+      <Box
+        className="orders-workspace-bg"
         sx={{
-          position: 'sticky',
-          top: '60px',
-          bgcolor: theme.palette.background.default,
-          zIndex: 100,
+          p: 0,
+          m: 0,
+          minHeight: 'auto',
           display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'start',
-          alignItems: 'center',
-          spacing: 5
+          flexDirection: 'column'
         }}
       >
-        <Grid item xs={12} sx={{ width: '100%', mt: -1 }}>
-          <Stack>
-            <Typography variant="h3">Create Order</Typography>
-          </Stack>
-        </Grid>
-        <Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
-          <MainCard sx={{ height: '100%' }}>
-            <Grid container spacing={3} sx={{}}>
-              {/* ===================================================== || Choose App location  || ===================================================== */}
-              <Grid item xs={12} sm={4}>
-                <Autocomplete
-                  fullWidth
-                  autoFocus
-                  ref={locationRef}
-                  options={locations || []}
-                  getOptionLabel={(option) => `${option.locationname}`}
-                  onChange={(event, value, reason) => {
-                    if (reason === 'clear') {
-                      setAppId(0);
-                      setTenantid(0);
-                      setTenantValue(null);
-                      setTenantlist([]);
-                      setLocationid(0);
-                      setLocationValue(null);
-                      setTenantlocations([]);
-                      setPickCust(null);
-                      setDropCust(null);
-                    } else {
-                      setAppId(value.applocationid);
-                      setPickCust(null);
-                      setDropCust(null);
-                      setTenantid(0);
-                      setTenantValue(null);
-                      setLocationid(0);
-                      setLocationValue(null);
-                      setTenantlocations([]);
-                    }
-                  }}
-                  renderInput={(params) => <TextField {...params} placeholder={'Choose Location'} label="Location" />}
-                />
-              </Grid>
-              {/* ===================================================== || Choose client  || ===================================================== */}
-              <Grid item xs={12} sm={4}>
-                <Autocomplete
-                  fullWidth
-                  options={tenantlist || []}
-                  value={tenantValue}
-                  onOpen={(event) => {
-                    if (!appId) {
-                      event.preventDefault();
-                      OpenToast('Please select a your location first!', 'warning', 3000);
-                      setTimeout(() => {
-                        locationRef.current?.focus();
-                      }, 0);
-                    }
-                  }}
-                  onChange={(e, val, reason) => {
-                    if (reason == 'clear') {
-                      setTenantid(0);
-                      setTenantValue(null);
-                      setLocationid(0);
-                      setLocationValue(null);
-                      setTenantlocations([]);
-                      setPickCust(null);
-                      setDropCust(null);
-                    } else {
-                      setTenantid(val?.tenantid || 0);
-                      setTenantValue(val);
-                      setLocationid(0);
-                      setLocationValue(null);
-                      fetchTenantPricing(val.tenantid);
-                      gettenantlocations(val.tenantid);
-                      setDropCust(null);
-                    }
-                  }}
-                  renderInput={(params) => <TextField {...params} placeholder="Choose Client" label="Client" inputRef={tenantRef} />}
-                />
-              </Grid>
-              {/* ===================================================== ||Business Location || ===================================================== */}
-              <Grid item xs={12} sm={4}>
-                {tenantLocations.length == 1 ? (
+        {/* Header Section — single white card spanning the full row:
+            title on the left, service configurators inline on the right. */}
+        <Card
+          className="orders-card page-header-row"
+          sx={{
+            mb: { xs: 2, sm: 2.5 },
+            display: 'flex',
+            flexDirection: { xs: 'column', lg: 'row' },
+            alignItems: { xs: 'stretch', lg: 'center' },
+            justifyContent: 'space-between',
+            gap: { xs: 2, lg: 3 },
+            px: { xs: 2, sm: 2.5 },
+            py: { xs: 1.25, sm: 1.5 },
+            flexShrink: 0
+          }}
+        >
+          <Box
+            className="header-title-block"
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 0.5,
+              minWidth: 0,
+              flex: { lg: '1 1 auto' }
+            }}
+          >
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+              <Typography variant="h3" sx={{ fontWeight: 700, color: '#1e293b', lineHeight: 1.15 }}>
+                Create New Order
+              </Typography>
+            </Box>
+            <Typography variant="body1" sx={{ color: '#64748b', fontWeight: 500 }}>
+              Configure client coordinates, delivery payloads, and dispatch schedules in real-time.
+            </Typography>
+          </Box>
+
+          <Box
+            className="header-configurators"
+            sx={{
+              display: 'flex',
+              flexDirection: { xs: 'column', sm: 'row' },
+              alignItems: { xs: 'stretch', sm: 'center' },
+              justifyContent: { xs: 'stretch', lg: 'flex-end' },
+              gap: 1.5,
+              p: { xs: 0.5, sm: 1, lg: 1.5 },
+              width: { xs: '100%', lg: 'auto' },
+              flexShrink: 0
+            }}
+          >
+            {/* Choose App location */}
+            <Box sx={{ width: { xs: '100%', sm: 190, md: 210, xl: 230 } }}>
+              <Autocomplete
+                fullWidth
+                autoFocus
+                size="small"
+                ref={locationRef}
+                options={locations || []}
+                getOptionLabel={(option) => `${option.locationname}`}
+                onChange={(event, value, reason) => {
+                  if (reason === 'clear') {
+                    setAppId(0);
+                    setTenantid(0);
+                    setTenantValue(null);
+                    setTenantlist([]);
+                    setLocationid(0);
+                    setLocationValue(null);
+                    setTenantlocations([]);
+                    setPickCust(null);
+                    setDropCust(null);
+                  } else {
+                    setAppId(value.applocationid);
+                    setPickCust(null);
+                    setDropCust(null);
+                    setTenantid(0);
+                    setTenantValue(null);
+                    setLocationid(0);
+                    setLocationValue(null);
+                    setTenantlocations([]);
+                  }
+                }}
+                renderInput={(params) => (
                   <TextField
-                    variant="outlined"
-                    fullWidth
-                    label={'Business Location'}
-                    value={tenantLocations[0].locationname}
+                    {...params}
+                    size="small"
+                    placeholder="Choose Location"
+                    label="Location"
+                    InputLabelProps={{ shrink: true }}
+                    sx={{ '& .MuiOutlinedInput-root': { borderRadius: '12px', paddingLeft: '12px' } }}
                     InputProps={{
-                      style: { color: theme.palette.primary.main },
+                      ...params.InputProps,
                       startAdornment: (
-                        <InputAdornment position="start">
-                          <MyLocationIcon color="primary" />
-                        </InputAdornment>
+                        <>
+                          <FaLocationDot style={{ color: '#94a3b8', fontSize: 14, marginRight: 8, flexShrink: 0 }} />
+                          {params.InputProps.startAdornment}
+                        </>
                       )
                     }}
                   />
-                ) : (
-                  <Autocomplete
-                    fullWidth
-                    value={locationValue}
-                    options={tenantLocations || []}
-                    getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
-                    onOpen={(event) => {
-                      if (!appId && !tenantid) {
-                        event.preventDefault();
-                        OpenToast('Please select Location and Tenant first!', 'warning', 3000);
-                        setTimeout(() => {
-                          locationRef.current?.focus();
-                        }, 0);
-                      } else if (!tenantid) {
-                        event.preventDefault();
-                        OpenToast('Please select a your  Tenant first!', 'warning', 3000);
-                        setTimeout(() => {
-                          tenantRef.current?.focus();
-                        }, 0);
-                      }
+                )}
+              />
+            </Box>
+
+            {/* Choose Client */}
+            <Box sx={{ width: { xs: '100%', sm: 190, md: 210, xl: 230 } }}>
+              <Autocomplete
+                fullWidth
+                size="small"
+                options={tenantlist || []}
+                value={tenantValue}
+                onOpen={(event) => {
+                  if (!appId) {
+                    event.preventDefault();
+                    OpenToast('Please select a your location first!', 'warning', 3000);
+                    setTimeout(() => {
+                      locationRef.current?.focus();
+                    }, 0);
+                  }
+                }}
+                onChange={(e, val, reason) => {
+                  if (reason == 'clear') {
+                    setTenantid(0);
+                    setTenantValue(null);
+                    setLocationid(0);
+                    setLocationValue(null);
+                    setTenantlocations([]);
+                    setPickCust(null);
+                    setDropCust(null);
+                  } else {
+                    setTenantid(val?.tenantid || 0);
+                    setTenantValue(val);
+                    setLocationid(0);
+                    setLocationValue(null);
+                    fetchTenantPricing(val.tenantid);
+                    gettenantlocations(val.tenantid);
+                    setDropCust(null);
+                  }
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    size="small"
+                    placeholder="Choose Client"
+                    label="Client"
+                    inputRef={tenantRef}
+                    InputLabelProps={{ shrink: true }}
+                    sx={{ '& .MuiOutlinedInput-root': { borderRadius: '12px', paddingLeft: '12px' } }}
+                    InputProps={{
+                      ...params.InputProps,
+                      startAdornment: (
+                        <>
+                          <FaUser style={{ color: '#94a3b8', fontSize: 13, marginRight: 8, flexShrink: 0 }} />
+                          {params.InputProps.startAdornment}
+                        </>
+                      )
                     }}
-                    onChange={(event, value, reason) => {
-                      if (reason === 'clear') {
-                        setLocationid(0);
-                        setLocationValue(null);
-                        setPickCust(null);
-                      } else {
-                        setLocationid(value.locationid || 0);
-                        setLocationValue(value);
-                        setDefaultPickup(value);
-                        setPickupSlotsList(value?.slots);
-                      }
-                    }}
-                    renderInput={(params) => (
-                      <TextField {...params} placeholder="Select Business Locations" label="Business Location" color="primary" />
-                    )}
                   />
                 )}
-              </Grid>
-            </Grid>
-          </MainCard>
-        </Grid>
-      </Grid>
-      {/* ================================================= || Pickup & Drop || ================================================= */}
+              />
+            </Box>
 
-      <Grid container sx={{}}>
-        <Grid item xs={12} sx={{ mt: 2 }}>
-          {/* <Box sx={{ overflow: 'auto', border: 1, borderColor: 'blue', borderRadius: 2, backgroundColor: 'red', p: 3 }}> */}
-          <Grid container spacing={1}>
-            <Grid item xs={12}>
-              <Grid container spacing={2} sx={{ height: '100%' }}>
-                {/* ================================================= || Pickup || ================================================= */}
+            {/* Business Location */}
+            <Box sx={{ width: { xs: '100%', sm: 210, md: 230, xl: 250 } }}>
+              {tenantLocations.length == 1 ? (
+                <TextField
+                  variant="outlined"
+                  fullWidth
+                  size="small"
+                  label="Business Location"
+                  value={tenantLocations[0].locationname}
+                  InputLabelProps={{ shrink: true }}
+                  sx={{ '& .MuiOutlinedInput-root': { borderRadius: '12px', paddingLeft: '12px' } }}
+                  InputProps={{
+                    style: { color: theme.palette.primary.main },
+                    startAdornment: (
+                      <MyLocationIcon style={{ color: '#94a3b8', fontSize: 16, marginRight: 8, flexShrink: 0 }} />
+                    )
+                  }}
+                />
+              ) : (
+                <Autocomplete
+                  fullWidth
+                  size="small"
+                  value={locationValue}
+                  options={tenantLocations || []}
+                  getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
+                  onOpen={(event) => {
+                    if (!appId && !tenantid) {
+                      event.preventDefault();
+                      OpenToast('Please select Location and Tenant first!', 'warning', 3000);
+                      setTimeout(() => {
+                        locationRef.current?.focus();
+                      }, 0);
+                    } else if (!tenantid) {
+                      event.preventDefault();
+                      OpenToast('Please select a your Tenant first!', 'warning', 3000);
+                      setTimeout(() => {
+                        tenantRef.current?.focus();
+                      }, 0);
+                    }
+                  }}
+                  onChange={(event, value, reason) => {
+                    if (reason === 'clear') {
+                      setLocationid(0);
+                      setLocationValue(null);
+                      setPickCust(null);
+                    } else {
+                      setLocationid(value.locationid || 0);
+                      setLocationValue(value);
+                      setDefaultPickup(value);
+                      setPickupSlotsList(value?.slots);
+                    }
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      size="small"
+                      placeholder="Select Business Locations"
+                      label="Business Location"
+                      color="primary"
+                      InputLabelProps={{ shrink: true }}
+                      sx={{ '& .MuiOutlinedInput-root': { borderRadius: '12px', paddingLeft: '12px' } }}
+                      InputProps={{
+                        ...params.InputProps,
+                        startAdornment: (
+                          <>
+                            <MyLocationIcon style={{ color: '#94a3b8', fontSize: 16, marginRight: 8, flexShrink: 0 }} />
+                            {params.InputProps.startAdornment}
+                          </>
+                        )
+                      }}
+                    />
+                  )}
+                />
+              )}
+            </Box>
+          </Box>
+        </Card>
 
-                <Grid item xs={12} sm={6}>
-                  <MainCard sx={{ height: '100%' }}>
-                    <Grid container spacing={2}>
-                      <Grid item xs={12}>
-                        <Stack direction={'row'} justifyContent={'space-between'}>
-                          <Typography variant="h5" sx={{ mb: 2 }}>
-                            Pickup Details
-                          </Typography>
-                          <Stack display={'flex'} direction={'row'}>
-                            {/* <FormControlLabel
-                              control={
-                                <Checkbox
-                                  disabled={!locationid}
-                                  onChange={(e) => {
-                                    if (e.target.checked) {
-                                      console.log('defaultPickup', defaultPickup);
-                                      setPickCust(defaultPickup);
-                                    } else {
-                                      setPickCust(null);
-                                    }
-                                  }}
-                                />
-                              }
-                              label="Default Location"
-                            /> */}
-                            <Button
-                              variant="contained"
-                              size="small"
-                              disabled={!locationid}
-                              onClick={() => {
-                                if (!appId && !tenantid && !locationid) {
-                                  OpenToast('Please select Location, Tenant and Business!', 'warning', 3000);
-                                } else if (!appId && !tenantid) {
-                                  OpenToast('Please select Location and Tenant!', 'warning', 3000);
-                                } else if (!appId) {
-                                  OpenToast('Please select Location!', 'warning', 3000);
-                                } else {
-                                  setIsCustomerOpen(true);
-                                  setpickordrop(1);
-                                  setPickCust(null);
-                                  setInputValue1('');
-                                  setSearchCustList('');
-                                }
-                              }}
-                            >
-                              Select Pickup
-                            </Button>
-                          </Stack>
-                        </Stack>
-                        {/* new1 */}
-                      </Grid>
+        {/* Workspace 2-Column responsive layout */}
+        <Grid container spacing={{ xs: 2.5, sm: 3, lg: 4 }}>
 
-                      <Grid item xs={12} sx={{}}>
-                        <Grid container spacing={4}>
-                          {/* ====================================== ||Contact Name (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              inputRef={textFieldRef1}
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaUser />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Contact Name"
-                              value={pickCust?.firstname || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, firstname: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Contact Number(pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              error={numErr1}
-                              inputRef={textFieldRef1a}
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              type="number"
-                              InputProps={{
-                                inputProps: {
-                                  maxLength: 10
-                                },
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaPhoneAlt color={numErr1 && 'red'} />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Contact Number"
-                              value={pickCust?.contactno || ''}
-                              onChange={(e) => {
-                                if (e.target.value.length <= 10) {
-                                  setPickCust({ ...pickCust, contactno: e.target.value });
-                                }
-                                if (pickNum == e.target.value) {
-                                  setShowCheck1(0);
-                                } else {
-                                  setShowCheck1(1);
-                                }
-                                if (e.target.value.length < 10) {
-                                  setNumErr1(true);
-                                } else {
-                                  setNumErr1(false);
-                                }
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== || Address(pick) || ====================================== */}
-                          <Grid item xs={12}>
-                            <Stack spacing={1.25} sx={{ mt: 0 }}>
-                              {addId1 == 0 ? (
-                                <div>
-                                  <TextField
-                                    // disabled={!appId || !tenantid || !locationid}
-                                    id="addressAuto1"
-                                    fullWidth
-                                    label={'Address'}
-                                    variant="outlined"
-                                    value={inputValue1 || ''}
-                                    onChange={(e) => setInputValue1(e.target.value)}
-                                    InputProps={{
-                                      endAdornment: (
-                                        <IconButton
-                                          onClick={() => {
-                                            setInputValue1('');
-                                            setPickCust({
-                                              ...pickCust,
-                                              doorno: '',
-                                              suburb: '',
-                                              city: '',
-                                              postcode: '',
-                                              landmark: ''
-                                            });
-                                            setShowDistance(false);
-                                            setStartPoint({ latitude: 0, longitude: 0 });
-                                          }}
-                                          size="small"
-                                        >
-                                          <CloseIcon />
-                                        </IconButton>
-                                      )
-                                    }}
-                                  />
-                                </div>
-                              ) : (
-                                <TextField
-                                  variant="outlined"
-                                  InputProps={{
-                                    endAdornment: (
-                                      <IconButton
-                                        onClick={() => {
-                                          setAddId1(0);
-                                          setPickCust({
-                                            ...pickCust,
-                                            doorno: '',
-                                            suburb: '',
-                                            city: '',
-                                            postcode: '',
-                                            landmark: ''
-                                          });
-                                          setShowDistance(false);
-                                          setStartPoint({ latitude: 0, longitude: 0 });
-                                        }}
-                                      >
-                                        <ClearIcon />
-                                      </IconButton>
-                                    )
-                                  }}
-                                  value={pickCust?.address || ''}
-                                  onChange={(e) => {
-                                    setPickCust({ ...pickCust, address: e.target.value });
-                                    if (e.target.value == '') {
-                                      setAddId1(0);
-                                      setShowDistance(false);
-                                      setStartPoint({ latitude: 0, longitude: 0 });
-                                    }
-                                  }}
-                                />
-                              )}
-                            </Stack>
-                          </Grid>
-                          {/* ====================================== ||Door No (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <GiDoorHandle />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Door No / Street"
-                              value={pickCust?.doorno || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, doorno: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== || Suburb (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaLocationDot />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Location"
-                              value={pickCust?.suburb || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, suburb: e.target.value });
-                              }}
-                            />
-                          </Grid>
+          {/* Left Column: Form & Configurator (7.5 columns on lg+) */}
+          <Grid
+            item
+            xs={12}
+            lg={7.5}
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: { xs: 2.5, sm: 3, lg: 4 }
+            }}
+          >
 
-                          {/* ====================================== || postcode (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <TbMapPinCode />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Postcode"
-                              value={pickCust?.postcode || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, postcode: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== || Landmark (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaLandmarkDome />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Landmark"
-                              value={pickCust?.landmark || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, landmark: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Checkbox save for later (pick) || ====================================== */}
-                          {showCheck1 == 1 && (
-                            <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
-                              <FormGroup>
-                                <FormControlLabel
-                                  control={
-                                    <Checkbox
-                                      checked={isNumChange1 === 1}
-                                      onChange={(e) => {
-                                        setIsNumChange1(e.target.checked ? 1 : 0);
-                                      }}
-                                    />
-                                  }
-                                  label="Save For Later"
-                                />
-                              </FormGroup>
-                            </Grid>
-                          )}
-                        </Grid>
-                      </Grid>
+            {/* Card 2: Route Planner (Pickup & Drop) — tighter padding on md+ since
+                the two panels now sit side-by-side and need the horizontal room. */}
+            <Card className="orders-card" sx={{ p: { xs: 2, sm: 2.5, lg: 2 } }}>
+              <Box className="route-flow">
+
+                {/* Pickup Details Block */}
+                <Box className="location-panel pickup-panel">
+                  <Box className="lp-header">
+                    <Box className="lp-header-title">
+                      <Box className="lp-badge">
+                        <FaLocationDot />
+                      </Box>
+                      <Box>
+                        <Typography className="lp-title">Pickup</Typography>
+                        <Typography className="lp-subtitle">Where to collect the parcel</Typography>
+                      </Box>
+                    </Box>
+                    <Box className="lp-header-actions">
+                      <Button
+                        className="lp-action-btn"
+                        size="small"
+                        disabled={!locationid}
+                        startIcon={<SearchOutlined style={{ fontSize: 13 }} />}
+                        onClick={() => {
+                          if (!appId && !tenantid && !locationid) {
+                            OpenToast('Please select Location, Tenant and Business!', 'warning', 3000);
+                          } else if (!appId && !tenantid) {
+                            OpenToast('Please select Location and Tenant!', 'warning', 3000);
+                          } else if (!appId) {
+                            OpenToast('Please select Location!', 'warning', 3000);
+                          } else {
+                            setIsCustomerOpen(true);
+                            setpickordrop(1);
+                            setPickCust(null);
+                            setInputValue1('');
+                            setSearchCustList('');
+                          }
+                        }}
+                      >
+                        From Saved
+                      </Button>
+                    </Box>
+                  </Box>
+
+                  {/* Contact group */}
+                  <Typography className="field-group-caption">
+                    Contact
+                  </Typography>
+                  <Grid container spacing={2.5}>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        inputRef={textFieldRef1}
+                        fullWidth
+                        size="small"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <FaUser style={{ color: '#64748b' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        variant="outlined"
+                        label="Contact Name"
+                        value={pickCust?.firstname || ''}
+                        onChange={(e) => {
+                          setPickCust({ ...pickCust, firstname: e.target.value });
+                        }}
+                      />
                     </Grid>
-                  </MainCard>
-                </Grid>
-
-                {/* ================================================= || Drop || ================================================= */}
-
-                <Grid item xs={12} sm={6}>
-                  <MainCard sx={{ height: '100%' }}>
-                    <Grid container spacing={2} sx={{ height: '100%' }}>
-                      <Grid item xs={12} sx={{ height: '100%' }}>
-                        <Stack direction={'row'} justifyContent={'space-between'}>
-                          <Typography variant="h5" sx={{ mb: 2 }}>
-                            Drop Details
-                          </Typography>{' '}
-                          <Button
-                            variant="contained"
-                            disabled={!locationid}
-                            size="small"
-                            onClick={() => {
-                              if (!appId && !tenantid && !locationid) {
-                                OpenToast('Please select Location, Tenant and Business!', 'warning', 3000);
-                              } else if (!appId && !tenantid) {
-                                OpenToast('Please select Location and Tenant!', 'warning', 3000);
-                              } else if (!appId) {
-                                OpenToast('Please select Location!', 'warning', 3000);
-                              } else {
-                                setIsCustomerOpen(true);
-                                setpickordrop(2);
-                                setInputValue2('');
-                              }
-                            }}
-                          >
-                            Select Drop
-                          </Button>
-                        </Stack>
-                      </Grid>
-
-                      <Grid item xs={12}>
-                        <Grid container spacing={4}>
-                          {/* ====================================== ||Contact Name (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              inputRef={textFieldRef2}
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Contact Name"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaUser />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.firstname || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, firstname: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Contact Number (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              error={numErr2}
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              type="number"
-                              variant="outlined"
-                              label="Contact Number"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaPhoneAlt color={numErr2 && 'red'} />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.contactno || ''}
-                              onChange={(e) => {
-                                if (e.target.value.length <= 10) {
-                                  setDropCust({ ...dropCust, contactno: e.target.value });
-                                }
-                                if (dropNum == e.target.value) {
-                                  setShowCheck2(0);
-                                } else {
-                                  setShowCheck2(1);
-                                }
-                                if (e.target.value.length < 10) {
-                                  setNumErr2(true);
-                                } else {
-                                  setNumErr2(false);
-                                }
-                              }}
-                              sx={{ color: numErr2 ? 'red' : 'inherit' }}
-                            />
-                          </Grid>
-
-                          {/* ====================================== || Address (drop) || ====================================== */}
-                          <Grid item xs={12}>
-                            <Stack spacing={1.25} sx={{ mt: 0 }}>
-                              {addId2 == 0 ? (
-                                <div>
-                                  <TextField
-                                    // disabled={!appId || !tenantid || !locationid}
-                                    id="addressAuto2"
-                                    label="Address "
-                                    variant="outlined"
-                                    fullWidth
-                                    value={inputValue2 || ''}
-                                    onChange={(e) => setInputValue2(e.target.value)}
-                                    InputProps={{
-                                      endAdornment: (
-                                        <IconButton
-                                          onClick={() => {
-                                            setInputValue2('');
-                                            setDropCust({
-                                              ...dropCust,
-                                              doorno: '',
-                                              suburb: '',
-                                              city: '',
-                                              postcode: '',
-                                              landmark: ''
-                                            });
-                                            setShowDistance(false);
-                                            setEndPoint({ latitude: 0, longitude: 0 });
-                                          }}
-                                          size="small"
-                                        >
-                                          <CloseIcon />
-                                        </IconButton>
-                                      )
-                                    }}
-                                  />
-                                </div>
-                              ) : (
-                                <TextField
-                                  variant="outlined"
-                                  InputProps={{
-                                    endAdornment: (
-                                      <IconButton
-                                        onClick={() => {
-                                          setAddId2(0);
-                                          setDropCust({
-                                            ...dropCust,
-                                            // firstname: '',
-                                            // contactno: '',
-                                            doorno: '',
-                                            suburb: '',
-                                            city: '',
-                                            postcode: '',
-                                            landmark: ''
-                                          });
-                                          setShowDistance(false);
-                                          setEndPoint({ latitude: 0, longitude: 0 });
-                                        }}
-                                      >
-                                        <ClearIcon />
-                                      </IconButton>
-                                    )
-                                  }}
-                                  value={dropCust?.address || ''}
-                                  onChange={(e) => {
-                                    setPickCust({ ...dropCust, address: e.target.value });
-                                    if (e.target.value == '') {
-                                      setAddId2(0);
-                                      setShowDistance(false);
-                                      setEndPoint({ latitude: 0, longitude: 0 });
-                                    }
-                                  }}
-                                />
-                              )}
-                            </Stack>
-                          </Grid>
-
-                          {/* ====================================== ||Door No (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Door No / Street"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <GiDoorHandle />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.doorno || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, doorno: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Suburb (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Location"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaLocationDot />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.suburb || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, suburb: e.target.value });
-                              }}
-                            />
-                          </Grid>
-
-                          {/* ====================================== ||Postcode (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Postcode"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <TbMapPinCode />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.postcode || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, postcode: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Landmark (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Landmark"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaLandmarkDome />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.landmark || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, landmark: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Checkbox save for later (drop) || ====================================== */}
-                          {showCheck2 == 1 && (
-                            <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
-                              <FormGroup>
-                                <FormControlLabel
-                                  control={
-                                    <Checkbox
-                                      checked={isNumChange2 === 1}
-                                      onChange={(e) => {
-                                        setIsNumChange2(e.target.checked ? 1 : 0);
-                                      }}
-                                    />
-                                  }
-                                  label="Save For Later"
-                                />
-                              </FormGroup>
-                            </Grid>
-                          )}
-                        </Grid>
-                      </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        error={numErr1}
+                        inputRef={textFieldRef1a}
+                        fullWidth
+                        size="small"
+                        type="number"
+                        InputProps={{
+                          inputProps: { maxLength: 10 },
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <FaPhoneAlt style={{ color: numErr1 ? '#ef4444' : '#64748b' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        variant="outlined"
+                        label="Contact Number"
+                        value={pickCust?.contactno || ''}
+                        onChange={(e) => {
+                          if (e.target.value.length <= 10) {
+                            setPickCust({ ...pickCust, contactno: e.target.value });
+                          }
+                          if (pickNum == e.target.value) {
+                            setShowCheck1(0);
+                          } else {
+                            setShowCheck1(1);
+                          }
+                          if (e.target.value.length < 10) {
+                            setNumErr1(true);
+                          } else {
+                            setNumErr1(false);
+                          }
+                        }}
+                      />
                     </Grid>
-                  </MainCard>
-                </Grid>
-                {/* ================================================= || Category || ================================================= */}
-                <Grid item xs={12} sx={{}}>
-                  <MainCard sx={{ height: '100%' }}>
-                    <Grid container spacing={2}>
-                      <Grid item xs={12} sm={4}>
-                        <Stack>
-                          <Autocomplete
-                            id="combo-box-demo"
-                            options={subCat}
-                            getOptionLabel={(option) => `${option.subcategoryname}` || ''}
-                            fullWidth
-                            renderInput={(params) => <TextField {...params} label={'Category'} />}
-                            onChange={(event, value, reason) => {
-                              if (value) {
-                                console.log(value);
-                                setSubCatName(value.subcategoryname || '');
-                                setSubCatId(value.subcategoryid || 0);
-                              } else if (reason) {
-                                setSubCatName(null);
-                                setSubCatId(null);
-                              }
-                            }}
-                          />
-                        </Stack>
-                      </Grid>
-                      <Grid item xs={12} sm={4}>
-                        <Stack>
-                          <TextField
-                            type="number"
-                            value={collectionamt}
-                            fullWidth
-                            label={'Cash Collect'}
-                            onChange={(e) => {
-                              setCollectionamt(e.target.value);
-                            }}
-                            inputProps={{ min: 0 }}
-                          />
-                        </Stack>
-                      </Grid>
-                      <Grid item xs={12} sm={4}>
-                        <Stack>
-                          <TextField
-                            type="number"
-                            value={quantity}
-                            fullWidth
-                            label={'Quantity'}
-                            onChange={(e) => {
-                              setQuantity(e.target.value);
-                            }}
-                            inputProps={{ min: 1 }}
-                          />
-                        </Stack>
-                      </Grid>
-                    </Grid>
-                  </MainCard>
-                </Grid>
-                {/* ================================================= || Time || ================================================= */}
-                <Fragment>
-                  <Grid item xs={12} sm={6}>
-                    <MainCard sx={{ mt: 2, height: 'auto' }}>
-                      <Grid container>
-                        <Grid item xs={12}>
-                          <Typography variant="h5">Pickup Slots </Typography>
-                          <Typography variant="h6" sx={{ marginTop: 2 }}>
-                            Date
-                          </Typography>
-                          <LocalizationProvider dateAdapter={AdapterDayjs} sx={{}}>
-                            <DatePicker
-                              format="DD-MM-YYYY"
-                              onChange={(e) => {
-                                let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
-                                console.log('dateres11');
-                                console.log(dateres11);
-                                setSelectedtime('');
-                                if (dateres11 <= 0) {
-                                  console.log('startdate', e);
-                                  setStartdate(e);
-
-                                  let arr = [];
-                                  timeslotarr.map((val) => {
-                                    if (
-                                      dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0
-                                    ) {
-                                      arr.push(val);
-                                    }
-                                  });
-                                } else {
-                                  setAlertmessage('choose Upcoming Date');
-                                  opentoast('choose Upcoming Date', 'warning');
-                                  setStartdate(NaN);
-                                }
-                              }}
-                              value={dayjs(startdate)}
-                              sx={{ width: '100%', mt: 2 }}
-                              disablePast
-                            />
-                          </LocalizationProvider>
-                          <Typography variant="h6" sx={{ my: 2 }}>
-                            Pickup Time Slot
-                          </Typography>
-
-                          <Autocomplete
-                            options={pickupSlotsList || []}
-                            onChange={(e, newValue, reason) => {
-                              if (reason === 'clear') {
-                                setSelectedtime(null);
-                                setPickupSlot(null);
-                              } else {
-                                // Convert to AM/PM and merge with date
-                                const formattedTime = dayjs(newValue.time, 'HH:mm').format('hh:mm A');
-                                setSelectedtime(formattedTime);
-                                const finalDateTime = dayjs(`${startdate} ${formattedTime}`, 'MM-DD-YYYY hh:mm A').format(
-                                  'YYYY-MM-DD hh:mm A'
-                                );
-                                setPickupSlot(finalDateTime);
-                              }
-                            }}
-                            getOptionLabel={(option) => `${option.name} (${dayjs(option.time, 'HH:mm').format('hh:mm A')})`}
-                            renderInput={(params) => <TextField {...params} placeholder="Select Pickup Slot" />}
-                          />
-                          {/* <MainCard
-                            sx={{
-                              height: '210px',
-                              mt: 1,
-                              overflowY: 'scroll',
-                              '&::-webkit-scrollbar': {
-                                width: '3px',
-                                height: '10px'
-                              },
-                              '&::-webkit-scrollbar-thumb': {
-                                backgroundColor: '#65387A'
-                              }
-                            }}
-                          >
-                            <Grid container spacing={2}>
-                              {timeslotarr.map((val, index) => {
-                                if (
-                                  dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0
-                                ) {
-                                  return (
-                                    <Fragment key={index}>
-                                      <Grid item>
-                                        <Chip
-                                          key={index}
-                                          sx={{ cursor: 'pointer' }}
-                                          color={dayjs(selectedtime).format('HH:mm') == dayjs(val).format('HH:mm') ? 'primary' : 'default'}
-                                          label={dayjs(val).format('hh:mm A')}
-                                          onClick={() => {
-                                            if (distance > appLocaRadius) {
-                                              setOpen(true);
-                                            } else if (showDistance) {
-                                              console.log('selectedtime', val);
-                                              setSelectedtime(val);
-                                            } else {
-                                              opentoast('Out of city limit', 'error');
-                                            }
-                                          }}
-                                        />
-                                      </Grid>
-                                    </Fragment>
-                                  );
-                                }
-                              })}
-                            </Grid>
-                          </MainCard> */}
-                        </Grid>
-                      </Grid>
-                    </MainCard>
                   </Grid>
-                  <Grid item xs={12} sm={6}>
-                    <MainCard sx={{ mt: 2 }}>
-                      {showDistance && (
-                        <Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', mb: 3 }}>
-                          <Stack spacing={1.5}>
-                            <Chip label={`Distance: ${distance} km`} size="medium" variant="contained" color="primary" />
-                          </Stack>
-                          <Stack spacing={1.5}>
-                            <Chip label={`Charge: ₹${totalCharge.toFixed(2)}`} size="medium" variant="contained" color="primary" />
-                          </Stack>
-                        </Stack>
+
+                  {/* Address Autocomplete */}
+                  <Typography className="field-group-caption" sx={{ mt: 3 }}>
+                    Address Lookup
+                  </Typography>
+                  {addId1 == 0 ? (
+                    <TextField
+                      id="addressAuto1"
+                      fullWidth
+                      size="small"
+                      placeholder="Search Google Maps for an address..."
+                      variant="outlined"
+                      value={inputValue1 || ''}
+                      onChange={(e) => setInputValue1(e.target.value)}
+                      helperText="Start typing to auto-fill the address details below"
+                      FormHelperTextProps={{ className: 'address-search-helper pickup-helper' }}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <SearchOutlined style={{ fontSize: 15, color: '#1890ff' }} />
+                          </InputAdornment>
+                        ),
+                        endAdornment: (
+                          <IconButton
+                            onClick={() => {
+                              setInputValue1('');
+                              setPickCust({
+                                ...pickCust,
+                                doorno: '',
+                                suburb: '',
+                                city: '',
+                                postcode: '',
+                                landmark: ''
+                              });
+                              setShowDistance(false);
+                              setStartPoint({ latitude: 0, longitude: 0 });
+                            }}
+                            size="small"
+                          >
+                            <CloseIcon fontSize="small" />
+                          </IconButton>
+                        ),
+                        style: { borderRadius: '10px', background: '#fff' }
+                      }}
+                    />
+                  ) : (
+                    <TextField
+                      variant="outlined"
+                      fullWidth
+                      size="small"
+                      helperText="Saved address selected · clear to search again"
+                      FormHelperTextProps={{ className: 'address-search-helper pickup-helper' }}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <FaLocationDot style={{ fontSize: 14, color: '#1890ff' }} />
+                          </InputAdornment>
+                        ),
+                        endAdornment: (
+                          <IconButton
+                            onClick={() => {
+                              setAddId1(0);
+                              setPickCust({
+                                ...pickCust,
+                                doorno: '',
+                                suburb: '',
+                                city: '',
+                                postcode: '',
+                                landmark: ''
+                              });
+                              setShowDistance(false);
+                              setStartPoint({ latitude: 0, longitude: 0 });
+                            }}
+                            size="small"
+                          >
+                            <ClearIcon fontSize="small" />
+                          </IconButton>
+                        ),
+                        style: { borderRadius: '10px', background: '#fff' }
+                      }}
+                      value={pickCust?.address || ''}
+                      onChange={(e) => {
+                        setPickCust({ ...pickCust, address: e.target.value });
+                        if (e.target.value == '') {
+                          setAddId1(0);
+                          setShowDistance(false);
+                          setStartPoint({ latitude: 0, longitude: 0 });
+                        }
+                      }}
+                    />
+                  )}
+
+                  {/* Address details */}
+                  <Typography className="field-group-caption" sx={{ mt: 3 }}>
+                    Address Details
+                  </Typography>
+                  <Grid container spacing={2.5}>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        size="small"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <GiDoorHandle style={{ color: '#64748b', fontSize: '20px' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        variant="outlined"
+                        label="Door No / Street"
+                        value={pickCust?.doorno || ''}
+                        onChange={(e) => {
+                          setPickCust({ ...pickCust, doorno: e.target.value });
+                        }}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        size="small"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <FaLocationDot style={{ color: '#64748b' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        variant="outlined"
+                        label="Location"
+                        value={pickCust?.suburb || ''}
+                        onChange={(e) => {
+                          setPickCust({ ...pickCust, suburb: e.target.value });
+                        }}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        size="small"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <TbMapPinCode style={{ color: '#64748b', fontSize: '20px' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        variant="outlined"
+                        label="Postcode"
+                        value={pickCust?.postcode || ''}
+                        onChange={(e) => {
+                          setPickCust({ ...pickCust, postcode: e.target.value });
+                        }}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        size="small"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <FaLandmarkDome style={{ color: '#64748b' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        variant="outlined"
+                        label="Landmark"
+                        value={pickCust?.landmark || ''}
+                        onChange={(e) => {
+                          setPickCust({ ...pickCust, landmark: e.target.value });
+                        }}
+                      />
+                    </Grid>
+                  </Grid>
+
+                  {/* Save for later */}
+                  {showCheck1 == 1 && (
+                    <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}>
+                      <Box className="save-later-pill">
+                        <FormControlLabel
+                          control={
+                            <Checkbox
+                              size="small"
+                              checked={isNumChange1 === 1}
+                              onChange={(e) => {
+                                setIsNumChange1(e.target.checked ? 1 : 0);
+                              }}
+                            />
+                          }
+                          label="Save contact for later"
+                        />
+                      </Box>
+                    </Box>
+                  )}
+                </Box>
+
+                {/* Drop Details Block */}
+                <Box className="location-panel drop-panel">
+                  <Box className="lp-header">
+                    <Box className="lp-header-title">
+                      <Box className="lp-badge">
+                        <FaLocationDot />
+                      </Box>
+                      <Box>
+                        <Typography className="lp-title">Drop</Typography>
+                        <Typography className="lp-subtitle">Where to deliver the parcel</Typography>
+                      </Box>
+                    </Box>
+                    <Box className="lp-header-actions">
+                      <Button
+                        className="lp-action-btn"
+                        size="small"
+                        disabled={!locationid}
+                        startIcon={<SearchOutlined style={{ fontSize: 13 }} />}
+                        onClick={() => {
+                          if (!appId && !tenantid && !locationid) {
+                            OpenToast('Please select Location, Tenant and Business!', 'warning', 3000);
+                          } else if (!appId && !tenantid) {
+                            OpenToast('Please select Location and Tenant!', 'warning', 3000);
+                          } else if (!appId) {
+                            OpenToast('Please select Location!', 'warning', 3000);
+                          } else {
+                            setIsCustomerOpen(true);
+                            setpickordrop(2);
+                            setInputValue2('');
+                          }
+                        }}
+                      >
+                        From Saved
+                      </Button>
+                    </Box>
+                  </Box>
+
+                  {/* Contact group */}
+                  <Typography className="field-group-caption">
+                    Contact
+                  </Typography>
+                  <Grid container spacing={2.5}>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        inputRef={textFieldRef2}
+                        fullWidth
+                        size="small"
+                        variant="outlined"
+                        label="Contact Name"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <FaUser style={{ color: '#64748b' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        value={dropCust?.firstname || ''}
+                        onChange={(e) => {
+                          setDropCust({ ...dropCust, firstname: e.target.value });
+                        }}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        error={numErr2}
+                        fullWidth
+                        size="small"
+                        type="number"
+                        variant="outlined"
+                        label="Contact Number"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <FaPhoneAlt style={{ color: numErr2 ? '#ef4444' : '#64748b' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        value={dropCust?.contactno || ''}
+                        onChange={(e) => {
+                          if (e.target.value.length <= 10) {
+                            setDropCust({ ...dropCust, contactno: e.target.value });
+                          }
+                          if (dropNum == e.target.value) {
+                            setShowCheck2(0);
+                          } else {
+                            setShowCheck2(1);
+                          }
+                          if (e.target.value.length < 10) {
+                            setNumErr2(true);
+                          } else {
+                            setNumErr2(false);
+                          }
+                        }}
+                      />
+                    </Grid>
+                  </Grid>
+
+                  {/* Address Autocomplete */}
+                  <Typography className="field-group-caption" sx={{ mt: 3 }}>
+                    Address Lookup
+                  </Typography>
+                  {addId2 == 0 ? (
+                    <TextField
+                      id="addressAuto2"
+                      placeholder="Search Google Maps for an address..."
+                      variant="outlined"
+                      size="small"
+                      fullWidth
+                      value={inputValue2 || ''}
+                      onChange={(e) => setInputValue2(e.target.value)}
+                      helperText="Start typing to auto-fill the address details below"
+                      FormHelperTextProps={{ className: 'address-search-helper drop-helper' }}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <SearchOutlined style={{ fontSize: 15, color: '#65387a' }} />
+                          </InputAdornment>
+                        ),
+                        endAdornment: (
+                          <IconButton
+                            onClick={() => {
+                              setInputValue2('');
+                              setDropCust({
+                                ...dropCust,
+                                doorno: '',
+                                suburb: '',
+                                city: '',
+                                postcode: '',
+                                landmark: ''
+                              });
+                              setShowDistance(false);
+                              setEndPoint({ latitude: 0, longitude: 0 });
+                            }}
+                            size="small"
+                          >
+                            <CloseIcon fontSize="small" />
+                          </IconButton>
+                        ),
+                        style: { borderRadius: '10px', background: '#fff' }
+                      }}
+                    />
+                  ) : (
+                    <TextField
+                      variant="outlined"
+                      fullWidth
+                      size="small"
+                      helperText="Saved address selected · clear to search again"
+                      FormHelperTextProps={{ className: 'address-search-helper drop-helper' }}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <FaLocationDot style={{ fontSize: 14, color: '#65387a' }} />
+                          </InputAdornment>
+                        ),
+                        endAdornment: (
+                          <IconButton
+                            onClick={() => {
+                              setAddId2(0);
+                              setDropCust({
+                                ...dropCust,
+                                doorno: '',
+                                suburb: '',
+                                city: '',
+                                postcode: '',
+                                landmark: ''
+                              });
+                              setShowDistance(false);
+                              setEndPoint({ latitude: 0, longitude: 0 });
+                            }}
+                            size="small"
+                          >
+                            <ClearIcon fontSize="small" />
+                          </IconButton>
+                        ),
+                        style: { borderRadius: '10px', background: '#fff' }
+                      }}
+                      value={dropCust?.address || ''}
+                      onChange={(e) => {
+                        setDropCust({ ...dropCust, address: e.target.value });
+                        if (e.target.value == '') {
+                          setAddId2(0);
+                          setShowDistance(false);
+                          setEndPoint({ latitude: 0, longitude: 0 });
+                        }
+                      }}
+                    />
+                  )}
+
+                  {/* Address details */}
+                  <Typography className="field-group-caption" sx={{ mt: 3 }}>
+                    Address Details
+                  </Typography>
+                  <Grid container spacing={2.5}>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        size="small"
+                        variant="outlined"
+                        label="Door No / Street"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <GiDoorHandle style={{ color: '#64748b', fontSize: '20px' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        value={dropCust?.doorno || ''}
+                        onChange={(e) => {
+                          setDropCust({ ...dropCust, doorno: e.target.value });
+                        }}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        size="small"
+                        variant="outlined"
+                        label="Location"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <FaLocationDot style={{ color: '#64748b' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        value={dropCust?.suburb || ''}
+                        onChange={(e) => {
+                          setDropCust({ ...dropCust, suburb: e.target.value });
+                        }}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        size="small"
+                        variant="outlined"
+                        label="Postcode"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <TbMapPinCode style={{ color: '#64748b', fontSize: '20px' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        value={dropCust?.postcode || ''}
+                        onChange={(e) => {
+                          setDropCust({ ...dropCust, postcode: e.target.value });
+                        }}
+                      />
+                    </Grid>
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        fullWidth
+                        size="small"
+                        variant="outlined"
+                        label="Landmark"
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <FaLandmarkDome style={{ color: '#64748b' }} />
+                            </InputAdornment>
+                          ),
+                          style: { borderRadius: '10px' }
+                        }}
+                        value={dropCust?.landmark || ''}
+                        onChange={(e) => {
+                          setDropCust({ ...dropCust, landmark: e.target.value });
+                        }}
+                      />
+                    </Grid>
+                  </Grid>
+
+                  {/* Save for later */}
+                  {showCheck2 == 1 && (
+                    <Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}>
+                      <Box className="save-later-pill">
+                        <FormControlLabel
+                          control={
+                            <Checkbox
+                              size="small"
+                              checked={isNumChange2 === 1}
+                              onChange={(e) => {
+                                setIsNumChange2(e.target.checked ? 1 : 0);
+                              }}
+                            />
+                          }
+                          label="Save contact for later"
+                        />
+                      </Box>
+                    </Box>
+                  )}
+                </Box>
+              </Box>
+            </Card>
+
+            {/* Card 3: Cargo & Dispatch Logistics */}
+            <Card className="orders-card" sx={{ p: { xs: 2, sm: 2.5, lg: 3 } }}>
+              <Box className="section-title-bar" sx={{ mb: 2.5 }}>
+                <Typography variant="h5" sx={{ fontWeight: 600, color: '#1e293b' }}>
+                  Cargo & Dispatch Logistics
+                </Typography>
+              </Box>
+
+              <Grid container spacing={3} alignItems="stretch">
+                {/* Section Header: Cargo Details */}
+                <Grid item xs={12}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 0.5 }}>
+                    <Typography sx={{ fontWeight: 700, fontSize: '11px', color: '#64748b', letterSpacing: '0.8px', textTransform: 'uppercase' }}>
+                      Cargo Details
+                    </Typography>
+                    <Box sx={{ flex: 1, height: '1px', background: 'linear-gradient(90deg, #eef2f6 0%, transparent 100%)' }} />
+                  </Box>
+                </Grid>
+
+                {/* Row 1: Category, Cash Collect, Quantity */}
+                <Grid item xs={12} sm={4}>
+                  <Stack>
+                    <Autocomplete
+                      id="combo-box-demo"
+                      size="small"
+                      options={subCat}
+                      getOptionLabel={(option) => option?.subcategoryname || ''}
+                      fullWidth
+                      sx={{
+                        '& .MuiOutlinedInput-root': {
+                          borderRadius: '12px',
+                          height: '42px',
+                          paddingTop: '0px !important',
+                          paddingBottom: '0px !important'
+                        }
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label="Category"
+                          size="small"
+                          InputLabelProps={{ shrink: true }}
+                          sx={{ '& .MuiOutlinedInput-root': { borderRadius: '12px', height: '42px' } }}
+                          InputProps={{
+                            ...params.InputProps,
+                            startAdornment: (
+                              <>
+                                <FaBox style={{ color: '#94a3b8', fontSize: 13, marginRight: 6, marginLeft: 2, flexShrink: 0 }} />
+                                {params.InputProps.startAdornment}
+                              </>
+                            )
+                          }}
+                        />
                       )}
-                      <Typography variant="h5">Weight</Typography>
-                      <Stack direction={'row'} justifyContent={'space-evenly'} sx={{ border: '1px solid #eee', my: 2, py: 2 }}>
-                        <Chip
-                          variant="contained"
-                          color="default"
-                          label="1-10kgs"
-                          sx={chipStyle('1-10kgs')}
-                          onClick={() => {
-                            handleChipClick('1-10kgs');
-                            setWeight('1-10kgs');
+                      onChange={(event, value, reason) => {
+                        if (value) {
+                          console.log(value);
+                          setSubCatName(value.subcategoryname || '');
+                          setSubCatId(value.subcategoryid || 0);
+                        } else if (reason) {
+                          setSubCatName(null);
+                          setSubCatId(null);
+                        }
+                      }}
+                    />
+                  </Stack>
+                </Grid>
+
+                <Grid item xs={12} sm={4}>
+                  <Stack>
+                    <TextField
+                      type="number"
+                      size="small"
+                      value={collectionamt}
+                      fullWidth
+                      label="Cash Collect"
+                      InputLabelProps={{ shrink: true }}
+                      onChange={(e) => {
+                        setCollectionamt(e.target.value);
+                      }}
+                      inputProps={{ min: 0 }}
+                      sx={{ '& .MuiOutlinedInput-root': { borderRadius: '12px', height: '42px' } }}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <Box sx={{ color: '#94a3b8', fontWeight: 700, fontSize: 14, lineHeight: 1 }}>₹</Box>
+                          </InputAdornment>
+                        )
+                      }}
+                    />
+                  </Stack>
+                </Grid>
+
+                <Grid item xs={12} sm={4}>
+                  <Stack>
+                    <TextField
+                      type="number"
+                      size="small"
+                      value={quantity}
+                      fullWidth
+                      label="Quantity"
+                      InputLabelProps={{ shrink: true }}
+                      onChange={(e) => {
+                        setQuantity(e.target.value);
+                      }}
+                      inputProps={{ min: 1 }}
+                      sx={{ '& .MuiOutlinedInput-root': { borderRadius: '12px', height: '42px' } }}
+                      InputProps={{
+                        startAdornment: (
+                          <InputAdornment position="start">
+                            <FaBoxes style={{ color: '#94a3b8', fontSize: 14 }} />
+                          </InputAdornment>
+                        )
+                      }}
+                    />
+                  </Stack>
+                </Grid>
+
+                {/* Row 2: Weight Range Selector */}
+                <Grid item xs={12}>
+                  <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 1 }}>
+                    <Typography variant="h6" sx={{ fontWeight: 600, color: '#475569', fontSize: 13.5 }}>
+                      Select Cargo Weight Range <span style={{ color: '#ef4444' }}>*</span>
+                    </Typography>
+                    {weight && (
+                      <Typography variant="body2" sx={{
+                        fontWeight: 600,
+                        color: weight === '1-10kgs' ? '#0ea5e9' : weight === '11-20kgs' ? '#a855f7' : '#6366f1',
+                        fontSize: 12.5,
+                        textTransform: 'capitalize'
+                      }}>
+                        {weight === '1-10kgs' ? 'Light' : weight === '11-20kgs' ? 'Medium' : 'Heavy'} selected
+                      </Typography>
+                    )}
+                  </Stack>
+                  <div className="weight-selector-grid">
+                    <div
+                      className={`weight-card-btn weight-light ${weight === '1-10kgs' ? 'active' : ''}`}
+                      onClick={() => {
+                        handleChipClick('1-10kgs');
+                        setWeight('1-10kgs');
+                      }}
+                    >
+                      <FaBox className="weight-card-icon" />
+                      <div className="weight-card-label">Light Cargo (1-10 kgs)</div>
+                      <div className="weight-card-desc">Parcels, retail envelopes</div>
+                    </div>
+                    <div
+                      className={`weight-card-btn weight-medium ${weight === '11-20kgs' ? 'active' : ''}`}
+                      onClick={() => {
+                        handleChipClick('11-20kgs');
+                        setWeight('11-20kgs');
+                      }}
+                    >
+                      <FaBoxes className="weight-card-icon" />
+                      <div className="weight-card-label">Medium Cargo (11-20 kgs)</div>
+                      <div className="weight-card-desc">Grocery crates, retail goods</div>
+                    </div>
+                    <div
+                      className={`weight-card-btn weight-heavy ${weight === '21-30kgs' ? 'active' : ''}`}
+                      onClick={() => {
+                        handleChipClick('21-30kgs');
+                        setWeight('21-30kgs');
+                      }}
+                    >
+                      <FaTruck className="weight-card-icon" />
+                      <div className="weight-card-label">Heavy Cargo (21-30 kgs)</div>
+                      <div className="weight-card-desc">Industrial parts, heavy shipments</div>
+                    </div>
+                  </div>
+                </Grid>
+                {/* Section Header: Handover & Schedule */}
+                <Grid item xs={12} sx={{ mt: 0.5, pb: 0 }}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1 }}>
+                    <Typography sx={{ display: 'flex', alignItems: 'center', gap: 1, fontWeight: 700, fontSize: '11px', color: '#64748b', letterSpacing: '0.8px', textTransform: 'uppercase' }}>
+                      <CalendarOutlined style={{ fontSize: '12px', color: '#65387a' }} />
+                      Schedule Details
+                    </Typography>
+                    <Box sx={{ flex: 1, height: '1px', background: 'linear-gradient(90deg, #eef2f6 0%, transparent 100%)' }} />
+                  </Box>
+                </Grid>
+
+                {/* Nested Grid Container with tighter spacing={2} to eliminate excessive gaps */}
+                <Grid item xs={12} sx={{ pt: '0px !important' }}>
+                  <Grid container spacing={2}>
+                    {/* Row 3: Pickup Date & Time Slot (Side-by-Side) */}
+                    <Grid item xs={12} sm={6}>
+                      <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        <DatePicker
+                          label="Pickup Date"
+                          format="DD-MM-YYYY"
+                          onChange={(e) => {
+                            let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
+                            setSelectedtime('');
+                            if (dateres11 <= 0) {
+                              setStartdate(e);
+                              let arr = [];
+                              timeslotarr.map((val) => {
+                                if (
+                                  dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0
+                                ) {
+                                  arr.push(val);
+                                }
+                              });
+                            } else {
+                              setAlertmessage('choose Upcoming Date');
+                              opentoast('choose Upcoming Date', 'warning');
+                              setStartdate(NaN);
+                            }
                           }}
-                        />
-                        <Chip
-                          variant="contained"
-                          color="default"
-                          label="11-20kgs"
-                          sx={chipStyle('11-20kgs')}
-                          onClick={() => {
-                            handleChipClick('11-20kgs');
-                            setWeight('11-20kgs');
+                          value={dayjs(startdate)}
+                          sx={{
+                            width: '100%',
+                            '& .MuiOutlinedInput-root': {
+                              borderRadius: '12px',
+                              height: '42px'
+                            }
                           }}
-                        />
-                        <Chip
-                          variant="contained"
-                          color="default"
-                          label="21-30kgs"
-                          sx={chipStyle('21-30kgs')}
-                          onClick={() => {
-                            handleChipClick('21-30kgs');
-                            setWeight('21-30kgs');
+                          slotProps={{
+                            textField: {
+                              size: 'small',
+                              fullWidth: true,
+                              InputLabelProps: { shrink: true },
+                              InputProps: {
+                                startAdornment: (
+                                  <InputAdornment position="start">
+                                    <CalendarOutlined style={{ color: '#94a3b8', fontSize: '13px' }} />
+                                  </InputAdornment>
+                                )
+                              },
+                              sx: {
+                                '& .MuiOutlinedInput-root': {
+                                  borderRadius: '12px',
+                                  height: '42px',
+                                  paddingLeft: '10px'
+                                }
+                              }
+                            }
                           }}
+                          disablePast
                         />
-                      </Stack>
-                      <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} sx={{}}>
-                        <Typography variant="h5" noWrap>
-                          SMS Delivery
-                        </Typography>
+                      </LocalizationProvider>
+                    </Grid>
+
+                    <Grid item xs={12} sm={6}>
+                      <Autocomplete
+                        size="small"
+                        fullWidth
+                        options={pickupSlotsList || []}
+                        sx={{
+                          width: '100%',
+                          '& .MuiOutlinedInput-root': {
+                            borderRadius: '12px',
+                            height: '42px',
+                            paddingTop: '0px !important',
+                            paddingBottom: '0px !important'
+                          }
+                        }}
+                        onChange={(e, newValue, reason) => {
+                          if (reason === 'clear' || !newValue) {
+                            setSelectedtime(null);
+                            setPickupSlot(null);
+                          } else {
+                            const formattedTime = dayjs(newValue.time, 'HH:mm').format('hh:mm A');
+                            setSelectedtime(formattedTime);
+                            const finalDateTime = dayjs(`${startdate} ${formattedTime}`, 'MM-DD-YYYY hh:mm A').format(
+                              'YYYY-MM-DD hh:mm A'
+                            );
+                            setPickupSlot(finalDateTime);
+                          }
+                        }}
+                        getOptionLabel={(option) => option ? `${option.name} (${dayjs(option.time, 'HH:mm').format('hh:mm A')})` : ''}
+                        renderInput={(params) => (
+                          <TextField
+                            {...params}
+                            label="Pickup Time Slot"
+                            placeholder="Select Pickup Slot"
+                            fullWidth
+                            InputLabelProps={{ shrink: true }}
+                            sx={{ '& .MuiOutlinedInput-root': { borderRadius: '12px', height: '42px' } }}
+                            InputProps={{
+                              ...params.InputProps,
+                              startAdornment: (
+                                <>
+                                  <ClockCircleOutlined style={{ color: '#94a3b8', fontSize: '13px', marginRight: '6px', marginLeft: '2px', flexShrink: 0 }} />
+                                  {params.InputProps.startAdornment}
+                                </>
+                              )
+                            }}
+                          />
+                        )}
+                      />
+                    </Grid>
+
+                    {/* Row 4: Special Dispatch Notes & SMS Updates (Side-by-Side) */}
+                    <Grid item xs={12} sm={6}>
+                      <TextField
+                        id="outlined-multiline-static"
+                        label="Special Dispatch Notes"
+                        size="small"
+                        fullWidth
+                        InputLabelProps={{ shrink: true }}
+                        sx={{
+                          width: '100%',
+                          '& .MuiOutlinedInput-root': { borderRadius: '12px', height: '42px' }
+                        }}
+                        InputProps={{
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <FileTextOutlined style={{ color: '#94a3b8', fontSize: '13px' }} />
+                            </InputAdornment>
+                          )
+                        }}
+                        placeholder="Provide gate codes, call instructions, or special cargo care instructions..."
+                        value={otherinstructions}
+                        onChange={(e) => setOtherinstructions(e.target.value)}
+                      />
+                    </Grid>
+
+                    <Grid item xs={12} sm={6}>
+                      <Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        alignItems="center"
+                        spacing={1.5}
+                        onClick={() => setIsSms(isSms === 1 ? 0 : 1)}
+                        sx={{
+                          py: 0,
+                          px: 2,
+                          height: '42px',
+                          border: '1.5px solid #eef2f6',
+                          borderRadius: '12px',
+                          cursor: 'pointer',
+                          userSelect: 'none',
+                          bgcolor: isSms === 1 ? 'rgba(24, 144, 255, 0.04)' : '#fafbfc',
+                          borderColor: isSms === 1 ? 'rgba(24, 144, 255, 0.25)' : '#eef2f6',
+                          boxShadow: isSms === 1 ? '0 4px 12px rgba(24, 144, 255, 0.05)' : 'none',
+                          transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
+                          '&:hover': {
+                            transform: 'translateY(-1.2px)',
+                            borderColor: isSms === 1 ? 'rgba(24, 144, 255, 0.4)' : '#cbd5e1',
+                            boxShadow: isSms === 1 ? '0 6px 16px rgba(24, 144, 255, 0.08)' : '0 6px 16px rgba(0, 0, 0, 0.04)'
+                          }
+                        }}
+                      >
+                        <Stack direction="row" spacing={1} alignItems="center" sx={{ minWidth: 0 }}>
+                          <Box
+                            sx={{
+                              width: 26,
+                              height: 26,
+                              borderRadius: '6px',
+                              display: 'flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              background: isSms === 1
+                                ? 'linear-gradient(135deg, #1890ff, #65387a)'
+                                : '#eef2f6',
+                              color: isSms === 1 ? '#ffffff' : '#94a3b8',
+                              transition: 'all 0.2s ease',
+                              flexShrink: 0
+                            }}
+                          >
+                            <MessageOutlined style={{ fontSize: 11.5 }} />
+                          </Box>
+                          <Box sx={{ minWidth: 0 }}>
+                            <Typography variant="h6" sx={{ fontWeight: 600, color: '#1e293b', fontSize: 12.5, lineHeight: 1.1 }}>
+                              SMS Updates
+                            </Typography>
+                            <Typography variant="body2" sx={{ color: '#64748b', fontSize: 10, mt: 0.1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title="Send tracking updates automatically">
+                              Track automatically
+                            </Typography>
+                          </Box>
+                        </Stack>
                         <Switch
+                          size="small"
                           checked={isSms === 1}
                           onChange={(e) => {
+                            e.stopPropagation();
                             setIsSms(e.target.checked ? 1 : 0);
                           }}
                         />
                       </Stack>
-                    </MainCard>
+                    </Grid>
                   </Grid>
-                </Fragment>
+                </Grid>
               </Grid>
-            </Grid>
-            <Grid item xs={12}>
-              {/* ================================================= || Notes || ================================================= */}
-              <MainCard sx={{ mt: 2 }}>
-                <Grid container>
-                  <Grid item xs={12}>
-                    <Stack sx={{ mt: 3 }} gap={1}>
-                      <Typography variant="h5" noWrap>
-                        Notes
-                      </Typography>
-                      <TextField
-                        focused
-                        id="outlined-multiline-static"
-                        sx={{ width: '100%', height: '100%', mb: 2 }}
-                        multiline
-                        rows={1}
-                        placeholder="Notes"
-                        value={otherinstructions}
-                        onChange={(e) => setOtherinstructions(e.target.value)}
-                      />
-                    </Stack>
-                  </Grid>
-                  <Stack direction="row" justifyContent={'end'} sx={{ mt: 2, width: '100%' }}>
+            </Card>
+          </Grid>
+
+          {/* Right Column: Live Map & Cost Summary Panel (4.5 columns on lg+, sticky) */}
+          <Grid
+            item
+            xs={12}
+            lg={4.5}
+            sx={{
+              position: { lg: 'sticky' },
+              top: { lg: '24px' },
+              height: 'fit-content'
+            }}
+          >
+            <Stack spacing={4}>
+
+              {/* Map Card */}
+              <Card className="orders-card" sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
+                <Typography variant="h5" sx={{ fontWeight: 600, mb: 2, display: 'flex', alignItems: 'center', gap: 1, color: '#1e293b' }}>
+                  <MyLocationIcon sx={{ color: '#1890ff', fontSize: 20 }} />
+                  Live Route Preview
+                </Typography>
+                <div className="map-preview-wrapper">
+                  <OrderMap startPoint={startPoint} endPoint={endPoint} appLocaLat={appLocaLat} appLocaLng={appLocaLng} />
+                </div>
+              </Card>
+
+              {/* Pricing breakdown card */}
+              <Card className="orders-card pricing-summary-card">
+                <Typography variant="h5" sx={{ fontWeight: 600, mb: 2.5, color: '#1e293b' }}>
+                  Pricing & Dispatch Metrics
+                </Typography>
+
+                <div className="price-metric-item">
+                  <div className="price-metric-label">
+                    <span style={{ fontSize: '20px' }}>📍</span> Delivery Distance
+                  </div>
+                  <div className={`price-metric-value ${showDistance ? 'highlight' : ''}`}>
+                    {showDistance ? `${distance} km` : '--'}
+                  </div>
+                </div>
+
+                <div className="price-metric-item">
+                  <div className="price-metric-label">
+                    <span style={{ fontSize: '20px' }}>💵</span> Base Fare ({minKm} km limit)
+                  </div>
+                  <div className="price-metric-value">
+                    {basePrice ? `₹${basePrice.toFixed(2)}` : '₹0.00'}
+                  </div>
+                </div>
+
+                <div className="price-metric-item">
+                  <div className="price-metric-label">
+                    <span style={{ fontSize: '20px' }}>📈</span> Rate per km
+                  </div>
+                  <div className="price-metric-value">
+                    {pricePerKm ? `₹${pricePerKm.toFixed(2)}/km` : '₹0.00/km'}
+                  </div>
+                </div>
+
+                {/* Total Cost Display */}
+                {showDistance && (
+                  <div className="total-charge-badge">
+                    <div className="total-charge-label">Total Delivery Charge</div>
+                    <div className="total-charge-val">₹{totalCharge.toFixed(2)}</div>
+                  </div>
+                )}
+
+                {/* Submit button */}
+                <Box sx={{ mt: 3 }}>
+                  <AnimateButton>
                     <Button
-                      size="medium"
+                      fullWidth
+                      className="gradient-btn-create"
                       disabled={!showDistance || !selectedtime || !pickupSlot}
-                      variant="outlined"
                       onClick={() => {
                         setLoading(true);
                         setBtnLoading(true);
@@ -1921,186 +2385,204 @@ const Createorder1 = () => {
                           setBtnLoading(false);
                         }, 2000);
                       }}
-                      sx={{
-                        '&:hover': {
-                          transform: 'scale(1.05)',
-                          transition: 'transform 0.3s ease'
-                        }
-                      }}
                     >
-                      {btnLoading ? <CircularProgress color="primary" size={20} thickness={10} /> : 'Create'}
+                      {btnLoading ? (
+                        <CircularProgress color="inherit" size={24} thickness={4} />
+                      ) : (
+                        'Dispatch Delivery Order'
+                      )}
                     </Button>
-                  </Stack>
-                </Grid>
-              </MainCard>
-            </Grid>
-          </Grid>
-          {/* </Box> */}
-        </Grid>
-
-        {/* ============================================= || saved address Dialog || ============================================= */}
-        <Dialog
-          open={isCustomerOpen}
-          onClose={() => {
-            setIsCustomerOpen(false);
-            setSearchCustList('');
-          }}
-          fullWidth
-          sx={{ minWidth: 'lg' }}
-        >
-          <DialogTitle sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
-            <Stack>
-              <Typography variant="h4"> {`Select Address (${pickordrop === 1 ? 'Pickup' : 'Drop'})`}</Typography>
-              <FormControl
-                sx={{
-                  width: '100%',
-                  mt: 1
-                }}
-              >
-                <Stack spacing={2} sx={{ py: 0.2 }}>
-                  <OutlinedInput
-                    autoFocus
-                    fullWidth
-                    id="input-search-header"
-                    placeholder="Search"
-                    value={searchCustList}
-                    onChange={(e) => setSearchCustList(e.target.value)}
-                    sx={{
-                      '& .MuiOutlinedInput-input': {
-                        p: '10.5px 0px 12px'
-                      },
-                      bgcolor: 'white'
-                    }}
-                    startAdornment={
-                      <InputAdornment position="start">
-                        <SearchOutlined style={{ fontSize: 'small' }} />
-                      </InputAdornment>
-                    }
-                    endAdornment={
-                      <IconButton
-                        sx={{ visibility: searchCustList ? 'visible' : 'hidden' }}
-                        onClick={() => {
-                          setSearchCustList('');
-                        }}
-                      >
-                        <ClearIcon />
-                      </IconButton>
-                    }
-                    autoComplete="off"
-                  />
-                </Stack>
-              </FormControl>
+                  </AnimateButton>
+                </Box>
+              </Card>
             </Stack>
-          </DialogTitle>
-          <Divider />
-          <DialogContent sx={{ p: 2.5 }}>
-            {customerlist?.length == 0 ? (
-              <Stack spacing={2} direction={'row'} alignItems={'center'} justifyContent={'center'} sx={{ minHeight: 600, maxHeight: 600 }}>
-                <Empty />
-              </Stack>
-            ) : (
-              <Stack spacing={2} sx={{ minHeight: 600, maxHeight: 600 }}>
-                {customerlist &&
-                  customerlist?.map((address, index) => (
-                    <Button
-                      onClick={() => {
-                        setIsCustomerOpen(false);
-                        setSearchCustList('');
-                        if (pickordrop === 1) {
-                          console.log('PickupClient', address);
-                          setAddId1(1);
-                          setStartPoint({ latitude: address.latitude, longitude: address.longitude });
-                          setPickCust(address);
-                          setPickNum(address.contactno);
-                        } else {
-                          console.log('DropClient', address);
-                          setAddId2(1);
-                          setEndPoint({ latitude: address.latitude, longitude: address.longitude });
-                          setDropCust(address);
-                          setdropNum(address.contactno);
-                        }
-                      }}
-                      disabled={pickCust?.customerid === address.customerid}
-                      key={index}
-                      sx={{
-                        width: '100%',
-                        border: '1px solid',
-                        borderColor: 'grey.200',
-                        borderRadius: 1,
-                        p: 1.25
-                      }}
-                    >
-                      <div style={{ width: '100%' }}>
-                        <Typography variant="subtitle1" sx={{ textAlign: 'left' }}>
-                          {`${address.firstname} (${address.contactno})`}
-                        </Typography>
+          </Grid>
+        </Grid>
+      </Box>
 
-                        <Typography variant="body2" color="secondary" sx={{ textAlign: 'left' }}>
-                          {address.address}
-                        </Typography>
-                      </div>
-                    </Button>
-                  ))}
-              </Stack>
-            )}
-          </DialogContent>
-          <Divider />
-          <DialogActions sx={{ p: 2.5 }}>
-            <Button
-              color="error"
-              variant="outlined"
-              sx={{
-                '&:hover': {
-                  bgcolor: 'red',
-                  color: 'white'
+      {/* Saved address Dialog (Modal) */}
+      <Dialog
+        open={isCustomerOpen}
+        onClose={() => {
+          setIsCustomerOpen(false);
+          setSearchCustList('');
+        }}
+        fullWidth
+        sx={{
+          '& .MuiDialog-paper': {
+            borderRadius: '16px',
+            overflow: 'hidden'
+          }
+        }}
+      >
+        <DialogTitle sx={{ bgcolor: '#1890ff', color: 'white', py: 2.5 }}>
+          <Stack spacing={1.5}>
+            <Typography variant="h4" sx={{ fontWeight: 600, color: 'white' }}>
+              {`Select Saved Address (${pickordrop === 1 ? 'Pickup' : 'Drop'})`}
+            </Typography>
+
+            <FormControl sx={{ width: '100%' }}>
+              <OutlinedInput
+                autoFocus
+                fullWidth
+                id="input-search-header"
+                placeholder="Search by name, contact, or address..."
+                value={searchCustList}
+                onChange={(e) => setSearchCustList(e.target.value)}
+                sx={{
+                  bgcolor: 'white',
+                  borderRadius: '10px',
+                  '& .MuiOutlinedInput-input': {
+                    p: '10px 14px'
+                  }
+                }}
+                startAdornment={
+                  <InputAdornment position="start">
+                    <SearchOutlined style={{ fontSize: 'small', color: '#64748b' }} />
+                  </InputAdornment>
                 }
-              }}
-              onClick={() => {
-                setIsCustomerOpen(false);
-                setSearchCustList('');
-              }}
-            >
-              Cancel
-            </Button>
-          </DialogActions>
-        </Dialog>
-        {/* ============================================= || location error  Dialog || ============================================= */}
-        <Dialog
-          // anchor={'right'}
-          open={open}
-          onClose={() => {
+                endAdornment={
+                  <IconButton
+                    sx={{ visibility: searchCustList ? 'visible' : 'hidden', p: 0.5 }}
+                    onClick={() => {
+                      setSearchCustList('');
+                    }}
+                  >
+                    <ClearIcon style={{ fontSize: '18px' }} />
+                  </IconButton>
+                }
+                autoComplete="off"
+              />
+            </FormControl>
+          </Stack>
+        </DialogTitle>
+
+        <Divider />
+
+        <DialogContent sx={{ p: 3, maxHeight: '600px', overflowY: 'auto', bgcolor: '#fafbfc' }}>
+          {customerlist?.length == 0 ? (
+            <Stack spacing={2} direction={'row'} alignItems={'center'} justifyContent={'center'} sx={{ minHeight: 300 }}>
+              <Empty description="No saved addresses found for this client" />
+            </Stack>
+          ) : (
+            <Box>
+              {customerlist &&
+                customerlist.map((address, index) => (
+                  <Button
+                    className="address-card-btn"
+                    onClick={() => {
+                      setIsCustomerOpen(false);
+                      setSearchCustList('');
+                      if (pickordrop === 1) {
+                        console.log('PickupClient', address);
+                        setAddId1(1);
+                        setStartPoint({ latitude: address.latitude, longitude: address.longitude });
+                        setPickCust(address);
+                        setPickNum(address.contactno);
+                      } else {
+                        console.log('DropClient', address);
+                        setAddId2(1);
+                        setEndPoint({ latitude: address.latitude, longitude: address.longitude });
+                        setDropCust(address);
+                        setdropNum(address.contactno);
+                      }
+                    }}
+                    disabled={pickCust?.customerid === address.customerid}
+                    key={index}
+                  >
+                    <div style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+                      <Typography variant="subtitle1" sx={{ textAlign: 'left', fontWeight: 600, color: '#1e293b' }}>
+                        {`${address.firstname} (${address.contactno})`}
+                      </Typography>
+                      <Typography variant="body2" sx={{ textAlign: 'left', color: '#64748b', mt: 0.5, lineHeight: 1.4 }}>
+                        {address.address}
+                      </Typography>
+                    </div>
+                  </Button>
+                ))}
+            </Box>
+          )}
+        </DialogContent>
+
+        <Divider />
+
+        <DialogActions sx={{ p: 2.5, bgcolor: '#fafbfc' }}>
+          <Button
+            color="error"
+            variant="outlined"
+            sx={{
+              borderRadius: '8px',
+              textTransform: 'none',
+              px: 3,
+              '&:hover': {
+                bgcolor: '#ef4444',
+                color: 'white',
+                borderColor: '#ef4444'
+              }
+            }}
+            onClick={() => {
+              setIsCustomerOpen(false);
+              setSearchCustList('');
+            }}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      {/* Location error Dialog */}
+      <Dialog
+        open={open}
+        onClose={() => {
+          setOpen(false);
+        }}
+        sx={{
+          '& .MuiDialog-paper': {
+            borderRadius: '16px',
+            p: 1.5,
+            maxWidth: '400px'
+          }
+        }}
+      >
+        <DialogTitle sx={{ textAlign: 'center', pb: 1 }}>
+          <HighlightOffIcon sx={{ fontSize: 70, color: theme.palette.error.main, mb: 1 }} />
+          <Typography variant="h3" sx={{ color: theme.palette.error.main, fontWeight: 700 }}>
+            Dispatch Blocked
+          </Typography>
+        </DialogTitle>
+
+        <DialogContent sx={{ textAlign: 'center', pb: 2 }}>
+          <Typography variant="body1" sx={{ color: '#64748b', lineHeight: 1.5 }}>
+            Our delivery partners cannot service this coordinate combination. The route distance exceeds the active operating radius for this app location.
+          </Typography>
+        </DialogContent>
+
+        <DialogActions
+          sx={{
+            bgcolor: theme.palette.error.main,
+            borderRadius: '12px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '16px',
+            fontWeight: 600,
+            color: 'white',
+            cursor: 'pointer',
+            py: 1.5,
+            mx: 2.5,
+            mb: 2,
+            transition: 'background-color 0.2s ease',
+            '&:hover': {
+              bgcolor: theme.palette.error.dark
+            }
+          }}
+          onClick={() => {
             setOpen(false);
           }}
         >
-          <DialogTitle sx={{ textAlign: 'center' }}>
-            <HighlightOffIcon sx={{ fontSize: 60, color: theme.palette.error.main }} />
-            <Typography variant="h3" sx={{ color: theme.palette.error.main }}>
-              Error
-            </Typography>
-          </DialogTitle>
-          <DialogContent>
-            <Typography variant="h4" color={'secondary'}>
-              Service not available at this location
-            </Typography>
-          </DialogContent>
-          <DialogActions
-            sx={{
-              bgcolor: theme.palette.error.main,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontSize: 20,
-              color: 'white',
-              cursor: 'pointer'
-            }}
-            onClick={() => {
-              setOpen(false);
-            }}
-          >
-            Close
-          </DialogActions>
-        </Dialog>
-      </Grid>
+          Acknowledge & Close
+        </DialogActions>
+      </Dialog>
     </>
   );
 };
diff --git a/src/pages/nearle/orders/newcreateOrder.js b/src/pages/nearle/orders/newcreateOrder.js
index 883601b..b0143be 100644
--- a/src/pages/nearle/orders/newcreateOrder.js
+++ b/src/pages/nearle/orders/newcreateOrder.js
@@ -58,6 +58,226 @@ import { TimePicker } from '@mui/x-date-pickers';
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
+import { MapContainer, TileLayer, Marker, Polyline, useMap } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+const pickupIcon = typeof window !== 'undefined' ? new L.Icon({
+  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+}) : null;
+
+const dropoffIcon = typeof window !== 'undefined' ? new L.Icon({
+  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
+  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+}) : null;
+
+const MapBoundsController = ({ startPoint, endPoint }) => {
+  const map = useMap();
+  useEffect(() => {
+    const points = [];
+    const pLat = parseFloat(startPoint?.latitude);
+    const pLng = parseFloat(startPoint?.longitude);
+    const dLat = parseFloat(endPoint?.latitude);
+    const dLng = parseFloat(endPoint?.longitude);
+
+    if (!isNaN(pLat) && !isNaN(pLng) && pLat !== 0 && pLng !== 0) {
+      points.push([pLat, pLng]);
+    }
+    if (!isNaN(dLat) && !isNaN(dLng) && dLat !== 0 && dLng !== 0) {
+      points.push([dLat, dLng]);
+    }
+
+    if (points.length === 1) {
+      map.setView(points[0], 14);
+    } else if (points.length === 2) {
+      map.fitBounds(points, { padding: [50, 50] });
+    }
+  }, [startPoint?.latitude, startPoint?.longitude, endPoint?.latitude, endPoint?.longitude, map]);
+  return null;
+};
+
+const OrderMap = ({ startPoint, endPoint, appLocaLat, appLocaLng }) => {
+  const defaultCenter = [
+    parseFloat(appLocaLat) || 11.0168,
+    parseFloat(appLocaLng) || 76.9558
+  ];
+
+  const hasPick = startPoint?.latitude && startPoint?.longitude && parseFloat(startPoint.latitude) !== 0;
+  const hasDrop = endPoint?.latitude && endPoint?.longitude && parseFloat(endPoint.latitude) !== 0;
+
+  const pickCoords = hasPick ? [parseFloat(startPoint.latitude), parseFloat(startPoint.longitude)] : null;
+  const dropCoords = hasDrop ? [parseFloat(endPoint.latitude), parseFloat(endPoint.longitude)] : null;
+
+  // ---- Animation state (mirrors Dispatch.js pattern) ----
+  const [osrmRoute, setOsrmRoute] = useState(null);       // full road path [[lat,lng],...]
+  const [animatedSegments, setAnimatedSegments] = useState([]); // drawn pair-by-pair
+  const [isAnimating, setIsAnimating] = useState(false);
+  const isAnimatingRef = useRef(false);
+  const timeoutsRef = useRef([]);
+
+  // Fetch OSRM route whenever both points are available
+  useEffect(() => {
+    if (!hasPick || !hasDrop) {
+      setOsrmRoute(null);
+      setAnimatedSegments([]);
+      setIsAnimating(false);
+      return;
+    }
+    const url = `https://router.project-osrm.org/route/v1/driving/${pickCoords[1]},${pickCoords[0]};${dropCoords[1]},${dropCoords[0]}?overview=full&geometries=geojson`;
+    fetch(url)
+      .then((r) => r.json())
+      .then((data) => {
+        const coords = data?.routes?.[0]?.geometry?.coordinates;
+        if (coords && coords.length >= 2) {
+          // OSRM returns [lng, lat], Leaflet needs [lat, lng]
+          setOsrmRoute(coords.map(([lng, lat]) => [lat, lng]));
+        } else {
+          // Fallback to straight line
+          setOsrmRoute([pickCoords, dropCoords]);
+        }
+      })
+      .catch(() => {
+        setOsrmRoute([pickCoords, dropCoords]);
+      });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startPoint?.latitude, startPoint?.longitude, endPoint?.latitude, endPoint?.longitude]);
+
+  // Reset animation when route changes
+  useEffect(() => {
+    setAnimatedSegments([]);
+    setIsAnimating(false);
+    isAnimatingRef.current = false;
+    timeoutsRef.current.forEach(clearTimeout);
+    timeoutsRef.current = [];
+  }, [osrmRoute]);
+
+  const startAnimation = () => {
+    // Stop if already animating
+    if (isAnimating) {
+      setIsAnimating(false);
+      isAnimatingRef.current = false;
+      setAnimatedSegments([]);
+      timeoutsRef.current.forEach(clearTimeout);
+      timeoutsRef.current = [];
+      return;
+    }
+
+    const path = osrmRoute || (hasPick && hasDrop ? [pickCoords, dropCoords] : null);
+    if (!path || path.length < 2) return;
+
+    setIsAnimating(true);
+    isAnimatingRef.current = true;
+    setAnimatedSegments([]);
+    timeoutsRef.current.forEach(clearTimeout);
+    timeoutsRef.current = [];
+
+    // Build segments same way as Dispatch.js: path[i] → path[i+1], each with a delay
+    const allSegs = [];
+    for (let i = 0; i < path.length - 1; i++) {
+      allSegs.push({ from: path[i], to: path[i + 1], delay: i * 18 });
+    }
+
+    allSegs.forEach((s, idx) => {
+      const t = setTimeout(() => {
+        if (!isAnimatingRef.current) return;
+        setAnimatedSegments((prev) => [...prev, s]);
+        if (idx === allSegs.length - 1) {
+          const finalT = setTimeout(() => {
+            setIsAnimating(false);
+            isAnimatingRef.current = false;
+          }, 800);
+          timeoutsRef.current.push(finalT);
+        }
+      }, s.delay);
+      timeoutsRef.current.push(t);
+    });
+  };
+
+  // Cleanup on unmount
+  useEffect(() => () => {
+    timeoutsRef.current.forEach(clearTimeout);
+    isAnimatingRef.current = false;
+  }, []);
+
+  const staticRoute = osrmRoute || (hasPick && hasDrop ? [pickCoords, dropCoords] : null);
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%', minHeight: '350px' }}>
+      <MapContainer
+        center={defaultCenter}
+        zoom={12}
+        style={{ width: '100%', height: '100%', minHeight: '350px' }}
+        zoomControl={true}
+      >
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; OpenStreetMap contributors'
+        />
+        {hasPick && <Marker position={pickCoords} icon={pickupIcon} />}
+        {hasDrop && <Marker position={dropCoords} icon={dropoffIcon} />}
+
+        {/* Static solid polyline (shown when not animating) */}
+        {!isAnimating && staticRoute && staticRoute.length >= 2 && (
+          <Polyline
+            positions={staticRoute}
+            pathOptions={{ color: '#1890ff', weight: 4, opacity: 0.85, lineJoin: 'round', lineCap: 'round' }}
+          />
+        )}
+
+        {/* Animated segments — drawn pair-by-pair, matching Dispatch.js pattern */}
+        {isAnimating && animatedSegments.map((s, i) => (
+          <Polyline
+            key={i}
+            positions={[s.from, s.to]}
+            pathOptions={{ color: '#1890ff', weight: 5, opacity: 0.95, lineJoin: 'round', lineCap: 'round' }}
+          />
+        ))}
+
+        <MapBoundsController startPoint={startPoint} endPoint={endPoint} />
+      </MapContainer>
+
+      {/* Floating Animate Routes button — same style as Dispatch's sbt button */}
+      {hasPick && hasDrop && (
+        <button
+          onClick={startAnimation}
+          style={{
+            position: 'absolute',
+            bottom: '16px',
+            right: '16px',
+            zIndex: 1000,
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+            padding: '8px 14px',
+            borderRadius: '8px',
+            border: 'none',
+            cursor: 'pointer',
+            fontWeight: 600,
+            fontSize: '13px',
+            boxShadow: '0 4px 14px rgba(0,0,0,0.18)',
+            background: isAnimating ? '#1890ff' : '#ffffff',
+            color: isAnimating ? '#ffffff' : '#1a202c',
+            transition: 'all 0.25s ease',
+            letterSpacing: '0.01em'
+          }}
+        >
+          <span style={{ fontSize: '14px' }}>{isAnimating ? '⏹' : '▶'}</span>
+          {isAnimating ? 'Stop' : 'Animate Route'}
+        </button>
+      )}
+    </div>
+  );
+};
+
 
 function loadScript(src, position, id) {
   if (!position) {
@@ -145,6 +365,8 @@ const Createorder1 = () => {
   const [pickDialog, setPickDialog] = useState(false);
   const [deliverydate, setDeliverydate] = useState(dayjs().add(30, 'minute'));
   const [deliveryDialog, setDeliveryDialog] = useState(false);
+  const [pickupSearchOpen, setPickupSearchOpen] = useState(false);
+  const [dropSearchOpen, setDropSearchOpen] = useState(false);
 
   const pickerRef = useRef(null);
   const deliveryRef = useRef(null);
@@ -319,7 +541,7 @@ const Createorder1 = () => {
     if (tenantid) {
       clientdetails();
     }
-  }, [searchCustList?.length > 3, searchCustList == '', tenantid]);
+  }, [searchCustList?.length > 3, searchCustList == '', tenantid, pickupSearchOpen, dropSearchOpen]);
 
   useEffect(() => {
     if (timeslotarr[0]) {
@@ -1038,556 +1260,783 @@ const Createorder1 = () => {
           <Grid container spacing={1}>
             <Grid item xs={12}>
               <Grid container spacing={2} sx={{ height: '100%' }}>
-                {/* ================================================= || Pickup || ================================================= */}
+                <Grid item xs={12}>
+                  <Grid container spacing={2}>
+                    <Grid item xs={12} md={8}>
+                      <Grid container spacing={2} sx={{ height: '100%' }}>
+                        {/* ================================================= || Pickup || ================================================= */}
 
-                <Grid item xs={12} sm={6}>
-                  <MainCard sx={{ height: '100%' }}>
-                    <Grid container spacing={2}>
-                      <Grid item xs={12}>
-                        <Stack direction={'row'} justifyContent={'space-between'}>
-                          <Typography variant="h5" sx={{ mb: 2 }}>
-                            Pickup Details
-                          </Typography>
-                          <Stack display={'flex'} direction={'row'}>
-                            <Button
-                              variant="contained"
-                              size="small"
-                              disabled={!locationid}
-                              onClick={() => {
-                                if (!appId && !tenantid && !locationid) {
-                                  OpenToast('Please select Location, Tenant and Business!', 'warning', 3000);
-                                } else if (!appId && !tenantid) {
-                                  OpenToast('Please select Location and Tenant!', 'warning', 3000);
-                                } else if (!appId) {
-                                  OpenToast('Please select Location!', 'warning', 3000);
-                                } else {
-                                  setIsCustomerOpen(true);
-                                  setpickordrop(1);
-                                  setPickCust(null);
-                                  setInputValue1('');
-                                  setSearchCustList('');
-                                }
-                              }}
-                            >
-                              Select Pickup
-                            </Button>
-                          </Stack>
-                        </Stack>
-                        {/* new1 */}
-                      </Grid>
+                        <Grid item xs={12} sm={6}>
+                          <MainCard sx={{ height: '100%' }}>
+                            <Grid container spacing={2}>
+                              <Grid item xs={12}>
+                                <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
+                                  <Typography variant="h5" sx={{ mb: 0 }}>
+                                    Pickup Details
+                                  </Typography>
+                                  <Stack display={'flex'} direction={'row'} gap={1} alignItems={'center'}>
+                                    {pickCust?.firstname && (
+                                      <Typography variant="caption" sx={{ color: 'success.main', fontWeight: 600 }}>
+                                        ✓ Selected
+                                      </Typography>
+                                    )}
+                                    <Button
+                                      variant={pickupSearchOpen ? 'outlined' : 'contained'}
+                                      size="small"
+                                      disabled={!locationid}
+                                      onClick={() => {
+                                        if (!appId && !tenantid && !locationid) {
+                                          OpenToast('Please select Location, Tenant and Business!', 'warning', 3000);
+                                        } else if (!appId && !tenantid) {
+                                          OpenToast('Please select Location and Tenant!', 'warning', 3000);
+                                        } else if (!appId) {
+                                          OpenToast('Please select Location!', 'warning', 3000);
+                                        } else {
+                                          setPickupSearchOpen((prev) => !prev);
+                                          setDropSearchOpen(false);
+                                          setSearchCustList('');
+                                          setpickordrop(1);
+                                        }
+                                      }}
+                                      sx={{ minWidth: 110 }}
+                                    >
+                                      {pickupSearchOpen ? 'Close' : 'Select Pickup'}
+                                    </Button>
+                                  </Stack>
+                                </Stack>
 
-                      <Grid item xs={12} sx={{}}>
-                        <Grid container spacing={4}>
-                          {/* ====================================== ||Contact Name (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              inputRef={textFieldRef1}
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaUser />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Contact Name"
-                              value={pickCust?.firstname || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, firstname: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Contact Number(pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              error={numErr1}
-                              inputRef={textFieldRef1a}
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              type="number"
-                              InputProps={{
-                                inputProps: {
-                                  maxLength: 10
-                                },
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaPhoneAlt color={numErr1 && 'red'} />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Contact Number"
-                              value={pickCust?.contactno || ''}
-                              onChange={(e) => {
-                                if (e.target.value.length <= 10) {
-                                  setPickCust({ ...pickCust, contactno: e.target.value });
-                                }
-                                if (pickNum == e.target.value) {
-                                  setShowCheck1(0);
-                                } else {
-                                  setShowCheck1(1);
-                                }
-                                if (e.target.value.length < 10) {
-                                  setNumErr1(true);
-                                } else {
-                                  setNumErr1(false);
-                                }
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== || Address(pick) || ====================================== */}
-                          <Grid item xs={12}>
-                            <Stack spacing={1.25} sx={{ mt: 0 }}>
-                              {addId1 == 0 ? (
-                                <div>
-                                  <TextField
-                                    // disabled={!appId || !tenantid || !locationid}
-                                    id="addressAuto1"
-                                    fullWidth
-                                    label={'Address'}
-                                    variant="outlined"
-                                    value={inputValue1 || ''}
-                                    onChange={(e) => setInputValue1(e.target.value)}
-                                    InputProps={{
-                                      endAdornment: (
-                                        <IconButton
-                                          onClick={() => {
-                                            setInputValue1('');
-                                            setPickCust({
-                                              ...pickCust,
-                                              doorno: '',
-                                              suburb: '',
-                                              city: '',
-                                              postcode: '',
-                                              landmark: ''
-                                            });
-                                            setShowDistance(false);
-                                            setStartPoint({ latitude: 0, longitude: 0 });
-                                          }}
-                                          size="small"
-                                        >
-                                          <CloseIcon />
-                                        </IconButton>
-                                      )
+                                {/* ============ Inline Pickup Search Panel ============ */}
+                                <div
+                                  style={{
+                                    overflow: 'hidden',
+                                    maxHeight: pickupSearchOpen ? '380px' : '0px',
+                                    transition: 'max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
+                                    marginTop: pickupSearchOpen ? '12px' : '0px'
+                                  }}
+                                >
+                                  <div
+                                    style={{
+                                      border: '1.5px solid #e2e8f0',
+                                      borderRadius: '12px',
+                                      background: '#f8fafc',
+                                      padding: '12px',
+                                      display: 'flex',
+                                      flexDirection: 'column',
+                                      gap: '8px'
                                     }}
-                                  />
-                                </div>
-                              ) : (
-                                <TextField
-                                  variant="outlined"
-                                  InputProps={{
-                                    endAdornment: (
-                                      <IconButton
-                                        onClick={() => {
-                                          setAddId1(0);
-                                          setPickCust({
-                                            ...pickCust,
-                                            doorno: '',
-                                            suburb: '',
-                                            city: '',
-                                            postcode: '',
-                                            landmark: ''
-                                          });
-                                          setShowDistance(false);
-                                          setStartPoint({ latitude: 0, longitude: 0 });
-                                        }}
-                                      >
-                                        <ClearIcon />
-                                      </IconButton>
-                                    )
-                                  }}
-                                  value={pickCust?.address || ''}
-                                  onChange={(e) => {
-                                    setPickCust({ ...pickCust, address: e.target.value });
-                                    if (e.target.value == '') {
-                                      setAddId1(0);
-                                      setShowDistance(false);
-                                      setStartPoint({ latitude: 0, longitude: 0 });
-                                    }
-                                  }}
-                                />
-                              )}
-                            </Stack>
-                          </Grid>
-                          {/* ====================================== ||Door No (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <GiDoorHandle />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Door No / Street"
-                              value={pickCust?.doorno || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, doorno: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== || Suburb (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaLocationDot />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Location"
-                              value={pickCust?.suburb || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, suburb: e.target.value });
-                              }}
-                            />
-                          </Grid>
+                                  >
+                                    {/* Search Input */}
+                                    <OutlinedInput
+                                      autoFocus={pickupSearchOpen}
+                                      fullWidth
+                                      size="small"
+                                      placeholder="Search customer..."
+                                      value={pickupSearchOpen ? searchCustList : ''}
+                                      onChange={(e) => setSearchCustList(e.target.value)}
+                                      sx={{ bgcolor: 'white', borderRadius: '8px' }}
+                                      startAdornment={
+                                        <InputAdornment position="start">
+                                          <SearchOutlined style={{ fontSize: 'small' }} />
+                                        </InputAdornment>
+                                      }
+                                      endAdornment={
+                                        searchCustList ? (
+                                          <IconButton size="small" onClick={() => setSearchCustList('')}>
+                                            <ClearIcon fontSize="small" />
+                                          </IconButton>
+                                        ) : null
+                                      }
+                                    />
 
-                          {/* ====================================== || postcode (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <TbMapPinCode />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Postcode"
-                              value={pickCust?.postcode || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, postcode: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== || Landmark (pick) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaLandmarkDome />
-                                  </IconButton>
-                                )
-                              }}
-                              variant="outlined"
-                              label="Landmark"
-                              value={pickCust?.landmark || ''}
-                              onChange={(e) => {
-                                setPickCust({ ...pickCust, landmark: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Checkbox save for later (pick) || ====================================== */}
-                          {showCheck1 == 1 && (
-                            <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
-                              <FormGroup>
-                                <FormControlLabel
-                                  control={
-                                    <Checkbox
-                                      checked={isNumChange1 === 1}
+                                    {/* Customer List */}
+                                    <div
+                                      style={{
+                                        maxHeight: '280px',
+                                        overflowY: 'auto',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: '6px'
+                                      }}
+                                    >
+                                      {customerlist?.length === 0 ? (
+                                        <Stack alignItems="center" justifyContent="center" sx={{ py: 2 }}>
+                                          <Empty />
+                                        </Stack>
+                                      ) : (
+                                        customerlist?.map((address, index) => (
+                                          <Button
+                                            key={index}
+                                            disabled={pickCust?.customerid === address.customerid}
+                                            onClick={() => {
+                                              setPickupSearchOpen(false);
+                                              setAddId1(1);
+                                              setStartPoint({ latitude: address.latitude, longitude: address.longitude });
+                                              setPickCust(address);
+                                              setPickNum(address.contactno);
+                                              setSearchCustList('');
+                                            }}
+                                            sx={{
+                                              width: '100%',
+                                              border: '1.5px solid',
+                                              borderColor: pickCust?.customerid === address.customerid ? 'primary.main' : 'grey.200',
+                                              borderRadius: '8px',
+                                              p: 1.25,
+                                              textAlign: 'left',
+                                              justifyContent: 'flex-start',
+                                              bgcolor: pickCust?.customerid === address.customerid ? 'primary.lighter' : 'white',
+                                              '&:hover': { borderColor: 'primary.main', bgcolor: 'rgba(24,144,255,0.04)' }
+                                            }}
+                                          >
+                                            <div style={{ width: '100%' }}>
+                                              <Typography variant="subtitle2" sx={{ textAlign: 'left', fontWeight: 600 }}>
+                                                {`${address.firstname} (${address.contactno})`}
+                                              </Typography>
+                                              <Typography variant="caption" color="secondary" sx={{ textAlign: 'left', display: 'block' }}>
+                                                {address.address}
+                                              </Typography>
+                                            </div>
+                                          </Button>
+                                        ))
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                              </Grid>
+
+                              <Grid item xs={12} sx={{}}>
+                                <Grid container spacing={4}>
+                                  {/* ====================================== ||Contact Name (pick) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      inputRef={textFieldRef1}
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <FaUser />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      variant="outlined"
+                                      label="Contact Name"
+                                      value={pickCust?.firstname || ''}
                                       onChange={(e) => {
-                                        setIsNumChange1(e.target.checked ? 1 : 0);
+                                        setPickCust({ ...pickCust, firstname: e.target.value });
                                       }}
                                     />
-                                  }
-                                  label="Save For Later"
-                                />
-                              </FormGroup>
+                                  </Grid>
+                                  {/* ====================================== ||Contact Number(pick) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      error={numErr1}
+                                      inputRef={textFieldRef1a}
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      type="number"
+                                      InputProps={{
+                                        inputProps: {
+                                          maxLength: 10
+                                        },
+                                        startAdornment: (
+                                          <IconButton>
+                                            <FaPhoneAlt color={numErr1 && 'red'} />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      variant="outlined"
+                                      label="Contact Number"
+                                      value={pickCust?.contactno || ''}
+                                      onChange={(e) => {
+                                        if (e.target.value.length <= 10) {
+                                          setPickCust({ ...pickCust, contactno: e.target.value });
+                                        }
+                                        if (pickNum == e.target.value) {
+                                          setShowCheck1(0);
+                                        } else {
+                                          setShowCheck1(1);
+                                        }
+                                        if (e.target.value.length < 10) {
+                                          setNumErr1(true);
+                                        } else {
+                                          setNumErr1(false);
+                                        }
+                                      }}
+                                    />
+                                  </Grid>
+                                  {/* ====================================== || Address(pick) || ====================================== */}
+                                  <Grid item xs={12}>
+                                    <Stack spacing={1.25} sx={{ mt: 0 }}>
+                                      {addId1 == 0 ? (
+                                        <div>
+                                          <TextField
+                                            // disabled={!appId || !tenantid || !locationid}
+                                            id="addressAuto1"
+                                            fullWidth
+                                            label={'Address'}
+                                            variant="outlined"
+                                            value={inputValue1 || ''}
+                                            onChange={(e) => setInputValue1(e.target.value)}
+                                            InputProps={{
+                                              endAdornment: (
+                                                <IconButton
+                                                  onClick={() => {
+                                                    setInputValue1('');
+                                                    setPickCust({
+                                                      ...pickCust,
+                                                      doorno: '',
+                                                      suburb: '',
+                                                      city: '',
+                                                      postcode: '',
+                                                      landmark: ''
+                                                    });
+                                                    setShowDistance(false);
+                                                    setStartPoint({ latitude: 0, longitude: 0 });
+                                                  }}
+                                                  size="small"
+                                                >
+                                                  <CloseIcon />
+                                                </IconButton>
+                                              )
+                                            }}
+                                          />
+                                        </div>
+                                      ) : (
+                                        <TextField
+                                          variant="outlined"
+                                          InputProps={{
+                                            endAdornment: (
+                                              <IconButton
+                                                onClick={() => {
+                                                  setAddId1(0);
+                                                  setPickCust({
+                                                    ...pickCust,
+                                                    doorno: '',
+                                                    suburb: '',
+                                                    city: '',
+                                                    postcode: '',
+                                                    landmark: ''
+                                                  });
+                                                  setShowDistance(false);
+                                                  setStartPoint({ latitude: 0, longitude: 0 });
+                                                }}
+                                              >
+                                                <ClearIcon />
+                                              </IconButton>
+                                            )
+                                          }}
+                                          value={pickCust?.address || ''}
+                                          onChange={(e) => {
+                                            setPickCust({ ...pickCust, address: e.target.value });
+                                            if (e.target.value == '') {
+                                              setAddId1(0);
+                                              setShowDistance(false);
+                                              setStartPoint({ latitude: 0, longitude: 0 });
+                                            }
+                                          }}
+                                        />
+                                      )}
+                                    </Stack>
+                                  </Grid>
+                                  {/* ====================================== ||Door No (pick) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <GiDoorHandle />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      variant="outlined"
+                                      label="Door No / Street"
+                                      value={pickCust?.doorno || ''}
+                                      onChange={(e) => {
+                                        setPickCust({ ...pickCust, doorno: e.target.value });
+                                      }}
+                                    />
+                                  </Grid>
+                                  {/* ====================================== || Suburb (pick) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <FaLocationDot />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      variant="outlined"
+                                      label="Location"
+                                      value={pickCust?.suburb || ''}
+                                      onChange={(e) => {
+                                        setPickCust({ ...pickCust, suburb: e.target.value });
+                                      }}
+                                    />
+                                  </Grid>
+
+                                  {/* ====================================== || postcode (pick) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <TbMapPinCode />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      variant="outlined"
+                                      label="Postcode"
+                                      value={pickCust?.postcode || ''}
+                                      onChange={(e) => {
+                                        setPickCust({ ...pickCust, postcode: e.target.value });
+                                      }}
+                                    />
+                                  </Grid>
+                                  {/* ====================================== || Landmark (pick) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <FaLandmarkDome />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      variant="outlined"
+                                      label="Landmark"
+                                      value={pickCust?.landmark || ''}
+                                      onChange={(e) => {
+                                        setPickCust({ ...pickCust, landmark: e.target.value });
+                                      }}
+                                    />
+                                  </Grid>
+                                  {/* ====================================== ||Checkbox save for later (pick) || ====================================== */}
+                                  {showCheck1 == 1 && (
+                                    <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
+                                      <FormGroup>
+                                        <FormControlLabel
+                                          control={
+                                            <Checkbox
+                                              checked={isNumChange1 === 1}
+                                              onChange={(e) => {
+                                                setIsNumChange1(e.target.checked ? 1 : 0);
+                                              }}
+                                            />
+                                          }
+                                          label="Save For Later"
+                                        />
+                                      </FormGroup>
+                                    </Grid>
+                                  )}
+                                </Grid>
+                              </Grid>
                             </Grid>
-                          )}
+                          </MainCard>
+                        </Grid>
+
+                        {/* ================================================= || Drop || ================================================= */}
+
+                        <Grid item xs={12} sm={6}>
+                          <MainCard sx={{ height: '100%' }}>
+                            <Grid container spacing={2} sx={{ height: '100%' }}>
+                              <Grid item xs={12} sx={{ height: '100%' }}>
+                                <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
+                                  <Typography variant="h5" sx={{ mb: 0 }}>
+                                    Drop Details
+                                  </Typography>
+                                  <Stack direction={'row'} gap={1} alignItems={'center'}>
+                                    {dropCust?.firstname && (
+                                      <Typography variant="caption" sx={{ color: 'success.main', fontWeight: 600 }}>
+                                        ✓ Selected
+                                      </Typography>
+                                    )}
+                                    <Button
+                                      variant={dropSearchOpen ? 'outlined' : 'contained'}
+                                      disabled={!locationid}
+                                      size="small"
+                                      onClick={() => {
+                                        if (!appId && !tenantid && !locationid) {
+                                          OpenToast('Please select Location, Tenant and Business!', 'warning', 3000);
+                                        } else if (!appId && !tenantid) {
+                                          OpenToast('Please select Location and Tenant!', 'warning', 3000);
+                                        } else if (!appId) {
+                                          OpenToast('Please select Location!', 'warning', 3000);
+                                        } else {
+                                          setDropSearchOpen((prev) => !prev);
+                                          setPickupSearchOpen(false);
+                                          setSearchCustList('');
+                                          setpickordrop(2);
+                                        }
+                                      }}
+                                      sx={{ minWidth: 100 }}
+                                    >
+                                      {dropSearchOpen ? 'Close' : 'Select Drop'}
+                                    </Button>
+                                  </Stack>
+                                </Stack>
+
+                                {/* ============ Inline Drop Search Panel ============ */}
+                                <div
+                                  style={{
+                                    overflow: 'hidden',
+                                    maxHeight: dropSearchOpen ? '380px' : '0px',
+                                    transition: 'max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
+                                    marginTop: dropSearchOpen ? '12px' : '0px'
+                                  }}
+                                >
+                                  <div
+                                    style={{
+                                      border: '1.5px solid #e2e8f0',
+                                      borderRadius: '12px',
+                                      background: '#f8fafc',
+                                      padding: '12px',
+                                      display: 'flex',
+                                      flexDirection: 'column',
+                                      gap: '8px'
+                                    }}
+                                  >
+                                    {/* Search Input */}
+                                    <OutlinedInput
+                                      autoFocus={dropSearchOpen}
+                                      fullWidth
+                                      size="small"
+                                      placeholder="Search customer..."
+                                      value={dropSearchOpen ? searchCustList : ''}
+                                      onChange={(e) => setSearchCustList(e.target.value)}
+                                      sx={{ bgcolor: 'white', borderRadius: '8px' }}
+                                      startAdornment={
+                                        <InputAdornment position="start">
+                                          <SearchOutlined style={{ fontSize: 'small' }} />
+                                        </InputAdornment>
+                                      }
+                                      endAdornment={
+                                        searchCustList ? (
+                                          <IconButton size="small" onClick={() => setSearchCustList('')}>
+                                            <ClearIcon fontSize="small" />
+                                          </IconButton>
+                                        ) : null
+                                      }
+                                    />
+
+                                    {/* Customer List */}
+                                    <div
+                                      style={{
+                                        maxHeight: '280px',
+                                        overflowY: 'auto',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        gap: '6px'
+                                      }}
+                                    >
+                                      {customerlist?.length === 0 ? (
+                                        <Stack alignItems="center" justifyContent="center" sx={{ py: 2 }}>
+                                          <Empty />
+                                        </Stack>
+                                      ) : (
+                                        customerlist?.map((address, index) => (
+                                          <Button
+                                            key={index}
+                                            disabled={pickCust?.customerid === address.customerid}
+                                            onClick={() => {
+                                              setDropSearchOpen(false);
+                                              setAddId2(1);
+                                              setEndPoint({ latitude: address.latitude, longitude: address.longitude });
+                                              setDropCust(address);
+                                              setdropNum(address.contactno);
+                                              setSearchCustList('');
+                                            }}
+                                            sx={{
+                                              width: '100%',
+                                              border: '1.5px solid',
+                                              borderColor: dropCust?.customerid === address.customerid ? 'primary.main' : 'grey.200',
+                                              borderRadius: '8px',
+                                              p: 1.25,
+                                              textAlign: 'left',
+                                              justifyContent: 'flex-start',
+                                              bgcolor: dropCust?.customerid === address.customerid ? 'primary.lighter' : 'white',
+                                              '&:hover': { borderColor: 'primary.main', bgcolor: 'rgba(24,144,255,0.04)' }
+                                            }}
+                                          >
+                                            <div style={{ width: '100%' }}>
+                                              <Typography variant="subtitle2" sx={{ textAlign: 'left', fontWeight: 600 }}>
+                                                {`${address.firstname} (${address.contactno})`}
+                                              </Typography>
+                                              <Typography variant="caption" color="secondary" sx={{ textAlign: 'left', display: 'block' }}>
+                                                {address.address}
+                                              </Typography>
+                                            </div>
+                                          </Button>
+                                        ))
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                              </Grid>
+
+                              <Grid item xs={12}>
+                                <Grid container spacing={4}>
+                                  {/* ====================================== ||Contact Name (drop) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      inputRef={textFieldRef2}
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      variant="outlined"
+                                      label="Contact Name"
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <FaUser />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      value={dropCust?.firstname || ''}
+                                      onChange={(e) => {
+                                        setDropCust({ ...dropCust, firstname: e.target.value });
+                                      }}
+                                    />
+                                  </Grid>
+                                  {/* ====================================== ||Contact Number (drop) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      error={numErr2}
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      type="number"
+                                      variant="outlined"
+                                      label="Contact Number"
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <FaPhoneAlt color={numErr2 && 'red'} />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      value={dropCust?.contactno || ''}
+                                      onChange={(e) => {
+                                        if (e.target.value.length <= 10) {
+                                          setDropCust({ ...dropCust, contactno: e.target.value });
+                                        }
+                                        if (dropNum == e.target.value) {
+                                          setShowCheck2(0);
+                                        } else {
+                                          setShowCheck2(1);
+                                        }
+                                        if (e.target.value.length < 10) {
+                                          setNumErr2(true);
+                                        } else {
+                                          setNumErr2(false);
+                                        }
+                                      }}
+                                      sx={{ color: numErr2 ? 'red' : 'inherit' }}
+                                    />
+                                  </Grid>
+
+                                  {/* ====================================== || Address (drop) || ====================================== */}
+                                  <Grid item xs={12}>
+                                    <Stack spacing={1.25} sx={{ mt: 0 }}>
+                                      {addId2 == 0 ? (
+                                        <div>
+                                          <TextField
+                                            // disabled={!appId || !tenantid || !locationid}
+                                            id="addressAuto2"
+                                            label="Address "
+                                            variant="outlined"
+                                            fullWidth
+                                            value={inputValue2 || ''}
+                                            onChange={(e) => setInputValue2(e.target.value)}
+                                            InputProps={{
+                                              endAdornment: (
+                                                <IconButton
+                                                  onClick={() => {
+                                                    setInputValue2('');
+                                                    setDropCust({
+                                                      ...dropCust,
+                                                      doorno: '',
+                                                      suburb: '',
+                                                      city: '',
+                                                      postcode: '',
+                                                      landmark: ''
+                                                    });
+                                                    setShowDistance(false);
+                                                    setEndPoint({ latitude: 0, longitude: 0 });
+                                                  }}
+                                                  size="small"
+                                                >
+                                                  <CloseIcon />
+                                                </IconButton>
+                                              )
+                                            }}
+                                          />
+                                        </div>
+                                      ) : (
+                                        <TextField
+                                          variant="outlined"
+                                          InputProps={{
+                                            endAdornment: (
+                                              <IconButton
+                                                onClick={() => {
+                                                  setAddId2(0);
+                                                  setDropCust({
+                                                    ...dropCust,
+                                                    // firstname: '',
+                                                    // contactno: '',
+                                                    doorno: '',
+                                                    suburb: '',
+                                                    city: '',
+                                                    postcode: '',
+                                                    landmark: ''
+                                                  });
+                                                  setShowDistance(false);
+                                                  setEndPoint({ latitude: 0, longitude: 0 });
+                                                }}
+                                              >
+                                                <ClearIcon />
+                                              </IconButton>
+                                            )
+                                          }}
+                                          value={dropCust?.address || ''}
+                                          onChange={(e) => {
+                                            setPickCust({ ...dropCust, address: e.target.value });
+                                            if (e.target.value == '') {
+                                              setAddId2(0);
+                                              setShowDistance(false);
+                                              setEndPoint({ latitude: 0, longitude: 0 });
+                                            }
+                                          }}
+                                        />
+                                      )}
+                                    </Stack>
+                                  </Grid>
+
+                                  {/* ====================================== ||Door No (drop) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      variant="outlined"
+                                      label="Door No / Street"
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <GiDoorHandle />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      value={dropCust?.doorno || ''}
+                                      onChange={(e) => {
+                                        setDropCust({ ...dropCust, doorno: e.target.value });
+                                      }}
+                                    />
+                                  </Grid>
+                                  {/* ====================================== ||Suburb (drop) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      variant="outlined"
+                                      label="Location"
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <FaLocationDot />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      value={dropCust?.suburb || ''}
+                                      onChange={(e) => {
+                                        setDropCust({ ...dropCust, suburb: e.target.value });
+                                      }}
+                                    />
+                                  </Grid>
+
+                                  {/* ====================================== ||Postcode (drop) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      variant="outlined"
+                                      label="Postcode"
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <TbMapPinCode />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      value={dropCust?.postcode || ''}
+                                      onChange={(e) => {
+                                        setDropCust({ ...dropCust, postcode: e.target.value });
+                                      }}
+                                    />
+                                  </Grid>
+                                  {/* ====================================== ||Landmark (drop) || ====================================== */}
+                                  <Grid item xs={12} sm={6}>
+                                    <TextField
+                                      // disabled={!appId || !tenantid || !locationid}
+                                      fullWidth
+                                      variant="outlined"
+                                      label="Landmark"
+                                      InputProps={{
+                                        startAdornment: (
+                                          <IconButton>
+                                            <FaLandmarkDome />
+                                          </IconButton>
+                                        )
+                                      }}
+                                      value={dropCust?.landmark || ''}
+                                      onChange={(e) => {
+                                        setDropCust({ ...dropCust, landmark: e.target.value });
+                                      }}
+                                    />
+                                  </Grid>
+                                  {/* ====================================== ||Checkbox save for later (drop) || ====================================== */}
+                                  {showCheck2 == 1 && (
+                                    <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
+                                      <FormGroup>
+                                        <FormControlLabel
+                                          control={
+                                            <Checkbox
+                                              checked={isNumChange2 === 1}
+                                              onChange={(e) => {
+                                                setIsNumChange2(e.target.checked ? 1 : 0);
+                                              }}
+                                            />
+                                          }
+                                          label="Save For Later"
+                                        />
+                                      </FormGroup>
+                                    </Grid>
+                                  )}
+                                </Grid>
+                              </Grid>
+                            </Grid>
+                          </MainCard>
                         </Grid>
                       </Grid>
                     </Grid>
-                  </MainCard>
-                </Grid>
 
-                {/* ================================================= || Drop || ================================================= */}
-
-                <Grid item xs={12} sm={6}>
-                  <MainCard sx={{ height: '100%' }}>
-                    <Grid container spacing={2} sx={{ height: '100%' }}>
-                      <Grid item xs={12} sx={{ height: '100%' }}>
-                        <Stack direction={'row'} justifyContent={'space-between'}>
-                          <Typography variant="h5" sx={{ mb: 2 }}>
-                            Drop Details
-                          </Typography>{' '}
-                          <Button
-                            variant="contained"
-                            disabled={!locationid}
-                            size="small"
-                            onClick={() => {
-                              if (!appId && !tenantid && !locationid) {
-                                OpenToast('Please select Location, Tenant and Business!', 'warning', 3000);
-                              } else if (!appId && !tenantid) {
-                                OpenToast('Please select Location and Tenant!', 'warning', 3000);
-                              } else if (!appId) {
-                                OpenToast('Please select Location!', 'warning', 3000);
-                              } else {
-                                setIsCustomerOpen(true);
-                                setpickordrop(2);
-                                setInputValue2('');
-                              }
-                            }}
-                          >
-                            Select Drop
-                          </Button>
-                        </Stack>
-                      </Grid>
-
-                      <Grid item xs={12}>
-                        <Grid container spacing={4}>
-                          {/* ====================================== ||Contact Name (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              inputRef={textFieldRef2}
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Contact Name"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaUser />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.firstname || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, firstname: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Contact Number (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              error={numErr2}
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              type="number"
-                              variant="outlined"
-                              label="Contact Number"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaPhoneAlt color={numErr2 && 'red'} />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.contactno || ''}
-                              onChange={(e) => {
-                                if (e.target.value.length <= 10) {
-                                  setDropCust({ ...dropCust, contactno: e.target.value });
-                                }
-                                if (dropNum == e.target.value) {
-                                  setShowCheck2(0);
-                                } else {
-                                  setShowCheck2(1);
-                                }
-                                if (e.target.value.length < 10) {
-                                  setNumErr2(true);
-                                } else {
-                                  setNumErr2(false);
-                                }
-                              }}
-                              sx={{ color: numErr2 ? 'red' : 'inherit' }}
-                            />
-                          </Grid>
-
-                          {/* ====================================== || Address (drop) || ====================================== */}
-                          <Grid item xs={12}>
-                            <Stack spacing={1.25} sx={{ mt: 0 }}>
-                              {addId2 == 0 ? (
-                                <div>
-                                  <TextField
-                                    // disabled={!appId || !tenantid || !locationid}
-                                    id="addressAuto2"
-                                    label="Address "
-                                    variant="outlined"
-                                    fullWidth
-                                    value={inputValue2 || ''}
-                                    onChange={(e) => setInputValue2(e.target.value)}
-                                    InputProps={{
-                                      endAdornment: (
-                                        <IconButton
-                                          onClick={() => {
-                                            setInputValue2('');
-                                            setDropCust({
-                                              ...dropCust,
-                                              doorno: '',
-                                              suburb: '',
-                                              city: '',
-                                              postcode: '',
-                                              landmark: ''
-                                            });
-                                            setShowDistance(false);
-                                            setEndPoint({ latitude: 0, longitude: 0 });
-                                          }}
-                                          size="small"
-                                        >
-                                          <CloseIcon />
-                                        </IconButton>
-                                      )
-                                    }}
-                                  />
-                                </div>
-                              ) : (
-                                <TextField
-                                  variant="outlined"
-                                  InputProps={{
-                                    endAdornment: (
-                                      <IconButton
-                                        onClick={() => {
-                                          setAddId2(0);
-                                          setDropCust({
-                                            ...dropCust,
-                                            // firstname: '',
-                                            // contactno: '',
-                                            doorno: '',
-                                            suburb: '',
-                                            city: '',
-                                            postcode: '',
-                                            landmark: ''
-                                          });
-                                          setShowDistance(false);
-                                          setEndPoint({ latitude: 0, longitude: 0 });
-                                        }}
-                                      >
-                                        <ClearIcon />
-                                      </IconButton>
-                                    )
-                                  }}
-                                  value={dropCust?.address || ''}
-                                  onChange={(e) => {
-                                    setPickCust({ ...dropCust, address: e.target.value });
-                                    if (e.target.value == '') {
-                                      setAddId2(0);
-                                      setShowDistance(false);
-                                      setEndPoint({ latitude: 0, longitude: 0 });
-                                    }
-                                  }}
-                                />
-                              )}
-                            </Stack>
-                          </Grid>
-
-                          {/* ====================================== ||Door No (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Door No / Street"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <GiDoorHandle />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.doorno || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, doorno: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Suburb (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Location"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaLocationDot />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.suburb || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, suburb: e.target.value });
-                              }}
-                            />
-                          </Grid>
-
-                          {/* ====================================== ||Postcode (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Postcode"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <TbMapPinCode />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.postcode || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, postcode: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Landmark (drop) || ====================================== */}
-                          <Grid item xs={12} sm={6}>
-                            <TextField
-                              // disabled={!appId || !tenantid || !locationid}
-                              fullWidth
-                              variant="outlined"
-                              label="Landmark"
-                              InputProps={{
-                                startAdornment: (
-                                  <IconButton>
-                                    <FaLandmarkDome />
-                                  </IconButton>
-                                )
-                              }}
-                              value={dropCust?.landmark || ''}
-                              onChange={(e) => {
-                                setDropCust({ ...dropCust, landmark: e.target.value });
-                              }}
-                            />
-                          </Grid>
-                          {/* ====================================== ||Checkbox save for later (drop) || ====================================== */}
-                          {showCheck2 == 1 && (
-                            <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
-                              <FormGroup>
-                                <FormControlLabel
-                                  control={
-                                    <Checkbox
-                                      checked={isNumChange2 === 1}
-                                      onChange={(e) => {
-                                        setIsNumChange2(e.target.checked ? 1 : 0);
-                                      }}
-                                    />
-                                  }
-                                  label="Save For Later"
-                                />
-                              </FormGroup>
-                            </Grid>
-                          )}
-                        </Grid>
-                      </Grid>
+                    {/* ================================================= || Live Map Preview || ================================================= */}
+                    <Grid item xs={12} md={4}>
+                      <MainCard sx={{ height: '100%', minHeight: '400px', display: 'flex', flexDirection: 'column' }}>
+                        <Typography variant="h5" sx={{ mb: 2 }}>
+                          Live Route Preview
+                        </Typography>
+                        <div style={{ flex: 1, minHeight: '380px', position: 'relative', borderRadius: '8px' }}>
+                          <OrderMap startPoint={startPoint} endPoint={endPoint} appLocaLat={appLocaLat} appLocaLng={appLocaLng} />
+                        </div>
+                      </MainCard>
                     </Grid>
-                  </MainCard>
+                  </Grid>
                 </Grid>
                 {/* ================================================= || Category || ================================================= */}
 
@@ -2020,133 +2469,7 @@ const Createorder1 = () => {
           {/* </Box> */}
         </Grid>
 
-        {/* ============================================= || saved address Dialog (Customer List)|| ============================================= */}
-        <Dialog
-          open={isCustomerOpen}
-          onClose={() => {
-            setIsCustomerOpen(false);
-            setSearchCustList('');
-          }}
-          fullWidth
-          sx={{ minWidth: 'lg' }}
-        >
-          <DialogTitle sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
-            <Stack>
-              <Typography variant="h4"> {`Select Address (${pickordrop === 1 ? 'Pickup' : 'Drop'})`}</Typography>
-              <FormControl
-                sx={{
-                  width: '100%',
-                  mt: 1
-                }}
-              >
-                <Stack spacing={2} sx={{ py: 0.2 }}>
-                  <OutlinedInput
-                    autoFocus
-                    fullWidth
-                    id="input-search-header"
-                    placeholder="Search"
-                    value={searchCustList}
-                    onChange={(e) => setSearchCustList(e.target.value)}
-                    sx={{
-                      '& .MuiOutlinedInput-input': {
-                        p: '10.5px 0px 12px'
-                      },
-                      bgcolor: 'white'
-                    }}
-                    startAdornment={
-                      <InputAdornment position="start">
-                        <SearchOutlined style={{ fontSize: 'small' }} />
-                      </InputAdornment>
-                    }
-                    endAdornment={
-                      <IconButton
-                        sx={{ visibility: searchCustList ? 'visible' : 'hidden' }}
-                        onClick={() => {
-                          setSearchCustList('');
-                        }}
-                      >
-                        <ClearIcon />
-                      </IconButton>
-                    }
-                    autoComplete="off"
-                  />
-                </Stack>
-              </FormControl>
-            </Stack>
-          </DialogTitle>
-          <Divider />
-          <DialogContent sx={{ p: 2.5 }}>
-            {customerlist?.length == 0 ? (
-              <Stack spacing={2} direction={'row'} alignItems={'center'} justifyContent={'center'} sx={{}}>
-                <Empty />
-              </Stack>
-            ) : (
-              <Stack spacing={2} sx={{}}>
-                {customerlist &&
-                  customerlist?.map((address, index) => (
-                    <Button
-                      onClick={() => {
-                        setIsCustomerOpen(false);
-
-                        if (pickordrop === 1) {
-                          console.log('PickupClient', address);
-                          setAddId1(1);
-                          setStartPoint({ latitude: address.latitude, longitude: address.longitude });
-                          setPickCust(address);
-                          setPickNum(address.contactno);
-                        } else {
-                          console.log('DropClient', address);
-                          setAddId2(1);
-                          setEndPoint({ latitude: address.latitude, longitude: address.longitude });
-                          setDropCust(address);
-                          setdropNum(address.contactno);
-                        }
-                        setSearchCustList('');
-                      }}
-                      disabled={pickCust?.customerid === address.customerid}
-                      key={index}
-                      sx={{
-                        width: '100%',
-                        border: '1px solid',
-                        borderColor: 'grey.200',
-                        borderRadius: 1,
-                        p: 1.25
-                      }}
-                    >
-                      <div style={{ width: '100%' }}>
-                        <Typography variant="subtitle1" sx={{ textAlign: 'left' }}>
-                          {`${address.firstname} (${address.contactno})`}
-                        </Typography>
-
-                        <Typography variant="body2" color="secondary" sx={{ textAlign: 'left' }}>
-                          {address.address}
-                        </Typography>
-                      </div>
-                    </Button>
-                  ))}
-              </Stack>
-            )}
-          </DialogContent>
-          <Divider />
-          <DialogActions sx={{ p: 2.5 }}>
-            <Button
-              color="error"
-              variant="outlined"
-              sx={{
-                '&:hover': {
-                  bgcolor: 'red',
-                  color: 'white'
-                }
-              }}
-              onClick={() => {
-                setIsCustomerOpen(false);
-                setSearchCustList('');
-              }}
-            >
-              Cancel
-            </Button>
-          </DialogActions>
-        </Dialog>
+        {/* Customer Dialog removed — replaced with inline search panels above */}
         {/* ============================================= || location error  Dialog || ============================================= */}
         <Dialog
           open={open}
diff --git a/src/utils/logger.js b/src/utils/logger.js
new file mode 100644
index 0000000..3da46c0
--- /dev/null
+++ b/src/utils/logger.js
@@ -0,0 +1,66 @@
+const LOG_LEVELS = {
+  DEBUG: 0,
+  INFO: 1,
+  WARN: 2,
+  ERROR: 3,
+};
+
+// Default log level based on environment
+const currentEnv = process.env.NODE_ENV || 'development';
+const isDev = currentEnv === 'development';
+const GLOBAL_LOG_LEVEL = isDev ? LOG_LEVELS.DEBUG : LOG_LEVELS.WARN;
+
+const style = (bg, color) => `background: ${bg}; color: ${color}; padding: 2px 5px; border-radius: 4px; font-weight: bold;`;
+
+const PREFIX = '%c[NearlExpress]';
+const PREFIX_STYLE = style('#2563eb', '#ffffff');
+
+// Capture original console methods before any global overrides occur
+const originalLog = console.log;
+const originalWarn = console.warn || console.log;
+const originalError = console.error || console.log;
+
+const print = (levelName, args, labelStyle) => {
+  const levelValue = LOG_LEVELS[levelName];
+  if (levelValue < GLOBAL_LOG_LEVEL) return;
+
+  const [message, ...extra] = args;
+  const isMessageString = typeof message === 'string';
+
+  const formatPrefix = `${PREFIX}%c ${levelName}`;
+  const styles = [PREFIX_STYLE, labelStyle];
+
+  const consoleMethod =
+    levelName === 'ERROR' ? originalError :
+    levelName === 'WARN' ? originalWarn :
+    originalLog;
+
+  if (isMessageString) {
+    consoleMethod(
+      `${formatPrefix}%c ${message}`,
+      ...styles,
+      'color: inherit;',
+      ...extra
+    );
+  } else {
+    // If first argument is an object/array, preserve raw interactive log
+    consoleMethod(
+      `${formatPrefix}`,
+      ...styles,
+      message,
+      ...extra
+    );
+  }
+};
+
+const logger = {
+  debug: (...args) => print('DEBUG', args, style('#64748b', '#ffffff')),
+  info: (...args) => print('INFO', args, style('#10b981', '#ffffff')),
+  warn: (...args) => print('WARN', args, style('#f59e0b', '#ffffff')),
+  error: (...args) => {
+    print('ERROR', args, style('#ef4444', '#ffffff'));
+    // Future expansion hook: e.g., Sentry.captureException(args[0]);
+  },
+};
+
+export default logger;