<!-- Chaitanya Dairy PWA — ADMIN DOTS MENU 25.1 (v25.1) — June 17, 2026, evening IST (approx — time tool unavailable) — 🟢 TWO FIXES to v25: (1) ⋮ MENU WAS EMPTY — root cause: buildMenu filtered routes by a.active, but routes don't have active=true set (the working route tabs use ALL agents with no active filter). FIXED: ⋮ menu now lists ALL routes exactly like the route tabs do. (2) EXIT MOVED INTO ⋮ MENU — the header Exit button is now HIDDEN for admin; a 🚪 Exit button now sits at the very BOTTOM of the ⋮ drawer, after the last route. It triggers the same exit action as before. Agent/customer header Exit unchanged. Nothing else changed from v25. =====
PREVIOUS: Chaitanya Dairy PWA — ADMIN DOTS MENU 25 (v25) — June 17, 2026, evening IST (approx) — 🟢 ADMIN ⋮ MENU — PHASE 1 (organizes the long-scroll Today page). Added a ⋮ button (top-right, blue) shown ONLY for admin. Tapping it opens a drawer listing each route as a collapsible header (🚴 Route name ▼); tapping a route expands to show 5 items: 📍 Agent Location, 🟣 Purple Alerts, 🔔 Notifications, ✅ Mark Deliveries, 📋 Tomorrow Special Orders. Tapping an item switches to that route and opens THAT ONE section full-screen with a "← Back to Today" button. Today/Stats/Summary tables UNCHANGED and stay on the main Today page. No calendar — same-day info only. Reuses existing elements (dashLiveTrack, qtyChangesCard, notifBar, markDelivCard, tomorrowOrders) + their v21.9 accordions — nothing duplicated/deleted. Phase 2 (later): ☰ for Bills, Customers, Advance Orders, Settings. No money/billing/sync/Firebase changed. Agent ☰ and customer ☰ menus unchanged. =====
PREVIOUS: Chaitanya Dairy PWA — AGENT MENU 24.10 (v24.10) — June 17, 2026 — 🟢 FIX: Stats (and Contact) were briefly/again appearing on the agent main Route page. Root cause: renderRoute force-set routeStats and callMgrSec to display:block on every render, overriding the ☰ menu hide. FIX: for agent, renderRoute no longer forces these visible — the ☰ drawer fully controls them (showSection shows the picked one with display:block, showHome hides all). Admin view unchanged. Nothing else changed from v24.9. Display only. =====
PREVIOUS: Chaitanya Dairy PWA — AGENT MENU 24.9 (v24.9) — June 17, 2026 — 🟢 AGENT HAMBURGER MENU + CARD ⋮ MENU. (1) Added a ☰ menu button (top-left, green) shown ONLY for the delivery agent. The agent Route page now keeps the delivery customer list (with purple ribbons + landmark — UNCHANGED) plus date, note, and location on the main screen. Four sections moved into the ☰ drawer: 🔔 Notifications, 📊 Stats, 📋 Tomorrow Orders, 📞 Contact Manager. Tapping a menu item opens that section alone with a "← Back to Route" button. Purple ribbons stay on each customer card (NOT moved) so the agent sees order changes while delivering. (2) Each customer card now has a ⋮ three-dots button → 📞 Call Manager (calls owner/manager number only — agent never sees customer phone numbers). Display only — no money/billing/sync/Firebase listeners changed. Admin view unaffected (☰ hidden for admin). ===== PREVIOUS: Chaitanya Dairy PWA — MENU 24.8 (v24.8) — June 17, 2026 — 🟢 COLOR TWEAK: Customer 🚴 Delivery Status box changed from thick dark blue to a soft pastel blue (#E9F2FC→#D6E8F8) with dark blue text and a light border — easier on the eyes. Nothing else changed from v24.7 (hamburger menu intact). Display only — no money/billing/sync/Firebase changed. ===== PREVIOUS: Chaitanya Dairy PWA — MENU 24.7 (v24.7) — June 17, 2026 — 🟢 CUSTOMER HAMBURGER MENU. Added a ☰ menu button at the TOP-LEFT of the customer header. The customer home screen now shows ONLY: Today's Delivery, Delivery Status, 📞 Call Manager, and 🛒 Order More. The other five sections (🥛 Milk Settings, 📊 Monthly Details, 💰 My Bill, 🏖️ Vacation Hold, 📍 My Address) are hidden from the home screen and moved into the ☰ slide-out drawer (opens from left, shows customer name on top). Tapping a menu item closes the drawer and opens THAT section alone as a focused screen (everything else hidden), with a "← Back to Home" button at the top to return. Resets to home on every login/return. 🛒 Order More always stays on the home screen for easy ordering; Call Manager always visible for emergencies. Display only — no money/billing/sync/Firebase listeners changed. ===== PREVIOUS: Chaitanya Dairy PWA — LOGIN CHANGE 24.6 (v24.6) — June 17, 2026, ~1:30 PM IST (approx — time tool unavailable) — 🟢 PIN SCREEN NOW SHOWS YOUR ACTUAL NAME. Previously the Admin PIN screen always said generic "👤 Admin Login" regardless of whose phone number matched — even after renaming yourself/Vardhan in Settings → Admin PINs → Rename. Now it captures WHICH owner's phone matched and shows "👤 [Their Name] Login" (e.g. "👤 Kavitha Login"), same idea as how the Agent screen already shows the agent's real name. Using the safety-net "Login with PIN instead" link still shows generic "Admin Login" (since no specific phone was matched there) — that's expected. No data/billing/sync/Firebase changes — display only. ===== Chaitanya Dairy PWA — LOGIN CHANGE 24.5 (v24.5) — June 17, 2026, ~1:10 PM IST (approx — time tool unavailable) — 🔴 CRITICAL DATA-SAFETY FIX: owner/agent phone numbers could get silently WIPED across all devices. Root cause: when syncAuthData()/syncAll() pulled owner or agent data from the cloud, if the cloud copy was ever missing the phone field (e.g. one earlier failed save), the merge logic would overwrite a device's correct LOCAL phone with the cloud's blank one — and since syncs run automatically and often, this could erase a working phone number even after you'd successfully saved it. FIX: merge logic now ALWAYS keeps whichever of local/cloud has a non-empty phone (and for agents: agentPhone + active flag too) — cloud data can never again silently erase a good local phone number. Applied to all 3 merge locations (syncAuthData, syncAll, post-login resync). ACTION NEEDED: Re-save your phone (Settings → Admin PINs → Set Phone) and Vardhan's phone once more, so the cloud copy gets refreshed cleanly under this safer logic — going forward this should hold permanently on all devices including Incognito. No billing/sync-listener/Firebase structure changes. ===== Chaitanya Dairy PWA — LOGIN CHANGE 24.4 (v24.4) — June 17, 2026, 12:53 PM IST — 🔴 CRITICAL FIX: doPhoneLogin was checking "settings.routes" but the real field is "settings.agents" — a typo that made the agent list ALWAYS EMPTY, so agent phone login could never succeed no matter what else was fixed in v24.1–24.3. Fixed to settings.agents. ALSO FIXED: doPhoneLogin now calls syncAuthData() FIRST (pulls fresh owner/agent/customer data from the cloud) before checking the phone number, so login works correctly even on a phone/browser that hasn't synced this number locally before (e.g. testing on a different device than the one used to save the number). Button shows "🔄 Checking..." briefly during this. No billing/sync-listener/Firebase structure changes. ===== Chaitanya Dairy PWA — LOGIN CHANGE 24.3 (v24.3) — June 17, 2026, 12:14 PM IST — 🟡 FIXES AGENT LOGIN BUG + NUMERIC-ONLY PHONE BOX. ROOT CAUSE found: when an Agent's PIN is set, the route's "active" flag was never set true (only Owner PIN-setup did this) — so the v24 phone-login agent check (which required active=true) silently failed even with correct phone saved. FIX 1: Agent PIN setup now also sets agents[i].active=true, matching Owner behavior. FIX 2 (safety): doPhoneLogin's agent match now accepts EITHER active=true OR an existing pinHash as proof of being a real configured agent — so any agent whose PIN was set before this patch also works immediately, no need to re-set PIN. FIX 3: "⌨️ Type Number Manually" for agent phone is no longer a popup prompt — it's now an inline box with a real number input (digits only, auto-capped at 10, numeric keypad) + a Save button, so typing is restricted to 10 digits as it happens, not just validated after. No billing/sync/Firebase changes. ===== Chaitanya Dairy PWA — LOGIN CHANGE 24.2 (v24.2) — June 17, 2026 — 🟢 ADDED MANUAL PHONE ENTRY FOR AGENT. Settings → Agent route card previously had ONLY "📱 Pick Agent from Contacts" (Contact Picker API) — no way to type the number by hand if the agent isn't saved as a phone contact. Added a new "⌨️ Type Number Manually" button right below it — opens a simple prompt to type/edit the 10-digit number directly, same validation as owner phone (Set Phone). Both buttons now sit side by side; use whichever is convenient. No data structure change — still writes to the same agents[i].agentPhone field. No billing/sync/Firebase changes. ===== Chaitanya Dairy PWA — LOGIN CHANGE 24.1 (v24.1) — June 17, 2026 — 🟡 FIXES v24 LOCKOUT BUG: DB.owners never had a phone field (only settings.ownerPhone existed, a single "Manager Phone" used elsewhere) — so owner phone matching in v24 always failed. FIX: (1) Added phone field to DB.owners[] (additive, backward-compatible — old saved owners just get phone:'' until set). (2) Settings → Admin PINs → each owner card now has a "📱 Set Phone" button to register Kavitha's and Vardhan's numbers. (3) doPhoneLogin now checks owners[].phone correctly (plus settings.ownerPhone as extra fallback). (4) PERMANENT SAFETY NET: login screen now always shows a small "Admin / Agent? Login with PIN instead" link — tapping reveals Admin/Agent buttons that go straight to PIN entry, bypassing phone lookup entirely. This means Admin/Agent can NEVER be locked out again even if phone numbers are wrong/unset. ACTION NEEDED: Settings → Admin PINs → tap "📱 Set Phone" for both Admin and Proprietor, enter Kavitha's and Vardhan's numbers. No billing/sync/Firebase listener changes. ===== Chaitanya Dairy PWA — BILL 24 (v24) — June 17, 2026, 7:12 AM IST — 🟢 LOGIN REDESIGN: Single phone-number login screen. No more 3 separate buttons. User enters 10-digit mobile → app checks: owner phone → PIN → Admin screen; agent phone → PIN → Agent screen; customer phone → Customer screen (stays logged in); unknown → "Not registered". Customer session saved in localStorage (auto-login on return). Owner phones stored in DB.owners[].phone; agent phones in DB.settings.routes[].agentPhone (already existed). No Firebase structure changed, no sync touched, no billing touched. ===== PREVIOUS: BILL 23.11 (v23.11) — June 16, 2026, 1:30 PM IST — 🟢 DISPLAY: (1) ➕ ADD PRODUCT TO HANDOVER. The handover box area now has a "➕ Add product to handover" button. Tapping it opens an inline picker: select the product from a dropdown (shows products not already in boxes), enter qty, tap ✅ Add → a new box appears for that product AND a new column appears in the Stats table (Handover = typed qty, To Deliver = 0 since no orders, Undelivered = typed qty). Works for any product including stock the agent carries without any customer ordering it. On Save, the product is stored in the handover map and extra pids are cleared. On Clear, the picker and extra pids are reset. (2) COLOR SWAP: Handover row values = pink (#E91E8C), Undelivered row values = red (#C0392B). Red = must return. All other colors unchanged. No money/billing/Firebase listeners changed. ===== PREVIOUS: BILL 23.10 (v23.10) — June 16, 2026, 1:05 PM IST — 🟢 DISPLAY: (1) DYNAMIC HANDOVER BOXES: The Handover entry area now shows one input box per product column — not just Cow + Buf, but also Ghee, Paneer and any active product that has orders today. Boxes auto-fill with ordered qty (or saved handover if previously saved). No more static Cow/Buf only. Storage upgraded to per-product JSON map (handover_v2_{date}_{routeId}). Backward-compatible: reads old _cow_/_buf_ keys if no v2 key exists. Save reads all boxes and writes the map; Clear wipes the map and boxes refill with ordered qty. Summary table combines all routes' maps. (2) VALUE COLORS IN STATS TABLE: Handover values = red, To Deliver = blue, Delivered = green, Undelivered = pink (#E91E8C). Labels and values now same color per row. No money/billing/Firebase listeners changed. ===== PREVIOUS: BILL 23.9 (v23.9) — June 16, 2026, 12:46 PM IST — 🟢 DISPLAY: (1) HANDOVER BOXES PRE-FILL WITH ORDERED QTY. When no handover is saved for a route, the 🐄 Cow / 🐃 Buf input boxes now pre-fill with that route's ordered quantities (instead of blank 0), so the default shown matches the table. After tapping ✖️ Clear, the boxes auto-refill with the ordered quantities too. (Added orderedCowBuf() helper using the same cow/buf split as the table.) (2) ADVANCE ORDERS IS NOW A COLLAPSIBLE SECTION ("📋 Advance Orders" pill) like the other dashboard sections — it no longer stays permanently open. Removed its old inner card box/title so the items read as a clean list inside the pill. No money/sync/Firebase changed. ===== PREVIOUS: BILL 23.8 (v23.8) — June 16, 2026, 12:34 PM IST — 🟢 DISPLAY (BUGFIX): HANDOVER/STATS NOW READS THE COW/BUF SPLIT CORRECTLY. The table's qtyFor used to read only a customer's single total attributed to their primary milk type, so a "both" customer (e.g. default 1L cow + 1.5L buf) came out as 0 / 0, and clearing the typed handover fell back to that same 0 / 0. Fixed: qtyFor now uses the customer's cowQty/bufQty day-split when present, then a legacy single-type day override, then getCustDefaults (cowDefault/bufDefault — which understands cow/buffalo/both + cowLitres/bufLitres). So the Handover row auto-fills with the real ordered quantities (1 / 1.5), Clear reverts to those, and Delivered/To Deliver/Undelivered follow. Applies to all handover/stats tables (admin Stats, Summary, route page, agent). Read-only — no data written, no money/sync/Firebase changed. ===== PREVIOUS: BILL 23.7 (v23.7) — June 16, 2026, 12:24 PM IST — 🟢 DISPLAY: "🚩 No Route" TAB + EXTRAS FIX. Root cause of "extra shows in Summary but not Stats": Summary lists ALL customers, but a per-route Stats tab only lists customers whose route matches that tab — so any customer with a blank route OR a stale/removed route id was invisible in every route tab while still counting in Summary. FIX: (1) a "🚩 No Route" tab now appears next to the route tabs whenever such customers exist; tapping it shows their Stats (milk + extras), so nothing is missing from the per-route view. It catches BOTH blank-route and unknown-route-id customers. (2) Adding or editing an order now refreshes the dashboard Stats table immediately (previously only the advance-orders panel refreshed). No money/billing/sync listeners changed. ===== PREVIOUS: BILL 23.6 (v23.6) — June 16, 2026, 12:10 PM IST — 🟡 (minor) HANDOVER CLEAR: added a "✖️ Clear" button next to "💾 Save" in the admin Stats handover box. Tapping it (with confirm) wipes the typed Cow/Buf loaded litres for the SELECTED route (localStorage + handover doc set to 0, same mechanism as Save) and re-renders, so the Handover column automatically falls back to the ordered quantity. Per route, admin only. No money/orders/billing touched; no syncAll or Firebase listeners changed. ===== PREVIOUS: BILL 23.5 (v23.5) — June 16, 2026, 12:02 PM IST — 🟢 DISPLAY: AGENT VIEW = ONE TABLE ONLY. On the delivery agent's Route page he now sees exactly ONE "📊 Stats — <his route>" table (same columns/rows as admin, Cow+Buf always shown). The old 🥛 Milk Handover strip (circle grid + handover typing box) is now ALWAYS hidden for the agent, and he never sees any all-routes total / summary. Admin's own route view is unchanged (still 📦 Handover Tables = TOTAL + per route). No money/sync/Firebase changed. ===== PREVIOUS: BILL 23.4 (v23.4) — June 16, 2026, 11:48 AM IST — 🟢 DISPLAY: TABLE COLUMNS RULE. 🐄 Cow Milk + 🐃 Buffalo Milk are now ALWAYS shown as columns in both the Stats and Summary tables (even on a day with 0 orders, showing 0/—). All other products (Cow/Buffalo Ghee, Paneer, Curd, and any NEW product added later) stay hidden until they have orders, then auto-attach as a new column. Applies everywhere buildHandoverTableHTML is used. No money/sync/Firebase changed. ===== PREVIOUS: BILL 23.3 (v23.3) — June 16, 2026, 11:36 AM IST — 🟢 DISPLAY: ADMIN DASHBOARD = TWO TABLES ONLY. Removed the duplicate stat circles AND the second clashing "Handover". The Dashboard now shows exactly: (1) "📊 Stats — <route name>" = the SELECTED route only; columns auto-fill from orders + delivery ticks (Handover / To Deliver / Delivered / Undelivered); PLUS the optional 📥 Handover box to type litres loaded. The Handover row shows your typed/loaded number, with the ordered total in small grey underneath ONLY if they differ; if nothing is typed it auto-shows the ordered total. To Deliver = ordered − delivered. Undelivered = loaded − delivered (so any extra milk you loaded shows up). (2) "📊 Summary — All Routes" = the SAME table auto-totalled across ALL routes/agents, read-only (no typing box). The Route page handover strips were left untouched. No money formula, no sync, no Firebase listeners changed. ===== PREVIOUS: BILL 23.2 (v23.2) — June 15, 2026, 8:40 PM IST — 🟡 DATA: ALTERNATE DAY DELIVERY + BILL 23.1 ADMIN TEMP QTY — 🟡 DATA: ADMIN TEMP QTY in Edit Customer. A new purple "📅 Temporary Qty (Some Days)" section is added inside the admin Edit Customer modal. Admin can set a different milk quantity for a customer for up to 14 days (e.g. 1.5L instead of 1L from 16 Jun to 18 Jun) — uses the same periodQty system as the customer's own SOME DAYS option. Customer sees it in their own Milk Settings screen automatically. Agent sees it on the route card. A "✕ Clear Temporary Change" button is shown if a temp change is already set. If dates are left empty, existing temp change is preserved. Conflict guard (guardRangeVsVacation) fires if dates overlap with a vacation. 🟢 display changes from v22.3–22.5 fully preserved. ===== BILL 23 (v23) — June 15, 2026, 7:25 PM IST — 🟡 VACATION ↔ ORDER CONFLICT GUARD (a delivery and a vacation can never be on the same day). Works BOTH directions, in BOTH admin and customer windows. (A) When an order/quantity is placed for a customer on a day they are already on vacation (admin Add Order, admin Edit Order, customer single-day order, customer period qty-change) → a confirm popup appears: OK cancels the vacation and places the order, Cancel keeps the vacation and the order is NOT placed. (B) When a vacation is set over days that already have special orders (admin Edit Customer hold, customer Set Vacation Hold) → a confirm popup lists those days: OK sets the vacation and REMOVES those orders, Cancel keeps the orders and the vacation is NOT set. Note: a plain PERMANENT (onwards) quantity change is NOT treated as a conflict — only specific-day orders are. No money formula, no sync/Firebase listeners changed. ===== BILL 22.5 (v22.5) — June 15, 2026, 6:55 PM IST — ADDS TO FOCUS MODE: while a customer card is open, the search box and the route filter dropdown are now greyed out (dimmed) and disabled, so they can't be used until you tap that same customer again to close it. They return to normal (active, clickable) the moment you collapse back to the full list. 🟢 DISPLAY ONLY — no money/data/sync/Firebase touched. ===== BILL 22.4 (v22.4) — June 15, 2026, 6:47 PM IST — REFINES v22.3 FOCUS MODE: when you tap a customer card open, the page now auto-scrolls so THAT CUSTOMER snaps to the top of the screen (just under the blue app header) — so the customer's bill is the FIRST thing you see, with no scrolling needed. The month selector / search / route tabs / totals are scrolled above and remain reachable by scrolling up. Other customers stay hidden until you tap the same card again. 🟢 DISPLAY ONLY — no money/data/sync/Firebase touched. ===== BILL 22.3 (v22.3) — June 15, 2026, 6:37 PM IST — ADMIN BILL "FOCUS MODE": in the admin Bill tab, tapping a customer card now opens ONLY that customer and fills the screen — all other customer cards AND the footer total are hidden until you tap that same card again to collapse back to the full list. Only ONE customer can be open at a time (opening one auto-closes any other). Opening scrolls to the top so the bill starts cleanly; collapsing brings that customer back into view in the list. Fixes the confusion of accidentally reading the top customer's bill instead of the one you opened. 🟢 DISPLAY ONLY — no money/data/sync/Firebase listeners touched. ===== BILL 22.2 (v22.2) — June 15, 2026, 6:25 PM IST — (1) HARD GUARD against admin window showing to a customer (the intermittent two-screen stacking): showScr now forces a logged-in customer to ONLY the customer screen (any attempt to show the admin main screen is redirected to 'sc'); showPg no-ops for customer; renderBill no-ops unless admin. So even if a stray sync/listener fires, the admin bill can never appear over the customer window. (2) Customer "Advance payment" line restyled to "(Advance payment: ₹X)" — in brackets, slightly smaller (11px), light grey — so it reads as a soft detail, clearly NOT part of "You already paid". 🟢 display/guard. ===== BILL 22.1 — login flash fixes. BILL 22 — money single-count + login session clear. ===== PREVIOUS v20 — June 14, 2026, 6:36 PM IST — ADMIN BILL CARRY-OVER (running account): leftover/unpaid balance now carries to next month; overpayment becomes credit. Running ledger = sum of each month net (milk+extras owed minus marks/manual/advance), un-clamped. Card top circle = total due across months (carryIn + this month); shows Balance due / Cleared / Credit(adv). Card body shows Previous months due / Credit from before line when carryIn != 0. billDueForG/Pay-full/overpay-warning now use full carried balance. Per-month payment data unchanged & still synced via paid collection. NO Firebase listeners changed. Security rules unchanged. Customer window carry-over = NEXT step. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<title>Chaitanya Dairy</title>
<style>
body{font-family:Arial,sans-serif;margin:0;padding:0;background:#f5f5f5;}
.screen{display:none !important;}
.screen.active{display:block !important;}

/* LOGIN */
#sl{background:linear-gradient(160deg,#EEF6FF 0%,#FFF5F0 50%,#F0FFF4 100%);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:30px 16px 40px;}
.logo{width:110px;height:110px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:55px;margin-bottom:12px;box-shadow:0 4px 16px rgba(0,0,0,0.12);}
.appname{color:#1A5FA0;font-size:28px;font-weight:bold;text-align:center;margin-bottom:4px;}
.appsub{color:#666;font-size:13px;text-align:center;letter-spacing:2px;margin-bottom:20px;}
.admin-wrap{text-align:center;margin-bottom:16px;}
.admin-pill{display:inline-flex;align-items:center;gap:8px;background:white;border:2px solid #D0E8FF;color:#1A5FA0;padding:8px 22px;border-radius:20px;font-size:13px;font-weight:700;box-shadow:0 2px 8px rgba(26,95,160,0.12);cursor:pointer;border:none;}
.agents-section{width:100%;max-width:380px;margin-bottom:16px;}
.agents-label{font-size:11px;font-weight:700;color:#999;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;text-align:center;}
.agent-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.agent-tile{border-radius:16px;padding:16px 10px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.07);border:2px solid transparent;cursor:pointer;transition:transform 0.1s;}
.agent-tile:active{transform:scale(0.96);}
.agent-tile.a1{border-color:#FFD6D6;background:linear-gradient(135deg,#FFF5F5,white);}
.agent-tile.a2{border-color:#D6EAFF;background:linear-gradient(135deg,#F0F8FF,white);}
.agent-tile.a3{border-color:#D6FFE8;background:linear-gradient(135deg,#F0FFF6,white);}
.agent-tile.a4{border-color:#FFF0D6;background:linear-gradient(135deg,#FFFAF0,white);}
.agent-tile.a5{border-color:#EDD6FF;background:linear-gradient(135deg,#FAF0FF,white);}
.agent-tile.a6{border-color:#D6F5FF;background:linear-gradient(135deg,#F0FAFF,white);}
.agent-tile-icon{font-size:26px;margin-bottom:6px;}
.agent-tile-name{font-size:13px;font-weight:800;color:#333;}
.agent-tile-sub{font-size:10px;color:#999;margin-top:2px;}
.cust-btn-wrap{width:100%;max-width:380px;}
.lbtn-cust{width:100%;background:linear-gradient(135deg,#2A7A4B,#1E5E38);color:white;border:none;border-radius:16px;padding:18px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 16px rgba(42,122,75,0.25);cursor:pointer;}
.lbtn-cust-icon{font-size:30px;}
.lbtn-cust-text{text-align:left;}
.lbtn-cust-text strong{font-size:16px;display:block;}
.lbtn-cust-text span{font-size:12px;opacity:0.85;}
.agent-login-btn{width:100%;background:linear-gradient(135deg,#E8F2FF,#D6E8FF);color:#1A5FA0;border:2px solid #C0D8FF;border-radius:14px;padding:15px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 2px 10px rgba(26,95,160,0.1);cursor:pointer;}
.phone-login-box{background:white;border-radius:16px;padding:18px;box-shadow:0 2px 16px rgba(0,0,0,0.08);margin-top:14px;}
.phone-input-row{display:flex;align-items:center;border:2px solid #ddd;border-radius:10px;overflow:hidden;}
.phone-prefix{padding:12px 10px;background:#f5f5f5;font-size:14px;font-weight:bold;color:#555;border-right:1px solid #ddd;}
.phone-input-row input{flex:1;border:none;padding:12px;font-size:16px;outline:none;background:white;}
.login-middle{width:100%;max-width:380px;margin-bottom:12px;}
.photo-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.photo-item{border-radius:14px;overflow:hidden;position:relative;background:#f0f0f0;min-height:110px;}
.photo-item img{width:100%;height:110px;object-fit:cover;display:block;}
.photo-fallback{font-size:48px;text-align:center;padding:20px 0;}
.photo-label{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.45);color:white;font-size:12px;font-weight:800;padding:6px 8px;text-align:center;}
.products-plain{text-align:center;margin-bottom:12px;}
.products-plain p{font-size:13px;font-weight:700;color:#4A3728;}
.login-tagline{text-align:center;font-size:14px;font-weight:800;color:#2A7A4B;margin-bottom:3px;}
.login-sub{text-align:center;font-size:10px;color:#aaa;letter-spacing:1px;margin-bottom:14px;}
.login-divider{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.divider-line{flex:1;height:1px;background:#ccc;}
.divider-text{font-size:10px;color:#bbb;letter-spacing:1px;white-space:nowrap;}
.login-fresh-text{text-align:center;margin-bottom:14px;padding:14px 12px;background:white;border-radius:16px;box-shadow:0 2px 10px rgba(0,0,0,0.06);}
.fresh-line1{font-size:15px;font-weight:800;color:#1A5FA0;margin-bottom:6px;}
.fresh-line2{font-size:13px;font-weight:600;color:#444;margin-bottom:4px;}
.fresh-line3{font-size:11px;font-weight:600;color:#2A7A4B;margin-top:6px;}
.lcard{background:white;border-radius:16px;padding:24px;width:100%;max-width:380px;}
.lcard h2{color:#1A5FA0;font-size:20px;margin:0 0 5px;}
.lcard p{color:#666;font-size:13px;margin:0 0 20px;}
.lbtn{display:block;width:100%;padding:16px;border:none;border-radius:12px;font-size:16px;font-weight:bold;
  cursor:pointer;text-align:left;margin-bottom:12px;color:white;}
.lbtn-o{background:#E8621A;}
.lbtn-b{background:#1A5FA0;}
.lbtn-c{background:#2A7A4B;}
.lbtn-icon{font-size:22px;margin-right:10px;}

/* HEADER */
.hdr{background:#1A5FA0;color:white;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}
.hdr-title{font-size:14px;font-weight:bold;}
.hdr-sub{font-size:10px;opacity:0.7;}
.exit-btn{background:rgba(255,255,255,0.2);border:none;color:white;padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer;}

/* TABS */
.tabs{display:flex;background:white;border-bottom:2px solid #eee;overflow-x:auto;}
.tab{flex:1;min-width:55px;padding:10px 4px;border:none;background:none;font-size:10px;font-weight:bold;
  color:#999;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;border-bottom:3px solid transparent;}
.tab.active{color:#E8621A;border-bottom-color:#E8621A;}
.tab-icon{font-size:18px;}

/* PAGES */
.page{display:none;padding:12px;max-width:600px;margin:0 auto;padding-bottom:30px;}
.page.active{display:block;}

/* CARDS */
.card{background:white;border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.card-title{font-size:15px;font-weight:bold;color:#333;margin:0 0 10px;}

/* v24.7: HAMBURGER MENU (customer window) */
.hamb-btn{background:rgba(255,255,255,0.18);border:none;color:white;font-size:22px;line-height:1;padding:6px 10px;border-radius:8px;cursor:pointer;margin-right:10px;}
.hamb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:900;}
.hamb-overlay.open{display:block;}
.hamb-drawer{position:fixed;top:0;left:0;height:100%;width:74%;max-width:320px;background:white;z-index:901;transform:translateX(-100%);transition:transform 0.25s ease;box-shadow:4px 0 18px rgba(0,0,0,0.25);overflow-y:auto;}
.hamb-drawer.open{transform:translateX(0);}
.hamb-drawer .hd-top{background:#1A5FA0;color:white;padding:18px 16px;font-size:17px;font-weight:bold;}
.hamb-drawer .hd-top .hd-sub{font-size:11px;font-weight:normal;opacity:0.85;margin-top:2px;}
.hamb-item{display:flex;align-items:center;gap:12px;padding:16px 18px;font-size:15px;font-weight:bold;color:#333;border-bottom:1px solid #eee;cursor:pointer;}
.hamb-item:active{background:#f0f4fa;}
.hamb-item .hi-ico{font-size:20px;width:26px;text-align:center;}
.menu-back-btn{display:none;width:100%;background:#E8F2FF;color:#1A5FA0;border:none;border-radius:10px;padding:12px;font-size:15px;font-weight:bold;margin-bottom:12px;cursor:pointer;}

/* v24.9: AGENT HAMBURGER MENU */
.agent-hamb-btn{background:rgba(255,255,255,0.18);border:none;color:white;font-size:22px;line-height:1;padding:6px 10px;border-radius:8px;cursor:pointer;}
.agent-hamb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:900;}
.agent-hamb-overlay.open{display:block;}
.agent-hamb-drawer{position:fixed;top:0;left:0;height:100%;width:74%;max-width:320px;background:white;z-index:901;transform:translateX(-100%);transition:transform 0.25s ease;box-shadow:4px 0 18px rgba(0,0,0,0.25);overflow-y:auto;}
.agent-hamb-drawer.open{transform:translateX(0);}
.agent-hamb-drawer .ahd-top{background:#2A7A4B;color:white;padding:18px 16px;font-size:17px;font-weight:bold;}
.agent-hamb-item{display:flex;align-items:center;gap:12px;padding:16px 18px;font-size:15px;font-weight:bold;color:#333;border-bottom:1px solid #eee;cursor:pointer;}
.agent-hamb-item:active{background:#f5f5f5;}
.agent-hamb-item .ahi-ico{font-size:20px;width:26px;text-align:center;}
/* v25: ADMIN ⋮ MENU (per-route collapsible) — separate from agent ☰ drawer above */
.admin-dots-btn{background:rgba(255,255,255,0.18);border:none;color:white;font-size:22px;line-height:1;padding:6px 10px;border-radius:8px;cursor:pointer;}
.admin-dots-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:900;}
.admin-dots-overlay.open{display:block;}
.admin-dots-drawer{position:fixed;top:0;left:0;height:100%;width:78%;max-width:340px;background:white;z-index:901;transform:translateX(-100%);transition:transform 0.25s ease;box-shadow:4px 0 18px rgba(0,0,0,0.25);overflow-y:auto;}
.admin-dots-drawer.open{transform:translateX(0);}
.admin-dots-drawer .add-top{background:#1A5FA0;color:white;padding:18px 16px;font-size:17px;font-weight:bold;}
.adr-route-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;font-size:15px;font-weight:800;color:#1A5FA0;background:#EAF2FB;border-bottom:1px solid #D7E6F7;cursor:pointer;}
.adr-route-head .adr-arrow{font-size:13px;transition:transform 0.2s ease;}
.adr-route-head.open .adr-arrow{transform:rotate(180deg);}
.adr-route-body{display:none;}
.adr-route-body.open{display:block;}
.admin-dots-item{display:flex;align-items:center;gap:12px;padding:14px 18px 14px 28px;font-size:14px;font-weight:700;color:#333;border-bottom:1px solid #f0f0f0;cursor:pointer;}
.admin-dots-item:active{background:#f5f5f5;}
.admin-dots-item .adi-ico{font-size:18px;width:24px;text-align:center;}
.admin-menu-back-btn{display:none;width:100%;background:#E8F2FF;color:#1A5FA0;border:none;border-radius:10px;padding:12px;font-size:15px;font-weight:bold;margin-bottom:12px;cursor:pointer;}
.agent-menu-back-btn{display:none;width:100%;background:#E8F5EE;color:#2A7A4B;border:none;border-radius:10px;padding:12px;font-size:15px;font-weight:bold;margin-bottom:12px;cursor:pointer;}

/* v24.9: THREE DOTS MENU on customer cards */
.card-dots-menu{position:relative;}
.card-dots-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:4px 8px;color:#666;}
.card-dots-popup{display:none;position:absolute;top:100%;right:0;background:white;border:2px solid #ddd;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:100;min-width:180px;}
.card-dots-popup.open{display:block;}
.card-dots-popup .dot-item{padding:12px 16px;border-bottom:1px solid #eee;font-size:14px;font-weight:bold;color:#333;cursor:pointer;}
.card-dots-popup .dot-item:last-child{border-bottom:none;}
.card-dots-popup .dot-item:active{background:#f5f5f5;}

/* v17.3: ACCORDION collapsible sections */
.acc{border-radius:12px;margin-bottom:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.acc-head{display:flex;align-items:center;justify-content:space-between;padding:14px;font-size:15px;font-weight:bold;color:white;cursor:pointer;user-select:none;}
.acc-head .acc-arrow{font-size:13px;transition:transform 0.2s;}
.acc.open .acc-arrow{transform:rotate(180deg);}
.acc-body{display:none;background:white;padding:14px;}
.acc.open .acc-body{display:block;}
/* v17.4: light tinted body per section (very pale, easy to read) */
#accOrder .acc-body{background:#EAF6EF;}
#accMilk .acc-body{background:#E9F1FA;}
#accMonthly .acc-body{background:#F2EAFA;}
#accBill .acc-body{background:#FBF4E2;}
#accHold .acc-body{background:#E6F4F6;}
#accAddr .acc-body{background:#FBEAE8;}
/* v17.4: Order More — more compact cards, bigger readable font */
#accOrder .acc-body > #cQtyCard > div[style*="border-radius:12px"]{padding:7px 10px !important;margin-bottom:6px !important;}
#accOrder .acc-body span[style*="font-weight:800"]{font-size:15px !important;}
#accOrder .acc-body span[id$="Val"]{font-size:18px !important;}
/* v17.4: Milk Settings — bigger, clearer text */
#accMilk .acc-body{font-size:14px;}
#accMilk .acc-body label{font-size:14px !important;}
#accMilk .acc-body #cQval{font-size:24px !important;min-width:80px !important;}
#accMilk .acc-body #cQminus,#accMilk .acc-body #cQplus{width:48px !important;height:48px !important;font-size:26px !important;}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.stat{background:white;border-radius:10px;padding:6px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.08);}
.stat-num{font-size:20px;font-weight:900;line-height:1;}
.stat-lbl{font-size:9px;color:#999;margin-top:1px;}

/* DELIVERY */
.di{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #eee;}
.di:last-child{border-bottom:none;}
.chk-btn{width:34px;height:34px;border-radius:50%;border:2.5px solid #ddd;background:white;font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chk-btn.done{background:#2A7A4B;border-color:#2A7A4B;color:white;}
.di-info{flex:1;}
.di-name{font-weight:bold;font-size:14px;}
.di-addr{font-size:11px;color:#999;}
.di-status{font-size:10px;font-weight:bold;}
.status-ok{color:#2A7A4B;}
.status-pe{color:#E8621A;}
.qty-sel{padding:6px 8px;border:2px solid #1A5FA0;border-radius:8px;font-size:13px;font-weight:bold;color:#1A5FA0;background:#E8F2FF;}

/* FORMS */
.fg{margin-bottom:12px;}
.fg label{display:block;font-size:11px;font-weight:bold;color:#999;margin-bottom:4px;text-transform:uppercase;}
.fg input,.fg select,.fg textarea{width:100%;padding:10px;border:2px solid #ddd;border-radius:8px;font-size:14px;box-sizing:border-box;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:#1A5FA0;outline:none;}
.tcol{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.btn{display:block;width:100%;padding:12px;border:none;border-radius:8px;font-size:15px;font-weight:bold;cursor:pointer;margin-bottom:8px;}
.btn-o{background:#E8621A;color:white;}
.btn-g{background:#2A7A4B;color:white;}
.btn-r{background:#C0392B;color:white;}
.btn-gray{background:#6B7280;color:white;}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:6px;border:none;cursor:pointer;font-weight:bold;}

/* ROUTE */
.rstop{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed #eee;}
/* v18.1: agent collapsible card = full width block (override rstop flex) */
.acc.rstop{display:block;padding:0;border-bottom:none;width:100%;margin-bottom:6px;box-shadow:none;}
.rstop:last-child{border-bottom:none;}
.rnum{width:28px;height:28px;background:#E8621A;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:13px;flex-shrink:0;}
.rinfo{flex:1;}
.rname{font-weight:bold;font-size:14px;}
.raddr{font-size:11px;color:#999;margin-top:2px;}

/* BILL TABLE */
table{width:100%;border-collapse:collapse;font-size:12px;}
th{background:#1A5FA0;color:white;padding:8px;text-align:left;}
td{padding:8px;border-bottom:1px solid #eee;}
tr:nth-child(even) td{background:#f9f9f9;}
.trow td{font-weight:bold;background:#E8F2FF!important;color:#1A5FA0;}

/* MODAL */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;align-items:center;justify-content:center;padding:15px;}
.mo.open{display:flex;}
.md{background:white;border-radius:16px;padding:20px;width:100%;max-width:360px;max-height:90vh;overflow-y:auto;}
.md h2{font-size:18px;color:#1A5FA0;margin:0 0 5px;}
.md .sub{font-size:12px;color:#999;margin:0 0 15px;}

/* PIN */
.pdots{display:flex;justify-content:center;gap:12px;margin-bottom:20px;}
.pdot{width:16px;height:16px;border-radius:50%;border:2.5px solid #1A5FA0;background:transparent;}
.pdot.filled{background:#1A5FA0;}
.ppad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:250px;margin:0 auto;}
.pkey{padding:16px;border:2px solid #ddd;border-radius:12px;background:white;font-size:22px;font-weight:bold;cursor:pointer;text-align:center;}
.pkey:active{background:#1A5FA0;color:white;}
.pkey.del{background:#FFF0E8;border-color:#F5C090;color:#E8621A;}
.perr{color:#C0392B;font-size:12px;text-align:center;margin-top:10px;font-weight:bold;min-height:18px;}
.pcancel{width:100%;margin-top:10px;background:none;border:2px solid #ddd;color:#999;border-radius:8px;padding:10px;font-size:14px;cursor:pointer;}

/* NOTIF */
.notif{background:#FDECEA;border:2px solid #F5A0A0;border-radius:10px;padding:12px;margin-bottom:10px;}
.notif h3{color:#C0392B;font-size:13px;margin:0 0 8px;}

/* CUSTOMER */
.chero{background:linear-gradient(135deg,#1A5FA0,#134880);color:white;border-radius:12px;padding:16px;margin-bottom:12px;}
.chero h2{font-size:20px;margin:0 0 5px;}
.chero p{font-size:12px;opacity:0.8;margin:0;}
.call-btn{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;border:none;
  font-size:14px;font-weight:bold;cursor:pointer;width:100%;margin-bottom:8px;background:#FFF0E8;color:#E8621A;}

/* MSEL */
.msel{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;}
.msel button{background:none;border:2px solid #1A5FA0;color:#1A5FA0;border-radius:7px;padding:4px 14px;font-weight:bold;cursor:pointer;font-size:16px;}
.msel span{font-size:14px;font-weight:bold;color:#1A5FA0;min-width:130px;text-align:center;}

.nb{border-radius:10px;padding:8px 10px;font-size:12px;margin-bottom:10px;}
.nb-o{background:#FFF0E8;border:1px solid #F5C090;color:#7C3A10;}
.nb-b{background:#E8F2FF;border:1px solid #B0D0F0;color:#1A3C6A;}
.nb-g{background:#E8F5EE;border:1px solid #A0D0B8;color:#1A4A30;}

.empty{text-align:center;padding:30px;color:#999;}
.chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:bold;margin-right:4px;}
.srow{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eee;}
.srow:last-child{border-bottom:none;}
.ocard{background:white;border-radius:10px;padding:12px;margin-bottom:8px;border:2px solid #eee;}

.deliv-alert{position:fixed;top:0;left:0;right:0;z-index:9999;padding:14px;
  background:#2A7A4B;color:white;text-align:center;font-weight:bold;font-size:14px;}

.ltog{display:flex;align-items:center;justify-content:space-between;padding:12px;
  background:#E8F5EE;border-radius:10px;margin-bottom:10px;border:1px solid #A0D0B8;}
.tsw{position:relative;width:48px;height:26px;}
.tsw input{opacity:0;width:0;height:0;}
.tsl{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:26px;transition:0.3s;}
.tsl:before{content:"";position:absolute;width:20px;height:20px;left:3px;bottom:3px;background:white;border-radius:50%;transition:0.3s;}
input:checked+.tsl{background:#2A7A4B;}
input:checked+.tsl:before{transform:translateX(22px);}
</style>
</head>
<body>

<!-- LOGIN -->
<div id="sl" class="screen active">
  <div class="logo" id="appLogo"></div>
  <div class="appname">Chaitanya Dairy</div>
  <div class="appsub">VBR DAIRY & MILK OUTLETS</div>

  <div class="login-middle">
    <div class="login-fresh-text">
      <p class="fresh-line1">Fresh Cow Milk &amp; Buffalo Milk</p>
      <p class="fresh-line2">Pure Fresh Cow &amp; Buffalo Ghee</p>
      <p class="fresh-line2">Paneer &nbsp;•&nbsp; Curd</p>
      <p class="fresh-line3">No Preservatives &nbsp;•&nbsp; No Chemicals</p>
    </div>
    <div class="login-tagline">🌿 Fresh from Farm, Daily to Door</div>
    <div class="login-sub">PURE • NATURAL • TRUSTED</div>

    <!-- Single phone number login box -->
    <div class="phone-login-box">
      <div style="font-size:13px;font-weight:bold;color:#333;margin-bottom:8px;">📱 Enter your mobile number</div>
      <div class="phone-input-row">
        <span class="phone-prefix">+91</span>
        <input type="tel" id="loginPhone" maxlength="10" placeholder="10-digit number" inputmode="numeric" autocomplete="tel"/>
      </div>
      <div id="loginErr" style="color:#E8621A;font-size:12px;margin-top:6px;min-height:16px;text-align:center;"></div>
      <button class="btn btn-g" id="loginSubmitBtn" style="margin-top:10px;width:100%;padding:14px;font-size:15px;">Continue →</button>
    </div>
    <div style="text-align:center;margin-top:16px;">
      <a href="#" id="pinFallbackLink" style="font-size:12px;color:#999;text-decoration:underline;">👤 Admin / Agent? Login with PIN instead</a>
    </div>
    <div id="pinFallbackChoice" style="display:none;text-align:center;margin-top:10px;gap:8px;">
      <button class="btn-sm btn-g" id="fallbackAdminBtn" style="margin-right:8px;">👤 Admin</button>
      <button class="btn-sm" style="background:#E8F2FF;color:#1A5FA0;" id="fallbackAgentBtn">🚴 Agent</button>
    </div>
  </div>
</div>

<!-- MAIN APP -->
<div id="sm" class="screen">
  <div class="hdr">
    <div style="display:flex;align-items:center;">
      <button class="agent-hamb-btn" id="agentMenuBtn" title="Menu" style="display:none;margin-right:10px;">☰</button>
      <div>
        <div class="hdr-title">🥛 Chaitanya Dairy</div>
        <div class="hdr-sub">VBR Dairy & Milk Outlets • <span id="sessTimer"></span></div>
      </div>
    </div>
    <div style="display:flex;align-items:center;gap:8px;">
      <span id="mBadge" style="font-size:12px;font-weight:bold;color:#FFF3CD;"></span>
      <button class="admin-dots-btn" id="adminMenuBtn" title="Menu" style="display:none;">⋮</button>
      <button id="syncNowBtn" onclick="this.textContent='⏳';syncAll();setTimeout(()=>{this.textContent='🔄';},2000);" style="background:rgba(255,255,255,0.2);border:none;border-radius:8px;color:white;font-size:16px;padding:4px 8px;cursor:pointer;" title="Sync Now">🔄</button>
      <button class="exit-btn" id="exitBtn">Exit</button>
    </div>
  </div>
  <div class="tabs" id="mainTabs"></div>
  <div id="routeTabs" style="display:none;overflow-x:auto;white-space:nowrap;padding:8px 12px 0;background:#f8f9fa;border-bottom:1px solid #eee;"></div>

  <!-- TODAY -->
  <div id="pg-today" class="page">
    <button class="admin-menu-back-btn" id="adminMenuBack">← Back to Today</button>
    <div class="msel" style="position:relative;">
      <button id="dayPrev">‹</button>
      <span id="todayLbl" style="cursor:pointer;text-decoration:underline;">Today</span>
      <button id="dayNext">›</button>
      <input type="date" id="dashDate" style="position:absolute;left:50%;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;">
    </div>
    <div id="dashLiveTrack"></div><!-- v19: admin live location + call agent -->
    <div id="qtyChangesCard"></div>
    <div id="notifBar"></div>
    <div class="card" id="markDelivCard">
      <div class="nb nb-o" id="dayNote"></div>
      <input type="text" id="dashSearch" placeholder="🔍 Search by name..." style="width:100%;padding:8px 12px;margin-bottom:10px;border:2px solid #1A5FA0;border-radius:8px;font-size:13px;box-sizing:border-box;">
      <div id="delivList"></div>
    </div>

    <div id="tomorrowOrders" style="margin-top:12px;"></div>
    
    <!-- Admin Advance Order Management (2.11.1h, 2.11.1i) -->
    <div id="adminAdvOrders" style="display:none;margin-top:12px;"></div>

    <!-- v23.3: TWO TABLES ONLY — Stats (this route, with handover typing) + Summary (all routes, auto/read-only). Old duplicate circles + second Handover removed. -->
    <div id="dashStats" style="margin-bottom:8px;">
      <div style="font-size:12px;font-weight:bold;color:#666;margin-bottom:8px;" id="dashCustCount"></div>
      <div id="handoverEditWrap" style="display:none;margin-bottom:10px;background:#FFF6EE;border:1px dashed #E8B07A;border-radius:10px;padding:10px;">
        <div style="font-size:11px;font-weight:bold;color:#8A5A2E;margin-bottom:6px;">📥 Handover — quantities you loaded for this route (optional)</div>
        <div id="handoverBoxesArea" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;"></div>
        <div style="display:flex;gap:8px;">
          <button class="btn btn-o" id="saveDashHandoverBtn" style="flex:1;padding:10px;font-size:13px;font-weight:bold;">💾 Save</button>
          <button class="btn" id="clearDashHandoverBtn" style="flex:1;padding:10px;font-size:13px;font-weight:bold;background:#F6EBEB;color:#C0392B;border:1px solid #E0A8A8;">✖️ Clear</button>
        </div>
      </div>
      <div id="statsTableBody"></div>
    </div>

    <!-- v23.3: Summary — All Routes (auto-totalled across all agents, read-only) -->
    <div id="consolidatedSummary" style="display:none;margin-top:8px;">
      <div style="font-size:12px;color:#666;margin-bottom:8px;" id="consCustCount"></div>
      <div id="summaryTableBody"></div>
    </div>
  </div>

  <!-- ROUTE -->
  <div id="pg-route" class="page">
    <button class="agent-menu-back-btn" id="agentMenuBack">← Back to Route</button>
    <div id="routeDate" style="text-align:center;font-size:13px;font-weight:bold;color:#1A5FA0;margin-bottom:10px;"></div>
    <div class="nb nb-b">📱 Show to delivery agent. Tap 📍 for Maps.</div>
    <div id="boyLocWrap"></div>
    <div id="routeNotifBar"></div>
    <div class="card"><div class="card-title">🗺️ Delivery Route</div><button class="btn" id="quickAddCustBtn" style="display:none;width:100%;background:#1F7244;color:white;margin-bottom:8px;">➕ Quick Add Customer to This Route</button><div id="qtyChangesCardRt"></div><input type="text" id="routeSearch" placeholder="🔍 Search by name..." style="width:100%;padding:8px 12px;margin-bottom:10px;border:2px solid #1A5FA0;border-radius:8px;font-size:13px;box-sizing:border-box;"><div id="routeList"></div></div>
    <div id="routeSumCard" class="card" style="display:none">
      <div class="card-title">📦 Summary</div>
      <div id="routeSum"></div>
      <div id="handoverWrap" style="display:none;margin-top:10px;">
        <div class="fg" style="margin-bottom:0;">
          <label style="font-size:12px;font-weight:bold;">📥 Handover Quantity (Litres given to agent)</label>
          <div style="display:flex;gap:8px;">
            <input type="number" id="handoverQty" placeholder="Enter litres" step="0.5" min="0" style="flex:1;padding:8px;border:2px solid #E8621A;border-radius:8px;font-size:14px;font-weight:bold;">
            <button class="btn btn-o" id="saveHandoverBtn" style="white-space:nowrap;">💾 Save</button>
          </div>
        </div>
      </div>
    </div>
    <div id="routeStats" style="margin-bottom:8px;display:none;">
      <div style="font-size:12px;font-weight:bold;color:#666;margin-bottom:6px;" id="routeCustCount"></div>
      <!-- v18.4: Milk Handover collapsible strip -->
      <div class="acc" id="accMilkHandover">
        <div class="acc-head" style="background:#E8621A;"><span id="milkHandoverLbl">🥛 Milk Handover</span><span class="acc-arrow">▼</span></div>
        <div class="acc-body" style="background:#FFF6EE;">
          <div id="handoverWrap2" style="margin-bottom:10px;">
            <div class="fg" style="margin-bottom:0;">
              <label style="font-size:13px;font-weight:bold;">📥 Handover Quantity (Litres given to agent)</label>
              <div style="display:flex;gap:8px;margin-top:4px;">
                <input type="number" id="handoverQty2" placeholder="Enter litres" step="0.5" min="0" style="flex:1;padding:8px;border:2px solid #E8621A;border-radius:8px;font-size:14px;font-weight:bold;">
                <button class="btn btn-o" id="saveHandoverBtn2" style="white-space:nowrap;">💾 Save</button>
              </div>
            </div>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
            <div class="stat" style="background:#FFF3E0;border-radius:12px;padding:10px;">
              <div class="stat-num" id="rTH" style="color:#E8621A;">—</div>
              <div class="stat-lbl">Handover</div>
              <div id="rTHBreak" style="font-size:10px;color:#888;margin-top:3px;"></div>
            </div>
            <div class="stat" style="background:#FFF8E7;border-radius:12px;padding:10px;">
              <div class="stat-num" id="rTL" style="color:#E8621A;">0L</div>
              <div class="stat-lbl">To Deliver</div>
              <div id="rTLBreak" style="font-size:10px;color:#888;margin-top:3px;"></div>
            </div>
            <div class="stat" style="background:#E8F5EE;border-radius:12px;padding:10px;">
              <div class="stat-num" id="rTD" style="color:#2A7A4B;">0L</div>
              <div class="stat-lbl">Delivered</div>
              <div id="rTDBreak" style="font-size:10px;color:#888;margin-top:3px;"></div>
            </div>
            <div class="stat" style="background:#FDECEA;border-radius:12px;padding:10px;">
              <div class="stat-num" id="rTU" style="color:#C0392B;">—</div>
              <div class="stat-lbl">Undelivered</div>
              <div id="rTUBreak" style="font-size:10px;color:#888;margin-top:3px;"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- v18.4: Extra Orders Handover collapsible strip (placeholder — logic added later with admin window) -->
      <div class="acc" id="accExtraHandover">
        <div class="acc-head" style="background:#9B6FC7;"><span>📦 Handover Tables</span><span class="acc-arrow">▼</span></div>
        <div class="acc-body" style="background:#F2EAFA;">
          <div id="extraHandoverBody"><div style="text-align:center;color:#888;font-size:13px;padding:10px 0;">No extra orders today.</div></div>
        </div>
      </div>
    </div>
    
    <div id="callMgrSec" style="display:none">
      <div class="card"><div class="card-title">📞 Contact</div>
        <button class="call-btn" id="callMgrBtn">📞 <span><strong>Call Manager</strong><br><span id="agentMgrNo" style="font-size:11px;"></span></span></button>
      </div>
    </div>
  </div>

  <!-- TRACKING -->
  <div id="pg-track" class="page">
    <div class="card-title">📍 Live Tracking</div>
    <div id="trackContent"></div>
  </div>

  <!-- BILL -->
  <div id="pg-bill" class="page">
    <div class="msel"><button id="billPrev">‹</button><span id="mLbl"></span><button id="billNext">›</button></div>
    <button class="btn" id="billExportBtn" style="width:100%;background:#1F7244;color:white;margin-bottom:10px;display:none;">📄 Export This Month (Excel/CSV)</button>
    <div class="stats">
      <div class="stat"><div class="stat-num" id="bD" style="color:#1A5FA0;">0</div><div class="stat-lbl">Days</div></div>
      <div class="stat"><div class="stat-num" id="bL" style="color:#E8621A;">0L</div><div class="stat-lbl">Litres</div></div>
      <div class="stat"><div class="stat-num" id="bT" style="color:#6B3FA0;">₹0</div><div class="stat-lbl">Total</div></div>
    </div>
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
        <div class="card-title" style="margin-bottom:0;">💰 Monthly Bill</div>
        <input type="text" id="billSearch" placeholder="🔍 Search..." style="width:35%;padding:6px 10px;border:2px solid #1A5FA0;border-radius:8px;font-size:12px;box-sizing:border-box;">
      </div>
      <select id="billRouteFilter" style="width:100%;padding:8px 12px;margin-bottom:12px;border:2px solid #1A5FA0;border-radius:8px;font-size:13px;"><option value="">— All Customers —</option></select>
      <div id="billConsolidated" style="margin-bottom:12px;"></div>
      <div id="billTbl"></div>
    </div>
  </div>

  <!-- CUSTOMERS -->
  <div id="pg-customers" class="page">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
      <div class="card-title" id="custTitle" style="margin-bottom:0;">👥 Customers</div>
      <select id="custRouteFilter" style="border:2px solid #1A5FA0;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:bold;color:#1A5FA0;" onchange="renderCusts()">
        <option value="">All Customers</option>
      </select>
    </div>
    <input type="text" id="custSearch" placeholder="🔍 Search by name..." oninput="renderCusts()" style="width:100%;padding:8px 12px;margin-bottom:10px;border:2px solid #1A5FA0;border-radius:8px;font-size:13px;box-sizing:border-box;">
    <div id="custList"></div>
  </div>

  <!-- ADD/SETTINGS -->
  <div id="pg-add" class="page">
    <div class="card">
      <div class="card-title">➕ Add New Customer</div>
      <button class="btn" id="pickContactBtn" style="background:#E8F2FF;color:#1A5FA0;width:100%;justify-content:center;margin-bottom:10px;">📱 Pick from Contacts</button>
      <div class="fg"><label>Name ★</label><input type="text" id="cN" placeholder="Customer name" autocapitalize="words" style="text-transform:capitalize;"></div>
      <div class="fg"><label>Mobile</label><input type="tel" id="cMo" placeholder="Enter 10-digit mobile number" maxlength="10"></div>
      <div class="fg"><label>Address</label><textarea id="cA" rows="2" placeholder="Address (optional)"></textarea></div>
      <div class="fg"><label>Landmark</label><input type="text" id="cLM" placeholder="Near temple, school, etc. (optional)"></div>
      <div class="fg"><label>Google Maps Link</label><input type="url" id="cML" placeholder="https://maps.google.com/... (optional)"></div>
      <div class="fg"><label>Delivery Time</label><input type="time" id="cT"></div>
      <div class="tcol">
        <div class="fg"><label>Default Litres ★</label>
          <input type="hidden" id="cL" value="1">
          <div style="display:flex;align-items:center;justify-content:center;gap:14px;padding:2px 0;">
            <button type="button" onclick="custLitStep('cL',-0.25)" style="width:36px;height:36px;border-radius:50%;border:2px solid #1A5FA0;background:white;color:#1A5FA0;font-size:18px;font-weight:bold;">−</button>
            <span id="cL_val" style="font-size:15px;font-weight:800;color:#1A5FA0;min-width:60px;text-align:center;">1L</span>
            <button type="button" onclick="custLitStep('cL',0.25)" style="width:36px;height:36px;border-radius:50%;border:2px solid #1A5FA0;background:white;color:#1A5FA0;font-size:18px;font-weight:bold;">+</button>
          </div>
        </div>
        <div class="fg"><label>₹/Litre</label><input type="number" id="cP" placeholder="Price (optional)" min="1"></div>
      </div>
      <div class="tcol">
        <div class="fg"><label>Milk Type ★</label>
          <select id="cMT"><option value="cow">🐄 Cow</option><option value="buffalo">🐃 Buffalo</option></select>
        </div>
        <div class="fg"><label>Stop No.</label><input type="number" id="cO" placeholder="optional"></div>
      </div>
      <div class="fg"><label>Assign to Route ★</label>
        <select id="cRoute"><option value="">— Select Route —</option></select>
      </div>
      <div style="display:flex;gap:8px;margin-top:4px;">
        <button class="btn btn-o" id="addCustBtn" style="flex:1;">➕ Add Customer</button>
        <button class="btn" id="clearCustBtn" style="flex:1;background:#e53935;color:white;justify-content:center;">❌ Clear</button>
      </div>
    </div>
    <div class="card" id="setCard" style="display:none">
      <div class="card-title">⚙️ Settings</div>
      <div class="srow"><div><div style="font-weight:bold;font-size:13px;">Manager Number</div><div id="sOP" style="font-size:11px;color:#999;"></div></div><button class="btn-sm btn-g" id="editMgrBtn">Edit</button></div>
      <div class="srow"><div><div style="font-weight:bold;font-size:13px;">🔑 Secret Answer</div><div style="font-size:11px;color:#999;">Used for Reset PIN</div></div><button class="btn-sm btn-g" id="changeSecretBtn">Change</button></div>
    </div>
    <div class="card" id="agentsCard" style="display:none">
      <div class="card-title">🚴 Delivery Agents</div>
      <div id="agentsList"></div>
    </div>
    <div class="card" id="pinsCard" style="display:none">
      <div class="card-title">🔐 Admin PINs</div>
      <div id="pinsList"></div>
    </div>
    <div class="card" id="prodPricesCard" style="display:none">
      <div class="card-title">💰 Product Prices</div>
      <div id="prodPricesList"></div>
    </div>
    <div class="card" id="prodsCard" style="display:none">
      <div class="card-title">🛒 Products</div>
      <div class="nb nb-b" style="font-size:12px;">Activate Ghee, Paneer, Curd when you start selling. Prices set above.</div>
      <div id="prodsList"></div>
    </div>
    <div class="card" id="custVisCard" style="display:none">
      <div class="card-title">👁️ Customer Section Visibility</div>
      <div class="nb nb-b" style="font-size:12px;">Turn a section OFF to hide it from ALL customers' screens. Turn back ON anytime. (Customers never see these switches.)</div>
      <div id="custVisList"></div>
    </div>
    <div class="card" id="agentVisCard" style="display:none">
      <div class="card-title">🚴 Delivery Boy — Handover Visibility</div>
      <div class="nb nb-b" style="font-size:12px;">The boy sees the new 📦 Handover Tables for HIS route by default (so he knows what he's responsible for). The old 🥛 Milk Handover (your entry screen) is hidden from him by default. Tap to change either.</div>
      <div id="agentVisList"></div>
    </div>
  </div>
</div>

<!-- CUSTOMER SCREEN -->
<div id="sc" class="screen">
  <div class="hdr">
    <div style="display:flex;align-items:center;"><button class="hamb-btn" id="custMenuBtn" title="Menu">☰</button><div><div class="hdr-title">🥛 Chaitanya Dairy</div><div class="hdr-sub">Your Milk Account</div></div></div>
    <button class="exit-btn" id="custExitBtn">Exit</button>
  </div>
  <div style="padding:12px;max-width:600px;margin:0 auto;padding-bottom:30px;">
    <button class="menu-back-btn" id="custMenuBack">← Back to Home</button>
    <div class="chero" style="position:relative;"><h2 id="cHN">Welcome</h2><p id="cHS"></p><button id="custRefreshBtn" onclick="this.textContent='⏳';syncAll();setTimeout(()=>{this.textContent='🔄';},2000);" style="position:absolute;top:14px;right:14px;background:rgba(255,255,255,0.2);border:none;border-radius:8px;color:white;font-size:18px;padding:6px 10px;cursor:pointer;" title="Refresh">🔄</button></div>
    <div class="card"><div class="card-title">📅 Today's Delivery</div><div id="cTodayInfo"></div></div>
    <div id="cTrackCard" style="display:none">
      <div class="card" style="background:linear-gradient(135deg,#E9F2FC,#D6E8F8);color:#1A5FA0;border:1px solid #C5DCF0;">
        <div style="font-size:14px;font-weight:bold;margin-bottom:5px;">🚴 Delivery Status</div>
        <div id="cTrackStat" style="font-size:12px;opacity:0.85;">Checking...</div>
        <div style="font-size:10px;opacity:0.7;margin-top:4px;">Exact location not shared for privacy</div>
      </div>
    </div>
    <div class="card">
      <div class="card-title">📞 Contact</div>
      <button class="call-btn" id="custCallBtn">📞 <span><strong>Call Manager</strong><br><span id="oCallNo" style="font-size:11px;"></span></span></button>
    </div>

    <!-- v17.3: ACCORDION collapsible sections (order: Order More, Milk Settings, Monthly Details, Your Bill, Vacation Hold, My Address) -->

    <!-- Order More -->
    <div class="acc" id="accOrder">
      <div class="acc-head" style="background:#3DA968;" data-acc="accOrder"><span>🛒 Order More</span><span class="acc-arrow">▼</span></div>
      <div class="acc-body">
        <div id="cQtyCard">
          <div class="fg" style="margin-bottom:8px;">
            <label style="font-size:11px;color:#666;">SELECT DATE</label>
            <select id="cAdvDate" style="border:2px solid #1A5FA0;border-radius:10px;padding:10px;font-size:14px;font-weight:bold;"></select>
          </div>
          <div id="cMilkTabs" style="margin-bottom:10px;"></div>
          <div id="cExtraOrders" style="margin-bottom:10px;"></div>
          <div style="display:flex;gap:8px;margin-top:4px;">
            <button class="btn btn-o" id="custChangeQtyBtn" style="flex:1;opacity:0.4;" disabled>🛒 Place Order</button>
            <button class="btn" id="custCancelQtyBtn" style="flex:1;background:#e53935;color:white;justify-content:center;">❌ Cancel</button>
          </div>
          <div id="cUpcomingOrders" style="margin-top:12px;"></div>
        </div>
      </div>
    </div>

    <!-- Milk Settings -->
    <div class="acc" id="accMilk">
      <div class="acc-head" style="background:#4A90D9;" data-acc="accMilk"><span>🥛 Milk Settings</span><span class="acc-arrow">▼</span></div>
      <div class="acc-body"><div id="cQtyStepper"></div></div>
    </div>

    <!-- Monthly Details -->
    <div class="acc" id="accMonthly">
      <div class="acc-head" style="background:#9B6FC7;" data-acc="accMonthly"><span>📊 Monthly Details</span><span class="acc-arrow">▼</span></div>
      <div class="acc-body">
        <div class="msel"><button id="custBillPrev">‹</button><span id="cML2"></span><button id="custBillNext">›</button></div>
        <div id="cMSum"></div>
        <div id="cDList" style="margin-top:9px;"></div>
      </div>
    </div>

    <!-- Your Bill -->
    <div class="acc" id="accBill">
      <div class="acc-head" style="background:#E0A82E;" data-acc="accBill"><span>💰 My Bill</span><span class="acc-arrow">▼</span></div>
      <div class="acc-body"><div id="cPaySec"></div></div>
    </div>

    <!-- Vacation Hold -->
    <div class="acc" id="accHold">
      <div class="acc-head" style="background:#3DA8B5;" data-acc="accHold"><span>🏖️ Vacation Hold</span><span class="acc-arrow">▼</span></div>
      <div class="acc-body"><div id="cHoldBox"></div></div>
    </div>

    <!-- My Address -->
    <div class="acc" id="accAddr">
      <div class="acc-head" style="background:#D9695C;" data-acc="accAddr"><span>📍 My Address</span><span class="acc-arrow">▼</span></div>
      <div class="acc-body">
        <div class="fg"><label>Address</label><input type="text" id="cMyAddr" style="width:100%;padding:8px;border:2px solid #1A5FA0;border-radius:8px;font-size:13px;box-sizing:border-box;"></div>
        <div class="fg"><label>Google Maps Link (optional)</label><input type="text" id="cMyMaps" placeholder="Paste maps link here" style="width:100%;padding:8px;border:2px solid #1A5FA0;border-radius:8px;font-size:13px;box-sizing:border-box;"></div>
        <button class="btn" id="cUseMyLocBtn" style="width:100%;background:#D6ECFF;color:#0B3D91;border:1px solid #0B3D91;margin-bottom:6px;justify-content:center;">📍 Use My Current Location</button>
        <button class="btn" id="cClearLocBtn" style="width:100%;background:#FDECEA;color:#C0392B;border:1px solid #C0392B;margin-bottom:8px;justify-content:center;">❌ Clear Location</button>
        <div id="cLocStatus" style="font-size:11px;color:#666;text-align:center;margin-bottom:6px;"></div>
        <div class="fg"><label>Landmark (optional)</label><input type="text" id="cMyLM" placeholder="Near temple, school, etc." style="width:100%;padding:8px;border:2px solid #1A5FA0;border-radius:8px;font-size:13px;box-sizing:border-box;"></div>
        <button class="btn" id="cAddrSaveBtn" style="width:100%;background:#1A5FA0;color:white;">💾 Save Address</button>
        <button class="btn" id="cAddrUndoBtn" style="width:100%;background:#FFF4E5;color:#E8621A;margin-top:6px;display:none;">↩️ Undo Last Change</button>
      </div>
    </div>

  </div>
</div>

<!-- v24.7: Customer hamburger drawer + overlay -->
<div class="hamb-overlay" id="hambOverlay"></div>
<div class="hamb-drawer" id="hambDrawer">
  <div class="hd-top">☰ Menu<div class="hd-sub" id="hambName"></div></div>
  <div class="hamb-item" data-target="accMilk"><span class="hi-ico">🥛</span> Milk Settings</div>
  <div class="hamb-item" data-target="accMonthly"><span class="hi-ico">📊</span> Monthly Details</div>
  <div class="hamb-item" data-target="accBill"><span class="hi-ico">💰</span> My Bill</div>
  <div class="hamb-item" data-target="accHold"><span class="hi-ico">🏖️</span> Vacation Hold</div>
  <div class="hamb-item" data-target="accAddr"><span class="hi-ico">📍</span> My Address</div>
</div>

<!-- v24.9: Agent hamburger drawer + overlay -->
<div class="agent-hamb-overlay" id="agentHambOverlay"></div>
<div class="agent-hamb-drawer" id="agentHambDrawer">
  <div class="ahd-top">☰ Menu<div style="font-size:11px;font-weight:normal;opacity:0.85;margin-top:2px;" id="agentHambName"></div></div>
  <div class="agent-hamb-item" data-atarget="agentNotif"><span class="ahi-ico">🔔</span> Notifications</div>
  <div class="agent-hamb-item" data-atarget="agentStats"><span class="ahi-ico">📊</span> Stats</div>
  <div class="agent-hamb-item" data-atarget="agentTomorrow"><span class="ahi-ico">📋</span> Tomorrow's Orders</div>
  <div class="agent-hamb-item" data-atarget="agentContact"><span class="ahi-ico">📞</span> Contact Manager</div>
</div>
<!-- v25: ADMIN ⋮ MENU — per-route collapsible (Phase 1) -->
<div class="admin-dots-overlay" id="adminDotsOverlay"></div>
<div class="admin-dots-drawer" id="adminDotsDrawer">
  <div class="add-top">⋮ Menu</div>
  <div id="adminDotsRoutes"></div>
</div>

<!-- Secret Answer Modal -->
<div class="mo" id="otpMo">
  <div class="md">
    <h2>🔐 Verify Identity</h2>
    <p class="sub">Enter the secret answer to reset PIN</p>
    <div class="fg">
      <label>Secret Answer</label>
      <input type="password" id="otpEmail" placeholder="Enter secret answer" style="width:100%;" autocomplete="off">
    </div>
    <div class="perr" id="otpErr"></div>
    <button class="btn btn-g" id="otpSendBtn" style="margin-top:8px;">✅ Verify & Reset PIN</button>
    <button class="pcancel" id="otpCancelBtn">Cancel</button>
  </div>
</div>

<!-- MODALS -->
<div class="mo" id="pinMo">
  <div class="md" style="text-align:center;">
    <h2 id="pinTitle">🔑 Login</h2>
    <p class="sub" id="pinSub">Enter your 6-digit PIN</p>
    <div class="nb nb-o" id="lockMsg" style="display:none;"></div>
    <div class="pdots" id="pinDots"></div>
    <div class="ppad">
      <button class="pkey" id="pk1">1</button><button class="pkey" id="pk2">2</button><button class="pkey" id="pk3">3</button>
      <button class="pkey" id="pk4">4</button><button class="pkey" id="pk5">5</button><button class="pkey" id="pk6">6</button>
      <button class="pkey" id="pk7">7</button><button class="pkey" id="pk8">8</button><button class="pkey" id="pk9">9</button>
      <button class="pkey" id="pk0" style="grid-column:2;">0</button>
      <button class="pkey del" id="pkd">⌫</button>
    </div>
    <div class="perr" id="pinErr"></div>
    <button class="pcancel" id="pinCancelBtn">Cancel</button>
    <button class="pcancel" id="pinResetBtn" style="margin-top:6px;color:#C0392B;border-color:#C0392B;font-size:11px;">🔄 Reset PIN (if forgotten)</button>
  </div>
</div>

<div class="mo" id="setupMo">
  <div class="md" style="text-align:center;">
    <h2 id="setupTitle">🔐 Set PIN</h2>
    <p class="sub" id="setupSub">Choose a 6-digit PIN</p>
    <div class="pdots" id="setupDots"></div>
    <div class="ppad">
      <button class="pkey" id="sk1">1</button><button class="pkey" id="sk2">2</button><button class="pkey" id="sk3">3</button>
      <button class="pkey" id="sk4">4</button><button class="pkey" id="sk5">5</button><button class="pkey" id="sk6">6</button>
      <button class="pkey" id="sk7">7</button><button class="pkey" id="sk8">8</button><button class="pkey" id="sk9">9</button>
      <button class="pkey" id="sk0" style="grid-column:2;">0</button>
      <button class="pkey del" id="skd">⌫</button>
    </div>
    <div class="perr" id="setupErr"></div>
    <button class="pcancel" id="setupCancelBtn">Cancel</button>
  </div>
</div>

<div class="mo" id="cLoginMo">
  <div class="md">
    <h2>🏠 Customer Login</h2>
    <p class="sub">Enter your registered mobile number</p>
    <div class="fg"><label>Mobile Number</label><input type="tel" id="cLMob" placeholder="Enter 10-digit mobile number" maxlength="10"></div>
    <div class="perr" id="cLErr"></div>
    <button class="btn btn-o" id="custLoginBtn" style="margin-top:8px;">Login →</button>
    <button class="pcancel" id="custLoginCancelBtn">Cancel</button>
  </div>
</div>

<div class="mo" id="editMo">
  <div class="md">
    <h2>✏️ Edit Customer</h2>
    <input type="hidden" id="eId">
    <div class="fg"><label>Name</label><input type="text" id="eN" autocapitalize="words" style="text-transform:capitalize;"></div>
    <div class="fg"><label>Mobile</label><input type="tel" id="eMo" maxlength="10"></div>
    <div class="fg"><label>Address</label><textarea id="eA" rows="2"></textarea>
    <button type="button" class="btn" id="eAddrUndoBtn" style="width:100%;background:#FFF4E5;color:#E8621A;margin-top:4px;display:none;font-size:12px;padding:6px;">↩️ Undo Last Address Change</button></div>
    <div class="fg"><label>Landmark</label><input type="text" id="eLM" placeholder="Near temple, school, etc."></div>
    <div class="fg"><label>Maps Link</label><input type="url" id="eML"></div>
    <div class="fg"><label>Delivery Time</label><input type="time" id="eTm"></div>
    <div class="tcol">
      <div class="fg"><label>Default Litres</label>
        <input type="hidden" id="eLit" value="1">
        <div style="display:flex;align-items:center;justify-content:center;gap:14px;padding:2px 0;">
          <button type="button" onclick="custLitStep('eLit',-0.25)" style="width:36px;height:36px;border-radius:50%;border:2px solid #1A5FA0;background:white;color:#1A5FA0;font-size:18px;font-weight:bold;">−</button>
          <span id="eLit_val" style="font-size:15px;font-weight:800;color:#1A5FA0;min-width:60px;text-align:center;">1L</span>
          <button type="button" onclick="custLitStep('eLit',0.25)" style="width:36px;height:36px;border-radius:50%;border:2px solid #1A5FA0;background:white;color:#1A5FA0;font-size:18px;font-weight:bold;">+</button>
        </div>
      </div>
      <div class="fg"><label>₹/Litre</label><input type="number" id="eP" min="1"></div>
    </div>
    <div class="tcol">
      <div class="fg"><label>Milk Type</label><select id="eMT"><option value="cow">🐄 Cow</option><option value="buffalo">🐃 Buffalo</option></select></div>
      <div class="fg"><label>Stop No.</label><input type="number" id="eO"></div>
      <div class="fg" style="grid-column:1/-1;background:#FFF4E5;border-radius:8px;padding:8px;">
        <label style="color:#E8621A;">⏸️ Vacation Hold (both dates or empty)</label>
        <div style="display:flex;gap:6px;">
          <input type="date" id="eHoldFrom" style="flex:1;padding:6px;border:2px solid #E8621A;border-radius:8px;">
          <input type="date" id="eHoldTo" style="flex:1;padding:6px;border:2px solid #E8621A;border-radius:8px;">
        </div>
        <label style="margin-top:8px;display:flex;align-items:center;gap:6px;font-weight:bold;color:#666;"><input type="checkbox" id="eInactive" style="width:18px;height:18px;"> 💤 Inactive (not taking milk — hidden from agent &amp; bills)</label>
      </div>
    </div>
    <!-- v23.1: Temporary Qty section (admin sets periodQty on behalf of customer) -->
    <div class="fg" style="background:#F0E8FF;border-radius:8px;padding:8px;">
      <label style="color:#5B2D91;font-weight:bold;">📅 Temporary Qty (Some Days)</label>
      <div id="eTmpInfo" style="font-size:12px;color:#666;margin:4px 0 8px;"></div>
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
        <span style="font-size:12px;font-weight:700;color:#333;">Qty:</span>
        <input type="hidden" id="eTmpQty" value="1">
        <button type="button" onclick="custLitStep('eTmpQty',-0.25)" style="width:32px;height:32px;border-radius:50%;border:2px solid #5B2D91;background:white;color:#5B2D91;font-size:16px;font-weight:bold;line-height:1;">−</button>
        <span id="eTmpQty_val" style="font-size:14px;font-weight:800;color:#5B2D91;min-width:44px;text-align:center;">1L</span>
        <button type="button" onclick="custLitStep('eTmpQty',0.25)" style="width:32px;height:32px;border-radius:50%;border:2px solid #5B2D91;background:white;color:#5B2D91;font-size:16px;font-weight:bold;line-height:1;">+</button>
      </div>
      <div style="display:flex;gap:6px;margin-bottom:6px;">
        <div style="flex:1;"><label style="font-size:11px;color:#5B2D91;font-weight:700;">From</label><input type="date" id="eTmpFrom" style="width:100%;padding:6px;border:2px solid #5B2D91;border-radius:8px;box-sizing:border-box;"></div>
        <div style="flex:1;"><label style="font-size:11px;color:#5B2D91;font-weight:700;">To</label><input type="date" id="eTmpTo" style="width:100%;padding:6px;border:2px solid #5B2D91;border-radius:8px;box-sizing:border-box;"></div>
      </div>
      <div style="font-size:11px;color:#888;margin-bottom:6px;">Leave dates empty to keep existing / not change. Max 14 days.</div>
      <button type="button" id="eTmpClearBtn" onclick="adminClearTempQty()" style="width:100%;background:#FDECEA;color:#C0392B;border:none;border-radius:8px;padding:7px;font-size:12px;font-weight:700;display:none;">✕ Clear Temporary Change</button>
    </div>
    <!-- v23.2: Alternate Day setting (admin only) -->
    <div class="fg" style="background:#FFF9E6;border-radius:8px;padding:8px;">
      <label style="color:#E8621A;font-weight:bold;">🔄 Alternate Day Delivery</label>
      <div style="margin:6px 0;">
        <label style="display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#666;cursor:pointer;">
          <input type="checkbox" id="eAltDay" style="width:18px;height:18px;">
          Every 2nd day (admin only, permanent)
        </label>
      </div>
      <div id="eAltDayRow" style="display:none;margin-top:6px;">
        <label style="font-size:11px;color:#E8621A;font-weight:700;">First delivery day</label>
        <input type="date" id="eAltFrom" style="width:100%;padding:6px;border:2px solid #E8621A;border-radius:8px;box-sizing:border-box;margin-top:4px;">
        <div style="font-size:11px;color:#888;margin-top:4px;">From this date, delivery every 2nd day. Agent sees ⏭️ on off days.</div>
      </div>
    </div>
    <div class="fg"><label>Assign to Route</label>
      <select id="eRoute"><option value="">— No Route —</option></select>
    </div>
    <button class="btn btn-g" id="saveEditBtn">💾 Save</button>
    <button class="btn btn-r" id="delCustBtn" style="margin-top:4px;">🗑️ Delete</button>
    <button class="pcancel" id="editCancelBtn">Cancel</button>
  </div>
</div>

<div class="mo" id="paidMo">
  <div class="md">
    <h2>💰 Mark Payment</h2>
    <p class="sub" id="paidSub"></p>
    <button class="btn btn-g" id="markPaidBtn">✅ Mark Paid</button>
    <button class="btn btn-r" id="markUnpaidBtn" style="margin-top:4px;">❌ Mark Unpaid</button>
    <button class="pcancel" id="paidCancelBtn">Cancel</button>
  </div>
</div>

<script>
// ===== FIREBASE =====
const FB={apiKey:"AIzaSyD1pCn4TFbviyI_zSIARzsQscf2EZVv0jU",authDomain:"chaitanya-milk-outlets.firebaseapp.com",projectId:"chaitanya-milk-outlets",storageBucket:"chaitanya-milk-outlets.firebasestorage.app",messagingSenderId:"323612905055",appId:"1:323612905055:web:286f2deff348dbf61fd5ea"};
let db=null,fbOK=false,locInt=null,sessInt=null;

function initFB(){
  try{
    firebase.initializeApp(FB);db=firebase.firestore();fbOK=true;
    // v16.1: SAFETY NET - sync always starts after 1.5s NO MATTER WHAT happens with auth
    let synced=false;
    const safeSync=()=>{if(!synced){synced=true;syncAll();}};
    if(firebase.auth){
      firebase.auth().signInAnonymously()
        .then(()=>{setTimeout(safeSync,300);})
        .catch(e=>{console.log('auth:',e);setTimeout(safeSync,300);});
    }
    setTimeout(safeSync,1500); // guaranteed start even if auth hangs
    setTimeout(autoCleanup,3000);
  }
  catch(e){console.log('FB:',e);}
}
async function fSet(c,i,d){
  if(fbOK&&db)try{await db.collection(c).doc(i).set(d,{merge:true});}catch(e){}
  localStorage.setItem('f_'+c+'_'+i,JSON.stringify(d));
}
async function fGet(c,i){
  if(fbOK&&db)try{const r=await db.collection(c).doc(i).get();if(r.exists){localStorage.setItem('f_'+c+'_'+i,JSON.stringify(r.data()));return r.data();}}catch(e){}
  const l=localStorage.getItem('f_'+c+'_'+i);return l?JSON.parse(l):null;
}
function fListen(c,i,cb){if(fbOK&&db)db.collection(c).doc(i).onSnapshot(d=>{if(d.exists)cb(d.data());});}

async function syncAuthData(){
  try{
    // Sync owners
    const od=await fGet('auth','owners');
    if(od&&od.list){
      const fb=od.list,lo=DB.owners;
      const mg=lo.map(o=>{const f=fb.find(x=>x.id===o.id);return(f&&f.pinHash)?{...o,...f,phone:f.phone||o.phone||''}:o;});
      localStorage.setItem('cmo_owners',JSON.stringify(mg));
    }
    // Sync settings
    const sd=await fGet('auth','settings');
    if(sd){
      const ls=DB.settings;
      const mg={...ls,...sd};
      if(sd.agents&&ls.agents){
        mg.agents=sd.agents.map((fa,i)=>{
          const la=ls.agents[i]||{};
          return{...la,...fa,pinHash:fa.pinHash||la.pinHash||'',agentPhone:fa.agentPhone||la.agentPhone||'',active:fa.active||la.active||false};
        });
      }
      if(ls.boyPinHash&&!sd.boyPinHash)mg.boyPinHash=ls.boyPinHash;
      localStorage.setItem('cmo_settings',JSON.stringify(mg));
    }
    // Sync customers
    const cd=await fGet('data','customers');
    if(cd&&cd.list)localStorage.setItem('cmo_customers',JSON.stringify(cd.list));
  }catch(e){console.log('syncAuthData:',e);}
}

async function syncAll(){
  try{
    // Sync owners (PINs)
    const od=await fGet('auth','owners');
    if(od&&od.list){
      const fb=od.list,lo=DB.owners;
      const mg=lo.map(o=>{const f=fb.find(x=>x.id===o.id);return(f&&f.pinHash)?{...o,...f,phone:f.phone||o.phone||''}:o;});
      localStorage.setItem('cmo_owners',JSON.stringify(mg));
    }
    // Sync settings - properly merge agents array
    const sd=await fGet('auth','settings');
    if(sd){
      const ls=DB.settings;
      const mg={...ls,...sd};
      // Merge agents carefully - preserve local pinHash if Firebase doesn't have it
      if(sd.agents&&ls.agents){
        mg.agents=sd.agents.map((fa,i)=>{
          const la=ls.agents[i]||{};
          return{...la,...fa,pinHash:fa.pinHash||la.pinHash||'',agentPhone:fa.agentPhone||la.agentPhone||'',active:fa.active||la.active||false};
        });
      } else if(ls.agents){
        mg.agents=ls.agents;
      }
      if(ls.boyPinHash&&!sd.boyPinHash)mg.boyPinHash=ls.boyPinHash;
      localStorage.setItem('cmo_settings',JSON.stringify(mg));
    }
    // Sync customers
    const cd=await fGet('data','customers');if(cd&&cd.list)localStorage.setItem('cmo_customers',JSON.stringify(cd.list));
    // Sync notifications
    const nd=await fGet('data','notifs');if(nd&&nd.list)localStorage.setItem('cmo_notifs',JSON.stringify(nd.list));
    // Sync today's day data
    const dk=dKey(),dd=await fGet('daydata',dk);
    if(dd){const a=JSON.parse(localStorage.getItem('cmo_days')||'{}');a[dk]=dd;localStorage.setItem('cmo_days',JSON.stringify(a));}
    // Also sync viewDate if it's a different day (previous/future date)
    if(typeof viewDate!=='undefined'&&viewDate&&viewDate!==dk){
      const vdd=await fGet('daydata',viewDate);
      if(vdd){const a=JSON.parse(localStorage.getItem('cmo_days')||'{}');a[viewDate]=vdd;localStorage.setItem('cmo_days',JSON.stringify(a));}
    }
    // Sync handover data for all routes
    const agents=DB.settings.agents||[];
    for(const a of agents){
      const hd=await fGet('handover',dk+'_'+a.id);
      if(hd){
        localStorage.setItem('handover_'+dk+'_cow_'+a.id,hd.cow||0);
        localStorage.setItem('handover_'+dk+'_buf_'+a.id,hd.buf||0);
      }
    }
    // Refresh current page
    const ap=document.querySelector('.page.active');
    if(ap){const id=ap.id.replace('pg-','');if(id==='today')renderToday();else if(id==='route')renderRoute();else if(id==='customers')renderCusts();/*v19.7: bill no longer auto-rebuilds (stops scroll jump)*/}
  }catch(e){console.log('sync:',e);}
}

// ===== SECURITY =====
const MA=3,LM=30*60*1000;
function gAt(r){return JSON.parse(localStorage.getItem('at_'+r)||'{"c":0,"l":0}');}
function sAt(r,d){localStorage.setItem('at_'+r,JSON.stringify(d));}
function isLk(r){return gAt(r).l>Date.now();}
function lkMin(r){return Math.ceil((gAt(r).l-Date.now())/60000);}
function failAt(r){const a=gAt(r);a.c++;if(a.c>=MA){a.l=Date.now()+LM;a.c=0;}sAt(r,a);}
function resetAt(r){sAt(r,{c:0,l:0});}
function remAt(r){return MA-gAt(r).c;}
function hPin(p){let h=0;for(let i=0;i<p.length;i++){h=((h<<5)-h)+p.charCodeAt(i);h|=0;}return h.toString(36);}

// Milk quantity options up to 50L
function milkQtyOptions(selected,includeNoMilk=true,includeSelect=false){
  const qtys=[];
  if(includeSelect)qtys.push({v:-1,l:'— Select —'});
  if(includeNoMilk)qtys.push({v:0,l:'❌ No Milk'});
  // 0.25, 0.5, 0.75, 1, 1.5, 2... up to 5 in 0.5 steps
  [0.25,0.5,0.75].forEach(q=>qtys.push({v:q,l:q+'L'}));
  for(let q=1;q<=5;q+=0.5)qtys.push({v:Math.round(q*100)/100,l:q+'L'});
  // 5.5 to 50 in 0.5 steps
  for(let q=5.5;q<=50;q+=0.5)qtys.push({v:Math.round(q*100)/100,l:q+'L'});
  return qtys.map(o=>`<option value="${o.v}" ${parseFloat(selected)===o.v?'selected':''}>${o.l}</option>`).join('');
}

// ===== DATA =====
const DB={
  get owners(){return JSON.parse(localStorage.getItem('cmo_owners')||JSON.stringify([{id:'o1',name:'Admin',phone:'',pinHash:'',active:false},{id:'o2',name:'Proprietor',phone:'',pinHash:'',active:false}]));},
  setOwners(v){localStorage.setItem('cmo_owners',JSON.stringify(v));fSet('auth','owners',{list:v});},
  get customers(){
    const stored = localStorage.getItem('cmo_customers');
    if(stored) return JSON.parse(stored);
    // Default test customer
    const def = [{id:'test001',name:'Test Customer',mobile:'9999999999',address:'Test Address, Near Temple',litres:1,price:60,milkType:'cow',order:1,mapsLink:'',delivTime:'06:30'}];
    localStorage.setItem('cmo_customers',JSON.stringify(def));
    return def;
  },
  setCustomers(v){localStorage.setItem('cmo_customers',JSON.stringify(v));fSet('data','customers',{list:v});},
  get settings(){
    const def={ownerPhone:'7997699654',boyName:'',boyPhone:'',boyPinHash:'',delivStart:'',delivEnd:'',
      agents:[
        {id:'a1',name:'Route A',agentName:'',agentPhone:'',active:false,pinHash:'',delivStart:'',delivEnd:''},
        {id:'a2',name:'Route B',agentName:'',agentPhone:'',active:false,pinHash:'',delivStart:'',delivEnd:''},
        {id:'a3',name:'Route C',agentName:'',agentPhone:'',active:false,pinHash:'',delivStart:'',delivEnd:''},
        {id:'a4',name:'Route D',agentName:'',agentPhone:'',active:false,pinHash:'',delivStart:'',delivEnd:''},
        {id:'a5',name:'Route E',agentName:'',agentPhone:'',active:false,pinHash:'',delivStart:'',delivEnd:''},
        {id:'a6',name:'Route F',agentName:'',agentPhone:'',active:false,pinHash:'',delivStart:'',delivEnd:''}
      ]};
    const stored=localStorage.getItem('cmo_settings');
    if(!stored)return def;
    const s=JSON.parse(stored);
    if(!s.agents)s.agents=def.agents;
    return s;
  },
  setSettings(v){localStorage.setItem('cmo_settings',JSON.stringify(v));fSet('auth','settings',v);},
  get products(){
    const stored = localStorage.getItem('cmo_prods');
    const defaults = [{id:'cow_milk',name:'Cow Milk',icon:'🐄',unit:'L',active:true},
      {id:'buf_milk',name:'Buffalo Milk',icon:'🐃',unit:'L',active:true},
      {id:'cow_ghee',name:'Cow Ghee',icon:'🫙',unit:'kg',active:true},
      {id:'buf_ghee',name:'Buffalo Ghee',icon:'🫙',unit:'kg',active:true},
      {id:'cow_curd',name:'Cow Curd',icon:'🥛',unit:'kg',active:false},
      {id:'buf_curd',name:'Buffalo Curd',icon:'🥛',unit:'kg',active:false},
      {id:'paneer',name:'Paneer',icon:'🧀',unit:'kg',active:true}];
    if(!stored) return defaults;
    const saved = JSON.parse(stored);
    // Migrate old IDs (cm->cow_milk, bm->buf_milk etc)
    const idMap={'cm':'cow_milk','bm':'buf_milk','cg':'cow_ghee','bg':'buf_ghee','cc':'cow_curd','bc':'buf_curd','pn':'paneer'};
    return saved.map(p=>({...p,id:idMap[p.id]||p.id}));
  },
  setProducts(v){localStorage.setItem('cmo_prods',JSON.stringify(v));},
  getDayData(dk){const a=JSON.parse(localStorage.getItem('cmo_days')||'{}');return a[dk]||{};},
  setDayData(dk,v){const a=JSON.parse(localStorage.getItem('cmo_days')||'{}');a[dk]=v;localStorage.setItem('cmo_days',JSON.stringify(a));fSet('daydata',dk,v);},
  getMonthPaid(ym){const a=JSON.parse(localStorage.getItem('cmo_paid')||'{}');return a[ym]||{};},
  setMonthPaid(ym,v){const a=JSON.parse(localStorage.getItem('cmo_paid')||'{}');a[ym]=v;localStorage.setItem('cmo_paid',JSON.stringify(a));fSet('paid',ym,{paid:v});},
  // v16.5: write ONE customer's paid status only — merge so other phones' payments are never overwritten
  setOnePaid(ym,cid,val){const a=JSON.parse(localStorage.getItem('cmo_paid')||'{}');if(!a[ym])a[ym]={};a[ym][cid]=val;localStorage.setItem('cmo_paid',JSON.stringify(a));if(fbOK&&db)try{db.collection('paid').doc(ym).set({paid:{[cid]:val}},{merge:true});}catch(e){}},
  get notifs(){return JSON.parse(localStorage.getItem('cmo_notifs')||'[]');},
  addNotif(m){const n=DB.notifs;n.unshift({m,t:new Date().toLocaleTimeString('en-IN',{hour:'2-digit',minute:'2-digit'}),r:false});if(n.length>20)n.pop();localStorage.setItem('cmo_notifs',JSON.stringify(n));fSet('data','notifs',{list:n});},
  clearNotifs(){localStorage.setItem('cmo_notifs',JSON.stringify([]));fSet('data','notifs',{list:[]});}
};

// ===== STATE =====
const SESS=5*60*60*1000;
let role='',custId='',agentId='',viewDate=dKey();
window.openAddrSet=window.openAddrSet||new Set(); // v18.6: track open address sections across re-renders
let billM=new Date().getMonth(),billY=new Date().getFullYear();
let cBillM=new Date().getMonth(),cBillY=new Date().getFullYear();
let pinBuf='',pinRole='',matchedOwnerName='';
let sBuf='',sFirst='',sPhase=1,sOId='',sBoyMode=false,sAgentMode=false,sAgentIdx=-1;
let selectedRouteId='';
let paidCid='',paidYM='';

// ===== UTILS =====
function dKey(d){
  const dt=d?new Date(d):new Date();
  const y=dt.getFullYear();
  const m=String(dt.getMonth()+1).padStart(2,'0');
  const day=String(dt.getDate()).padStart(2,'0');
  return y+'-'+m+'-'+day;
}
function fmtShort(dk){const d=new Date(dk+'T00:00:00');const t=new Date();t.setHours(0,0,0,0);const df=Math.round((t-d)/86400000);if(df===0)return'Today';if(df===1)return'Yesterday';return d.toLocaleDateString('en-IN',{day:'numeric',month:'short'});}
function fmtDate(){return new Date().toLocaleDateString('en-IN',{weekday:'long',day:'numeric',month:'long',year:'numeric'});}
function fmtMY(y,m){return new Date(y,m,1).toLocaleDateString('en-IN',{month:'long',year:'numeric'});}
function fmtDay(d){return new Date(d+'T00:00:00').toLocaleDateString('en-IN',{day:'numeric',month:'short'});}
function fmtTime(t){if(!t)return'';const[h,m]=t.split(':');const hr=parseInt(h);return(hr%12||12)+':'+m+(hr<12?' AM':' PM');}
function isAfter6PM(){return new Date().getHours()>=18;}
function openMo(id){document.getElementById(id).classList.add('open');}
function closeMo(id){document.getElementById(id).classList.remove('open');}
function showScr(id){if(role==='customer'&&id!=='sc'&&id!=='sl'){id='sc';}document.querySelectorAll('.screen').forEach(s=>{s.classList.remove('active');});const t=document.getElementById(id);if(t)t.classList.add('active');window.scrollTo(0,0);}
function showPg(id){
  if(role==='customer')return;
  document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
  const pg=document.getElementById('pg-'+id);if(pg)pg.classList.add('active');
  const tb=document.querySelector('[data-pg="'+id+'"]');if(tb)tb.classList.add('active');
  if(id==='today')renderToday();else if(id==='route')renderRoute();else if(id==='track')renderTrack();
  else if(id==='bill')renderBill();else if(id==='customers')renderCusts();else if(id==='add')renderAdd();
}

// ===== SESSION =====
function startSess(r){
  role=r;
  if(r==='customer'){
    // Save permanently for customer
    localStorage.setItem('cmo_cust_logged',JSON.stringify({id:custId}));
  } else {
    const exp=Date.now()+SESS;
    sessionStorage.setItem('r',r);sessionStorage.setItem('e',exp.toString());
    startSessTimer(exp);
  }
}
function startSessTimer(exp){
  if(sessInt)clearInterval(sessInt);
  const u=()=>{const rem=exp-Date.now();if(rem<=0){doLogout();return;}const m=Math.floor(rem/60000);const h=Math.floor(m/60);const el=document.getElementById('sessTimer');if(el)el.textContent=h>0?h+'h '+(m%60)+'m':m+'m left';};
  u();sessInt=setInterval(u,30000);
}
function restoreSess(){
  // Customer uses localStorage (permanent)
  const custStored = localStorage.getItem('cmo_cust_logged');
  if(custStored){
    const cd = JSON.parse(custStored);
    const c = DB.customers.find(x=>x.id===cd.id);
    if(c){role='customer';custId=cd.id;return true;}
  }
  // Admin/Agent uses sessionStorage (5 hours)
  const r=sessionStorage.getItem('r');const exp=parseInt(sessionStorage.getItem('e')||'0');
  if(!r||exp<=Date.now())return false;
  role=r;if(r==='customer')custId=sessionStorage.getItem('c')||'';
  startSessTimer(exp);return true;
}
function doLogout(){
  if(sessInt)clearInterval(sessInt);
  sessionStorage.clear();
  localStorage.removeItem('cmo_cust_logged');
  stopBoyLoc();role='';custId='';showScr('sl');
}

function renderConsolidatedSummary(){
  const wrap=document.getElementById('consolidatedSummary');
  const el=document.getElementById('summaryTableBody');
  if(!wrap||!el)return;
  if(role!=='admin'){wrap.style.display='none';return;}
  wrap.style.display='block';
  var allActive=(DB.customers||[]).filter(function(c){return !isSkipped(c,viewDate);});
  var cc=document.getElementById('consCustCount'); if(cc)cc.textContent='Total Customers (all routes): '+allActive.length;
  // v23.10: combine handoverMaps of all routes for the summary
  var combinedMap={};
  (DB.settings.agents||[]).forEach(function(a){
    var m=getHandoverMap(a.id);
    Object.keys(m).forEach(function(pid){combinedMap[pid]=(combinedMap[pid]||0)+(m[pid]||0);});
  });
  var allLoaded=loadedHandover(null);
  var ch=buildHandoverTableHTML(allActive,{loaded:allLoaded,handoverMap:combinedMap});
  if(el._lastHTML===ch)return;
  el._lastHTML=ch; el.innerHTML=ch;
}
function buildRouteTabs(){
  const el=document.getElementById('routeTabs');
  if(!el||role!=='admin')return;
  const agents=DB.settings.agents||[];
  const colors=['#FFD6D6','#D6EAFF','#D6FFE8','#FFF0D6','#EDD6FF','#D6F5FF'];
  // v23.7: "orphan" customers = no route OR a route id that doesn't match any current route tab.
  const agentIds=agents.map(function(a){return a.id;});
  const isOrphan=function(c){return !c.route||agentIds.indexOf(c.route)<0;};
  const hasNoRoute=(DB.customers||[]).some(isOrphan);
  // if the No Route tab was selected but no longer applies, fall back to first agent
  if(selectedRouteId==='__noroute__'&&!hasNoRoute)selectedRouteId=agents.length?agents[0].id:'';
  // Set default selected route
  if(!selectedRouteId&&agents.length>0)selectedRouteId=agents[0].id;
  el.style.display='block';
  var html=agents.map((a,i)=>`
    <button onclick="selectRoute('${a.id}')" style="display:inline-block;margin-right:6px;padding:6px 14px;border-radius:20px;border:2px solid ${colors[i]};background:${selectedRouteId===a.id?colors[i]:'white'};font-size:12px;font-weight:700;color:#333;cursor:pointer;white-space:nowrap;">
      🚴 ${a.name}${a.agentName?' ('+a.agentName+')':''}
    </button>`).join('');
  if(hasNoRoute){
    html+=`<button onclick="selectRoute('__noroute__')" style="display:inline-block;margin-right:6px;padding:6px 14px;border-radius:20px;border:2px dashed #C0392B;background:${selectedRouteId==='__noroute__'?'#FCE4E4':'white'};font-size:12px;font-weight:700;color:#C0392B;cursor:pointer;white-space:nowrap;">🚩 No Route</button>`;
  }
  el.innerHTML=html;
}

function selectRoute(id){
  selectedRouteId=id;
  buildRouteTabs();
  // Refresh current page with new route filter
  const ap=document.querySelector('.page.active');
  if(ap){
    const pgId=ap.id.replace('pg-','');
    if(pgId==='today')renderToday();
    else if(pgId==='route')renderRoute();
    else if(pgId==='track')renderTrack();
  }
}

function getSelectedAgentCustomers(){
  if(role!=='admin')return DB.customers;
  if(selectedRouteId==='__noroute__'){var aids=(DB.settings.agents||[]).map(function(a){return a.id;});return DB.customers.filter(c=>!c.route||aids.indexOf(c.route)<0);} // v23.7: unassigned + stale-route customers
  if(!selectedRouteId){
    // Auto-select first route
    const agents=DB.settings.agents||[];
    if(agents.length>0)selectedRouteId=agents[0].id;
    else return DB.customers;
  }
  return DB.customers.filter(c=>c.route===selectedRouteId);
}
function buildTabs(){
  const isA=role==='admin';
  const isAgent=role==='agent';
  const ur=DB.notifs.filter(n=>!n.r).length;
  const nb=ur>0?` <span style="background:red;color:white;border-radius:50%;width:14px;height:14px;font-size:8px;display:inline-flex;align-items:center;justify-content:center;">${ur}</span>`:'';
  const tabs=[
    // Agent does NOT see Today tab (2.11.1q)
    ...(isA?[{id:'today',i:'📋',l:'Dashboard'+nb}]:[]),
    {id:'route',i:'🗺️',l:'Route'},
    // v19.2: Track tab removed — Live Location + Call/Request now live on Dashboard
    ...(isA?[{id:'bill',i:'💰',l:'Bill'}]:[]),
    {id:'customers',i:'👥',l:'Customers'},
    ...(isA?[{id:'add',i:'⚙️',l:'Add/Set'}]:[]),
  ];
  document.getElementById('mainTabs').innerHTML=tabs.map(t=>`<button class="tab" data-pg="${t.id}"><span class="tab-icon">${t.i}</span>${t.l}</button>`).join('');
  document.querySelectorAll('.tab').forEach(tb=>{
    tb.addEventListener('click',function(){showPg(this.getAttribute('data-pg'));});
  });
  if(role==='admin')buildRouteTabs();
  else{const rt=document.getElementById('routeTabs');if(rt)rt.style.display='none';}
  // v24.9: agent ☰ menu button only for agent
  var ahb=document.getElementById('agentMenuBtn');
  if(ahb)ahb.style.display=(role==='agent')?'':'none';
  // v25: admin ⋮ menu button only for admin
  var adb=document.getElementById('adminMenuBtn');
  if(adb)adb.style.display=(role==='admin')?'':'none';
  // v25.1: header Exit hidden for admin (Exit now lives at bottom of ⋮ menu)
  var exitB=document.getElementById('exitBtn');
  if(exitB)exitB.style.display=(role==='admin')?'none':'';
}

// ===== PIN LOGIN =====
function buildAgentTiles(){
  const grid=document.getElementById('agentGrid');
  if(!grid)return; // Single agent mode - no grid needed
  const agents=DB.settings.agents||[];
  const colors=['a1','a2','a3','a4','a5','a6'];
  grid.innerHTML='';
  agents.forEach((a,i)=>{
    const tile=document.createElement('div');
    tile.className='agent-tile '+colors[i];
    tile.innerHTML=`<div class="agent-tile-icon">🚴</div>
      <div class="agent-tile-name">${a.name||'Route '+(i+1)}</div>
      <div class="agent-tile-sub">Tap to login</div>`;
    tile.addEventListener('click',function(){
      agentId=a.id;
      showPinLogin('agent');
    });
    grid.appendChild(tile);
  });
}

function showPinLogin(type){
  pinRole=type;pinBuf='';
  const agentName=type==='agent'?getAgentById(agentId)?.name||'Delivery Agent':'';
  document.getElementById('pinTitle').textContent=type==='admin'?'👤 '+(matchedOwnerName||'Admin')+' Login':'🚴 '+agentName;
  document.getElementById('pinSub').textContent='Enter your 6-digit PIN';
  document.getElementById('pinErr').textContent='';
  renderPD('pinDots',pinBuf);
  const lk=isLk(type);
  const lm=document.getElementById('lockMsg');
  lm.style.display=lk?'block':'none';
  if(lk)lm.textContent='🔒 Locked for '+lkMin(type)+' more minutes.';
  openMo('pinMo');
}

function getAgentById(id){
  return (DB.settings.agents||[]).find(a=>a.id===id);
}

function renderPD(id,buf,n=6){
  const el=document.getElementById(id);if(!el)return;
  el.innerHTML=Array(n).fill(0).map((_,i)=>`<div class="pdot ${i<buf.length?'filled':''}"></div>`).join('');
}

function pk(k){
  if(isLk(pinRole))return;
  if(pinBuf.length>=6)return;
  pinBuf+=k;renderPD('pinDots',pinBuf);
  if(pinBuf.length===6)setTimeout(checkPIN,150);
}
function pd(){if(pinBuf.length>0){pinBuf=pinBuf.slice(0,-1);renderPD('pinDots',pinBuf);}}

function checkPIN(){
  const h=hPin(pinBuf);let matched=false,mName='';
  if(pinRole==='admin'){const m=DB.owners.find(o=>o.pinHash===h&&h!=='');if(m){matched=true;mName=m.name;}}
  else{
    // Check agent PIN by agentId or find matching agent
    let agent=getAgentById(agentId);
    if(agent&&agent.pinHash===h&&h!==''){
      matched=true;mName=agent.agentName||agent.name||'Delivery Agent';
    } else {
      // Search all agents for matching PIN
      const allAgents=DB.settings.agents||[];
      const matchedAgent=allAgents.find(a=>a.pinHash===h&&h!=='');
      if(matchedAgent){
        matched=true;agentId=matchedAgent.id;
        mName=matchedAgent.agentName||matchedAgent.name||'Delivery Agent';
      }
      // Fallback to old single agent PIN
      else if(DB.settings.boyPinHash===h&&h!==''){matched=true;mName=DB.settings.boyName||'Delivery Agent';}
    }
  }
  if(matched){
    resetAt(pinRole);closeMo('pinMo');
    role=pinRole==='admin'?'admin':'agent';
    const displayName=role==='admin'?(mName||'Admin'):(mName||'Delivery Agent');
    if(role==='admin')localStorage.setItem('cmo_adminName',mName||'Admin');
    document.getElementById('mBadge').textContent=(role==='admin'?'👤 ':'🚴 ')+displayName;
    startSess(role);viewDate=dKey();buildTabs();showScr('sm');
    showPg(role==='admin'?'today':'route');
    setTimeout(syncAll,300);
    // Poll every 5 seconds for real-time sync
    setInterval(async()=>{
      await syncAll();
    },5000);
    
    // ===== REAL-TIME FIREBASE LISTENERS =====
    if(fbOK&&db){
      // 1. Listen for customer data changes (real-time sync)
      db.collection('data').doc('customers').onSnapshot(doc=>{
        if(!doc.exists)return;
        const d=doc.data();
        if(d&&d.list){
          localStorage.setItem('cmo_customers',JSON.stringify(d.list));
          // Refresh current page
          const ap=document.querySelector('.page.active');
          if(ap){
            const id=ap.id.replace('pg-','');
            if(id==='today')renderToday();
            else if(id==='route')renderRoute();
            else if(id==='customers')renderCusts();
            /*v19.7: bill not auto-rebuilt on customer sync (stops scroll jump)*/
          }
          // v16.2: customer screen live repaint (skip while typing)
          if(role==='customer'&&custId){
            const ae=document.activeElement;
            if(!(ae&&(ae.tagName==='INPUT'||ae.tagName==='TEXTAREA')))renderCustScr();
          }
        }
      });

      // 2. Listen for today's delivery data (real-time sync)
      db.collection('daydata').doc(dKey()).onSnapshot(doc=>{
        if(!doc.exists)return;
        const d=doc.data();
        if(d){
          const a=JSON.parse(localStorage.getItem('cmo_days')||'{}');
          a[dKey()]=d;
          localStorage.setItem('cmo_days',JSON.stringify(a));
          const ap=document.querySelector('.page.active');
          if(ap){
            const id=ap.id.replace('pg-','');
            if(id==='today')renderToday();
            else if(id==='route')renderRoute();
          }
          // v16.2: customer screen live repaint (skip while typing)
          if(role==='customer'&&custId){
            const ae=document.activeElement;
            if(!(ae&&(ae.tagName==='INPUT'||ae.tagName==='TEXTAREA')))renderCustScr();
          }
          // Update route circles too
          buildTabs();
        }
      });

      // 3. Listen for settings changes (agent names, PINs, time slots)
      db.collection('auth').doc('settings').onSnapshot(doc=>{
        if(!doc.exists)return;
        const sd=doc.data();
        if(sd){
          const ls=DB.settings;
          const mg={...ls,...sd};
          if(sd.agents&&ls.agents){
            mg.agents=sd.agents.map((fa,i)=>{
              const la=ls.agents[i]||{};
              return{...la,...fa,pinHash:fa.pinHash||la.pinHash||'',agentPhone:fa.agentPhone||la.agentPhone||'',active:fa.active||la.active||false};
            });
          }
          if(ls.boyPinHash&&!sd.boyPinHash)mg.boyPinHash=ls.boyPinHash;
          localStorage.setItem('cmo_settings',JSON.stringify(mg));
          buildRouteTabs();
        }
      });

      // 4. Listen for handover data changes
      const agents=DB.settings.agents||[];
      agents.forEach(a=>{
        db.collection('handover').doc(dKey()+'_'+a.id).onSnapshot(doc=>{
          if(!doc.exists)return;
          const d=doc.data();
          if(d){
            localStorage.setItem('handover_'+dKey()+'_cow_'+a.id,d.cow||0);
            localStorage.setItem('handover_'+dKey()+'_buf_'+a.id,d.buf||0);
            const ap=document.querySelector('.page.active');
            if(ap){
              const id=ap.id.replace('pg-','');
              if(id==='today')renderToday();
              else if(id==='route')renderRoute();
            }
          }
        });
      });

      // 5. Admin: listen for special orders and delivery notifications
      if(role==='admin'){
        db.collection('adminNotifs').doc('latest').onSnapshot(doc=>{
          if(!doc.exists)return;
          const d=doc.data();
          if(d&&!d.read&&d.time){
            const t=new Date(d.time).getTime();
            if(Date.now()-t<30000){
              playNotifSound();
              if(Notification.permission==='granted')new Notification('🔔 Chaitanya Dairy',{body:d.msg||'New update',tag:'adminorder'});
              db.collection('adminNotifs').doc('latest').set({...d,read:true},{merge:true});
            }
          }
          // Always refresh advance orders
          setTimeout(renderAdminAdvOrders,300);
        });
        db.collection('deliveryUpdates').doc('latest').onSnapshot(doc=>{
          if(!doc.exists)return;
          const d=doc.data();
          if(d&&!d.read&&d.time){
            const t=new Date(d.time).getTime();
            if(Date.now()-t<30000){
              playNotifSound();
              if(Notification.permission==='granted')new Notification('✅ Delivered!',{body:d.msg||'Delivery agent marked a delivery',tag:'admindelivery'});
              db.collection('deliveryUpdates').doc('latest').set({...d,read:true},{merge:true});
            }
          }
        });
      }

      // 6. Agent: listen for delivery notifications
      if(role==='agent'){
        db.collection('deliveryNotifs').doc('agent_'+agentId).onSnapshot(doc=>{
          if(doc.exists){
            const ap=document.querySelector('.page.active');
            if(ap&&ap.id.replace('pg-','')===('route'))renderRoute();
          }
        });
      }

      // 7. Listen for payment data changes (Admin, Agent, Customer - real-time sync)
      const now=new Date();
      const currentYM=`${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}`;
      const nextYM=`${now.getFullYear()}-${String(now.getMonth()+2).padStart(2,'0')}`;
      for(const ym of [currentYM, nextYM]){
        db.collection('paid').doc(ym).onSnapshot(doc=>{
          if(!doc.exists)return;
          const d=doc.data();
          if(d&&d.paid){
            // v16.5: merge incoming into local (don't blow away a payment this phone already has)
            const paidData=JSON.parse(localStorage.getItem('cmo_paid')||'{}');
            paidData[ym]=Object.assign({},paidData[ym]||{},d.paid);
            localStorage.setItem('cmo_paid',JSON.stringify(paidData));
            // v16.5: paid sync repaint — refresh ALL payment screens, not just current tab
            const ae=document.activeElement;
            const typing=ae&&(ae.tagName==='INPUT'||ae.tagName==='TEXTAREA');
            if(!typing){
              const ap=document.querySelector('.page.active');
              const pid=ap?ap.id.replace('pg-',''):'';
              /*v19.7: bill not auto-rebuilt on paid sync (stops scroll jump)*/
              if(pid==='today')renderToday();
              if(role==='customer'&&custId)renderCustScr();
            }
          }
        });
      }
    }
  }else{
    failAt(pinRole);const rem=remAt(pinRole);
    if(isLk(pinRole)){document.getElementById('pinErr').textContent='🔒 Locked for 30 minutes!';document.getElementById('lockMsg').style.display='block';document.getElementById('lockMsg').textContent='🔒 Locked 30 minutes.';}
    else document.getElementById('pinErr').textContent='❌ Wrong PIN. '+rem+' attempt'+(rem!==1?'s':'')+' left.';
    pinBuf='';renderPD('pinDots',pinBuf);
  }
}

// ===== SETUP PIN =====
function renderSD(buf){const el=document.getElementById('setupDots');if(!el)return;el.innerHTML=Array(6).fill(0).map((_,i)=>`<div class="pdot ${i<buf.length?'filled':''}"></div>`).join('');}
function openSetupMo(title,name){
  sPhase=1;sBuf='';sFirst='';
  document.getElementById('setupTitle').textContent='🔐 '+title;
  document.getElementById('setupSub').textContent='Choose 6-digit PIN for '+name;
  document.getElementById('setupErr').textContent='';
  renderSD(sBuf);openMo('setupMo');
}
function spk(k){if(sBuf.length>=6)return;sBuf+=k;renderSD(sBuf);if(sBuf.length===6)setTimeout(procSetup,150);}
function spd(){if(sBuf.length>0){sBuf=sBuf.slice(0,-1);renderSD(sBuf);}}
function procSetup(){
  if(sPhase===1){sFirst=sBuf;sBuf='';sPhase=2;document.getElementById('setupSub').textContent='Confirm — enter same PIN again';renderSD(sBuf);}
  else{
    if(sBuf===sFirst){
      const h=hPin(sBuf);
      if(sAgentMode&&sAgentIdx>=0){
        // Save PIN for specific agent
        const s=DB.settings;s.agents[sAgentIdx].pinHash=h;s.agents[sAgentIdx].active=true;DB.setSettings(s);
        sAgentMode=false;sAgentIdx=-1;
        closeMo('setupMo');renderAgentsList();buildAgentTiles();
        alert('✅ PIN set!');
      }
      else if(sBoyMode){const s=DB.settings;s.boyPinHash=h;DB.setSettings(s);closeMo('setupMo');if(role==='admin')renderAdd();alert('✅ Agent PIN set!');}
      else{
        const o=DB.owners;const i=o.findIndex(x=>x.id===sOId);
        if(i>=0){o[i].pinHash=h;o[i].active=true;DB.setOwners(o);}
        localStorage.removeItem('pin_reset');
        closeMo('setupMo');
        if(role==='admin')renderPins();
        else{alert('✅ PIN set! Please login now.');showPinLogin('admin');}
      }
    }else{document.getElementById('setupErr').textContent='❌ PINs do not match.';sBuf='';sFirst='';sPhase=1;document.getElementById('setupSub').textContent='Choose 6-digit PIN';renderSD(sBuf);}
  }
}

// ===== NEW PHONE LOGIN (v24) =====
async function doPhoneLogin(){
  const phone=document.getElementById('loginPhone').value.trim();
  const err=document.getElementById('loginErr');
  const btn=document.getElementById('loginSubmitBtn');
  err.textContent='';
  if(!/^\d{10}$/.test(phone)){err.textContent='❌ Enter valid 10-digit number';return;}

  // v24.4: Pull fresh data from the cloud FIRST, so login works correctly
  // even on a phone/browser that hasn't synced this number before.
  btn.textContent='🔄 Checking...';btn.disabled=true;
  try{await syncAuthData();}catch(e){}
  btn.textContent='Continue →';btn.disabled=false;

  // 1. Check owner phones
  const settings=DB.settings;
  const owners=DB.owners;
  // Owner phone set in Settings > Admin PINs > Set Phone (v24.1).
  // Also accepts settings.ownerPhone (Manager phone) as a fallback match.
  const matchedOwner = owners.find(o=>o.phone && o.phone===phone);
  const isOwner = !!matchedOwner || (settings.ownerPhone && settings.ownerPhone===phone);
  if(isOwner){
    matchedOwnerName = matchedOwner ? matchedOwner.name : '';
    showPinLogin('admin');
    return;
  }

  // 2. Check agent phones (v24.4: fixed — field is settings.agents, not settings.routes)
  const routes=(settings.agents||[]);
  const matchRoute=routes.find(r=>r.agentPhone && r.agentPhone===phone && (r.active || r.pinHash));
  if(matchRoute){
    agentId=matchRoute.id;
    showPinLogin('agent');
    return;
  }

  // 3. Check customer phones
  const cust=DB.customers.find(c=>c.mobile===phone);
  if(cust){
    // Save session so customer stays logged in next time
    localStorage.setItem('cmo_cust_phone',phone);
    custId=cust.id;role='customer';
    if(sessInt)clearInterval(sessInt);
    sessionStorage.removeItem('r');sessionStorage.removeItem('e');
    startSess('customer');showScr('sc');applyCustVis();renderCustScr();if(window._custMenuShowHome)window._custMenuShowHome();window.scrollTo(0,0);
    if('Notification' in window&&Notification.permission==='default')Notification.requestPermission();
    if(fbOK&&db)db.collection('deliveryNotifs').doc(custId).onSnapshot(doc=>{
      if(!doc.exists)return;const d=doc.data();
      if(d&&!d.read){showDelivBanner(d.body||'Milk delivered!');fSet('deliveryNotifs',custId,{...d,read:true});const c2=DB.customers.find(x=>x.id===custId);if(c2)renderCustToday(c2);}
    });
    return;
  }

  // 4. Unknown number
  err.textContent='❌ Not registered. Contact Chaitanya Dairy.';
}

// ===== CUSTOMER LOGIN =====
function doCustLogin(){
  const mob=document.getElementById('cLMob').value.trim();
  if(mob.length!==10){document.getElementById('cLErr').textContent='Enter valid 10-digit number';return;}
  const c=DB.customers.find(x=>x.mobile===mob);
  if(!c){document.getElementById('cLErr').textContent='❌ Not registered. Contact Manager.';return;}
  custId=c.id;role='customer';closeMo('cLoginMo');if(sessInt)clearInterval(sessInt);sessionStorage.removeItem('r');sessionStorage.removeItem('e');startSess('customer');showScr('sc');applyCustVis();renderCustScr();if(window._custMenuShowHome)window._custMenuShowHome();window.scrollTo(0,0);
  if('Notification' in window&&Notification.permission==='default')Notification.requestPermission();
  if(fbOK&&db)db.collection('deliveryNotifs').doc(custId).onSnapshot(doc=>{
    if(!doc.exists)return;const d=doc.data();
    if(d&&!d.read){showDelivBanner(d.body||'Milk delivered!');fSet('deliveryNotifs',custId,{...d,read:true});const c2=DB.customers.find(x=>x.id===custId);if(c2)renderCustToday(c2);}
  });
}
function playNotifSound(){
  try{
    const ctx=new(window.AudioContext||window.webkitAudioContext)();
    const osc=ctx.createOscillator();const gain=ctx.createGain();
    osc.connect(gain);gain.connect(ctx.destination);
    osc.frequency.setValueAtTime(800,ctx.currentTime);
    osc.frequency.setValueAtTime(600,ctx.currentTime+0.1);
    osc.frequency.setValueAtTime(800,ctx.currentTime+0.2);
    gain.gain.setValueAtTime(0.3,ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001,ctx.currentTime+0.4);
    osc.start(ctx.currentTime);osc.stop(ctx.currentTime+0.4);
  }catch(e){console.log('sound err',e);}
}
function showDelivBanner(msg){
  const o=document.getElementById('delivBanner');if(o)o.remove();
  const d=document.createElement('div');d.id='delivBanner';d.className='deliv-alert';
  d.innerHTML='✅ '+msg+' <span style="cursor:pointer;margin-left:8px;" onclick="this.parentElement.remove()">✕</span>';
  document.body.appendChild(d);
  playNotifSound();
  if(Notification.permission==='granted')new Notification('Chaitanya Dairy 🥛',{body:msg,tag:'milk',silent:false});
  setTimeout(()=>{if(d.parentElement)d.remove();},8000);
}

// ===== DATE NAV =====
function chDay(dir){
  // Parse date parts directly to avoid timezone issues
  const parts=viewDate.split('-');
  const c=new Date(parseInt(parts[0]),parseInt(parts[1])-1,parseInt(parts[2]));
  c.setDate(c.getDate()+dir);
  const nd=dKey(c);
  const maxDate=new Date();maxDate.setDate(maxDate.getDate()+30);
  if(nd>dKey(maxDate))return;
  viewDate=nd;
  // Sync this date's data from Firebase before rendering
  if(fbOK&&db){
    fGet('daydata',viewDate).then(vdd=>{
      if(vdd){const a=JSON.parse(localStorage.getItem('cmo_days')||'{}');a[viewDate]=vdd;localStorage.setItem('cmo_days',JSON.stringify(a));}
      renderToday();
    }).catch(()=>renderToday());
  } else {
    renderToday();
  }
}

// v15.8: Hold (vacation) / Inactive system
function isOnHold(c,dk2){const d=dk2||dKey();return !!(c.hold&&c.hold.from&&c.hold.to&&d>=c.hold.from&&d<=c.hold.to);}
// v23.2: alternate day check — returns true on OFF days (not delivery days)
function isOnAltDay(c,dk2){if(!c||!c.altDay||!c.altDay.from)return false;const d=dk2||dKey();if(d<c.altDay.from)return false;const diff=Math.round((new Date(d+'T00:00:00')-new Date(c.altDay.from+'T00:00:00'))/86400000);return diff%2!==0;}
function isSkipped(c,dk2){return c.inactive===true||isOnHold(c,dk2);}
// v23: VACATION <-> ORDER conflict guards (a delivery and a vacation can't be on the same day)
function _vacOrderDaysInRange(cid,from,to){var out=[];var all=JSON.parse(localStorage.getItem('cmo_days')||'{}');Object.keys(all).forEach(function(dk){if(dk<from||dk>to)return;var d=all[dk]&&all[dk][cid];if(d&&d.custChanged)out.push(dk);});return out.sort();}
function _vacClearOrderDays(cid,dayKeys){var cust=DB.customers.find(function(x){return x.id===cid;});dayKeys.forEach(function(dk){var dd=DB.getDayData(dk);if(dd[cid]){dd[cid].qty=cust?(parseFloat(cust.litres)||1):0;dd[cid].extraOrders={};dd[cid].custChanged=false;delete dd[cid].cowQty;delete dd[cid].bufQty;DB.setDayData(dk,dd);}});}
function _vacCancelHold(cid){var list=DB.customers;var m=list.find(function(x){return x.id===cid;});if(m){delete m.hold;delete m.holdNotified;DB.setCustomers(list);}}
// Direction 1: placing a single-day order/qty for cust on date dk. true=proceed, false=abort.
function guardOrderVsVacation(cust,dk){if(!cust||!isOnHold(cust,dk))return true;var msg='\u26a0\ufe0f '+(cust.name||'This customer')+' is on vacation ('+fmtDM(cust.hold.from)+' \u2192 '+fmtDM(cust.hold.to)+').\n\nA delivery and a vacation cannot be on the same day.\n\nOK = cancel the vacation and place this order.\nCancel = keep the vacation (order not placed).';if(confirm(msg)){_vacCancelHold(cust.id);delete cust.hold;return true;}return false;}
// Direction 1 (range): placing a period order over [from,to]. true=proceed, false=abort.
function guardRangeVsVacation(cust,from,to){if(!cust||!cust.hold||!cust.hold.from||!cust.hold.to)return true;if(cust.hold.to<from||cust.hold.from>to)return true;var msg='\u26a0\ufe0f '+(cust.name||'This customer')+' is on vacation ('+fmtDM(cust.hold.from)+' \u2192 '+fmtDM(cust.hold.to)+'), which overlaps these order days.\n\nA delivery and a vacation cannot be on the same day.\n\nOK = cancel the vacation and set the order.\nCancel = keep the vacation (order not set).';if(confirm(msg)){_vacCancelHold(cust.id);delete cust.hold;return true;}return false;}
// Direction 2: setting vacation [from,to] for a customer. true=proceed, false=abort.
function guardVacationVsOrders(cid,name,from,to){var days=_vacOrderDaysInRange(cid,from,to);if(!days.length)return true;var nice=days.map(function(d){return fmtDM(d);}).join(', ');var msg='\u26a0\ufe0f '+(name||'This customer')+' has special order(s) on: '+nice+' inside this vacation.\n\nA delivery and a vacation cannot be on the same day.\n\nOK = set the vacation and REMOVE those orders.\nCancel = keep the orders (vacation not set).';if(confirm(msg)){_vacClearOrderDays(cid,days);return true;}return false;}
// v15.10: What qty does customer return to AFTER a period? (respects pending ONWARDS change)
function backQty(c){
  if(c.pendingQty&&c.periodQty&&c.periodQty.to>=c.pendingQty.from)return c.pendingQty.qty;
  return parseFloat(c.litres)||1;
}
// v15.11: Human date "13 Jun" + real onwards start (period wins overlapping days)
function fmtDM(k){const d=new Date(k+'T00:00:00');return d.toLocaleDateString('en-IN',{day:'numeric',month:'short'});}
function onwardsFrom(c){
  if(c.pendingQty&&c.periodQty&&c.periodQty.to>=c.pendingQty.from){
    const d=new Date(c.periodQty.to+'T00:00:00');d.setDate(d.getDate()+1);return dKey(d);
  }
  return c.pendingQty?c.pendingQty.from:'';
}
// v15.14: Auto-cleanup - phone keeps ~3 months of day data; older removed from PHONE only.
// Cloud (Firebase) copy stays forever; Bill tab re-downloads any old month on demand (v13 fetch).
function autoCleanup(){
  try{
    const last=localStorage.getItem('cmo_lastCleanup');
    const today=dKey();
    if(last===today.slice(0,7))return; // run once per month
    const cut=new Date();cut.setMonth(cut.getMonth()-2);cut.setDate(1);
    const cutKey=dKey(cut); // first day of 2 months ago - keep from here
    const all=JSON.parse(localStorage.getItem('cmo_days')||'{}');
    let removed=0;
    Object.keys(all).forEach(k=>{if(k<cutKey){delete all[k];removed++;}});
    if(removed>0)localStorage.setItem('cmo_days',JSON.stringify(all));
    // also clear old handover keys
    for(let i=localStorage.length-1;i>=0;i--){
      const key=localStorage.key(i);
      if(key&&key.startsWith('handover_')){
        const dPart=key.slice(9,19);
        if(dPart<cutKey)localStorage.removeItem(key);
      }
    }
    localStorage.setItem('cmo_lastCleanup',today.slice(0,7));
    if(removed>0)console.log('Cleanup: removed '+removed+' old days from phone (cloud copy safe)');
  }catch(e){console.log('cleanup:',e);}
}
// v16: ONE DAY = ONE QUANTITY. Reset a customer's day-range back to normal defaults.
function resetCustDays(me,from,to){
  const {cowDefault:cdf,bufDefault:bdf}=getCustDefaults(me);
  let d=new Date(from+'T00:00:00');const end=new Date(to+'T00:00:00');
  while(d<=end){
    const k=dKey(d);let dd2=DB.getDayData(k);
    if(dd2[me.id]){
      dd2[me.id].cowQty=cdf;dd2[me.id].bufQty=bdf;dd2[me.id].qty=cdf+bdf;
      const hasExtras=dd2[me.id].extraOrders&&Object.values(dd2[me.id].extraOrders).some(v=>v);
      if(!hasExtras)dd2[me.id].custChanged=false;
      DB.setDayData(k,dd2);
    }
    d.setDate(d.getDate()+1);
  }
}
function processHolds(){
  const list=DB.customers;let changed=false;const today=dKey();
  list.forEach(c=>{
    if(c.hold&&c.hold.to&&today>c.hold.to){delete c.hold;delete c.holdNotified;changed=true;}
    if(c.periodQty&&today>c.periodQty.to){delete c.periodQty;changed=true;} // v15.9
    if(c.hold&&today===c.hold.to&&c.holdNotified!==c.hold.to){
      c.holdNotified=c.hold.to;changed=true;
      fSet('adminNotifs','latest',{msg:'⏰ '+c.name+"'s hold ends today — call to confirm they're back!",time:new Date().toISOString(),read:false});
      fSet('deliveryNotifs',c.id,{body:'🏖️ Your milk delivery resumes tomorrow!',read:false,ts:Date.now()});
    }
  });
  if(changed)DB.setCustomers(list);
}
// v14.6: Apply pending quantity changes when their date arrives (uses one list - no copy trap)
function applyPendingQty(){
  const list=DB.customers;let changed=false;const today=dKey();
  list.forEach(c=>{
    if(c.pendingQty&&today>=c.pendingQty.from){
      c.lastQtyChange={old:parseFloat(c.litres)||1,qty:c.pendingQty.qty,on:c.pendingQty.from}; // v14.7: for agent badge
      c.litres=c.pendingQty.qty;delete c.pendingQty;changed=true;
    }
    // v14.7: remove badge info after 3 days
    if(c.lastQtyChange&&(new Date(today)-new Date(c.lastQtyChange.on))/86400000>3){delete c.lastQtyChange;changed=true;}
  });
  if(changed)DB.setCustomers(list);
}
// ===== TODAY =====
// ===== v19: Dashboard Live Location + Call Agent (ADMIN ONLY) =====
// Uses ONE guarded listener for the whole session — does NOT leak (golden rule: listener safety).
window._boyLoc = window._boyLoc || null;
window._boyLocListening = window._boyLocListening || false;
function paintDashTrack(){
  const box=document.getElementById('dashLiveTrack');
  if(!box)return;
  if(role!=='admin'){box.innerHTML='';return;}
  const d=window._boyLoc;
  let statusHtml,mapsBtn='';
  if(!d||!d.active){
    statusHtml='🔴 Location sharing OFF';
  }else{
    const mins=Math.floor((Date.now()-new Date(d.updated).getTime())/60000);
    statusHtml='🟢 Active • '+(mins<1?'Just now':mins+' min ago');
    if(d.lat)mapsBtn='<a href="https://maps.google.com/?q='+d.lat+','+d.lng+'" target="_blank" style="text-decoration:none;"><button class="btn-sm" style="background:rgba(255,255,255,0.22);color:white;border:1px solid rgba(255,255,255,0.45);margin-top:8px;">📍 Open Maps</button></a>';
  }
  box.innerHTML='<div class="card" style="background:linear-gradient(135deg,#1A5FA0,#134880);color:white;margin-bottom:10px;">'+
    '<div style="font-size:14px;font-weight:bold;">📍 Agent Location</div>'+
    '<div style="font-size:12px;opacity:0.9;margin-top:4px;">'+statusHtml+'</div>'+
    mapsBtn+
    '<div style="display:flex;gap:8px;margin-top:10px;">'+
      '<button class="btn-sm" id="dashReqLoc" style="flex:1;background:rgba(255,255,255,0.22);color:white;border:1px solid rgba(255,255,255,0.45);">📍 Request Location</button>'+
      '<button class="btn-sm" id="dashCallAgent" style="flex:1;background:rgba(255,255,255,0.22);color:white;border:1px solid rgba(255,255,255,0.45);">🚴 Call Agent</button>'+
    '</div>'+
    '<div id="locReqStatus" style="font-size:13px;font-weight:bold;color:#fff;text-align:center;max-height:0;overflow:hidden;transition:all .2s;"></div>'+
  '</div>';
  const cb=document.getElementById('dashCallAgent');
  if(cb)cb.addEventListener('click',()=>callNo('boy'));
  const rq=document.getElementById('dashReqLoc');
  if(rq)rq.addEventListener('click',function(){
    try{fSet('tracking','locationRequest',{by:whoAmI(),at:new Date().toISOString()});}catch(e){}
    var t=new Date().toLocaleTimeString('en-IN',{hour:'2-digit',minute:'2-digit'});
    var st=document.getElementById('locReqStatus');
    if(st){st.style.maxHeight='70px';st.style.padding='10px';st.style.marginTop='8px';st.style.background='rgba(255,255,255,0.18)';st.style.borderRadius='8px';st.innerHTML='✅ Location request sent at '+t+'<br><span style="font-weight:normal;opacity:0.9;">Waiting for him to turn ON location…</span>';}
    rq.textContent='✅ Request Sent';
    setTimeout(function(){if(rq)rq.textContent='📍 Request Location';},4000);
  });
}
function ensureBoyLocListener(){
  if(window._boyLocListening)return;
  window._boyLocListening=true;
  fGet('tracking','boyLocation').then(d=>{window._boyLoc=d||{active:false};paintDashTrack();});
  if(fbOK&&db){
    db.collection('tracking').doc('boyLocation').onSnapshot(snap=>{
      if(snap.exists){window._boyLoc=snap.data();paintDashTrack();}
    });
  }
}
function renderDashTrack(){
  const b=document.getElementById('dashLiveTrack');
  if(role!=='admin'){if(b)b.innerHTML='';return;}
  ensureBoyLocListener();
  paintDashTrack();
}
// ===== v19.1: Admin -> Agent "Request Location" signal (no call needed) =====
window._locReqListening = window._locReqListening || false;
// v19.3: alert sound (works while app is open; audio unlocked on first tap)
let _alertCtx=null;
function _unlockAlertAudio(){try{if(!_alertCtx)_alertCtx=new (window.AudioContext||window.webkitAudioContext)();if(_alertCtx.state==='suspended')_alertCtx.resume();}catch(e){}}
document.addEventListener('touchstart',_unlockAlertAudio,true);
document.addEventListener('click',_unlockAlertAudio,true);
function playAlertSound(){
  try{
    if(!_alertCtx)_alertCtx=new (window.AudioContext||window.webkitAudioContext)();
    if(_alertCtx.state==='suspended')_alertCtx.resume();
    const ctx=_alertCtx;
    const beep=(freq,start,dur)=>{const o=ctx.createOscillator(),g=ctx.createGain();o.type='sine';o.frequency.value=freq;o.connect(g);g.connect(ctx.destination);const t=ctx.currentTime+start;g.gain.setValueAtTime(0.0001,t);g.gain.exponentialRampToValueAtTime(0.5,t+0.02);g.gain.exponentialRampToValueAtTime(0.0001,t+dur);o.start(t);o.stop(t+dur+0.02);};
    beep(880,0,0.25);beep(1040,0.28,0.25);beep(880,0.56,0.32);
  }catch(e){}
}
function showLocReqBanner(by){
  let b=document.getElementById('locReqBanner');
  if(!b){b=document.createElement('div');b.id='locReqBanner';document.body.appendChild(b);}
  b.style.cssText='position:fixed;top:0;left:0;right:0;z-index:99999;background:#1A5FA0;color:#fff;padding:12px 14px;box-shadow:0 2px 10px rgba(0,0,0,0.35);';
  b.innerHTML='<div style="font-size:14px;font-weight:bold;margin-bottom:8px;">📍 '+(by||'Owner')+' needs your location — please turn it ON</div>'+
    '<button id="locReqOn" style="width:100%;background:#fff;color:#1A5FA0;border:none;border-radius:8px;padding:12px;font-weight:bold;font-size:15px;">✅ Turn ON Location</button>';
  document.getElementById('locReqOn').onclick=function(){
    localStorage.setItem('loc_active','1');
    startBoyLoc();
    const chk=document.getElementById('locChk');if(chk)chk.checked=true;
    b.remove();
  };
}
function onLocReq(data){
  if(role!=='agent'||!data||!data.at)return;
  const seen=localStorage.getItem('loc_req_seen')||'';
  if(data.at===seen)return;
  localStorage.setItem('loc_req_seen',data.at);
  const ageMin=(Date.now()-new Date(data.at).getTime())/60000;
  if(ageMin>10)return; // ignore stale requests on app load
  showLocReqBanner(data.by);
  playAlertSound(); // v19.3
  if(navigator.vibrate){try{navigator.vibrate([300,150,300,150,300]);}catch(e){}}
}
function ensureLocReqListener(){
  if(window._locReqListening)return;
  window._locReqListening=true;
  if(fbOK&&db){
    db.collection('tracking').doc('locationRequest').onSnapshot(snap=>{if(snap.exists)onLocReq(snap.data());});
  }
}
// v21.2: Extra Orders Handover — auto-sum each extra product from the day's customer orders, show TOTAL (all routes) + per-route circles. Read-only; no typing.
function renderExtraHandover(){
  var body=document.getElementById('extraHandoverBody'); if(!body)return;
  var milkIds=['cow_milk','buf_milk','cm','bm'];
  var prods=(DB.products||[]).filter(function(p){return p.active&&milkIds.indexOf(p.id)<0;});
  var dd=DB.getDayData(viewDate)||{};
  var totals={}, perRoute={};
  (DB.customers||[]).forEach(function(c){
    var d=dd[c.id]; if(!d||!d.extraOrders)return;
    Object.keys(d.extraOrders).forEach(function(name){
      var q=parseFloat(d.extraOrders[name])||0; if(q<=0)return;
      totals[name]=(totals[name]||0)+q;
      var r=c.route||'';
      if(!perRoute[r])perRoute[r]={};
      perRoute[r][name]=(perRoute[r][name]||0)+q;
    });
  });
  function circles(map){
    var items=prods.filter(function(p){return (map[p.name]||0)>0;});
    if(!items.length)return '<div style="color:#aaa;font-size:13px;padding:4px 0;">No extra orders</div>';
    return '<div style="display:flex;flex-wrap:wrap;gap:8px;">'+items.map(function(p){
      var q=Math.round((map[p.name])*100)/100;
      return '<div style="background:#fff;border:2px solid #C4A8E8;border-radius:12px;padding:8px 12px;text-align:center;min-width:84px;"><div style="font-size:22px;">'+(p.icon||'📦')+'</div><div style="font-weight:800;font-size:19px;color:#6B3FA0;">'+q+(p.unit?' '+p.unit:'')+'</div><div style="font-size:12px;color:#888;">'+p.name+'</div></div>';
    }).join('')+'</div>';
  }
  var anyTotal=Object.keys(totals).some(function(k){return totals[k]>0;});
  if(!anyTotal){body.innerHTML='<div style="text-align:center;color:#888;font-size:13px;padding:10px 0;">No extra orders for '+fmtShort(viewDate)+'.</div>';return;}
  var html='<div style="font-size:13px;font-weight:800;color:#6B3FA0;margin-bottom:6px;">📦 TOTAL (all routes)</div>'+circles(totals);
  var agents=(DB.settings.agents||[]);
  var hasRoute=false;
  var rhtml='';
  agents.forEach(function(a){
    if(!perRoute[a.id]||!Object.keys(perRoute[a.id]).length)return;
    hasRoute=true;
    rhtml+='<div style="font-size:13px;font-weight:800;color:#6B3FA0;margin:10px 0 6px;">'+a.name+(a.agentName?' ('+a.agentName+')':'')+'</div>'+circles(perRoute[a.id]);
  });
  if(perRoute['']&&Object.keys(perRoute['']).length){hasRoute=true;rhtml+='<div style="font-size:13px;font-weight:800;color:#999;margin:10px 0 6px;">No route assigned</div>'+circles(perRoute['']);}
  if(hasRoute){html+='<div style="border-top:1px dashed #C4B0E8;margin:12px 0;"></div>'+rhtml;}
  body.innerHTML=html;
}
// v21.12: shared products×4 table builder — used by BOTH Handover Tables and the Consolidated summary so they always match.
// v23.3: total litres the admin typed as "loaded" (handover) for a route, or all routes if routeId is null/blank.
// v23.10: per-product handover storage. Key = handover_v2_{date}_{routeId}. Value = JSON {productId: qty}.
// Backward compat: if v2 key absent, reads old _cow_/_buf_ keys and migrates.
function getHandoverMap(routeId){
  var k='handover_v2_'+viewDate+'_'+(routeId||'ALL');
  var s=localStorage.getItem(k);
  if(s){try{return JSON.parse(s);}catch(e){}}
  // migrate old format
  var old_c=parseFloat(localStorage.getItem('handover_'+viewDate+'_cow_'+(routeId||'')))||0;
  var old_b=parseFloat(localStorage.getItem('handover_'+viewDate+'_buf_'+(routeId||'')))||0;
  if(old_c||old_b){var m={};if(old_c)m['cow_milk']=old_c;if(old_b)m['buf_milk']=old_b;return m;}
  return {};
}
function setHandoverMap(routeId,map){
  var k='handover_v2_'+viewDate+'_'+(routeId||'ALL');
  localStorage.setItem(k,JSON.stringify(map));
  fSet('handover',viewDate+'_'+(routeId||'ALL'),{map:map,date:viewDate,route:routeId||'all'});
}
function clearHandoverMap(routeId){
  localStorage.removeItem('handover_v2_'+viewDate+'_'+(routeId||'ALL'));
  localStorage.removeItem('handover_'+viewDate+'_cow_'+(routeId||''));
  localStorage.removeItem('handover_'+viewDate+'_buf_'+(routeId||''));
  fSet('handover',viewDate+'_'+(routeId||'ALL'),{map:{},date:viewDate,route:routeId||'all'});
}
function loadedHandover(routeId){
  // summary path: combine all routes
  if(!routeId){
    var cow=0,buf=0;
    (DB.settings.agents||[]).forEach(function(a){
      var m=getHandoverMap(a.id);cow+=(m['cow_milk']||m['cm']||0);buf+=(m['buf_milk']||m['bm']||0);
    });
    return {cow:Math.round(cow*100)/100,buf:Math.round(buf*100)/100};
  }
  var m=getHandoverMap(routeId);
  return {cow:m['cow_milk']||m['cm']||0,buf:m['buf_milk']||m['bm']||0};
}
// v23.10: render one input box per product column inside the handover area.
function renderHandoverBoxes(custs){
  var area=document.getElementById('handoverBoxesArea');
  var hw=document.getElementById('handoverEditWrap');
  if(!area||!hw)return;
  if(role!=='admin'){hw.style.display='none';return;}
  hw.style.display='block';
  // don't re-render while the user is typing in one of the boxes
  if(area.querySelector('input:focus'))return;
  var hmap=getHandoverMap(selectedRouteId);
  var dd2=DB.getDayData(viewDate)||{};
  var prods2=(DB.products||[]).filter(function(p){return p.active;});
  var alwaysCol2=function(p){return p.id==='cow_milk'||p.id==='cm'||p.id==='buf_milk'||p.id==='bm';};
  // v23.11: include products from hmap (even with no orders) so stock items appear as boxes + columns
  if(!window._extraHoPids)window._extraHoPids={};
  var extraPids=window._extraHoPids[selectedRouteId]||[];
  var cols2=prods2.filter(function(p){
    if(alwaysCol2(p))return true;
    if(hmap[p.id]!==undefined)return true;
    if(extraPids.indexOf(p.id)>=0)return true;
    return custs.some(function(c){var d=dd2[c.id];return d&&d.extraOrders&&parseFloat(d.extraOrders[p.name])>0;});
  });
  var borderColors2={'cow_milk':'#F5C842','cm':'#F5C842','buf_milk':'#9BA8E8','bm':'#9BA8E8'};
  var html2=cols2.map(function(p){
    var saved=hmap[p.id];
    var ord=0;
    custs.forEach(function(c){
      var d=dd2[c.id];var def=getCustDefaults(c);
      if(p.id==='cow_milk'||p.id==='cm'){var hs=d&&d.cowQty!==undefined;ord+=hs?(parseFloat(d.cowQty)||0):((d&&d.qty!==undefined&&c.milkType==='cow')?(parseFloat(d.qty)||0):(parseFloat(def.cowDefault)||0));}
      else if(p.id==='buf_milk'||p.id==='bm'){var hs2=d&&d.bufQty!==undefined;ord+=hs2?(parseFloat(d.bufQty)||0):((d&&d.qty!==undefined&&c.milkType==='buffalo')?(parseFloat(d.qty)||0):(parseFloat(def.bufDefault)||0));}
      else{if(d&&d.extraOrders)ord+=parseFloat(d.extraOrders[p.name])||0;}
    });
    ord=Math.round(ord*100)/100;
    var val=saved!==undefined?saved:(extraPids.indexOf(p.id)>=0?'':ord);
    var bc=borderColors2[p.id]||'#B8D4B8';
    return '<div style="flex:1;min-width:70px;max-width:110px;"><label style="font-size:10px;color:#888;display:block;margin-bottom:2px;">'+(p.icon||'')+'&nbsp;'+p.name+(p.unit?' ('+p.unit+')':'')+'</label>'
      +'<input type="number" class="ho-box" data-pid="'+p.id+'" value="'+(val||'')+'" step="0.5" min="0" placeholder="'+ord+'" style="width:100%;padding:8px 4px;border:2px solid '+bc+';border-radius:8px;font-size:15px;font-weight:bold;text-align:center;box-sizing:border-box;"></div>';
  }).join('');
  // ➕ Add product picker — shows products not already in the boxes
  var shownIds=cols2.map(function(p){return p.id;});
  var remaining2=prods2.filter(function(p){return shownIds.indexOf(p.id)<0;});
  var pickerHTML='';
  if(remaining2.length){
    pickerHTML='<div style="margin-top:8px;">'
      +'<button id="hoAddBtn" style="background:#E8F6EE;color:#1F7244;border:1px solid #A8D5B8;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:bold;width:100%;">➕ Add product to handover</button>'
      +'<div id="hoAddPicker" style="display:none;margin-top:6px;background:#F0F8FF;border:1px solid #9BA8E8;border-radius:8px;padding:8px;">'
      +'<div style="font-size:11px;color:#555;margin-bottom:6px;font-weight:bold;">Which product?</div>'
      +'<select id="hoAddSelect" style="width:100%;padding:8px;border-radius:6px;border:1px solid #ccc;font-size:13px;margin-bottom:6px;"><option value="">— Pick product —</option>'
      +remaining2.map(function(p){return '<option value="'+p.id+'">'+(p.icon||'')+'  '+p.name+(p.unit?' ('+p.unit+')':'')+'</option>';}).join('')
      +'</select>'
      +'<div style="display:flex;gap:6px;">'
      +'<input type="number" id="hoAddQty" placeholder="qty" step="0.5" min="0" style="flex:1;padding:8px;border-radius:6px;border:1px solid #ccc;font-size:14px;font-weight:bold;text-align:center;">'
      +'<button id="hoAddConfirm" style="flex:1;background:#1F7244;color:#fff;border:none;border-radius:6px;padding:8px;font-size:13px;font-weight:bold;">✅ Add</button>'
      +'<button id="hoAddCancel" style="background:#eee;color:#666;border:none;border-radius:6px;padding:8px;font-size:13px;">✖</button>'
      +'</div></div></div>';
  }
  area.innerHTML=html2+pickerHTML;
  // wire ➕ button
  var addBtn=document.getElementById('hoAddBtn');
  if(addBtn)addBtn.addEventListener('click',function(){var pk=document.getElementById('hoAddPicker');pk.style.display=pk.style.display==='none'?'block':'none';});
  var cancelBtn=document.getElementById('hoAddCancel');
  if(cancelBtn)cancelBtn.addEventListener('click',function(){document.getElementById('hoAddPicker').style.display='none';});
  var confirmBtn=document.getElementById('hoAddConfirm');
  if(confirmBtn)confirmBtn.addEventListener('click',function(){
    var sel=document.getElementById('hoAddSelect');var pid=sel.value;
    if(!pid){alert('Please pick a product first.');return;}
    if(!window._extraHoPids)window._extraHoPids={};
    if(!window._extraHoPids[selectedRouteId])window._extraHoPids[selectedRouteId]=[];
    if(window._extraHoPids[selectedRouteId].indexOf(pid)<0)window._extraHoPids[selectedRouteId].push(pid);
    // pre-save the qty if entered
    var qty=parseFloat(document.getElementById('hoAddQty').value)||0;
    if(qty>0){var m=getHandoverMap(selectedRouteId);m[pid]=qty;setHandoverMap(selectedRouteId,m);}
    renderHandoverBoxes(custs);
  });
}
// v23.9: total ordered Cow / Buf litres for a customer list (same split logic as qtyFor) — used to pre-fill the handover boxes.
function orderedCowBuf(custs){
  var dd=DB.getDayData(viewDate)||{};var cow=0,buf=0;
  (custs||[]).forEach(function(c){
    var d=dd[c.id];var def=getCustDefaults(c);
    var hasSplit=d&&(d.cowQty!==undefined||d.bufQty!==undefined);
    var cq=hasSplit?(parseFloat(d.cowQty)||0):((d&&d.qty!==undefined&&c.milkType==='cow')?(parseFloat(d.qty)||0):(parseFloat(def.cowDefault)||0));
    var bq=hasSplit?(parseFloat(d.bufQty)||0):((d&&d.qty!==undefined&&c.milkType==='buffalo')?(parseFloat(d.qty)||0):(parseFloat(def.bufDefault)||0));
    cow+=cq;buf+=bq;
  });
  return {cow:Math.round(cow*100)/100,buf:Math.round(buf*100)/100};
}
// opts.loaded = {cow,buf} typed-handover litres. When given (dashboard tables), Handover row shows the
// loaded number (ordered shown small if different) and Undelivered = loaded - delivered. When absent
// (route page), the original behaviour is kept untouched.
function buildHandoverTableHTML(custs,opts){
  var dd=DB.getDayData(viewDate)||{};
  var isToday=(viewDate===dKey());
  var prods=(DB.products||[]).filter(function(p){return p.active;});
  function qtyFor(c,p){
    var d=dd[c.id];
    if(p.id==='cow_milk'||p.id==='cm'||p.id==='buf_milk'||p.id==='bm'){
      // v23.8: use the proper cow/buf split (cowQty/bufQty) and the customer's defaults — same logic as the rest of the app.
      var def=getCustDefaults(c);
      var hasSplit=d&&(d.cowQty!==undefined||d.bufQty!==undefined);
      if(p.id==='cow_milk'||p.id==='cm'){
        if(hasSplit)return parseFloat(d.cowQty)||0;
        if(d&&d.qty!==undefined&&c.milkType==='cow')return parseFloat(d.qty)||0;
        return parseFloat(def.cowDefault)||0;
      }
      if(hasSplit)return parseFloat(d.bufQty)||0;
      if(d&&d.qty!==undefined&&c.milkType==='buffalo')return parseFloat(d.qty)||0;
      return parseFloat(def.bufDefault)||0;
    }
    if(!d||!d.extraOrders)return 0; return parseFloat(d.extraOrders[p.name])||0;
  }
  function delivered(c){return !!(dd[c.id]&&dd[c.id].delivered);}
  // v23.11: cols also include products from handoverMap (even with no orders today — e.g. stock agent carries)
  var alwaysCol=function(p){return p.id==='cow_milk'||p.id==='cm'||p.id==='buf_milk'||p.id==='bm';};
  var cols=prods.filter(function(p){
    return alwaysCol(p)
      ||custs.some(function(c){return qtyFor(c,p)>0;})
      ||(opts&&opts.handoverMap&&opts.handoverMap[p.id]!==undefined);
  });
  if(!cols.length)return '<div style="color:#aaa;font-size:13px;padding:6px 0;">No orders</div>';
  var H={},D={};
  cols.forEach(function(p){var h=0,d=0;custs.forEach(function(c){var q=qtyFor(c,p);if(q<=0)return;h+=q;if(delivered(c))d+=q;});H[p.id]=Math.round(h*100)/100;D[p.id]=Math.round(d*100)/100;});
  function pend(p){return Math.max(0,Math.round(((H[p.id]||0)-(D[p.id]||0))*100)/100);}
  function row(label,fn,col){return '<tr><td style="text-align:left;font-weight:700;color:'+col+';padding:7px 8px;white-space:nowrap;border-bottom:1px solid #eee;background:#fff;">'+label+'</td>'+cols.map(function(p){var v=fn(p);return '<td style="text-align:center;padding:7px 8px;font-weight:700;color:#333;border-bottom:1px solid #eee;background:#fff;">'+(v?v:'—')+'</td>';}).join('')+'</tr>';}
  var head='<tr><th style="text-align:left;padding:6px 8px;border-bottom:2px solid #C4A8E8;background:#fff;"></th>'+cols.map(function(p){return '<th style="text-align:center;padding:6px 8px;font-size:12px;color:#333;white-space:nowrap;border-bottom:2px solid #C4A8E8;line-height:1.3;background:#fff;">'+(p.icon||'📦')+'<br>'+p.name+(p.unit?'<br><span style="font-size:10px;color:#999;">('+p.unit+')</span>':'')+'</th>';}).join('')+'</tr>';
  var rows;
  if(opts&&opts.loaded){
    // v23.10: per-product handoverMap. loadedFor(p) reads the map (Cow/Buf + all extras).
    var hmap2=opts.handoverMap||{};
    var isCowP=function(p){return p.id==='cow_milk'||p.id==='cm';};
    var isBufP=function(p){return p.id==='buf_milk'||p.id==='bm';};
    var loadedFor=function(p){
      if(hmap2[p.id]!==undefined)return hmap2[p.id];
      // fallback: old loaded.cow/buf
      if(isCowP(p)&&opts.loaded.cow>0)return opts.loaded.cow;
      if(isBufP(p)&&opts.loaded.buf>0)return opts.loaded.buf;
      return H[p.id]||0;
    };
    var cell=function(html,clr){return '<td style="text-align:center;padding:7px 8px;font-weight:700;color:'+(clr||'#333')+';border-bottom:1px solid #eee;background:#fff;">'+html+'</td>';};
    var rowL=function(label,col,fn){return '<tr><td style="text-align:left;font-weight:700;color:'+col+';padding:7px 8px;white-space:nowrap;border-bottom:1px solid #eee;background:#fff;">'+label+'</td>'+cols.map(function(p){return fn(p,col);}).join('')+'</tr>';};
    var handoverCell=function(p,clr){
      var ld=loadedFor(p),ord=H[p.id]||0;
      var sub=(ld&&Math.abs(ld-ord)>0.001)?('<div style="font-size:10px;color:#999;font-weight:600;margin-top:2px;">ordered '+ord+'</div>'):'';
      return cell((ld?ld:'—')+sub,clr);
    };
    rows=rowL('Handover','#E91E8C',handoverCell)
        +rowL('To Deliver','#1A5FA0',function(p,clr){return cell(pend(p)||'—',clr);})
        +rowL('Delivered','#1F7244',function(p,clr){return cell(D[p.id]||'0',clr);})
        +rowL('Undelivered','#C0392B',function(p,clr){var u=Math.max(0,Math.round((loadedFor(p)-(D[p.id]||0))*100)/100);return cell(u||'0',clr);});
  }else{
    rows=row('Handover',function(p){return H[p.id]||0;},'#E8621A')+row('To Deliver',function(p){return isToday?pend(p):0;},'#1A5FA0')+row('Delivered',function(p){return D[p.id]||0;},'#1F7244')+row('Undelivered',function(p){return isToday?0:pend(p);},'#C0392B');
  }
  return '<div style="overflow-x:auto;-webkit-overflow-scrolling:touch;"><table style="border-collapse:collapse;width:100%;font-size:14px;background:#fff;border-radius:8px;overflow:hidden;">'+head+rows+'</table></div>';
}
// v21.3: Handover Tables — per route + TOTAL (admin); own route (agent).
function renderHandoverTables(){
  var body=document.getElementById('extraHandoverBody'); if(!body)return;
  var agents=(DB.settings.agents||[]);
  // v23.5: agent sees exactly ONE Stats table for his OWN route — no summary, no all-routes total.
  var ehPill=document.getElementById('accExtraHandover');
  if(role==='agent'){
    var rc=(DB.customers||[]).filter(function(c){return c.route===agentId;});
    var ag=agents.find(function(a){return a.id===agentId;});
    if(ehPill){var hA=ehPill.querySelector('.acc-head span');if(hA)hA.textContent='📊 Stats — '+(ag?ag.name:'My Route');}
    var ah=buildHandoverTableHTML(rc,{loaded:loadedHandover(agentId)});
    if(body._lastHTML!==ah){body._lastHTML=ah;body.innerHTML=ah;}
    return;
  }
  if(ehPill){var hAd=ehPill.querySelector('.acc-head span');if(hAd)hAd.textContent='📦 Handover Tables';}
  var html='<div style="font-size:14px;font-weight:800;color:#6B3FA0;margin:4px 0 6px;">📊 TOTAL — all routes</div>'+buildHandoverTableHTML(DB.customers||[]);
  agents.forEach(function(a){
    var rc=(DB.customers||[]).filter(function(c){return c.route===a.id;});
    if(!rc.length)return;
    html+='<div style="border-top:1px dashed #C4B0E8;margin:14px 0;"></div><div style="font-size:14px;font-weight:800;color:#6B3FA0;margin:4px 0 6px;">🚴 '+a.name+(a.agentName?' ('+a.agentName+')':'')+'</div>'+buildHandoverTableHTML(rc);
  });
  if(body._lastHTML!==html){body._lastHTML=html;body.innerHTML=html;}
}
// v21.9: make admin dashboard sections 3-8 collapsible (soft colors, baby pink for Mark Deliveries). Wraps existing containers into accordions once.
function _wrapAcc(el,title,bg,fg,open){
  if(!el||el.dataset.wrapped)return;
  var acc=document.createElement('div');acc.className='acc'+(open?' open':'');acc.style.marginBottom='8px';
  var head=document.createElement('div');head.className='acc-head';head.style.background=bg;head.style.color=fg;
  head.innerHTML='<span>'+title+'</span><span class="acc-arrow" style="color:'+fg+';">▼</span>';
  var body=document.createElement('div');body.className='acc-body';
  el.parentNode.insertBefore(acc,el);acc.appendChild(head);acc.appendChild(body);body.appendChild(el);
  el.dataset.wrapped='1';
}
function setupDashCollapsibles(){
  if(window._dashCollapsed)return;
  var md=document.getElementById('markDelivCard'); if(!md)return;
  window._dashCollapsed=true;
  _wrapAcc(document.getElementById('qtyChangesCard'),'🔔 Quantity Change Alert','#EDE3F7','#5B2D91',false);
  _wrapAcc(document.getElementById('notifBar'),'🔔 Notifications','#FFE6DE','#B5532E',false);
  _wrapAcc(md,'✅ Mark Deliveries','#FADADD','#8A3A4E',true);
  _wrapAcc(document.getElementById('tomorrowOrders'),"🛒 Tomorrow's Special Orders",'#FFF1D6','#8A6D1E',false);
  _wrapAcc(document.getElementById('adminAdvOrders'),'📋 Advance Orders','#E6F0FB','#1A5FA0',false);
  _wrapAcc(document.getElementById('dashStats'),'📊 Stats','#E0F0E6','#2A6E48',false);
  _wrapAcc(document.getElementById('consolidatedSummary'),'📊 Summary — All Routes','#DCEAF7','#245A86',false);
}
function renderToday(){
  if(role==='admin')setupDashCollapsibles();
  // v25: when admin, re-apply ⋮ menu home/section visibility after any re-render
  // (sync, etc.) so a focused section doesn't snap back to showing everything.
  if(role==='admin'&&window._adminMenuShowHome){
    var bbAd=document.getElementById('adminMenuBack');
    if(!bbAd||bbAd.style.display==='none'){window._adminMenuShowHome();}
  }
  applyPendingQty(); // v14.6
  processHolds(); // v15.8
  renderDashTrack(); // v19: dashboard live location + call agent (admin only)
  // v14.7: Admin sees ALL upcoming quantity changes - cannot be missed
  const qcc=document.getElementById('qtyChangesCard');
  if(qcc){
    if(role==='admin'){
      const cr=selectedRouteId;
      const rows=[];
      DB.customers.filter(c=>c.pendingQty&&c.route===cr).forEach(c=>rows.push(`🥛 ${c.name}: ${parseFloat(c.litres)||1}L → <span style="color:#5B2D91;">${c.pendingQty.qty}L</span> from ${fmtDM(onwardsFrom(c))} ONWARDS`));
      DB.customers.filter(c=>c.periodQty&&c.route===cr).forEach(c=>rows.push(`🥛 ${c.name}: <span style="color:#5B2D91;">${c.periodQty.qty}L</span> ONLY ${fmtDM(c.periodQty.from)}→${fmtDM(c.periodQty.to)} (then back ${backQty(c)}L)`));
      DB.customers.filter(c=>c.hold&&c.hold.to>=dKey()&&c.route===cr).forEach(c=>{const r=new Date(c.hold.to+'T00:00:00');r.setDate(r.getDate()+1);rows.push(`⏸️ ${c.name}: vacation ${fmtDM(c.hold.from)}→${fmtDM(c.hold.to)}, resumes ${fmtDM(dKey(r))}`);});
      qcc.innerHTML=rows.length?`<div class="card" style="background:#F0E8FF;border:2px solid #5B2D91;margin-bottom:10px;"><div class="card-title" style="color:#5B2D91;">🔔 Quantity Change Alert (${rows.length})</div>${rows.map(r=>`<div style="font-size:12px;font-weight:bold;padding:4px 0;border-bottom:1px dashed #C4B0E8;color:#3D1F66;">${r}</div>`).join('')}</div>`:'';
    }else{qcc.innerHTML='';}
  }
  // Show route tabs in Dashboard main tab (ADMIN ONLY)
  const routeTabs=document.getElementById('routeTabs');
  if(routeTabs)routeTabs.style.display=(role==='admin')?'block':'none';
  // v19.3: show selected route name in Milk Handover header so admin never loses track when scrolled down
  const mhl=document.getElementById('milkHandoverLbl');
  if(mhl){
    if(role==='admin'){
      const ag=(DB.settings.agents||[]).find(a=>a.id===selectedRouteId);
      mhl.textContent='🥛 Milk Handover'+(ag?' — '+ag.name+(ag.agentName?' ('+ag.agentName+')':''):'');
    }else{mhl.textContent='🥛 Milk Handover';}
  }
  
  renderHandoverTables();applyAgentVis();
  const custs=(role==='admin'?getSelectedAgentCustomers():DB.customers).filter(c=>!isSkipped(c,viewDate)).slice().sort((a,b)=>(parseFloat(a.order)||99999)-(parseFloat(b.order)||99999)); // v13.13 + v15.8: skip held/inactive
  const dd=DB.getDayData(viewDate);
  const isT=viewDate===dKey();
  document.getElementById('todayLbl').textContent='📅 '+fmtShort(viewDate);
  document.getElementById('dayNote').textContent=isT?'Tap ✓ to mark delivered. Change qty from dropdown.':'📅 Editing past day.';
  document.getElementById('dayNote').className='nb '+(isT?'nb-o':'nb-b');
  const ncr=(role==='admin')?selectedRouteId:(role==='agent'?agentId:'');
  const nRoute=n=>{if(n.key){const us=n.key.indexOf('_');const cid=us>=0?n.key.slice(0,us):n.key;const c=DB.customers.find(x=>x.id===cid);return c?(c.route||''):'';}return '';};
  const shown=[];DB.notifs.forEach((n,idx)=>{if(n.r)return;const r=nRoute(n);if(r===ncr||(r===''&&role==='admin'))shown.push({n:n,idx:idx});});
  const nb=document.getElementById('notifBar');
  if(shown.length>0){
    nb.innerHTML=`<div class="notif"><h3>🔔 ${shown.length} Customer Change(s)</h3>${shown.map(o=>`<div style="font-size:14px;padding:6px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #F5C0C0;"><span>⚠️ ${o.n.m} <span style="color:#999;font-size:11px;">${o.n.t}</span></span><button class="btn-sm" style="background:#FDECEA;color:#C0392B;font-size:12px;padding:4px 8px;" data-idx="${o.idx}">✕</button></div>`).join('')}<button class="btn-sm btn-r" id="clearNotifsBtn" style="margin-top:8px;font-size:13px;">✅ Clear All</button></div>`;
  }else nb.innerHTML='';
  const cnb=document.getElementById('clearNotifsBtn');if(cnb)cnb.addEventListener('click',()=>{if(!confirm('Clear ALL notifications?'))return;DB.clearNotifs();buildTabs();renderToday();});
  // Individual clear buttons (v15.19: confirm + optional order cancel)
  nb.querySelectorAll('.btn-sm[data-idx]').forEach(btn=>{
    btn.addEventListener('click',function(){
      const idx=parseInt(this.dataset.idx);
      const n=DB.notifs;const item=n[idx];
      if(!confirm('Remove this notification?'))return;
      if(item&&item.key&&confirm('Also CANCEL the customer\'s order for that date?\n(Milk back to normal, extras removed)')){
        const us=item.key.indexOf('_');
        const cid2=item.key.slice(0,us),dt2=item.key.slice(us+1);
        const cust2=DB.customers.find(x=>x.id===cid2);
        if(cust2){
          let dd3=DB.getDayData(dt2);
          if(dd3[cid2]){
            const {cowDefault:cdf,bufDefault:bdf}=getCustDefaults(cust2);
            dd3[cid2].cowQty=cdf;dd3[cid2].bufQty=bdf;dd3[cid2].qty=cdf+bdf;
            dd3[cid2].extraOrders={};dd3[cid2].custChanged=false;
            DB.setDayData(dt2,dd3);
          }
        }
      }
      n.splice(idx,1);
      localStorage.setItem('cmo_notifs',JSON.stringify(n));
      fSet('data','notifs',{list:n});buildTabs();renderToday();
    });
  });
  custs.forEach(c=>{if(!dd[c.id])dd[c.id]={delivered:false,qty:parseFloat(c.litres)||1};});
  document.getElementById('dashCustCount').textContent='Total Customers: '+custs.length;
  // v23.10: per-product handover map for this route
  var hmap=getHandoverMap(selectedRouteId);
  var routeLoaded=loadedHandover(selectedRouteId);
  const stb=document.getElementById('statsTableBody');
  if(stb){
    const sth=buildHandoverTableHTML(custs,{loaded:routeLoaded,handoverMap:hmap});
    if(stb._lastHTML!==sth){stb._lastHTML=sth;stb.innerHTML=sth;}
  }
  renderHandoverBoxes(custs);
  // v23.3: show the route/agent name on the Stats pill so admin always knows whose numbers these are.
  const dsEl=document.getElementById('dashStats');
  if(dsEl&&dsEl.parentNode&&dsEl.parentNode.parentNode){
    const hd=dsEl.parentNode.parentNode.querySelector('.acc-head span');
    if(hd){const agS=(DB.settings.agents||[]).find(a=>a.id===selectedRouteId);hd.textContent='📊 Stats'+(agS?' — '+agS.name:(selectedRouteId==='__noroute__'?' — 🚩 No Route':''));}
  }
  const hw=document.getElementById('handoverEditWrap');
  if(hw)hw.style.display=role==='admin'?'block':'none';
  // Show admin advance orders panel
  if(role==='admin'){setTimeout(renderAdminAdvOrders,300);renderConsolidatedSummary();}
  
  const list=document.getElementById('delivList');
  if(!custs.length){list.innerHTML='<div class="empty">🥛<br>No customers yet.</div>';return;}
  list.innerHTML='';
  custs.forEach(c=>{
    const d=dd[c.id]||{delivered:false,qty:parseFloat(c.litres)||1};
    const div=document.createElement('div');div.className='di';
    const pInfo=role==='admin'?`<span style="color:#6B3FA0;font-size:10px;font-weight:bold;display:block;text-align:right;">₹${(parseFloat(d.qty)*c.price).toFixed(0)}</span>`:'';
    const chgB=d.custChanged?`<span style="background:#FDECEA;color:#C0392B;font-size:9px;font-weight:bold;padding:1px 5px;border-radius:6px;margin-left:3px;">⚠️Changed</span>`:'';
    const pendB=role==='admin'&&c.pendingQty?`<span style="background:#F0E8FF;color:#5B2D91;border:1px solid #5B2D91;font-size:9px;font-weight:bold;padding:1px 5px;border-radius:6px;margin-left:3px;">🔔 ${c.pendingQty.qty}L from ${fmtDM(onwardsFrom(c))}</span>`:'';
    const tInfo=c.delivTime?`<span style="font-size:9px;color:#D4A017;font-weight:bold;">⏰${fmtTime(c.delivTime)}</span> `:'';
    const qOpts=[0,0.25,0.5,0.75,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5,10,11,12,13,14,15,16,17,18,19,20,25,30,35,40,45,50].map(q=>`<option value="${q}" ${parseFloat(d.qty)===q?'selected':''}>${q===0?'❌No':q+'L'}</option>`).join('');
    // Check if delivery time has passed
    const s=DB.settings;
    const agentForCust=(s.agents||[]).find(a=>a.id===c.route);
    const endTime=agentForCust?.delivEnd||s.delivEnd||'';
    let timeEnded=false;
    if(endTime&&viewDate===dKey()){
      const now=new Date();
      const [eh,em]=endTime.split(':').map(Number);
      const end=new Date();end.setHours(eh,em,0,0);
      if(now>end)timeEnded=true;
    }
    const statusText=d.delivered?'✅ '+(d.delivTime||'')+(d.markedBy?' by '+d.markedBy:''):timeEnded?'❌ Not Delivered':'⏳ Pending';
    const statusClass=d.delivered?'status-ok':timeEnded?'status-pe':'status-pe';
    div.innerHTML=`
      <button class="chk-btn ${d.delivered?'done':''}" data-id="${c.id}">${d.delivered?'✓':''}</button>
      <div class="di-info">
        <div class="di-name">${c.name}${chgB}${pendB}</div>
        <div class="di-addr">📍 ${c.address.substring(0,28)}</div>
        <div>${c.milkType==='buffalo'?'<span style="background:#E8E0FF;color:#5533AA;padding:1px 5px;border-radius:6px;font-size:9px;font-weight:bold;">🐃 Buffalo</span>':'<span style="background:#FFF3CD;color:#8B6914;padding:1px 5px;border-radius:6px;font-size:9px;font-weight:bold;">🐄 Cow</span>'} ${tInfo}</div>
        <div class="di-status ${statusClass}">${statusText}</div>
        ${d.extraOrders&&Object.keys(d.extraOrders).length?'<div style="font-size:10px;color:#6B3FA0;font-weight:bold;">+'+Object.entries(d.extraOrders).map(([k,v])=>v+' '+k).join(', ')+'</div>':''}
      </div>
      <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;">
        <div style="display:flex;align-items:center;gap:7px;">
          <button class="dq-btn" data-id="${c.id}" data-d="-0.25" style="width:30px;height:30px;border-radius:50%;border:2px solid #1A5FA0;background:white;color:#1A5FA0;font-size:16px;font-weight:bold;">−</button>
          <span style="font-size:13px;font-weight:800;color:#1A5FA0;min-width:40px;text-align:center;">${d.qty}L</span>
          <button class="dq-btn" data-id="${c.id}" data-d="0.25" style="width:30px;height:30px;border-radius:50%;border:2px solid #1A5FA0;background:white;color:#1A5FA0;font-size:16px;font-weight:bold;">+</button>
        </div>
        ${pInfo}
        ${role==='admin'?`<button class="qm-btn" data-id="${c.id}" style="background:#F0E8FF;color:#6B3FA0;border:none;border-radius:6px;font-size:10px;padding:2px 6px;font-weight:bold;">🔀 Move</button>`:''}
      </div>`;
    list.appendChild(div);
    div.querySelector('.chk-btn').addEventListener('click',function(){toggleDel(this.dataset.id);});
    div.querySelectorAll('.dq-btn').forEach(b=>b.addEventListener('click',function(){
      const nv=Math.max(0,Math.min(50,Math.round(((parseFloat(d.qty)||0)+parseFloat(this.dataset.d))*100)/100));
      setQty(this.dataset.id,nv);
    }));
    const qmb=div.querySelector('.qm-btn');if(qmb)qmb.addEventListener('click',function(){quickMove(this.dataset.id);});
  });
  
  // Add search functionality
  // v13.12: Dashboard search STICKY - survives refresh
  const applyDashSearch=(term)=>{
    const searchTerm=(term||'').toLowerCase();
    const allCustDivs=document.querySelectorAll('#delivList .di');
    allCustDivs.forEach(div=>{
      const custName=div.querySelector('.di-name')?.textContent.toLowerCase()||'';
      div.style.display=custName.includes(searchTerm)?'flex':'none';
    });
  };
  const searchBox=document.getElementById('dashSearch');
  if(searchBox){
    const savedDS=localStorage.getItem('cmo_dashSearch')||'';
    searchBox.value=savedDS;
    if(savedDS)applyDashSearch(savedDS);
    searchBox.oninput=function(){
      localStorage.setItem('cmo_dashSearch',this.value);
      applyDashSearch(this.value);
    };
  }
}
// v13.4: Who is currently marking (Kavitha/Vardhan/agent name)
function whoAmI(){
  if(role==='admin')return (localStorage.getItem('cmo_adminName')||'Admin').replace(/\s*\(.*\)$/,'');
  if(role==='agent'){const a=getAgentById(agentId);return a?(a.agentName||a.name||'Agent'):'Agent';}
  return 'Customer';
}
function toggleDel(id){
  const c=DB.customers.find(x=>x.id===id);let dd=DB.getDayData(viewDate);  if(!dd[id])dd[id]={delivered:false,qty:parseFloat(c.litres)||1};
  // Confirmation before unticking
  if(dd[id].delivered){
    if(!confirm('Remove delivery mark for '+c.name+'?'))return;
  }
  dd[id].delivered=!dd[id].delivered;
  if(dd[id].delivered){const t=new Date().toLocaleTimeString('en-IN',{hour:'2-digit',minute:'2-digit'});dd[id].delivTime=t;dd[id].markedBy=whoAmI();fSet('deliveryNotifs',id,{body:dd[id].qty+'L delivered at '+t,read:false,ts:Date.now()});}
  else{delete dd[id].delivTime;delete dd[id].markedBy;fSet('deliveryNotifs',id,{body:'',read:true,ts:Date.now()});}
  DB.setDayData(viewDate,dd);renderToday();
}
function setQty(id,val){
  const c=DB.customers.find(x=>x.id===id);let dd=DB.getDayData(viewDate);
  if(!dd[id])dd[id]={delivered:false,qty:parseFloat(c.litres)||1};
  dd[id].qty=parseFloat(val);DB.setDayData(viewDate,dd);renderToday();
}
function saveAgentTime(agId,type,val){
  const s=DB.settings;
  const a=s.agents.find(x=>x.id===agId);
  if(!a)return;
  if(type==='start')a.delivStart=val;
  else a.delivEnd=val;
  DB.setSettings(s);
}

function renderAgentsList(){
  const el=document.getElementById('agentsList');
  if(!el)return;
  const s=DB.settings;
  const agents=s.agents||[];
  const colors=['#FFD6D6','#D6EAFF','#D6FFE8','#FFF0D6','#EDD6FF','#D6F5FF'];
  el.innerHTML='';
  agents.forEach((a,i)=>{
    const div=document.createElement('div');
    div.style.cssText=`border:2px solid ${colors[i]};border-radius:12px;padding:12px;margin-bottom:10px;background:white;`;
    div.innerHTML=`
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
        <div style="font-weight:bold;font-size:14px;">🚴 ${a.name||'Route '+(i+1)}</div>
        <button class="btn-sm btn-g" id="editAgentName_${a.id}">✏️ Rename</button>
      </div>
      <button class="btn" id="pickAgentContact_${a.id}" style="background:#E8F2FF;color:#1A5FA0;width:100%;justify-content:center;margin-bottom:8px;padding:8px;">📱 Pick Agent from Contacts</button>
      <button class="btn" id="typeAgentPhone_${a.id}" style="background:#FFF0E0;color:#C0681A;width:100%;justify-content:center;margin-bottom:8px;padding:8px;">⌨️ Type Number Manually</button>
      <div id="manualPhoneBox_${a.id}" style="display:none;margin-bottom:8px;">
        <div style="display:flex;align-items:center;border:2px solid #ddd;border-radius:10px;overflow:hidden;">
          <span style="padding:10px;background:#f5f5f5;font-size:13px;font-weight:bold;color:#555;border-right:1px solid #ddd;">+91</span>
          <input type="tel" id="manualPhoneInput_${a.id}" maxlength="10" inputmode="numeric" placeholder="10-digit number" value="${a.agentPhone||''}" style="flex:1;border:none;padding:10px;font-size:15px;outline:none;"/>
        </div>
        <button class="btn-sm btn-g" id="manualPhoneSave_${a.id}" style="width:100%;margin-top:6px;padding:8px;">✅ Save Number</button>
      </div>
      <div style="display:flex;gap:8px;margin-bottom:8px;">
        <div style="flex:1;font-size:11px;">
          <div style="color:#888;margin-bottom:2px;">Agent Name</div>
          <div style="font-weight:700;color:#333;">${a.agentName||'Not set'}</div>
        </div>
        <div style="flex:1;font-size:11px;">
          <div style="color:#888;margin-bottom:2px;">Phone</div>
          <div style="font-weight:700;color:#1A5FA0;">${a.agentPhone?`<a href="tel:${a.agentPhone}" style="color:#1A5FA0;text-decoration:none;">📞 ${a.agentPhone}</a>`:'Not set'}</div>
        </div>
      </div>
      <div style="display:flex;gap:8px;flex-wrap:wrap;">
        <button class="btn-sm" style="background:#E8F2FF;color:#1A5FA0;" id="setAgentPin_${a.id}">🔐 ${a.pinHash?'Change PIN':'Set PIN'}</button>
        <div style="display:flex;align-items:center;gap:4px;font-size:11px;color:#666;">
          ⏰ <input type="time" value="${a.delivStart||''}" style="border:1px solid #ccc;border-radius:6px;padding:2px 4px;font-size:11px;" onchange="saveAgentTime('${a.id}','start',this.value)">
        </div>
        <div style="display:flex;align-items:center;gap:4px;font-size:11px;color:#666;">
          🔚 <input type="time" value="${a.delivEnd||''}" style="border:1px solid #ccc;border-radius:6px;padding:2px 4px;font-size:11px;" onchange="saveAgentTime('${a.id}','end',this.value)">
        </div>
      </div>`;
    el.appendChild(div);
    // Rename route
    div.querySelector(`#editAgentName_${a.id}`).addEventListener('click',function(){
      const v=prompt('Route name:',a.name||'');
      if(v!==null&&v.trim()){
        const s2=DB.settings;s2.agents[i].name=v.trim();DB.setSettings(s2);
        renderAgentsList();buildAgentTiles();
      }
    });
    // Type manually — inline box, digits only, max 10
    const manualInput=div.querySelector(`#manualPhoneInput_${a.id}`);
    manualInput.addEventListener('input',function(){
      this.value=this.value.replace(/\D/g,'').slice(0,10);
    });
    div.querySelector(`#typeAgentPhone_${a.id}`).addEventListener('click',function(){
      const box=div.querySelector(`#manualPhoneBox_${a.id}`);
      box.style.display=box.style.display==='none'?'block':'none';
      if(box.style.display==='block')manualInput.focus();
    });
    div.querySelector(`#manualPhoneSave_${a.id}`).addEventListener('click',function(){
      const cleaned=manualInput.value.replace(/\D/g,'').slice(0,10);
      if(!/^\d{10}$/.test(cleaned)){alert('❌ Enter a valid 10-digit number');return;}
      const s2=DB.settings;s2.agents[i].agentPhone=cleaned;DB.setSettings(s2);
      renderAgentsList();
    });
    // Pick from contacts
    div.querySelector(`#pickAgentContact_${a.id}`).addEventListener('click',async function(){
      if(!('contacts' in navigator&&'ContactsManager' in window)){
        alert('Contact picker not supported. Please enter manually.');return;
      }
      try{
        const contacts=await navigator.contacts.select(['name','tel'],{multiple:false});
        if(contacts&&contacts.length>0){
          const c=contacts[0];
          const s2=DB.settings;
          if(c.name&&c.name[0])s2.agents[i].agentName=c.name[0];
          if(c.tel&&c.tel[0]){
            let num=c.tel[0].replace(/[^0-9]/g,'');
            if(num.length===12&&num.startsWith('91'))num=num.slice(2);
            if(num.length===11&&num.startsWith('0'))num=num.slice(1);
            s2.agents[i].agentPhone=num.slice(0,10);
          }
          DB.setSettings(s2);renderAgentsList();
        }
      }catch(e){alert('Could not pick contact.');}
    });
    // Set PIN
    div.querySelector(`#setAgentPin_${a.id}`).addEventListener('click',function(){
      agentId=a.id;sBoyMode=false;sAgentMode=true;sAgentIdx=i;
      openSetupMo('Set PIN for '+a.name,'Agent: '+a.name);
    });
  });
}

// ===== ADMIN ADVANCE ORDERS (2.11.1h, 2.11.1i) =====
function renderAdminAdvOrders(){
  const el=document.getElementById('adminAdvOrders');
  if(!el||role!=='admin')return;
  el.style.display='block';
  // v13.6: One-time download of future orders from Firebase (throttled, NO listeners)
  fetchFutureDays().then(ok=>{if(ok)renderAdminAdvOrders();});
  const custs=DB.customers; // v13.6: ALL customers - orders never hidden by route filter
  // Get all future dates with orders
  const upcoming=[];
  for(let i=1;i<=14;i++){
    const d=new Date();d.setDate(d.getDate()+i);
    const dk=dKey(d);
    const dd=DB.getDayData(dk);
    custs.forEach(c=>{
      if(dd[c.id]&&dd[c.id].custChanged){
        upcoming.push({cust:c,date:dk,data:dd[c.id]});
      }
    });
  }
  // Add order button always visible for admin (2.11.1i)
  const addOrderBtn=`<button class="btn" style="background:#1A5FA0;color:white;width:100%;justify-content:center;margin-bottom:8px;" id="adminAddOrderBtn">➕ Add Order for Customer</button>`;
  
  if(!upcoming.length){
    el.innerHTML=`${addOrderBtn}
      <div style="text-align:center;color:#999;font-size:12px;padding:10px;">No advance orders yet</div>`;
    document.getElementById('adminAddOrderBtn').addEventListener('click',()=>openAdminAddOrder());
    return;
  }
  el.innerHTML=`${addOrderBtn}
    ${upcoming.map(o=>{
      const d2=new Date(o.date+'T00:00:00');
      const dateStr=d2.toLocaleDateString('en-IN',{weekday:'short',day:'numeric',month:'short'});
      const cowQ=o.data.cowQty||0;const bufQ=o.data.bufQty||0;
      const milkStr=(cowQ>0?cowQ+'L 🐄 ':'')+( bufQ>0?bufQ+'L 🐃':'');
      const extras=o.data.extraOrders?Object.entries(o.data.extraOrders).filter(([k,v])=>v).map(([k,v])=>v+' '+k).join(', '):'';
      return `<div style="padding:8px 0;border-bottom:1px solid #eee;font-size:12px;">
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <div>
            <span style="font-weight:bold;color:#E8621A;">${dateStr}</span> — 
            <span style="font-weight:bold;">${o.cust.name}</span><br>
            <span style="color:#666;">${milkStr||'No Milk'}${extras?', '+extras:''}</span>
          </div>
          <div style="display:flex;gap:4px;">
          <button class="btn-sm" style="background:#E8F2FF;color:#1A5FA0;" 
            data-cid="${o.cust.id}" data-date="${o.date}">✏️ Edit</button>
          <button class="btn-sm" style="background:#FDECEA;color:#C0392B;" 
            data-delcid="${o.cust.id}" data-deldate="${o.date}">🗑️</button>
          </div>
        </div>
      </div>`;
    }).join('')}`;
  
  // Add edit listeners
  el.querySelectorAll('.btn-sm[data-cid]').forEach(btn=>{
    btn.addEventListener('click',function(){
      openAdminEditOrder(this.dataset.cid, this.dataset.date);
    });
  });
  // v13.6: Delete order listeners (admin only, with confirmation)
  el.querySelectorAll('.btn-sm[data-delcid]').forEach(btn=>{
    btn.addEventListener('click',function(){
      const cid=this.dataset.delcid,date=this.dataset.deldate;
      const c=DB.customers.find(x=>x.id===cid);
      if(!confirm('Cancel this order for '+(c?c.name:'customer')+'?'))return;
      let dd=DB.getDayData(date);
      if(dd[cid]){delete dd[cid];DB.setDayData(date,dd);}
      // v13.7: Properly remove from Firebase too (merge mode keeps it otherwise!)
      if(fbOK&&db)db.collection('daydata').doc(date).update({[cid]:firebase.firestore.FieldValue.delete()}).catch(e=>{});
      renderAdminAdvOrders();
    });
  });
  // Add order button
  const aob=document.getElementById('adminAddOrderBtn');
  if(aob)aob.addEventListener('click',()=>openAdminAddOrder());
}

// v15.3: ➖➕ Admin stepper - works with hidden inputs keeping same ids
function aStepUI(id,val,color,unit,priceJs){
  const show=(val>0)?val+unit:'0';
  return `<input type="hidden" id="${id}" value="${val>0?val:0}">
  <div style="display:flex;align-items:center;justify-content:center;gap:14px;padding:2px 0;">
    <button type="button" onclick="aStep('${id}',-0.25,'${unit}',${priceJs||0})" style="width:36px;height:36px;border-radius:50%;border:2px solid ${color};background:white;color:${color};font-size:18px;font-weight:bold;">−</button>
    <span id="${id}_val" style="font-size:15px;font-weight:800;color:${color};min-width:64px;text-align:center;">${show}</span>
    <button type="button" onclick="aStep('${id}',0.25,'${unit}',${priceJs||0})" style="width:36px;height:36px;border-radius:50%;border:2px solid ${color};background:white;color:${color};font-size:18px;font-weight:bold;">+</button>
  </div>`;
}
function aStep(id,delta,unit,price){
  const el=document.getElementById(id);if(!el)return;
  let cur=parseFloat(el.value);if(isNaN(cur)||cur<0)cur=0;
  const v=Math.max(0,Math.min(50,Math.round((cur+delta)*100)/100));
  el.value=v;
  const sp=document.getElementById(id+'_val');if(sp)sp.textContent=v>0?v+unit:'0';
  if(id.indexOf('aAdd_')===0)calcAdminPrice(id.slice(5),price||0);
  if(typeof window._aAddPick==='function'&&id.indexOf('aAdd')===0)window._aAddPick();
}
function aStepSet(id,val,unit){
  const el=document.getElementById(id);if(!el)return;
  el.value=val>0?val:0;
  const sp=document.getElementById(id+'_val');if(sp)sp.textContent=val>0?val+unit:'0';
}
function openAdminAddOrder(){
  const custs=DB.customers;
  if(!custs.length){alert('No customers added yet!');return;}
  
  // Get available future dates
  const dates=[];
  for(let i=1;i<=14;i++){
    const d=new Date();d.setDate(d.getDate()+i);
    dates.push(dKey(d));
  }
  
  const custOpts='<option value="">— Select Customer —</option>'+custs.map(c=>`<option value="${c.id}">${c.name}</option>`).join('');
  const dateOpts=dates.map(d=>{
    const d2=new Date(d+'T00:00:00');
    return`<option value="${d}">${d2.toLocaleDateString('en-IN',{weekday:'short',day:'numeric',month:'short'})}</option>`;
  }).join('');
  
  const s=DB.settings;
  // Exclude cow milk and buffalo milk from extra orders (they have their own tabs)
  const milkIds=['cow_milk','buf_milk','cm','bm'];
  const prods=DB.products.filter(p=>p.active&&!milkIds.includes(p.id));
  const qOptsAdmin=(def,isDefault)=>{
    let o='';
    if(!isDefault) o+=`<option value="-1" ${def<0?'selected':''}>— Select —</option>`;
    o+=[0,0.25,0.5,0.75,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5,10,11,12,13,14,15,16,17,18,19,20,25,30,35,40,45,50].map(q=>`<option value="${q}" ${q===def&&(isDefault||def>=0)?'selected':''}>${q===0?'No Milk':q+'L'}</option>`).join('');
    return o;
  };
  const extraHtml=prods.map(p=>{
    const price=s['price_'+p.id]||0;
    const opts=Array.from({length:20},(_,i)=>((i+1)*0.25)).map(q=>`<option value="${q}">${q} ${p.unit}</option>`).join('');
    return`<div style="background:#F9FAFB;border:1.5px solid #E2E8F0;border-radius:10px;padding:10px;margin-bottom:8px;">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
        <label style="font-weight:800;font-size:13px;">${p.icon} ${p.name}</label>
        <div style="display:flex;align-items:center;gap:6px;">
          ${price?`<span style="background:#E2E8F0;color:#666;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:700;">₹${price}/${p.unit}</span>`:''}
          <span id="aAddPrice_${p.id}" style="font-weight:900;font-size:14px;color:#2A7A4B;"></span>
        </div>
      </div>
      ${aStepUI('aAdd_'+p.id,0,'#4A5568',' '+p.unit,price||0)}
    </div>`;
  }).join('');
  
  // Get first customer defaults for initial display
  const firstCust=custs[0];
  const {cowDefault:initCow,bufDefault:initBuf}=firstCust?getCustDefaults(firstCust):{cowDefault:0,bufDefault:0};
  
  const mo=document.createElement('div');
  mo.className='mo open';mo.id='adminAddMo';
  mo.innerHTML=`<div class="md">
    <h2>➕ Add Order for Customer</h2>
    <p class="sub">Add on behalf of customer</p>
    <div class="fg"><label>Customer</label>
      <input id="aAddCustSearch" type="text" placeholder="🔍 Type customer name..." style="width:100%;padding:8px;border:2px solid #1A5FA0;border-radius:8px;font-size:14px;margin-bottom:6px;">
      <select id="aAddCust" style="border:2px solid #1A5FA0;border-radius:8px;">${custOpts}</select></div>
    <div class="fg"><label>Date</label>
      <select id="aAddDate" style="border:2px solid #1A5FA0;border-radius:8px;">${dateOpts}</select></div>
    <div class="fg" id="aAddCowWrap"><label>🐄 Cow Milk</label>
      ${aStepUI('aAddCow',0,'#D4A017','L')}</div>
    <div class="fg" id="aAddBufWrap"><label>🐃 Buffalo Milk</label>
      ${aStepUI('aAddBuf',0,'#5A6BC4','L')}</div>
    ${extraHtml}
    <button class="btn btn-g" id="saveAdminAdd" style="margin-top:8px;">💾 Save Order</button>
    <button class="pcancel" onclick="document.getElementById('adminAddMo').remove()">Cancel</button>
  </div>`;
  document.body.appendChild(mo);
  
  // v13.8: Save button OFF until customer selected AND something ordered
  // v13.9: Must be picked BY HAND - auto-filled defaults don't activate Save
  let userPicked=false;
  const saveBtn=document.getElementById('saveAdminAdd');
  const chkReady=()=>{
    const cid=document.getElementById('aAddCust').value;
    const cw=parseFloat(document.getElementById('aAddCow').value)||0;
    const bf=parseFloat(document.getElementById('aAddBuf').value)||0;
    let ex=false;prods.forEach(p=>{const e2=document.getElementById('aAdd_'+p.id);if(e2&&parseFloat(e2.value)>0)ex=true;});
    const ok=!!cid&&userPicked&&(cw>0||bf>0||ex);
    saveBtn.disabled=!ok;saveBtn.style.opacity=ok?'1':'0.4';
  };
  chkReady();
  window._aAddPick=()=>{userPicked=true;chkReady();}; // v15.3: steppers call this
  
  // v13.8: Search customer by typing - filters dropdown, auto-selects single match
  document.getElementById('aAddCustSearch').addEventListener('input',function(){
    const t=this.value.toLowerCase().trim();
    const sel=document.getElementById('aAddCust');
    const cur=sel.value;
    const matched=custs.filter(c=>c.name.toLowerCase().includes(t));
    sel.innerHTML='<option value="">— Select Customer —</option>'+matched.map(c=>`<option value="${c.id}">${c.name}</option>`).join('');
    if(t&&matched.length===1){sel.value=matched[0].id;sel.dispatchEvent(new Event('change'));}
    else{sel.value=cur;chkReady();}
  });
  
  // Update defaults when customer changes
  document.getElementById('aAddCust').addEventListener('change',function(){
    userPicked=false; // v13.9: new customer = fresh start, defaults don't count
    const selCust=custs.find(x=>x.id===this.value);
    const cw2=document.getElementById('aAddCowWrap'),bw2=document.getElementById('aAddBufWrap');
    if(!selCust){
      aStepSet('aAddCow',0,'L');
      aStepSet('aAddBuf',0,'L');
      if(cw2)cw2.style.display='block';if(bw2)bw2.style.display='block';
      chkReady();return;
    }
    // v15.7: HIDE the customer's default milk type - regular qty is not an extra order
    const mt2=selCust.milkType||'cow';
    if(cw2)cw2.style.display=(mt2==='cow')?'none':'block';
    if(bw2)bw2.style.display=(mt2==='buffalo')?'none':'block';
    aStepSet('aAddCow',0,'L');
    aStepSet('aAddBuf',0,'L');
    chkReady();
  });
  
  document.getElementById('saveAdminAdd').addEventListener('click',function(){
    const cid=document.getElementById('aAddCust').value;
    const date=document.getElementById('aAddDate').value;
    const c=DB.customers.find(x=>x.id===cid);if(!c)return;
    if(!guardOrderVsVacation(c,date))return; // v23: vacation conflict guard
    let dd=DB.getDayData(date);
    if(!dd[cid])dd[cid]={delivered:false,qty:0};
    const {cowDefault:cd,bufDefault:bd}=getCustDefaults(c);
    const cwVal=parseFloat(document.getElementById('aAddCow').value);
    const bfVal=parseFloat(document.getElementById('aAddBuf').value);
    // v15.7: default milk type is HIDDEN - ALWAYS keep its default; other type from stepper
    const mt3=c.milkType||'cow';
    const cw=(mt3==='cow')?cd:((!isNaN(cwVal)&&cwVal>=0)?cwVal:cd);
    const bf=(mt3==='buffalo')?bd:((!isNaN(bfVal)&&bfVal>=0)?bfVal:bd);
    dd[cid].cowQty=cw;dd[cid].bufQty=bf;dd[cid].qty=cw+bf;dd[cid].custChanged=true;
    const extras={};
    prods.forEach(p=>{const el=document.getElementById('aAdd_'+p.id);if(el&&parseFloat(el.value)>0)extras[p.name]=parseFloat(el.value)+' '+p.unit;});
    dd[cid].extraOrders=extras;
    DB.setDayData(date,dd);
    const tDate=new Date(date+'T00:00:00').toLocaleDateString('en-IN',{day:'numeric',month:'short'});
    document.getElementById('adminAddMo').remove();
    renderAdminAdvOrders();
    {const _ap=document.querySelector('.page.active');if(_ap&&_ap.id==='pg-today')renderToday();} // v23.7: refresh Stats table too
    alert('✅ Order added for '+c.name+' on '+tDate+'!');
  });
}

function openAdminEditOrder(cid, date){
  const c=DB.customers.find(x=>x.id===cid);if(!c)return;
  const dd=DB.getDayData(date);
  const d=dd[cid]||{};
  const dateStr=new Date(date+'T00:00:00').toLocaleDateString('en-IN',{weekday:'long',day:'numeric',month:'short'});
  const s=DB.settings;
  // Exclude cow milk and buffalo milk from extra orders (they have their own tabs)
  const milkIds=['cow_milk','buf_milk','cm','bm'];
  const prods=DB.products.filter(p=>p.active&&!milkIds.includes(p.id));
  
  const cowQ=d.cowQty!==undefined?d.cowQty:(c.milkType==='cow'?parseFloat(c.litres)||1:0);
  const bufQ=d.bufQty!==undefined?d.bufQty:(c.milkType==='buffalo'?parseFloat(c.litres)||1:0);
  
  const qOpts=(def)=>[0,0.25,0.5,0.75,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5,10,11,12,13,14,15,16,17,18,19,20,25,30,35,40,45,50].map(q=>`<option value="${q}" ${q===def?'selected':''}>${q===0?'No Milk':q+'L'}</option>`).join('');
  
  const extraHtml=prods.map(p=>{
    const price=s['price_'+p.id]||0;
    const cur=d.extraOrders&&d.extraOrders[p.name]?parseFloat(d.extraOrders[p.name]):0;
    const opts=Array.from({length:20},(_,i)=>((i+1)*0.25)).map(q=>`<option value="${q}" ${q===cur?'selected':''}>${q} ${p.unit}</option>`).join('');
    return `<div class="fg"><label>${p.icon} ${p.name} ${price?'₹'+price+'/'+p.unit:''}</label>
      ${aStepUI('aEdit_'+p.id,cur,'#4A5568',' '+p.unit)}</div>`;
  }).join('');
  
  // Show in a simple prompt-like div
  const mo=document.createElement('div');
  mo.className='mo open';mo.id='adminEditMo';
  mo.innerHTML=`<div class="md">
    <h2>✏️ Edit Order</h2>
    <p class="sub">${c.name} — ${dateStr}</p>
    <div class="fg"><label>🐄 Cow Milk</label>
      ${aStepUI('aEditCow',cowQ,'#D4A017','L')}</div>
    <div class="fg"><label>🐃 Buffalo Milk</label>
      ${aStepUI('aEditBuf',bufQ,'#5A6BC4','L')}</div>
    ${extraHtml}
    <button class="btn btn-g" id="saveAdminEdit" style="margin-top:8px;">💾 Save Changes</button>
    <button class="pcancel" onclick="document.getElementById('adminEditMo').remove()">Cancel</button>
  </div>`;
  document.body.appendChild(mo);
  
  document.getElementById('saveAdminEdit').addEventListener('click',function(){
    if(!guardOrderVsVacation(c,date))return; // v23: vacation conflict guard
    let dd2=DB.getDayData(date);
    if(!dd2[cid])dd2[cid]={delivered:false,qty:0};
    const {cowDefault:cd,bufDefault:bd}=getCustDefaults(c);
    const cwVal=parseFloat(document.getElementById('aEditCow').value);
    const bfVal=parseFloat(document.getElementById('aEditBuf').value);
    const cw=isNaN(cwVal)?cd:cwVal;
    const bf=isNaN(bfVal)?bd:bfVal;
    dd2[cid].cowQty=cw;dd2[cid].bufQty=bf;dd2[cid].qty=cw+bf;dd2[cid].custChanged=true;
    const extras={};
    prods.forEach(p=>{const el=document.getElementById('aEdit_'+p.id);if(el&&parseFloat(el.value)>0)extras[p.name]=parseFloat(el.value)+' '+p.unit;});
    dd2[cid].extraOrders=extras;
    DB.setDayData(date,dd2);
    document.getElementById('adminEditMo').remove();
    renderAdminAdvOrders();
    {const _ap=document.querySelector('.page.active');if(_ap&&_ap.id==='pg-today')renderToday();} // v23.7: refresh Stats table too
    alert('✅ Order updated!');
  });
}

// ===== ROUTE =====
function renderRoute(){
  applyPendingQty(); // v14.7: agent phone applies new quantities too
  processHolds(); // v15.8
  renderHandoverTables();applyAgentVis(); // v21.10: fill + hide handover on the Route page (where the strips live) so agent rules apply
  // v14.9: Quantity Change Alert card at TOP of agent's window (double reminder)
  const qccRt=document.getElementById('qtyChangesCardRt');
  if(qccRt){
    if(role==='agent'){
      const rows=[];
      const ddT=DB.getDayData(dKey()); // v15.12: today's special orders in purple card
      DB.customers.filter(c=>c.route===agentId).forEach(c=>{
        const dT=ddT[c.id];
        if(dT&&dT.custChanged){
          const ex=dT.extraOrders?Object.entries(dT.extraOrders).filter(([k,v])=>v).map(([k,v])=>v+' '+k).join(', '):'';
          const milk=[];if(dT.cowQty>0)milk.push(dT.cowQty+'L 🐄');if(dT.bufQty>0)milk.push(dT.bufQty+'L 🐃');
          rows.push(`🛒 ${c.name} TODAY: ${milk.join(' + ')}${ex?' + '+ex:''}`);
        }
        if(c.pendingQty)rows.push(`🥛 ${c.name}: ${parseFloat(c.litres)||1}L → ${c.pendingQty.qty}L from ${fmtDM(onwardsFrom(c))} ONWARDS`);
        if(c.periodQty)rows.push(`🥛 ${c.name}: ${c.periodQty.qty}L ONLY ${fmtDM(c.periodQty.from)}→${fmtDM(c.periodQty.to)} (then ${backQty(c)}L)`);
        if(c.lastQtyChange)rows.push(`🥛 ${c.name}: NOW ${c.lastQtyChange.qty}L (was ${c.lastQtyChange.old}L)`);
        if(c.hold&&c.hold.to>=dKey()){const r=new Date(c.hold.to+'T00:00:00');r.setDate(r.getDate()+1);rows.push(`⏸️ ${c.name}: vacation ${fmtDM(c.hold.from)}→${fmtDM(c.hold.to)}, back ${fmtDM(dKey(r))}`);}
      });
      qccRt.innerHTML=rows.length?`<div style="background:#F0E8FF;border:2px solid #5B2D91;border-radius:10px;padding:8px;margin-bottom:10px;">
        <div style="font-weight:bold;color:#5B2D91;font-size:13px;margin-bottom:4px;">🔔 Quantity Change Alert (${rows.length})</div>
        ${rows.map(r=>`<div style="font-size:12px;font-weight:bold;padding:3px 0;border-bottom:1px dashed #C4B0E8;color:#3D1F66;">${r}</div>`).join('')}
      </div>`:'';
    }else{qccRt.innerHTML='';}
  }
  // Show route tabs in Route main tab (ADMIN ONLY - agent sees no route tabs)
  const routeTabs=document.getElementById('routeTabs');
  // v15.18: Quick Add Customer button (admin, when a route is selected)
  const qab=document.getElementById('quickAddCustBtn');
  if(qab){
    qab.style.display=(role==='admin'&&selectedRouteId)?'block':'none';
    qab.onclick=function(){
      const rid=selectedRouteId;
      showPg('add');
      setTimeout(()=>{
        const cr=document.getElementById('cRoute');if(cr)cr.value=rid;
        const cn=document.getElementById('cN');if(cn){cn.scrollIntoView({behavior:'smooth',block:'center'});cn.focus();}
      },200);
    };
  }
  if(routeTabs)routeTabs.style.display=(role==='admin')?'block':'none';
  
  // Filter customers by route
  let custs=DB.customers;
  if(role==='agent'&&agentId){
    custs=custs.filter(c=>c.route===agentId);
  } else if(role==='admin'){
    custs=getSelectedAgentCustomers();
  }
  const day=dKey();let dd=DB.getDayData(day);
  const locActive=localStorage.getItem('loc_active')==='1';
  custs.forEach(c=>{if(!dd[c.id])dd[c.id]={delivered:false,qty:parseFloat(c.litres)||1};});
  document.getElementById('routeDate').textContent=fmtDate();
  // Agents don't see customer change notifications (2.11.1q)
  // Only admin sees notifications in route
  const rb=document.getElementById('routeNotifBar');
  if(role==='admin'){
    const notifs=DB.notifs.filter(n=>!n.r);
    if(notifs.length>0){
      rb.innerHTML=`<div class="notif"><h3>🔔 ${notifs.length} Customer Change(s)</h3>
        ${notifs.slice(0,3).map(n=>`<div style="font-size:13px;padding:3px 0;">⚠️ ${n.m}</div>`).join('')}
      </div>`;
    }else rb.innerHTML='';
  }else{
    rb.innerHTML='';
  }
  const s=DB.settings;
  const cms=document.getElementById('callMgrSec');
  if(role==='agent'){document.getElementById('agentMgrNo').textContent=s.ownerPhone||'Not set';}
  else cms.style.display='none';
  const bw=document.getElementById('boyLocWrap');
  if(role==='agent'){
    ensureLocReqListener(); // v19.1: listen for admin "Request Location" signal
    const locOn=localStorage.getItem('loc_active')==='1';
    bw.innerHTML=`<div class="ltog"><div><div style="font-weight:bold;font-size:13px;">📍 Share My Location</div><div style="font-size:11px;color:#2A7A4B;">Visible to admin only</div></div><label class="tsw"><input type="checkbox" id="locChk" ${locOn?'checked':''} ><span class="tsl"></span></label></div><div id="agentCustCount" style="font-size:13px;font-weight:bold;color:#1A5FA0;margin-top:8px;text-align:center;"></div>`;
    document.getElementById('locChk').addEventListener('change',function(){
      localStorage.setItem('loc_active',this.checked?'1':'0');
      this.checked?startBoyLoc():stopBoyLoc();
    });
    // Auto-resume if was ON
    if(locOn) startBoyLoc();
  }
  else bw.innerHTML='';
  const list=document.getElementById('routeList'),sc=document.getElementById('routeSumCard');
  if(!custs.length){list.innerHTML='<div class="empty">🗺️<br>No customers yet.</div>';sc.style.display='none';return;}
  // v13.10: ALWAYS sort by Stop number ascending (Stop 1, 2, 3...) - no stop number goes last
  custs=custs.filter(c=>!isSkipped(c,dKey())).slice().sort((a,b)=>(parseFloat(a.order)||99999)-(parseFloat(b.order)||99999)); // v15.8: skip held/inactive
  // For agent - filter to show only today + tomorrow special orders (2.11.1q, 2.11.1r)
  const tmr=new Date();tmr.setDate(tmr.getDate()+1);const tmrKey=dKey(tmr);
  // v13.6: Agent downloads tomorrow's orders (throttled one-time, NO listeners)
  if(role==='agent'){fetchFutureDays().then(ok=>{if(ok)renderRoute();});}
  const tmrDD=DB.getDayData(tmrKey);
  
  list.innerHTML='';
  custs.forEach((c,i)=>{
    const qty=(dd[c.id]||{qty:parseFloat(c.litres)||1}).qty;
    const done=(dd[c.id]||{}).delivered;
    const chg=(dd[c.id]||{}).custChanged;
    const div=document.createElement('div');div.className='rstop';div.style.opacity=done?'0.55':isOnAltDay(c,dKey())?'0.45':'1';
    const mBtn=c.mapsLink?`<a href="${c.mapsLink}" target="_blank"><button class="btn-sm" style="background:#E8F2FF;color:#1A5FA0;margin-top:4px;">📍 Maps</button></a>`:'';
    const mTag=c.milkType==='buffalo'?'<span class="chip" style="background:#E8E0FF;color:#5533AA;">🐃 Buffalo</span>':'<span class="chip" style="background:#FFF3CD;color:#8B6914;">🐄 Cow</span>';
    const tChip=c.delivTime?`<span class="chip" style="background:#FFF9E6;color:#8B6914;">⏰${fmtTime(c.delivTime)}</span>`:'';
    const chgChip=chg?`<span class="chip" style="background:#FDECEA;color:#C0392B;">⚠️Changed</span>`:'';
    const altDayChip=isOnAltDay(c,dKey())?`<span class="chip" style="background:#F0F0F0;color:#888;border:1px solid #ccc;">⏭️ Alt day</span>`:'';
    // v15.12: TODAY's special order details in purple ribbon right on the card
    const exToday=(dd[c.id]&&dd[c.id].extraOrders)?Object.entries(dd[c.id].extraOrders).filter(([k,v])=>v).map(([k,v])=>v+' '+k).join(', '):'';
    const exChip=exToday?`<span class="chip" style="background:#F0E8FF;color:#5B2D91;border:2px solid #5B2D91;font-weight:bold;">🛒 ${exToday}</span>`:'';
    // v14.8: Quantity Change Alert ribbons - light purple, dark outline, visible to AGENT and ADMIN
    const lqc=c.lastQtyChange;
    const newQtyChip=lqc?`<span class="chip" style="background:#F0E8FF;color:#5B2D91;border:2px solid #5B2D91;font-weight:bold;">🔔 Qty Change: NOW ${lqc.qty}L (was ${lqc.old}L)</span>`:'';
    const pendChip=c.pendingQty?`<span class="chip" style="background:#F0E8FF;color:#5B2D91;border:2px solid #5B2D91;font-weight:bold;">🔔 Qty Change Alert: ${c.pendingQty.qty}L from ${fmtDM(onwardsFrom(c))}</span>`:'';
    const phShow=role==='admin'&&c.mobile?`<div class="raddr"><a href="tel:${c.mobile}" style="color:inherit;text-decoration:none;">📞 ${c.mobile}</a></div>`:'';
    // Mark delivered button for agent
    const agent=getAgentById(agentId);
    const endTime=agent?.delivEnd||DB.settings.delivEnd||'';
    const startTime=agent?.delivStart||DB.settings.delivStart||'';
    let isLocked=false,lockMsg='🔒 Delivery Time Ended';
    if(role==='agent'&&!done){
      const now=new Date();
      // v13.11: Lock BEFORE start time too (midnight marking bug fix)
      if(startTime){
        const sp=startTime.split(':');
        const st=new Date();st.setHours(parseInt(sp[0]),parseInt(sp[1]),0,0);
        if(now<st){isLocked=true;lockMsg='🔒 Delivery Not Started Yet';}
      }
      if(!isLocked&&endTime){
        const parts=endTime.split(':');
        const end=new Date();end.setHours(parseInt(parts[0]),parseInt(parts[1]),0,0);
        if(now>end){isLocked=true;lockMsg='🔒 Delivery Time Ended';}
      }
    }
    const markBtnHtml = role==='agent' ? 
      `<button style="background:${done?'#E8F5EE':isLocked?'#ccc':'#1A5FA0'};color:${done?'#2A7A4B':isLocked?'#888':'white'};border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:bold;cursor:${isLocked?'not-allowed':'pointer'};margin-top:8px;width:100%;" class="agentMarkBtn" data-cid="${c.id}" ${isLocked?'disabled':''}>
        ${done?'✅ Delivered at '+(dd[c.id].delivTime||'')+(dd[c.id].markedBy?' by '+dd[c.id].markedBy:''):isLocked?lockMsg:'✓ Mark as Delivered'}
      </button>` : '';
    
    if(role==='agent'){
      // v23.2: alt-day off-day — show greyed card, no mark button
      if(isOnAltDay(c,dKey())){
        div.className='rstop agentcard';
        div.style.cssText='display:block;width:100%;box-sizing:border-box;background:#F0F0F0;border:2px solid #CCC;border-radius:12px;padding:10px 12px;margin-bottom:4px;opacity:0.5;';
        div.innerHTML=`<div style="display:flex;align-items:center;gap:10px;">
          <span style="display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#ddd;border:2px solid #bbb;font-size:16px;flex:0 0 auto;">⏭️</span>
          <div><div style="color:#888;font-size:16px;font-weight:bold;">${c.name}</div>
          <div style="color:#aaa;font-size:12px;font-weight:700;margin-top:2px;">Alternate day — no milk today</div></div>
        </div>`;
        list.appendChild(div);
        return;
      }
      const mBtnBlue=c.mapsLink?`<a href="${c.mapsLink}" target="_blank" style="text-decoration:none;"><span style="display:inline-flex;align-items:center;gap:4px;background:#D6ECFF;color:#0B3D91;border:1px solid #0B3D91;border-radius:8px;padding:5px 11px;font-size:14px;font-weight:bold;">📍 Maps</span></a>`:'';
      const mTagBig=c.milkType==='buffalo'?'<span style="background:#E8E0FF;color:#5533AA;border-radius:8px;padding:4px 9px;font-size:14px;font-weight:bold;">🐃 Buffalo</span>':'<span style="background:#FFF3CD;color:#8B6914;border-radius:8px;padding:4px 9px;font-size:14px;font-weight:bold;">🐄 Cow</span>';
      const qtyChip2=`<span style="background:#2A7A4B;color:white;border-radius:8px;padding:4px 9px;font-size:14px;font-weight:bold;">${qty===0?'No Milk':qty+'L'}</span>`;
      const tChipBig=c.delivTime?`<span style="background:#FFF9E6;color:#8B6914;border-radius:8px;padding:4px 9px;font-size:14px;font-weight:bold;">⏰ ${fmtTime(c.delivTime)}</span>`:'';
      const purpleRibbons=`${chgChip}${exChip}${newQtyChip}${pendChip}`;
      const landmarkChip=c.landmark?`<span style="background:#FFE3C2;color:#B85C00;font-weight:bold;font-size:14px;border-radius:8px;padding:5px 11px;display:inline-block;white-space:normal;word-break:break-word;">🏠 ${c.landmark}</span>`:'';
      const circle=`<span class="agentMarkBtn" data-cid="${c.id}" style="display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:${done?'#2A7A4B':'white'};border:2px solid ${done?'#2A7A4B':'#999'};color:${done?'white':'transparent'};font-size:18px;font-weight:bold;cursor:${isLocked?'not-allowed':'pointer'};flex:0 0 auto;">${done?'✓':(isLocked?'🔒':'')}</span>`;
      const openAddr=window.openAddrSet.has(c.id);
      div.className='rstop agentcard';
      div.style.cssText='display:block;width:100%;box-sizing:border-box;background:#E9F7EE;border:2px solid #2A7A4B;border-radius:12px;padding:10px 12px;margin-bottom:4px;'+(done?'opacity:0.9;':'');
      div.innerHTML=`
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
          ${circle}
          <span class="rname" style="color:#1B5E20;font-size:17px;font-weight:bold;flex:1;">${c.name}</span>
          <div class="card-dots-menu">
            <button class="card-dots-btn cardDotsBtn" data-cid="${c.id}" title="More">⋮</button>
            <div class="card-dots-popup" id="dotsPop_${c.id}">
              <div class="dot-item dotCallMgr">📞 Call Manager</div>
            </div>
          </div>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:6px;">${mTagBig}${qtyChip2}${tChipBig}</div>
        ${purpleRibbons?`<div style="margin:6px 0;display:flex;flex-wrap:wrap;gap:6px;">${purpleRibbons}</div>`:''}
        <div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0;">${mBtnBlue}${landmarkChip}</div>
        ${done?`<div style="color:#2A7A4B;font-weight:bold;font-size:13px;margin:6px 0;">✅ Delivered at ${(dd[c.id].delivTime||'')}${dd[c.id].markedBy?' by '+dd[c.id].markedBy:''}</div>`:(isLocked?`<div style="color:#888;font-size:13px;margin:6px 0;">${lockMsg}</div>`:'')}
        <div class="acc${openAddr?' open':''}" data-addrid="${c.id}" style="box-shadow:none;margin:6px 0 0;border-radius:8px;">
          <div class="acc-head addrHead" style="background:#37474F;padding:8px 11px;font-size:14px;border-radius:8px;"><span>📋 Address</span><span class="acc-arrow">▼</span></div>
          <div class="acc-body" style="background:#ECEFF1;padding:10px;font-size:14px;color:#333;border-radius:0 0 8px 8px;">
            ${c.address||'No address'}
          </div>
        </div>`;
      list.appendChild(div);
      // v24.9: three-dots popup → Call Manager
      var dotsBtn=div.querySelector('.cardDotsBtn');
      if(dotsBtn)dotsBtn.addEventListener('click',function(e){
        e.stopPropagation();
        var pop=document.getElementById('dotsPop_'+this.dataset.cid);
        document.querySelectorAll('.card-dots-popup.open').forEach(function(p){if(p!==pop)p.classList.remove('open');});
        if(pop)pop.classList.toggle('open');
      });
      var callMgrItem=div.querySelector('.dotCallMgr');
      if(callMgrItem)callMgrItem.addEventListener('click',function(e){
        e.stopPropagation();
        var pop=this.closest('.card-dots-popup');if(pop)pop.classList.remove('open');
        callNo('owner');
      });
      const mb=div.querySelector('.agentMarkBtn');
      if(mb)mb.addEventListener('click',function(e){e.stopPropagation();if(!isLocked)toggleDelFromRoute(this.dataset.cid);});
      return;
    }
    div.innerHTML=`<div class="rnum" style="${done?'background:#2A7A4B;':''}">${done?'✓':(i+1)}</div>
      <div class="rinfo">
        <div class="rname">${c.name}${done?' ✅':''}${role==='admin'?` <button class="qm-btn" data-id="${c.id}" style="background:#F0E8FF;color:#6B3FA0;border:none;border-radius:6px;font-size:10px;padding:2px 6px;font-weight:bold;float:right;">🔀 Move</button>`:''}</div>
        <div class="raddr">📍 ${c.address}</div>${c.landmark?`<div class="raddr" style="color:#E8621A;font-weight:bold;">🏠 ${c.landmark}</div>`:''}${phShow}
        <div style="margin-top:3px;"><span class="chip" style="background:#E8F2FF;color:#1A5FA0;">🥛 ${qty===0?'No Milk':qty+'L'}</span>${mTag}${tChip}${chgChip}${altDayChip}${exChip}${newQtyChip}${pendChip}</div>
        ${mBtn}
        ${markBtnHtml}
      </div>`;
    list.appendChild(div);
    const qmb2=div.querySelector('.qm-btn');if(qmb2)qmb2.addEventListener('click',function(){quickMove(this.dataset.id);});
    // Listener for agent mark delivered
    const mb=div.querySelector('.agentMarkBtn');
    if(mb) mb.addEventListener('click',function(){toggleDelFromRoute(this.dataset.cid);});
  });
  
  // Add search functionality to Route tab (v13.12: STICKY - survives refresh)
  const applyRouteSearch=(term)=>{
    const searchTerm=(term||'').toLowerCase();
    const allRouteDivs=document.querySelectorAll('#routeList .rstop');
    allRouteDivs.forEach(div=>{
      const custName=div.querySelector('.rname')?.textContent.toLowerCase()||'';
      div.style.display=custName.includes(searchTerm)?'block':'none';
    });
  };
  const routeSearchBox=document.getElementById('routeSearch');
  if(routeSearchBox){
    const savedRS=localStorage.getItem('cmo_routeSearch')||'';
    routeSearchBox.value=savedRS;
    if(savedRS)applyRouteSearch(savedRS);
    routeSearchBox.oninput=function(){
      localStorage.setItem('cmo_routeSearch',this.value);
      applyRouteSearch(this.value);
    };
  }
  
  const total=custs.reduce((s,c)=>s+(dd[c.id]||{qty:parseFloat(c.litres)||1}).qty,0);
  const doneC=custs.filter(c=>dd[c.id]&&dd[c.id].delivered).length;
  const doneL=Math.round(custs.filter(c=>dd[c.id]&&dd[c.id].delivered).reduce((s,c)=>s+(dd[c.id]||{qty:parseFloat(c.litres)||1}).qty,0)*10)/10;
  sc.style.display='block';
  
  // Show tomorrow special orders for agent (2.11.1q - next day only)
  // Remove old duplicate first
  const oldTmr=document.getElementById('agentTmrOrders');
  if(oldTmr)oldTmr.remove();
  
  if(role==='agent'){
    const tmrOrders=custs.filter(c=>tmrDD[c.id]&&tmrDD[c.id].custChanged);
    if(tmrOrders.length>0){
      const tmrDiv=document.createElement('div');
      tmrDiv.id='agentTmrOrders';
      tmrDiv.className='card';
      tmrDiv.style.cssText='margin-top:8px;border:2px solid #E8621A;';
      tmrDiv.innerHTML=`<div class="card-title" style="color:#E8621A;">📋 Tomorrow Special Orders</div>
        ${tmrOrders.map(c=>{
          const d=tmrDD[c.id];
          const cowQ=d.cowQty||0;const bufQ=d.bufQty||0;
          const milkParts=[];
          if(cowQ>0) milkParts.push(cowQ+'L 🐄 Cow Milk');
          if(bufQ>0) milkParts.push(bufQ+'L 🐃 Buffalo Milk');
          const extras=d.extraOrders?Object.entries(d.extraOrders).filter(([k,v])=>v).map(([k,v])=>v+' '+k).join(', '):'';
          const orderStr=milkParts.join(', ')+(extras?', '+extras:'') || 'No Milk';
          return '<div style="padding:8px 0;border-bottom:1px solid #eee;font-size:15px;font-weight:600;"><strong style="color:#1A5FA0;">'+c.name+'</strong>: <span style="color:#333;">'+orderStr+'</span></div>';
        }).join('')}`;
      document.getElementById('routeSumCard').after(tmrDiv);
    }
  }
  // Get handover qty from localStorage - per route
  const todayKey='handover_'+dKey();
  const routeHKey=role==='agent'&&agentId?'_'+agentId:(role==='admin'&&selectedRouteId?'_'+selectedRouteId:'');
  const handoverCow=parseFloat(localStorage.getItem(todayKey+'_cow'+routeHKey))||0;
  const handoverBuf=parseFloat(localStorage.getItem(todayKey+'_buf'+routeHKey))||0;
  const handoverTot=Math.round((handoverCow+handoverBuf)*10)/10;
  const doneCowL=Math.round(custs.filter(c=>c.milkType==='cow'&&dd[c.id]&&dd[c.id].delivered).reduce((s,c)=>s+(dd[c.id]?parseFloat(dd[c.id].qty):0),0)*10)/10;
  const doneBufL=Math.round(custs.filter(c=>c.milkType==='buffalo'&&dd[c.id]&&dd[c.id].delivered).reduce((s,c)=>s+(dd[c.id]?parseFloat(dd[c.id].qty):0),0)*10)/10;
  const totCow=Math.round(custs.filter(c=>c.milkType==='cow').reduce((s,c)=>s+(dd[c.id]||{qty:parseFloat(c.litres)||1}).qty,0)*10)/10;
  const totBuf=Math.round(custs.filter(c=>c.milkType==='buffalo').reduce((s,c)=>s+(dd[c.id]||{qty:parseFloat(c.litres)||1}).qty,0)*10)/10;
  const undelCow=handoverCow>0?Math.max(0,Math.round((handoverCow-doneCowL)*10)/10):null;
  const undelBuf=handoverBuf>0?Math.max(0,Math.round((handoverBuf-doneBufL)*10)/10):null;
  const undelTot=undelCow!==null||undelBuf!==null?Math.round(((undelCow||0)+(undelBuf||0))*10)/10:null;
  // Show 4 circles in route stats
  const rs=document.getElementById('routeStats');
  if(rs){
    // v24.9: for agent, Stats lives in the ☰ menu — don't force it visible on the main route page.
    // It is shown only when the agent opens "Stats" from the drawer (showSection handles that).
    if(role!=='agent')rs.style.display='block';
    document.getElementById('routeCustCount').textContent='Total Customers: '+custs.length;
    const acc2=document.getElementById('agentCustCount');if(acc2)acc2.textContent='👥 Total Customers: '+custs.length;
    document.getElementById('rTL').textContent=Math.round(total*10)/10+'L';
    document.getElementById('rTLBreak').innerHTML=`🐄 ${totCow}L &nbsp; 🐃 ${totBuf}L`;
    document.getElementById('rTH').textContent=handoverTot>0?handoverTot+'L':'—';
    const hq2=document.getElementById('handoverQty2');if(hq2&&document.activeElement!==hq2)hq2.value=handoverCow>0?handoverCow:'';
    document.getElementById('rTHBreak').innerHTML=handoverTot>0?`🐄 ${handoverCow}L &nbsp; 🐃 ${handoverBuf}L`:'';
    document.getElementById('rTD').textContent=doneL+'L';
    document.getElementById('rTDBreak').innerHTML=`🐄 ${doneCowL}L &nbsp; 🐃 ${doneBufL}L`;
    document.getElementById('rTU').textContent=undelTot!==null?undelTot+'L':'—';
    document.getElementById('rTUBreak').innerHTML=undelTot!==null?`🐄 ${undelCow||0}L &nbsp; 🐃 ${undelBuf||0}L`:'';
  }
  sc.style.display='none';
  // v24.9: when agent, ensure menu sections obey home/section state after re-render
  if(role==='agent'&&window._agentMenuShowHome){
    var bbA=document.getElementById('agentMenuBack');
    // only force home if not currently viewing a focused section
    if(!bbA||bbA.style.display==='none'){window._agentMenuShowHome();}
  }
}

// ===== OTP FOR PIN RESET =====
function openOTPModal(){
  const el=document.getElementById('otpEmail');
  if(el){el.value='';}
  document.getElementById('otpErr').textContent='';
  openMo('otpMo');
  setTimeout(()=>{if(el){el.focus();}},300);
}

// Secret answer (stored as hash in localStorage, default: chaitanya2208)
function getSecretHash(){return localStorage.getItem('cmo_secret')||hPin('chaitanya2208');}
function setSecretHash(h){localStorage.setItem('cmo_secret',h);}

function sendOTP(){
  const ans=document.getElementById('otpEmail').value.trim();
  if(!ans){document.getElementById('otpErr').textContent='Enter secret answer';return;}
  if(hPin(ans)===getSecretHash()){
    closeMo('otpMo');
    doResetAfterVerify();
  }else{
    document.getElementById('otpErr').textContent='❌ Wrong answer. Try again.';
    document.getElementById('otpEmail').value='';
    document.getElementById('otpEmail').focus();
  }
}

function verifyOTP(){}

function doResetAfterVerify(){
  const custs=localStorage.getItem('cmo_customers');
  const days=localStorage.getItem('cmo_days');
  const paid=localStorage.getItem('cmo_paid');
  const settings=localStorage.getItem('cmo_settings');
  localStorage.removeItem('cmo_owners');
  localStorage.removeItem('at_admin');
  sessionStorage.clear();
  if(fbOK&&db){
    try{db.collection('auth').doc('owners').set({list:[{id:'o1',name:'Kavitha (Admin)',pinHash:'',active:false},{id:'o2',name:'Vardhan (Proprietor)',pinHash:'',active:false}]});}catch(e){}
  }
  if(custs)localStorage.setItem('cmo_customers',custs);
  if(days)localStorage.setItem('cmo_days',days);
  if(paid)localStorage.setItem('cmo_paid',paid);
  if(settings)localStorage.setItem('cmo_settings',settings);
  localStorage.setItem('pin_reset','1');
  sOId='o1';sBoyMode=false;
  openSetupMo('Set Your New PIN','Admin');
}

// ===== TOGGLE DELIVERY FROM ROUTE (for agent) =====
function toggleDelFromRoute(id){
  const c=DB.customers.find(x=>x.id===id);
  if(!c)return;
  // Check delivery time lock for agent
  if(role==='agent'){
    const agent=getAgentById(agentId);
    // Try to get end time from agent settings or global settings
    const endTime=agent?.delivEnd||DB.settings.delivEnd||'';
    if(endTime){
      const now=new Date();
      const parts=endTime.split(':');
      const end=new Date();end.setHours(parseInt(parts[0]),parseInt(parts[1]),0,0);
      if(now>end){
        alert('⛔ Delivery time ended at '+fmtTime(endTime)+'.\nPlease contact Manager to make changes.');
        return;
      }
    }
  }
  const day=dKey();
  let dd=DB.getDayData(day);
  if(!dd[id])dd[id]={delivered:false,qty:parseFloat(c.litres)||1};
  // Confirmation before unticking
  if(dd[id].delivered){
    if(!confirm('Remove delivery mark for '+c.name+'?'))return;
  }
  dd[id].delivered=!dd[id].delivered;
  if(dd[id].delivered){
    const t=new Date().toLocaleTimeString('en-IN',{hour:'2-digit',minute:'2-digit'});
    dd[id].delivTime=t;
    dd[id].markedBy=whoAmI();
    // Send notification to customer
    fSet('deliveryNotifs',id,{body:(dd[id].qty||parseFloat(c.litres)||1)+'L delivered at '+t,read:false,ts:Date.now()});
    // Notify admin
    fSet('deliveryUpdates','latest',{msg:c.name+' — '+(dd[id].qty||parseFloat(c.litres)||1)+'L delivered at '+t,time:new Date().toISOString(),read:false});
  }else{
    delete dd[id].delivTime;
    delete dd[id].markedBy;
    fSet('deliveryNotifs',id,{body:'',read:true,ts:Date.now()});
  }
  DB.setDayData(day,dd);
  // Refresh route
  renderRoute();
}

// ===== LOCATION =====
function startBoyLoc(){
  if(locInt)return; // v14.4: already running - don't restart, don't re-notify (was causing sound spam!)
  if(!navigator.geolocation){alert('Location not supported');return;}
  const sv=()=>navigator.geolocation.getCurrentPosition(p=>fSet('tracking','boyLocation',{lat:p.coords.latitude,lng:p.coords.longitude,updated:new Date().toISOString(),active:true}),e=>console.log(e),{enableHighAccuracy:true,timeout:10000});
  sv();locInt=setInterval(sv,15000);
  // v14.3: Notify admin - delivery started
  if(role==='agent')fSet('adminNotifs','latest',{msg:'🚴 '+whoAmI()+' started delivery — location ON',time:new Date().toISOString(),read:false});
}
function stopBoyLoc(){
  const wasOn=!!locInt; // v14.3: only notify if location was actually running
  if(locInt){clearInterval(locInt);locInt=null;}
  fSet('tracking','boyLocation',{active:false,updated:new Date().toISOString()});
  // v14.3: Notify admin - location turned OFF
  if(wasOn&&role==='agent')fSet('adminNotifs','latest',{msg:'⚠️ '+whoAmI()+' turned OFF location!',time:new Date().toISOString(),read:false});
}

// ===== TRACKING =====
function renderTrack(){
  // Show route tabs in Track main tab (ADMIN ONLY)
  const routeTabs=document.getElementById('routeTabs');
  if(routeTabs)routeTabs.style.display=(role==='admin')?'block':'none';
  
  const el=document.getElementById('trackContent');
  el.innerHTML=`<div class="nb nb-b">Updates every 15 sec. Agent must turn ON location in Route tab.</div>
    <div class="card" style="background:linear-gradient(135deg,#1A5FA0,#134880);color:white;">
      <div style="font-size:14px;font-weight:bold;margin-bottom:5px;">📍 Agent Location</div>
      <div id="owTrSt" style="font-size:12px;opacity:0.85;">Loading...</div>
      <div id="trMap" style="margin-top:8px;"></div>
    </div>
    <div class="card"><div class="card-title">📋 Today's Progress</div><div id="trProg"></div></div>
    <div class="card"><div class="card-title">📞 Call Agent</div>
      <button class="call-btn" id="callAgentBtn">🚴 <span><strong>Call Delivery Agent</strong><br><span id="trBoyNo" style="font-size:11px;"></span></span></button>
    </div>`;
  const s=DB.settings;const el2=document.getElementById('trBoyNo');if(el2)el2.textContent=s.boyPhone||'Not set';
  const cab=document.getElementById('callAgentBtn');if(cab)cab.addEventListener('click',()=>callNo('boy'));
  loadTrackData();fListen('tracking','boyLocation',updateTrackUI);
}
async function loadTrackData(){
  const data=await fGet('tracking','boyLocation');updateTrackUI(data||{active:false});
  const custs=DB.customers,dd=DB.getDayData(dKey());
  const el=document.getElementById('trProg');
  if(el)el.innerHTML=custs.map(c=>{const d=dd[c.id]||{};return`<div class="di"><span style="font-size:17px;">${d.delivered?'✅':'⏳'}</span><div class="di-info"><div class="di-name">${c.name}</div><div class="di-addr">${d.delivered?'Delivered'+(d.delivTime?' at '+d.delivTime:''):'Pending'}</div></div><span style="font-size:11px;color:#999;">${(dd[c.id]||{qty:parseFloat(c.litres)||1}).qty}L</span></div>`;}).join('');
}
function updateTrackUI(data){
  const sEl=document.getElementById('owTrSt'),mEl=document.getElementById('trMap');if(!sEl)return;
  if(!data||!data.active){sEl.textContent='🔴 Location sharing OFF';if(mEl)mEl.innerHTML='';return;}
  const mins=Math.floor((Date.now()-new Date(data.updated).getTime())/60000);
  sEl.textContent='🟢 Active • '+(mins<1?'Just now':mins+' min ago');
  if(mEl&&data.lat)mEl.innerHTML=`<a href="https://maps.google.com/?q=${data.lat},${data.lng}" target="_blank"><button class="btn-sm" style="background:rgba(255,255,255,0.2);color:white;border:1px solid rgba(255,255,255,0.4);">📍 Open Maps</button></a>`;
}

// ===== BILL =====
// v13: Fetch FULL month daydata from Firebase ONCE per month-view (NO listeners - safe one-time read)
let billFetchedMonths={};
// v13.6: Throttled one-time fetch of next 14 days for advance orders (NO listeners, max once per 2 min)
let lastFutureFetch=0;
async function fetchFutureDays(){
  if(!fbOK||!db)return false;
  if(Date.now()-lastFutureFetch<120000)return false;
  lastFutureFetch=Date.now();
  try{
    const s=new Date();s.setDate(s.getDate()+1);
    const e=new Date();e.setDate(e.getDate()+14);
    const snap=await db.collection('daydata')
      .where(firebase.firestore.FieldPath.documentId(),'>=',dKey(s))
      .where(firebase.firestore.FieldPath.documentId(),'<=',dKey(e))
      .get();
    const a=JSON.parse(localStorage.getItem('cmo_days')||'{}');
    snap.forEach(doc=>{a[doc.id]=doc.data();});
    localStorage.setItem('cmo_days',JSON.stringify(a));
    return true;
  }catch(e2){console.log('Future fetch:',e2);return false;}
}
async function fetchMonthData(ym){
  if(!fbOK||!db)return false;
  try{
    const snap=await db.collection('daydata')
      .where(firebase.firestore.FieldPath.documentId(),'>=',ym+'-01')
      .where(firebase.firestore.FieldPath.documentId(),'<=',ym+'-31')
      .get();
    const a=JSON.parse(localStorage.getItem('cmo_days')||'{}');
    snap.forEach(doc=>{a[doc.id]=doc.data();});
    localStorage.setItem('cmo_days',JSON.stringify(a));
    return true;
  }catch(e){console.log('Bill month fetch:',e);return false;}
}
// v15.13: Export full month data as CSV (opens in Excel) - permanent offline record
function exportMonthCSV(){
  const ym=`${billY}-${String(billM+1).padStart(2,'0')}`;
  const monthName=fmtMY(billY,billM);
  const all=JSON.parse(localStorage.getItem('cmo_days')||'{}');
  const days=Object.keys(all).filter(d=>d.startsWith(ym)).sort();
  const custs=DB.customers.slice().sort((a,b)=>a.name.localeCompare(b.name));
  const paid=DB.getMonthPaid(ym);
  const esc=s=>'"'+String(s==null?'':s).replace(/"/g,'""')+'"';
  let csv='CHAITANYA DAIRY - '+monthName+'\n\nSUMMARY\n';
  csv+='Customer,Phone,Route,Price/L,Total Litres,Total Amount,Payment\n';
  let gL=0,gA=0;
  custs.forEach(c=>{
    let L=0,A=0;
    days.forEach(day=>{const d=all[day][c.id];if(d&&d.delivered){L+=parseFloat(d.qty)||0;A+=(parseFloat(d.qty)||0)*c.price;}});
    if(L>0||isFullPaid(paid[c.id])){
      gL+=L;gA+=A;
      const ag=(DB.settings.agents||[]).find(a=>a.id===c.route);
      const pd=isFullPaid(paid[c.id])?('PAID'+(paid[c.id].by?' by '+paid[c.id].by+' on '+(paid[c.id].d||''):'')):'PENDING';
      csv+=[esc(c.name),esc(c.mobile),esc(ag?ag.name:''),c.price,Math.round(L*100)/100,Math.round(A),esc(pd)].join(',')+'\n';
    }
  });
  csv+=',,,TOTAL,'+Math.round(gL*100)/100+','+Math.round(gA)+',\n\nDAILY DETAILS\nDate,Customer,Litres,Amount,Marked By,Time\n';
  days.forEach(day=>{
    custs.forEach(c=>{
      const d=all[day][c.id];
      if(d&&d.delivered){
        csv+=[esc(fmtDM(day)),esc(c.name),parseFloat(d.qty)||0,Math.round((parseFloat(d.qty)||0)*c.price),esc(d.markedBy||''),esc(d.delivTime||'')].join(',')+'\n';
      }
    });
  });
  const blob=new Blob(['\ufeff'+csv],{type:'text/csv;charset=utf-8;'});
  const a=document.createElement('a');
  a.href=URL.createObjectURL(blob);
  a.download='Chaitanya_Dairy_'+monthName.replace(/\s/g,'_')+'.csv';
  document.body.appendChild(a);a.click();a.remove();
  alert('✅ '+monthName+' exported! Check your Downloads folder. Open with Excel/Sheets.');
}
function isFullPaid(r){return !!(r&&r.p===true);}
function _exPrice(name){var pr=(DB.products||[]).find(function(p){return p.name===name;});return pr?(parseFloat(DB.settings['price_'+pr.id])||0):0;}
function billExtrasFor(cid,ym){var all=JSON.parse(localStorage.getItem('cmo_days')||'{}');var out=[];Object.keys(all).filter(function(d){return d.indexOf(ym)===0;}).sort().forEach(function(dk){var d=all[dk]&&all[dk][cid];if(d&&d.delivered&&d.extraOrders){Object.keys(d.extraOrders).forEach(function(name){var val=d.extraOrders[name];if(!val)return;var q=parseFloat(val)||0;if(q<=0)return;out.push({key:dk+'__'+name,dk:dk,name:name,label:val+' '+name,amt:Math.round(q*_exPrice(name))});});}});return out;}
function _getPaidRec(ym,cid){var pp=DB.getMonthPaid(ym);var r=pp[cid];return (r&&typeof r==='object')?Object.assign({},r):{};}
function _exStamp(){return {by:whoAmI(),date:new Date().toLocaleDateString('en-IN',{day:'numeric',month:'short'})};}
function billToggleExtra(cid,ym,key){var r=_getPaidRec(ym,cid);var ep=Object.assign({},r.epaid||{});if(ep[key])delete ep[key];else ep[key]=_exStamp();r.epaid=ep;DB.setOnePaid(ym,cid,r);renderBill();}
function billPayAllExtras(cid,ym){var r=_getPaidRec(ym,cid);var ep=Object.assign({},r.epaid||{});billExtrasFor(cid,ym).forEach(function(e){if(!ep[e.key])ep[e.key]=_exStamp();});r.epaid=ep;DB.setOnePaid(ym,cid,r);renderBill();}
function _today(){return new Date().toLocaleDateString('en-IN',{day:'numeric',month:'short'});}
function billMilkTotalG(cid,ym){var all=JSON.parse(localStorage.getItem('cmo_days')||'{}');var c=(DB.customers||[]).find(function(x){return x.id===cid;});var price=c?(parseFloat(c.price)||0):0;var t=0;Object.keys(all).filter(function(d){return d.indexOf(ym)===0;}).forEach(function(dk){var d=all[dk]&&all[dk][cid];if(d&&d.delivered)t+=(parseFloat(d.qty)||0)*price;});return Math.round(t);}
function billNetG(cid,ym){var rec=DB.getMonthPaid(ym)[cid]||{};var milk=(rec.p===true)?0:billMilkTotalG(cid,ym);var exs=billExtrasFor(cid,ym);var exU=exs.reduce(function(a,e){return a+e.amt;},0);var mp=(rec.mpays||[]).reduce(function(a,x){return a+x.amt;},0);var adv=rec.adv||0;return milk+exU-mp-adv;}
function _allMonthsG(){var days=JSON.parse(localStorage.getItem('cmo_days')||'{}');var pd=JSON.parse(localStorage.getItem('cmo_paid')||'{}');var set={};Object.keys(days).forEach(function(dk){set[dk.slice(0,7)]=1;});Object.keys(pd).forEach(function(m){set[m]=1;});return Object.keys(set).sort();}
function billCarryInG(cid,ym){return _allMonthsG().filter(function(m){return m<ym;}).reduce(function(a,m){return a+billNetG(cid,m);},0);}
function billTotalDueG(cid,ym){return billCarryInG(cid,ym)+billNetG(cid,ym);}
function billDueForG(cid,ym){return Math.max(0,billTotalDueG(cid,ym));}
function billAddPay(cid,ym){var el=document.getElementById('mpay_'+cid);var v=parseFloat(el&&el.value);if(!v||v<=0)return;var nel=document.getElementById('mnote_'+cid);var note=(nel&&nel.value)?nel.value.trim():'';var bal=billDueForG(cid,ym);if(v>bal+0.5){if(!confirm('\u26a0\ufe0f \u20b9'+Math.round(v)+' is more than the balance (\u20b9'+bal+'). Are you sure?'))return;}var r=_getPaidRec(ym,cid);var mp=(r.mpays||[]).slice();mp.push({amt:Math.round(v),date:_today(),by:whoAmI(),note:note});r.mpays=mp;DB.setOnePaid(ym,cid,r);renderBill();}
function billRmPay(cid,ym,i){if(!confirm('Delete this manual payment?'))return;var r=_getPaidRec(ym,cid);var mp=(r.mpays||[]).slice();mp.splice(i,1);r.mpays=mp;DB.setOnePaid(ym,cid,r);renderBill();}
function billPayFull(cid,ym,amt){var bal=(typeof amt==='number'&&amt>0)?Math.round(amt):billDueForG(cid,ym);if(bal<=0)return;var r=_getPaidRec(ym,cid);var mp=(r.mpays||[]).slice();mp.push({amt:bal,date:_today(),by:whoAmI(),note:''});r.mpays=mp;DB.setOnePaid(ym,cid,r);renderBill();}
function billAddAdv(cid,ym){var el=document.getElementById('adv_'+cid);var v=parseFloat(el&&el.value);if(!v||v<=0)return;var r=_getPaidRec(ym,cid);var ah=(r.advHist||[]).slice();ah.push({amt:Math.round(v),date:_today(),by:whoAmI()});r.advHist=ah;r.adv=ah.reduce(function(a,x){return a+x.amt;},0);DB.setOnePaid(ym,cid,r);renderBill();}
function billRmAdv(cid,ym,i){if(!confirm('Delete this advance payment?'))return;var r=_getPaidRec(ym,cid);var ah=(r.advHist||[]).slice();ah.splice(i,1);r.advHist=ah;r.adv=ah.reduce(function(a,x){return a+x.amt;},0);DB.setOnePaid(ym,cid,r);renderBill();}
function renderBill(){
  if(role!=='admin')return;
  // Hide route tabs in Bill main tab - same as Customers and Add/Settings
  const routeTabs=document.getElementById('routeTabs');
  if(routeTabs)routeTabs.style.display='none';
  
  // v13: One-time fetch of full month from Firebase, then re-render with complete data
  const ymFetch=`${billY}-${String(billM+1).padStart(2,'0')}`;
  if(!billFetchedMonths[ymFetch]){
    billFetchedMonths[ymFetch]=true;
    fetchMonthData(ymFetch).then(ok=>{if(ok)renderBill();});
  }
  
  // Populate route filter dropdown (v13.1: STICKY - remember selection across refresh)
  const filterEl=document.getElementById('billRouteFilter');
  const savedSel=localStorage.getItem('cmo_billFilter')||'';
  if(filterEl){
    while(filterEl.options.length>1){
      filterEl.remove(1);
    }
    const agents=DB.settings.agents||[];
    agents.forEach(a=>{
      const opt=document.createElement('option');
      opt.value=a.id;
      opt.textContent='🚴 '+a.name+(a.agentName?' ('+a.agentName+')':'');
      filterEl.appendChild(opt);
    });
    filterEl.value=savedSel; // restore the sticky selection
  }
  
  document.getElementById('mLbl').textContent=fmtMY(billY,billM);
  // v15.13: export button (admin only)
  const ebx=document.getElementById('billExportBtn');
  if(ebx){ebx.style.display=role==='admin'?'block':'none';ebx.onclick=exportMonthCSV;}
  const allCusts=DB.customers.slice().sort((a,b)=>a.name.localeCompare(b.name)); // v13.13: alphabetical
  const custs=role==='admin'?getSelectedAgentCustomers():DB.customers;
  const all=JSON.parse(localStorage.getItem('cmo_days')||'{}');
  const ym=`${billY}-${String(billM+1).padStart(2,'0')}`;
  const days=Object.keys(all).filter(d=>d.startsWith(ym));
  const tots={};allCusts.forEach(c=>{tots[c.id]={L:0,A:0};});
  days.forEach(day=>{const dd=all[day];allCusts.forEach(c=>{const d=dd[c.id];if(d&&d.delivered){tots[c.id].L+=parseFloat(d.qty)||0;tots[c.id].A+=(parseFloat(d.qty)||0)*c.price;}});});
  const tL=Object.values(tots).reduce((s,t)=>s+t.L,0),tA=Object.values(tots).reduce((s,t)=>s+t.A,0);
  document.getElementById('bD').textContent=days.length;document.getElementById('bL').textContent=Math.round(tL*10)/10+'L';document.getElementById('bT').textContent='₹'+Math.round(tA);
  const paid=DB.getMonthPaid(ym);
  if(!allCusts.length){document.getElementById('billTbl').innerHTML='<div class="empty">No customers.</div>';return;}
  
  // Function to render bill table with filter
  const renderBillTable=(filterVal='')=>{
    let tableCusts=allCusts;
    if(filterVal){tableCusts=allCusts.filter(c=>c.route===filterVal);}
    window.billOpenSet=window.billOpenSet||new Set();
    const yparts=ym.split('-');const yy=parseInt(yparts[0]);const mm=parseInt(yparts[1]);
    const tdy=new Date();const isCur=(tdy.getFullYear()===yy&&(tdy.getMonth()+1)===mm);
    const lastDay=isCur?tdy.getDate():new Date(yy,mm,0).getDate();
    const missCount=(c)=>{let n=0;for(let dn=1;dn<=lastDay;dn++){const dk=ym+'-'+String(dn).padStart(2,'0');const rec=(all[dk]&&all[dk][c.id])?all[dk][c.id]:null;if(!(rec&&rec.delivered)&&!isSkipped(c,dk)&&!isOnAltDay(c,dk))n++;}return n;};
    const dailyRows=(c)=>{let rows=[];for(let dn=1;dn<=lastDay;dn++){const dk=ym+'-'+String(dn).padStart(2,'0');const rec=(all[dk]&&all[dk][c.id])?all[dk][c.id]:null;let h='';if(rec&&rec.delivered){const q=parseFloat(rec.qty)||0;h='<div style="display:flex;padding:6px 2px;border-bottom:1px solid #f5f5f5;font-size:14px;"><span style="width:64px;color:#999;flex-shrink:0;">'+fmtDay(dk)+'</span><span style="flex:1;font-weight:600;">✅ Delivered</span><span style="font-weight:700;color:#1A5FA0;">'+q+'L · ₹'+Math.round(q*c.price)+'</span></div>';}else if(isOnAltDay(c,dk)){h='<div style="display:flex;padding:6px 2px;border-bottom:1px solid #f5f5f5;font-size:14px;"><span style="width:64px;color:#999;flex-shrink:0;">'+fmtDay(dk)+'</span><span style="flex:1;font-weight:600;color:#aaa;">⏭️ Alternate day</span><span style="color:#bbb;">—</span></div>';}else if(isSkipped(c,dk)){h='<div style="display:flex;padding:6px 2px;border-bottom:1px solid #f5f5f5;font-size:14px;"><span style="width:64px;color:#999;flex-shrink:0;">'+fmtDay(dk)+'</span><span style="flex:1;font-weight:600;color:#8a5a00;">⏸️ On hold</span><span style="color:#bbb;">—</span></div>';}else{h='<div style="display:flex;padding:6px 2px;border-bottom:1px solid #f5f5f5;font-size:14px;background:#FDECEA;border-radius:6px;"><span style="width:64px;color:#999;flex-shrink:0;">'+fmtDay(dk)+'</span><span style="flex:1;font-weight:600;color:#C0392B;">🔴 Not marked</span><span style="color:#C0392B;">?</span></div>';}rows.push({html:h,d:dn});}rows.reverse();return rows.map(r=>r.html).join('');}
    const cardsHTML=tableCusts.map(c=>{const isP=isFullPaid(paid[c.id])?paid[c.id]:false;const open=window.billOpenSet.has(c.id);const ms=missCount(c);const exs=billExtrasFor(c.id,ym);const exTotal=exs.reduce(function(a,e){return a+e.amt;},0);const _rec=paid[c.id]||{};const mpaid=(_rec.mpays||[]).reduce(function(a,x){return a+x.amt;},0);var _rem=mpaid;exs.forEach(function(e){if(_rem>=e.amt){e._cov=true;_rem=Math.round((_rem-e.amt)*100)/100;}else{e._cov=false;}});var exLeftover=Math.round(_rem);const adv=_rec.adv||0;const advH=_rec.advHist||[];const mpH=_rec.mpays||[];const milkDays=Array.from({length:lastDay},function(zz,i){return ym+'-'+String(i+1).padStart(2,'0');}).filter(function(dk){return all[dk]&&all[dk][c.id]&&all[dk][c.id].delivered;}).length;const carryIn=billCarryInG(c.id,ym);const due=carryIn+((isP?0:Math.round(tots[c.id].A))+exTotal-mpaid-adv);const dueAbs=Math.abs(due);const dueCol=(due>0?'#C0392B':'#2A7A4B');const dueLbl=(due>0?'Balance due':(due<0?'Credit (adv)':'\u2705 Cleared'));
      return '<div class="billCard" data-name="'+c.name.toLowerCase().replace(/"/g,'')+'" style="background:#fff;border:1px solid #eee;border-radius:12px;margin-bottom:8px;overflow:hidden;">'+
        '<div class="billHead" data-cid="'+c.id+'" style="display:flex;justify-content:space-between;align-items:center;padding:12px;cursor:pointer;">'+
          '<div><div style="font-weight:700;font-size:17px;">'+c.name+'</div><div style="font-size:13px;color:#888;">'+(c.milkType==='buffalo'?'\ud83d\udc03':'\ud83d\udc04')+' \u20b9'+c.price+'/L'+(ms?' \u00b7 \ud83d\udd34 '+ms+' to check':'')+'</div></div>'+
          '<div style="display:flex;align-items:center;gap:8px;"><div style="text-align:right;"><div style="font-weight:800;font-size:19px;color:'+dueCol+';">\u20b9'+dueAbs+'</div><div style="font-size:12px;color:'+dueCol+';">'+dueLbl+'</div></div><span style="font-size:14px;color:#aaa;">'+(open?'\u25b2':'\u25bc')+'</span></div>'+
        '</div>'+
        (open?('<div style="border-top:1px solid #eee;padding:10px 12px;">'+(carryIn!==0?('<div style="background:'+(carryIn>0?'#FDECEA':'#E8F5EE')+';border-radius:8px;padding:8px 10px;margin-bottom:10px;font-size:12px;font-weight:800;color:'+(carryIn>0?'#C0392B':'#2A7A4B')+';">'+(carryIn>0?('\u21aa\ufe0f Previous months due: \u20b9'+carryIn):('\ud83d\udcb0 Credit from before: \u20b9'+Math.abs(carryIn)))+'</div>'):'')+
          '<div style="font-size:14px;font-weight:800;color:#666;margin-bottom:6px;">💰 ADVANCE / PREPAID</div>'+(advH.length?('<div style="margin-bottom:6px;">'+advH.map(function(a,i){return '<div style="display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#1F7244;background:#E8F5EE;border-radius:6px;padding:4px 8px;margin-bottom:3px;"><span>💰 ₹'+a.amt+' · '+a.date+'</span><span onclick="billRmAdv(\''+c.id+'\',\''+ym+'\','+i+')" style="color:#C0392B;font-weight:800;cursor:pointer;">✕</span></div>';}).join('')+'</div>'):'')+'<div style="display:flex;gap:6px;margin-bottom:14px;"><input id="adv_'+c.id+'" type="number" inputmode="numeric" placeholder="₹ advance given before" style="flex:1;border:2px solid #1A5FA0;border-radius:8px;padding:8px;font-size:14px;"><button class="btn-sm" onclick="billAddAdv(\''+c.id+'\',\''+ym+'\')" style="background:#1A5FA0;color:#fff;font-weight:700;white-space:nowrap;">+ Add</button></div>'+'<div style="font-size:14px;font-weight:800;color:#666;margin-bottom:6px;">🥛 MILK — '+milkDays+' days · ₹'+Math.round(tots[c.id].A)+'</div>'+
          '<div style="max-height:220px;overflow-y:auto;border:1px solid #f0f0f0;border-radius:10px;padding:4px 8px;">'+dailyRows(c)+'</div>'+
          '<div style="display:flex;justify-content:space-between;align-items:center;margin-top:10px;"><div style="font-size:15px;">Month total: <b style="color:#E8621A;">\u20b9'+Math.round(tots[c.id].A)+'</b></div></div>'+
          '<div style="font-size:14px;font-weight:800;color:#666;margin:12px 0 6px;">🧀 EXTRA ORDERS</div>'+
          (exs.length? exs.map(function(e){var isp=!!e._cov;return '<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid #f5f5f5;font-size:14px;"><span style="color:#999;width:54px;flex-shrink:0;">'+fmtDay(e.dk)+'</span><span style="flex:1;font-weight:600;">'+e.label+'</span><span style="font-weight:700;color:#6B3FA0;text-align:right;">\u20b9'+e.amt+(isp?' \u2705':'')+'</span></div>';}).join('') : '<div style="font-size:13px;color:#aaa;padding:4px 0;">No extra orders this month</div>')+
          (exLeftover>0?'<div style="font-size:13px;font-weight:700;color:#1F7244;padding:6px 2px;">\ud83d\udcb5 \u20b9'+exLeftover+' paid</div>':'')+
          '<div style="font-size:14px;font-weight:800;color:#666;margin:14px 0 6px;">💵 MANUALLY PAID</div>'+(mpH.length?('<div style="margin-bottom:6px;">'+mpH.map(function(pp,i){return '<div style="display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#1F7244;background:#E8F5EE;border-radius:6px;padding:6px 10px;margin-bottom:3px;"><span>💵 ₹'+pp.amt+(pp.note?' · '+pp.note:'')+' · '+pp.date+'</span><span onclick="billRmPay(\''+c.id+'\',\''+ym+'\','+i+')" style="color:#C0392B;font-weight:800;cursor:pointer;">✕</span></div>';}).join('')+'</div>'):'')+'<input id="mnote_'+c.id+'" type="text" placeholder="What for? e.g. paneer (optional)" style="width:100%;box-sizing:border-box;border:2px solid #ccc;border-radius:8px;padding:9px;font-size:15px;margin-bottom:6px;">'+'<div style="display:flex;gap:6px;"><input id="mpay_'+c.id+'" type="number" inputmode="numeric" placeholder="₹ amount paid" style="flex:1;border:2px solid #1A5FA0;border-radius:8px;padding:9px;font-size:15px;"><button class="btn-sm" onclick="billAddPay(\''+c.id+'\',\''+ym+'\')" style="background:#1A5FA0;color:#fff;font-weight:700;white-space:nowrap;">+ Add</button></div>'+(due>0?'<button class="btn-sm" onclick="billPayFull(\''+c.id+'\',\''+ym+'\','+due+')" style="width:100%;margin-top:6px;background:#1F7244;color:#fff;font-weight:700;font-size:15px;">✅ Pay full balance</button>':'<button class="btn-sm" disabled style="width:100%;margin-top:6px;background:#E0E0E0;color:#999;font-weight:700;font-size:15px;cursor:default;">✅ Fully paid</button>')+'<div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:8px;border-top:2px solid #eee;"><span style="font-size:15px;font-weight:700;">Total still due</span><span style="font-size:20px;font-weight:900;color:'+dueCol+';">₹'+dueAbs+'</span></div>'+
        '</div>'):'')+
      '</div>';}).join('');
    var _bsy=window.scrollY||window.pageYOffset||document.documentElement.scrollTop||0;
    document.getElementById('billTbl').innerHTML=cardsHTML+'<div class="billFooterTotal" style="text-align:center;font-size:12px;color:#888;padding:8px;font-weight:700;">TOTAL '+days.length+' days \u00b7 \u20b9'+Math.round(tableCusts.reduce((s,c)=>s+tots[c.id].A,0))+'</div>';
    document.querySelectorAll('#billTbl .billHead').forEach(h=>{h.addEventListener('click',function(e){e.preventDefault();const id=this.dataset.cid;var wasOpen=window.billOpenSet.has(id);if(wasOpen){window.billOpenSet.delete(id);}else{window.billOpenSet.clear();window.billOpenSet.add(id);}renderBillTable(filterEl?filterEl.value:'');if(wasOpen){var bk=null;document.querySelectorAll('#billTbl .billHead').forEach(function(hh){if(hh.getAttribute('data-cid')===id)bk=hh;});if(bk){bk.scrollIntoView({block:'center'});}}else{var openHead=null;document.querySelectorAll('#billTbl .billHead').forEach(function(hh){if(hh.getAttribute('data-cid')===id)openHead=hh;});if(openHead){var hdrEl=document.querySelector('.hdr');var hOff=hdrEl?Math.round(hdrEl.getBoundingClientRect().height):0;var doSnap=function(){var cy=openHead.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||0)-hOff-4;window.scrollTo(0,Math.max(0,cy));};doSnap();requestAnimationFrame(doSnap);}else{window.scrollTo(0,0);requestAnimationFrame(function(){window.scrollTo(0,0);});}}});});
    document.querySelectorAll('#billTbl .billPaidBtn').forEach(btn=>{btn.addEventListener('click',function(e){e.stopPropagation();openPaidMo(this.dataset.cid,this.dataset.ym,this.dataset.name,this.dataset.amt);});});
    const sv=(document.getElementById('billSearch')?document.getElementById('billSearch').value:'').toLowerCase();
    if(sv){document.querySelectorAll('#billTbl .billCard').forEach(card=>{if(!(card.getAttribute('data-name')||'').includes(sv))card.style.display='none';});}
    // v22.3 FOCUS MODE: if a customer is open, show ONLY that customer (fills screen); hide all other cards + footer total
    var _focusOn=(window.billOpenSet&&window.billOpenSet.size>0);
    if(_focusOn){
      document.querySelectorAll('#billTbl .billCard').forEach(function(card){
        var hd=card.querySelector('.billHead');
        var cid=hd?hd.getAttribute('data-cid'):null;
        card.style.display=(cid&&window.billOpenSet.has(cid))?'block':'none';
      });
      var _ft=document.querySelector('#billTbl .billFooterTotal');
      if(_ft)_ft.style.display='none';
    }
    // v22.5: grey out + disable search box and route filter while a customer is open; restore them when closed
    var _sbx=document.getElementById('billSearch');var _rfx=document.getElementById('billRouteFilter');
    if(_sbx){_sbx.disabled=_focusOn;_sbx.style.opacity=_focusOn?'0.4':'';_sbx.style.pointerEvents=_focusOn?'none':'';}
    if(_rfx){_rfx.disabled=_focusOn;_rfx.style.opacity=_focusOn?'0.4':'';_rfx.style.pointerEvents=_focusOn?'none':'';}
    window.scrollTo(0,_bsy);requestAnimationFrame(function(){window.scrollTo(0,_bsy);});
  };

  // Function to update consolidated summary
  const updateConsolidatedSummary=(filterVal='')=>{
    let filteredCusts=allCusts;
    if(filterVal){
      filteredCusts=allCusts.filter(c=>c.route===filterVal);
    }
    const filteredPaid=filteredCusts.filter(c=>isFullPaid(paid[c.id])).length;
    const filteredPending=filteredCusts.length-filteredPaid;
    const filteredPaidAmt=filteredCusts.filter(c=>isFullPaid(paid[c.id])).reduce((s,c)=>s+tots[c.id].A,0);
    const filteredTotalAmt=filteredCusts.reduce((s,c)=>s+tots[c.id].A,0);
    const filteredPendingAmt=filteredTotalAmt-filteredPaidAmt;
    
    document.getElementById('billConsolidated').innerHTML=`
      <div style="display:flex;gap:12px;flex-wrap:wrap;padding:6px;background:#F5F5F5;border-radius:8px;font-weight:bold;">
        <div style="flex:1;min-width:110px;text-align:center;">
          <div style="color:#2A7A4B;font-size:16px;">✅ ${filteredPaid}</div>
          <div style="font-size:10px;color:#666;">Paid</div>
        </div>
        <div style="flex:1;min-width:110px;text-align:center;">
          <div style="color:#C0392B;font-size:16px;">⏳ ${filteredPending}</div>
          <div style="font-size:10px;color:#666;">Pending</div>
        </div>
        <div style="flex:1;min-width:110px;text-align:center;">
          <div style="color:#1A5FA0;font-size:16px;">₹${Math.round(filteredPaidAmt)}</div>
          <div style="font-size:10px;color:#666;">Paid Amount</div>
        </div>
        <div style="flex:1;min-width:110px;text-align:center;">
          <div style="color:#E8621A;font-size:16px;">₹${Math.round(filteredPendingAmt)}</div>
          <div style="font-size:10px;color:#666;">Pending Amount</div>
        </div>
        <div style="flex:1;min-width:110px;text-align:center;">
          <div style="color:#6B3FA0;font-size:16px;">₹${Math.round(filteredTotalAmt)}</div>
          <div style="font-size:10px;color:#666;">Total</div>
        </div>
      </div>
    `;
  };
  
  // Render initial table and summary (v13.1: use sticky selection, not reset)
  renderBillTable(savedSel);
  updateConsolidatedSummary(savedSel);
  
  // Add dropdown filter listener (v13.1: save selection to sticky note)
  if(filterEl){
    filterEl.onchange=function(){
      localStorage.setItem('cmo_billFilter',this.value);
      renderBillTable(this.value);
      updateConsolidatedSummary(this.value);
    };
  }
  
  // Add search functionality to Bill tab (v13.2: STICKY - search survives refresh)
  const applyBillSearch=(term)=>{
    const searchTerm=(term||'').toLowerCase();
    document.querySelectorAll('#billTbl .billCard').forEach(card=>{
      const nm=card.getAttribute('data-name')||'';
      card.style.display=nm.includes(searchTerm)?'block':'none';
    });
  };
  const billSearchBox=document.getElementById('billSearch');
  if(billSearchBox){
    const savedSearch=localStorage.getItem('cmo_billSearch')||'';
    billSearchBox.value=savedSearch;        // restore typed text after refresh
    if(savedSearch)applyBillSearch(savedSearch); // re-apply filter to new table
    billSearchBox.oninput=function(){
      localStorage.setItem('cmo_billSearch',this.value);
      applyBillSearch(this.value);
    };
  }
}
function openPaidMo(cid,ym,n,a){paidCid=cid;paidYM=ym;document.getElementById('paidSub').textContent=n+' — ₹'+a+' for '+fmtMY(parseInt(ym.split('-')[0]),parseInt(ym.split('-')[1])-1);openMo('paidMo');}
function markPaid(v){var ex=_getPaidRec(paidYM,paidCid);ex.p=!!v;if(v){ex.by=whoAmI();ex.d=_today();}DB.setOnePaid(paidYM,paidCid,ex);closeMo('paidMo');renderBill();}

// ===== CUSTOMERS =====
function renderCusts(){
  // Hide route tabs ONLY in Customers main tab - don't affect other main tabs
  const routeTabs=document.getElementById('routeTabs');
  if(routeTabs)routeTabs.style.display='none';
  
  // Populate route filter dropdown (ADMIN ONLY - hidden for agent)
  const filterEl=document.getElementById('custRouteFilter');
  if(role==='agent'){
    if(filterEl)filterEl.style.display='none';
  }else if(filterEl&&filterEl.options.length<=1){
    const agents=DB.settings.agents||[];
    agents.forEach(a=>{
      const opt=document.createElement('option');
      opt.value=a.id;opt.textContent='🚴 '+a.name+(a.agentName?' ('+a.agentName+')':'');
      filterEl.appendChild(opt);
    });
    // Set default to selected route
    if(selectedRouteId)filterEl.value=selectedRouteId;
  }
  // Filter customers based on dropdown selection (agent: only own assigned customers)
  let custs=DB.customers;
  if(role==='agent'&&agentId){
    custs=custs.filter(c=>c.route===agentId);
  }else{
    const filterVal=filterEl?filterEl.value:'';
    if(filterVal){
      custs=custs.filter(c=>c.route===filterVal);
    }
  }
  const el=document.getElementById('custList');
  // v13.13: Search by name filter
  const cq=(document.getElementById('custSearch')?.value||'').toLowerCase().trim();
  if(cq)custs=custs.filter(c=>c.name.toLowerCase().includes(cq));
  // v13.13: Customers tab ALWAYS alphabetical by name
  custs=custs.slice().sort((a,b)=>a.name.localeCompare(b.name));
  // v13.5: Show count in title - 👥 Customers 28
  const ttl=document.getElementById('custTitle');
  if(ttl)ttl.textContent='👥 Customers '+custs.length;
  if(!custs.length){el.innerHTML='<div class="empty">👥<br>No customers yet.</div>';return;}
  el.innerHTML='';
  custs.forEach(c=>{
    const div=document.createElement('div');div.className='card';div.style.marginBottom='10px';
    div.innerHTML=`<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;">
      <div><div style="font-weight:bold;font-size:14px;">${c.name}${role==='admin'&&c.inactive?' <span style="background:#eee;color:#666;font-size:9px;font-weight:bold;padding:1px 6px;border-radius:6px;">💤 Inactive</span>':''}${role==='admin'&&c.hold?` <span style="background:#FFF4E5;color:#E8621A;font-size:9px;font-weight:bold;padding:1px 6px;border-radius:6px;">⏸️ Hold ${fmtDM(c.hold.from)}→${fmtDM(c.hold.to)}</span>`:''}</div>
      ${role==='admin'?`<div style="font-size:11px;color:#1A5FA0;font-weight:bold;"><a href="tel:${c.mobile}" style="color:#1A5FA0;text-decoration:none;">📞 ${c.mobile}</a></div>`:''}      <div style="font-size:11px;color:#999;">📍 ${c.address.substring(0,35)}</div>
      ${c.delivTime?`<div style="font-size:10px;color:#D4A017;font-weight:bold;">⏰ ${fmtTime(c.delivTime)}</div>`:''}
      </div>
      ${role==='admin'?`<button class="btn-sm" style="background:#E8F2FF;color:#1A5FA0;" data-id="${c.id}">✏️ Edit</button>`:''}
    </div>
    <div>${c.milkType==='buffalo'?'<span class="chip" style="background:#E8E0FF;color:#5533AA;">🐃 Buffalo</span>':'<span class="chip" style="background:#FFF3CD;color:#8B6914;">🐄 Cow</span>'}
    <span class="chip" style="background:#E8F2FF;color:#1A5FA0;">🥛 ${c.litres}L/day</span>
    ${role==='admin'?`<span class="chip" style="background:#F3EEFF;color:#6B3FA0;">₹${c.price}/L</span>`:''}
    <span class="chip" style="background:#f5f5f5;color:#999;">Stop #${c.order}</span></div>
    ${c.mapsLink&&role==='admin'?`<a href="${c.mapsLink}" target="_blank"><button class="btn-sm" style="background:#E8F2FF;color:#1A5FA0;margin-top:8px;">📍 Maps</button></a>`:''}`;
    el.appendChild(div);
    const eb=div.querySelector('.btn-sm[data-id]');if(eb)eb.addEventListener('click',function(){openEdit(this.dataset.id);});
  });
}

// ===== ADD/SETTINGS =====
// v13.14: Auto-capitalize names - "shanti priya" becomes "Shanti Priya"
function titleCase(s){return (s||'').replace(/(^|\s)(\S)/g,(m,sp,ch)=>sp+ch.toUpperCase());}
// v14.2: Quick Move Route - admin moves customer to another route in 2 taps
function quickMove(cid){
  if(role!=='admin')return;
  const list=DB.customers; // v15.16: ONE list held - the copy trap fix!
  const c=list.find(x=>x.id===cid);if(!c)return;
  const agents=DB.settings.agents||[];
  const old=document.getElementById('qmMo');if(old)old.remove();
  const mo=document.createElement('div');mo.id='qmMo';mo.className='mo';mo.style.display='flex';
  mo.innerHTML=`<div class="md" style="max-width:300px;">
    <h2 style="font-size:15px;">🔀 Move ${c.name}</h2>
    <div style="font-size:11px;color:#666;margin-bottom:10px;">Current: ${(agents.find(a=>a.id===c.route)||{}).name||'No route'}</div>
    ${agents.map(a=>`<button class="btn" style="width:100%;margin-bottom:6px;background:${a.id===c.route?'#eee':'#E8F2FF'};color:${a.id===c.route?'#999':'#1A5FA0'};" ${a.id===c.route?'disabled':''} data-route="${a.id}">🚴 ${a.name}${a.agentName?' ('+a.agentName+')':''}</button>`).join('')}
    <button class="btn" style="width:100%;background:#f5f5f5;color:#666;" id="qmCancel">Cancel</button>
  </div>`;
  document.body.appendChild(mo);
  document.getElementById('qmCancel').addEventListener('click',()=>mo.remove());
  mo.querySelectorAll('button[data-route]').forEach(b=>{
    b.addEventListener('click',function(){
      const newRoute=this.dataset.route;
      const orders=list.filter(x=>x.route===newRoute).map(x=>parseInt(x.order)).filter(o=>o&&o<99);
      c.order=orders.length?Math.max(...orders)+1:1;
      c.route=newRoute;
      DB.setCustomers(list); // v15.16: save the SAME list we changed
      mo.remove();
      renderToday();renderRoute();
      alert('✅ '+c.name+' moved!');
    });
  });
}
// v14.1: Auto-shift stop numbers - new customer takes a number, others shift down
function shiftStops(route,newOrder,excludeId){
  newOrder=parseInt(newOrder);
  if(!newOrder||newOrder>=99)return;
  const clash=DB.customers.some(c=>c.route===route&&c.id!==excludeId&&parseInt(c.order)===newOrder);
  if(!clash)return;
  DB.customers.forEach(c=>{
    if(c.route===route&&c.id!==excludeId&&parseInt(c.order)>=newOrder&&parseInt(c.order)<99){c.order=parseInt(c.order)+1;}
  });
}
function addCust(){
  const n=titleCase(document.getElementById('cN').value.trim()),m=document.getElementById('cMo').value.trim(),a=document.getElementById('cA').value.trim();
  const l=document.getElementById('cL').value,p=parseFloat(document.getElementById('cP').value)||0;
  const mt=document.getElementById('cMT').value,o=parseInt(document.getElementById('cO').value)||99;
  const ml=document.getElementById('cML').value.trim(),t=document.getElementById('cT').value;
  const lm=document.getElementById('cLM').value.trim();
  const route=document.getElementById('cRoute').value||'';
  if(!n){alert('Customer name is required!');return;}
  if(!l||l==='0'){alert('Please select milk quantity!');return;}
  if(!route){alert('Please assign customer to a Route!');return;}
  if(m&&m.length!==10){alert('Mobile must be 10 digits!');return;}
  const dup=m?DB.customers.find(c=>c.mobile===m):null;
  if(dup){alert('⚠️ This number is already saved with: '+dup.name+'!');return;}
  shiftStops(route,o,null); // v14.1: shift other stops if number taken
  const custs=DB.customers;custs.push({id:Date.now().toString(),name:n,mobile:m,address:a,landmark:lm,litres:parseFloat(l)||1,price:p,milkType:mt,order:o,mapsLink:ml,delivTime:t,route:route});
  custs.sort((a,b)=>a.order-b.order);DB.setCustomers(custs);
  ['cN','cMo','cA','cP','cO','cML','cLM'].forEach(id=>document.getElementById(id).value='');custLitSet('cL',1);
  document.getElementById('cRoute').value='';
  alert('✅ Added: '+n);
}
function renderAdd(){
  // Hide route tabs in Add/Settings main tab
  const routeTabs=document.getElementById('routeTabs');
  if(routeTabs)routeTabs.style.display='none';
  
  document.getElementById('setCard').style.display='block';
  document.getElementById('pinsCard').style.display='block';
  document.getElementById('prodsCard').style.display='block';
  document.getElementById('agentsCard').style.display='block';
  const s=DB.settings;
  document.getElementById('sOP').textContent=s.ownerPhone||'Not set';
  // Populate route dropdowns
  const routeOpts=(s.agents||[]).map(a=>`<option value="${a.id}">${a.name}</option>`).join('');
  const cr=document.getElementById('cRoute');if(cr)cr.innerHTML='<option value="">— No Route —</option>'+routeOpts;
  renderPins();renderProds();renderProdPrices();renderAgentsList();renderCustVis();renderAgentVis();
}
// v21.6: admin toggles to show/hide the handover sections from the DELIVERY BOY. Default OFF (boy can't see). ON = boy sees. Admin always sees. Flags ab_* in settings.
function renderAgentVis(){
  var card=document.getElementById('agentVisCard'); if(card)card.style.display='block';
  var el=document.getElementById('agentVisList'); if(!el)return;
  var s=DB.settings;
  var items=[['ab_exho','📦 Handover Tables (new)',true],['ab_milkho','🥛 Milk Handover (old)',false]];
  el.innerHTML=items.map(function(it){var on=it[2]?(s[it[0]]!==false):(s[it[0]]===true);return '<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eee;"><div style="font-weight:700;font-size:14px;">'+it[1]+'</div><button class="btn-sm" data-k="'+it[0]+'" style="background:'+(on?'#E8F5EE':'#FDECEA')+';color:'+(on?'#2A7A4B':'#C0392B')+';font-weight:700;">'+(on?'👁️ Boy can see':'🚫 Hidden from boy')+'</button></div>';}).join('');
  el.querySelectorAll('.btn-sm[data-k]').forEach(function(btn){btn.addEventListener('click',function(){var ss=DB.settings;var k=this.dataset.k;var def=(k==='ab_exho');var cur=def?(ss[k]!==false):(ss[k]===true);ss[k]=!cur;DB.setSettings(ss);renderAgentVis();});});
}
function applyAgentVis(){
  var s=DB.settings;
  if(role==='agent'){
    var eh=document.getElementById('accExtraHandover'); if(eh)eh.style.display=(s.ab_exho===false)?'none':''; // NEW Handover Tables (his route) — shown by default so he's responsible
    var mh=document.getElementById('accMilkHandover'); if(mh)mh.style.display='none'; // v23.5: agent ALWAYS sees only ONE table (his Stats). Old Milk Handover strip (circles + typing box) hidden for the agent.
  }else{
    var eh2=document.getElementById('accExtraHandover'); if(eh2)eh2.style.display='';
    var mh2=document.getElementById('accMilkHandover'); if(mh2)mh2.style.display='';
  }
}
// v21.4: admin toggles to hide/show customer accordion sections. Flags in settings (cv_*), default = shown. Synced via setSettings.
function renderCustVis(){
  var card=document.getElementById('custVisCard'); if(card)card.style.display='block';
  var el=document.getElementById('custVisList'); if(!el)return;
  var s=DB.settings;
  var items=[['cv_order','🛒 Order More'],['cv_milk','🥛 Milk Settings'],['cv_monthly','📊 Monthly Details'],['cv_bill','💰 My Bill'],['cv_hold','🏖️ Vacation Hold'],['cv_addr','📍 My Address']];
  el.innerHTML=items.map(function(it){var on=(s[it[0]]!==false);return '<div style="display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #eee;"><div style="font-weight:700;font-size:14px;">'+it[1]+'</div><button class="btn-sm" data-k="'+it[0]+'" style="background:'+(on?'#E8F5EE':'#FDECEA')+';color:'+(on?'#2A7A4B':'#C0392B')+';font-weight:700;">'+(on?'👁️ Shown':'🚫 Hidden')+'</button></div>';}).join('');
  el.querySelectorAll('.btn-sm[data-k]').forEach(function(btn){btn.addEventListener('click',function(){var ss=DB.settings;var k=this.dataset.k;ss[k]=(ss[k]===false)?true:false;DB.setSettings(ss);renderCustVis();});});
}
function applyCustVis(){
  var s=DB.settings;
  var map={accOrder:'cv_order',accMilk:'cv_milk',accMonthly:'cv_monthly',accBill:'cv_bill',accHold:'cv_hold',accAddr:'cv_addr'};
  Object.keys(map).forEach(function(id){var el=document.getElementById(id);if(!el)return;el.style.display=(s[map[id]]===false)?'none':'';});
}
function renderProds(){
  const el=document.getElementById('prodsList');if(!el)return;
  el.innerHTML=DB.products.map((p,i)=>`
    <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee;">
      <div>
        <div style="font-weight:700;font-size:13px;">${p.icon} ${p.name}</div>
        <div style="font-size:10px;color:#999;">per ${p.unit}</div>
      </div>
      <button class="btn-sm" style="background:${p.active?'#E8F5EE':'#F3F4F6'};color:${p.active?'#2A7A4B':'#6B7280'};" data-idx="${i}">
        ${p.active?'✅ Active':'Coming Soon'}
      </button>
    </div>`).join('');
  el.querySelectorAll('.btn-sm[data-idx]').forEach(btn=>{
    btn.addEventListener('click',function(){
      const p=DB.products;p[parseInt(this.dataset.idx)].active=!p[parseInt(this.dataset.idx)].active;
      DB.setProducts(p);renderProds();renderProdPrices();
    });
  });
}

function renderProdPrices(){
  document.getElementById('prodPricesCard').style.display='block';
  const s=DB.settings;
  // Exclude cow milk and buffalo milk from extra orders (they have their own tabs)
  const milkIds=['cow_milk','buf_milk','cm','bm'];
  const prods=DB.products.filter(p=>p.active&&!milkIds.includes(p.id));
  const el=document.getElementById('prodPricesList');
  if(!prods.length){el.innerHTML='<div style="font-size:12px;color:#999;">No extra products active yet. Activate in Products section.</div>';return;}
  el.innerHTML=prods.map(p=>`
    <div class="srow">
      <div><div style="font-weight:bold;font-size:13px;">${p.icon} ${p.name}</div>
      <div style="font-size:11px;color:#999;">₹${s['price_'+p.id]||'Not set'} per ${p.unit}</div></div>
      <button class="btn-sm btn-g" data-pid="${p.id}" data-pname="${p.name}" data-punit="${p.unit}">Set Price</button>
    </div>`).join('');
  el.querySelectorAll('.btn-sm[data-pid]').forEach(btn=>{
    btn.addEventListener('click',function(){
      const v=prompt('Enter price per '+this.dataset.punit+' for '+this.dataset.pname+':',s['price_'+this.dataset.pid]||'');
      if(v===null)return;s['price_'+this.dataset.pid]=parseFloat(v)||0;DB.setSettings(s);renderProdPrices();
    });
  });
}

function renderPins(){
  document.getElementById('pinsList').innerHTML='';
  DB.owners.forEach(o=>{
    const div=document.createElement('div');div.className='ocard';
    div.innerHTML=`<div style="display:flex;align-items:center;justify-content:space-between;">
      <div><div style="font-weight:bold;font-size:13px;">${o.name} ${o.pinHash?'✅':''}</div>
      <div style="font-size:11px;color:#999;">${o.pinHash?'🔒 PIN set':'⚠️ No PIN'} &nbsp;|&nbsp; 📱 ${o.phone||'Not set'}</div></div>
      <div style="display:flex;gap:6px;">
        <button class="btn-sm btn-g" data-oid="${o.id}">${o.pinHash?'Change':'Set PIN'}</button>
        ${o.pinHash?`<button class="btn-sm btn-r" data-oid="${o.id}" data-remove="1">Remove</button>`:''}
      </div>
    </div>
    <div style="display:flex;gap:6px;margin-top:6px;">
      <button class="btn-sm" style="background:#E8F2FF;color:#1A5FA0;flex:1;" data-oid="${o.id}" data-rename="1">✏️ Rename</button>
      <button class="btn-sm" style="background:#FFF0E0;color:#C0681A;flex:1;" data-oid="${o.id}" data-setphone="1">📱 Set Phone</button>
    </div>`;
    document.getElementById('pinsList').appendChild(div);
    div.querySelectorAll('.btn-sm[data-oid]').forEach(btn=>{
      btn.addEventListener('click',function(){
        const id=this.dataset.oid;
        if(this.dataset.remove){if(!confirm('Remove PIN?'))return;const ow=DB.owners;const i=ow.findIndex(x=>x.id===id);if(i>=0){ow[i].pinHash='';ow[i].active=false;DB.setOwners(ow);}renderPins();}
        else if(this.dataset.rename){const nm=prompt('New name:',o.name);if(!nm)return;const ow=DB.owners;const i=ow.findIndex(x=>x.id===id);if(i>=0){ow[i].name=nm.trim();DB.setOwners(ow);}renderPins();}
        else if(this.dataset.setphone){
          const ph=prompt('Enter 10-digit mobile number for '+o.name+':',o.phone||'');
          if(ph===null)return;
          const cleaned=ph.trim().replace(/\D/g,'');
          if(cleaned&&!/^\d{10}$/.test(cleaned)){alert('❌ Enter a valid 10-digit number');return;}
          const ow=DB.owners;const i=ow.findIndex(x=>x.id===id);
          if(i>=0){ow[i].phone=cleaned;DB.setOwners(ow);}
          renderPins();
        }
        else{sOId=id;sBoyMode=false;openSetupMo('Set PIN',o.name);}
      });
    });
  });
}

// v15.4: Customer default litres stepper (min 0.25L - zero never allowed for daily default)
function custLitStep(id,delta){
  const el=document.getElementById(id);if(!el)return;
  let v=Math.round(((parseFloat(el.value)||1)+delta)*100)/100;
  v=Math.max(0.25,Math.min(50,v));
  el.value=v;
  const sp=document.getElementById(id+'_val');if(sp)sp.textContent=v+'L';
  const mb=el.parentElement.querySelector('button');if(mb)mb.style.opacity=v<=0.25?'0.3':'1';
}
function custLitSet(id,val){
  const el=document.getElementById(id);if(!el)return;
  el.value=val;
  const sp=document.getElementById(id+'_val');if(sp)sp.textContent=val+'L';
}
function openEdit(id){
  const c=DB.customers.find(x=>x.id===id);if(!c)return;
  document.getElementById('eId').value=id;document.getElementById('eN').value=c.name;document.getElementById('eMo').value=c.mobile;
  document.getElementById('eA').value=c.address;document.getElementById('eML').value=c.mapsLink||'';document.getElementById('eTm').value=c.delivTime||'06:30';
  document.getElementById('eLM').value=c.landmark||'';
  // v15.4: Set litres stepper to customer's current value
  custLitSet('eLit',parseFloat(c.litres)||1);
  // v15.8: prefill hold/inactive
  document.getElementById('eHoldFrom').value=c.hold?c.hold.from:'';
  document.getElementById('eHoldTo').value=c.hold?c.hold.to:'';
  document.getElementById('eInactive').checked=c.inactive===true;
  // v15.17: admin-side address undo
  const eub=document.getElementById('eAddrUndoBtn');
  if(eub){
    eub.style.display=(c.prevAddress!==undefined)?'block':'none';
    eub.onclick=function(){
      if(!confirm('Restore previous address?\n"'+c.prevAddress+'"'))return;
      document.getElementById('eA').value=c.prevAddress;
      document.getElementById('eML').value=c.prevMapsLink||'';
      alert('Previous address loaded — press Save to apply.');
    };
  }
  document.getElementById('eP').value=c.price;document.getElementById('eMT').value=c.milkType||'cow';document.getElementById('eO').value=c.order;
  // v23.1: prefill temp qty
  const _tq=c.periodQty;
  custLitSet('eTmpQty',_tq?_tq.qty:(parseFloat(c.litres)||1));
  document.getElementById('eTmpFrom').value=_tq?_tq.from:'';
  document.getElementById('eTmpTo').value=_tq?_tq.to:'';
  const _tInfo=document.getElementById('eTmpInfo');
  if(_tInfo)_tInfo.textContent=_tq?('Currently: '+_tq.qty+'L from '+fmtDM(_tq.from)+' to '+fmtDM(_tq.to)):'No temporary change set.';
  const _tClr=document.getElementById('eTmpClearBtn');
  if(_tClr)_tClr.style.display=_tq?'block':'none';
  // v23.2: prefill alt-day
  const _alt=c.altDay;
  const _altCb=document.getElementById('eAltDay');const _altRow=document.getElementById('eAltDayRow');const _altFrom=document.getElementById('eAltFrom');
  if(_altCb){_altCb.checked=!!_alt;if(_altRow)_altRow.style.display=_alt?'block':'none';if(_altFrom)_altFrom.value=_alt?_alt.from:'';_altCb.onchange=function(){if(_altRow)_altRow.style.display=this.checked?'block':'none';};}
  // Populate and set route dropdown
  const s=DB.settings;
  const routeOpts=(s.agents||[]).map(a=>`<option value="${a.id}">${a.name}</option>`).join('');
  const er=document.getElementById('eRoute');if(er){er.innerHTML='<option value="">— No Route —</option>'+routeOpts;er.value=c.route||'';}
  openMo('editMo');
}
function saveEdit(){
  const id=document.getElementById('eId').value,custs=DB.customers,i=custs.findIndex(x=>x.id===id);if(i===-1)return;
  const route=document.getElementById('eRoute').value||'';
  if(!route){alert('Please assign customer to a Route!');return;}
  const newOrder=parseInt(document.getElementById('eO').value)||99;
  shiftStops(route,newOrder,id); // v14.1: shift other stops if number taken
  // v15.8: hold + inactive from edit form
  const hF=document.getElementById('eHoldFrom').value,hT=document.getElementById('eHoldTo').value;
  if(hF&&hT){
    if(hT<hF){alert('Hold "To" date cannot be before "From"!');return;}
    if(!guardVacationVsOrders(id,custs[i].name,hF,hT))return; // v23: order conflict guard
    custs[i].hold={from:hF,to:hT};delete custs[i].holdNotified;
  }else{delete custs[i].hold;delete custs[i].holdNotified;}
  custs[i].inactive=document.getElementById('eInactive').checked||false;
  // v15.17: remember previous address for Undo
  const newA=document.getElementById('eA').value.trim();
  if(newA!==custs[i].address){custs[i].prevAddress=custs[i].address;custs[i].prevMapsLink=custs[i].mapsLink||'';}
  const _oldPQ=custs[i].periodQty; // v23.1: save before spread
  custs[i]={...custs[i],name:titleCase(document.getElementById('eN').value.trim()),mobile:document.getElementById('eMo').value.trim(),address:document.getElementById('eA').value.trim(),landmark:document.getElementById('eLM').value.trim(),mapsLink:document.getElementById('eML').value.trim(),delivTime:document.getElementById('eTm').value,litres:parseFloat(document.getElementById('eLit').value)||1,price:parseFloat(document.getElementById('eP').value),milkType:document.getElementById('eMT').value,order:newOrder,route:route};
  // v23.1: apply temp qty if both dates are filled
  const _tF2=document.getElementById('eTmpFrom').value,_tT2=document.getElementById('eTmpTo').value;
  if(_tF2&&_tT2){
    if(_tT2<_tF2){alert('"To" date cannot be before "From"!');return;}
    const _tDays=Math.round((new Date(_tT2)-new Date(_tF2))/86400000)+1;
    if(_tDays>14){alert('Maximum temporary period is 14 days.');return;}
    const _tNq=parseFloat(document.getElementById('eTmpQty').value)||1;
    if(!guardRangeVsVacation(custs[i],_tF2,_tT2))return;
    if(_oldPQ)resetCustDays(custs[i],_oldPQ.from,_oldPQ.to);
    const {cowDefault:_tCow,bufDefault:_tBuf}=getCustDefaults(custs[i]);
    for(let _z=0;_z<_tDays;_z++){const _d2=new Date(_tF2+'T00:00:00');_d2.setDate(_d2.getDate()+_z);const _k2=dKey(_d2);let _dd2=DB.getDayData(_k2);if(!_dd2[id])_dd2[id]={delivered:false};if((custs[i].milkType||'cow')==='cow'){_dd2[id].cowQty=_tNq;_dd2[id].bufQty=_tBuf;}else{_dd2[id].bufQty=_tNq;_dd2[id].cowQty=_tCow;}_dd2[id].qty=(_dd2[id].cowQty||0)+(_dd2[id].bufQty||0);_dd2[id].custChanged=true;DB.setDayData(_k2,_dd2);}
    custs[i].periodQty={qty:_tNq,from:_tF2,to:_tT2};
    fSet('adminNotifs','latest',{msg:'📅 '+custs[i].name+': '+_tNq+'L ONLY '+_tF2+' → '+_tT2+' (set by admin)',time:new Date().toISOString(),read:false});
  }
  // v23.2: save alternate day setting
  const _altCb2=document.getElementById('eAltDay');const _altFrom2=document.getElementById('eAltFrom')?document.getElementById('eAltFrom').value:'';
  if(_altCb2&&_altCb2.checked&&_altFrom2){custs[i].altDay={from:_altFrom2};}else{delete custs[i].altDay;}
  custs.sort((a,b)=>a.order-b.order);DB.setCustomers(custs);closeMo('editMo');renderCusts();alert('✅ Saved!');
}
// v23.1: Admin clears a customer's temporary qty change from Edit Customer modal
function adminClearTempQty(){
  const id=document.getElementById('eId').value;
  const custs=DB.customers;const m=custs.find(x=>x.id===id);if(!m)return;
  if(!m.periodQty){alert('No temporary change to clear.');return;}
  if(!confirm('Clear temporary change? ('+m.periodQty.qty+'L from '+fmtDM(m.periodQty.from)+' to '+fmtDM(m.periodQty.to)+')'))return;
  resetCustDays(m,m.periodQty.from,m.periodQty.to);
  delete m.periodQty;
  DB.setCustomers(custs);
  document.getElementById('eTmpFrom').value='';
  document.getElementById('eTmpTo').value='';
  custLitSet('eTmpQty',parseFloat(m.litres)||1);
  const _ti=document.getElementById('eTmpInfo');if(_ti)_ti.textContent='No temporary change set.';
  const _tc=document.getElementById('eTmpClearBtn');if(_tc)_tc.style.display='none';
  alert('✅ Temporary change cleared!');
}
function delCust(){
  if(!confirm('Delete this customer?'))return;
  const id=document.getElementById('eId').value;
  const updated=DB.customers.filter(x=>x.id!==id);
  DB.setCustomers(updated);
  closeMo('editMo');
  // Small delay to ensure Firebase write completes before re-render
  setTimeout(()=>{renderCusts();},400);
}
function callNo(type){const s=DB.settings;const n=type==='owner'?s.ownerPhone:s.boyPhone;if(!n){alert('Number not set.');return;}window.location.href='tel:+91'+n.replace(/\D/g,'');}

// ===== CUSTOMER SCREEN =====
function renderCustScr(){
  const c=DB.customers.find(x=>x.id===custId);if(!c)return;
  const s=DB.settings;
  document.getElementById('cHN').textContent='Hello, '+c.name+' 🙏';
  document.getElementById('cHS').textContent=(c.milkType==='buffalo'?'🐃 Buffalo':'🐄 Cow')+' Milk'+(c.delivTime?' • ⏰ By '+fmtTime(c.delivTime):'');
  document.getElementById('oCallNo').textContent=s.ownerPhone||'Not set';
  // v15.8: Vacation Hold box (customer can set/cancel own hold)
  const hb=document.getElementById('cHoldBox');
  if(hb){
    const tmrD=new Date();tmrD.setDate(tmrD.getDate()+1);const minD=dKey(tmrD);
    if(c.hold&&c.hold.from&&c.hold.to){
      hb.innerHTML=`<div style="font-size:13px;font-weight:bold;color:#E8621A;">⏸️ Delivery on hold: ${c.hold.from} → ${c.hold.to}</div>
      <div style="font-size:11px;color:#666;margin:4px 0;">Delivery resumes automatically after ${c.hold.to}</div>
      <button class="btn" id="cHoldCancel" style="width:100%;background:#E8F5EE;color:#2A7A4B;margin-top:6px;">▶️ Cancel Hold — Resume Delivery</button>`;
      document.getElementById('cHoldCancel').onclick=function(){
        if(!confirm('Cancel the hold and resume regular delivery?'))return;
        const list=DB.customers;const me=list.find(x=>x.id===custId);if(!me)return;
        delete me.hold;delete me.holdNotified;DB.setCustomers(list);
        delete c.hold;delete c.holdNotified;
        fSet('adminNotifs','latest',{msg:'▶️ '+me.name+' cancelled their hold — delivery resumes',time:new Date().toISOString(),read:false});
        alert('✅ Hold cancelled! Delivery resumes from tomorrow.');renderCustScr();
      };
    }else{
      hb.innerHTML=`<div style="font-size:11px;color:#666;margin-bottom:6px;">Going on vacation? Pause your milk for those days — no delivery, no bill.</div>
      <div class="fg"><label>From (first NO-milk day)</label><input type="date" id="cHoldFrom" min="${minD}" style="width:100%;padding:8px;border:2px solid #E8621A;border-radius:8px;"></div>
      <div class="fg"><label>To (last NO-milk day)</label><input type="date" id="cHoldTo" min="${minD}" style="width:100%;padding:8px;border:2px solid #E8621A;border-radius:8px;"></div>
      <button class="btn" id="cHoldSave" style="width:100%;background:#E8621A;color:white;">⏸️ Set Vacation Hold</button>`;
      document.getElementById('cHoldSave').onclick=function(){
        const f=document.getElementById('cHoldFrom').value,t=document.getElementById('cHoldTo').value;
        if(!f||!t){alert('Please select both dates!');return;}
        if(f<minD){alert('Hold can start from tomorrow onwards (today is already planned).');return;}
        if(t<f){alert('"To" date cannot be before "From" date!');return;}
        if(!guardVacationVsOrders(custId,(c&&c.name)||'',f,t))return; // v23: order conflict guard
        if(!confirm('Pause delivery from '+f+' to '+t+'?'))return;
        const list=DB.customers;const me=list.find(x=>x.id===custId);if(!me)return;
        me.hold={from:f,to:t};delete me.holdNotified;DB.setCustomers(list);
        c.hold={from:f,to:t};
        fSet('adminNotifs','latest',{msg:'⏸️ '+me.name+' set vacation hold: '+f+' → '+t,time:new Date().toISOString(),read:false});
        alert('✅ Hold set! No delivery '+f+' to '+t+'. Resumes after.');renderCustScr();
      };
    }
  }
  // v14.6: My Daily Milk Quantity stepper (6 PM rule, min 0.25L)
  const qs=document.getElementById('cQtyStepper');
  if(qs){
    const curQ=parseFloat(c.litres)||1;
    const pend=c.pendingQty;
    window._cNewQty=pend?pend.qty:curQ;
    const mtLbl=c.milkType==='buffalo'?'🐃 Buffalo':'🐄 Cow';
    qs.innerHTML=`<div style="font-size:12px;color:#666;margin-bottom:6px;">${mtLbl} Milk — Current: <b>${curQ}L</b>/day${pend?`<br><span style="color:#E8621A;font-weight:bold;">⏳ New: ${pend.qty}L from ${fmtDM(onwardsFrom(c))} onwards</span>`:''}${c.periodQty?`<br><span style="color:#5B2D91;font-weight:bold;">📅 ${c.periodQty.qty}L only ${fmtDM(c.periodQty.from)}→${fmtDM(c.periodQty.to)}</span>`:''}</div>
    <div style="display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0;">
      <button id="cQminus" style="width:42px;height:42px;border-radius:50%;border:2px solid #1A5FA0;background:white;color:#1A5FA0;font-size:22px;font-weight:bold;">−</button>
      <span id="cQval" style="font-size:20px;font-weight:800;color:#1A5FA0;min-width:64px;text-align:center;"></span>
      <button id="cQplus" style="width:42px;height:42px;border-radius:50%;border:2px solid #1A5FA0;background:white;color:#1A5FA0;font-size:22px;font-weight:bold;">+</button>
    </div>
    <div style="font-size:15px;font-weight:bold;color:#444;margin:10px 0 6px;">Apply this change:</div>
    <label style="display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:8px;"><input type="radio" name="cQtyType" id="cQtyTypeA" style="width:20px;height:20px;" checked> ♾️ <b>Always</b> (every day from now)</label>
    <label style="display:flex;align-items:center;gap:8px;font-size:15px;"><input type="radio" name="cQtyType" id="cQtyTypeB" style="width:20px;height:20px;"> 📅 <b>Few days only</b> (then back to normal)</label>
    <div id="cQtyPeriodBox" style="display:none;margin-top:6px;">
      <div style="display:flex;gap:6px;">
        <input type="date" id="cQtyPFrom" style="flex:1;padding:6px;border:2px solid #5B2D91;border-radius:8px;">
        <input type="date" id="cQtyPTo" style="flex:1;padding:6px;border:2px solid #5B2D91;border-radius:8px;">
      </div>
    </div>
    <button class="btn" id="cQtySaveBtn" style="width:100%;background:#1A5FA0;color:white;margin-top:8px;">💾 Save New Quantity</button>
    ${(pend||c.periodQty)?`<button class="btn" id="cQtyCancelChangeBtn" style="width:100%;background:#e53935;color:white;margin-top:6px;justify-content:center;">❌ Cancel Pending Change (back to ${curQ}L)</button>`:''}
    <div style="font-size:10px;color:#999;margin-top:5px;text-align:center;">Change before 6 PM → can start tomorrow • After 6 PM → day after tomorrow</div>`;
    const updQ=()=>{
      document.getElementById('cQval').textContent=window._cNewQty+'L';
      document.getElementById('cQminus').style.opacity=window._cNewQty<=0.25?'0.3':'1';
      // v14.7: Save grey until value differs from current/pending
      const base=pend?pend.qty:curQ;
      const sb=document.getElementById('cQtySaveBtn');
      const changed=window._cNewQty!==base;
      sb.disabled=!changed;sb.style.opacity=changed?'1':'0.4';
    };
    document.getElementById('cQminus').onclick=()=>{if(window._cNewQty>0.25){window._cNewQty=Math.round((window._cNewQty-0.25)*100)/100;updQ();}};
    document.getElementById('cQplus').onclick=()=>{if(window._cNewQty<50){window._cNewQty=Math.round((window._cNewQty+0.25)*100)/100;updQ();}};
    updQ();
    // v15.9: radio toggles period date box
    const rA=document.getElementById('cQtyTypeA'),rB=document.getElementById('cQtyTypeB'),pBox=document.getElementById('cQtyPeriodBox');
    // v17.9: grey out invalid dates — earliest = tomorrow (before 6 PM) or day after (after 6 PM)
    const _now=new Date();const _eff=new Date();_eff.setDate(_eff.getDate()+(_now.getHours()>=18?2:1));
    const _minKey=dKey(_eff);
    const pf2=document.getElementById('cQtyPFrom'),pt2=document.getElementById('cQtyPTo');
    if(pf2){pf2.min=_minKey;pf2.onchange=function(){if(pt2){pt2.min=pf2.value||_minKey;}};}
    if(pt2){pt2.min=_minKey;}
    const togglePBox=()=>{pBox.style.display=rB.checked?'block':'none';};
    rA.onchange=togglePBox;rB.onchange=togglePBox;
    document.getElementById('cQtySaveBtn').onclick=function(){
      const nq=window._cNewQty,cur=parseFloat(c.litres)||1;
      const now=new Date();
      const eff=new Date();eff.setDate(eff.getDate()+(now.getHours()>=18?2:1));
      const effKey=dKey(eff);
      const list=DB.customers;const me=list.find(x=>x.id===custId);if(!me)return;
      if(rB.checked){
        // v15.9: PERIOD change - some days only, then back to normal
        const pf=document.getElementById('cQtyPFrom').value,pt=document.getElementById('cQtyPTo').value;
        if(!pf||!pt){alert('Please select both dates for the period!');return;}
        if(pf<effKey){alert('Period can start from '+effKey+' onwards (6 PM rule).');return;}
        if(pt<pf){alert('"To" date cannot be before "From"!');return;}
        const dayCount=Math.round((new Date(pt)-new Date(pf))/86400000)+1;
        if(dayCount>14){alert('Maximum period is 14 days. For longer, use ONWARDS option.');return;}
        if(!guardRangeVsVacation(me,pf,pt))return; // v23: vacation conflict guard
        const backAfter=(me.pendingQty&&pt>=me.pendingQty.from)?me.pendingQty.qty:cur; // v15.10
        if(!confirm(nq+'L only from '+pf+' to '+pt+', then back to '+backAfter+'L?'))return;
        // v16: NEWEST REPLACES OLD - erase previous period days completely first
        me.id=me.id||custId;
        if(me.periodQty)resetCustDays(me,me.periodQty.from,me.periodQty.to);
        // Write per-day quantities (rides the existing day-data system)
        const {cowDefault:cdf,bufDefault:bdf}=getCustDefaults(me);
        for(let i2=0;i2<dayCount;i2++){
          const d2=new Date(pf+'T00:00:00');d2.setDate(d2.getDate()+i2);const k2=dKey(d2);
          let dd2=DB.getDayData(k2);
          if(!dd2[custId])dd2[custId]={delivered:false};
          if((me.milkType||'cow')==='cow'){dd2[custId].cowQty=nq;dd2[custId].bufQty=bdf;}
          else{dd2[custId].bufQty=nq;dd2[custId].cowQty=cdf;}
          dd2[custId].qty=(dd2[custId].cowQty||0)+(dd2[custId].bufQty||0);
          dd2[custId].custChanged=true;
          DB.setDayData(k2,dd2);
        }
        me.periodQty={qty:nq,from:pf,to:pt};
        DB.setCustomers(list);
        fSet('adminNotifs','latest',{msg:'🥛 '+me.name+': '+nq+'L ONLY '+pf+' → '+pt+' (then back '+backAfter+'L)',time:new Date().toISOString(),read:false});
        alert('✅ '+nq+'L set for '+pf+' to '+pt+'. Back to '+backAfter+'L after.');
        renderCustScr();return;
      }
      // Permanent (onwards) - original flow
      if(nq===cur){delete me.pendingQty;DB.setCustomers(list);alert('Quantity is same as current — no change needed.');renderCustScr();return;}
      // v16: NEWEST WINS - if an old period covers days from effKey onwards, erase those days
      if(me.periodQty&&me.periodQty.to>=effKey){
        const cutFrom=(effKey>me.periodQty.from)?effKey:me.periodQty.from;
        resetCustDays(me,cutFrom,me.periodQty.to);
        if(me.periodQty.from<effKey){
          const pe=new Date(effKey+'T00:00:00');pe.setDate(pe.getDate()-1);
          me.periodQty.to=dKey(pe); // shorten old period to before the new onwards
        }else{delete me.periodQty;}
      }
      me.pendingQty={qty:nq,from:effKey};
      DB.setCustomers(list);
      fSet('adminNotifs','latest',{msg:'🥛 '+me.name+': '+cur+'L → '+nq+'L from '+effKey+' ONWARDS',time:new Date().toISOString(),read:false});
      alert('✅ New quantity '+nq+'L starts from '+effKey+' onwards');
      renderCustScr();
    };
    // v17.5: Cancel pending change — wipe pendingQty + periodQty, back to current default
    const ccb=document.getElementById('cQtyCancelChangeBtn');
    if(ccb)ccb.onclick=function(){
      const list=DB.customers;const me=list.find(x=>x.id===custId);if(!me)return;
      if(!confirm('Cancel your pending milk change and stay at '+(parseFloat(me.litres)||1)+'L?'))return;
      // clear future per-day overrides from the pending/period ranges
      if(me.periodQty)resetCustDays(me,me.periodQty.from,me.periodQty.to);
      delete me.pendingQty;delete me.periodQty;
      DB.setCustomers(list);
      fSet('adminNotifs','latest',{msg:'↩️ '+me.name+' cancelled their pending milk change',time:new Date().toISOString(),read:false});
      alert('✅ Pending change cancelled. Staying at '+(parseFloat(me.litres)||1)+'L.');
      renderCustScr();
    };
  }
  // v14.10: Save button grey until something actually changed
  const ma=document.getElementById('cMyAddr'),mm=document.getElementById('cMyMaps');
  const mlm=document.getElementById('cMyLM');
  if(ma&&document.activeElement!==ma&&document.activeElement!==mm&&document.activeElement!==mlm){ma.value=c.address||'';mm.value=c.mapsLink||'';if(mlm)mlm.value=c.landmark||'';}
  const ab=document.getElementById('cAddrSaveBtn');
  if(ab){
    const chkAddr=()=>{
      const changed=(ma.value.trim()!==(c.address||''))||(mm.value.trim()!==(c.mapsLink||''))||(mlm&&mlm.value.trim()!==(c.landmark||''));
      ab.disabled=!changed;ab.style.opacity=changed?'1':'0.4';
    };
    chkAddr();
    ma.oninput=chkAddr;mm.oninput=chkAddr;if(mlm)mlm.oninput=chkAddr;
    // v18.8: capture current location once -> fill maps link
    const locBtn=document.getElementById('cUseMyLocBtn'),locStat=document.getElementById('cLocStatus');
    if(locBtn)locBtn.onclick=function(){
      if(!navigator.geolocation){if(locStat)locStat.textContent='Location not supported on this phone.';return;}
      if(locStat){locStat.style.color='#666';locStat.textContent='📍 Getting your location...';}
      navigator.geolocation.getCurrentPosition(function(pos){
        const lat=pos.coords.latitude.toFixed(6),lng=pos.coords.longitude.toFixed(6);
        mm.value='https://maps.google.com/?q='+lat+','+lng;
        if(locStat){locStat.style.color='#2A7A4B';locStat.textContent='✅ Location captured! Tap Save Address to keep it.';}
        chkAddr();
      },function(err){
        if(locStat){locStat.style.color='#C0392B';locStat.textContent='⚠️ Could not get location. Please allow location permission and try again.';}
      },{enableHighAccuracy:true,timeout:10000});
    };
    // v18.9: clear location
    const clearLocBtn=document.getElementById('cClearLocBtn');
    if(clearLocBtn)clearLocBtn.onclick=function(){
      mm.value='';
      if(locStat){locStat.style.color='#C0392B';locStat.textContent='Location cleared. Tap Save Address to confirm.';}
      chkAddr();
    };
    ab.onclick=function(){
    const list=DB.customers;const me=list.find(x=>x.id===custId);if(!me)return;
    const newAddr=ma.value.trim(),newMaps=mm.value.trim();const newLm=mlm?mlm.value.trim():(me.landmark||'');
    if(!newAddr){alert('Address cannot be empty!');return;}
    me.prevAddress=me.address;me.prevMapsLink=me.mapsLink||''; // v15.1: keep one step back for Undo
    me.address=newAddr;me.mapsLink=newMaps;me.landmark=newLm;
    c.address=newAddr;c.mapsLink=newMaps;c.landmark=newLm; // keep local copy in sync so button greys after save
    c.prevAddress=me.prevAddress;c.prevMapsLink=me.prevMapsLink;
    DB.setCustomers(list);
    fSet('adminNotifs','latest',{msg:'📍 '+me.name+' updated their address',time:new Date().toISOString(),read:false});
    alert('✅ Address saved!');
    chkAddr();
    const ub=document.getElementById('cAddrUndoBtn');if(ub)ub.style.display='block';
    };
    // v15.1: Undo restores the previous address/location
    const ub=document.getElementById('cAddrUndoBtn');
    if(ub){
      ub.style.display=(c.prevAddress!==undefined)?'block':'none';
      ub.onclick=function(){
        const list=DB.customers;const me=list.find(x=>x.id===custId);if(!me||me.prevAddress===undefined)return;
        if(!confirm('Restore previous address?\n"'+me.prevAddress+'"'))return;
        me.address=me.prevAddress;me.mapsLink=me.prevMapsLink||'';
        delete me.prevAddress;delete me.prevMapsLink;
        c.address=me.address;c.mapsLink=me.mapsLink;
        delete c.prevAddress;delete c.prevMapsLink;
        DB.setCustomers(list);
        ma.value=me.address;mm.value=me.mapsLink;
        fSet('adminNotifs','latest',{msg:'↩️ '+me.name+' restored previous address',time:new Date().toISOString(),read:false});
        ub.style.display='none';chkAddr();
        alert('✅ Previous address restored!');
      };
    }
  }
  renderCustToday(c);renderCustPay(c);
  // Load advance orders section
  setTimeout(()=>renderCustQtyChange(c),300);
  cBillM=new Date().getMonth();cBillY=new Date().getFullYear();
  document.getElementById('cML2').textContent=fmtMY(cBillY,cBillM);
  renderCustMonth(c);checkBoyTrack();applyCustVis();
}
function renderCustToday(c){
  const dd=DB.getDayData(dKey()),d=dd[c.id]||{delivered:false,qty:parseFloat(c.litres)||1};
  document.getElementById('cTodayInfo').innerHTML=`<div style="display:flex;align-items:center;gap:12px;padding:8px 0;">
    <div style="font-size:38px;">${d.delivered?'✅':'⏳'}</div>
    <div>
      <div style="font-size:15px;font-weight:bold;color:${d.delivered?'#2A7A4B':'#E8621A'};">${d.delivered?'Milk Delivered!':'Not Delivered Yet'}</div>
      <div style="font-size:12px;color:#999;">${d.delivered?d.qty+'L'+(d.delivTime?' at '+d.delivTime:''):'Expected: '+d.qty+'L'+(c.delivTime?' by '+fmtTime(c.delivTime):'')}</div>
      ${d.delivered?`<div style="font-size:11px;color:#6B3FA0;font-weight:bold;">₹${(parseFloat(d.qty)*c.price).toFixed(0)} today</div>`:`<div style="font-size:11px;color:#999;">Not received? Call Manager ↓</div>`}
    </div>
  </div>`;
  document.getElementById('cTrackCard').style.display=d.delivered?'none':'block';
}
function canChangeDate(targetDate){
  const prev=new Date(targetDate+'T00:00:00');
  prev.setDate(prev.getDate()-1);
  prev.setHours(18,0,0,0);
  return Date.now()<prev.getTime();
}

function getAdvanceDates(){
  const dates=[];
  for(let i=1;i<=14;i++){
    const d=new Date();d.setDate(d.getDate()+i);
    // Only include dates that can still be changed (2.11.1n)
    if(canChangeDate(dKey(d)))dates.push(dKey(d));
  }
  return dates;
}

function renderCustQtyChange(c){
  const card=document.getElementById('cQtyCard');
  card.style.display='block';
  
  const dateSel=document.getElementById('cAdvDate');
  if(!dateSel)return;
  dateSel.innerHTML='';
  const dates=getAdvanceDates();
  
  if(!dates.length){
    dateSel.innerHTML='<option>No dates available</option>';
    return;
  }
  
  dates.forEach(d=>{
    const opt=document.createElement('option');
    opt.value=d;
    const dd2=new Date(d+'T00:00:00');
    opt.textContent=dd2.toLocaleDateString('en-IN',{weekday:'short',day:'numeric',month:'short'});
    dateSel.appendChild(opt);
  });

  // When date changes, update milk tabs
  dateSel.onchange=()=>renderMilkTabs(c);
  
  renderMilkTabs(c);
  renderExtraOrders(c);
  renderUpcomingOrders(c);
  
  // v15.2: Place Order + Cancel ALWAYS visible; grey state managed by showConfirmBtn
  const cb=document.getElementById('custChangeQtyBtn');
  if(cb)cb.style.display='block';
  const cc=document.getElementById('custCancelQtyBtn');
  if(cc)cc.style.display='block';
  showConfirmBtn();
}

function getCustDefaults(c){
  const singleDefault=parseFloat(c.litres)||1;
  // If customer has separate cow/buffalo litres set, use those
  // Otherwise use milkType to determine which gets the default
  let cowDefault=0, bufDefault=0;
  if(c.milkType==='cow') cowDefault=singleDefault;
  else if(c.milkType==='buffalo') bufDefault=singleDefault;
  else if(c.milkType==='both'){
    cowDefault=parseFloat(c.cowLitres)||singleDefault/2;
    bufDefault=parseFloat(c.bufLitres)||singleDefault/2;
  }
  // Override with explicit values if set
  if(parseFloat(c.cowLitres)>0) cowDefault=parseFloat(c.cowLitres);
  if(parseFloat(c.bufLitres)>0) bufDefault=parseFloat(c.bufLitres);
  return {cowDefault, bufDefault};
}

function renderMilkTabs(c){
  // ONE tab per milk type - no duplicates (2.11.1t)
  // Preserve defaults (2.11.1x)
  const el=document.getElementById('cMilkTabs');
  if(!el)return;
  
  const targetDate=document.getElementById('cAdvDate').value;
  const dd=DB.getDayData(targetDate);
  const dayData=dd[c.id]||{};
  const {cowDefault,bufDefault}=getCustDefaults(c);
  
  // Use saved qty or fall back to default (2.11.1x)
  const cowQty = dayData.cowQty!==undefined ? dayData.cowQty : cowDefault;
  const bufQty = dayData.bufQty!==undefined ? dayData.bufQty : bufDefault;
  
  const qOpts=(def,isDefault)=>{
    let opts='';
    if(!isDefault) opts+=`<option value="-1" ${def<0?'selected':''}>— Select —</option>`;
    opts+=[0,0.25,0.5,0.75,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5,10,11,12,13,14,15,16,17,18,19,20,25,30,35,40,45,50].map(q=>
      `<option value="${q}" ${q===def&&(isDefault||def>=0)?'selected':''}>${q===0?'❌ No Milk':q+'L'}</option>`
    ).join('');
    return opts;
  };
  
  let html='';
  
  // Cow milk tab - v14.6: HIDDEN if cow is customer's default (regular qty changes via My Daily Milk)
  const showCowDefault = c.milkType==='cow' || cowDefault>0;
  if(c.milkType!=='cow'){
  html+=`<div style="background:${showCowDefault?'#FFF8E7':'#F9FAFB'};border:2px solid ${showCowDefault?'#F5C842':'#E2E8F0'};border-radius:12px;padding:10px;margin-bottom:8px;">
    <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
      <span style="font-size:18px;">🐄</span>
      <span style="font-weight:800;font-size:13px;color:${showCowDefault?'#8B6914':'#666'};">Cow Milk</span>
      ${showCowDefault&&cowDefault>0?`<span style="background:#F5C842;color:white;padding:1px 7px;border-radius:8px;font-size:10px;font-weight:700;">Default: ${cowDefault}L</span>`:''}
    </div>
    <input type="hidden" id="cCowQty" value="${dayData.cowQty!==undefined?dayData.cowQty:0}">
    <div style="display:flex;align-items:center;justify-content:center;gap:16px;padding:4px 0;">
      <button id="cCowMinus" onclick="cStepMilk('cow')" data-d="-0.25" style="width:38px;height:38px;border-radius:50%;border:2px solid #F5C842;background:white;color:#8B6914;font-size:20px;font-weight:bold;">−</button>
      <span id="cCowVal" style="font-size:16px;font-weight:800;color:#8B6914;min-width:72px;text-align:center;">${(dayData.cowQty!==undefined&&dayData.cowQty>0)?dayData.cowQty+'L':'0'}</span>
      <button onclick="cStepMilk('cow',1)" style="width:38px;height:38px;border-radius:50%;border:2px solid #F5C842;background:white;color:#8B6914;font-size:20px;font-weight:bold;">+</button>
    </div>
  </div>`;
  }
  
  // Buffalo milk tab - v14.6: HIDDEN if buffalo is customer's default
  const showBufDefault = c.milkType==='buffalo' || bufDefault>0;
  if(c.milkType!=='buffalo'){
  html+=`<div style="background:${showBufDefault?'#EEF2FF':'#F9FAFB'};border:2px solid ${showBufDefault?'#9BA8E8':'#E2E8F0'};border-radius:12px;padding:10px;margin-bottom:8px;">
    <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
      <span style="font-size:18px;">🐃</span>
      <span style="font-weight:800;font-size:13px;color:${showBufDefault?'#4A4A8B':'#666'};">Buffalo Milk</span>
      ${showBufDefault&&bufDefault>0?`<span style="background:#9BA8E8;color:white;padding:1px 7px;border-radius:8px;font-size:10px;font-weight:700;">Default: ${bufDefault}L</span>`:''}
    </div>
    <input type="hidden" id="cBufQty" value="${dayData.bufQty!==undefined?dayData.bufQty:0}">
    <div style="display:flex;align-items:center;justify-content:center;gap:16px;padding:4px 0;">
      <button id="cBufMinus" onclick="cStepMilk('buf')" data-d="-0.25" style="width:38px;height:38px;border-radius:50%;border:2px solid #9BA8E8;background:white;color:#4A4A8B;font-size:20px;font-weight:bold;">−</button>
      <span id="cBufVal" style="font-size:16px;font-weight:800;color:#4A4A8B;min-width:72px;text-align:center;">${(dayData.bufQty!==undefined&&dayData.bufQty>0)?dayData.bufQty+'L':'0'}</span>
      <button onclick="cStepMilk('buf',1)" style="width:38px;height:38px;border-radius:50%;border:2px solid #9BA8E8;background:white;color:#4A4A8B;font-size:20px;font-weight:bold;">+</button>
    </div>
  </div>`;
  }
  
  el.innerHTML=html;
}

function showConfirmBtn(){
  // v15.1: Place Order grey until any quantity > 0; back to zero = grey again
  const cb=document.getElementById('custChangeQtyBtn');
  if(!cb)return;
  let any=0;
  const cw=document.getElementById('cCowQty');if(cw)any+=parseFloat(cw.value)||0;
  const bf=document.getElementById('cBufQty');if(bf)any+=parseFloat(bf.value)||0;
  document.querySelectorAll('[id^=cExtra_]').forEach(e=>{any+=parseFloat(e.value)||0;});
  cb.disabled=any<=0;cb.style.opacity=any>0?'1':'0.4';
}

function calcAdminPrice(pid, pricePerUnit){
  const el=document.getElementById('aAdd_'+pid);
  const priceEl=document.getElementById('aAddPrice_'+pid);
  if(!el||!priceEl)return;
  const qty=parseFloat(el.value)||0;
  if(qty>0&&pricePerUnit>0){
    priceEl.textContent='= ₹'+Math.ceil(qty*pricePerUnit);
  }else{
    priceEl.textContent='';
  }
}

// v15: ➖➕ Stepper functions for customer extra orders
function cStepMilk(type,plus){
  const id=type==='cow'?'cCowQty':'cBufQty';
  const el=document.getElementById(id);if(!el)return;
  const delta=plus?0.25:-0.25;
  let v=Math.round((parseFloat(el.value||0)+delta)*100)/100;
  v=Math.max(0,Math.min(50,v));
  el.value=v;
  const sp=document.getElementById(type==='cow'?'cCowVal':'cBufVal');
  if(sp)sp.textContent=v===0?'0':v+'L';
  const mb=document.getElementById(type==='cow'?'cCowMinus':'cBufMinus');
  if(mb)mb.style.opacity=v<=0?'0.3':'1';
  showConfirmBtn();
}
function cStepExtra(pid,delta,price,unit){
  const el=document.getElementById('cExtra_'+pid);if(!el)return;
  let v=Math.round((parseFloat(el.value||0)+delta)*100)/100;
  v=Math.max(0,Math.min(5,v));
  el.value=v;
  const sp=document.getElementById('cExtraVal_'+pid);
  if(sp)sp.textContent=v===0?'0':v+' '+unit;
  const mb=document.getElementById('cExtraMinus_'+pid);
  if(mb)mb.style.opacity=v<=0?'0.3':'1';
  calcPrice(pid,price);showConfirmBtn();
}
function calcPrice(pid, pricePerUnit){
  const el=document.getElementById('cExtra_'+pid);
  const priceEl=document.getElementById('price_'+pid);
  if(!el||!priceEl)return;
  const qty=parseFloat(el.value)||0;
  if(qty>0&&pricePerUnit>0){
    priceEl.textContent='= ₹'+Math.round(qty*pricePerUnit);
  }else{
    priceEl.textContent='';
  }
}

function renderExtraOrders(c){
  // Exclude cow milk and buffalo milk from extra orders (they have their own tabs)
  const milkIds=['cow_milk','buf_milk','cm','bm'];
  const prods=DB.products.filter(p=>p.active&&!milkIds.includes(p.id));
  const el=document.getElementById('cExtraOrders');
  if(!el)return;
  if(!prods.length){el.innerHTML='';return;}
  const s=DB.settings;
  
  // Color scheme for products (2.11.1c, 2.11.1d)
  const colors={
    cow_ghee:{bg:'#FFF9E6',border:'#D4A017',label:'#8B6000'},
    buf_ghee:{bg:'#FFF3E6',border:'#E8841A',label:'#7C3A00'},
    cow_curd:{bg:'#F0FFF4',border:'#48BB78',label:'#276749'},
    buf_curd:{bg:'#EBF8FF',border:'#4299E1',label:'#2B6CB0'},
    paneer:{bg:'#FFF5F5',border:'#FC8181',label:'#9B2C2C'},
  };
  
  el.innerHTML=prods.map(p=>{
    const price=s['price_'+p.id]||0;
    const col=colors[p.id]||{bg:'#F7FAFC',border:'#CBD5E0',label:'#4A5568'};
    const opts=Array.from({length:20},(_,i)=>((i+1)*0.25)).map(q=>`<option value="${q}">${q} ${p.unit}</option>`).join('');
    return `<div style="background:${col.bg};border:2px solid ${col.border};border-radius:12px;padding:10px;margin-bottom:8px;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
        <div style="display:flex;align-items:center;gap:6px;">
          <span style="font-size:18px;">${p.icon}</span>
          <span style="font-weight:800;font-size:13px;color:${col.label};">${p.name}</span>
        </div>
        <div style="display:flex;align-items:center;gap:6px;">
          ${price?`<span style="background:${col.border};color:white;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:700;">₹${price}/${p.unit}</span>`:''}
          <span id="price_${p.id}" style="font-weight:900;font-size:14px;color:#2A7A4B;"></span>
        </div>
      </div>
      <input type="hidden" id="cExtra_${p.id}" data-price="${price}" value="0">
      <div style="display:flex;align-items:center;justify-content:center;gap:16px;padding:4px 0;">
        <button id="cExtraMinus_${p.id}" onclick="cStepExtra('${p.id}',-0.25,${price||0},'${p.unit}')" style="width:38px;height:38px;border-radius:50%;border:2px solid ${col.border};background:white;color:${col.label};font-size:20px;font-weight:bold;opacity:0.3;">−</button>
        <span id="cExtraVal_${p.id}" style="font-size:16px;font-weight:800;color:${col.label};min-width:72px;text-align:center;">0</span>
        <button onclick="cStepExtra('${p.id}',0.25,${price||0},'${p.unit}')" style="width:38px;height:38px;border-radius:50%;border:2px solid ${col.border};background:white;color:${col.label};font-size:20px;font-weight:bold;">+</button>
      </div>
    </div>`;
  }).join('');
}

function renderUpcomingOrders(c){
  const el=document.getElementById('cUpcomingOrders');
  if(!el) return;
  const dates=getAdvanceDates();
  const orders=[];
  dates.forEach(d=>{
    const dd=DB.getDayData(d);
    const data=dd[c.id];
    if(data&&data.custChanged){orders.push({date:d,data});}
  });
  if(!orders.length){el.innerHTML='';return;}
  el.innerHTML='<div style="font-weight:bold;font-size:13px;margin-bottom:8px;color:#1A5FA0;">📋 Your Upcoming Orders:</div>'+
    orders.map(o=>{
      const d2=new Date(o.date+'T00:00:00');
      const dateStr=d2.toLocaleDateString('en-IN',{weekday:'short',day:'numeric',month:'short'});
      // Handle both new (cowQty/bufQty) and old (qty) formats
      const cowQ=o.data.cowQty!==undefined?o.data.cowQty:0;
      const bufQ=o.data.bufQty!==undefined?o.data.bufQty:0;
      const oldQty=o.data.qty||0;
      const milkParts=[];
      if(cowQ>0)milkParts.push(cowQ+'L 🐄');
      if(bufQ>0)milkParts.push(bufQ+'L 🐃');
      // Fall back to old format
      if(milkParts.length===0&&oldQty>0)milkParts.push(oldQty+'L milk');
      if(milkParts.length===0)milkParts.push('No Milk');
      const milkStr=milkParts.join(', ');
      const extras=o.data.extraOrders?Object.entries(o.data.extraOrders).filter(([k,v])=>v&&v!=='0').map(([k,v])=>v+' '+k).join(', '):'';
      const canCancel=canChangeDate(o.date);
      return '<div style="padding:6px 0;border-bottom:1px solid #eee;font-size:12px;">'+
        '<span style="font-weight:bold;color:#E8621A;">'+dateStr+'</span> — '+
        milkStr+(extras?', '+extras:'')+
        (canCancel?'<button class="btn-sm" style="background:#FDECEA;color:#C0392B;margin-left:8px;font-size:10px;" data-date="'+o.date+'">Cancel</button>':'')+
        '</div>';
    }).join('');
  
  el.querySelectorAll('button[data-date]').forEach(btn=>{
    btn.addEventListener('click',function(){
      if(!confirm('Cancel order for this date?'))return;
      const dd=DB.getDayData(this.dataset.date);
      if(dd[c.id]){dd[c.id].qty=parseFloat(c.litres)||1;dd[c.id].extraOrders={};dd[c.id].custChanged=false;}
      DB.setDayData(this.dataset.date,dd);renderUpcomingOrders(c);
    });
  });
}
function doCustChangeQty(){
  const c=DB.customers.find(x=>x.id===custId);if(!c)return;
  const targetDate=document.getElementById('cAdvDate').value;
  if(!targetDate){alert('Please select a date');return;}
  if(!canChangeDate(targetDate)){alert('❌ Cannot change after 6 PM previous day.');return;}
  if(!guardOrderVsVacation(c,targetDate))return; // v23: vacation conflict guard
  
  let dd=DB.getDayData(targetDate);
  if(!dd[c.id])dd[c.id]={delivered:false,qty:parseFloat(c.litres)||1};
  dd[c.id].custChanged=true;
  
  // Cow milk qty - preserve default if not changed (2.11.1x)
  const {cowDefault,bufDefault}=getCustDefaults(c);
  const cowEl=document.getElementById('cCowQty');
  const cowVal=cowEl?parseFloat(cowEl.value):-1;
  dd[c.id].cowQty = cowVal>=0 ? cowVal : cowDefault;
  
  // Buffalo milk qty - preserve default if not changed (2.11.1x)
  const bufEl=document.getElementById('cBufQty');
  const bufVal=bufEl?parseFloat(bufEl.value):-1;
  dd[c.id].bufQty = bufVal>=0 ? bufVal : bufDefault;
  
  // Total milk qty for compatibility
  const cowQ=dd[c.id].cowQty||0;const bufQ=dd[c.id].bufQty||0;
  dd[c.id].qty=cowQ+bufQ;
  
  // Extra orders (ghee, paneer)
  // Exclude cow milk and buffalo milk from extra orders (they have their own tabs)
  const milkIds=['cow_milk','buf_milk','cm','bm'];
  const prods=DB.products.filter(p=>p.active&&!milkIds.includes(p.id));
  // v17.7: MERGE — keep existing extra orders, only add/update products the customer set this time.
  // Different products (paneer, ghee) both stay; newest qty replaces only that same product.
  const extraOrders=Object.assign({},dd[c.id].extraOrders||{});
  prods.forEach(p=>{
    const el=document.getElementById('cExtra_'+p.id);
    if(el&&parseFloat(el.value)>0)extraOrders[p.name]=parseFloat(el.value)+' '+p.unit;
  });
  dd[c.id].extraOrders=extraOrders;
  DB.setDayData(targetDate,dd);
  
  const tDate=new Date(targetDate+'T00:00:00').toLocaleDateString('en-IN',{day:'numeric',month:'short'});
  const milkStr=(cowQ>0?cowQ+'L Cow ':'')+( bufQ>0?bufQ+'L Buffalo':'');
  const extraStr=Object.entries(extraOrders).map(([k,v])=>v+' '+k).join(', ');
  
  // 2.11.1g - Only show latest notification per customer+date
  const notifKey=c.id+'_'+targetDate;
  const notifs=DB.notifs.filter(n=>n.key!==notifKey); // Remove old same date notification
  const newNotif={m:c.name+' ('+tDate+'): '+(milkStr||'No Milk')+(extraStr?', '+extraStr:''),t:new Date().toLocaleTimeString('en-IN',{hour:'2-digit',minute:'2-digit'}),r:false,key:notifKey};
  notifs.unshift(newNotif);
  if(notifs.length>20)notifs.pop();
  localStorage.setItem('cmo_notifs',JSON.stringify(notifs));
  fSet('data','notifs',{list:notifs});
  fSet('adminNotifs','latest',{msg:newNotif.m,time:new Date().toISOString(),read:false,custId:custId,date:targetDate});
  
  // v15.1: After submit - buttons stay visible, just re-grey via re-render
  alert('✅ Order confirmed for '+tDate+'!');
  renderCustQtyChange(c);
  setTimeout(showConfirmBtn,200);
  renderUpcomingOrders(c);
}
async function checkBoyTrack(){
  const el=document.getElementById('cTrackStat');if(!el)return;
  const data=await fGet('tracking','boyLocation');
  if(!data||!data.active){el.textContent='🔴 Delivery not started yet';return;}
  const mins=Math.floor((Date.now()-new Date(data.updated).getTime())/60000);
  el.textContent='🟢 On the way • '+(mins<1?'Just now':mins+' min ago')+' 🥛';
}
function renderCustPay(c){
  // v20.1: MY BILL = running balance (carry-over), READ-ONLY for customer. Uses same functions as admin card so totals always match. No buttons.
  var yr,mo;
  if(typeof cBillY!=='undefined'&&typeof cBillM!=='undefined'){yr=cBillY;mo=cBillM;}
  else{var n=new Date();yr=n.getFullYear();mo=n.getMonth();}
  var ym=yr+'-'+String(mo+1).padStart(2,'0');
  var rec=(DB.getMonthPaid(ym)||{})[c.id]||{};
  var carryIn=billCarryInG(c.id,ym);
  var totalDue=billTotalDueG(c.id,ym);
  // paid so far THIS month (display only)
  var milkTot=billMilkTotalG(c.id,ym);
  var exs=billExtrasFor(c.id,ym);var ep=rec.epaid||{};
  var extrasPaid=exs.filter(function(e){return !!ep[e.key];}).reduce(function(a,e){return a+e.amt;},0);
  var manual=(rec.mpays||[]).reduce(function(a,x){return a+x.amt;},0);
  var adv=rec.adv||0;
  var milkPaid=(rec.p===true)?milkTot:0;
  var paidSoFar=Math.round(milkPaid+manual+adv);
  var dueAbs=Math.abs(Math.round(totalDue));
  var col=(totalDue>0)?'#C0392B':'#2A7A4B';
  var bg=(totalDue>0)?'#FDECEA':'#E8F5EE';
  // v20.2: simple customer words — "Advance" instead of "Credit", "Please pay" instead of "still due", "Fully paid" instead of "Cleared"; fonts a little bigger
  var statusLbl=(totalDue>0)?('⏳ Please pay ₹'+dueAbs):((totalDue<0)?('💰 Advance ₹'+dueAbs+' (saved for next month)'):'✅ Fully paid');
  var carryLine='';
  if(Math.round(carryIn)!==0){
    carryLine='<div style="background:'+(carryIn>0?'#FDECEA':'#E8F5EE')+';border-radius:9px;padding:10px 12px;margin-bottom:12px;font-size:14px;font-weight:800;color:'+(carryIn>0?'#C0392B':'#2A7A4B')+';">'+(carryIn>0?('↪️ Old pending: ₹'+Math.round(carryIn)):('💰 Advance from before: ₹'+Math.abs(Math.round(carryIn))))+'</div>';
  }
  document.getElementById('cPaySec').innerHTML=carryLine+
    '<div style="text-align:center;padding:6px 0;">'+
      '<div style="font-size:42px;font-weight:900;color:'+col+';">₹'+dueAbs+'</div>'+
      '<div style="font-size:13px;color:#999;margin-top:3px;">'+(totalDue>0?'Amount Due':(totalDue<0?'Advance Balance':'Balance'))+' · '+fmtMY(yr,mo)+'</div>'+
      '<div style="display:inline-block;padding:8px 18px;border-radius:12px;font-size:15px;font-weight:800;margin-top:12px;background:'+bg+';color:'+col+';">'+statusLbl+'</div>'+
      (paidSoFar>0?'<div style="font-size:14px;color:#2A7A4B;font-weight:700;margin-top:12px;">You already paid ₹'+paidSoFar+'</div>':'')+
      (adv>0?'<div style="font-size:11px;color:#9aa0a6;font-weight:600;margin-top:6px;">(Advance payment: ₹'+Math.round(adv)+')</div>':'')+
      ((totalDue>0)?'<div style="font-size:13px;color:#999;margin-top:12px;">Please pay to delivery agent or contact manager</div>':'')+
    '</div>';
}
function cChM(dir){cBillM+=dir;if(cBillM>11){cBillM=0;cBillY++;}if(cBillM<0){cBillM=11;cBillY--;}document.getElementById('cML2').textContent=fmtMY(cBillY,cBillM);const c=DB.customers.find(x=>x.id===custId);if(c){renderCustMonth(c);renderCustPay(c);}}
function renderCustMonth(c){
  const ym=`${cBillY}-${String(cBillM+1).padStart(2,'0')}`,all=JSON.parse(localStorage.getItem('cmo_days')||'{}');
  const days=Object.keys(all).filter(d=>d.startsWith(ym)).sort();
  // v17.6: helper — value of extra orders for a day (paneer, ghee, etc.)
  const prods=DB.products,s=DB.settings;
  const extraVal=(d)=>{
    if(!d||!d.extraOrders)return {amt:0,items:[]};
    let amt=0;const items=[];
    Object.entries(d.extraOrders).forEach(([name,val])=>{
      if(!val)return;
      const qty=parseFloat(val)||0;if(qty<=0)return;
      const prod=prods.find(p=>p.name===name);
      const price=prod?(parseFloat(s['price_'+prod.id])||0):0;
      amt+=qty*price;
      items.push(name+' '+val+(price?' = ₹'+Math.round(qty*price):''));
    });
    return {amt,items};
  };
  let tL=0,tA=0,tExtra=0;
  const entries=days.map(day=>{const dd=all[day],d=dd[c.id];if(d&&d.delivered){const q=parseFloat(d.qty)||0;const ev=extraVal(d);tL+=q;tA+=q*c.price;tExtra+=ev.amt;return{day,qty:q,amt:q*c.price,time:d.delivTime,extras:ev.items,extraAmt:ev.amt};}return null;}).filter(Boolean);
  const grand=tA+tExtra;
  const paid=DB.getMonthPaid(ym);
  document.getElementById('cMSum').innerHTML=`<div style="display:flex;gap:8px;"><div class="stat" style="flex:1;padding:12px 6px;"><div class="stat-num" style="color:#E8621A;font-size:24px;">${Math.round(tL*10)/10}L</div><div class="stat-lbl" style="font-size:13px;">Milk Litres</div></div><div class="stat" style="flex:1;padding:12px 6px;"><div class="stat-num" style="color:#6B3FA0;font-size:24px;">₹${Math.round(grand)}</div><div class="stat-lbl" style="font-size:13px;">Total Bill</div></div><div class="stat" style="flex:1;padding:12px 6px;"><div class="stat-num" style="font-size:18px;color:${isFullPaid(paid[c.id])?'#2A7A4B':'#C0392B'};">${isFullPaid(paid[c.id])?'Paid':'Due'}</div><div class="stat-lbl" style="font-size:13px;">Status</div></div></div>${tExtra>0?`<div style="font-size:14px;color:#666;margin-top:8px;text-align:center;">🥛 Milk: ₹${Math.round(tA)} &nbsp;+&nbsp; 🧀 Extras: ₹${Math.round(tExtra)}</div>`:''}`;
  document.getElementById('cDList').innerHTML=!entries.length?'<div style="text-align:center;color:#999;font-size:13px;padding:14px 0;">No deliveries this month.</div>'
    :'<div style="font-size:13px;color:#999;font-weight:bold;margin-bottom:5px;">Daily entries:</div>'+
    entries.slice().reverse().map(e=>`<div style="padding:9px 0;border-bottom:1px solid #eee;font-size:15px;"><div style="display:flex;justify-content:space-between;"><span style="color:#999;">${fmtDay(e.day)}</span><span style="font-weight:bold;color:#1A5FA0;">${e.qty===0?'No Milk':e.qty+'L'}</span><span style="color:#2A7A4B;font-weight:bold;">✅ ₹${Math.round(e.amt)}${e.time?' at '+e.time:''}</span></div>${e.extras&&e.extras.length?`<div style="font-size:12px;color:#6B3FA0;font-weight:bold;margin-top:3px;">🧀 ${e.extras.join(', ')}</div>`:''}</div>`).join('');
}

// ===== EVENT LISTENERS (using addEventListener - most reliable) =====
// Create CMO SVG logo
function createCMOLogo(size=80){
  return `<svg width="${size}" height="${size}" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <!-- Sky background -->
    <circle cx="50" cy="50" r="50" fill="#87CEEB"/>
    <!-- Light sky gradient overlay -->
    <circle cx="50" cy="50" r="50" fill="url(#skyGrad)" opacity="0.6"/>
    <defs>
      <radialGradient id="skyGrad" cx="50%" cy="30%" r="70%">
        <stop offset="0%" stop-color="#E0F4FF"/>
        <stop offset="100%" stop-color="#87CEEB"/>
      </radialGradient>
    </defs>
    <!-- Dark green ground base -->
    <ellipse cx="50" cy="88" rx="50" ry="15" fill="#3A8C3A"/>
    <!-- Medium green grass layer -->
    <path d="M0 78 Q10 65 18 78 Q25 65 33 78 Q40 65 48 78 Q55 65 63 78 Q70 65 78 78 Q85 65 93 78 Q98 70 100 78 L100 100 L0 100 Z" fill="#5BB85B"/>
    <!-- Light green grass top -->
    <path d="M0 82 Q8 72 15 82 Q22 72 30 82 Q37 72 45 82 Q52 72 60 82 Q67 72 75 82 Q82 72 90 82 Q95 76 100 82 L100 100 L0 100 Z" fill="#7DC87D"/>
    <!-- Cow body -->
    <ellipse cx="52" cy="62" rx="16" ry="11" fill="white" stroke="#ccc" stroke-width="0.5"/>
    <!-- Cow head -->
    <circle cx="66" cy="56" r="8" fill="white" stroke="#ccc" stroke-width="0.5"/>
    <!-- Cow spots -->
    <ellipse cx="50" cy="60" rx="5" ry="4" fill="#8B6914" opacity="0.6"/>
    <ellipse cx="57" cy="67" rx="3" ry="2" fill="#8B6914" opacity="0.5"/>
    <!-- Cow ears -->
    <ellipse cx="62" cy="49" rx="3" ry="2" fill="#FFB6C1" transform="rotate(-20 62 49)"/>
    <ellipse cx="72" cy="50" rx="3" ry="2" fill="#FFB6C1" transform="rotate(20 72 50)"/>
    <!-- Cow eye -->
    <circle cx="69" cy="55" r="1.5" fill="#333"/>
    <!-- Cow nose -->
    <ellipse cx="72" cy="59" rx="3" ry="2" fill="#FFB6C1"/>
    <!-- Cow legs -->
    <rect x="40" y="70" width="4" height="8" rx="2" fill="white" stroke="#ccc" stroke-width="0.5"/>
    <rect x="47" y="70" width="4" height="8" rx="2" fill="white" stroke="#ccc" stroke-width="0.5"/>
    <rect x="54" y="70" width="4" height="8" rx="2" fill="white" stroke="#ccc" stroke-width="0.5"/>
    <!-- Grass blades in front of cow -->
    <path d="M35 80 Q37 72 39 80" fill="none" stroke="#5BB85B" stroke-width="2"/>
    <path d="M42 80 Q44 70 46 80" fill="none" stroke="#5BB85B" stroke-width="2"/>
    <!-- CD staggered text - C upper curved, D lower curved -->
    <!-- C - bold, upper position with shadow -->
    <text x="13" y="38" font-family="Georgia, serif" font-size="32" font-weight="900" fill="#0D3B6E" opacity="0.3">C</text>
    <text x="12" y="37" font-family="Georgia, serif" font-size="32" font-weight="900" fill="white">C</text>
    <!-- D - bold, lower position with shadow -->
    <text x="29" y="52" font-family="Georgia, serif" font-size="32" font-weight="900" fill="#0D3B6E" opacity="0.3">D</text>
    <text x="28" y="51" font-family="Georgia, serif" font-size="32" font-weight="900" fill="white">D</text>
  </svg>`;
}

document.addEventListener('DOMContentLoaded',function(){
  // v24.7: HAMBURGER MENU (customer window)
  // The 5 menu accordions are hidden on the home screen and revealed one-at-a-time
  // as a focused screen when picked from the drawer. 🛒 Order More always stays on home.
  (function(){
    var MENU_IDS=['accMilk','accMonthly','accBill','accHold','accAddr'];
    var drawer=document.getElementById('hambDrawer');
    var overlay=document.getElementById('hambOverlay');
    var menuBtn=document.getElementById('custMenuBtn');
    var backBtn=document.getElementById('custMenuBack');
    if(!drawer||!overlay||!menuBtn)return;
    function openDrawer(){
      var c=DB.customers.find(function(x){return x.id===custId;});
      var nm=document.getElementById('hambName');
      if(nm)nm.textContent=c?c.name:'';
      drawer.classList.add('open');overlay.classList.add('open');
    }
    function closeDrawer(){drawer.classList.remove('open');overlay.classList.remove('open');}
    // Hide all 5 menu sections (home view); show Order More + fixed cards
    function showHome(){
      MENU_IDS.forEach(function(id){var a=document.getElementById(id);if(a){a.style.display='none';a.classList.remove('open');}});
      var ord=document.getElementById('accOrder');if(ord)ord.style.display='';
      document.querySelectorAll('#sc .card,#sc .chero,#sc #cTrackCard').forEach(function(el){el.style.display='';});
      if(backBtn)backBtn.style.display='none';
      window.scrollTo(0,0);
    }
    // Show ONLY the chosen section as a focused screen (hide everything else)
    function showSection(id){
      // hide fixed cards + order + all menu sections
      var ord=document.getElementById('accOrder');if(ord)ord.style.display='none';
      document.querySelectorAll('#sc .card,#sc .chero,#sc #cTrackCard').forEach(function(el){el.style.display='none';});
      MENU_IDS.forEach(function(mid){var a=document.getElementById(mid);if(a){a.style.display=(mid===id)?'':'none';if(mid===id)a.classList.add('open');else a.classList.remove('open');}});
      if(backBtn)backBtn.style.display='block';
      window.scrollTo(0,0);
    }
    window._custMenuShowHome=showHome; // used on (re)entering customer screen
    menuBtn.addEventListener('click',openDrawer);
    overlay.addEventListener('click',closeDrawer);
    if(backBtn)backBtn.addEventListener('click',showHome);
    drawer.querySelectorAll('.hamb-item').forEach(function(it){
      it.addEventListener('click',function(){closeDrawer();showSection(this.getAttribute('data-target'));});
    });
    // Start at home whenever DOM is ready
    showHome();
  })();
  // v24.9: AGENT HAMBURGER MENU (Route page) — moves Notifications, Stats,
  // Tomorrow's Orders, Contact into the ☰ drawer; opens each as a focused view.
  // The delivery customer list (with purple ribbons + landmark) ALWAYS stays on home.
  (function(){
    var drawer=document.getElementById('agentHambDrawer');
    var overlay=document.getElementById('agentHambOverlay');
    var menuBtn=document.getElementById('agentMenuBtn');
    if(!drawer||!overlay||!menuBtn)return;
    // returns the live elements for each menu target (some are created dynamically)
    function elFor(key){
      if(key==='agentNotif')return [document.getElementById('routeNotifBar')];
      if(key==='agentStats')return [document.getElementById('routeStats')];
      if(key==='agentContact')return [document.getElementById('callMgrSec')];
      if(key==='agentTomorrow')return [document.getElementById('agentTmrOrders')];
      return [];
    }
    var ALL=['agentNotif','agentStats','agentTomorrow','agentContact'];
    function backBtn(){return document.getElementById('agentMenuBack');}
    // Home view: hide the 4 menu sections, show the delivery list + date + note + location
    function showHome(){
      ALL.forEach(function(k){elFor(k).forEach(function(el){if(el)el.style.display='none';});});
      // delivery list card + date + note + location stay visible
      ['routeDate','routeList'].forEach(function(id){var e=document.getElementById(id);if(e){var card=e.closest('.card')||e;card.style.display='';}});
      var note=document.querySelector('#pg-route .nb-b');if(note)note.style.display='';
      var loc=document.getElementById('boyLocWrap');if(loc)loc.style.display='';
      // the main route card itself
      var rl=document.getElementById('routeList');if(rl){var rc=rl.closest('.card');if(rc)rc.style.display='';}
      var bb=backBtn();if(bb)bb.style.display='none';
      window.scrollTo(0,0);
    }
    // Focused view: hide everything else, show only the chosen section
    function showSection(key){
      // hide delivery list + date + note + location
      var rl=document.getElementById('routeList');if(rl){var rc=rl.closest('.card');if(rc)rc.style.display='none';}
      var note=document.querySelector('#pg-route .nb-b');if(note)note.style.display='none';
      var loc=document.getElementById('boyLocWrap');if(loc)loc.style.display='none';
      var rd=document.getElementById('routeDate');if(rd)rd.style.display='none';
      // hide all menu sections, then reveal the chosen one
      ALL.forEach(function(k){elFor(k).forEach(function(el){if(el)el.style.display='none';});});
      elFor(key).forEach(function(el){if(el)el.style.display='block';});
      var bb=backBtn();if(bb)bb.style.display='block';
      window.scrollTo(0,0);
    }
    function openDrawer(){
      var ag=(DB.settings.agents||[]).find(function(a){return a.id===agentId;});
      var nm=document.getElementById('agentHambName');if(nm)nm.textContent=ag?(ag.agentName||ag.name||''):'';
      drawer.classList.add('open');overlay.classList.add('open');
    }
    function closeDrawer(){drawer.classList.remove('open');overlay.classList.remove('open');}
    window._agentMenuShowHome=showHome;
    menuBtn.addEventListener('click',openDrawer);
    overlay.addEventListener('click',closeDrawer);
    drawer.querySelectorAll('.agent-hamb-item').forEach(function(it){
      it.addEventListener('click',function(){closeDrawer();showSection(this.getAttribute('data-atarget'));});
    });
    // back button click (delegated, since it's added into the page)
    document.addEventListener('click',function(e){
      if(e.target&&e.target.id==='agentMenuBack')showHome();
    });
  })();
  // v25: ADMIN ⋮ MENU (Today page) — Phase 1. Per-route collapsible list of
  // 5 items (Agent Location, Purple Alerts, Notifications, Mark Deliveries,
  // Tomorrow Special Orders). Tapping an item: switches to that route (like
  // tapping its route tab), then opens that one section full-screen with a
  // "← Back to Today" button. Today's Stats/Summary tables + route tabs stay
  // on the main Today page (unchanged) — this menu is for the 5 moved items.
  (function(){
    var drawer=document.getElementById('adminDotsDrawer');
    var overlay=document.getElementById('adminDotsOverlay');
    var menuBtn=document.getElementById('adminMenuBtn');
    var routesWrap=document.getElementById('adminDotsRoutes');
    if(!drawer||!overlay||!menuBtn||!routesWrap)return;
    var ITEMS=[
      {key:'adLoc',ico:'📍',label:'Agent Location'},
      {key:'adAlerts',ico:'🟣',label:'Purple Alerts'},
      {key:'adNotif',ico:'🔔',label:'Notifications'},
      {key:'adMark',ico:'✅',label:'Mark Deliveries'},
      {key:'adTomorrow',ico:'📋',label:'Tomorrow Special Orders'}
    ];
    var ALL_KEYS=ITEMS.map(function(it){return it.key;});
    function elFor(key){
      if(key==='adLoc')return [document.getElementById('dashLiveTrack')];
      if(key==='adAlerts')return [document.getElementById('qtyChangesCard')];
      if(key==='adNotif')return [document.getElementById('notifBar')];
      if(key==='adMark')return [document.getElementById('markDelivCard')];
      if(key==='adTomorrow')return [document.getElementById('tomorrowOrders')];
      return [];
    }
    // the rest of the Today page (stays visible on home, hidden in focused view)
    function homeOnlyEls(){
      var ids=['qtyChangesCard','notifBar','markDelivCard','tomorrowOrders'];
      var els=[document.getElementById('dashLiveTrack')];
      ids.forEach(function(id){var e=document.getElementById(id);if(e)els.push(e);});
      return els;
    }
    function backBtn(){return document.getElementById('adminMenuBack');}
    function showHome(){
      ALL_KEYS.forEach(function(k){elFor(k).forEach(function(el){if(el){el.style.display='';var acc=el.closest('.acc');if(acc)acc.style.display='';}});});
      var bb=backBtn();if(bb)bb.style.display='none';
      var rt=document.getElementById('routeTabs');if(rt)rt.style.display='block';
      window.scrollTo(0,0);
    }
    function showSection(routeId,key){
      if(routeId&&typeof selectRoute==='function')selectRoute(routeId);
      else if(typeof renderToday==='function')renderToday();
      homeOnlyEls().forEach(function(el){var acc=el.closest('.acc');if(acc)acc.style.display='none';else el.style.display='none';});
      var sec=elFor(key)[0];
      if(sec){var acc=sec.closest('.acc');if(acc){acc.style.display='block';acc.classList.add('open');}sec.style.display='block';}
      var rt=document.getElementById('routeTabs');if(rt)rt.style.display='none';
      var bb=backBtn();if(bb)bb.style.display='block';
      window.scrollTo(0,0);
    }
    function buildMenu(){
      var agents=DB.settings.agents||[];
      var html='';
      agents.forEach(function(a,i){
        var rid='adrRoute'+i;
        html+='<div class="adr-route-head" data-rid="'+rid+'" data-route="'+a.id+'"><span>🚴 '+(a.name||'Route '+(i+1))+(a.agentName?' ('+a.agentName+')':'')+'</span><span class="adr-arrow">▼</span></div>';
        html+='<div class="adr-route-body" id="'+rid+'">';
        ITEMS.forEach(function(it){
          html+='<div class="admin-dots-item" data-route="'+a.id+'" data-key="'+it.key+'"><span class="adi-ico">'+it.ico+'</span> '+it.label+'</div>';
        });
        html+='</div>';
      });
      // v25.1: Exit button at the very bottom of the drawer (after last route)
      html+='<div id="adminDotsExit" style="padding:18px 16px;"><button style="width:100%;background:#FDECEA;color:#C0392B;border:none;border-radius:10px;padding:14px;font-size:15px;font-weight:bold;cursor:pointer;">🚪 Exit</button></div>';
      routesWrap.innerHTML=html;
      var exB=document.querySelector('#adminDotsExit button');
      if(exB)exB.addEventListener('click',function(){closeDrawer();var realExit=document.getElementById('exitBtn');if(realExit)realExit.click();});
      routesWrap.querySelectorAll('.adr-route-head').forEach(function(head){
        head.addEventListener('click',function(){
          var body=document.getElementById(this.getAttribute('data-rid'));
          var isOpen=body.classList.contains('open');
          routesWrap.querySelectorAll('.adr-route-body').forEach(function(b){b.classList.remove('open');});
          routesWrap.querySelectorAll('.adr-route-head').forEach(function(h){h.classList.remove('open');});
          if(!isOpen){body.classList.add('open');this.classList.add('open');}
        });
      });
      routesWrap.querySelectorAll('.admin-dots-item').forEach(function(it){
        it.addEventListener('click',function(){
          closeDrawer();
          showSection(this.getAttribute('data-route'),this.getAttribute('data-key'));
        });
      });
    }
    function openDrawer(){buildMenu();drawer.classList.add('open');overlay.classList.add('open');}
    function closeDrawer(){drawer.classList.remove('open');overlay.classList.remove('open');}
    window._adminMenuShowHome=showHome;
    menuBtn.addEventListener('click',openDrawer);
    overlay.addEventListener('click',closeDrawer);
    document.addEventListener('click',function(e){
      if(e.target&&e.target.id==='adminMenuBack')showHome();
    });
  })();
  document.addEventListener('click',function(e){
    if(!e.target.closest('.card-dots-menu')){
      document.querySelectorAll('.card-dots-popup.open').forEach(function(p){p.classList.remove('open');});
    }
  });
  // v17.3: accordion open/close (event delegation — works even after re-renders)
  document.addEventListener('click',function(e){
    const head=e.target.closest('.acc-head');
    if(head){const acc=head.parentElement;if(acc&&acc.classList.contains('acc')){
      acc.classList.toggle('open');
      // v18.6: remember open address so re-render (sync) doesn't auto-close it
      const aid=acc.getAttribute('data-addrid');
      if(aid){if(acc.classList.contains('open'))window.openAddrSet.add(aid);else window.openAddrSet.delete(aid);}
    }}
  });
  // Set logo
  const logos=document.querySelectorAll('#appLogo');
  logos.forEach(l=>{l.innerHTML=createCMOLogo(80);});
  // Login buttons
  document.getElementById('loginSubmitBtn').addEventListener('click',doPhoneLogin);
  document.getElementById('loginPhone').addEventListener('keydown',function(e){if(e.key==='Enter')doPhoneLogin();});
  document.getElementById('pinFallbackLink').addEventListener('click',function(e){
    e.preventDefault();
    const c=document.getElementById('pinFallbackChoice');
    c.style.display=c.style.display==='none'?'flex':'none';
  });
  document.getElementById('fallbackAdminBtn').addEventListener('click',function(){matchedOwnerName='';showPinLogin('admin');});
  document.getElementById('fallbackAgentBtn').addEventListener('click',function(){agentId='';showPinLogin('agent');});
  buildAgentTiles();
  // Pick from Contacts
  document.getElementById('pickContactBtn').addEventListener('click', async function(){
    if(!('contacts' in navigator && 'ContactsManager' in window)){
      alert('Contact picker not supported on this browser. Please enter manually.');
      return;
    }
    try{
      const props=['name','tel'];
      const contacts=await navigator.contacts.select(props,{multiple:false});
      if(contacts&&contacts.length>0){
        const c=contacts[0];
        if(c.name&&c.name[0])document.getElementById('cN').value=c.name[0];
        if(c.tel&&c.tel[0]){
          // Clean number - remove +91, spaces, dashes
          let num=c.tel[0].replace(/[^0-9]/g,'');
          if(num.length===12&&num.startsWith('91'))num=num.slice(2);
          if(num.length===11&&num.startsWith('0'))num=num.slice(1);
          document.getElementById('cMo').value=num.slice(0,10);
        }
      }
    }catch(e){
      alert('Could not pick contact. Please enter manually.');
    }
  });
  // Allow numbers only in customer mobile fields
  document.getElementById('cLMob').addEventListener('input',function(){this.value=this.value.replace(/[^0-9]/g,'');});
  document.getElementById('cMo').addEventListener('input',function(){this.value=this.value.replace(/[^0-9]/g,'');});

  // Exit buttons
  document.getElementById('exitBtn').addEventListener('click',doLogout);
  document.getElementById('custExitBtn').addEventListener('click',doLogout);

  // PIN keys
  ['1','2','3','4','5','6','7','8','9','0'].forEach(k=>{document.getElementById('pk'+k).addEventListener('click',function(){pk(k);});});
  document.getElementById('pkd').addEventListener('click',function(){pd();});
  document.getElementById('pinCancelBtn').addEventListener('click',function(){closeMo('pinMo');});

  // Setup PIN keys
  ['1','2','3','4','5','6','7','8','9','0'].forEach(k=>{document.getElementById('sk'+k).addEventListener('click',function(){spk(k);});});
  document.getElementById('skd').addEventListener('click',function(){spd();});
  document.getElementById('setupCancelBtn').addEventListener('click',function(){closeMo('setupMo');});

  // Customer login
  document.getElementById('custLoginBtn').addEventListener('click',doCustLogin);
  document.getElementById('custLoginCancelBtn').addEventListener('click',function(){closeMo('cLoginMo');});

  // Day nav
  document.getElementById('dayPrev').addEventListener('click',function(){
    const c=new Date(viewDate+'T00:00:00');
    c.setDate(c.getDate()-1);
    viewDate=dKey(c);renderToday();
  });
  document.getElementById('dayNext').addEventListener('click',function(){
    const cur=new Date(viewDate+'T00:00:00');
    cur.setDate(cur.getDate()+1);
    const nd=cur.getFullYear()+'-'+String(cur.getMonth()+1).padStart(2,'0')+'-'+String(cur.getDate()).padStart(2,'0');
    const today=new Date();
    const max=new Date(today);max.setDate(today.getDate()+30);
    const maxStr=max.getFullYear()+'-'+String(max.getMonth()+1).padStart(2,'0')+'-'+String(max.getDate()).padStart(2,'0');
    if(nd<=maxStr){viewDate=nd;renderToday();}
  });
  // v21.7: tap the date to open a calendar and jump to any past date (fetches that day's data)
  (function(){
    var dlbl=document.getElementById('todayLbl');
    var dpick=document.getElementById('dashDate');
    if(!dlbl||!dpick)return;
    dlbl.addEventListener('click',function(){
      dpick.value=viewDate;
      var today=new Date();var mx=new Date(today);mx.setDate(today.getDate()+30);
      try{dpick.max=dKey(mx);}catch(e){}
      if(dpick.showPicker){try{dpick.showPicker();return;}catch(e){}}
      dpick.focus();dpick.click();
    });
    dpick.addEventListener('change',function(){
      var nd=this.value; if(!nd)return;
      var today=new Date();var mx=new Date(today);mx.setDate(today.getDate()+30);var maxStr=dKey(mx);
      if(nd>maxStr)nd=maxStr;
      try{
        fGet('daydata',nd).then(function(vdd){if(vdd){var a=JSON.parse(localStorage.getItem('cmo_days')||'{}');a[nd]=vdd;localStorage.setItem('cmo_days',JSON.stringify(a));}viewDate=nd;renderToday();}).catch(function(){viewDate=nd;renderToday();});
      }catch(e){viewDate=nd;renderToday();}
    });
  })();


  // Bill nav
  document.getElementById('billPrev').addEventListener('click',function(){billM--;if(billM<0){billM=11;billY--;}renderBill();});
  document.getElementById('billNext').addEventListener('click',function(){billM++;if(billM>11){billM=0;billY++;}renderBill();});

  // Add customer
  document.getElementById('addCustBtn').addEventListener('click',addCust);  document.getElementById('clearCustBtn').addEventListener('click',function(){
    ['cN','cMo','cA','cP','cO','cML'].forEach(id=>document.getElementById(id).value='');custLitSet('cL',1);
    document.getElementById('cT').value='';
    document.getElementById('cL').value='1';
    document.getElementById('cMT').value='cow';
  });

  // Save handover qty (Admin only)
  const shb=document.getElementById('saveHandoverBtn');
  if(shb)shb.addEventListener('click',function(){
    // v15.5: aligned to per-route handover system (was orphan legacy key)
    if(role==='admin'&&!selectedRouteId){alert('⚠️ Select a route tab first!\nHandover is saved per route.');return;}
    const val=parseFloat(document.getElementById('handoverQty').value)||0;
    const rid=role==='admin'?selectedRouteId:agentId;
    localStorage.setItem('handover_'+dKey()+'_cow_'+rid,val);
    fSet('handover',dKey()+'_'+rid,{cow:val,buf:0,date:dKey(),route:rid});
    renderRoute();
    alert('✅ Handover: '+val+'L saved!');
  });
  // v18.4: new Milk Handover strip button (same logic)
  const shb2=document.getElementById('saveHandoverBtn2');
  if(shb2)shb2.addEventListener('click',function(){
    if(role==='admin'&&!selectedRouteId){alert('⚠️ Select a route tab first!\nHandover is saved per route.');return;}
    const val=parseFloat(document.getElementById('handoverQty2').value)||0;
    const rid=role==='admin'?selectedRouteId:agentId;
    localStorage.setItem('handover_'+dKey()+'_cow_'+rid,val);
    fSet('handover',dKey()+'_'+rid,{cow:val,buf:0,date:dKey(),route:rid});
    renderRoute();
    alert('✅ Handover: '+val+'L saved!');
  });
  // v23.10: Save dashboard handover — reads all .ho-box inputs and saves as per-product map
  const sdhb=document.getElementById('saveDashHandoverBtn');
  if(sdhb)sdhb.addEventListener('click',function(){
    if(!selectedRouteId){alert('⚠️ Select a route tab (A/B/C...) first!\nHandover is saved separately for each route.');return;}
    var map={};
    document.querySelectorAll('#handoverBoxesArea .ho-box').forEach(function(inp){
      var val=parseFloat(inp.value)||0;
      if(val>0)map[inp.dataset.pid]=val;
    });
    setHandoverMap(selectedRouteId,map);
    if(window._extraHoPids)window._extraHoPids[selectedRouteId]=[]; // v23.11: clear extra pids after save (now in map)
    renderToday();
    var summary=Object.entries(map).map(function(e){
      var p=(DB.products||[]).find(function(x){return x.id===e[0];})||{name:e[0]};
      return (p.icon||'')+' '+(p.name||e[0])+': '+e[1];
    }).join(', ');
    alert('✅ Handover saved! '+(summary||'(nothing entered)'));
  });
  // v23.10: Clear dashboard handover
  const cdhb=document.getElementById('clearDashHandoverBtn');
  if(cdhb)cdhb.addEventListener('click',function(){
    if(!selectedRouteId){alert('⚠️ Select a route tab (A/B/C...) first!');return;}
    if(!confirm('Clear the typed Handover for this route?\nThe Handover column will go back to ordered quantities.'))return;
    clearHandoverMap(selectedRouteId);
    if(window._extraHoPids)window._extraHoPids[selectedRouteId]=[];  // v23.11: reset extra pids on clear
    renderToday();
  });

  // Settings
  document.getElementById('editMgrBtn').addEventListener('click',function(){const s=DB.settings;const v=prompt('Manager Phone:',s.ownerPhone||'');if(v!==null){s.ownerPhone=v.trim();DB.setSettings(s);renderAdd();}});

  document.getElementById('changeSecretBtn').addEventListener('click',function(){
    const cur=prompt('Enter CURRENT secret answer first:');
    if(cur===null)return;
    if(hPin(cur.trim())!==getSecretHash()){alert('❌ Wrong current answer!');return;}
    const nw=prompt('Enter NEW secret answer:');
    if(!nw||nw.trim().length<4){alert('❌ Answer must be at least 4 characters!');return;}
    const confirm2=prompt('Confirm NEW secret answer:');
    if(nw.trim()!==confirm2.trim()){alert('❌ Answers do not match!');return;}
    setSecretHash(hPin(nw.trim()));
    alert('✅ Secret answer changed successfully!');
  });

  // Edit customer modal
  document.getElementById('saveEditBtn').addEventListener('click',saveEdit);
  document.getElementById('delCustBtn').addEventListener('click',delCust);
  document.getElementById('editCancelBtn').addEventListener('click',function(){closeMo('editMo');});

  // Paid modal
  document.getElementById('markPaidBtn').addEventListener('click',function(){markPaid(true);});
  document.getElementById('markUnpaidBtn').addEventListener('click',function(){markPaid(false);});
  document.getElementById('paidCancelBtn').addEventListener('click',function(){closeMo('paidMo');});

  // Call manager
  document.getElementById('callMgrBtn').addEventListener('click',function(){callNo('owner');});
  document.getElementById('custCallBtn').addEventListener('click',function(){callNo('owner');});

  // Customer qty change
  const cqb=document.getElementById('custChangeQtyBtn');if(cqb)cqb.addEventListener('click',doCustChangeQty);
  const ccb=document.getElementById('custCancelQtyBtn');if(ccb)ccb.addEventListener('click',function(){
    // v15.1: Reset steppers to defaults/zero, buttons stay visible and grey
    const c=DB.customers.find(x=>x.id===custId);
    if(c)renderCustQtyChange(c);
    setTimeout(showConfirmBtn,200);
  });

  // Customer bill nav
  document.getElementById('custBillPrev').addEventListener('click',function(){cChM(-1);});
  document.getElementById('custBillNext').addEventListener('click',function(){cChM(1);});

  // Reset PIN - opens OTP verification (Security fix)
  const prb=document.getElementById('pinResetBtn');
  if(prb)prb.addEventListener('click',function(){openOTPModal();closeMo('pinMo');});
  
  // OTP modal buttons
  const osb=document.getElementById('otpSendBtn');if(osb)osb.addEventListener('click',sendOTP);
  const ovb=document.getElementById('otpVerifyBtn');if(ovb)ovb.addEventListener('click',verifyOTP);
  const ocb=document.getElementById('otpCancelBtn');if(ocb)ocb.addEventListener('click',function(){closeMo('otpMo');showPinLogin('admin');});

  // Restore session - skip login screen, go directly to correct screen (Fix 5)
  if(restoreSess()){
    const s=DB.settings;
    if(role==='customer'){
      const c0=DB.customers.find(x=>x.id===custId);
      if(c0){applyCustVis();renderCustScr();}else{applyCustVis();}
      showScr('sc');window.scrollTo(0,0);
      setTimeout(()=>{
        syncAuthData().then(()=>{
          const c=DB.customers.find(x=>x.id===custId);
          if(c){renderCustScr();applyCustVis();}
        });
      },500);
      return;
    }
    if(role==='admin'){document.getElementById('mBadge').textContent='👤 '+(localStorage.getItem('cmo_adminName')||'Admin');}
    else if(role==='agent'){
      const ag=getAgentById(agentId);
      document.getElementById('mBadge').textContent='🚴 '+(ag?ag.agentName||ag.name:s.boyName||'Delivery Agent');
    }
    viewDate=dKey();buildTabs();showScr('sm');
    showPg(role==='admin'?'today':'route');
    // Sync data in background
    setTimeout(syncAuthData, 500);
  }

  // Load Firebase after page ready
  setTimeout(function(){
    const s1=document.createElement('script');
    s1.src='https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js';
    s1.onload=function(){
      const s2=document.createElement('script');
      s2.src='https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js';
      s2.onload=function(){
        const s3=document.createElement('script');
        s3.src='https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js';
        s3.onload=function(){initFB();};
        s3.onerror=function(){initFB();};
        document.head.appendChild(s3);
      };
      document.head.appendChild(s2);
    };
    document.head.appendChild(s1);
  },200);
});
</script>
<!-- v13.13: Scroll to top button -->
<button id="topBtn" onclick="window.scrollTo({top:0,behavior:'smooth'})" style="display:none;position:fixed;bottom:20px;right:16px;z-index:9999;width:44px;height:44px;border-radius:50%;border:none;background:#1A5FA0;color:white;font-size:20px;box-shadow:0 3px 10px rgba(0,0,0,0.3);cursor:pointer;">⬆️</button>
<script>
window.addEventListener('scroll',function(){
  const b=document.getElementById('topBtn');
  if(b)b.style.display=window.scrollY>300?'block':'none';
});
</script>
</body>
</html>