<!--
=============================================================================
ANDEAN VALLEY B2B CRM & ERP (v2.62)
=============================================================================
Core Features & Enhancements:
0. v2.62 - AUTO-FILL DATE GENERATION ROLLUP: Rollup alignment bump with Code_v139.129.gs.txt backend which auto-populates missing creation dates when generating IDs.
0. v2.61 - DYNAMIC CONTACT REQUIREMENT BY LEAD STATUS: Modified the client drawer and create client modal so that the Contact Name field is no longer strictly required when the lead status is set to "New lead". This allows reps to save company profiles for cold prospects without having a contact name.
0. v2.59 - OUTREACH EMAIL TEMPLATE WORDING UPDATE: Replaced the first, second, and fifth feature bullets to improve clarity on value propositions. Updated the wholesale standards block to say "payment confirmation" instead of "payment verification".
0. v2.58 - BULK OUTREACH UX UPGRADES: Upgraded the Bulk Outreach Email modal to include a template dropdown selector (Standard vs Miami Promos) and a full rich-text WYSIWYG editor. Updated button colors to a high-visibility Indigo.
0. v2.57 - BULK OUTREACH CAMPAIGNS & DATABASE EXPANSION: Added Contact 2, Email 2, Phone 2, AP Contact, and AP Email fields to the Client Profile drawer. Built a new Bulk Outreach Email UI accessible from the Clients List header, allowing sales reps to select multiple prospects simultaneously and blast personalized cold emails using [Company Name] and [Contact Name] tags. Included a quick-action "Auto-Generate Missing IDs" button for fast spreadsheet importing.
0. v2.56 - UI CURRENCY FORMATTING STANDARDIZATION: Implemented a global formatCurrency helper and replaced all raw .toFixed(2) invocations across the Quote Builder, Order Modals, and Dashboard KPIs to render thousands separators (e.g. $1,200.00) for premium B2B UI display.
0. v2.55 - DELIVERY DATE INFINITE LOOP HOTFIX: Fixed an infinite loop and crash triggered whenever the delivery date was changed in the Draft Quote modal. Root cause: openOrderDetails was called after a successful date update, which re-set the date picker .value while a stale onchange handler from the previous render was still attached, firing handleDeliveryDateChange recursively. Fix: explicitly null the onchange handler before setting .value, then rebind it afterward.
0. v2.54 - COSTING & SURCHARGE FRONTEND INTEGRATION: Injected collapsible Staff-Only Costing Breakdown accordion and details view. Dynamic rendering maps base farm costs and detailed pass-through/margined surcharges directly from resolved backend pricing payloads.
0. v2.53 - VERSION ROLLUP: Upgraded CRM version to rollup with backend Code_v139.121.gs.txt which adds PO request email summary totals and proportional columns.
0. v2.52 - OUTREACH GREETING VALUE PROP UPGRADE: Refactored cold outreach email templates to highlight "Future dates inventory availability of partner farms" as a key value proposition bullet point, replacing the generic farm check verbiage.
0. v2.51 - ACCOUNTING PAYMENTS LEDGER VIEW EXPANSION: Overhauled the standalone Payments Ledger view to display full 12-column audit trails: Gross Confirmed ($), Net Verified ($), Processing Fees ($), Confirmed By, Verified By, and Internal Memos. Highlights net cash in green and processing fees in crimson for instant treasury reconciliation.
0. v2.50 - PROCESSING FEES & MEMO NOTES INTEGRATION: Integrated Processing Fees ($) and Internal Notes columns (14 & 15) into the payment logging, verification, and rendering systems. The Verify Funds modal now allows logging processing fees and internal notes, reconciling Net Settled + Fees against gross balance. The visually rendered Payments Ledger card now lists processing fee deductions and custom accounting memos.
0. v2.49 - OUTREACH CONTACT FALLBACK & REVENUE WRITE-OFF FILTER: Excluded "Write-Off (Tolerance)" payments from the Verified Sales KPI card to prevent artificial revenue inflation. Implemented a professional B2B greeting fallback ("Dear [Company Name] team") for prospects lacking contact names in the outreach email builder.
0. v2.48 - DASHBOARD VERIFIED REVENUE KPI FIX: Fixed the Verified Sales KPI card displaying $0.00 on the dashboard due to reading the old `Amount ($)` property key. It now correctly reads the renamed `Amount Verified ($)` key with full backward-compatible fallback support.
0. v2.47 - CONFIRMATION WARNING GATE & AUTO WRITE-OFF: Added a browser confirmation pop-up window warning the user of final invoice dispatches before submitting payment verifications. Integrated dynamic Write-Off (Tolerance) audit creation into the local simulation flow to balance the ledger down to exactly $0.00.
0. v2.46 - VERIFICATION TOLERANCE GRADUATION: Aligned the frontend local simulation (demo mode) to include the payment tolerance formula during verification events, allowing partial payments within threshold to graduate orders to Firm Order stage.
0. v2.45 - GLOBAL SCREEN-BLOCKING OVERLAY FAILSAFE: Overhauled `showGlobalLoading` to generate a dynamic full-screen overlay backdrop with a custom task message, blur filter, and disabled pointer events. This blocks all user actions (double-clicking buttons, premature navigation, duplicate web submissions) during database mutations and sync cycles.
0. v2.44 - PIPELINE OPEN ORDER CRASH HOTFIX: Fixed a ReferenceError inside `openOrderDetails` where `totalConfirmed` was not extracted from `getOrderPaymentSummary`. This reference bug crashed the order details rendering flow, preventing Proforma Sent cards from opening.
0. v2.43 - CONFIRMED BY AUDIT TRAIL DISPLAY: Integrated Confirmed By and Verified By markers into the visual Payments Ledger Detail card inside the CRM Details panel. Displays WHO manually registered or webhook-logged each payment note alongside verification auditors.
0. v2.42 - PAYMENT TOLERANCE CHECK UI GATE: Upgraded the Verify Funds button gating on both Kanban cards and Details modal footers to dynamically compute payment tolerance (0.1% of grand total, cap $20, floor $0.50). Confirmed payments within this tolerance are now recognized as fully confirmed, unlocking the Verify Funds action.
0. v2.41 - CPA-GRADE IMMUTABLE LEDGER RECONCILIATION UI: Redesigned the Verify Funds modal to render a dynamic checklist of unverified confirmed payments for the order, forcing the salesperson to clear specific confirmations and log bank settlement transaction references. Added a visual Payments Ledger Detail card inside the Order Details modal for instant audit review. Restricted the Verify Funds button to activate ONLY when client confirmations match the total order balance.
0. v2.40 - QUOTE TEMPLATE PROCEED TEXT TYPO FIX: Corrected quote template instruction wording to ask clients to reply with confirmation to proceed.
0. v2.39 - QUOTE TEMPLATE PROCEED TEXT UPDATE & UNIVERSAL ORDER ID DISPLAY: Updated quote template instructions asking clients to reply with agreement to proceed. Added universal Order ID quick copy-to-clipboard functionality to the Draft Quote details and Proforma modals.
0. v2.38 - MERCURY VIRTUAL ACCOUNT INTEGRATION: Removed raw master corporate bank details from Quote email previews. Replaced Quote-stage payment instructions with a placeholder directing the client to the upcoming Proforma Payment Link to obtain their unique virtual bank coordinates.
0. v2.37 - PROFORMA SENT STAGE RENAME: Visually renamed the pipeline stage "Invoice Sent" to "Proforma Sent" in the B2B Sales Pipeline Kanban board, orders list view table, details modal header, and status badges. Added `getStatusDisplayName` helper to map the stage string for UI rendering while preserving database hooks.
0. v2.36 - DASHBOARD MOJIBAKE FIX & INCOTERM DROPDOWN: Fixed corrupted Unicode character representations in the Dashboard Summary KPI cards (restored star and bullet point using HTML entities to prevent encoding errors). Mapped the first "FOB" select option in the B2B Sales Pipeline Kanban filter to display as "FOB Quito" for clearer incoterm classification.
0. v2.35 - ONE-LINK PAYMENT AUTOMATION: Added input field in the Proforma Invoice generation modal (`confirmInvoice`) allowing sales reps to paste a single Mercury payment link. This link is transmitted to the backend where it handles both ACH and Credit Card payments via Mercury/Stripe.
0. v2.34 - DRAFT QUOTE DATE PICKER & TYPE RESOLUTION: Replaced static Delivery Date text in the Draft Quote modal with an interactive HTML5 date picker for Draft Quotes. Triggers a full backend inventory lookup and price recalculation. Added variety type lookup mapping in the backend script to resolve variety types, defaulting to rendering nothing if unresolved. Integrated a blur loading overlay that fully disables and blocks interaction with the date picker during calculations to prevent detachment bugs.
0. v2.33 - QUOTE GENERATION PRICE LOCK FIX: Fixed a critical bug where `openOrderDetails` discarded `isPriceLocked`, `checked`, and `stock` flags when reconstructing `state.currentOrderItems` from the stored raw payload. This caused `triggerQuoteApproval` → `getQuotePreview` → `calculateClientPricing` to treat manually-priced items as standard inventory, reverting edited prices to live inventory prices in the rendered email quote. The `parsedItems.push` block now preserves all pricing control flags from `matchedRaw`, and `calculateEstimatedPricing` now includes `isPriceLocked` in its `isManual` check for consistent frontend pricing display.
0. v2.32 - DRAFT QUOTE STATE SYNC: Fixed a critical state-loss bug where manually locking line item prices in the Draft Quote Editor destroyed underlying item metadata (`stock`, `isTbc`, `checked`). `openLineItemEditor` now embeds a JSON string of the original item, and `submitLineItemEdits` merges edits on top of it, guaranteeing that custom pricing overrides do not inadvertently force items into "Pending Availability" or deselect them during Proforma Quote generation.
0. v2.31 - MANUAL PRICING LOCK: Injected `isPriceLocked` flag logic into the Draft Quote Editor and Sourcing Spec Editor. Manual overrides to pricing and suppliers are now perfectly secured against automatic live inventory recalibration when generating Proforma Quotes.
0. v2.31 - DATE STANDARDIZER: Implemented a global ISO format parser (`formatToIsoDate`) to sanitize and strictly force the `yyyy-mm-dd` structure on all dates fetched from Google Sheets payloads. This permanently prevents UI and lookup errors caused by Sheets quietly switching date strings into localized US standard strings (e.g., `7/12/2026`).
0. v2.30 - SLA DYNAMIC COLORING: Implemented dynamic color-coding logic to the SLA Tracking Timeline. Circles now transition from Green (On Time) to Yellow (Warning) to Red (Delayed/Breached) based on hardcoded operational turnaround limits for each step.
0. v2.29 - CRITICAL HOTFIXES: Restored corrupted Unicode characters (mojibake) across Kanban boards, keypads, and SLA timeline elements. Fixed an unclosed form tag that was triggering false validation errors when clicking buttons inside the Kanban view.
0. v2.28 - PAYMENT DISCOUNT UPDATE: Updated payment instructions on Proforma and Final Invoices to reflect a 2% discount for Wire Transfer/ACH payments instead of 3%.
0. v2.27 - STRICT VOLUME PRICING: Refactored `calculateEstimatedPricing` to explicitly exclude `isTbc` and `isManual` items from the total box sum used to calculate volume tier margins. This guarantees that unconfirmed inventory does not artificially trigger volume discounts, accurately presenting smaller-tier margins when quoting partial-stock availability.
0. v2.26 - SLA & QC PIPELINE OVERHAUL: Refactored the Order Details Modal to feature a dual-tab architecture dividing exact item breakdowns from the new "SLA Timeline & Quality Control" UI. The SLA Timeline securely reads the 6 backend API timestamps to visually render an end-to-end lifecycle map with explicit turnaround time measurements natively computed. Built an integrated QC form allowing operations to log arrival condition parameters and instantly generate pre-filled discrepancy/claim emails directly to suppliers. Upgraded the Sales Performance dashboard with two new SLA metrics (Average Quote Turnaround Time & Average Payment Verification Time) to permanently lock in and audit response standards.
0. v2.25 - PROFIT FLOOR IMPLEMENTATION: Synchronized with backend v120 to enforce minimum profit per stem depending on tier (Tier 1: $0.05, Tier 2: $0.04, Tier 3: $0.03).
0. v2.24 - DYNAMIC MARGIN & PRICING UPDATE: Synchronized with backend v119 to adjust Volume-Tiered Margins (Tier 1: 0.72, Tier 2: 0.82, Tier 3: 0.89) and updated dynamic Freight Proxies by stem length (40cm: $0.17, 50cm: $0.20, 60cm: $0.23, 70cm: $0.28, 80cm: $0.30, 90cm+: $0.33).
0. v2.23 - OUTREACH TEMPLATES: Added a template selector to the Outreach Email modal, allowing sales reps to toggle between the Standard Farm Availability template and the new Miami Promos template. The Miami Promos template emphasizes local stock with dynamic CTA instructions to search the catalog for "Promo".
0. Proforma & Final PDF Integration (v2.22)
   - Renamed "Send Invoice" UI labels and buttons to "Send Proforma (Request Payment)" to match new B2B workflows.
0. Invoice Preview Modal Fix (v2.21)
   - Fixed an issue where the Invoice Preview Modal rendered extremely narrowly by replacing the invalid `modal-content` class with the properly styled `modal-container` class and overriding its width to 1000px for a more expansive preview workspace.
0. Quote UI Revert (v2.20)
   - Reverted the order details modal to its original exact HTML structure for the Standard Margin Base and Manual Discount rows, removing the recently injected in-table formatting that was causing visual duplication.
0. Dynamic Volume-Tiered Pricing Implementation (v2.19)
   - Synchronized with backend v108 to implement dynamic volume-tiered margins (Tier 1: 0.75, Tier 2: 0.85, Tier 3: 0.92) based on total stems.
   - Refactored `calculateEstimatedPricing` logic to enforce explicit Incoterm (FOB vs CIF MIA) matching, removing all cross-matching logic. Fallbacks for partial/missing stock inherit exact pricing algorithms safely or default to manual quoting.
   - Restored the "Manual Discount" visual row in the Order Details modal.
   - Fixed `grandTotalToDisplay` ReferenceError causing silent rendering failures when opening Order details.
0. Draft Quote Editor Unit Price Fix (v2.18)
   - Fixed an issue in the `openLineItemEditor` where TBC (To Be Confirmed) draft rows were incorrectly pulling the row's total subtotal as the price/stem input value, resulting in astronomically high pricing. It now correctly maps to the draft engine's `item.suggestedPrice`.
0. Final Draft Invoice Preview (v2.17)
   - Updated the Kanban "Send Invoice" workflow to natively intercept the action and fetch a draft preview of the invoice HTML using the new `previewInvoice` backend API. The preview displays in a modal where the user can verify all metrics. If an error is spotted (e.g. incorrect manual pricing), the user can click "Edit Line Items" to instantly jump back to the Quote Editor.
0. Payment Confirmation vs Verification UI (v2.16)
   - Updated `getOrderPaymentSummary` and the Order Details modal to strictly split and separately display "Total Payments Confirmed (client)" vs "Total Payments Verified (bank)". Outstanding balance and "Firm Order" promotion logic now strictly anchor to bank-verified funds to prevent false-positive overpayments.
0. Quote/Invoice Aesthetic Polish (v2.15)
   - Synchronized with backend v81 to polish generated Invoice HTML aesthetics (Forest green branding, clean footer layouts, corrected header contact information).
0. Manual Discount UI Priority Fix (v2.14)
   - Updated `openOrderDetails` Draft Quote UI to strictly cross-reference and natively render explicit `Discount Amount ($)` manual overrides from the database, preventing the algorithmic calculation from visually hiding saved UI overrides.
0. Dynamic Live Inventory Resolution (v2.13)
   - Updated `openQuoteBuilder` to dynamically intercept Draft Quotes and cross-reference the live CRM `state.inventory` payload. It now seamlessly forces real-time updates for supplier stock availability and supplier base prices (converting them using a `/0.67` margin) before rendering the Quote Editor, guaranteeing salespeople never quote obsolete metrics.
0. Quote Editor Bug Fixes (v2.12)
   - Added a dedicated `Stem (cm)` column to the Draft Quote Line Item Editor and removed the aggressive regex string-parser to permanently prevent stem duplication errors.
   - Updated `getOrderDisplayId` and the Draft Quote Order Details modal to strictly prioritize displaying human-facing Sequential Quote IDs (`AV-Q-`) over random internal hashes.
1. Brand & Rendering Alignment (v2.11)
   - Expanded the "Approve & Edit Email Quote" UI modal to 130% width (`910px`) for better visual editing.
   - Global find-and-replace to enforce "Andean Valley LLC" branding across all UI strings, signatures, and CRM interfaces.
1. Order Cancellation Engine (v2.10)
   - Built a secure double-confirmation UI into the Order Details modal for cancelling test data.
   - Updated `renderOrdersView` to dynamically filter out any orders marked as 'Cancelled' to clean up pipeline clutter.
1. Partial Payment Registration & Decimal Parsing Fix (v2.9)
   - Restored the "Confirm Pay" modal for Sales Reps to accurately log partial payments.
   - Updated Kanban pipeline logic to strictly retain partially funded cards in the "Invoice Sent" stage with "Partially Paid" status, preventing premature graduation to "Firm Order".
   - Fixed a Javascript parseFloat bug where comma-decimals (e.g. 0,9) defaulted to 0, ensuring custom prices and manual supplier selections are safely preserved for Supplier PO emails.
1. Line Item Editor (v2.8)
   - Decoupled the Automated Quote Builder from order editing.
   - Built a dedicated Line Item Editor for Draft/Sent quotes to directly modify Variety, Supplier, Stems, Boxes, and Price without touching live inventory.
1. Document Control & Editing (v2.7)
   - Dynamic display of human-facing Quote (AV-Q) and Invoice (AV-INV) sequence IDs instead of internal UUIDs.
2. Client Directory & Segmentation (Pillar 1)
   - Integrated "Buyer Type" and "Lead Status" selectors for dynamic filtering.
3. Actionable Call Outcomes & Interaction Logger (Pillar 2)
   - Conditional outcome menu for Phone Calls, with automated Lead Status
     transitions and scheduling of Next Follow-up Dates.
3. Action Center Dashboard (Pillar 3)
   - Automated warnings for overdue client follow-ups, unassigned leads, and stale quotes.
4. Sales Activity Reporting (Pillar 4)
   - Won Revenue, Active Pipeline Value, Conversion Rates, and agent performance table.
5. Option B Visibility & Security Controls
   - Email masking, locked cards/fields, and settings lock based on User Role.
6. Sourcing Pre-population & Cross-Incoterm Lookup
   - Pre-populates Supplier and Price suggestion in the sourcing popup.
   - Dynamic Cross-Incoterm Lookup fallback: If a direct matches are missing,
     it finds the opposite incoterm (FOB <-> CIF MIA) and adjusts the suggested
     price using stem-length markups (40cm/$0.17, 50cm/$0.20, 60cm/$0.22, 70cm/$0.28, 80cm/$0.32).
7. Signature Updates (v2.1)
   - Added sender's email below "Direct Contact:" and "+" prefix to WhatsApp number in Outreach Signature.
8. Quote Builder & UI Upgrades (v2.2)
   - Pricing logic synchronized to new 0.67 markup formula.
   - 'Supplier' column introduced into Automated Quote Builder inventory.
   - High-contrast, solid styling applied to Automated Quote buttons and table headers.
9. Multi-Supplier & User Signature Integrity (v2.3)
   - Fixed Quote Builder bug where items with identical varieties/stems from different suppliers overwrote each other.
   - Generate Quote button color fixed to high-contrast emerald.
10. Unified CRM Workflow & Formatting (v2.4)
    - Updated Kanban cards to display actual Last Updated date instead of theoretical Delivery Date.
    - Refined Quote builder subtotal calculations directly into payload construction.
    - Added defensive variety checks to prevent crashes when opening externally generated Draft Quotes.
11. Explicit Signature Mapping (v2.4)
   - Quote Builder now explicitly forces the logged-in user object into the payload to guarantee 100% signature accuracy without relying on backend client-email matching.
12. Explicit Farm Mapping & UI Scaling (v2.5)
   - Quote Builder payload updated to explicitly transmit 'supplier' and 'price' selections to prevent the backend algorithmic guessing from creating duplicated quantities.
   - Kanban Draft Quote / Order modal expanded by 50% with improved header layout and dynamically adjusted Titles.
   - Added Text Color and Font Size controls to the WYSIWYG email editor.
13. Payload Optimization & Pipeline Timestamps (v2.6)
   - Added strict base64 stripping to quote JSON payloads to prevent crashing the 50,000 character Google Sheet cell limit when sending test quotes with multiple varieties.
   - Kanban cards and popups updated to strictly display "Req:" timestamp based on original quote creation, and "Sent:" timestamp for finalized pipelines.
==========================================================================================================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Andean Valley B2B CRM & ERP</title>
  <!-- Google Fonts -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
  </style>
  <style>
    /* --------------------------------------------------
       1. BRAND AESTHETICS & DESIGN SYSTEM
       -------------------------------------------------- */
    :root {
      --bg-main: #090d16;
      --bg-card: rgba(30, 41, 59, 0.45);
      --bg-card-hover: rgba(30, 41, 59, 0.65);
      --border-card: rgba(255, 255, 255, 0.06);
      --border-card-active: rgba(255, 255, 255, 0.15);
      --text-primary: #f1f5f9;
      --text-secondary: #94a3b8;
      --text-muted: #64748b;
      
      /* Color Accents */
      --primary: #10b981;
      --primary-hover: #34d399;
      --primary-dark: #059669;
      --primary-glow: rgba(16, 185, 129, 0.15);
      
      --accent-indigo: #6366f1;
      --accent-indigo-hover: #818cf8;
      --accent-indigo-glow: rgba(99, 102, 241, 0.15);
      
      --accent-amber: #f59e0b;
      --accent-amber-hover: #fbbf24;
      --accent-amber-glow: rgba(245, 158, 11, 0.15);
      
      --accent-crimson: #ef4444;
      --accent-crimson-hover: #fca5a5;
      
      --sidebar-width: 260px;
      --sidebar-collapsed-width: 80px;
      --header-height: 70px;
      
      --font-display: 'Plus Jakarta Sans', sans-serif;
      --font-body: 'Inter', sans-serif;
    }

    /* Scrollbars */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-body);
      background-color: var(--bg-main);
      color: var(--text-primary);
      overflow: hidden;
      min-height: 100vh;
    }

    h1, h2, h3, h4, .brand-title {
      font-family: var(--font-display);
      font-weight: 700;
    }

    /* Common Button & Form Styles */
    button {
      font-family: var(--font-body);
      cursor: pointer;
      border: none;
      outline: none;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    button:hover {
      transform: translateY(-1px);
    }

    button:active {
      transform: translateY(0);
    }

    input, select, textarea {
      font-family: var(--font-body);
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid var(--border-card);
      color: var(--text-primary);
      border-radius: 8px;
      padding: 10px 14px;
      outline: none;
      transition: all 0.2s ease;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-glow);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .badge-primary {
      background: var(--primary-glow);
      color: var(--primary);
      border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .badge-indigo {
      background: var(--accent-indigo-glow);
      color: var(--accent-indigo);
      border: 1px solid rgba(99, 102, 241, 0.3);
    }

    .badge-amber {
      background: var(--accent-amber-glow);
      color: var(--accent-amber);
      border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .badge-crimson {
      background: rgba(239, 68, 68, 0.1);
      color: var(--accent-crimson);
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .badge-secondary {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-secondary);
      border: 1px solid var(--border-card);
    }

    /* --------------------------------------------------
       2. AUTHENTICATION MODULE (LOGIN)
       -------------------------------------------------- */
    #auth-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent),
                  radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.1), transparent),
                  #070a12;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .login-card {
      width: 420px;
      padding: 40px;
      background: var(--bg-card);
      backdrop-filter: blur(20px);
      border: 1px solid var(--border-card);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      border-radius: 20px;
      text-align: center;
      animation: cardFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #login-username {
      width: 100%;
      padding: 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border-card);
      color: #fff;
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    #login-username:focus {
      border-color: var(--accent-indigo);
      box-shadow: 0 0 8px var(--accent-indigo-glow);
    }

    @keyframes cardFadeIn {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    .brand-logo-container {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: var(--primary-glow);
      border: 1px solid rgba(16, 185, 129, 0.25);
      margin-bottom: 24px;
    }

    .brand-logo-container svg {
      width: 32px;
      height: 32px;
      fill: var(--primary);
    }

    .login-title {
      font-size: 24px;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .login-subtitle {
      color: var(--text-secondary);
      font-size: 14px;
      margin-bottom: 32px;
    }

    .passcode-group {
      margin-bottom: 24px;
    }

    .passcode-input-container {
      position: relative;
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .passcode-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid var(--text-muted);
      transition: all 0.15s ease;
    }

    .passcode-dot.filled {
      background-color: var(--primary);
      border-color: var(--primary);
      box-shadow: 0 0 10px var(--primary);
    }

    .numpad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      max-width: 280px;
      margin: 0 auto 24px;
    }

    .num-btn {
      height: 60px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border-card);
      color: var(--text-primary);
      font-size: 20px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .num-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--border-card-active);
    }

    .num-btn:active {
      background: var(--primary-glow);
      border-color: var(--primary);
    }

    .login-error {
      color: var(--accent-crimson);
      font-size: 13px;
      min-height: 20px;
      margin-bottom: 16px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .login-error.visible {
      opacity: 1;
    }

    .demo-toggle {
      color: var(--accent-indigo);
      font-size: 13px;
      text-decoration: underline;
      cursor: pointer;
      display: inline-block;
      margin-top: 10px;
    }

    /* --------------------------------------------------
       3. MAIN LAYOUT SHELL (SIDEBAR & HEADER)
       -------------------------------------------------- */
    #app-container {
      display: flex;
      width: 100vw;
      height: 100vh;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    #app-container.ready {
      opacity: 1;
    }

    #sidebar {
      width: var(--sidebar-width);
      height: 100%;
      background: #0b111e;
      border-right: 1px solid var(--border-card);
      display: flex;
      flex-direction: column;
      z-index: 100;
      position: relative;
    }

    #sidebar.collapsed {
      width: var(--sidebar-collapsed-width);
    }

    .sidebar-header {
      height: var(--header-height);
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-card);
    }

    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      overflow: hidden;
    }

    .sidebar-brand svg {
      width: 28px;
      height: 28px;
      fill: var(--primary);
      flex-shrink: 0;
    }

    .sidebar-brand span {
      font-size: 16px;
      letter-spacing: -0.02em;
      white-space: nowrap;
      transition: opacity 0.3s ease;
    }

    #sidebar.collapsed .sidebar-brand span {
      opacity: 0;
      width: 0;
      pointer-events: none;
    }

    .sidebar-menu {
      padding: 24px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    .menu-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 12px 16px;
      border-radius: 10px;
      color: var(--text-secondary);
      text-decoration: none;
      font-weight: 500;
      font-size: 14px;
      background: transparent;
      text-align: left;
      width: 100%;
    }

    .menu-item svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .menu-item span {
      white-space: nowrap;
      transition: opacity 0.3s ease;
    }

    #sidebar.collapsed .menu-item span {
      opacity: 0;
      width: 0;
      pointer-events: none;
    }

    .menu-item:hover, .menu-item.active {
      color: var(--text-primary);
      background: rgba(255, 255, 255, 0.04);
    }

    .menu-item.active {
      color: var(--primary);
      background: var(--primary-glow);
      border-left: 3px solid var(--primary);
      border-radius: 0 10px 10px 0;
      padding-left: 13px; /* account for border width */
    }

    .menu-item:hover svg {
      transform: scale(1.05);
    }

    .sidebar-footer {
      padding: 16px;
      border-top: 1px solid var(--border-card);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .user-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--accent-indigo-glow);
      border: 1px solid rgba(99, 102, 241, 0.3);
      color: var(--accent-indigo);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 14px;
      flex-shrink: 0;
    }

    .user-info {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: opacity 0.3s ease;
    }

    #sidebar.collapsed .user-info {
      opacity: 0;
      width: 0;
      pointer-events: none;
    }

    .user-name {
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .user-role {
      font-size: 11px;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .logout-btn {
      background: transparent;
      padding: 6px;
      border-radius: 8px;
      color: var(--text-muted);
      margin-left: auto;
    }

    .logout-btn:hover {
      color: var(--accent-crimson);
      background: rgba(239, 68, 68, 0.05);
    }

    #sidebar.collapsed .logout-btn {
      display: none;
    }

    /* Main Area Container */
    #main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
    }

    /* Header Bar */
    header {
      height: var(--header-height);
      padding: 0 32px;
      border-bottom: 1px solid var(--border-card);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(9, 13, 22, 0.5);
      backdrop-filter: blur(10px);
      z-index: 10;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .toggle-sidebar-btn {
      background: transparent;
      color: var(--text-secondary);
      padding: 8px;
      border-radius: 8px;
    }

    .toggle-sidebar-btn:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-primary);
    }

    .page-title {
      font-size: 20px;
      letter-spacing: -0.01em;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .sync-status-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(16, 185, 129, 0.06);
      border: 1px solid rgba(16, 185, 129, 0.2);
      color: var(--primary);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
    }

    .sync-status-badge.syncing {
      color: var(--accent-indigo);
      background: rgba(99, 102, 241, 0.06);
      border-color: rgba(99, 102, 241, 0.2);
    }

    .sync-status-badge.offline-demo {
      color: var(--accent-amber);
      background: rgba(245, 158, 11, 0.06);
      border-color: rgba(245, 158, 11, 0.2);
    }

    .sync-pulse {
      width: 8px;
      height: 8px;
      background: currentColor;
      border-radius: 50%;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0% { transform: scale(0.8); opacity: 0.5; }
      50% { transform: scale(1.2); opacity: 1; }
      100% { transform: scale(0.8); opacity: 0.5; }
    }

    .sync-btn {
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      color: var(--text-primary);
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .sync-btn:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-card-active);
    }

    .sync-btn.spin svg {
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Content Views */
    .view-panel {
      flex: 1;
      padding: 12px 32px 32px 32px;
      overflow-y: auto;
      display: none;
      animation: fadeIn 0.3s ease;
    }

    .view-panel.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* --------------------------------------------------
       4. DASHBOARD VIEW COMPONENTS
       -------------------------------------------------- */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      margin-bottom: 32px;
    }

    .kpi-card {
      background: var(--bg-card);
      backdrop-filter: blur(16px);
      border: 1px solid var(--border-card);
      border-radius: 16px;
      padding: 24px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
    }

    .kpi-card:hover {
      transform: translateY(-4px);
      border-color: var(--border-card-active);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .kpi-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .kpi-title {
      font-size: 13px;
      color: var(--text-secondary);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .kpi-icon-container {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .kpi-val {
      font-size: 32px;
      font-family: var(--font-display);
      font-weight: 700;
      margin-bottom: 8px;
    }

    .kpi-footer {
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .kpi-trend-up {
      color: var(--primary);
    }

    .kpi-trend-down {
      color: var(--accent-crimson);
    }

    /* Dashboard Layout Grid */
    .dashboard-layout {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 24px;
    }

    @media (max-width: 1024px) {
      .dashboard-layout {
        grid-template-columns: 1fr;
      }
    }

    .dashboard-panel-card {
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      border-radius: 16px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .panel-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .panel-card-title {
      font-size: 16px;
      font-weight: 600;
    }

    .attention-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .attention-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border-card);
      border-radius: 12px;
      transition: all 0.2s ease;
    }

    .attention-item:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: var(--border-card-active);
    }

    .attention-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .attention-info {
      flex: 1;
    }

    .attention-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .attention-desc {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .attention-action-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-card);
      color: var(--text-primary);
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
    }

    .attention-action-btn:hover {
      background: var(--primary-glow);
      border-color: var(--primary);
      color: var(--primary);
    }

    /* Chart / Pipeline overview details */
    .pipeline-summary {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pipeline-bar-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .pipeline-bar-label {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }

    .pipeline-bar-bg {
      height: 8px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      overflow: hidden;
    }

    .pipeline-bar-fill {
      height: 100%;
      background: var(--accent-indigo);
      border-radius: 4px;
      transition: width 0.6s ease-out;
    }

    /* --------------------------------------------------
       5. CLIENTS VIEW & RIGHT SLIDE-OVER MODAL
       -------------------------------------------------- */
    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      gap: 16px;
      flex-wrap: wrap;
    }

    .search-filter-group {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      flex: 1;
      max-width: 100%;
    }
    
    .search-filter-group select {
      flex: 1 1 auto;
      min-width: 140px;
    }

    .search-input-wrapper {
      position: relative;
      flex: 1 1 100%;
      min-width: 250px;
    }

    .search-input-wrapper svg {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      fill: var(--text-muted);
    }

    .search-input-wrapper input {
      width: 100%;
      padding-left: 42px;
    }

    .toolbar-actions {
      display: flex;
      gap: 12px;
    }

    .btn-primary {
      background: var(--primary);
      color: #052e16;
      font-weight: 600;
      padding: 10px 18px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-primary:hover {
      background: var(--primary-hover);
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
    }

    .btn-secondary {
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      color: var(--text-primary);
      font-weight: 500;
      padding: 10px 16px;
      border-radius: 8px;
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--border-card-active);
    }

    /* Table Component */
    .table-container {
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      border-radius: 16px;
      overflow-x: auto;
      margin-bottom: 24px;
    }
    
    /* Clients 360 Specific Table Ergonomics Override */
    #clients-360-table th, #clients-360-table td {
      font-size: 11.5px !important;
      font-weight: 400 !important;
      padding: 6px 10px !important;
      white-space: nowrap;
    }
    #clients-360-table td {
      max-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #clients-360-table td:last-child {
      max-width: none;
      overflow: visible;
    }
    .resize-handle.sortable {
      cursor: pointer;
      user-select: none;
    }
    .resize-handle.sortable:hover {
      background: rgba(255, 255, 255, 0.05);
    }
    #clients-table-wrapper {
      max-height: calc(100vh - 250px);
      overflow-y: auto;
    }
    #clients-360-table th {
      font-weight: 600 !important;
      padding: 0 !important;
      position: sticky;
      top: 0;
      z-index: 10;
      background-color: #1e293b;
      box-shadow: 0 1px 0 var(--border-card-active);
    }
    
    .resize-handle {
      resize: horizontal;
      overflow: hidden;
      padding: 12px 10px;
      min-width: 30px;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
      box-sizing: border-box;
    }
    #clients-360-table td strong {
      font-weight: 500 !important;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

    th {
      background: rgba(15, 23, 42, 0.4);
      padding: 16px 24px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-card);
    }

    td {
      padding: 18px 24px;
      font-size: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      color: var(--text-primary);
      vertical-align: middle;
    }

    tr:last-child td {
      border-bottom: none;
    }

    tr:hover td {
      background: rgba(255, 255, 255, 0.015);
    }

    .clickable-row {
      cursor: pointer;
    }

    .table-actions {
      display: flex;
      gap: 8px;
    }

    /* Slide-Over 360 Client View */
    #client-drawer-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      z-index: 900;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    #client-drawer-backdrop.active {
      opacity: 1;
      pointer-events: auto;
    }

    #client-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: 750px;
      max-width: 100vw;
      height: 100vh;
      background: #0c121e;
      border-left: 1px solid var(--border-card);
      box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6);
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 1000;
      display: flex;
      flex-direction: column;
    }

    #client-drawer.active {
      transform: translateX(0);
    }

    .drawer-header {
      padding: 24px;
      border-bottom: 1px solid var(--border-card);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .drawer-title-area {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .drawer-title {
      font-size: 18px;
      font-weight: 700;
    }

    .drawer-subtitle {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .close-drawer-btn {
      background: transparent;
      color: var(--text-secondary);
      padding: 8px;
      border-radius: 8px;
    }

    .close-drawer-btn:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-primary);
    }

    .drawer-tabs {
      display: flex;
      border-bottom: 1px solid var(--border-card);
      background: rgba(0, 0, 0, 0.1);
      padding: 0 16px;
    }

    .drawer-tab {
      padding: 14px 20px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      background: transparent;
      border-bottom: 2px solid transparent;
    }

    .drawer-tab:hover {
      color: var(--text-primary);
    }

    .drawer-tab.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }

    .drawer-body {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
    }

    .drawer-pane {
      display: none;
    }

    .drawer-pane.active {
      display: block;
    }

    /* Client Profile Form */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 24px;
    }

    .form-group-full {
      grid-column: span 2;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-group label {
      font-size: 12px;
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* Timeline Styling */
    .timeline-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      margin-top: 16px;
    }

    .timeline-container::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 29px;
      width: 2px;
      background: var(--border-card);
    }

    .timeline-node {
      display: flex;
      gap: 16px;
      position: relative;
    }

    .timeline-marker {
      width: 60px;
      height: 48px;
      border-radius: 8px;
      background: #111a2e;
      border: 1px solid var(--border-card);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 2;
      flex-shrink: 0;
      padding: 4px;
    }

    .timeline-marker svg {
      width: 16px;
      height: 16px;
      fill: var(--text-secondary);
    }

    .timeline-node.catalog-quote .timeline-marker {
      border-color: var(--accent-indigo);
      background: var(--accent-indigo-glow);
    }

    .timeline-node.catalog-quote .timeline-marker svg {
      fill: var(--accent-indigo);
    }

    .timeline-node.payment .timeline-marker {
      border-color: var(--primary);
      background: var(--primary-glow);
    }

    .timeline-node.payment .timeline-marker svg {
      fill: var(--primary);
    }

    .timeline-node.delivery .timeline-marker {
      border-color: var(--accent-amber);
      background: var(--accent-amber-glow);
    }

    .timeline-node.delivery .timeline-marker svg {
      fill: var(--accent-amber);
    }

    .timeline-content-card {
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      border-radius: 12px;
      padding: 16px;
      flex: 1;
    }

    .timeline-node:hover .timeline-content-card {
      border-color: var(--border-card-active);
    }

    .timeline-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .timeline-actor {
      font-weight: 600;
      color: var(--text-secondary);
    }

    .timeline-text {
      font-size: 13px;
      line-height: 1.5;
      white-space: pre-wrap;
    }

    .log-interaction-box {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border-card);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
    }

    /* --------------------------------------------------
       6. ORDERS KANBAN & PIPELINE
       -------------------------------------------------- */
    .orders-layout-toggle {
      display: flex;
      background: rgba(255, 255, 255, 0.03);
      padding: 4px;
      border-radius: 8px;
      border: 1px solid var(--border-card);
    }

    .layout-toggle-btn {
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      background: transparent;
    }

    .layout-toggle-btn.active {
      background: var(--primary-glow);
      color: var(--primary);
    }

    .kanban-board-container {
      overflow-x: auto;
      height: calc(100vh - 220px);
      padding-bottom: 16px;
    }

    .kanban-board {
      display: flex;
      gap: 16px;
      min-width: 1200px;
      height: 100%;
    }

    .kanban-column {
      flex: 1;
      background: rgba(15, 23, 42, 0.35);
      border: 1px solid var(--border-card);
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-width: 250px;
    }

    .kanban-column-header {
      padding: 16px;
      border-bottom: 1px solid var(--border-card);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .kanban-column-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .kanban-column-count {
      background: rgba(255, 255, 255, 0.05);
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 600;
    }

    .kanban-cards-container {
      flex: 1;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
    }

    .kanban-card {
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      border-radius: 12px;
      padding: 16px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
    }

    .kanban-card:hover {
      border-color: var(--border-card-active);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    }

    .kanban-card-id {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .kanban-card-company {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .kanban-card-details {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 12px;
    }

    .kanban-card-price {
      font-weight: 700;
      color: var(--text-primary);
      font-family: var(--font-display);
    }

    .kanban-card-actions {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      padding-top: 10px;
    }

    .kanban-action-btn {
      flex: 1;
      padding: 6px 0;
      font-size: 11px;
      font-weight: 600;
      border-radius: 6px;
      text-align: center;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-card);
      color: var(--text-secondary);
    }

    .kanban-action-btn:hover {
      background: var(--primary-glow);
      border-color: var(--primary);
      color: var(--primary);
    }

    /* --------------------------------------------------
       7. LOGISTICS TRANSIT STEPPER
       -------------------------------------------------- */
    .logistics-card {
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 20px;
    }

    .logistics-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      flex-wrap: wrap;
      gap: 12px;
    }

    .logistics-card-title {
      font-size: 15px;
      font-weight: 600;
    }

    /* Logistics Stepper Progress Grid */
    .stepper-container {
      padding: 20px 40px;
      margin-bottom: 20px;
    }

    .logistics-stepper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
    }

    .logistics-stepper::before {
      content: '';
      position: absolute;
      top: 15px;
      left: 0;
      right: 0;
      height: 4px;
      background: rgba(255, 255, 255, 0.06);
      z-index: 1;
    }

    .stepper-progress-bar {
      position: absolute;
      top: 15px;
      left: 0;
      height: 4px;
      background: var(--accent-indigo);
      z-index: 2;
      transition: width 0.4s ease;
    }

    .stepper-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 3;
      width: 120px;
    }

    .stepper-circle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #111827;
      border: 3px solid var(--border-card);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .stepper-circle svg {
      width: 14px;
      height: 14px;
      fill: var(--text-muted);
    }

    .stepper-label {
      margin-top: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* Completed state */
    .stepper-node.completed .stepper-circle {
      background: var(--primary-glow);
      border-color: var(--primary);
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
    }
    .stepper-node.completed .stepper-circle svg {
      fill: var(--primary);
    }
    .stepper-node.completed .stepper-label {
      color: var(--primary);
    }

    /* Active State */
    .stepper-node.active .stepper-circle {
      background: var(--accent-indigo-glow);
      border-color: var(--accent-indigo);
      box-shadow: 0 0 12px var(--accent-indigo);
      animation: stepperNodePulse 2s infinite;
    }
    .stepper-node.active .stepper-circle svg {
      fill: var(--accent-indigo);
    }
    .stepper-node.active .stepper-label {
      color: var(--accent-indigo);
      font-weight: 700;
    }

    @keyframes stepperNodePulse {
      0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); }
      70% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
      100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    }

    .logistics-card-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      background: rgba(255, 255, 255, 0.01);
      border: 1px solid var(--border-card);
      border-radius: 12px;
      padding: 16px;
      font-size: 13px;
    }

    .logistics-detail-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .logistics-detail-item span:first-child {
      color: var(--text-secondary);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .logistics-detail-item span:last-child {
      font-weight: 500;
    }

    /* --------------------------------------------------
       8. MODAL WINDOWS (UNIVERSAL POPUPS)
       -------------------------------------------------- */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(5px);
      z-index: 1050;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-backdrop.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-container {
      width: 500px;
      max-width: 90vw;
      background: #0f172a;
      border: 1px solid var(--border-card-active);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      border-radius: 16px;
      overflow: hidden;
      transform: scale(0.95);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .modal-backdrop.active .modal-container {
      transform: scale(1);
    }

    .modal-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--border-card);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-header h3 {
      font-size: 16px;
      font-weight: 700;
    }

    .modal-close-btn {
      background: transparent;
      color: var(--text-secondary);
      padding: 6px;
      border-radius: 6px;
    }

    .modal-close-btn:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-primary);
    }

    .editor-btn {
      padding: 6px;
      background: transparent;
      border: none;
      color: var(--text-primary);
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      transition: background 0.2s, color 0.2s;
    }

    .editor-btn:hover {
      background: #334155;
      color: var(--primary);
    }

    .editor-btn.active {
      background: var(--primary);
      color: #0f172a;
    }

    /* Scoped visual editor overrides (forces readable text inside white canvas) */
    #m-email-visual-body {
      background: white !important;
      color: #333333 !important;
    }
    #m-email-visual-body * {
      box-sizing: border-box;
    }
    #m-email-visual-body table {
      border-collapse: collapse !important;
      width: 100% !important;
      color: #333333 !important;
      border: 1px solid #e2ece2 !important;
      margin-bottom: 20px !important;
    }
    #m-email-visual-body th {
      background-color: #f2f2f2 !important;
      color: #4A6A4A !important;
      border: 1px solid #e2ece2 !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      padding: 10px !important;
      font-size: 14px !important;
      font-weight: bold !important;
    }
    #m-email-visual-body td {
      color: #333333 !important;
      border: 1px solid #e2ece2 !important;
      padding: 10px !important;
      font-size: 14px !important;
      background: transparent !important;
      vertical-align: middle !important;
    }
     #m-email-visual-body tr:hover td {
       background: transparent !important;
     }
     
     /* Sourcing & Override Icons */
     .btn-icon-sourcing {
       background: none;
       border: none;
       color: var(--text-muted);
       cursor: pointer;
       padding: 2px 6px;
       margin-left: 4px;
       border-radius: 4px;
       transition: all 0.2s;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       vertical-align: middle;
     }
     .btn-icon-sourcing:hover {
       color: var(--primary) !important;
       background: rgba(16, 185, 129, 0.1) !important;
     }
     
     /* Visual Editor Scrollbars (High Contrast Dark scrollbar on White background) */
     #m-email-visual-body::-webkit-scrollbar {
       width: 8px !important;
       height: 8px !important;
     }
     #m-email-visual-body::-webkit-scrollbar-track {
       background: #f1f5f9 !important;
     }
     #m-email-visual-body::-webkit-scrollbar-thumb {
       background: #cbd5e1 !important;
       border-radius: 4px !important;
     }
     #m-email-visual-body::-webkit-scrollbar-thumb:hover {
       background: #94a3b8 !important;
     }
     
     /* Dark Modal Scrollbar Visibility Override */
     .modal-body::-webkit-scrollbar-thumb {
       background: rgba(255, 255, 255, 0.25) !important;
     }
    #m-email-visual-body h1, 
    #m-email-visual-body h2, 
    #m-email-visual-body h3, 
    #m-email-visual-body h4 {
      color: #333333 !important;
      margin-top: 20px !important;
      margin-bottom: 10px !important;
      font-weight: bold !important;
    }
    #m-email-visual-body h1 {
      color: #4A6A4A !important;
      font-size: 28px !important;
    }
    #m-email-visual-body h2 {
      font-size: 20px !important;
    }
    #m-email-visual-body h3 {
      color: #4A6A4A !important;
      font-size: 16px !important;
    }
    #m-email-visual-body h3[style*="color: #b71c1c"], 
    #m-email-visual-body h3[style*="color:#b71c1c"] {
      color: #b71c1c !important;
    }
    #m-email-visual-body h4 {
      color: #1f381f !important;
      font-size: 14px !important;
    }
    #m-email-visual-body p, 
    #m-email-visual-body li {
      color: #333333 !important;
      font-size: 14px !important;
      line-height: 1.5 !important;
    }
    #m-email-visual-body strong {
      color: #333333 !important;
      font-weight: bold !important;
    }

    .modal-body {
      padding: 24px;
      max-height: calc(85vh - 150px);
      overflow-y: auto;
    }

    .modal-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--border-card);
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      background: rgba(0, 0, 0, 0.1);
    }

    /* Toast Notification */
    #toast-container {
      position: fixed;
      top: 24px;
      right: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 9999;
      pointer-events: none;
    }

    .toast {
      background: #1e293b;
      border: 1px solid var(--border-card-active);
      color: var(--text-primary);
      padding: 14px 20px;
      border-radius: 10px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 300px;
      max-width: 450px;
      pointer-events: auto;
      transform: translateY(-20px);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .toast.visible {
      transform: translateY(0);
      opacity: 1;
    }

    .toast.success {
      border-left: 4px solid var(--primary);
    }

    .toast.error {
      border-left: 4px solid var(--accent-crimson);
    }

    .toast.warning {
      border-left: 4px solid var(--accent-amber);
    }

    .toast-icon {
      flex-shrink: 0;
    }

    .toast-icon svg {
      width: 20px;
      height: 20px;
    }

    .toast.success .toast-icon svg { fill: var(--primary); }
    .toast.error .toast-icon svg { fill: var(--accent-crimson); }
    .toast.warning .toast-icon svg { fill: var(--accent-amber); }

    .toast-content {
      font-size: 13px;
      line-height: 1.4;
    }

    /* Order details list */
    .order-items-table {
      width: 100%;
      margin-top: 12px;
      border: 1px solid var(--border-card);
      border-radius: 8px;
      overflow: hidden;
    }

    .order-items-table th {
      padding: 8px 12px;
    }

    .order-items-table td {
      padding: 8px 12px;
      font-size: 13px;
    }
    
    input[type="checkbox"] {
      accent-color: var(--primary);
      cursor: pointer;
    }

    /* Restricted Row Styling (Option B) */
    .restricted-row {
      cursor: not-allowed !important;
      opacity: 0.65;
    }
    .restricted-row:hover {
      background: rgba(255, 255, 255, 0.02) !important;
    }
    .restricted-row .kanban-action-btn {
      opacity: 0.4 !important;
      cursor: not-allowed !important;
      pointer-events: none; /* Let clicks pass through to row handler */
    }
    .restricted-row a {
      color: var(--text-secondary) !important;
      text-decoration: none !important;
      pointer-events: none; /* Let clicks pass through to row handler */
    }

    .mobile-close-sidebar-btn { display: none; }

    /* =========================================================================
       MOBILE OPTIMIZATION RESPONSIVENESS (MAX-WIDTH: 768PX)
       ========================================================================= */
    @media (max-width: 768px) {
      /* Sidebar Overlay */
      #sidebar {
        position: fixed;
        left: -260px; /* Hide off-screen by default */
        top: 0;
        bottom: 0;
        z-index: 1000;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
      }
      
      /* When 'collapsed' class is toggled on mobile, it slides OPEN */
      #sidebar.collapsed {
        left: 0;
        width: 260px !important;
      }
      
      /* Restore text visibility when open */
      #sidebar.collapsed .menu-item span, 
      #sidebar.collapsed .sidebar-brand span,
      #sidebar.collapsed .user-info {
        opacity: 1 !important;
        width: auto !important;
        pointer-events: auto !important;
      }
      
      #sidebar.collapsed .mobile-close-sidebar-btn {
        display: block !important;
      }
      
      #sidebar.collapsed .logout-btn {
        display: block !important;
      }

      /* Fix Layout Space */
      #main-content {
        width: 100vw;
      }
      
      .view-panel {
        padding: 16px !important; /* Reduce padding to maximize screen */
      }

      header {
        padding: 0 16px !important;
      }

      /* Stack Toolbars & Filters */
      .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }
      
      .search-filter-group {
        flex-wrap: wrap;
        gap: 8px;
      }
      
      .search-filter-group input, 
      .search-filter-group select {
        flex: 1 1 100%; /* Force full width on tiny screens */
      }
      
      .toolbar-actions {
        width: 100%;
        justify-content: stretch;
      }
      
      .toolbar-actions button {
        flex: 1;
      }

      /* Stack KPI Cards & Flex Containers */
      .kpi-row {
        flex-direction: column;
      }
      
      .dashboard-layout {
        display: flex;
        flex-direction: column;
      }
      
      .two-col-layout {
        grid-template-columns: 1fr !important;
        gap: 16px;
      }

      /* Form grids */
      .form-grid {
        grid-template-columns: 1fr !important;
      }
      
      /* Titles */
      .page-title {
        font-size: 1.25rem !important;
      }

      /* Hide Desktop specific things to save space */
      .header-right span {
        display: none !important; 
      }
    }
  </style>
</head>
<body>

  <!-- TOAST NOTIFICATION LAYER -->
  <div id="toast-container"></div>

  <!-- --------------------------------------------------
       A. AUTHENTICATION PANEL (PASSCODE ACCESS)
       -------------------------------------------------- -->
  <div id="auth-container">
    <div class="login-card">
      <div class="brand-logo-container">
        <!-- Flower Icon -->
        <svg viewBox="0 0 24 24">
          <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4M6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12A2,2 0 0,1 6,10M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12A2,2 0 0,1 18,10M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"/>
        </svg>
      </div>
      <h1 class="login-title">Andean Valley LLC</h1>
      <p class="login-subtitle">B2B CRM & ERP Administration Portal</p>
      
      <!-- User ID or Email Input -->
      <div style="margin-bottom: 24px; text-align: left;">
        <label style="color: var(--text-secondary); font-size: 11px; font-weight: 700; margin-bottom: 8px; display: block; text-transform: uppercase; letter-spacing: 0.5px;">User ID or Email Address *</label>
        <input type="text" id="login-username" placeholder="e.g. sales@andeanvalleycollection.com" required style="width: 100%; padding: 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-card); color: #fff; font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;">
      </div>

      <div class="passcode-group">
        <label style="color: var(--text-secondary); font-size: 11px; font-weight: 700; margin-bottom: 12px; display: block; text-transform: uppercase; letter-spacing: 0.5px; text-align: left;">CRM Access Passcode *</label>
        <div class="passcode-input-container">
          <div class="passcode-dot" id="dot-0"></div>
          <div class="passcode-dot" id="dot-1"></div>
          <div class="passcode-dot" id="dot-2"></div>
          <div class="passcode-dot" id="dot-3"></div>
        </div>
        <div class="login-error" id="login-error-msg">Invalid Credentials</div>
        
        <div class="numpad">
          <button class="num-btn" onclick="pressKey('1')">1</button>
          <button class="num-btn" onclick="pressKey('2')">2</button>
          <button class="num-btn" onclick="pressKey('3')">3</button>
          <button class="num-btn" onclick="pressKey('4')">4</button>
          <button class="num-btn" onclick="pressKey('5')">5</button>
          <button class="num-btn" onclick="pressKey('6')">6</button>
          <button class="num-btn" onclick="pressKey('7')">7</button>
          <button class="num-btn" onclick="pressKey('8')">8</button>
          <button class="num-btn" onclick="pressKey('9')">9</button>
          <button class="num-btn" onclick="pressKey('clear')">C</button>
          <button class="num-btn" onclick="pressKey('0')">0</button>
          <button class="num-btn" onclick="pressKey('back')">&#9003;</button>
        </div>
      </div>
      <div class="demo-toggle" onclick="bypassToDemo()">Enter Offline Mockup Demonstration Mode</div>
    </div>
  </div>

  <!-- --------------------------------------------------
       B. MAIN APP CONTAINER
       -------------------------------------------------- -->
  <div id="app-container">
    
    <!-- COLLAPSIBLE SIDEBAR -->
    <aside id="sidebar">
      <div class="sidebar-header">
        <div class="sidebar-brand">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4M6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12A2,2 0 0,1 6,10M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12A2,2 0 0,1 18,10M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"/>
          </svg>
          <span class="brand-title">Andean Valley</span>
        </div>
        <button class="mobile-close-sidebar-btn" onclick="toggleSidebar()" style="background:transparent; border:none; color:var(--text-secondary); cursor:pointer; padding: 4px;">
          <svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>

      <nav class="sidebar-menu">
        <button class="menu-item active" onclick="switchView('dashboard', this)">
          <!-- Dashboard SVG -->
          <svg viewBox="0 0 24 24"><path d="M13,3V9H21V3H13M13,21H21V11H13V21M3,21H11V15H3V21M3,13H11V3H3V13Z"/></svg>
          <span>Dashboard</span>
        </button>
        <button class="menu-item" onclick="switchView('clients', this)">
          <!-- Customer SVG -->
          <svg viewBox="0 0 24 24"><path d="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.86 5.86 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z"/></svg>
          <span>Clients 360</span>
        </button>
        <button class="menu-item" onclick="switchView('orders', this)">
          <!-- Order SVG -->
          <svg viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19M17,11H7V9H17V11M17,15H7V13H17V15M14,17H7V16H14V17Z"/></svg>
          <span>Sales Pipeline</span>
        </button>
        <button class="menu-item" onclick="switchView('logistics', this)">
          <!-- Flight / Logistics SVG -->
          <svg viewBox="0 0 24 24"><path d="M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z"/></svg>
          <span>FOB Logistics</span>
        </button>
        <button class="menu-item" onclick="switchView('payments', this)">
          <!-- Payments SVG -->
          <svg viewBox="0 0 24 24"><path d="M21,18V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H19A2,2 0 0,1 21,5V6H12A2,2 0 0,0 10,8V15A2,2 0 0,0 12,17H21M12,8V15H22V8H12M16,12.5A1.5,1.5 0 1,1 17.5,11A1.5,1.5 0 0,1 16,12.5Z"/></svg>
          <span>Payments Ledger</span>
        </button>
        <button class="menu-item" onclick="switchView('reports', this)" id="nav-reports" style="display: none;">
          <!-- Reports/Analytics SVG -->
          <svg viewBox="0 0 24 24"><path fill="currentColor" d="M16,11.78L20.24,4.45L21.97,5.45L16.74,14.5L10.23,10.75L5.46,19H22V21H2V3H4V17.54L9.5,8L16,11.78Z"/></svg>
          <span>Sales Reports</span>
        </button>
        <button class="menu-item" onclick="switchView('settings', this)" id="nav-settings">
          <!-- Settings SVG -->
          <svg viewBox="0 0 24 24"><path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.47,5.34 14.86,5.08L14.49,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.51,2.42L9.14,5.08C8.53,5.35 7.96,5.67 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.95C7.96,18.34 8.53,18.66 9.14,18.92L9.51,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.49,21.58L14.86,18.92C15.47,18.66 16.04,18.34 16.56,17.95L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/></svg>
          <span>ERP Settings</span>
        </button>
      </nav>

      <div class="sidebar-footer">
        <div class="user-avatar" id="sidebar-user-avatar">AD</div>
        <div class="user-info">
          <span class="user-name" id="sidebar-user-name">Adrian Agent</span>
          <span class="user-role" id="sidebar-user-role">Administrator</span>
        </div>
        <button class="logout-btn" onclick="logout()" title="Logout Portal">
          <!-- Log out SVG -->
          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z"/></svg>
        </button>
      </div>
    </aside>

    <!-- MAIN APP CONTENT -->
    <main id="main-content">
      
      <!-- TOP STATUS HEADER -->
      <header>
        <div class="header-left">
          <button class="toggle-sidebar-btn" onclick="toggleSidebar()" title="Toggle Sidebar">
            <!-- Sidebar toggle SVG -->
            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"/></svg>
          </button>
          <h2 class="page-title" id="current-view-title" style="display:inline-block; margin:0;">Dashboard Summary</h2>
          <span id="clients-count-badge" class="badge badge-primary" style="display:none; margin-left:12px; font-size:14px; vertical-align: middle;"></span>
        </div>

        <div class="header-right">
          <div class="sync-status-badge" id="sync-indicator">
            <div class="sync-pulse"></div>
            <span id="sync-indicator-text">Sync Connected</span>
          </div>
          <button class="btn-primary" onclick="openQuoteBuilder()" style="margin-right: 12px; background: var(--accent-emerald-glow); color: var(--accent-emerald); border: 1px solid var(--accent-emerald); padding: 6px 12px; border-radius: 6px; font-weight: 500; display: flex; align-items: center; gap: 6px;">
            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M12 11V14H9V16H12V19H14V16H17V14H14V11H12Z" /></svg>
            <span>New Quote</span>
          </button>
          <button class="sync-btn" onclick="fetchLiveDatabase()" id="global-sync-btn">
            <!-- Sync icon SVG -->
            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M2 12C2 16.97 6.03 21 11 21C13.39 21 15.58 20.07 17.21 18.59L15.79 17.17C14.54 18.3 12.85 19 11 19C7.14 19 4 15.86 4 12C4 8.14 7.14 5 11 5C14.86 5 18 8.14 18 12H15L19 16L23 12H20C20 7.03 15.97 3 11 3C6.03 3 2 7.03 2 12Z"/></svg>
            <span>Sync Now</span>
          </button>
        </div>
      </header>

      <!-- --------------------------------------------------
           C. VIEW PANELS
           -------------------------------------------------- -->

      <!-- 1. DASHBOARD VIEW -->
      <div id="view-dashboard" class="view-panel active">
        <!-- KPI Cards Grid -->
        <div class="kpi-grid">
          <div class="kpi-card" onclick="switchView('payments')">
            <div class="kpi-header">
              <span class="kpi-title">Verified Sales</span>
              <div class="kpi-icon-container" style="background: var(--primary-glow); color: var(--primary);">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M11,17H13V15H11V17M11,13H13V7H11V13Z"/></svg>
              </div>
            </div>
            <div class="kpi-val" id="kpi-revenue">$0.00</div>
            <div class="kpi-footer">
              <span class="kpi-trend-up">&#9733; Verified Funds</span>
              <span>across firm orders</span>
            </div>
          </div>

          <div class="kpi-card" onclick="switchView('orders')">
            <div class="kpi-header">
              <span class="kpi-title">Active Orders</span>
              <div class="kpi-icon-container" style="background: var(--accent-indigo-glow); color: var(--accent-indigo);">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M17,18L12,13L7,18V12L12,7L17,12V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/></svg>
              </div>
            </div>
            <div class="kpi-val" id="kpi-active-orders">0</div>
            <div class="kpi-footer">
              <span id="kpi-firm-orders">0 Firm</span>
              <span>&bull; proforma sent or processing</span>
            </div>
          </div>

          <div class="kpi-card" onclick="switchView('logistics')">
            <div class="kpi-header">
              <span class="kpi-title">In Transit (FOB)</span>
              <div class="kpi-icon-container" style="background: var(--accent-amber-glow); color: var(--accent-amber);">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z"/></svg>
              </div>
            </div>
            <div class="kpi-val" id="kpi-transit-shipments">0</div>
            <div class="kpi-footer">
              <span>FOB Cargo tracked</span>
            </div>
          </div>

          <div class="kpi-card" onclick="viewUnassignedLeads()">
            <div class="kpi-header">
              <span class="kpi-title">Unassigned Leads</span>
              <div class="kpi-icon-container" style="background: rgba(255,255,255,0.05); color: var(--text-secondary);">
                <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M12,5C13.66,5 15,6.34 15,8C15,9.66 13.66,11 12,11C10.34,11 9,9.66 9,8C9,6.34 10.34,5 12,5M12,19.2C9.5,19.2 7.29,17.92 6,15.98C6.03,13.98 10,12.9 12,12.9C13.97,12.9 17.97,13.98 18,15.98C16.71,17.92 14.5,19.2 12,19.2Z"/></svg>
              </div>
            </div>
            <div class="kpi-val" id="kpi-unassigned-clients">0</div>
            <div class="kpi-footer">
              <span>Requires assignment</span>
            </div>
          </div>
        </div>

        <!-- Dashboard Layout Split -->
        <div class="dashboard-layout">
          <!-- Left side: Sourcing tasks & Alerts -->
          <div class="dashboard-panel-card">
            <div class="panel-card-header">
              <h3 class="panel-card-title">Tasks & Alerts Needing Action</h3>
              <span class="badge badge-amber" id="attention-badge-count">0 Alerts</span>
            </div>
            <div class="attention-list" id="dashboard-alerts-list">
              <!-- Rendered dynamically -->
              <div style="color: var(--text-secondary); text-align: center; padding: 40px 0;">No pending action alerts. Enjoy the day!</div>
            </div>
          </div>

          <!-- Right side: Sales Conversion / Stage Summary -->
          <div class="dashboard-panel-card">
            <div class="panel-card-header">
              <h3 class="panel-card-title">Sales Funnel Analysis</h3>
            </div>
            <div class="pipeline-summary" id="dashboard-funnel-container">
              <!-- Bars rendered dynamically -->
            </div>
          </div>
        </div>
      </div>

      <!-- 2. CLIENTS VIEW -->
      <div id="view-clients" class="view-panel">
        <div class="toolbar">
          <div class="search-filter-group">
            <select id="client-filter-status" onchange="renderClientsTable()">
              <option value="">All Statuses</option>
              <option value="Prospect">Prospect</option>
              <option value="Active Client">Active Client</option>
              <option value="Inactive">Inactive</option>
            </select>
            <select id="client-filter-rep" onchange="renderClientsTable()">
              <option value="">All Salespeople</option>
              <!-- Populate dynamically -->
            </select>
            <select id="client-filter-buyer-type" onchange="renderClientsTable()">
              <option value="">All Buyer Types</option>
              <option value="Florist">Florist</option>
              <option value="Event/Wedding Planner">Event/Wedding Planner</option>
              <option value="Hotel (Boutique)">Hotel (Boutique)</option>
              <option value="Supermarket">Supermarket</option>
              <option value="Wholesaler/competitor">Wholesaler/competitor</option>
            </select>
            <select id="client-filter-lead-status" onchange="renderClientsTable()">
              <option value="">All Lead Statuses</option>
              <option value="New lead">New lead</option>
              <option value="Contacted">Contacted</option>
              <option value="Qualified">Qualified</option>
              <option value="Proposal">Proposal</option>
              <option value="Won">Won</option>
              <option value="Lost">Lost</option>
            </select>
            <div class="search-input-wrapper">
              <!-- Search Icon -->
              <svg viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/></svg>
              <input type="text" id="client-search" placeholder="Search company, contact name, email..." oninput="renderClientsTable()">
            </div>
          </div>
          <div class="toolbar-actions">
            <button class="btn btn-secondary" id="btn-bulk-ids" onclick="triggerAutoFillIds()" style="margin-right: 10px;">
              <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/></svg>
              <span>Auto-Generate Missing IDs</span>
            </button>
            <button class="btn btn-primary" id="btn-bulk-outreach" onclick="openBulkOutreachModal()" disabled style="margin-right: 10px; background: var(--accent-indigo); color: white; border: none;">
              <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z"/></svg>
              <span>Bulk Outreach Email (<span id="bulk-outreach-count">0</span>)</span>
            </button>
            <button class="btn-primary" onclick="openAddClientModal()">
              <!-- Plus SVG -->
              <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/></svg>
              <span>Add Client Profile</span>
            </button>
          </div>
        </div>

        <div class="top-scrollbar-wrapper" id="clients-top-scrollbar-wrapper" style="overflow-x: auto; overflow-y: hidden; margin-bottom: 0; border-radius: 8px 8px 0 0; background: #1e293b; border: 1px solid var(--border-card); border-bottom: none;">
          <div id="clients-top-scrollbar-content" style="height: 12px;"></div>
        </div>
        <div class="table-container" id="clients-table-wrapper" style="border-top-left-radius: 0; border-top-right-radius: 0;">
          <table id="clients-360-table">
            <thead>
              <tr>
                <th><div class="resize-handle" style="width: 40px; text-align:center;"><input type="checkbox" id="bulk-outreach-master-check" onchange="toggleAllBulkOutreach(this)"></div></th>
                <th><div class="resize-handle sortable" style="width: 110px;" onclick="sortClientsTable('Client ID')">ID</div></th>
                <th><div class="resize-handle sortable" style="width: 200px;" onclick="sortClientsTable('Company Name')">Company Name</div></th>
                <th><div class="resize-handle sortable" style="width: 150px;" onclick="sortClientsTable('Contact Name')">Contact Name</div></th>
                <th><div class="resize-handle sortable" style="width: 130px;" onclick="sortClientsTable('Phone')">Phone</div></th>
                <th><div class="resize-handle sortable" style="width: 250px;" onclick="sortClientsTable('Email')">Email</div></th>
                <th><div class="resize-handle sortable" style="width: 110px;" onclick="sortClientsTable('Buyer Type')">Buyer Type</div></th>
                <th><div class="resize-handle" style="width: 100px; text-align:center;">Outreach Sent</div></th>
                <th><div class="resize-handle sortable" style="width: 120px;" onclick="sortClientsTable('Lead Status')">Lead Status</div></th>
                <th><div class="resize-handle sortable" style="width: 110px;" onclick="sortClientsTable('Status')">Status</div></th>
                <th><div class="resize-handle sortable" style="width: 150px;" onclick="sortClientsTable('Assigned Salesperson')">Assigned Sales Rep</div></th>
                <th><div class="resize-handle sortable" style="width: 110px;" onclick="sortClientsTable('Total Sales')">Total Sales ($)</div></th>
                <th><div class="resize-handle" style="width: 90px;">Pending</div></th>
                <th><div class="resize-handle" style="width: 110px;">Last Action</div></th>
                <th><div class="resize-handle sortable" style="width: 110px;" onclick="sortClientsTable('Created Date')">Created Date</div></th>
                <th><div class="resize-handle" style="width: 140px;">Actions</div></th>
              </tr>
            </thead>
            <tbody id="clients-table-body">
              <!-- Rendered dynamically -->
            </tbody>
          </table>
        </div>
      </div>

      <!-- 3. ORDERS / PIPELINE VIEW -->
      <div id="view-orders" class="view-panel">
        <div class="toolbar">
          <div class="search-filter-group">
            <select id="order-filter-incoterm" onchange="renderOrdersView()">
              <option value="">All Incoterms</option>
              <option value="FOB">FOB Quito</option>
              <option value="CIF">FOB Miami</option>
            </select>
            <div class="search-input-wrapper">
              <svg viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/></svg>
              <input type="text" id="order-search" placeholder="Search orders by Client, ID, or incoterms..." oninput="renderOrdersView()">
            </div>
          </div>
          
          <div class="toolbar-actions">
            <div class="orders-layout-toggle">
              <button class="layout-toggle-btn active" id="btn-toggle-kanban" onclick="setOrdersLayout('kanban')">Kanban Pipeline</button>
              <button class="layout-toggle-btn" id="btn-toggle-table" onclick="setOrdersLayout('table')">List Grid</button>
            </div>
          </div>
        </div>

        <!-- Kanban Board view -->
        <div class="kanban-board-container" id="orders-kanban-layout">
          <div class="kanban-board">
            
            <div class="kanban-column" data-status="Draft Quote">
              <div class="kanban-column-header">
                <span class="kanban-column-title"><span style="color: var(--text-secondary)">&#9679;</span> Draft Quotes</span>
                <span class="kanban-column-count" id="count-DraftQuote">0</span>
              </div>
              <div class="kanban-cards-container" id="cards-DraftQuote"></div>
            </div>

            <div class="kanban-column" data-status="Quote Sent">
              <div class="kanban-column-header">
                <span class="kanban-column-title"><span style="color: var(--accent-indigo)">&#9679;</span> Quotes Sent</span>
                <span class="kanban-column-count" id="count-QuoteSent">0</span>
              </div>
              <div class="kanban-cards-container" id="cards-QuoteSent"></div>
            </div>

            <div class="kanban-column" data-status="Invoice Sent">
              <div class="kanban-column-header">
                <span class="kanban-column-title"><span style="color: var(--accent-indigo)">&#9679;</span> Proforma Sent</span>
                <span class="kanban-column-count" id="count-InvoiceSent">0</span>
              </div>
              <div class="kanban-cards-container" id="cards-InvoiceSent"></div>
            </div>

            <div class="kanban-column" data-status="Firm Order">
              <div class="kanban-column-header">
                <span class="kanban-column-title"><span style="color: var(--accent-amber)">&#9679;</span> Firm Orders</span>
                <span class="kanban-column-count" id="count-FirmOrder">0</span>
              </div>
              <div class="kanban-cards-container" id="cards-FirmOrder"></div>
            </div>

            <div class="kanban-column" data-status="Sourced">
              <div class="kanban-column-header">
                <span class="kanban-column-title"><span style="color: var(--primary)">&#9679;</span> Sourced</span>
                <span class="kanban-column-count" id="count-Sourced">0</span>
              </div>
              <div class="kanban-cards-container" id="cards-Sourced"></div>
            </div>

            <div class="kanban-column" data-status="In Transit">
              <div class="kanban-column-header">
                <span class="kanban-column-title"><span style="color: var(--accent-indigo)">&#9679;</span> In Transit</span>
                <span class="kanban-column-count" id="count-InTransit">0</span>
              </div>
              <div class="kanban-cards-container" id="cards-InTransit"></div>
            </div>

            <div class="kanban-column" data-status="Delivered">
              <div class="kanban-column-header">
                <span class="kanban-column-title"><span style="color: var(--primary)">&#9679;</span> Delivered</span>
                <span class="kanban-column-count" id="count-Delivered">0</span>
              </div>
              <div class="kanban-cards-container" id="cards-Delivered"></div>
            </div>

            <div class="kanban-column" data-status="Cancelled">
              <div class="kanban-column-header">
                <span class="kanban-column-title"><span style="color: var(--accent-crimson)">&#9679;</span> Cancelled</span>
                <span class="kanban-column-count" id="count-Cancelled">0</span>
              </div>
              <div class="kanban-cards-container" id="cards-Cancelled"></div>
            </div>

          </div>
        </div>

        <!-- Table list view (hidden by default) -->
        <div class="table-container" id="orders-table-layout" style="display: none;">
          <table>
            <thead>
              <tr>
                <th>Order ID</th>
                <th>Company</th>
                <th>Delivery Date</th>
                <th>Incoterms</th>
                <th>Order Value</th>
                <th>Workflow Status</th>
                <th>Payment Status</th>
                <th>Last Updated</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody id="orders-table-body">
              <!-- Rendered dynamically -->
            </tbody>
          </table>
        </div>
      </div>

      <!-- 4. LOGISTICS VIEW -->
      <div id="view-logistics" class="view-panel">
        <div class="toolbar">
          <div class="search-filter-group">
            <select id="logistics-filter-origin" onchange="renderLogisticsView()">
              <option value="">All Origin Airports</option>
              <option value="Quito">Quito</option>
              <option value="Bogota">Bogota</option>
              <option value="Medellin">Medellin</option>
            </select>
            <div class="search-input-wrapper">
              <svg viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/></svg>
              <input type="text" id="logistics-search" placeholder="Search by Order ID or Airway Bill..." oninput="renderLogisticsView()">
            </div>
          </div>
        </div>

        <div id="logistics-cards-container">
          <!-- Rendered dynamically -->
        </div>
      </div>

      <!-- 5. PAYMENTS VIEW -->
      <div id="view-payments" class="view-panel">
        <div class="toolbar">
          <div class="search-filter-group">
            <div class="search-input-wrapper">
              <svg viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/></svg>
              <input type="text" id="payments-search" placeholder="Search payments by Order ID or Client ID..." oninput="renderPaymentsTable()">
            </div>
          </div>
        </div>

        <div class="table-container">
          <table>
            <thead>
              <tr>
                <th>Payment ID</th>
                <th>Order ID</th>
                <th>Client Company</th>
                <th>Gross Confirmed ($)</th>
                <th>Net Verified ($)</th>
                <th>Processing Fees ($)</th>
                <th>Payment Method</th>
                <th>Transaction Reference</th>
                <th>Date Paid</th>
                <th>Confirmed By</th>
                <th>Verified By</th>
                <th>Internal Notes</th>
              </tr>
            </thead>
            <tbody id="payments-table-body">
              <!-- Rendered dynamically -->
            </tbody>
          </table>
        </div>
      </div>

      <!-- 5B. SALES PERFORMANCE REPORTS VIEW (ADMIN ONLY) -->
      <div id="view-reports" class="view-panel">
        <div style="display: flex; flex-direction: column; gap: 24px; margin-top: 10px;">
          
          <div class="toolbar-wrapper" style="display: flex; justify-content: flex-end; margin-bottom: -10px;">
            <select id="report-filter-rep" onchange="renderReports()" style="padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border-card); background: var(--bg-card); color: var(--text-primary);">
              <option value="">All Salespeople</option>
              <!-- Populated dynamically -->
            </select>
          </div>
          
          <div class="kpi-grid">
            <div class="kpi-card">
              <div class="kpi-header">
                <span class="kpi-title">Total CRM Won Revenue</span>
                <div class="kpi-icon-container" style="background: var(--accent-emerald-glow); color: var(--accent-emerald);">
                  <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M15.89 11.39C15.89 9.9 14.7 8.89 12.5 8.35L12.08 8.24V6H10.74V8.22L10.37 8.3C8.42 8.74 7.63 9.77 7.63 11H9.19C9.19 10.3 9.72 9.57 11.23 9.27V11.53L11.66 11.64C13.92 12.2 14.71 13.06 14.71 14.39C14.71 15.65 13.72 16.63 11.66 16.92V19H10.32V16.9C8.39 16.6 7.39 15.42 7.39 14.22H8.95C8.95 15 9.77 15.82 11.66 16.03V13.68L11.23 13.57C9.07 13.06 8.28 12.16 8.28 11.05C8.28 9.77 9.38 8.78 11.47 8.46V8.45C11.47 8.45 11.47 8.45 11.47 8.45Z"/></svg>
                </div>
              </div>
              <div class="kpi-val" id="report-kpi-total-revenue">$0.00</div>
              <div class="kpi-footer"><span>Sum of Firm/Delivered Orders</span></div>
            </div>

            <div class="kpi-card">
              <div class="kpi-header">
                <span class="kpi-title">Active Pipeline Value</span>
                <div class="kpi-icon-container" style="background: var(--accent-indigo-glow); color: var(--accent-indigo);">
                  <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M21 16V14L13 9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21 16Z"/></svg>
                </div>
              </div>
              <div class="kpi-val" id="report-kpi-pipeline-value">$0.00</div>
              <div class="kpi-footer"><span>Quotes and Proposals in progress</span></div>
            </div>

            <div class="kpi-card">
              <div class="kpi-header">
                <span class="kpi-title">Overall Conversion Rate</span>
                <div class="kpi-icon-container" style="background: var(--accent-teal-glow); color: var(--accent-teal);">
                  <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4M11,17H13V15H11V17M11,13H13V7H11V13Z"/></svg>
                </div>
              </div>
              <div class="kpi-val" id="report-kpi-conversion-rate">0.0%</div>
              <div class="kpi-footer"><span>Won leads vs. Lost/Total leads</span></div>
            </div>

            <div class="kpi-card">
              <div class="kpi-header">
                <span class="kpi-title">Total Sales Activities</span>
                <div class="kpi-icon-container" style="background: rgba(255,255,255,0.05); color: var(--text-secondary);">
                  <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19,3H16.82A3,3 0 0,0 12,1A3,3 0 0,0 7.18,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M14,17H7V15H14V17M17,13H7V11H17V13M17,9H7V7H17V9Z"/></svg>
                </div>
              </div>
              <div class="kpi-val" id="report-kpi-total-activities">0</div>
              <div class="kpi-footer"><span>Outreach, Calls, WA, Meetings</span></div>
            </div>

            <div class="kpi-card">
              <div class="kpi-header">
                <span class="kpi-title">Outreach Emails Sent</span>
                <div class="kpi-icon-container" style="background: rgba(99, 102, 241, 0.1); color: #6366f1;">
                  <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z"/></svg>
                </div>
              </div>
              <div class="kpi-val" id="report-kpi-outreach-sent">0</div>
              <div class="kpi-footer"><span>Total Cold & Bulk Outreach emails</span></div>
            </div>
            
            <div class="kpi-card">
              <div class="kpi-header">
                <span class="kpi-title">Avg Quote Turnaround</span>
                <div class="kpi-icon-container" style="background: rgba(245, 158, 11, 0.1); color: #f59e0b;">
                  <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/></svg>
                </div>
              </div>
              <div class="kpi-val" id="report-kpi-avg-quote-time">0 mins</div>
              <div class="kpi-footer"><span>Request to Quote Sent</span></div>
            </div>

            <div class="kpi-card">
              <div class="kpi-header">
                <span class="kpi-title">Avg Payment Verification</span>
                <div class="kpi-icon-container" style="background: rgba(16, 185, 129, 0.1); color: #10b981;">
                  <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/></svg>
                </div>
              </div>
              <div class="kpi-val" id="report-kpi-avg-payment-time">0 hrs</div>
              <div class="kpi-footer"><span>Quote Sent to Verified</span></div>
            </div>
          </div>

          <div class="dashboard-panel-card" style="width: 100%;">
            <div class="panel-card-header">
              <h3 class="panel-card-title">Representative Performance & Activity</h3>
            </div>
            <div class="table-container">
              <table>
                <thead>
                  <tr>
                    <th>Salesperson Name</th>
                    <th>Assigned Leads</th>
                    <th>Won Leads</th>
                    <th>Lost Leads</th>
                    <th>Conversion Rate</th>
                    <th>Won Sales ($)</th>
                    <th>Pipeline Value ($)</th>
                    <th>Calls Logged</th>
                    <th>WhatsApp Logged</th>
                    <th>Emails Sent</th>
                    <th>Meetings</th>
                  </tr>
                </thead>
                <tbody id="report-performance-table-body">
                  <!-- Dynamically rendered rows -->
                </tbody>
              </table>
            </div>
          </div>
          
        </div>
      </div>

      <!-- 6. SETTINGS VIEW -->
      <div id="view-settings" class="view-panel">
        <div id="settings-denied" style="display: none; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; background: rgba(255,255,255,0.02); border: 1px solid var(--border-card); border-radius: 12px; margin-top: 20px;">
          <div style="background: rgba(239, 68, 68, 0.1); color: var(--accent-crimson); width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
            <svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10A2,2 0 0,1 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"/></svg>
          </div>
          <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary);">Access Denied</h3>
          <p style="color: var(--text-secondary); max-width: 400px; font-size: 14px; line-height: 1.5; margin: 0;">
            This section is restricted to Administrators only. Please contact your system administrator if you believe this is an error.
          </p>
        </div>
        <div id="settings-content" class="dashboard-layout" style="grid-template-columns: 1.5fr 1fr;">
          <!-- User Management -->
          <div class="dashboard-panel-card">
            <div class="panel-card-header">
              <h3 class="panel-card-title">User Accounts & Permissions</h3>
              <button class="btn-primary" onclick="openNewUserModal()" id="btn-add-user-restrict">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/></svg>
                <span>Add User</span>
              </button>
            </div>
            
            <div class="table-container">
              <table>
                <thead>
                  <tr>
                    <th>User ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Passcode</th>
                    <th>Active</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody id="users-table-body">
                  <!-- Rendered dynamically -->
                </tbody>
              </table>
            </div>
          </div>

          <!-- GAS System integrations -->
          <div class="dashboard-panel-card">
            <div class="panel-card-header">
              <h3 class="panel-card-title">Spreadsheet Engine Integration</h3>
            </div>
            <div style="display: flex; flex-direction: column; gap: 16px;">
              <p style="font-size: 13px; color: var(--text-secondary); line-height: 1.5;">
                Manually trigger Google Apps Script tasks on the background. Changes sync back to sheets automatically.
              </p>
              
              <div style="display: flex; flex-direction: column; gap: 12px; margin-top: 10px;">
                <button class="btn-secondary" style="text-align: left; display: flex; align-items: center; justify-content: space-between;" onclick="triggerGasAction('syncSupplier')">
                  <span>Ingest Supplier Promotional Emails</span>
                  <span class="badge badge-primary">Trigger now</span>
                </button>
                <button class="btn-secondary" style="text-align: left; display: flex; align-items: center; justify-content: space-between;" onclick="triggerGasAction('syncClient')">
                  <span>Sync Registered Customer Threads</span>
                  <span class="badge badge-indigo">Trigger now</span>
                </button>
                <button class="btn-secondary" style="text-align: left; display: flex; align-items: center; justify-content: space-between;" onclick="triggerGasAction('setupCron')">
                  <span>Establish Time-Driven CRON triggers</span>
                  <span class="badge badge-secondary">Enable Auto</span>
                </button>
              </div>

              <div style="margin-top: 24px; border-top: 1px solid var(--border-card); padding-top: 20px;">
                <h4 style="font-size: 14px; margin-bottom: 12px;">Google Web App URL Endpoint</h4>
                <input type="text" id="api-url-input" style="width: 100%; font-family: monospace; font-size: 11px;" onchange="saveCustomApiUrl()">
                <p style="font-size: 11px; color: var(--text-muted); margin-top: 6px;">
                  If Web App URL changes, update here. Re-verify connectivity afterwards.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </main>
  </div>

  <!-- --------------------------------------------------
       D. RIGHT SLIDE-OVER DRAWER (360-DEGREE TIMELINE)
       -------------------------------------------------- -->
  <div id="client-drawer-backdrop" onclick="closeClientDrawer()"></div>
  <div id="client-drawer">
    <div class="drawer-header">
      <div class="drawer-title-area">
        <h3 class="drawer-title" id="drawer-company-name">Flower Shop Inc.</h3>
        <span class="drawer-subtitle" id="drawer-client-id">CLI-981A</span>
      </div>
      <button class="close-drawer-btn" onclick="closeClientDrawer()" title="Close Drawer">
        <!-- Close icon SVG -->
        <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
      </button>
    </div>

    <div class="drawer-tabs">
      <button class="drawer-tab active" onclick="switchDrawerTab('profile', this)">360 Profile</button>
      <button class="drawer-tab" onclick="switchDrawerTab('timeline', this)">Communication Feed</button>
      <button class="drawer-tab" onclick="switchDrawerTab('orders', this)">Sales History</button>
    </div>

    <div class="drawer-body">
      
      <!-- Drawer Tab 1: Profile Details -->
      <div id="drawer-pane-profile" class="drawer-pane active">
        <form id="drawer-client-form" onsubmit="saveClientProfile(event)">
          <div class="form-grid">
            <div class="form-group">
              <label>Company Name</label>
              <input type="text" id="drawer-input-company" required>
            </div>
            <div class="form-group">
              <label>Contact Name</label>
              <input type="text" id="drawer-input-contact" required>
            </div>
            <div class="form-group">
              <label>Email Address</label>
              <input type="email" id="drawer-input-email" required>
            </div>
            <div class="form-group">
              <label>Phone Number</label>
              <input type="text" id="drawer-input-phone">
            </div>
            
            <div class="form-group-full form-group" style="margin-top: 10px; margin-bottom: 0px; font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase;">
              Alternative Contacts
            </div>
            <div class="form-group">
              <label>Contact 2</label>
              <input type="text" id="drawer-input-contact2">
            </div>
            <div class="form-group">
              <label>Email 2</label>
              <input type="text" id="drawer-input-email2">
            </div>
            <div class="form-group">
              <label>Phone 2</label>
              <input type="text" id="drawer-input-phone2">
            </div>
            <div class="form-group">
              <label>AP Contact</label>
              <input type="text" id="drawer-input-ap-contact" placeholder="Accounts Payable Name">
            </div>
            <div class="form-group">
              <label>AP Email</label>
              <input type="text" id="drawer-input-ap-email" placeholder="AP Email">
            </div>

            <div class="form-group-full form-group">
              <label>Billing Address</label>
              <textarea id="drawer-input-billing" rows="2"></textarea>
            </div>
            <div class="form-group-full form-group">
              <label>Shipping Address</label>
              <textarea id="drawer-input-shipping" rows="2"></textarea>
            </div>
            <div class="form-group">
              <label>Resale Certificate #</label>
              <input type="text" id="drawer-input-resale-num">
            </div>
            <div class="form-group">
              <label>Resale Cert Link</label>
              <input type="text" id="drawer-input-resale-link" placeholder="URL to PDF doc...">
            </div>
            <div class="form-group">
              <label>Account Status</label>
              <select id="drawer-input-status">
                <option value="Prospect">Prospect</option>
                <option value="Active Client">Active Client</option>
                <option value="Inactive">Inactive</option>
              </select>
            </div>
            <div class="form-group">
              <label>Assigned Salesperson</label>
              <select id="drawer-input-salesperson">
                <!-- Populate dynamically -->
              </select>
            </div>
            <div class="form-group">
              <label>Buyer Type</label>
              <select id="drawer-input-buyer-type">
                <option value="">Select Buyer Type...</option>
                <option value="Florist">Florist</option>
                <option value="Event/Wedding Planner">Event/Wedding Planner</option>
                <option value="Hotel (Boutique)">Hotel (Boutique)</option>
                <option value="Supermarket">Supermarket</option>
                <option value="Wholesaler/competitor">Wholesaler/competitor</option>
              </select>
            </div>
            <div class="form-group">
              <label>Lead Status</label>
              <select id="drawer-input-lead-status">
                <option value="New lead">New lead</option>
                <option value="Contacted">Contacted</option>
                <option value="Qualified">Qualified</option>
                <option value="Proposal">Proposal</option>
                <option value="Won">Won</option>
                <option value="Lost">Lost</option>
              </select>
            </div>
            <div class="form-group">
              <label>Last Call Outcome</label>
              <select id="drawer-input-effective-call">
                <option value="">None</option>
                <option value="Yes">Yes (Effective)</option>
                <option value="No answer">No answer</option>
                <option value="Recording/Call again">Recording/Call again</option>
              </select>
            </div>
            <div class="form-group">
              <label>Website</label>
              <input type="text" id="drawer-input-website" placeholder="https://example.com">
            </div>
            <div class="form-group">
              <label>Last Contact Date</label>
              <input type="date" id="drawer-input-last-contact">
            </div>
            <div class="form-group">
              <label>Next Follow-Up Date</label>
              <input type="date" id="drawer-input-next-followup">
            </div>
          </div>
          
          <div style="display: flex; gap: 12px; margin-top: 24px; border-top: 1px solid var(--border-card); padding-top: 20px;">
            <button class="btn-primary" type="submit" style="flex: 1; justify-content: center;">Save Profile</button>
            <button class="btn-secondary" type="button" onclick="openQuoteBuilder(state.selectedClientId)" style="background: var(--accent-emerald-glow); color: var(--accent-emerald); border: 1px solid var(--accent-emerald); flex: 1; justify-content: center;">Create Quote</button>
            <button class="btn-secondary" type="button" onclick="triggerOutreachEmail(state.selectedClientId)" style="background: var(--accent-indigo-glow); color: var(--accent-indigo); border: 1px solid var(--accent-indigo); flex: 1; justify-content: center;">Send Outreach</button>
            <button class="btn-secondary" type="button" onclick="closeClientDrawer()">Cancel</button>
          </div>
        </form>
      </div>

      <!-- Drawer Tab 2: Communications Timeline & Note Logger -->
      <div id="drawer-pane-timeline" class="drawer-pane">
        <!-- Manual Log Box -->
        <div class="log-interaction-box">
          <h4 style="font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--text-secondary);">Log New Interaction</h4>
          <form onsubmit="submitCrmInteraction(event)">
            <div style="display: flex; gap: 8px; margin-bottom: 10px;">
              <select id="log-inter-type" style="padding: 6px 10px; font-size: 12px;" onchange="toggleCallOutcomeField()">
                <option value="Internal Note">Internal Note</option>
                <option value="Phone Call">Phone Call</option>
                <option value="WhatsApp">WhatsApp</option>
                <option value="Meeting">Meeting</option>
                <option value="Email Sent">Email Sent</option>
              </select>
              <input type="date" id="log-inter-followup" style="flex: 1; padding: 6px 10px; font-size: 12px;">
            </div>
            
            <div id="call-outcome-container" style="display: none; margin-bottom: 10px;">
              <label style="font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; display: block;">Effective Call outcome?</label>
              <select id="log-inter-call-outcome" style="padding: 6px 10px; font-size: 12px; width: 100%;">
                <option value="">Select Call Outcome...</option>
                <option value="Yes">Yes (Effective)</option>
                <option value="No answer">No answer</option>
                <option value="Recording/Call again">Recording/Call again</option>
              </select>
            </div>

            <textarea id="log-inter-notes" placeholder="Enter session notes, feedback, details..." rows="3" style="width: 100%; font-size: 13px; margin-bottom: 10px;" required></textarea>
            <button class="btn-primary" type="submit" style="padding: 6px 14px; font-size: 12px; margin-left: auto;">Save Entry</button>
          </form>
        </div>

        <!-- Timeline Feeds -->
        <div class="timeline-container" id="drawer-timeline-list">
          <!-- Rendered dynamically -->
        </div>
      </div>

      <!-- Drawer Tab 3: Sales History -->
      <div id="drawer-pane-orders" class="drawer-pane">
        <div style="display: flex; flex-direction: column; gap: 16px;" id="drawer-orders-list">
          <!-- Rendered dynamically -->
        </div>
      </div>

    </div>
  </div>

  <!-- --------------------------------------------------
       E. UNIVERSAL MODALS
       -------------------------------------------------- -->
  
  <!-- 1. ADD CLIENT MODAL -->
  <div class="modal-backdrop" id="modal-client-backdrop">
    <div class="modal-container">
      <div class="modal-header">
        <h3>Create Client Profile</h3>
        <button class="modal-close-btn" onclick="toggleModal('client', false)">
          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>
      <form id="new-client-form" onsubmit="submitNewClient(event)">
        <div class="modal-body" style="display: flex; flex-direction: column; gap: 14px;">
          <div class="form-group">
            <label>Company Name *</label>
            <input type="text" id="m-client-company" required>
          </div>
          <div class="form-group">
            <label>Contact Name *</label>
            <input type="text" id="m-client-contact" required>
          </div>
          <div class="form-group">
            <label>Email Address *</label>
            <input type="email" id="m-client-email" required>
          </div>
          <div class="form-group">
            <label>Phone Number</label>
            <input type="text" id="m-client-phone">
          </div>
          <div class="form-group">
            <label>Assigned Representative</label>
            <select id="m-client-salesperson">
              <!-- Populate dynamically -->
            </select>
          </div>
          <div class="form-group">
            <label>Buyer Type</label>
            <select id="m-client-buyer-type">
              <option value="">Select Buyer Type...</option>
              <option value="Florist">Florist</option>
              <option value="Event/Wedding Planner">Event/Wedding Planner</option>
              <option value="Hotel (Boutique)">Hotel (Boutique)</option>
              <option value="Supermarket">Supermarket</option>
              <option value="Wholesaler/competitor">Wholesaler/competitor</option>
            </select>
          </div>
          <div class="form-group">
            <label>Lead Status</label>
            <select id="m-client-lead-status">
              <option value="New lead">New lead</option>
              <option value="Contacted">Contacted</option>
              <option value="Qualified">Qualified</option>
              <option value="Proposal">Proposal</option>
              <option value="Won">Won</option>
              <option value="Lost">Lost</option>
            </select>
          </div>
          <div class="form-group">
            <label>Website</label>
            <input type="text" id="m-client-website" placeholder="https://example.com">
          </div>
          <div class="form-group">
            <label>Next Follow-Up Date</label>
            <input type="date" id="m-client-next-followup">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-secondary" type="button" onclick="toggleModal('client', false)">Cancel</button>
          <button class="btn-primary" type="submit">Create Profile</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 2. ADD / EDIT USER MODAL -->
  <div class="modal-backdrop" id="modal-user-backdrop">
    <div class="modal-container">
      <div class="modal-header">
        <h3 id="m-user-title">Add User Account</h3>
        <button class="modal-close-btn" onclick="toggleModal('user', false)">
          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>
      <form id="user-form" onsubmit="submitUserForm(event)">
        <input type="hidden" id="m-user-id">
        <div class="modal-body" style="display: flex; flex-direction: column; gap: 14px;">
          <div class="form-group">
            <label>Full Name *</label>
            <input type="text" id="m-user-name" required>
          </div>
          <div class="form-group">
            <label>Email Address *</label>
            <input type="email" id="m-user-email" required>
          </div>
          <div class="form-group">
            <label>CRM Access Passcode *</label>
            <input type="text" id="m-user-passcode" required placeholder="Numeric e.g. 1234">
          </div>
          <div class="form-group">
            <label>Role</label>
            <select id="m-user-role">
              <option value="Agent">Sales Agent</option>
              <option value="Admin">Administrator</option>
            </select>
          </div>
          <div class="form-group">
            <label>Phone Number (US / Fallback)</label>
            <input type="text" id="m-user-phone" placeholder="e.g. +1 (832) 510-1997">
          </div>
          <div class="form-group">
            <label>WhatsApp Number (ECU / Direct)</label>
            <input type="text" id="m-user-whatsapp" placeholder="e.g. 593988636402">
          </div>
          <div class="form-group" style="flex-direction: row; align-items: center; gap: 10px;">
            <input type="checkbox" id="m-user-active" checked>
            <label for="m-user-active">User Account is Active</label>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-secondary" type="button" onclick="toggleModal('user', false)">Cancel</button>
          <button class="btn-primary" type="submit">Save User</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 3. VIEW ORDER ITEMS / PAYMENTS DIALOG -->
  <div class="modal-backdrop" id="modal-order-backdrop">
    <div class="modal-container" style="width: 825px; max-width: 95vw;">
      <div class="modal-header" style="padding-bottom: 0px; border-bottom: 1px solid var(--border-card); margin-bottom: 15px;">
        <div style="display: flex; flex-direction: column; width: 100%;">
          <div style="display: flex; justify-content: space-between; width: 100%; align-items: center; margin-bottom: 15px;">
            <h3 id="m-order-title" style="font-size: 22px; color: var(--text-primary); display: flex; align-items: center; gap: 10px;">Order Details</h3>
            <button class="modal-close-btn" onclick="toggleModal('order', false)">
              <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
            </button>
          </div>
          <div style="display: flex; gap: 24px;">
            <button id="tab-btn-order-details" style="background: none; border: none; border-bottom: 2px solid var(--primary); padding-bottom: 8px; font-weight: 600; color: var(--primary); cursor: pointer; font-size: 14px;" onclick="switchOrderTab('details')">Order Details</button>
            <button id="tab-btn-order-sla" style="background: none; border: none; padding-bottom: 8px; font-weight: 600; color: var(--text-secondary); cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent;" onclick="switchOrderTab('sla')">SLA Timeline & Quality Control</button>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <!-- TAB 1: ORDER DETAILS -->
        <div id="order-tab-details" style="display: block;">
          <div style="background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-card); border-radius: 8px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 14px; margin-bottom: 24px;">
            <div><strong style="color: var(--text-secondary)">Client Name:</strong> <span id="m-order-client-id" style="color: var(--text-primary); font-weight: 500;">-</span></div>
            <div><strong style="color: var(--text-secondary)">Order ID:</strong> <span id="m-order-raw-id" style="color: var(--text-primary); font-weight: 600; font-family: monospace; cursor: pointer; text-decoration: underline;" title="Click to copy" onclick="navigator.clipboard.writeText(this.textContent); showToast('success', 'Order ID copied!');">-</span></div>
            <div style="display: flex; align-items: center; gap: 8px;">
              <strong style="color: var(--text-secondary)">Delivery Date:</strong>
              <span id="m-order-date" style="color: var(--text-primary); font-weight: 500;">-</span>
              <input type="date" id="m-order-date-picker" style="display: none; padding: 4px 8px; font-size: 13px;" />
              <style>
                #m-order-date-picker {
                  background: rgba(16, 185, 129, 0.08) !important;
                  border: 1px solid rgba(16, 185, 129, 0.4) !important;
                  color: #34d399 !important;
                  font-weight: 600;
                  cursor: pointer;
                  border-radius: 6px;
                  font-family: inherit;
                  outline: none;
                  transition: all 0.2s;
                }
                #m-order-date-picker:hover, #m-order-date-picker:focus {
                  border-color: var(--primary-hover) !important;
                  box-shadow: 0 0 0 3px var(--primary-glow) !important;
                  background: rgba(16, 185, 129, 0.15) !important;
                }
                #m-order-date-picker::-webkit-calendar-picker-indicator {
                  filter: invert(71%) sepia(85%) saturate(362%) hue-rotate(106deg) brightness(97%) contrast(92%) !important;
                  cursor: pointer;
                }
              </style>
            </div>
            <div><strong style="color: var(--text-secondary)">Incoterms:</strong> <span id="m-order-incoterm" style="color: var(--text-primary); font-weight: 500;">-</span></div>
            <div style="display: flex; align-items: center; gap: 8px;">
              <strong style="color: var(--text-secondary)">Status:</strong> 
              <span id="m-order-status" class="badge badge-primary">-</span>
            </div>
          </div>
        
        <h4 style="font-size: 13px; font-weight: 600; margin-bottom: 8px;">Order Items Breakdown</h4>
        <div id="m-order-items-container">
          <!-- Table dynamically injected -->
        </div>

        <div style="margin-top: 20px; border-top: 1px solid var(--border-card); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 14px;">
          <div style="display: flex; justify-content: space-between;">
            <span>Standard Margin Base:</span>
            <span id="m-order-standard-total">$0.00</span>
          </div>
          <div style="display: flex; justify-content: space-between; color: var(--primary);" id="m-order-discount-row">
            <span>Manual Discount / Override:</span>
            <span id="m-order-discount-amount">-$0.00</span>
          </div>
          <div style="display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; border-top: 1px dashed var(--border-card); padding-top: 8px;">
            <span>Grand Total Client Price:</span>
            <span style="display: flex; align-items: center; gap: 6px;">
              <span id="m-order-grand-total">$0.00</span>
              <button id="btn-edit-order-totals" class="btn-icon-sourcing" onclick="event.stopPropagation(); openOverridePopup()" title="Override Pricing Totals" style="padding: 2px; margin-left: 2px;">
                <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.07,6.19L3,17.25Z"/></svg>
              </button>
            </span>
          </div>
          <div id="m-order-confirmed-row" style="display: flex; justify-content: space-between; font-size: 14px; color: var(--text-secondary); margin-top: 4px;">
            <span>Total Payments Confirmed (client):</span>
            <span id="m-order-total-confirmed">$0.00</span>
          </div>
          <div id="m-order-paid-row" style="display: flex; justify-content: space-between; font-size: 14px; color: var(--text-secondary); margin-top: 4px;">
            <span>Total Payments Verified (bank):</span>
            <span id="m-order-total-paid">$0.00</span>
          </div>
          <div id="m-order-balance-row" style="display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; border-top: 1px dashed var(--border-card); padding-top: 6px; margin-top: 4px; color: #ef4444;">
            <span>Outstanding Balance:</span>
            <span id="m-order-outstanding-balance">$0.00</span>
          </div>
          <div id="m-order-payments-list-container" style="margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-card); display:none;">
            <h5 style="margin: 0 0 8px 0; font-size: 13px; font-weight: 600; color: var(--text-primary);">Payments Ledger Detail</h5>
            <div id="m-order-payments-list-items" style="display: flex; flex-direction: column; gap: 8px; max-height: 150px; overflow-y: auto; padding-right: 4px;"></div>
          </div>
          <!-- Staff Only Costing Breakdown Accordion -->
          <div id="m-order-costing-container" style="margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-card); display: none;">
            <div style="display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none;" onclick="toggleCostingBreakdown()">
              <h5 style="margin: 0; font-size: 13px; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 6px;">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" id="m-order-costing-chevron" style="transform: rotate(0deg); transition: transform 0.2s;"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>
                Internal Costing Breakdown (Staff Only)
              </h5>
              <span style="font-size: 11px; color: var(--text-secondary); background: rgba(74, 106, 74, 0.1); padding: 2px 6px; border-radius: 4px; font-weight: 500;">Secure</span>
            </div>
            <div id="m-order-costing-details" style="display: none; margin-top: 10px; padding: 10px; background: rgba(0,0,0,0.02); border-radius: 6px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); border: 1px solid var(--border-card);">
              <!-- Details dynamically injected -->
            </div>
          </div>
        </div>
        </div> <!-- End Tab 1 -->

        <!-- TAB 2: SLA TIMELINE & QUALITY CONTROL -->
        <div id="order-tab-sla" style="display: none;">
          <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary);">Order Lifecycle (SLA)</h4>
          <div id="sla-timeline-container" style="background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 8px; padding: 16px; font-size: 13px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 12px;">
            <!-- Rendered via JS -->
          </div>
          
          <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary);">Post-Delivery Quality Control</h4>
          <div style="background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 8px; padding: 16px;">
            <div class="form-group" style="margin-bottom: 12px;">
              <label>Quality Status</label>
              <select id="qc-status-select" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-input); background: var(--bg-input); color: var(--text-primary);">
                <option value="Pending">Pending Evaluation</option>
                <option value="Satisfactory">Satisfactory (No Issues)</option>
                <option value="Issues Reported">Issues Reported (Claims)</option>
              </select>
            </div>
            <div class="form-group" style="margin-bottom: 12px;">
              <label>QC Notes / Claim Description</label>
              <textarea id="qc-notes-text" rows="3" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-input); background: var(--bg-input); color: var(--text-primary);" placeholder="e.g. 3 boxes of Novia arrived with botrytis..."></textarea>
            </div>
            <div style="display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px;">
              <button class="btn-secondary" onclick="generateQcEmail()">Generate Claim Email</button>
              <button class="btn-primary" onclick="saveQcLog()">Save QC Log</button>
            </div>
          </div>
        </div> <!-- End Tab 2 -->

      </div>

      <div class="modal-footer" id="m-order-actions-footer">
        <!-- Render actions buttons dynamically -->
      </div>
    </div>
  </div>

  <!-- 4. ACCOUNTING / PAYMENT REGISTRY MODAL -->
  <div class="modal-backdrop" id="modal-payregistry-backdrop">
    <div class="modal-container">
      <div class="modal-header">
        <h3 id="m-pay-title">Verify & Register Payment</h3>
        <button class="modal-close-btn" onclick="toggleModal('payregistry', false)">
          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>
      <form id="payment-verify-form" onsubmit="submitVerifyPayment(event)">
        <input type="hidden" id="m-pay-order-id">
        <input type="hidden" id="m-pay-mode" value="verify">
        <div class="modal-body" style="display: flex; flex-direction: column; gap: 14px;">
          <div id="m-pay-body-content" style="display: flex; flex-direction: column; gap: 14px;">
            <!-- Rendered dynamically -->
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-secondary" type="button" onclick="toggleModal('payregistry', false)">Cancel</button>
          <button class="btn-primary" type="submit" id="m-pay-submit-btn">Verify Funds</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 4b. SOURCED ITEM PRICE REGISTER MODAL -->
  <div class="modal-backdrop" id="modal-sourcing-backdrop">
    <div class="modal-container" style="max-width: 400px;">
      <div class="modal-header">
        <h3 id="m-sourcing-title">Register Supplier & Price</h3>
        <button class="modal-close-btn" onclick="toggleModal('sourcing', false)">
          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>
      <form id="sourcing-form" onsubmit="submitSourcingUpdate(event)">
        <input type="hidden" id="m-sourcing-index">
        <div class="modal-body" style="display: flex; flex-direction: column; gap: 14px;">
          <div class="form-group">
            <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary);">Supplier (Farm Name) *</label>
            <input type="text" id="m-sourcing-supplier" placeholder="e.g. BellaRosa, Nevado" required style="width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-card); background: var(--bg-app); color: var(--text-primary);">
          </div>
          <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px;">
            <div>
              <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary);">Price per Stem ($ USD) *</label>
              <input type="number" step="0.001" min="0.01" id="m-sourcing-price" placeholder="e.g. 0.45" required style="width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-card); background: var(--bg-app); color: var(--text-primary);">
            </div>
            <div>
              <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary);">Boxes *</label>
              <input type="number" step="1" min="1" id="m-sourcing-boxes" placeholder="e.g. 2" required style="width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-card); background: var(--bg-app); color: var(--text-primary);">
            </div>
          </div>
          <div class="form-group" style="display: flex; align-items: center; gap: 8px;">
            <input type="checkbox" id="m-sourcing-confirm" style="width: 16px; height: 16px; accent-color: var(--primary);">
            <label for="m-sourcing-confirm" style="font-size: 13px; color: var(--text-primary); cursor: pointer;">Confirm Availability (Remove TBC mark)</label>
          </div>
          <div id="m-sourcing-warning" style="display: none; font-size: 12px; color: #f59e0b; margin-top: -6px; margin-bottom: 6px; font-weight: 500; font-style: italic;">
            &#9888;&#65039; Suggested from inventory failsafe calculations. Please verify.
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-secondary" onclick="toggleModal('sourcing', false)">Cancel</button>
          <button type="submit" class="btn-primary">Save Sourcing Quote</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 4c. PRICING OVERRIDE MODAL -->
  <div class="modal-backdrop" id="modal-override-backdrop">
    <div class="modal-container" style="max-width: 350px;">
      <div class="modal-header">
        <h3>Override Pricing Totals</h3>
        <button class="modal-close-btn" onclick="toggleModal('override', false)">
          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>
      <form id="override-form" onsubmit="submitPricingOverride(event)">
        <div class="modal-body" style="display: flex; flex-direction: column; gap: 14px;">
          <div class="form-group">
            <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary);">Standard Subtotal ($) *</label>
            <input type="number" step="0.01" id="m-override-subtotal" required style="width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-card); background: var(--bg-app); color: var(--text-primary);" oninput="recalcOverrideTotal()">
          </div>
          <div class="form-group">
            <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary);">Discount Amount ($) *</label>
            <input type="number" step="0.01" id="m-override-discount" required style="width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-card); background: var(--bg-app); color: var(--text-primary);" oninput="recalcOverrideTotal()">
          </div>
          <div class="form-group">
            <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary);">Grand Total ($) *</label>
            <input type="number" step="0.01" id="m-override-grand" required style="width: 100%; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-card); background: var(--bg-app); color: var(--text-primary);">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-secondary" onclick="toggleModal('override', false)">Cancel</button>
          <button type="submit" class="btn-primary">Apply Overrides</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 5. CARGO / LOGISTICS UPDATE MODAL -->
  <div class="modal-backdrop" id="modal-logupdate-backdrop">
    <div class="modal-container">
      <div class="modal-header">
        <h3>Update FOB Logistics Status</h3>
        <button class="modal-close-btn" onclick="toggleModal('logupdate', false)">
          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>
      <form id="logistics-update-form" onsubmit="submitLogisticsUpdate(event)">
        <input type="hidden" id="m-log-order-id">
        <div class="modal-body" style="display: flex; flex-direction: column; gap: 14px;">
          <div class="form-group">
            <label>Airway Bill Number (AWB)</label>
            <input type="text" id="m-log-awb" placeholder="e.g. 157-872615">
          </div>
          <div class="form-group">
            <label>Carrier Airline</label>
            <input type="text" id="m-log-carrier" placeholder="e.g. LATAM Cargo">
          </div>
          <div class="form-group">
            <label>Origin Airport Warehouse</label>
            <select id="m-log-origin">
              <option value="Quito">Quito Airport Warehouse</option>
              <option value="Bogota">Bogota Airport Warehouse</option>
              <option value="Medellin">Medellin Airport Warehouse</option>
            </select>
          </div>
          <div class="form-group">
            <label>Current Transit Checkpoint</label>
            <select id="m-log-checkpoint">
              <option value="Origin Warehouse">Origin Warehouse (Confirmed)</option>
              <option value="In Flight">In Flight (Departed)</option>
              <option value="MIA Customs">MIA Customs Release</option>
              <option value="MIA Warehouse">Arrived in Miami Warehouse</option>
              <option value="Delivered">Delivered to Final destination</option>
            </select>
          </div>
          <div class="form-group">
            <label>Destination & Transit Notes</label>
            <textarea id="m-log-notes" rows="2" placeholder="e.g. Cleared customs, scheduling local courier..."></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-secondary" type="button" onclick="toggleModal('logupdate', false)">Cancel</button>
          <button class="btn-primary" type="submit">Update Checkpoint</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 6. EMAIL PREVIEW & EDITOR MODAL -->
  <div class="modal-backdrop" id="modal-email-backdrop">
    <div class="modal-container" style="width: 910px; max-width: 95vw; background: #0f172a; border: 1px solid var(--border-card-active); border-radius: 16px; max-height: 90vh; display: flex; flex-direction: column;">
      <div class="modal-header" style="flex-shrink: 0;">
        <h3>Approve & Edit Email Quote</h3>
        <button class="modal-close-btn" onclick="toggleModal('email', false)">
          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>
      <form id="email-quote-send-form" onsubmit="submitSendQuote(event)" style="display: flex; flex-direction: column; flex: 1; overflow: hidden;">
        <div class="modal-body" style="display: flex; flex-direction: column; gap: 14px; padding: 20px 24px; overflow-y: auto; flex: 1;">
          <div class="form-group">
            <label>Recipient Client Email *</label>
            <input type="email" id="m-email-recipient" required style="width: 100%; padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-card); border-radius: 8px; color: var(--text-primary);">
          </div>
          <div class="form-group" id="outreach-template-selector-group" style="display: none;">
            <label>Outreach Template</label>
            <select id="m-outreach-template" onchange="handleOutreachTemplateChange()" style="width: 100%; padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-card); border-radius: 8px; color: var(--text-primary); margin-bottom: 5px;">
              <option value="standard" style="background: #1e293b; color: white;">Standard Outreach (Farm Availability)</option>
              <option value="promo" style="background: #1e293b; color: white;">Miami Promos Outreach</option>
            </select>
          </div>
          <div class="form-group">
            <label>Subject Line *</label>
            <input type="text" id="m-email-subject" required style="width: 100%; padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-card); border-radius: 8px; color: var(--text-primary);">
          </div>
          
          <!-- Visual Email Editor -->
          <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; margin-top: 10px;">
            <label>Email Body (Visual Edit) *</label>
            
            <!-- WYSIWYG Toolbar -->
            <div class="wysiwyg-toolbar" style="display: flex; gap: 4px; padding: 8px; background: #1e293b; border: 1px solid var(--border-card); border-bottom: none; border-top-left-radius: 8px; border-top-right-radius: 8px; align-items: center;">
              <button type="button" onclick="execEditorCommand('bold')" class="editor-btn" title="Bold">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M12.5,6.5H10V9.5H12.5A1.5,1.5 0 0,1 14,8A1.5,1.5 0 0,1 12.5,6.5M8,4H13.5A3.5,3.5 0 0,1 17,7.5A3.5,3.5 0 0,1 15.5,10.5C16.4,11.2 17,12.3 17,13.5A3.5,3.5 0 0,1 13.5,17H8V4Z"/></svg>
              </button>
              <button type="button" onclick="execEditorCommand('italic')" class="editor-btn" title="Italic">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z"/></svg>
              </button>
              <button type="button" onclick="execEditorCommand('underline')" class="editor-btn" title="Underline">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M5,21H19V19H5V21M12,17A6,6 0 0,0 18,11V3H15.5V11A3.5,3.5 0 0,1 12,14.5A3.5,3.5 0 0,1 8.5,11V3H6V11A6,6 0 0,0 12,17Z"/></svg>
              </button>
              <div style="width: 1px; height: 20px; background: var(--border-card); margin: 0 6px;"></div>
              <button type="button" onclick="execEditorCommand('insertUnorderedList')" class="editor-btn" title="Bullet List">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7,5H21V7H7V5M7,11H21V13H7V11M7,17H21V19H7V17M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z"/></svg>
              </button>
              <button type="button" onclick="execEditorCommand('insertOrderedList')" class="editor-btn" title="Numbered List">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M2,5.5V8H4V7H3V6H4V5H2V5.5M2,10.5H3.5L2,12.5V13H5V12H3.5L5,10V9.5H2V10.5M3.5,17.5L2,16V15.5H5V16.5H3.5L5,18V18.5H2V17.5H3.5M7,5H21V7H7V5M7,11H21V13H7V11M7,17H21V19H7V17Z"/></svg>
              </button>
              <div style="width: 1px; height: 20px; background: var(--border-card); margin: 0 6px;"></div>
              <input type="color" oninput="execEditorCommand('foreColor', this.value)" style="border: none; background: transparent; width: 26px; height: 26px; cursor: pointer; padding: 0;" title="Text Color">
              <select onchange="execEditorCommand('fontSize', this.value)" style="background: rgba(255,255,255,0.05); border: 1px solid var(--border-card); color: var(--text-primary); border-radius: 4px; padding: 2px 6px; font-size: 12px; outline: none;">
                <option value="1" style="background: #1e293b; color: white;">Small</option>
                <option value="3" style="background: #1e293b; color: white;" selected>Normal</option>
                <option value="5" style="background: #1e293b; color: white;">Large</option>
                <option value="7" style="background: #1e293b; color: white;">Huge</option>
              </select>
              <div style="width: 1px; height: 20px; background: var(--border-card); margin: 0 6px;"></div>
              <button type="button" onclick="execEditorCommand('removeFormat')" class="editor-btn" title="Clear Formatting">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6,2V5H8.21L5.79,10.74L8.71,10.14L10.36,6.29L14.79,16.71L12.79,17.21L11.54,14.21L8.54,15.21L9.79,18.21L6.79,19.21L4.29,13.21L1.29,14.21L2.79,17.71L1,18.29V21H4V22H20V21H23V18.29L21.21,17.71L18.79,11.71L21.79,10.71L18.79,3.71L16.29,4.29L17.79,7.79L15,8.57V2H6M10,2V5H14.79L11.54,7.21L8.54,8.21L10,2M16,15.5H19V18.5H16V15.5Z"/></svg>
              </button>
            </div>
            
            <!-- Editor Canvas -->
            <div id="m-email-visual-body" contenteditable="true" style="background: white; color: #333; padding: 25px; min-height: 220px; max-height: 400px; overflow-y: auto; border: 1px solid var(--border-card); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; outline: none; font-family: Arial, sans-serif; font-size: 14px; text-align: left; line-height: 1.5;"></div>
          </div>
        </div>
        <div class="modal-footer" style="padding: 16px 24px; border-top: 1px solid var(--border-card); display: flex; justify-content: flex-end; gap: 12px; background: rgba(0,0,0,0.1); flex-shrink: 0;">
          <button class="btn-secondary" type="button" onclick="toggleModal('email', false)">Cancel</button>
          <button class="btn-primary" type="submit" id="btn-email-send">Send Quote Email</button>
        </div>
      </form>
    </div>
  </div>

  </div>

  <!-- 6.5 BULK EMAIL MODAL -->
  <div class="modal-backdrop" id="modal-bulk-email-backdrop">
    <div class="modal-container" style="width: 910px; max-width: 95vw; background: #0f172a; border: 1px solid var(--border-card-active); border-radius: 16px; max-height: 90vh; display: flex; flex-direction: column;">
      <div class="modal-header" style="flex-shrink: 0;">
        <h3>Approve & Send Bulk Outreach</h3>
        <button class="modal-close-btn" onclick="toggleModal('bulk-email', false)">
          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>
      <form id="bulk-email-form" onsubmit="submitBulkOutreach(event)" style="display: flex; flex-direction: column; overflow: hidden;">
        <div class="modal-body" style="overflow-y: auto; padding: 24px; flex-grow: 1;">
          
          <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 8px; padding: 16px; margin-bottom: 20px;">
            <div style="font-weight: 600; color: var(--accent-emerald); font-size: 14px; margin-bottom: 4px;">Bulk Outreach Campaign</div>
            <div style="color: rgba(255,255,255,0.7); font-size: 13px;" id="bulk-email-summary">Sending to X clients</div>
          </div>

          <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 8px; padding: 12px; margin-bottom: 20px; font-size: 13px; color: rgba(255,255,255,0.8);">
            <strong>Dynamic Tags:</strong> You can use <code>[Company Name]</code> and <code>[Contact Name]</code> in the subject or body to personalize each email. The system will automatically replace these tags per client.
          </div>

          <div class="form-group" style="margin-bottom: 20px;">
            <label style="color: #94a3b8;">Outreach Template</label>
            <select id="m-bulk-outreach-template" onchange="handleBulkOutreachTemplateChange()" style="width: 100%; padding: 12px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-card); border-radius: 6px; color: white; font-size: 14px;">
              <option value="none">-- Select Template (Optional) --</option>
              <option value="standard">Standard Outreach (Farm Availability)</option>
              <option value="promo">Miami Promos Outreach</option>
            </select>
          </div>

          <div class="form-group" style="margin-bottom: 20px;">
            <label style="color: #94a3b8;">Subject Line</label>
            <input type="text" id="m-bulk-email-subject" required style="width: 100%; padding: 12px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-card); border-radius: 6px; color: white; font-size: 14px;" placeholder="e.g. Special offer for [Company Name]">
          </div>
          
          <div class="form-group">
            <label style="color: #94a3b8; display: flex; justify-content: space-between;">
              <span>Email Body Editor</span>
            </label>
            
            <!-- WYSIWYG Toolbar -->
            <div class="wysiwyg-toolbar" style="display: flex; gap: 4px; padding: 8px; background: #1e293b; border: 1px solid var(--border-card); border-bottom: none; border-top-left-radius: 8px; border-top-right-radius: 8px; align-items: center;">
              <button type="button" onclick="execBulkEditorCommand('bold')" class="editor-btn bulk-editor-btn" title="Bold">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M12.5,6.5H10V9.5H12.5A1.5,1.5 0 0,1 14,8A1.5,1.5 0 0,1 12.5,6.5M8,4H13.5A3.5,3.5 0 0,1 17,7.5A3.5,3.5 0 0,1 15.5,10.5C16.4,11.2 17,12.3 17,13.5A3.5,3.5 0 0,1 13.5,17H8V4Z"/></svg>
              </button>
              <button type="button" onclick="execBulkEditorCommand('italic')" class="editor-btn bulk-editor-btn" title="Italic">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10,4V7H12.21L8.79,15H6V18H14V15H11.79L15.21,7H18V4H10Z"/></svg>
              </button>
              <button type="button" onclick="execBulkEditorCommand('underline')" class="editor-btn bulk-editor-btn" title="Underline">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M5,21H19V19H5V21M12,17A6,6 0 0,0 18,11V3H15.5V11A3.5,3.5 0 0,1 12,14.5A3.5,3.5 0 0,1 8.5,11V3H6V11A6,6 0 0,0 12,17Z"/></svg>
              </button>
              <div style="width: 1px; height: 20px; background: var(--border-card); margin: 0 6px;"></div>
              <button type="button" onclick="execBulkEditorCommand('insertUnorderedList')" class="editor-btn bulk-editor-btn" title="Bullet List">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M7,5H21V7H7V5M7,11H21V13H7V11M7,17H21V19H7V17M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z"/></svg>
              </button>
              <button type="button" onclick="execBulkEditorCommand('insertOrderedList')" class="editor-btn bulk-editor-btn" title="Numbered List">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M2,5.5V8H4V7H3V6H4V5H2V5.5M2,10.5H3.5L2,12.5V13H5V12H3.5L5,10V9.5H2V10.5M3.5,17.5L2,16V15.5H5V16.5H3.5L5,18V18.5H2V17.5H3.5M7,5H21V7H7V5M7,11H21V13H7V11M7,17H21V19H7V17Z"/></svg>
              </button>
              <div style="width: 1px; height: 20px; background: var(--border-card); margin: 0 6px;"></div>
              <input type="color" oninput="execBulkEditorCommand('foreColor', this.value)" style="border: none; background: transparent; width: 26px; height: 26px; cursor: pointer; padding: 0;" title="Text Color">
              <select onchange="execBulkEditorCommand('fontSize', this.value)" style="background: rgba(255,255,255,0.05); border: 1px solid var(--border-card); color: var(--text-primary); border-radius: 4px; padding: 2px 6px; font-size: 12px; outline: none;">
                <option value="1" style="background: #1e293b; color: white;">Small</option>
                <option value="3" style="background: #1e293b; color: white;" selected>Normal</option>
                <option value="5" style="background: #1e293b; color: white;">Large</option>
                <option value="7" style="background: #1e293b; color: white;">Huge</option>
              </select>
              <div style="width: 1px; height: 20px; background: var(--border-card); margin: 0 6px;"></div>
              <button type="button" onclick="execBulkEditorCommand('removeFormat')" class="editor-btn bulk-editor-btn" title="Clear Formatting">
                <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6,2V5H8.21L5.79,10.74L8.71,10.14L10.36,6.29L14.79,16.71L12.79,17.21L11.54,14.21L8.54,15.21L9.79,18.21L6.79,19.21L4.29,13.21L1.29,14.21L2.79,17.71L1,18.29V21H4V22H20V21H23V18.29L21.21,17.71L18.79,11.71L21.79,10.71L18.79,3.71L16.29,4.29L17.79,7.79L15,8.57V2H6M10,2V5H14.79L11.54,7.21L8.54,8.21L10,2M16,15.5H19V18.5H16V15.5Z"/></svg>
              </button>
            </div>
            
            <!-- Editor Canvas -->
            <div id="m-bulk-email-visual-body" contenteditable="true" style="background: white; color: #333; padding: 25px; min-height: 220px; max-height: 400px; overflow-y: auto; border: 1px solid var(--border-card); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; outline: none; font-family: Arial, sans-serif; font-size: 14px; text-align: left; line-height: 1.5;"></div>
          </div>
        </div>
        <div class="modal-footer" style="padding: 16px 24px; border-top: 1px solid var(--border-card); display: flex; justify-content: flex-end; gap: 12px; background: rgba(0,0,0,0.1); flex-shrink: 0;">
          <button class="btn-secondary" type="button" onclick="toggleModal('bulk-email', false)">Cancel</button>
          <button class="btn-primary" type="submit" id="btn-bulk-email-send" style="background: var(--accent-indigo); color: white; border: none;">Send Bulk Outreach</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 7. AUTOMATED QUOTE BUILDER MODAL -->
  <div class="modal-backdrop" id="modal-quotebuilder-backdrop">
    <div class="modal-container" style="width: 800px; max-width: 95vw; background: #0f172a; border: 1px solid var(--border-card-active); border-radius: 16px; max-height: 90vh; display: flex; flex-direction: column;">
      <div class="modal-header">
        <h3 style="font-size: 18px; font-weight: 600; color: #fff; margin: 0; display: flex; align-items: center; gap: 8px;">
          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="var(--accent-emerald)" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M12 11V14H9V16H12V19H14V16H17V14H14V11H12Z"/></svg>
          Automated Quote Builder
        </h3>
        <button class="modal-close" onclick="closeQuoteBuilder()" type="button" style="background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer;">&times;</button>
      </div>
      
      <div class="modal-body" style="overflow-y: auto; padding: 20px;">
        <form id="quote-builder-form" onsubmit="submitQuoteBuilder(event)">
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;">
            <!-- Client Details -->
            <div style="background: var(--bg-main); padding: 16px; border-radius: 12px; border: 1px solid var(--border-card);">
              <h4 style="margin: 0 0 12px 0; font-size: 14px; color: var(--text-muted); text-transform: uppercase;">Client Details</h4>
              <div class="form-group">
                <label>Company Name *</label>
                <input type="text" id="qb-company" required style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-card); background: rgba(255,255,255,0.05); color: #fff;" placeholder="e.g. Acme Florals">
              </div>
              <div class="form-group">
                <label>Contact Name *</label>
                <input type="text" id="qb-contact" required style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-card); background: rgba(255,255,255,0.05); color: #fff;" placeholder="e.g. Jane Doe">
              </div>
              <div class="form-group">
                <label>Email *</label>
                <input type="email" id="qb-email" required style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-card); background: rgba(255,255,255,0.05); color: #fff;" placeholder="name@domain.com">
              </div>
              <div class="form-group">
                <label>Phone</label>
                <input type="text" id="qb-phone" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-card); background: rgba(255,255,255,0.05); color: #fff;" placeholder="Optional">
              </div>
            </div>
            
            <!-- Logistics -->
            <div style="background: var(--bg-main); padding: 16px; border-radius: 12px; border: 1px solid var(--border-card);">
              <h4 style="margin: 0 0 12px 0; font-size: 14px; color: var(--text-muted); text-transform: uppercase;">Logistics</h4>
              <div class="form-group">
                <label>Incoterms / Delivery terms *</label>
                <select id="qb-incoterm" required onchange="renderQuoteBuilderInventory()" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-card); background: rgba(255,255,255,0.05); color: #fff;">
                  <option value="CIF MIA">FOB Miami (Delivered to Miami)</option>
                  <option value="FOB">FOB (Farm / Quito Airport)</option>
                </select>
              </div>
              <div class="form-group">
                <label>Select Date *</label>
                <input type="date" id="qb-date" onchange="renderQuoteBuilderInventory()" required style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-card); background: rgba(255,255,255,0.05); color: #fff; color-scheme: dark;">
              </div>
            </div>
          </div>
          
          <!-- Inventory Selection -->
          <div style="background: var(--bg-main); padding: 16px; border-radius: 12px; border: 1px solid var(--border-card);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
              <h4 style="margin: 0; font-size: 14px; color: var(--text-muted); text-transform: uppercase;">Live Inventory Selection</h4>
              <input type="text" id="qb-search" placeholder="Search variety or color..." style="width: 250px; padding: 6px 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-card-active); color: #fff; border-radius: 6px; font-size: 13px;" oninput="renderQuoteBuilderInventory()">
            </div>
            
            <div class="table-container" style="max-height: 250px; overflow-y: auto; border: 1px solid var(--border-card); border-radius: 8px;">
              <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
                <thead style="background: #1e293b; position: sticky; top: 0; z-index: 10;">
                  <tr>
                    <th style="padding: 10px; text-align: left; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border-card);">Variety</th>
                    <th style="padding: 10px; text-align: left; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border-card);">Supplier</th>
                    <th style="padding: 10px; text-align: left; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border-card);">Color</th>
                    <th style="padding: 10px; text-align: center; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border-card);">Stem</th>
                    <th style="padding: 10px; text-align: center; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border-card);">Available</th>
                    <th style="padding: 10px; text-align: right; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border-card);">Preview Price</th>
                    <th style="padding: 10px; text-align: center; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border-card); width: 100px;">Boxes Qty</th>
                  </tr>
                </thead>
                <tbody id="qb-inventory-table-body">
                  <!-- Rendered via JS -->
                </tbody>
              </table>
            </div>
            <div id="qb-totals" style="text-align: right; margin-top: 12px; font-weight: 600; color: #fff; font-size: 15px;">Total Selected: 0 boxes</div>
          </div>
          
          <div style="display: flex; gap: 12px; margin-top: 24px; border-top: 1px solid var(--border-card); padding-top: 20px;">
            <button class="btn-primary" type="submit" id="btn-submit-qb" style="background: #10b981; color: white; border: 1px solid #10b981; flex: 1; justify-content: center; font-size: 15px; padding: 10px; font-weight: bold;">Generate & Send Automated Quote</button>
            <button class="btn-secondary" type="button" onclick="closeQuoteBuilder()" style="padding: 10px 20px; background: #334155; color: white; border: 1px solid #475569; font-weight: bold;">Cancel</button>
          </div>
        </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 8. LINE ITEM EDITOR MODAL -->
  <style>
    .line-item-table th, .line-item-table td { padding: 8px 6px !important; }
    .line-item-table input { padding: 6px 8px !important; font-size: 13px; width: 100%; box-sizing: border-box; margin: 0; background: rgba(0,0,0,0.2) !important; border-color: rgba(255,255,255,0.1) !important; }
  </style>
  <div class="modal-backdrop" id="modal-lineItemEditor-backdrop">
    <div class="modal-container" style="width: 800px; max-width: 95vw;">
      <div class="modal-header">
        <h3 id="m-line-item-title">Edit Order</h3>
        <button class="modal-close-btn" onclick="toggleModal('lineItemEditor', false)">
          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/></svg>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="m-line-item-order-id">
        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
          <table class="data-table line-item-table" id="line-item-edit-table">
            <thead>
              <tr>
                <th style="text-align:left;">Variety / Spec</th>
                <th style="width: 80px; text-align:center;">Stem (cm)</th>
                <th style="text-align:left;">Supplier</th>
                <th style="width: 80px; text-align:center;">Boxes</th>
                <th style="width: 80px; text-align:center;">Total Stems</th>
                <th style="width: 100px; text-align:right;">Price/Stem</th>
                <th style="width: 90px; text-align:right;">Subtotal</th>
                <th style="width: 50px; text-align:center;">Action</th>
              </tr>
            </thead>
            <tbody id="line-item-edit-tbody">
              <!-- Populated dynamically -->
            </tbody>
          </table>
        </div>
        <div style="margin-top: 15px; text-align: right;">
          <button type="button" class="btn-secondary" onclick="addLineItemRow()" style="padding: 6px 12px; font-size: 13px;">+ Add Custom Item</button>
        </div>
      </div>
      <div class="modal-footer" style="justify-content: flex-end; gap: 10px; background-color: #f9fbf9; padding-top: 15px;">
        <button class="btn-secondary" onclick="toggleModal('lineItemEditor', false)">Cancel</button>
        <button class="btn-primary" onclick="submitLineItemEdits()">Save & Update Quote</button>
      </div>
    </div>
  </div>

  <!-- Invoice Preview Modal -->
  <div class="modal-backdrop" id="modal-invoice-preview-backdrop">
    <div class="modal-container" style="width: 1000px; max-width: 95vw; background: #0f172a; border: 1px solid var(--border-card-active);">
      <div class="modal-header">
        <h2 id="m-invoice-preview-title">Final Draft: Proforma Invoice Preview</h2>
        <button class="btn-close" onclick="toggleModal('invoice-preview', false)">&times;</button>
      </div>
      <div class="modal-body" style="padding: 0; height: 60vh; background-color: #f1f5f1;">
        <input type="hidden" id="m-invoice-preview-order-id" />
        <iframe id="m-invoice-preview-iframe" style="width: 100%; height: 100%; border: none;"></iframe>
      </div>
      <div style="padding: 15px 20px; background: rgba(255, 255, 255, 0.05); border-top: 1px solid var(--border-card);">
        <label style="font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center;">
          <span>Mercury Payment Link</span>
          <span style="font-size: 12px; font-weight: normal; color: var(--primary);">Universal Order ID: <strong id="m-invoice-preview-order-id-display" style="font-family: monospace; cursor: pointer; text-decoration: underline;" title="Click to copy" onclick="navigator.clipboard.writeText(this.textContent); showToast('success', 'Order ID copied!');">-</strong></span>
        </label>
        <input type="text" id="m-invoice-preview-mercury-link" placeholder="https://mercury.com/pay/..." style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-input); background: var(--bg-input); color: var(--text-primary);">
        <p style="font-size: 11px; color: var(--text-secondary); margin-top: 4px;">Paste the manual link generated from the Mercury dashboard. It will be injected into the Proforma Email.</p>
      </div>
      <div class="modal-footer" style="justify-content: flex-end;">
        <button class="btn-secondary" onclick="toggleModal('invoice-preview', false)">Cancel</button>
        <button class="btn-secondary" onclick="editLineItemsFromPreview()">Edit Line Items</button>
        <button class="btn-primary" onclick="executeInvoiceConfirm()">Confirm & Send Proforma</button>
      </div>
    </div>
  </div>

  <!-- --------------------------------------------------
       F. APPLICATION CORE JAVASCRIPT
       -------------------------------------------------- -->
  <script>
    /**
     * FORMATTING UTILITIES
     */
    function formatCurrency(amount) {
      const num = parseFloat(amount);
      if (isNaN(num)) return "$0.00"; 
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(num);
    }
    
    // Universal Date Standardizer to prevent Google Sheets timezone/format conflicts
    function formatToIsoDate(dateInput) {
      if (!dateInput) return "";
      const str = String(dateInput).trim();
      if (str.indexOf("T") !== -1) return str.split("T")[0];
      if (/^\d{4}-\d{2}-\d{2}$/.test(str)) return str;
      const match = str.match(/^(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})$/);
      if (match) return match[3] + "-" + String(match[1]).padStart(2, '0') + "-" + String(match[2]).padStart(2, '0');
      const d = new Date(str);
      if (!isNaN(d.getTime())) return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, '0') + "-" + String(d.getDate()).padStart(2, '0');
      return str.substring(0, 10);
    }
    function getOrderDisplayId(order) {
      if (!order) return "UNKNOWN";
      if (order["Invoice ID"]) return order["Invoice ID"];
      if (order["Quote ID"]) return order["Quote ID"];
      let displayId = order["Order ID"];
      try {
        const pld = JSON.parse(order["Raw JSON Payload"] || "{}");
        if (pld.invoiceDocumentId) displayId = pld.invoiceDocumentId;
        else if (pld.quoteDocumentId) displayId = pld.quoteDocumentId;
      } catch(e) {}
      return displayId;
    }

    // --- 1. CONFIGURATION & STATE SYSTEM ---
    function getStatusDisplayName(status) {
      if (status === "Invoice Sent") return "Proforma Sent";
      return status;
    }

    const DEFAULT_API_URL = "https://script.google.com/macros/s/AKfycbyvCoLzZpO6NqrYs6LKonZRLAjqeDnpm-WbuVGFVBuunQ-QXA0SOElF-GdFRBMP2vP8/exec";
    
    // Global Application State
    const state = {
      isDemoMode: false,
      apiUrl: localStorage.getItem("avc_crm_api_url") || DEFAULT_API_URL,
      passcode: localStorage.getItem("avc_crm_passcode") || "",
      user: (() => {
        try {
          const u = localStorage.getItem("avc_crm_user");
          return u ? JSON.parse(u) : null;
        } catch (e) {
          console.error("Error parsing user from localStorage:", e);
          return null;
        }
      })(),
      
      // Database tables loaded from sheet or mockup
      clients: [],
      orders: [],
      logistics: [],
      payments: [],
      interactions: [],
      inventory: [],
      users: [],
      
      // UI State
      activeView: "dashboard",
      ordersLayout: "kanban", // kanban or table
      selectedClientId: null,
      drawerTab: "profile",
      enteredPasscode: ""
    };

    // --------------------------------------------------
    // MOCKUP OFFLINE DEMO DATABASE
    // --------------------------------------------------
    const mockDb = {
      clients: [
        { "Client ID": "CLI-ROSESPRING", "Company Name": "Rose & Spring Boutique", "Contact Name": "Emily Watson", "Email": "emily@rosespring.com", "Phone": "+1 (312) 555-8912", "Billing Address": "520 Michigan Ave, Chicago, IL 60611", "Shipping Address": "520 Michigan Ave, Chicago, IL 60611", "Resale Certificate Number": "RES-87612A", "Resale Certificate Link": "https://example.com/resale1.pdf", "Status": "Active Client", "Assigned Salesperson": "USR-ADRIAN", "Created At": "2026-05-10T12:00:00Z" },
        { "Client ID": "CLI-MIAMIPETALS", "Company Name": "Miami Petals Florist", "Contact Name": "Carlos Gomez", "Email": "carlos@miamipetals.com", "Phone": "+1 (305) 555-0144", "Billing Address": "800 Brickell Ave, Miami, FL 33131", "Shipping Address": "800 Brickell Ave, Miami, FL 33131", "Resale Certificate Number": "RES-98172X", "Resale Certificate Link": "", "Status": "Active Client", "Assigned Salesperson": "USR-ADRIAN", "Created At": "2026-05-15T09:30:00Z" },
        { "Client ID": "CLI-NYCBOSS", "Company Name": "NYC Boss Flowers", "Contact Name": "Sarah Connor", "Email": "sarah@nycbossflowers.com", "Phone": "+1 (212) 555-9081", "Billing Address": "100 Broadway, New York, NY 10005", "Shipping Address": "100 Broadway, New York, NY 10005", "Resale Certificate Number": "", "Resale Certificate Link": "", "Status": "Prospect", "Assigned Salesperson": "Unassigned", "Created At": "2026-06-05T15:45:00Z" }
      ],
      orders: [
        { "Order ID": "AVC-8716A", "Client ID": "CLI-ROSESPRING", "Delivery Date": "2026-06-12", "Incoterms": "CIF MIA", "Items Summary": "10x Freedom (60cm)\n15x Explorer (70cm)\n5x Mondial (50cm)", "Standard Total ($)": "1800.00", "Discount Amount ($)": "270.00", "Grand Total ($)": "1530.00", "Order Status": "Firm Order", "Payment Status": "Payment Verified", "Raw JSON Payload": "{}", "Last Updated": "2026-06-07T18:22:00Z" },
        { "Order ID": "AVC-9812A", "Client ID": "CLI-MIAMIPETALS", "Delivery Date": "2026-06-15", "Incoterms": "FOB", "Items Summary": "20x Sweet Escimo (60cm)\n12x White O'Hara (PROMO) (70cm)", "Standard Total ($)": "1550.00", "Discount Amount ($)": "155.00", "Grand Total ($)": "1395.00", "Order Status": "In Transit", "Payment Status": "Payment Verified", "Raw JSON Payload": "{}", "Last Updated": "2026-06-08T03:10:00Z" },
        { "Order ID": "AVC-Q0912", "Client ID": "CLI-NYCBOSS", "Delivery Date": "2026-06-20", "Incoterms": "FOB", "Items Summary": "8x Explorer (70cm)\n6x Freedom (50cm) [TO BE CONFIRMED]", "Standard Total ($)": "850.00", "Discount Amount ($)": "0.00", "Grand Total ($)": "850.00", "Order Status": "Draft Quote", "Payment Status": "Unpaid", "Raw JSON Payload": "{\"items\":[{\"qty\":8,\"variety\":\"Explorer\",\"stem\":70,\"incoterms\":\"FOB\"},{\"qty\":6,\"variety\":\"Freedom\",\"stem\":50,\"incoterms\":\"FOB\",\"confirmed\":false}],\"client\":{\"companyName\":\"NYC Boss Flowers\",\"contactName\":\"Sarah Connor\",\"email\":\"sarah@nycbossflowers.com\",\"phone\":\"+1 (212) 555-9081\",\"incoterms\":\"FOB\",\"deliveryDate\":\"2026-06-20\"}}", "Last Updated": "2026-06-08T00:50:00Z" }
      ],
      logistics: [
        { "Logistics ID": "LOG-0198", "Order ID": "AVC-9812A", "Airway Bill (AWB)": "972-8812671", "Carrier": "Atlas Air", "Origin Airport": "Bogota", "Current Checkpoint": "In Flight", "Origin Delivery Time": "2026-06-07T14:00:00Z", "Flight Departure Time": "2026-06-08T02:00:00Z", "MIA Arrival Time": "", "Customs Release Time": "", "MIA Warehouse Time": "", "Final Warehouse Time": "", "Destination Notes": "Cargo departed Bogota cargo terminal on schedule." }
      ],
      payments: [
        { "Payment ID": "PAY-8716A", "Order ID": "AVC-8716A", "Client ID": "CLI-ROSESPRING", "Amount ($)": "1530.00", "Payment Method": "Bank Transfer", "Transaction Ref": "ACH-982716A", "Payment Date": "2026-06-07T18:20:00Z", "Verified By": "USR-ADRIAN", "Confirmed By": "USR-ADRIAN", "Type": "Verified" },
        { "Payment ID": "PAY-9812A", "Order ID": "AVC-9812A", "Client ID": "CLI-MIAMIPETALS", "Amount ($)": "1395.00", "Payment Method": "Credit Card / Stripe", "Transaction Ref": "ch_3M9281a8c", "Payment Date": "2026-06-08T03:00:00Z", "Verified By": "USR-ADRIAN", "Confirmed By": "USR-ADRIAN", "Type": "Verified" }
      ],
      interactions: [
        { "Interaction ID": "INT-01", "Client ID": "CLI-ROSESPRING", "Timestamp": "2026-06-05T10:00:00Z", "Type": "Email", "Notes": "Subject: Quote Request\nSnippet: Received quote AVC-8716A, looks good, sending Bank wire receipt soon.", "Salesperson ID": "SYSTEM", "Follow-up Date": "" },
        { "Interaction ID": "INT-02", "Client ID": "CLI-ROSESPRING", "Timestamp": "2026-06-07T18:20:00Z", "Type": "Payment", "Notes": "Payment VERIFIED for order AVC-8716A. Amount: $1530.00 via Bank Transfer (Ref: ACH-982716A)", "Salesperson ID": "USR-ADRIAN", "Follow-up Date": "" },
        { "Interaction ID": "INT-03", "Client ID": "CLI-NYCBOSS", "Timestamp": "2026-06-08T00:50:00Z", "Type": "Catalog Quote", "Notes": "Received quote request AVC-Q0912 for $850.00", "Salesperson ID": "SYSTEM", "Follow-up Date": "2026-06-10" }
      ],
      users: [
        { "User ID": "USR-ADMIN", "Name": "Admin User", "Email": "andeanvalleyco@gmail.com", "Passcode": "1234", "Role": "Admin", "Active": "TRUE", "Last Login": "2026-06-08T00:00:00Z", "Phone": "+1 (832) 510-1997", "WhatsApp": "593988636402" },
        { "User ID": "USR-ADRIAN", "Name": "Adrian Agent", "Email": "sales@andeanvalleycollection.com", "Passcode": "5678", "Role": "Agent", "Active": "TRUE", "Last Login": "2026-06-08T00:10:00Z", "Phone": "+1 (832) 510-1997", "WhatsApp": "593988636402" }
      ]
    };

    // Initialize application on load
    window.addEventListener("DOMContentLoaded", () => {
      document.getElementById("api-url-input").value = state.apiUrl;
      
      // Explicitly hide the outreach template selector group for regular quote emails
      document.getElementById("outreach-template-selector-group").style.display = "none";
      
      // Build visual editor toolbar change events
      const visualBody = document.getElementById("m-email-visual-body");
      if (visualBody) {
        visualBody.addEventListener("keyup", updateEditorToolbarState);
        visualBody.addEventListener("mouseup", updateEditorToolbarState);
        visualBody.addEventListener("input", updateEditorToolbarState);
      }
      
      const bulkVisualBody = document.getElementById("m-bulk-email-visual-body");
      if (bulkVisualBody) {
        bulkVisualBody.addEventListener("keyup", updateBulkEditorToolbarState);
        bulkVisualBody.addEventListener("mouseup", updateBulkEditorToolbarState);
        bulkVisualBody.addEventListener("input", updateBulkEditorToolbarState);
      }

      // Lead status change listeners to update Contact Name required state
      const drawerLeadStatus = document.getElementById("drawer-input-lead-status");
      if (drawerLeadStatus) {
        drawerLeadStatus.addEventListener("change", updateDrawerContactRequired);
      }
      const modalLeadStatus = document.getElementById("m-client-lead-status");
      if (modalLeadStatus) {
        modalLeadStatus.addEventListener("change", updateModalContactRequired);
      }

      // Auto-login if local credentials exist
      if (state.user && state.passcode) {
        validateSession();
      } else {
        showLoginScreen();
      }
    });

    // --- 2. AUTHENTICATION MODULE ---
    function pressKey(key) {
      const errorMsg = document.getElementById("login-error-msg");
      errorMsg.classList.remove("visible");
      
      if (key === "clear") {
        state.enteredPasscode = "";
      } else if (key === "back") {
        state.enteredPasscode = state.enteredPasscode.slice(0, -1);
      } else {
        if (state.enteredPasscode.length < 4) {
          state.enteredPasscode += key;
        }
      }
      
      updatePasscodeDots();
      
      if (state.enteredPasscode.length === 4) {
        setTimeout(submitLogin, 200);
      }
    }

    function updatePasscodeDots() {
      for (let i = 0; i < 4; i++) {
        const dot = document.getElementById(`dot-${i}`);
        if (i < state.enteredPasscode.length) {
          dot.classList.add("filled");
        } else {
          dot.classList.remove("filled");
        }
      }
    }

    function showLoginScreen() {
      document.getElementById("auth-container").style.display = "flex";
      document.getElementById("app-container").classList.remove("ready");
      state.enteredPasscode = "";
      updatePasscodeDots();
    }

    function bypassToDemo() {
      state.isDemoMode = true;
      state.user = {
        userId: "USR-ADMIN",
        name: "Mock Admin",
        role: "Admin"
      };
      state.passcode = "1234";
      
      // Ingest Mock Database
      state.clients = JSON.parse(JSON.stringify(mockDb.clients));
      state.orders = JSON.parse(JSON.stringify(mockDb.orders));
      state.logistics = JSON.parse(JSON.stringify(mockDb.logistics));
      state.payments = JSON.parse(JSON.stringify(mockDb.payments));
      state.interactions = JSON.parse(JSON.stringify(mockDb.interactions));
      state.users = JSON.parse(JSON.stringify(mockDb.users));
      
      enterApp();
      showToast("success", "Entered Demonstration Mode. Live sync disabled.");
    }

    function handleFailedLoginAttempt() {
      let attempts = parseInt(localStorage.getItem("avc_crm_failed_attempts") || "0");
      attempts += 1;
      localStorage.setItem("avc_crm_failed_attempts", attempts.toString());
      
      if (attempts >= 5) {
        const lockoutTime = Date.now() + 30000; // 30 seconds lockout
        localStorage.setItem("avc_crm_lockout", lockoutTime.toString());
        localStorage.setItem("avc_crm_failed_attempts", "0");
        showToast("error", "Security Lockout: 5 failed attempts. Login locked for 30s.");
      }
    }

    function submitLogin() {
      const username = document.getElementById("login-username").value.trim();
      const passcode = state.enteredPasscode;
      state.enteredPasscode = "";
      updatePasscodeDots();
      
      if (!username) {
        showLoginError("Enter User ID or Email.");
        return;
      }
      
      // Check lockout failsafe
      const lockoutTime = localStorage.getItem("avc_crm_lockout");
      if (lockoutTime) {
        if (Date.now() < parseInt(lockoutTime)) {
          const remaining = Math.ceil((parseInt(lockoutTime) - Date.now()) / 1000);
          showLoginError(`Security Lockout: Try again in ${remaining}s.`);
          return;
        } else {
          localStorage.removeItem("avc_crm_lockout");
        }
      }
      
      showGlobalLoading(true, "Authenticating credentials...");
      
      // API call to login endpoint
      postPayload({ action: "login", username: username, passcode: passcode })
        .then(response => {
          showGlobalLoading(false);
          if (response.success) {
            state.isDemoMode = false;
            state.user = response.user;
            state.passcode = passcode;
            
            // Clear attempts/lockouts
            localStorage.removeItem("avc_crm_failed_attempts");
            localStorage.removeItem("avc_crm_lockout");
            
            // Save local credentials
            localStorage.setItem("avc_crm_passcode", passcode);
            localStorage.setItem("avc_crm_user", JSON.stringify(response.user));
            
            enterApp();
            fetchLiveDatabase();
          } else {
            handleFailedLoginAttempt();
            showLoginError(response.message || "Invalid credentials.");
          }
        })
        .catch(err => {
          showGlobalLoading(false);
          
          // Network offline / Local simulation check
          const cleanUser = username.toLowerCase();
          const matchedMockUser = mockDb.users.find(u => 
            (u["User ID"].toLowerCase() === cleanUser || u["Email"].toLowerCase() === cleanUser) &&
            u["Passcode"].toString().trim() === passcode &&
            (u["Active"] === "TRUE" || u["Active"] === true)
          );
          
          if (matchedMockUser) {
            state.isDemoMode = true;
            state.user = {
              userId: matchedMockUser["User ID"],
              name: matchedMockUser["Name"],
              role: matchedMockUser["Role"],
              phone: matchedMockUser["Phone"] || "",
              whatsapp: matchedMockUser["WhatsApp"] || ""
            };
            state.passcode = passcode;
            
            // Ingest Mock Database
            state.clients = JSON.parse(JSON.stringify(mockDb.clients));
            state.orders = JSON.parse(JSON.stringify(mockDb.orders));
            state.logistics = JSON.parse(JSON.stringify(mockDb.logistics));
            state.payments = JSON.parse(JSON.stringify(mockDb.payments));
            state.interactions = JSON.parse(JSON.stringify(mockDb.interactions));
            state.users = JSON.parse(JSON.stringify(mockDb.users));
            
            // Clear attempts
            localStorage.removeItem("avc_crm_failed_attempts");
            localStorage.removeItem("avc_crm_lockout");
            
            enterApp();
            showToast("warning", "Offline Mode: Loaded local simulation profile.");
          } else {
            handleFailedLoginAttempt();
            showLoginError("Access denied. Please check connection and credentials.");
          }
        });
    }

    function validateSession() {
      // Fast check if credentials are valid on mount
      if (state.isDemoMode) {
        enterApp();
      } else if (state.passcode && state.user && state.user.userId) {
        // Pre-fill username field with cached userId or email
        document.getElementById("login-username").value = state.user.email || state.user.userId || "";
        postPayload({ action: "login", username: state.user.email || state.user.userId, passcode: state.passcode })
          .then(res => {
            if (res.success) {
              enterApp();
              fetchLiveDatabase();
            } else {
              logout();
            }
          })
          .catch(() => {
            // Offline fallback
            state.isDemoMode = true;
            state.clients = JSON.parse(JSON.stringify(mockDb.clients));
            state.orders = JSON.parse(JSON.stringify(mockDb.orders));
            state.logistics = JSON.parse(JSON.stringify(mockDb.logistics));
            state.payments = JSON.parse(JSON.stringify(mockDb.payments));
            state.interactions = JSON.parse(JSON.stringify(mockDb.interactions));
            state.users = JSON.parse(JSON.stringify(mockDb.users));
            enterApp();
            showToast("warning", "Network offline. Displaying locally cached data.");
          });
      } else {
        showLoginScreen();
      }
    }

    function showLoginError(msg) {
      const errorMsg = document.getElementById("login-error-msg");
      errorMsg.textContent = msg;
      errorMsg.classList.add("visible");
      
      // shake card
      const card = document.querySelector(".login-card");
      card.style.animation = "none";
      setTimeout(() => {
        card.style.animation = "shake 0.4s ease";
      }, 10);
    }

    function logout() {
      localStorage.removeItem("avc_crm_passcode");
      localStorage.removeItem("avc_crm_user");
      state.user = null;
      state.passcode = "";
      state.activeView = "dashboard";
      state.isDemoMode = false;
      showLoginScreen();
    }

    function enterApp() {
      document.getElementById("auth-container").style.display = "none";
      document.getElementById("app-container").classList.add("ready");
      
      const userName = (state.user && state.user.name) ? state.user.name : "Unknown User";
      const userRole = (state.user && state.user.role) ? state.user.role : "Agent";
      
      // Populate sidebar details
      document.getElementById("sidebar-user-name").textContent = userName;
      document.getElementById("sidebar-user-role").textContent = userRole;
      document.getElementById("sidebar-user-avatar").textContent = userName.split(" ").map(w=>w[0]).join("").toUpperCase();
      
      // Hide settings if agent
      const navSettings = document.getElementById("nav-settings");
      if (userRole === "Admin") {
        navSettings.style.display = "flex";
      } else {
        navSettings.style.display = "none";
      }
      
      // Hide reports if agent
      const navReports = document.getElementById("nav-reports");
      if (navReports) {
        if (userRole === "Admin") {
          navReports.style.display = "flex";
        } else {
          navReports.style.display = "none";
        }
      }
      
      updateSyncIndicator();
      switchView(state.activeView, document.querySelector(`.menu-item`));
    }

    // --------------------------------------------------
    // API ENDPOINT UTILS
    // --------------------------------------------------
    function postPayload(payload) {
      if (state.isDemoMode) {
        if (payload.action === "login") {
          const cleanUser = payload.username.toLowerCase().trim();
          const passcode = payload.passcode.toString().trim();
          const matchedMockUser = mockDb.users.find(u => 
            (u["User ID"].toLowerCase() === cleanUser || u["Email"].toLowerCase() === cleanUser) &&
            u["Passcode"].toString().trim() === passcode &&
            (u["Active"] === "TRUE" || u["Active"] === true)
          );
          if (matchedMockUser) {
            return Promise.resolve({
              success: true,
              user: {
                userId: matchedMockUser["User ID"],
                name: matchedMockUser["Name"],
                role: matchedMockUser["Role"],
                phone: matchedMockUser["Phone"] || "",
                whatsapp: matchedMockUser["WhatsApp"] || ""
              }
            });
          } else {
            return Promise.resolve({
              success: false,
              message: "Invalid credentials or deactivated account (Offline Mock)."
            });
          }
        }
        
        if (payload.action === "getQuotePreview") {
          const order = state.orders.find(o => o["Order ID"] === payload.orderId);
          const client = order ? state.clients.find(c => c["Client ID"] === order["Client ID"]) : null;
          const clientName = client ? client["Company Name"] : (order ? order["Client ID"] : "Customer");
          const contactName = client ? client["Contact Name"] : "Customer";
          const clientEmail = client ? client["Email"] : "customer@example.com";
          const clientPhone = client ? client["Phone"] : "N/A";
          const shippingAddress = client ? client["Shipping Address"] : (client ? client["Billing Address"] : "N/A");
          const orderIncoterm = order ? order["Incoterms"] : "FOB";
          const orderDateRaw = order ? order["Delivery Date"] : "N/A";
          
          let orderDate = "N/A";
          if (orderDateRaw && orderDateRaw !== "N/A") {
            const d = new Date(orderDateRaw);
            orderDate = isNaN(d.getTime()) ? orderDateRaw : d.toLocaleDateString("en-US", { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' });
          }
          
          const repName = state.user.name || "Andean Valley LLC Sales Team";
          const activeUserObj = state.users.find(u => u["User ID"] === state.user.userId) || {};
          const repEmail = activeUserObj["Email"] || "sales@andeanvalleycollection.com";
          const repPhone = activeUserObj["Phone"] || "+1 (832) 510-1997";
          
          let notes = "None";
          let resaleExemption = "No";
          if (order && order["Raw JSON Payload"]) {
            try {
              const raw = JSON.parse(order["Raw JSON Payload"]);
              if (raw.client) {
                notes = raw.client.notes || "None";
                resaleExemption = raw.client.resaleFileOnOriginalFile ? "Yes (Already Submitted)" : (raw.client.resaleCertificateNum ? "Yes (Already Submitted)" : "No");
              }
            } catch(e) {}
          }
          
          const inStockItems = [];
          const outOfStockItems = [];
          
          payload.selectedItems.forEach(item => {
            const qty = item.qty || 0;
            const stems = item.stems || (qty * 100);
            const finalPrice = item.finalPrice || 0;
            const isTbc = item.isTbc || false;
            
            if (isTbc) {
              outOfStockItems.push({
                variety: item.variety,
                stem: item.stem,
                qty: qty,
                stems: stems,
                pricePerStem: 0,
                subtotal: 0
              });
            } else {
              const pricePerStem = stems > 0 ? (finalPrice / stems) : 0;
              inStockItems.push({
                variety: item.variety,
                stem: item.stem,
                qty: qty,
                stems: stems,
                pricePerStem: pricePerStem,
                subtotal: finalPrice
              });
            }
          });
          
          const inStockSubtotal = inStockItems.reduce((sum, i) => sum + i.subtotal, 0);
          const outOfStockSubtotal = outOfStockItems.reduce((sum, i) => sum + i.subtotal, 0);
          
          const grandTotal = inStockSubtotal + outOfStockSubtotal;
          
          let inStockTableHtml = "";
          if (inStockItems.length > 0) {
            inStockTableHtml = `
              <div style="margin-top: 20px;">
                <h3 style="color: #4A6A4A; margin-top: 0; margin-bottom: 5px; font-family: Arial, sans-serif;">Confirmed Items in Stock</h3>
                <p style="font-size: 13px; color: #555; margin-top: 0; margin-bottom: 10px; font-family: Arial, sans-serif;">The following items are confirmed in stock and reserved for your order:</p>
                <table border="1" cellpadding="10" style="border-collapse: collapse; width: 100%; border-color: #e2ece2; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 20px;">
                  <tr style="background-color: #f2f2f2; font-weight: bold; color: #4A6A4A;">
                    <th>Variety</th><th>Stem</th><th>Qty (Boxes)</th><th>Stems</th><th>Price/Stem</th><th>Subtotal</th>
                  </tr>
                  ${inStockItems.map(i => `
                    <tr>
                      <td><strong>${i.variety.toUpperCase()}</strong> (Rose)</td>
                      <td align="center">${i.stem}cm</td>
                      <td align="center">${i.qty}</td>
                      <td align="center">${i.stems}</td>
                      <td align="right">${formatCurrency(i.pricePerStem)}</td>
                      <td align="right">${formatCurrency(i.subtotal)}</td>
                    </tr>
                  `).join("")}
                  <tr style="background-color: #fcfdfc; font-weight: bold;">
                    <td colspan="5" align="right" style="font-size: 14px;">Subtotal items (In Stock):</td>
                    <td align="right" style="font-size: 14px; color: #4A6A4A;">${formatCurrency(inStockSubtotal)}</td>
                  </tr>
                </table>
              </div>
            `;
          }
          
          let outOfStockTableHtml = "";
          if (outOfStockItems.length > 0) {
            outOfStockTableHtml = `
              <div style="margin-top: 20px;">
                <h3 style="color: #b71c1c; margin-top: 0; margin-bottom: 5px; font-family: Arial, sans-serif;">Items Pending Availability Confirmation</h3>
                <p style="font-size: 13px; color: #b71c1c; margin-top: 0; margin-bottom: 10px; font-weight: bold; font-family: Arial, sans-serif;">* Please note: The following items are currently out of stock. We will contact the farm to confirm availability and provide confirmation shortly:</p>
                <table border="1" cellpadding="10" style="border-collapse: collapse; width: 100%; border-color: #e2ece2; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 20px;">
                  <tr style="background-color: #f2f2f2; font-weight: bold; color: #4A6A4A;">
                    <th>Variety</th><th>Stem</th><th>Qty (Boxes)</th><th>Stems</th><th>Price/Stem</th><th>Subtotal</th>
                  </tr>
                  ${outOfStockItems.map(i => `
                    <tr>
                      <td><strong>${i.variety.toUpperCase()}</strong> (Rose)</td>
                      <td align="center">${i.stem}cm</td>
                      <td align="center">${i.qty}</td>
                      <td align="center">${i.stems}</td>
                      <td align="right">$0.00</td>
                      <td align="right">$0.00</td>
                    </tr>
                  `).join("")}
                  <tr style="background-color: #fcfdfc; font-weight: bold;">
                    <td colspan="5" align="right" style="font-size: 14px;">Subtotal items (Pending Confirmation):</td>
                    <td align="right" style="font-size: 14px; color: #4A6A4A;">$0.00</td>
                  </tr>
                </table>
              </div>
            `;
          }
          
          let summaryTableHtml = `
            <div style="margin-top: 20px;">
              <h3 style="font-family: Arial, sans-serif;">Estimated Quote Summary</h3>
              <table border="1" cellpadding="10" style="border-collapse: collapse; width: 100%; border-color: #e2ece2; font-family: Arial, sans-serif; font-size: 14px; margin-bottom: 20px;">
                <tr>
                  <td colspan="5" align="right"><strong>Subtotal Confirmed Items:</strong></td>
                  <td align="right">${formatCurrency(inStockSubtotal)}</td>
                </tr>
          `;
          
          if (outOfStockItems.length > 0) {
            summaryTableHtml += `
              <tr>
                <td colspan="5" align="right"><strong>Subtotal Pending Items:</strong></td>
                <td align="right">$0.00</td>
              </tr>
            `;
          }
          
          summaryTableHtml += `
                <tr style="background-color: #fcfdfc; font-weight: bold; font-size: 15px;">
                  <td colspan="5" align="right">Estimated Grand Total (${orderIncoterm}):</td>
                  <td align="right" style="color: #4A6A4A;">${formatCurrency(grandTotal)}</td>
                </tr>
              </table>
          `;
          
          summaryTableHtml += `</div>`;
          
          const finalBody = `
<div style="font-family: Arial, sans-serif; color: #333; max-width: 650px; margin: 0 auto; border: 1px solid #e2ece2; border-radius: 12px; padding: 30px; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.03);">
  <div style="text-align: center; border-bottom: 2px solid #4A6A4A; padding-bottom: 20px; margin-bottom: 25px;">
    <img src="https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=768,fit=crop/YNq2Qob540ikPKVx/avf-logo01-ec9GQS1gGRgVMRbb.png" alt="Andean Valley LLC Logo" style="width: 240px; height: auto; max-width: 90%;" />
    <p style="color: #666; margin: 10px 0 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; font-family: Arial, sans-serif;">MULTIPLE FARMS. ONE RELATIONSHIP. ONE ORDER.</p>
  </div>
  
  <h2 style="color: #333; margin-top: 25px; font-family: Arial, sans-serif; font-size: 20px;">QUOTE: ${payload.quoteDocumentId || payload.orderId}</h2>
  <p>Dear ${contactName},</p>
  <p>Thank you for request <strong>${payload.quoteDocumentId || payload.orderId}</strong>. We are pleased to present our official B2B wholesale offer for shipment on <strong>${orderDate}</strong>:</p>
  
  ${inStockTableHtml}
  ${outOfStockTableHtml}
  ${summaryTableHtml}
  
  <div style="margin-top: 25px; padding: 15px; background-color: #f7f9f7; border-radius: 5px; font-size: 13px; color: #4a5a4a; border-left: 4px solid #4A6A4A; text-align: left;">
    <h4 style="margin-top:0; color:#1f381f; font-size: 14px;">Logistics Details</h4>
    <ul style="margin-bottom:0; padding-left:20px; line-height: 1.6; font-family: Arial, sans-serif;">
      <li><strong>Company:</strong> ${clientName}</li>
      <li><strong>Incoterms:</strong> ${orderIncoterm}</li>
      <li><strong>Shipping Address:</strong> ${shippingAddress}</li>
      <li><strong>Phone:</strong> ${clientPhone}</li>
      <li><strong>Resale Exemption Bypass:</strong> ${resaleExemption}</li>
      <li><strong>Notes:</strong> ${notes}</li>
    </ul>
  </div>
  
  <p style="text-align: center; font-size: 12px; color: #666; margin-top: 20px; font-style: italic;">Quotes issued by Andean Valley LLC, New Mexico, USA.</p>

  <div style="margin-top: 10px; padding: 15px; background-color: #f9fbf9; border-radius: 5px; font-size: 13px; color: #333; border-left: 4px solid #4A6A4A; text-align: left;" contenteditable="false">
    <h4 style="margin: 0 0 10px 0; color: #1f381f; font-size: 14px;">Payment Instructions</h4>
    <p style="margin: 0;">A secure payment link (supporting instant, Bank, ACH & Credit Card payments and banking coordinates tied to your profile) will be generated and sent with our Proforma Invoice once this quotation is approved.</p>
  </div>
  
  <p style="margin-top: 25px; font-family: Arial, sans-serif;">Please review this quotation and let us know if any changes are required.</p>
  <p style="font-family: Arial, sans-serif;">Once you\'re ready to proceed, simply reply with your confirmation to proceed. We will send our Proforma Invoice for payment and to begin processing your order.</p>
  <div>
    <p>Best Regards,</p>
    <p><strong>${repName}</strong><br>Email: ${repEmail}<br>Phone: ${repPhone}</p>
  </div>
</div>
          `.trim();
          
          return Promise.resolve({
            success: true,
            recipient: clientEmail,
            subject: `Quote ${payload.orderId} - Andean Valley LLC`,
            body: finalBody
          });
        }
        if (payload.action === "saveOrderSourcing") {
          const order = state.orders.find(o => o["Order ID"] === payload.orderId);
          if (order) {
            const items = payload.items;
            const summaryLines = [];
            items.forEach(item => {
              if (item.qty > 0) {
                let line = item.qty + "x " + item.variety + " (" + item.stem + "cm)";
                if (item.isTbc) {
                  line += " [TO BE CONFIRMED]";
                }
                summaryLines.push(line);
              }
            });
            const itemsSummary = summaryLines.join("\n");
            
            const rawPayload = JSON.parse(order["Raw JSON Payload"] || "{}");
            rawPayload.items = items;
            
            let standardTotal = 0;
            items.forEach(item => {
              if (item.qty > 0) {
                let clientPricePerStem = 0;
                if (item.price !== undefined && item.price !== null && parseFloat(item.price) > 0) {
                  clientPricePerStem = parseFloat(item.price);
                } else {
                  clientPricePerStem = 0.50;
                }
                item.finalPrice = item.qty * 100 * clientPricePerStem;
                standardTotal += item.finalPrice;
              }
            });
            
            const grandTotal = standardTotal;
            
            order["Items Summary"] = itemsSummary;
            order["Standard Total ($)"] = standardTotal;
            order["Discount Amount ($)"] = 0;
            order["Grand Total ($)"] = grandTotal;
            order["Raw JSON Payload"] = JSON.stringify(rawPayload);
            order["Last Updated"] = new Date().toISOString();
            
            return Promise.resolve({
              success: true,
              itemsSummary: itemsSummary,
              standardTotal: standardTotal,
              discountAmount: 0,
              grandTotal: grandTotal,
              rawPayload: JSON.stringify(rawPayload)
            });
          }
          return Promise.resolve({ success: false, message: "Order not found." });
        }
        
        if (payload.action === "savePricingOverrides") {
          const order = state.orders.find(o => o["Order ID"] === payload.orderId);
          if (order) {
            order["Standard Total ($)"] = payload.standardTotal;
            order["Discount Amount ($)"] = payload.discountAmount;
            order["Grand Total ($)"] = payload.grandTotal;
            order["Last Updated"] = new Date().toISOString();
            return Promise.resolve({ success: true });
          }
          return Promise.resolve({ success: false, message: "Order not found." });
        }
        
        if (payload.action === "confirmSourced") {
          const order = state.orders.find(o => o["Order ID"] === payload.orderId);
          if (order) {
            order["Order Status"] = "Sourced";
            order["Last Updated"] = new Date().toISOString();
            
            state.interactions.push({
              "Interaction ID": "INT-LOCAL-" + Math.floor(Math.random()*1000),
              "Client ID": order["Client ID"],
              "Timestamp": new Date().toISOString(),
              "Type": "Internal Note",
              "Notes": "Sourcing agent confirmed order " + payload.orderId + " is fully sourced from suppliers.",
              "Salesperson ID": state.user.userId,
              "Follow-up Date": ""
            });
            return Promise.resolve({ success: true });
          }
          return Promise.resolve({ success: false, message: "Order not found." });
        }

        if (payload.action === "sendQuote") {
          return Promise.resolve({ success: true });
        }
        if (payload.action === "sendOutreachEmail") {
          return Promise.resolve({ success: true });
        }
        // General intercept for demo mode
        return Promise.resolve({ success: true, localIntercepted: true });
      }
      
      return fetch(state.apiUrl, {
        method: "POST",
        body: JSON.stringify(payload)
      }).then(r => r.json());
    }

    function fetchLiveDatabase() {
      if (state.isDemoMode) {
        showToast("warning", "Offline Demonstration Mode: Data is locally simulated.");
        return Promise.resolve();
      }
      
      showGlobalLoading(true, "Downloading secure database from Google Sheet...");
      
      const payload = {
        action: "getCrmData",
        userId: state.user.userId,
        passcode: state.passcode
      };
      
      return postPayload(payload)
        .then(res => {
          showGlobalLoading(false);
          if (res.success) {
            state.clients = res.clients || [];
            state.orders = res.orders || [];
            state.logistics = res.logistics || [];
            state.payments = res.payments || [];
            state.interactions = res.interactions || [];
            state.users = res.users || [];
            state.inventory = res.inventory || [];
            
            showToast("success", "Database fully synchronized successfully!");
            refreshActiveView();
          } else {
            showToast("error", res.message || "Failed to download CRM Database.");
            if (res.message && res.message.includes("Session expired")) {
              logout();
            }
          }
        })
        .catch(err => {
          showGlobalLoading(false);
          showToast("error", "Network timeout. Checking spreadsheet connection...");
        });
    }

    function saveCustomApiUrl() {
      const urlVal = document.getElementById("api-url-input").value.trim();
      if (urlVal) {
        state.apiUrl = urlVal;
        localStorage.setItem("avc_crm_api_url", urlVal);
        showToast("success", "Target Apps Script URL updated.");
      }
    }

    // --- 3. CORE VIEW NAVIGATION & SHELL TABS ---
    function viewUnassignedLeads() {
      const repFilter = document.getElementById("client-filter-rep");
      if (repFilter) {
        repFilter.value = "Unassigned";
      }
      switchView('clients');
    }

    function toggleSidebar() {
      document.getElementById("sidebar").classList.toggle("collapsed");
    }

    function switchView(viewName, element) {
      state.activeView = viewName;
      
      // Update sidebar styling
      document.querySelectorAll(".menu-item").forEach(item => item.classList.remove("active"));
      if (element) {
        element.classList.add("active");
      } else {
        // find matching
        const items = document.querySelectorAll(".menu-item");
        items.forEach(it => {
          if (it.onclick.toString().includes(viewName)) {
            it.classList.add("active");
          }
        });
      }
      
      // Update page title
      const titles = {
        dashboard: "Dashboard Summary",
        clients: "Clients 360 Profile Management",
        orders: "B2B Sales Pipeline Kanban",
        logistics: "FOB Cargo Logistics Stepper",
        payments: "Accounting Payments Ledger",
        reports: "Sales Performance Reports",
        settings: "ERP System Settings"
      };
      document.getElementById("current-view-title").textContent = titles[viewName] || "CRM Management";
      
      // Switch view panel visibility
      document.querySelectorAll(".view-panel").forEach(p => p.classList.remove("active"));
      const targetPanel = document.getElementById(`view-${viewName}`);
      if (targetPanel) {
        targetPanel.classList.add("active");
      }
      
      refreshActiveView();
    }

    function refreshActiveView() {
      const countBadge = document.getElementById("clients-count-badge");
      if (countBadge) countBadge.style.display = "none";
      
      if (state.activeView === "dashboard") {
        renderDashboard();
      } else if (state.activeView === "clients") {
        populateSalespersonDropdowns();
        renderClientsTable();
      } else if (state.activeView === "reports") {
        renderReports();
      } else if (state.activeView === "orders") {
        renderOrdersView();
      } else if (state.activeView === "logistics") {
        renderLogisticsView();
      } else if (state.activeView === "payments") {
        renderPaymentsTable();
      } else if (state.activeView === "settings") {
        renderSettings();
      }
    }

    function updateSyncIndicator() {
      const indicator = document.getElementById("sync-indicator");
      const indicatorText = document.getElementById("sync-indicator-text");
      
      if (state.isDemoMode) {
        indicator.className = "sync-status-badge offline-demo";
        indicatorText.textContent = "Offline Demo Mode";
      } else {
        indicator.className = "sync-status-badge";
        indicatorText.textContent = "Live Cloud Synced";
      }
    }

    function isClientAccessAllowed(client) {
      if (!state.user) return false;
      if (state.user.role === "Admin") return true;
      const assigned = client["Assigned Salesperson"];
      return !assigned || assigned === "Unassigned" || assigned === state.user.userId;
    }

    function maskEmail(email) {
      if (!email) return "";
      const parts = email.split("@");
      if (parts.length < 2) return email;
      const name = parts[0];
      const domain = parts[1];
      if (name.length <= 2) {
        return name + "***@" + domain;
      }
      return name.substring(0, 2) + "***@" + domain;
    }

    // --- 4. TOASTS & LOADING UTILITIES ---
    function showToast(type, message) {
      const container = document.getElementById("toast-container");
      
      const toast = document.createElement("div");
      toast.className = `toast ${type}`;
      
      // Icon mapping
      let svgIcon = "";
      if (type === "success") {
        svgIcon = `<svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></svg>`;
      } else if (type === "error") {
        svgIcon = `<svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M13 17H11V15H13V17M13 13H11V7H13V13Z"/></svg>`;
      } else {
        svgIcon = `<svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 15C11.4 15 11 14.6 11 14V10C11 9.4 11.4 9 12 9S13 9.4 13 10V14C13 14.6 12.6 15 12 15M12 7C11.4 7 11 6.6 11 6S11.4 5 12 5 13 5.4 13 6 12.6 7 12 7Z"/></svg>`;
      }
      
      toast.innerHTML = `
        <div class="toast-icon">${svgIcon}</div>
        <div class="toast-content">${message}</div>
      `;
      
      container.appendChild(toast);
      
      // Trigger animation frame
      setTimeout(() => {
        toast.classList.add("visible");
      }, 50);
      
      // Auto destroy after 4 seconds
      setTimeout(() => {
        toast.classList.remove("visible");
        setTimeout(() => {
          toast.remove();
        }, 300);
      }, 4000);
    }

    function showGlobalLoading(show, message = "Processing task...") {
      const btn = document.getElementById("global-sync-btn");
      if (btn) {
        if (show) {
          btn.classList.add("spin");
          btn.querySelector("span").textContent = "Loading...";
        } else {
          btn.classList.remove("spin");
          btn.querySelector("span").textContent = "Sync Now";
        }
      }
      
      let overlay = document.getElementById("global-block-overlay");
      if (!overlay) {
        overlay = document.createElement("div");
        overlay.id = "global-block-overlay";
        overlay.style = "position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(10, 15, 30, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 999999; color: #fff; font-family: var(--font-display), sans-serif; transition: opacity 0.3s ease;";
        overlay.innerHTML = `
          <div style="background: rgba(20, 25, 45, 0.95); padding: 30px; border-radius: 12px; border: 1px solid var(--primary-glow); box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 280px; text-align: center;">
            <svg viewBox="0 0 24 24" width="40" height="40" style="color: var(--primary); animation: spin 1s linear infinite;">
              <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="4" style="opacity:0.1;"></circle>
              <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" style="opacity:0.85;"></path>
            </svg>
            <div id="global-block-msg" style="font-size: 14px; font-weight: 500; letter-spacing: 0.5px; color: var(--text-primary); line-height: 1.4;">${message}</div>
            <div style="font-size: 11px; color: var(--text-muted);">Please do not refresh or close the CRM app.</div>
          </div>
        `;
        document.body.appendChild(overlay);
      } else {
        document.getElementById("global-block-msg").textContent = message;
      }
      
      if (show) {
        overlay.style.display = "flex";
        overlay.style.opacity = "1";
        overlay.style.pointerEvents = "auto";
      } else {
        overlay.style.opacity = "0";
        overlay.style.pointerEvents = "none";
        setTimeout(() => {
          if (overlay.style.opacity === "0") {
            overlay.style.display = "none";
          }
        }, 300);
      }
    }

    function toggleCallOutcomeField() {
      const type = document.getElementById("log-inter-type").value;
      const container = document.getElementById("call-outcome-container");
      if (type === "Phone Call") {
        container.style.display = "block";
      } else {
        container.style.display = "none";
      }
    }

    function formatDateForInput(dateVal) {
      if (!dateVal) return "";
      try {
        const d = new Date(dateVal);
        if (isNaN(d.getTime())) return "";
        return d.toISOString().split('T')[0];
      } catch (e) {
        return "";
      }
    }

    function renderReports() {
      if (state.user.role !== "Admin") {
        document.getElementById("view-reports").innerHTML = `<div style="padding: 40px; text-align: center; color: var(--text-secondary);">Access Restricted: Only Administrators can view sales performance reports.</div>`;
        return;
      }

      const repStats = {};
      
      repStats["Unassigned"] = {
        name: "Unassigned / Catalog Checkout",
        leads: 0,
        won: 0,
        lost: 0,
        wonSales: 0,
        pipelineValue: 0,
        calls: 0,
        whatsapp: 0,
        emails: 0,
        meetings: 0,
        outreach: 0
      };

      (state.users || []).forEach(u => {
        repStats[u["User ID"]] = {
          name: u["Name"],
          leads: 0,
          won: 0,
          lost: 0,
          wonSales: 0,
          pipelineValue: 0,
          calls: 0,
          whatsapp: 0,
          emails: 0,
          meetings: 0,
          outreach: 0
        };
      });

      // Populate dropdown
      const repFilter = document.getElementById("report-filter-rep");
      if (repFilter && repFilter.options.length <= 1) {
        (state.users || []).filter(u => u.role !== "Admin").forEach(u => {
          const opt = document.createElement("option");
          opt.value = u["User ID"];
          opt.textContent = u["Name"];
          repFilter.appendChild(opt);
        });
        const unassignedOpt = document.createElement("option");
        unassignedOpt.value = "Unassigned";
        unassignedOpt.textContent = "Unassigned";
        repFilter.appendChild(unassignedOpt);
      }
      
      const selectedRep = repFilter ? repFilter.value : "";

      (state.clients || []).forEach(c => {
        const repId = c["Assigned Salesperson"] || "Unassigned";
        if (selectedRep !== "" && repId !== selectedRep) return;
        if (!repStats[repId]) {
          repStats[repId] = { name: repId, leads: 0, won: 0, lost: 0, wonSales: 0, pipelineValue: 0, calls: 0, whatsapp: 0, emails: 0, meetings: 0, outreach: 0 };
        }
        repStats[repId].leads++;
        const leadStatus = c["Lead Status"] || "";
        if (leadStatus === "Won") {
          repStats[repId].won++;
        } else if (leadStatus === "Lost") {
          repStats[repId].lost++;
        }
      });

      let totalQuoteTurnaroundMins = 0;
      let quoteTurnaroundCount = 0;
      let totalPaymentVerificationMins = 0;
      let paymentVerificationCount = 0;

      (state.orders || []).forEach(o => {
        const client = (state.clients || []).find(c => c["Client ID"] === o["Client ID"]);
        const repId = client ? (client["Assigned Salesperson"] || "Unassigned") : "Unassigned";
        if (selectedRep !== "" && repId !== selectedRep) return;
        
        if (!repStats[repId]) {
          repStats[repId] = { name: repId, leads: 0, won: 0, lost: 0, wonSales: 0, pipelineValue: 0, calls: 0, whatsapp: 0, emails: 0, meetings: 0, outreach: 0 };
        }

        const status = o["Order Status"];
        const total = parseFloat(o["Grand Total ($)"]) || 0;
        
        if (status === "Firm Order" || status === "Sourced" || status === "In Transit" || status === "Delivered") {
          repStats[repId].wonSales += total;
        } else if (status === "Draft Quote" || status === "Quote Sent" || status === "Invoice Sent") {
          repStats[repId].pipelineValue += total;
        }
        
        if (o["TS_QuoteRequested"] && o["TS_QuoteSent"]) {
          const req = new Date(o["TS_QuoteRequested"]).getTime();
          const sent = new Date(o["TS_QuoteSent"]).getTime();
          if (!isNaN(req) && !isNaN(sent) && sent >= req) {
            totalQuoteTurnaroundMins += (sent - req) / 60000;
            quoteTurnaroundCount++;
          }
        }
        if (o["TS_QuoteSent"] && o["TS_PaymentVerified"]) {
          const sent = new Date(o["TS_QuoteSent"]).getTime();
          const pay = new Date(o["TS_PaymentVerified"]).getTime();
          if (!isNaN(sent) && !isNaN(pay) && pay >= sent) {
            totalPaymentVerificationMins += (pay - sent) / 60000;
            paymentVerificationCount++;
          }
        }
      });

      (state.interactions || []).forEach(int => {
        const repId = int["Salesperson ID"] || "Unassigned";
        if (selectedRep !== "" && repId !== selectedRep) return;
        
        if (!repStats[repId]) {
          repStats[repId] = { name: repId, leads: 0, won: 0, lost: 0, wonSales: 0, pipelineValue: 0, calls: 0, whatsapp: 0, emails: 0, meetings: 0, outreach: 0 };
        }

        const type = int["Type"];
        const notes = int["Notes"] || "";
        if (type === "Phone Call") {
          repStats[repId].calls++;
        } else if (type === "WhatsApp") {
          repStats[repId].whatsapp++;
        } else if (type === "Email Sent" || type === "Email") {
          repStats[repId].emails++;
        } else if (type === "Meeting") {
          repStats[repId].meetings++;
        }

        if (type === "Bulk Outreach" || type === "Outreach" || (type === "Email" && notes.toLowerCase().includes("outreach")) || notes.toLowerCase().includes("sent cold outreach email") || notes.toLowerCase().includes("sent bulk outreach email")) {
          repStats[repId].outreach++;
        }
      });

      let aggWonRevenue = 0;
      let aggPipelineValue = 0;
      let aggWonLeads = 0;
      let aggLostLeads = 0;
      let aggTotalActivities = 0;
      let aggOutreach = 0;

      Object.values(repStats).forEach(s => {
        aggWonRevenue += s.wonSales;
        aggPipelineValue += s.pipelineValue;
        aggWonLeads += s.won;
        aggLostLeads += s.lost;
        aggTotalActivities += (s.calls + s.whatsapp + s.emails + s.meetings);
        aggOutreach += s.outreach;
      });

      const aggConversionRate = (aggWonLeads + aggLostLeads > 0)
        ? (aggWonLeads / (aggWonLeads + aggLostLeads)) * 100
        : 0;

      const avgQuoteMins = quoteTurnaroundCount > 0 ? Math.round(totalQuoteTurnaroundMins / quoteTurnaroundCount) : 0;
      const avgPayMins = paymentVerificationCount > 0 ? Math.round(totalPaymentVerificationMins / paymentVerificationCount) : 0;
      const avgPayHrs = avgPayMins > 0 ? (avgPayMins / 60).toFixed(1) : "0";

      document.getElementById("report-kpi-total-revenue").textContent = `$${aggWonRevenue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
      document.getElementById("report-kpi-pipeline-value").textContent = `$${aggPipelineValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;
      document.getElementById("report-kpi-conversion-rate").textContent = `${aggConversionRate.toFixed(1)}%`;
      document.getElementById("report-kpi-total-activities").textContent = aggTotalActivities;
      
      const elOutreach = document.getElementById("report-kpi-outreach-sent");
      if (elOutreach) elOutreach.textContent = aggOutreach;
      
      const elQuote = document.getElementById("report-kpi-avg-quote-time");
      if (elQuote) elQuote.textContent = `${avgQuoteMins} mins`;
      
      const elPay = document.getElementById("report-kpi-avg-payment-time");
      if (elPay) elPay.textContent = `${avgPayHrs} hrs`;

      const tbody = document.getElementById("report-performance-table-body");
      tbody.innerHTML = "";

      Object.keys(repStats).forEach(repId => {
        const s = repStats[repId];
        
        const totalAct = s.calls + s.whatsapp + s.emails + s.meetings;
        if (s.leads === 0 && s.wonSales === 0 && s.pipelineValue === 0 && totalAct === 0 && repId !== "Unassigned") {
          return;
        }

        const convRate = (s.won + s.lost > 0)
          ? (s.won / (s.won + s.lost)) * 100
          : 0;

        const tr = document.createElement("tr");
        tr.innerHTML = `
          <td style="font-weight:600;">${s.name}</td>
          <td>${s.leads}</td>
          <td><span class="badge badge-primary">${s.won}</span></td>
          <td><span class="badge badge-secondary">${s.lost}</span></td>
          <td style="font-weight:600;">${convRate.toFixed(1)}%</td>
          <td style="font-weight:600; color: var(--primary);">$${s.wonSales.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
          <td style="font-weight:600; color: var(--accent-indigo);">$${s.pipelineValue.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
          <td>${s.calls}</td>
          <td>${s.whatsapp}</td>
          <td>${s.emails}</td>
          <td>${s.meetings}</td>
        `;
        tbody.appendChild(tr);
      });
    }

    // --- 5. DASHBOARD VIEW CONTROLLER ---
    function renderDashboard() {
      // A. Calculate stats
      let firmOrders = 0;
      let activeOrdersCount = 0;
      let unassignedClientsCount = 0;
      let transitCount = 0;
      
      (state.orders || []).forEach(o => {
        const client = (state.clients || []).find(c => c["Client ID"] === o["Client ID"]);
        if (!client || !isClientAccessAllowed(client)) return;
        
        // Active orders: anything not Delivered or Cancelled
        if (o["Order Status"] !== "Delivered" && o["Order Status"] !== "Cancelled") {
          activeOrdersCount++;
        }
        
        if (o["Order Status"] === "Firm Order") {
          firmOrders++;
        }
        if (o["Order Status"] === "In Transit") {
          transitCount++;
        }
      });
      
      // Calculate verifiedRevenue strictly from Verified Payments, excluding Write-Off adjustments
      let verifiedRevenue = (state.payments || []).filter(p => 
        (p["Type"] || "").toString().trim() === "Verified" && 
        (p["Payment Method"] || "") !== "Write-Off (Tolerance)"
      ).reduce((sum, p) => sum + (parseFloat(p["Amount Verified ($)"] !== undefined ? p["Amount Verified ($)"] : p["Amount ($)"]) || 0), 0);
      
      (state.clients || []).forEach(c => {
        if (!c["Assigned Salesperson"] || c["Assigned Salesperson"] === "Unassigned") {
          unassignedClientsCount++;
        }
      });
      
      // Update KPIs
      document.getElementById("kpi-revenue").textContent = `$${verifiedRevenue.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2})}`;
      document.getElementById("kpi-active-orders").textContent = activeOrdersCount;
      document.getElementById("kpi-firm-orders").textContent = `${firmOrders} Firm`;
      document.getElementById("kpi-transit-shipments").textContent = transitCount;
      document.getElementById("kpi-unassigned-clients").textContent = unassignedClientsCount;
      
      // B. Alerts / Needs Attention Engine
      const alertsList = document.getElementById("dashboard-alerts-list");
      alertsList.innerHTML = "";
      
      const alerts = [];
      
      // 1. Confirm Sourcing Alert (Quotes containing "[TO BE CONFIRMED]" or out of stock flag)
      (state.orders || []).forEach(o => {
        const client = (state.clients || []).find(c => c["Client ID"] === o["Client ID"]);
        if (!client || !isClientAccessAllowed(client)) return;
        
        if (o["Order Status"] === "Draft Quote") {
          const itemsSummary = o["Items Summary"] || "";
          if (itemsSummary.includes("CONFIRMED") || itemsSummary.includes("stock to be confirmed") || itemsSummary.includes("Stock to be confirmed")) {
            alerts.push({
              type: "sourcing",
              title: "Confirm Sourced Inventory",
              desc: `Order ${o["Order ID"]} requires verification of farm inventory availability.`,
              orderId: o["Order ID"],
              color: "var(--accent-amber-glow)",
              iconColor: "var(--accent-amber)",
              icon: `<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M13 17H11V15H13V17M13 13H11V7H13V13Z"/></svg>`,
              actionText: "Verify Order",
              action: `openOrderDetails('${o["Order ID"].trim()}')`
            });
          }
        }
      });
      
      // 2. Client followups
      const todayStr = new Date().toISOString().split('T')[0];
      (state.clients || []).forEach(c => {
        const followUpStr = c["Next Follow-Up Date"];
        if (followUpStr) {
          const followUpDateStr = followUpStr.split('T')[0];
          if (followUpDateStr && followUpDateStr <= todayStr) {
            if (!isClientAccessAllowed(c)) return;
            
            alerts.push({
              type: "followup",
              title: "Overdue Client Follow-up",
              desc: `Schedule check-in with ${c["Company Name"]} (Due: ${followUpDateStr})`,
              clientId: c["Client ID"],
              color: "var(--accent-indigo-glow)",
              iconColor: "var(--accent-indigo)",
              icon: `<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4M11,17H13V15H11V17M11,13H13V7H11V13Z"/></svg>`,
              actionText: "Open 360",
              action: `openClientDrawer('${c["Client ID"]}')`
            });
          }
        }
      });
      
      // 3. Unassigned Leads Alert
      state.clients.forEach(c => {
        if (!c["Assigned Salesperson"] || c["Assigned Salesperson"] === "Unassigned") {
          alerts.push({
            type: "unassigned",
            title: "New Unassigned lead",
            desc: `${c["Company Name"]} registered via catalog checkouts. Assignment pending.`,
            clientId: c["Client ID"],
            color: "rgba(255, 255, 255, 0.05)",
            iconColor: "var(--text-secondary)",
            icon: `<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6,8.44 6,9C6,9.56 5.56,10 5,10S4,9.56 4,9C4,8.44 4.44,8 5,8M19,8C19.56,8 20,8.44 20,9C20,9.56 19.56,10 19,10S18,9.56 18,9C18,8.44 18.44,8 19,8M5,15C7.23,15 11,16.22 11,17V19H3V17C3,16.22 6.77,15 9,15M12.03,16.23C13.2,15.65 14.86,15 17,15C19.23,15 23,16.22 23,17V19H13V17C13,16.7 12.63,16.42 12.03,16.23Z"/></svg>`,
            actionText: "Assign Agent",
            action: `openClientDrawer('${c["Client ID"]}', 'profile')`
          });
        }
      });
      
      // 4. Stale Quotes Alert
      const sevenDaysAgo = new Date().getTime() - (7 * 24 * 60 * 60 * 1000);
      (state.orders || []).forEach(o => {
        const status = o["Order Status"];
        if (status === "Draft Quote" || status === "Quote Sent" || status === "Invoice Sent") {
          const orderDate = new Date(o["Last Updated"] || o["Timestamp"]).getTime();
          if (orderDate && orderDate < sevenDaysAgo) {
            const client = (state.clients || []).find(c => c["Client ID"] === o["Client ID"]);
            if (!client || !isClientAccessAllowed(client)) return;
            
            alerts.push({
              type: "stale_quote",
              title: "Stale Quote / Proposal",
              desc: `Order ${o["Order ID"]} for ${client["Company Name"]} has been in ${status} status for over 7 days.`,
              orderId: o["Order ID"],
              clientId: o["Client ID"],
              color: "var(--accent-red-glow)",
              iconColor: "var(--accent-red)",
              icon: `<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/></svg>`,
              actionText: "Follow Up",
              action: `openClientDrawer('${o["Client ID"]}', 'timeline')`
            });
          }
        }
      });
      
      document.getElementById("attention-badge-count").textContent = `${alerts.length} Alerts`;
      
      if (alerts.length === 0) {
        alertsList.innerHTML = `<div style="color: var(--text-secondary); text-align: center; padding: 40px 0;">No pending action alerts. Enjoy the day!</div>`;
      } else {
        alerts.forEach(alert => {
          const item = document.createElement("div");
          item.className = "attention-item";
          item.innerHTML = `
            <div class="attention-icon" style="background: ${alert.color}; color: ${alert.iconColor};">
              ${alert.icon}
            </div>
            <div class="attention-info">
              <div class="attention-title">${alert.title}</div>
              <div class="attention-desc">${alert.desc}</div>
            </div>
            <button class="attention-action-btn" onclick="${alert.action}">${alert.actionText}</button>
          `;
          alertsList.appendChild(item);
        });
      }
      
      // C. Render Funnel Analysis
      const funnelContainer = document.getElementById("dashboard-funnel-container");
      funnelContainer.innerHTML = "";
      
      const pipelineCounts = {
        "Draft Quote": 0,
        "Quote Sent": 0,
        "Invoice Sent": 0,
        "Firm Order": 0,
        "Sourced": 0,
        "In Transit": 0,
        "Delivered": 0
      };
      
      state.orders.forEach(o => {
        const stage = o["Order Status"];
        if (pipelineCounts[stage] !== undefined) {
          pipelineCounts[stage]++;
        }
      });
      
      const maxCount = Math.max(...Object.values(pipelineCounts), 1);
      
      Object.keys(pipelineCounts).forEach(stage => {
        const count = pipelineCounts[stage];
        const percent = (count / maxCount) * 100;
        
        const bar = document.createElement("div");
        bar.className = "pipeline-bar-container";
        bar.innerHTML = `
          <div class="pipeline-bar-label">
            <span>${stage}</span>
            <span style="font-weight:700;">${count} order(s)</span>
          </div>
          <div class="pipeline-bar-bg">
            <div class="pipeline-bar-fill" style="width: ${percent}%; background-color: ${
              stage === 'Draft Quote' ? 'var(--text-muted)' :
              stage === 'Quote Sent' ? 'var(--accent-indigo)' :
              stage === 'Invoice Sent' ? 'var(--accent-indigo)' :
              stage === 'Firm Order' ? 'var(--accent-amber)' :
              'var(--primary)'
            };"></div>
          </div>
        `;
        funnelContainer.appendChild(bar);
      });
    }

    // --- 6. CLIENTS MODULE (360 SEARCH & CREATION) ---
    function populateSalespersonDropdowns() {
      const dropdowns = [
        document.getElementById("client-filter-rep"),
        document.getElementById("drawer-input-salesperson"),
        document.getElementById("m-client-salesperson")
      ];
      
      const usersList = state.users || [];
      const reps = usersList.map(u => u["Name"]);
      
      dropdowns.forEach(drop => {
        if (!drop) return;
        const currentVal = drop.value;
        if (drop.id === "client-filter-rep") {
          drop.innerHTML = `<option value="">All Salespeople</option><option value="Unassigned">Unassigned Leads</option>`;
        } else {
          drop.innerHTML = `<option value="Unassigned">Unassigned</option>`;
        }
        
        usersList.forEach(u => {
          if (u["Active"] === "TRUE" || u["Active"] === true) {
            const opt = document.createElement("option");
            opt.value = u["User ID"];
            opt.textContent = `${u["Name"]} (${u["Role"]})`;
            drop.appendChild(opt);
          }
        });
        
        if (currentVal) drop.value = currentVal;
      });
    }

    function formatPhoneNumber(phone) {
      if (!phone) return "N/A";
      const pStr = String(phone);
      const digits = pStr.replace(/[^\d]/g, '');
      if (digits.length === 11 && digits.startsWith('1')) {
        return `1 ${digits.slice(1,4)} ${digits.slice(4,7)} ${digits.slice(7)}`;
      } else if (digits.length === 10) {
        return `1 ${digits.slice(0,3)} ${digits.slice(3,6)} ${digits.slice(6)}`;
      }
      return pStr.replace(/[^\d+]/g, ' ').replace(/\s+/g, ' ').trim();
    }

    let currentClientSortColumn = null;
    let currentClientSortDirection = 1;

    function sortClientsTable(column) {
      if (currentClientSortColumn === column) {
        currentClientSortDirection *= -1;
      } else {
        currentClientSortColumn = column;
        currentClientSortDirection = 1;
      }
      renderClientsTable();
    }

    function renderClientsTable() {
      const tbody = document.getElementById("clients-table-body");
      tbody.innerHTML = "";
      
      const searchVal = document.getElementById("client-search").value.toLowerCase();
      const statusVal = document.getElementById("client-filter-status").value;
      const repVal = document.getElementById("client-filter-rep").value;
      const buyerTypeVal = document.getElementById("client-filter-buyer-type").value;
      const leadStatusVal = document.getElementById("client-filter-lead-status").value;
      
      const filtered = (state.clients || []).filter(c => {
        const companyName = c["Company Name"] || "";
        const contactName = c["Contact Name"] || "";
        const emailStr = c["Email"] || "";
        const clientId = c["Client ID"] || "";
        
        const matchesSearch = 
          companyName.toLowerCase().includes(searchVal) ||
          contactName.toLowerCase().includes(searchVal) ||
          emailStr.toLowerCase().includes(searchVal) ||
          clientId.toLowerCase().includes(searchVal);
          
         const matchesStatus = statusVal === "" || c["Status"] === statusVal;
         const matchesRep = repVal === "" || 
                            (repVal === "Unassigned" && (!c["Assigned Salesperson"] || c["Assigned Salesperson"] === "Unassigned")) ||
                            c["Assigned Salesperson"] === repVal;
         const matchesBuyerType = buyerTypeVal === "" || c["Buyer Type"] === buyerTypeVal;
         const matchesLeadStatus = leadStatusVal === "" || c["Lead Status"] === leadStatusVal;
         
         return matchesSearch && matchesStatus && matchesRep && matchesBuyerType && matchesLeadStatus;
       });
       
       if (filtered.length === 0) {
         tbody.innerHTML = `<tr><td colspan="13" style="text-align: center; color: var(--text-secondary); padding: 40px 0;">No clients found matching constraints.</td></tr>`;
       }
       
       const countBadge = document.getElementById("clients-count-badge");
       if (countBadge) {
         if (state.activeView === "clients") {
           countBadge.style.display = "inline-flex";
           countBadge.textContent = `${filtered.length} Client${filtered.length !== 1 ? 's' : ''}`;
         } else {
           countBadge.style.display = "none";
         }
       }
      // Pre-calculate fields for sorting if sorting is active
      if (currentClientSortColumn) {
        filtered.forEach(c => {
          if (c._totalSales === undefined) {
            let totalSales = 0;
            (state.orders || []).forEach(o => {
              if (o["Client ID"] === c["Client ID"] && o["Order Status"] !== "Cancelled" && o["Order Status"] !== "Draft Quote") {
                totalSales += Number(o["Total Value"]) || 0;
              }
            });
            c._totalSales = totalSales;
          }
          if (c._repName === undefined) {
            const rep = (state.users || []).find(u => u["User ID"] === c["Assigned Salesperson"]);
            c._repName = rep ? rep["Name"] : (c["Assigned Salesperson"] || "Unassigned");
          }
          if (c._createdDate === undefined) {
            c._createdDate = c["Created Date"] ? new Date(c["Created Date"]).getTime() : 0;
          }
        });

        filtered.sort((a, b) => {
          let valA, valB;
          if (currentClientSortColumn === 'Total Sales') {
            valA = a._totalSales;
            valB = b._totalSales;
          } else if (currentClientSortColumn === 'Assigned Salesperson') {
            valA = a._repName.toLowerCase();
            valB = b._repName.toLowerCase();
          } else if (currentClientSortColumn === 'Created Date') {
            valA = a._createdDate;
            valB = b._createdDate;
          } else {
            valA = (a[currentClientSortColumn] || '').toString().toLowerCase();
            valB = (b[currentClientSortColumn] || '').toString().toLowerCase();
          }
          
          if (valA < valB) return -1 * currentClientSortDirection;
          if (valA > valB) return 1 * currentClientSortDirection;
          return 0;
        });
      }

      // Update Header UI for Sorting
      document.querySelectorAll('#clients-360-table th .resize-handle.sortable').forEach(handle => {
        handle.innerHTML = handle.innerHTML.replace(/( â–²| â–¼)$/, '');
        const onclickAttr = handle.getAttribute('onclick');
        if (onclickAttr && onclickAttr.includes(`'${currentClientSortColumn}'`)) {
          handle.innerHTML += currentClientSortDirection === 1 ? ' â–²' : ' â–¼';
        }
      });
       
       filtered.forEach(c => {
         const tr = document.createElement("tr");
         const isAllowed = isClientAccessAllowed(c);
         
         if (!isAllowed) {
           tr.className = "clickable-row restricted-row";
           tr.onclick = () => {
             showToast("warning", "Access Restricted: This client is assigned to another representative.");
           };
         } else {
           tr.className = "clickable-row";
           tr.onclick = (e) => {
             if (e.target.closest("button") || e.target.closest("a") || e.target.closest("input")) return;
             openClientDrawer(c["Client ID"]);
           };
         }
         
         const rep = (state.users || []).find(u => u["User ID"] === c["Assigned Salesperson"]);
         const repName = rep ? rep["Name"] : (c["Assigned Salesperson"] || "Unassigned");
        
        // Calculate cumulative sales value (excluding Cancelled and Draft Quote stages)
        let totalSales = 0;
        (state.orders || []).forEach(o => {
          if (o["Client ID"] === c["Client ID"] && o["Order Status"] !== "Cancelled" && o["Order Status"] !== "Draft Quote") {
            totalSales += parseFloat(o["Grand Total ($)"]) || 0;
          }
        });
        const totalSalesStr = `$${totalSales.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`;

        const dateStr = c["Created At"] ? new Date(c["Created At"]).toLocaleDateString() : "-";
        
        let statusBadge = "badge-secondary";
        if (c["Status"] === "Active Client") statusBadge = "badge-primary";
        else if (c["Status"] === "Prospect") statusBadge = "badge-indigo";
        
        const emailHtml = isAllowed 
          ? `<a href="mailto:${c["Email"]}" style="color: var(--accent-indigo); text-decoration: none;">${c["Email"]}</a>`
          : `<span style="color: var(--text-secondary);">${maskEmail(c["Email"])}</span>`;
          
        const actionButtonsHtml = isAllowed
          ? `<button class="kanban-action-btn" style="padding:4px 8px;" onclick="openClientDrawer('${c["Client ID"]}')">360 View</button>
             <button class="kanban-action-btn" style="padding:4px 8px; background: var(--accent-indigo-glow); color: var(--accent-indigo); border-color: var(--accent-indigo);" onclick="triggerOutreachEmail('${c["Client ID"]}')">Send Outreach</button>`
          : `<button class="kanban-action-btn" style="padding:4px 8px;" disabled>360 View</button>
             <button class="kanban-action-btn" style="padding:4px 8px;" disabled>Send Outreach</button>`;

        const buyerTypeStr = c["Buyer Type"] || "-";
        const leadStatusStr = c["Lead Status"] || "New lead";

        // Pending Actions Computation
        const pendingAlerts = (state.alerts || []).filter(a => a["Client ID"] === c["Client ID"] && a["Status"] !== "Resolved");
        const pendingCount = pendingAlerts.length;
        const pendingBadge = pendingCount > 0 
          ? `<span class="badge badge-amber">${pendingCount} Action${pendingCount !== 1 ? 's' : ''}</span>` 
          : `<span style="color:var(--text-secondary)">-</span>`;

        // Last Action Computation (Fixed to use state.interactions and Timestamp)
        const comms = (state.interactions || []).filter(cm => cm["Client ID"] === c["Client ID"]).sort((a,b) => new Date(b["Timestamp"]) - new Date(a["Timestamp"]));
        const lastCommDate = comms.length > 0 ? new Date(comms[0]["Timestamp"]).toLocaleDateString() : "-";

        // Outreach Sent Computation
        const clientInteractions = (state.interactions || []).filter(cm => cm["Client ID"] === c["Client ID"]);
        const hasOutreach = clientInteractions.some(cm => 
          cm["Type"] === "Bulk Outreach" || 
          cm["Type"] === "Outreach" || 
          (cm["Notes"] || "").toLowerCase().includes("outreach")
        );
        const outreachSentHtml = hasOutreach 
          ? `<span style="color:var(--accent-emerald); font-weight:bold;">Y</span>` 
          : `<span style="color:var(--text-muted);">N</span>`;

        const isChecked = state.selectedBulkClientIds && state.selectedBulkClientIds.includes(c["Client ID"]) ? "checked" : "";
        
        tr.innerHTML = `
          <td style="text-align:center;">
            <input type="checkbox" class="bulk-client-check" value="${c["Client ID"]}" ${isChecked} onchange="toggleBulkOutreachClient(this)">
          </td>
          <td><strong style="color:var(--text-secondary);">${c["Client ID"]}</strong></td>
          <td>${c["Company Name"]}</td>
          <td>${c["Contact Name"]}</td>
          <td>${formatPhoneNumber(c["Phone"])}</td>
          <td>${emailHtml}</td>
          <td>${buyerTypeStr}</td>
          <td style="text-align:center;">${outreachSentHtml}</td>
          <td><span class="badge badge-indigo">${leadStatusStr}</span></td>
          <td><span class="badge ${statusBadge}">${c["Status"]}</span></td>
          <td>${repName}</td>
          <td style="color: var(--primary);">${totalSalesStr}</td>
          <td>${pendingBadge}</td>
          <td>${lastCommDate}</td>
          <td>${dateStr}</td>
          <td>
            <div class="table-actions">
              ${actionButtonsHtml}
            </div>
          </td>
        `;
        tbody.appendChild(tr);
      });
      
      // Initialize Top Scrollbar Synchronization
      const topWrapper = document.getElementById("clients-top-scrollbar-wrapper");
      const tableWrapper = document.getElementById("clients-table-wrapper");
      const topContent = document.getElementById("clients-top-scrollbar-content");
      if (topWrapper && tableWrapper && topContent) {
        const tableEl = tableWrapper.querySelector("table");
        if (tableEl) {
          topContent.style.width = tableEl.offsetWidth + "px";
          
          topWrapper.onscroll = null;
          tableWrapper.onscroll = null;
          
          let isSyncingLeft = false;
          let isSyncingRight = false;
          
          topWrapper.onscroll = function() {
            if (!isSyncingLeft) {
              isSyncingRight = true;
              tableWrapper.scrollLeft = this.scrollLeft;
            }
            isSyncingLeft = false;
          };
          
          tableWrapper.onscroll = function() {
            if (!isSyncingRight) {
              isSyncingLeft = true;
              topWrapper.scrollLeft = this.scrollLeft;
            }
            isSyncingRight = false;
          };
        }
      }
    }

    function updateDrawerContactRequired() {
      const leadStatus = document.getElementById("drawer-input-lead-status").value;
      const contactInput = document.getElementById("drawer-input-contact");
      const label = contactInput.previousElementSibling;
      if (leadStatus === "New lead") {
        contactInput.removeAttribute("required");
        if (label) label.innerHTML = "Contact Name";
      } else {
        contactInput.setAttribute("required", "required");
        if (label) label.innerHTML = "Contact Name <span style='color: #ef4444;'>*</span>";
      }
    }

    function updateModalContactRequired() {
      const leadStatus = document.getElementById("m-client-lead-status").value;
      const contactInput = document.getElementById("m-client-contact");
      const label = contactInput.previousElementSibling;
      if (leadStatus === "New lead") {
        contactInput.removeAttribute("required");
        if (label) label.innerHTML = "Contact Name";
      } else {
        contactInput.setAttribute("required", "required");
        if (label) label.innerHTML = "Contact Name <span style='color: #ef4444;'>*</span>";
      }
    }

    function openNewClientModal() {
      populateSalespersonDropdowns();
      document.getElementById("m-client-lead-status").value = "New lead";
      updateModalContactRequired();
      toggleModal("client", true);
    }

    function toggleModal(modalName, show) {
      const modal = document.getElementById(`modal-${modalName}-backdrop`);
      if (modal) {
        if (show) modal.classList.add("active");
        else modal.classList.remove("active");
      }
    }

    function toggleCostingBreakdown() {
      var details = document.getElementById("m-order-costing-details");
      var chevron = document.getElementById("m-order-costing-chevron");
      if (details.style.display === "none") {
        details.style.display = "block";
        chevron.style.transform = "rotate(180deg)";
      } else {
        details.style.display = "none";
        chevron.style.transform = "rotate(0deg)";
      }
    }

    function submitNewClient(e) {
      e.preventDefault();
      
      const clientPayload = {
        companyName: document.getElementById("m-client-company").value,
        contactName: document.getElementById("m-client-contact").value,
        email: document.getElementById("m-client-email").value,
        phone: document.getElementById("m-client-phone").value,
        assignedSalesperson: document.getElementById("m-client-salesperson").value,
        status: "Prospect",
        buyerType: document.getElementById("m-client-buyer-type").value,
        leadStatus: document.getElementById("m-client-lead-status").value,
        website: document.getElementById("m-client-website").value,
        nextFollowUpDate: document.getElementById("m-client-next-followup").value,
        effectiveCall: "",
        lastContactDate: ""
      };
      
      showGlobalLoading(true, "Registering profile...");
      
      postPayload({
        action: "updateClient",
        userId: state.user.userId,
        passcode: state.passcode,
        client: clientPayload
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", "Client profile created successfully.");
          toggleModal("client", false);
          document.getElementById("new-client-form").reset();
          
          if (state.isDemoMode) {
            // Local mockup addition
            clientPayload.clientId = res.clientId || "CLI-LOCAL-" + Math.floor(Math.random()*1000);
            clientPayload.createdAt = new Date().toISOString();
            state.clients.push(clientPayload);
            renderClientsTable();
          } else {
            fetchLiveDatabase();
          }
        } else {
          showToast("error", res.message || "Could not register client.");
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Network execution failed.");
      });
    }

    // --- 7. 360 CLIENT SIDE-OVER DRAWER CONTROL ---
    function openClientDrawer(clientId, targetPane = "profile") {
      state.selectedClientId = clientId;
      const client = state.clients.find(c => c["Client ID"] === clientId);
      if (!client) return;
      
      if (!isClientAccessAllowed(client)) {
        showToast("warning", "Access Restricted: This client is assigned to another representative.");
        return;
      }
      
      // A. Populate Header
      document.getElementById("drawer-company-name").textContent = client["Company Name"];
      document.getElementById("drawer-client-id").textContent = client["Client ID"];
      
      // B. Populate profile fields
      document.getElementById("drawer-input-company").value = client["Company Name"] || "";
      document.getElementById("drawer-input-contact").value = client["Contact Name"] || "";
      document.getElementById("drawer-input-email").value = client["Email"] || "";
      document.getElementById("drawer-input-phone").value = client["Phone"] || "";
      document.getElementById("drawer-input-contact2").value = client["Contact 2"] || "";
      document.getElementById("drawer-input-email2").value = client["Email 2"] || "";
      document.getElementById("drawer-input-phone2").value = client["Phone 2"] || "";
      document.getElementById("drawer-input-ap-contact").value = client["AP Contact"] || "";
      document.getElementById("drawer-input-ap-email").value = client["AP Email"] || "";
      document.getElementById("drawer-input-billing").value = client["Billing Address"] || "";
      document.getElementById("drawer-input-shipping").value = client["Shipping Address"] || "";
      document.getElementById("drawer-input-resale-num").value = client["Resale Certificate Number"] || "";
      document.getElementById("drawer-input-resale-link").value = client["Resale Certificate Link"] || "";
      document.getElementById("drawer-input-status").value = client["Status"] || "Prospect";
      
      document.getElementById("drawer-input-buyer-type").value = client["Buyer Type"] || "";
      document.getElementById("drawer-input-lead-status").value = client["Lead Status"] || "New lead";
      updateDrawerContactRequired();
      document.getElementById("drawer-input-effective-call").value = client["Effective Call"] || "";
      document.getElementById("drawer-input-website").value = client["Website"] || "";
      document.getElementById("drawer-input-last-contact").value = formatDateForInput(client["Last Contact Date"]);
      document.getElementById("drawer-input-next-followup").value = formatDateForInput(client["Next Follow-Up Date"]);
      
      // Populate salesperson assignment
      populateSalespersonDropdowns();
      document.getElementById("drawer-input-salesperson").value = client["Assigned Salesperson"] || "Unassigned";
      
      // Disable assignment for agents
      if (state.user.role !== "Admin") {
        document.getElementById("drawer-input-salesperson").disabled = true;
      } else {
        document.getElementById("drawer-input-salesperson").disabled = false;
      }
      
      // C. Render Timeline pane
      renderClientTimeline(clientId);
      
      // D. Render sales history
      renderClientOrders(clientId);
      
      // E. Show Drawer
      document.getElementById("client-drawer-backdrop").classList.add("active");
      document.getElementById("client-drawer").classList.add("active");
      
      // Set active tab
      const tabButton = Array.from(document.querySelectorAll(".drawer-tab")).find(b => b.onclick.toString().includes(targetPane));
      if (tabButton) {
        switchDrawerTab(targetPane, tabButton);
      }
    }

    function closeClientDrawer() {
      document.getElementById("client-drawer-backdrop").classList.remove("active");
      document.getElementById("client-drawer").classList.remove("active");
      state.selectedClientId = null;
    }

    function switchDrawerTab(paneName, element) {
      document.querySelectorAll(".drawer-tab").forEach(tab => tab.classList.remove("active"));
      element.classList.add("active");
      
      document.querySelectorAll(".drawer-pane").forEach(pane => pane.classList.remove("active"));
      document.getElementById(`drawer-pane-${paneName}`).classList.add("active");
    }

    function saveClientProfile(e) {
      e.preventDefault();
      
      const client = state.clients.find(c => c["Client ID"] === state.selectedClientId);
      if (!client) return;
      
      const payload = {
        clientId: client["Client ID"],
        companyName: document.getElementById("drawer-input-company").value,
        contactName: document.getElementById("drawer-input-contact").value,
        email: document.getElementById("drawer-input-email").value,
        phone: document.getElementById("drawer-input-phone").value,
        contact2: document.getElementById("drawer-input-contact2").value,
        email2: document.getElementById("drawer-input-email2").value,
        phone2: document.getElementById("drawer-input-phone2").value,
        apContact: document.getElementById("drawer-input-ap-contact").value,
        apEmail: document.getElementById("drawer-input-ap-email").value,
        billingAddress: document.getElementById("drawer-input-billing").value,
        shippingAddress: document.getElementById("drawer-input-shipping").value,
        resaleCertificateNum: document.getElementById("drawer-input-resale-num").value,
        resaleCertificateLink: document.getElementById("drawer-input-resale-link").value,
        status: document.getElementById("drawer-input-status").value,
        assignedSalesperson: document.getElementById("drawer-input-salesperson").value,
        buyerType: document.getElementById("drawer-input-buyer-type").value,
        leadStatus: document.getElementById("drawer-input-lead-status").value,
        effectiveCall: document.getElementById("drawer-input-effective-call").value,
        website: document.getElementById("drawer-input-website").value,
        lastContactDate: document.getElementById("drawer-input-last-contact").value,
        nextFollowUpDate: document.getElementById("drawer-input-next-followup").value
      };
      
      showGlobalLoading(true, "Saving profile changes...");
      
      postPayload({
        action: "updateClient",
        userId: state.user.userId,
        passcode: state.passcode,
        client: payload
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", "Client profile updated.");
          if (state.isDemoMode) {
            // Local mockup apply
            client["Company Name"] = payload.companyName;
            client["Contact Name"] = payload.contactName;
            client["Email"] = payload.email;
            client["Phone"] = payload.phone;
            client["Contact 2"] = payload.contact2;
            client["Email 2"] = payload.email2;
            client["Phone 2"] = payload.phone2;
            client["AP Contact"] = payload.apContact;
            client["AP Email"] = payload.apEmail;
            client["Billing Address"] = payload.billingAddress;
            client["Shipping Address"] = payload.shippingAddress;
            client["Resale Certificate Number"] = payload.resaleCertificateNum;
            client["Resale Certificate Link"] = payload.resaleCertificateLink;
            client["Status"] = payload.status;
            client["Assigned Salesperson"] = payload.assignedSalesperson;
            client["Buyer Type"] = payload.buyerType;
            client["Lead Status"] = payload.leadStatus;
            client["Effective Call"] = payload.effectiveCall;
            client["Website"] = payload.website;
            client["Last Contact Date"] = payload.lastContactDate;
            client["Next Follow-Up Date"] = payload.nextFollowUpDate;
            renderClientsTable();
          } else {
            fetchLiveDatabase();
          }
        } else {
          showToast("error", res.message || "Failed to save profile.");
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Connection error during save.");
      });
    }

    function renderClientTimeline(clientId) {
      const container = document.getElementById("drawer-timeline-list");
      container.innerHTML = "";
      
      // Filter client's interactions
      const filtered = state.interactions
        .filter(int => int["Client ID"] === clientId)
        .sort((a, b) => new Date(b["Timestamp"]) - new Date(a["Timestamp"]));
        
      if (filtered.length === 0) {
        container.innerHTML = `<div style="text-align: center; color: var(--text-muted); font-size: 13px; padding: 20px 0;">No communications logged yet. Let's record one!</div>`;
        return;
      }
      
      filtered.forEach(int => {
        const node = document.createElement("div");
        
        let typeClass = "internal";
        let iconSvg = `<svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20M13 11V7H11V11H7V13H11V17H13V13H17V11H13Z"/></svg>`; // note
        
        if (int["Type"] === "Catalog Quote" || int["Type"] === "Email Sent") {
          typeClass = "catalog-quote";
          iconSvg = `<svg viewBox="0 0 24 24"><path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z"/></svg>`; // envelope
        } else if (int["Type"] === "Payment") {
          typeClass = "payment";
          iconSvg = `<svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 4C14.2 4 16 5.8 16 8S14.2 12 12 12 8 10.2 8 8 9.8 4 12 4M12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.98 10 12.9 12 12.9C13.97 12.9 17.97 13.98 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z"/></svg>`; // user payment
        } else if (int["Type"] === "Delivery" || int["Type"] === "Logistics") {
          typeClass = "delivery";
          iconSvg = `<svg viewBox="0 0 24 24"><path d="M20 8H17V4H3C1.89 4 1 4.89 1 6V17H3C3 18.66 4.34 20 6 20S9 18.66 9 17H15C15 18.66 16.34 20 17 20S20 18.66 20 17H22V12L20 8M6 18.5C5.17 18.5 4.5 17.83 4.5 17S5.17 15.5 6 15.5 7.5 16.17 7.5 17 6.83 18.5 6 18.5M17 18.5C16.17 18.5 15.5 17.83 15.5 17S16.17 15.5 17 15.5 18.5 16.17 18.5 17 17.83 18.5 17 18.5M17 12V9.5H19.5L20.8 12H17Z"/></svg>`; // truck
        } else if (int["Type"] === "Email") {
          typeClass = "catalog-quote";
          iconSvg = `<svg viewBox="0 0 24 24"><path d="M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,22H4C2.9,22 2,21.1 2,20V6A2,2 0 0,1 4,4M4,6V18H20V6H4M6,9H18V11H6V9M6,13H14V15H6V13Z"/></svg>`; // thread
        }
        
        node.className = `timeline-node ${typeClass}`;
        
        const dateObj = new Date(int["Timestamp"]);
        const day = dateObj.getDate();
        const month = dateObj.toLocaleString('en-US', { month: 'short' }).toUpperCase();
        const timestamp = dateObj.toLocaleString();
        
        node.innerHTML = `
          <div class="timeline-marker" title="${int["Type"]}">
            <span style="font-size: 16px; font-weight: 700; color: #fff; line-height: 1.1;">${day}</span>
            <span style="font-size: 9px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); line-height: 1.1;">${month}</span>
          </div>
          <div class="timeline-content-card">
            <div class="timeline-meta">
              <span class="timeline-actor">${int["Salesperson ID"] || "SYSTEM"} (${int["Type"]})</span>
              <span>${timestamp}</span>
            </div>
            <div class="timeline-text">${int["Notes"]}</div>
            ${int["Follow-up Date"] ? `<div style="font-size:11px; margin-top:6px; color:var(--accent-indigo); font-weight:600;">&#9200; Target Follow-up: ${int["Follow-up Date"]}</div>` : ''}
          </div>
        `;
        container.appendChild(node);
      });
    }

    function renderClientOrders(clientId) {
      const list = document.getElementById("drawer-orders-list");
      list.innerHTML = "";
      
      const clientOrders = state.orders.filter(o => o["Client ID"] === clientId);
      if (clientOrders.length === 0) {
        list.innerHTML = `<div style="text-align: center; color: var(--text-muted); padding: 20px 0;">No sales history exists.</div>`;
        return;
      }
      
      clientOrders.forEach(o => {
        const card = document.createElement("div");
        card.className = "attention-item clickable-row";
        card.onclick = () => openOrderDetails(o["Order ID"]);
        
        const price = parseFloat(o["Grand Total ($)"]) || 0;
        
        let statusColor = "badge-secondary";
        if (o["Order Status"] === "Draft Quote" || o["Order Status"] === "Quote Sent") statusColor = "badge-secondary";
        else if (o["Order Status"] === "Invoice Sent") statusColor = "badge-indigo";
        else if (o["Order Status"] === "Firm Order" || o["Order Status"] === "Sourced") statusColor = "badge-amber";
        else if (o["Order Status"] === "In Transit" || o["Order Status"] === "Delivered") statusColor = "badge-primary";
        
        card.innerHTML = `
          <div class="attention-info">
            <div class="attention-title" style="display:flex; justify-content:space-between;">
              <span>Order #${getOrderDisplayId(o)}</span>
              <span style="font-family: var(--font-display);">${formatCurrency(price)}</span>
            </div>
            <div class="attention-desc" style="display:flex; justify-content:space-between; margin-top:4px;">
              <span>Delivery: ${(o["Delivery Date"] || "").split("T")[0]} (${(o["Incoterms"]||"").includes("CIF") ? "FOB Miami" : "FOB Quito"})</span>
              <span class="badge ${statusColor}">${getStatusDisplayName(o["Order Status"])}</span>
            </div>
          </div>
        `;
        list.appendChild(card);
      });
    }

    function submitCrmInteraction(e) {
      e.preventDefault();
      
      const type = document.getElementById("log-inter-type").value;
      const notes = document.getElementById("log-inter-notes").value;
      const followUp = document.getElementById("log-inter-followup").value;
      const callOutcome = document.getElementById("log-inter-call-outcome").value;
      
      showGlobalLoading(true, "Logging interaction...");
      
      const payload = {
        action: "logInteraction",
        userId: state.user.userId,
        passcode: state.passcode,
        clientId: state.selectedClientId,
        type: type,
        notes: notes,
        followUpDate: followUp,
        callOutcome: (type === "Phone Call") ? callOutcome : ""
      };
      
      postPayload(payload)
        .then(res => {
          showGlobalLoading(false);
          if (res.success) {
            showToast("success", "Interaction logged successfully.");
            document.getElementById("log-inter-notes").value = "";
            document.getElementById("log-inter-followup").value = "";
            document.getElementById("log-inter-call-outcome").value = "";
            if (document.getElementById("call-outcome-container")) {
              document.getElementById("call-outcome-container").style.display = "none";
            }
            
            if (state.isDemoMode) {
              const finalNotes = (type === "Phone Call" && callOutcome) ? `[Call Outcome: ${callOutcome}] ${notes}` : notes;
              state.interactions.push({
                "Interaction ID": "INT-LOCAL-" + Math.floor(Math.random()*1000),
                "Client ID": state.selectedClientId,
                "Timestamp": new Date().toISOString(),
                "Type": type,
                "Notes": finalNotes,
                "Salesperson ID": state.user.userId,
                "Follow-up Date": followUp
              });
              
              const client = state.clients.find(c => c["Client ID"] === state.selectedClientId);
              if (client) {
                client["Last Contact Date"] = new Date().toISOString();
                if (followUp) client["Next Follow-Up Date"] = followUp;
                if (type === "Phone Call" && callOutcome) client["Effective Call"] = callOutcome;
                if (client["Lead Status"] === "New lead" || !client["Lead Status"]) {
                  client["Lead Status"] = "Contacted";
                }
              }
              renderClientTimeline(state.selectedClientId);
              renderClientsTable();
            } else {
              fetchLiveDatabase();
            }
          } else {
            showToast("error", res.message || "Failed to log interaction.");
          }
        })
        .catch(() => {
          showGlobalLoading(false);
          showToast("error", "Error contacting API.");
        });
    }

    // --- 8. ORDERS & PIPELINE CONTROLLER ---
    function setOrdersLayout(mode) {
      state.ordersLayout = mode;
      document.getElementById("btn-toggle-kanban").classList.toggle("active", mode === "kanban");
      document.getElementById("btn-toggle-table").classList.toggle("active", mode === "table");
      
      document.getElementById("orders-kanban-layout").style.display = (mode === "kanban") ? "block" : "none";
      document.getElementById("orders-table-layout").style.display = (mode === "table") ? "block" : "none";
      
      renderOrdersView();
    }

    function renderOrdersView() {
      const searchVal = document.getElementById("order-search").value.toLowerCase();
      const incotermFilter = document.getElementById("order-filter-incoterm").value;
      
      // Filter list
      const filtered = (state.orders || []).filter(o => {
        const client = (state.clients || []).find(c => c["Client ID"] === o["Client ID"]);
        if (!client || !isClientAccessAllowed(client)) return false; // Filter unauthorized clients' orders
        
        if (o["Order Status"] === "Cancelled") return false; // Hide cancelled orders from Kanban
        
        const clientName = client["Company Name"] || "";
        
        const matchesSearch = 
          o["Order ID"].toLowerCase().includes(searchVal) ||
          o["Incoterms"].toLowerCase().includes(searchVal) ||
          clientName.toLowerCase().includes(searchVal) ||
          o["Client ID"].toLowerCase().includes(searchVal);
          
        const matchesIncoterm = incotermFilter === "" || o["Incoterms"].includes(incotermFilter);
        
        return matchesSearch && matchesIncoterm;
      });
      
      if (state.ordersLayout === "kanban") {
        renderKanban(filtered);
      } else {
        renderOrdersTable(filtered);
      }
    }

    function renderKanban(filteredOrders) {
      // Clear columns
      const stages = ["Draft Quote", "Quote Sent", "Invoice Sent", "Firm Order", "Sourced", "In Transit", "Delivered", "Cancelled"];
      stages.forEach(st => {
        const id = st.replace(/\s+/g, "");
        document.getElementById(`cards-${id}`).innerHTML = "";
        document.getElementById(`count-${id}`).textContent = "0";
      });
      
      const counts = { "Draft Quote": 0, "Quote Sent": 0, "Invoice Sent": 0, "Firm Order": 0, "Sourced": 0, "In Transit": 0, "Delivered": 0, "Cancelled": 0 };
      
      filteredOrders.forEach(o => {
        const stage = o["Order Status"] || "Draft Quote";
        const id = stage.replace(/\s+/g, "");
        const column = document.getElementById(`cards-${id}`);
        if (!column) return;
        
        counts[stage]++;
        
        const client = state.clients.find(c => c["Client ID"] === o["Client ID"]);
        const clientName = client ? client["Company Name"] : o["Client ID"];
        
        let price = parseFloat(o["Grand Total ($)"]) || 0;
        
        if (stage === "Draft Quote") {
          let rawPayloadItems = [];
          if (o["Raw JSON Payload"]) {
            try {
              const raw = JSON.parse(o["Raw JSON Payload"]);
              if (raw.items && Array.isArray(raw.items)) rawPayloadItems = raw.items;
            } catch(e) {}
          }
          const lines = String(o["Items Summary"] || "").split("\n").filter(l => l.trim() !== "");
          const parsedItems = [];
          lines.forEach(line => {
            const match = line.match(/^(\d+)[xX]\s+(.+?)\s*\((\d+)\s*cm\)/);
            if (match) {
              const qty = parseInt(match[1]) || 0;
              const variety = match[2].trim();
              const stem = parseInt(match[3]) || 0;
              const matchedRaw = rawPayloadItems.find(ri => ri && ri.variety && String(ri.variety).toUpperCase().trim() === String(variety).toUpperCase().trim() && parseInt(ri.stem) === stem);
              parsedItems.push({ qty: qty, variety: variety, stem: stem, price: matchedRaw ? (matchedRaw.price || matchedRaw.pricePerStem || matchedRaw.clientPricePerStem) : undefined });
            }
          });
          const sumEstimated = calculateEstimatedPricing(parsedItems, String(o["Delivery Date"] || ""), String(o["Incoterms"] || "CIF MIA"));
          if (sumEstimated > 0) {
            price = sumEstimated;
          }
        }
        
        const card = document.createElement("div");
        card.className = "kanban-card";
        card.onclick = () => openOrderDetails(o["Order ID"]);
        
        const { outstandingVerified } = getOrderPaymentSummary(o["Order ID"], price);

        let payBadge = "badge-secondary";
        if (o["Payment Status"] === "Payment Verified") payBadge = "badge-primary";
        else if (o["Payment Status"] === "Payment Confirmed") payBadge = "badge-amber";
        else if (o["Payment Status"] === "Partially Paid") payBadge = "badge-amber";
        
        let outstandingHtml = "";
        if (outstandingVerified > 0 && outstandingVerified < price) {
          outstandingHtml = `<div style="color:#ef4444; font-size:11px; font-weight:600; margin-top:4px;">Bal: ${formatCurrency(outstandingVerified)} Outstanding</div>`;
        }
        
        const tsRaw = o["Last Updated"];
        let reqHtml = "";
        if (tsRaw) {
          const d = new Date(tsRaw);
          if (!isNaN(d.getTime())) {
            const localDate = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, '0') + "-" + String(d.getDate()).padStart(2, '0');
            const localTime = String(d.getHours()).padStart(2, '0') + ":" + String(d.getMinutes()).padStart(2, '0');
            if (o["Order Status"] === "Draft Quote") {
              reqHtml = `<div style="color:var(--text-secondary); font-size:11px; margin-top:4px;">Req: ${localDate}-T${localTime}</div>`;
            } else if (o["Order Status"] === "Quote Sent" || o["Order Status"] === "Invoice Sent") {
              reqHtml = `<div style="color:var(--text-secondary); font-size:11px; margin-top:4px;">Sent: ${localDate}-T${localTime}</div>`;
            }
          }
        }
        
        card.innerHTML = `
          <div class="kanban-card-id">
            <span>${getOrderDisplayId(o)}</span>
            <span class="badge ${(o["Incoterms"]||"").includes("CIF") ? 'badge-primary' : 'badge-amber'}" style="font-size:9px; padding:2px 6px;">${(o["Incoterms"]||"").includes("CIF") ? "FOB Miami" : "FOB Quito"}</span>
          </div>
          <div class="kanban-card-company">${clientName}</div>
          <div class="kanban-card-details">
            <span>Del: ${(o["Delivery Date"] || "").split("T")[0]}</span>
            <span class="kanban-card-price">${formatCurrency(price)}</span>
          </div>
          <div style="display:flex; justify-content:space-between; align-items:center;">
            <span class="badge ${payBadge}" style="font-size:9px; padding:2px 6px;">${o["Payment Status"]}</span>
          </div>
          ${reqHtml}
          ${outstandingHtml}
          
          <div class="kanban-card-actions">
            ${stage === "Draft Quote" ? `<button class="kanban-action-btn" onclick="event.stopPropagation(); openOrderDetails('${o["Order ID"].trim()}')">Approve Quote</button>` : ''}
            ${stage === "Quote Sent" ? `<button class="kanban-action-btn" onclick="event.stopPropagation(); triggerInvoiceConfirm('${o["Order ID"].trim()}')">Send Proforma (Request Payment)</button>` : ''}
            ${stage === "Invoice Sent" ? `<button class="kanban-action-btn" onclick="event.stopPropagation(); triggerPaymentConfirm('${o["Order ID"].trim()}', getOrderPaymentSummary('${o["Order ID"].trim()}', ${price}).outstandingConfirmed)">Confirm Pay</button>` : ''}
            ${(getOrderPaymentSummary(o["Order ID"].trim(), price).totalConfirmed >= price - Math.max(0.50, Math.min(price * 0.001, 20))) || o["Payment Status"] === "Payment Confirmed" ? `<button class="kanban-action-btn" style="background:var(--primary-glow); border-color:var(--primary); color:var(--primary);" onclick="event.stopPropagation(); triggerPaymentVerify('${o["Order ID"].trim()}', getOrderPaymentSummary('${o["Order ID"].trim()}', ${price}).outstandingVerified)">Verify Funds</button>` : ''}
            ${stage === "Firm Order" || stage === "Sourced" || stage === "In Transit" ? `<button class="kanban-action-btn" onclick="event.stopPropagation(); triggerLogisticsUpdate('${o["Order ID"].trim()}')">Logistics</button>` : ''}
          </div>
        `;
        column.appendChild(card);
      });
      
      // Update headers
      stages.forEach(st => {
        const id = st.replace(/\s+/g, "");
        document.getElementById(`count-${id}`).textContent = counts[st];
      });
    }

    function renderOrdersTable(filteredOrders) {
      const tbody = document.getElementById("orders-table-body");
      tbody.innerHTML = "";
      
      if (filteredOrders.length === 0) {
        tbody.innerHTML = `<tr><td colspan="9" style="text-align: center; color: var(--text-secondary); padding: 40px 0;">No orders found.</td></tr>`;
        return;
      }
      
      filteredOrders.forEach(o => {
        const client = state.clients.find(c => c["Client ID"] === o["Client ID"]);
        const clientName = client ? client["Company Name"] : o["Client ID"];
        
        const price = parseFloat(o["Grand Total ($)"]) || 0;
        const tr = document.createElement("tr");
        tr.className = "clickable-row";
        tr.onclick = () => openOrderDetails(o["Order ID"]);
        
        let statusBadge = "badge-secondary";
        if (o["Order Status"] === "Draft Quote" || o["Order Status"] === "Quote Sent") statusBadge = "badge-secondary";
        else if (o["Order Status"] === "Invoice Sent") statusBadge = "badge-indigo";
        else if (o["Order Status"] === "Firm Order" || o["Order Status"] === "Sourced") statusBadge = "badge-amber";
        else if (o["Order Status"] === "In Transit" || o["Order Status"] === "Delivered") statusBadge = "badge-primary";
        else if (o["Order Status"] === "Cancelled") statusBadge = "badge-crimson";
        
        const { outstandingVerified } = getOrderPaymentSummary(o["Order ID"], price);
        
        let payBadge = "badge-secondary";
        if (o["Payment Status"] === "Payment Verified") payBadge = "badge-primary";
        else if (o["Payment Status"] === "Payment Confirmed") payBadge = "badge-amber";
        else if (o["Payment Status"] === "Partially Paid") payBadge = "badge-amber";
        
        let payStatusText = o["Payment Status"];
        if (outstandingVerified > 0 && outstandingVerified < price) {
          payStatusText += ` (Bal: ${formatCurrency(outstandingVerified)})`;
        }
        
        const dateStr = o["Last Updated"] ? new Date(o["Last Updated"]).toLocaleDateString() : "-";
        
        tr.innerHTML = `
          <td><strong>${getOrderDisplayId(o)}</strong></td>
          <td style="font-weight:600;">${clientName}</td>
          <td>${(o["Delivery Date"] || "").split("T")[0]}</td>
          <td><span class="badge ${(o["Incoterms"]||"").includes("CIF") ? 'badge-primary' : 'badge-amber'}">${(o["Incoterms"]||"").includes("CIF") ? "FOB Miami" : "FOB Quito"}</span></td>
          <td style="font-family:var(--font-display); font-weight:700;">${formatCurrency(price)}</td>
          <td><span class="badge ${statusBadge}">${getStatusDisplayName(o["Order Status"])}</span></td>
          <td><span class="badge ${payBadge}">${payStatusText}</span></td>
          <td>${dateStr}</td>
          <td>
            <div class="table-actions">
              <button class="kanban-action-btn" style="padding:4px 8px;" onclick="event.stopPropagation(); openOrderDetails('${o["Order ID"].trim()}')">Details</button>
            </div>
          </td>
        `;
        tbody.appendChild(tr);
      });
    }

    // --- 9. ORDER WORKFLOW ACTIONS ---
    function triggerInvoiceConfirm(orderId) {
      if (state.isDemoMode) {
        // Skip preview in demo mode for simplicity, just execute
        executeInvoiceConfirm(orderId);
        return;
      }
      showGlobalLoading(true, "Generating preview...");
      postPayload({
        action: "previewInvoice",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: orderId
      }).then(res => {
        showGlobalLoading(false);
        if (res.success && res.html) {
          document.getElementById("m-invoice-preview-order-id").value = orderId;
          document.getElementById("m-invoice-preview-order-id-display").textContent = orderId;
          const iframe = document.getElementById("m-invoice-preview-iframe");
          iframe.srcdoc = res.html;
          toggleModal("invoice-preview", true);
        } else {
          showToast("error", "Failed to generate preview: " + (res.message || "Unknown error"));
        }
      }).catch(err => {
        showGlobalLoading(false);
        showToast("error", "Network error. Check connection.");
      });
    }

    window.editLineItemsFromPreview = function() {
      const orderId = document.getElementById("m-invoice-preview-order-id").value;
      if (!orderId) return;
      toggleModal("invoice-preview", false);
      openLineItemEditor(orderId);
    };

    window.executeInvoiceConfirm = function(optionalOrderId) {
      const orderId = optionalOrderId || document.getElementById("m-invoice-preview-order-id").value;
      if (!orderId) return;
      
      const mercuryLinkInput = document.getElementById("m-invoice-preview-mercury-link");
      const mercuryLink = mercuryLinkInput ? mercuryLinkInput.value.trim() : "";
      
      toggleModal("invoice-preview", false);
      showGlobalLoading(true, "Sending invoice email...");
      postPayload({
        action: "confirmInvoice",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: orderId,
        mercuryPaymentLink: mercuryLink
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", `Invoice marked as sent for Order ${orderId}. Gmail draft updated.`);
          if (state.isDemoMode) {
            const order = state.orders.find(o => o["Order ID"] === orderId);
            if (order) {
              order["Order Status"] = "Invoice Sent";
              order["Last Updated"] = new Date().toISOString();
              
              // Log interaction note
              state.interactions.push({
                "Interaction ID": "INT-LOCAL-" + Math.floor(Math.random()*1000),
                "Client ID": order["Client ID"],
                "Timestamp": new Date().toISOString(),
                "Type": "Internal Note",
                "Notes": "Invoice drafted and sent by salesperson " + state.user.name,
                "Salesperson ID": state.user.userId,
                "Follow-up Date": ""
              });
            }
            renderOrdersView();
          } else {
            fetchLiveDatabase();
          }
        } else {
          showToast("error", res.message || "Failed to confirm invoice.");
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Failed to contact database.");
      });
    }

    function triggerCancelOrder(orderId) {
      showGlobalLoading(true, "Cancelling order...");
      postPayload({
        action: "cancelOrder",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: orderId
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", `Order ${orderId} has been cancelled.`);
          if (state.isDemoMode) {
            const order = state.orders.find(o => o["Order ID"] === orderId);
            if (order) order["Order Status"] = "Cancelled";
            renderOrdersView();
          } else {
            fetchLiveDatabase();
          }
        } else {
          showToast("error", res.message || "Failed to cancel order.");
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Database sync failed.");
      });
    }

    function triggerPaymentConfirm(orderId, outstanding) {
      document.getElementById("m-pay-title").textContent = "Confirm Expected Payment";
      document.getElementById("m-pay-submit-btn").textContent = "Confirm Pay Note";
      document.getElementById("m-pay-mode").value = "confirm";
      document.getElementById("m-pay-order-id").value = orderId;
      
      var contentHtml = `
        <div class="form-group">
          <label>Payment Amount Confirmed ($) *</label>
          <input type="number" step="0.01" id="m-pay-amount" value="${outstanding || 0}" required>
        </div>
        <div class="form-group">
          <label>Payment Method *</label>
          <select id="m-pay-method">
            <option value="Bank Transfer">Bank Transfer (ACH/Wire)</option>
            <option value="Credit Card / Stripe">Credit Card / Stripe</option>
            <option value="Credit Note">Credit Note</option>
          </select>
        </div>
        <div class="form-group">
          <label>Confirmation Reference ID *</label>
          <input type="text" id="m-pay-ref" required placeholder="Client wire reference or receipt details">
        </div>
        <input type="hidden" id="m-pay-selected-id" value="">
      `;
      
      document.getElementById("m-pay-body-content").innerHTML = contentHtml;
      toggleModal("payregistry", true);
    }

    function triggerPaymentVerify(orderId, outstandingAmount) {
      document.getElementById("m-pay-title").textContent = "Verify & Register Payment (Bank)";
      document.getElementById("m-pay-submit-btn").textContent = "Verify Funds";
      document.getElementById("m-pay-mode").value = "verify";
      document.getElementById("m-pay-order-id").value = orderId;
      
      // Filter unverified confirmed payments for this order
      const unverified = (state.payments || []).filter(p => {
        return p["Order ID"] === orderId && (p["Type"] || "").toString().trim() !== "Verified";
      });
      
      var optionsHtml = "";
      if (unverified.length > 0) {
        optionsHtml += `<div class="form-group"><label style="font-weight:bold; margin-bottom:8px; display:block;">Select Confirmation to Verify *</label>`;
        unverified.forEach((p, idx) => {
          var amt = parseFloat(p["Amount Confirmed ($)"] !== undefined ? p["Amount Confirmed ($)"] : p["Amount ($)"]) || 0;
          var ref = p["Confirmation Ref"] || p["Transaction Ref"] || "No Ref";
          var method = p["Payment Method"] || "Unknown";
          var dateRaw = p["Confirmation Date"] || p["Payment Date"] || "";
          var dateStr = "";
          if (dateRaw) {
            var d = new Date(dateRaw);
            dateStr = isNaN(d.getTime()) ? dateRaw : d.toLocaleDateString();
          }
          var checked = idx === 0 ? "checked" : "";
          
          optionsHtml += `
            <label style="display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--border-card); border-radius: 6px; margin-bottom: 8px; cursor: pointer; background: rgba(255,255,255,0.02); text-align: left;">
              <input type="radio" name="selected_payment" value="${p["Payment ID"]}" data-amount="${amt}" style="margin-top: 3px;" ${checked} onchange="handlePaymentSelectionChange(this)">
              <div style="font-size: 13px;">
                <strong>PAY ID:</strong> ${p["Payment ID"]} | <strong>Amount:</strong> ${formatCurrency(amt)}<br>
                <span style="color:var(--text-muted); font-size: 11px;">Method: ${method} | Ref: ${ref} | Date: ${dateStr}</span>
              </div>
            </label>
          `;
        });
        
        // Add a radio option for direct verification
        optionsHtml += `
          <label style="display: flex; align-items: flex-start; gap: 10px; padding: 10px; border: 1px solid var(--border-card); border-radius: 6px; margin-bottom: 8px; cursor: pointer; background: rgba(255,255,255,0.02); text-align: left;">
            <input type="radio" name="selected_payment" value="DIRECT" data-amount="${outstandingAmount}" style="margin-top: 3px;" onchange="handlePaymentSelectionChange(this)">
            <div style="font-size: 13px;">
              <strong>+ Add & Verify Direct Payment</strong><br>
              <span style="color:var(--text-muted); font-size: 11px;">Record direct bank settlement without prior client confirmation.</span>
            </div>
          </label>
        `;
        optionsHtml += `</div>`;
      } else {
        // No unverified payments found. Force Direct Payment.
        optionsHtml += `
          <div style="padding: 12px; background-color: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 6px; font-size: 13px; color: #fbbf24; margin-bottom: 12px; line-height: 1.4; text-align: left;">
            <strong>No pending client confirmations found.</strong><br>
            Please enter the direct bank settlement details below to register and verify the funds.
          </div>
          <input type="hidden" name="selected_payment" value="DIRECT" data-amount="${outstandingAmount}">
        `;
      }
      
      var defaultAmt = unverified.length > 0 ? (parseFloat(unverified[0]["Amount Confirmed ($)"] !== undefined ? unverified[0]["Amount Confirmed ($)"] : unverified[0]["Amount ($)"]) || 0) : outstandingAmount;
      
      var formFieldsHtml = `
        ${optionsHtml}
        <div class="form-group">
          <label>Bank Settlement Amount ($) (Net) *</label>
          <input type="number" step="0.01" id="m-pay-amount" value="${defaultAmt}" required>
        </div>
        <div class="form-group" style="margin-top: 14px;">
          <label>Processing Fees ($)</label>
          <input type="number" step="0.01" id="m-pay-fees" value="0.00" placeholder="Merchant transaction fees or wire deduction">
        </div>
        <div class="form-group" style="margin-top: 14px;">
          <label>Internal Notes / Memo</label>
          <input type="text" id="m-pay-notes" placeholder="e.g. Cleared transaction fees, customer short-pay approval note">
        </div>
        <div id="m-pay-direct-fields" style="${unverified.length > 0 ? 'display:none;' : ''}">
          <div class="form-group" style="margin-bottom: 14px; margin-top: 14px;">
            <label>Payment Method *</label>
            <select id="m-pay-method">
              <option value="Bank Transfer">Bank Transfer (ACH/Wire)</option>
              <option value="Credit Card / Stripe">Credit Card / Stripe</option>
              <option value="Credit Note">Credit Note</option>
            </select>
          </div>
        </div>
        <div class="form-group" style="margin-top: 14px;">
          <label>Bank Reference / Settlement ID *</label>
          <input type="text" id="m-pay-ref" required placeholder="Mercury settlement wire ID, Stripe Charge ID, or check number">
        </div>
        <input type="hidden" id="m-pay-selected-id" value="${unverified.length > 0 ? unverified[0]["Payment ID"] : "DIRECT"}">
      `;
      
      document.getElementById("m-pay-body-content").innerHTML = formFieldsHtml;
      toggleModal("payregistry", true);
    }
    
    // Attach selection handler globally
    window.handlePaymentSelectionChange = function(radio) {
      var amt = radio.getAttribute("data-amount");
      document.getElementById("m-pay-amount").value = amt;
      document.getElementById("m-pay-selected-id").value = radio.value;
      
      if (document.getElementById("m-pay-fees")) {
        document.getElementById("m-pay-fees").value = "0.00";
      }
      if (document.getElementById("m-pay-notes")) {
        document.getElementById("m-pay-notes").value = "";
      }
      
      var directFields = document.getElementById("m-pay-direct-fields");
      if (directFields) {
        if (radio.value === "DIRECT") {
          directFields.style.display = "block";
        } else {
          directFields.style.display = "none";
        }
      }
    };

    function submitVerifyPayment(e) {
      e.preventDefault();
      const orderId = document.getElementById("m-pay-order-id").value;
      const amount = parseFloat(document.getElementById("m-pay-amount").value) || 0;
      const fees = document.getElementById("m-pay-fees") ? parseFloat(document.getElementById("m-pay-fees").value) || 0 : 0;
      const notes = document.getElementById("m-pay-notes") ? document.getElementById("m-pay-notes").value : "";
      const method = document.getElementById("m-pay-method") ? document.getElementById("m-pay-method").value : "Bank Transfer";
      const ref = document.getElementById("m-pay-ref").value;
      const mode = document.getElementById("m-pay-mode").value;
      const paymentId = document.getElementById("m-pay-selected-id").value;
      
      const isConfirm = mode === "confirm";
      
      if (!isConfirm) {
        const confirmMsg = `WARNING: You are about to verify ${formatCurrency(amount)} under reference "${ref}".\n\nIf the verified payment completes the order's total balance (within the acceptable tolerance threshold), the order status will transition to "Firm Order". This will immediately:\n1. Dispatch Purchase Orders (POs) to the farms.\n2. Generate the final Commercial Invoice.\n3. Email the invoice and receipt to the client.\n\nDo you want to proceed?`;
        if (!confirm(confirmMsg)) {
          return;
        }
      }
      
      toggleModal("payregistry", false);
      showGlobalLoading(true, isConfirm ? "Confirming payment notification..." : "Verifying funds with billing...");
      
      postPayload({
        action: isConfirm ? "confirmPayment" : "verifyPayment",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: orderId,
        amount: amount,
        paymentMethod: method,
        transactionRef: ref,
        paymentId: isConfirm ? "" : paymentId,
        processingFees: fees,
        internalNotes: notes
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          if (isConfirm) {
            showToast("success", `Payment notified for Order ${orderId}. Verification pending.`);
          } else {
            showToast("success", `Funds verified. Status updated for ${orderId}.`);
          }
          
          if (state.isDemoMode) {
            const order = state.orders.find(o => o["Order ID"] === orderId);
            if (order) {
              if (isConfirm) {
                // Confirm expected payment
                state.payments.push({
                  "Payment ID": "PAY-LOCAL-" + Math.floor(Math.random()*1000),
                  "Order ID": orderId,
                  "Client ID": order["Client ID"],
                  "Amount Confirmed ($)": amount,
                  "Payment Method": method,
                  "Confirmation Ref": ref,
                  "Confirmation Date": new Date().toISOString(),
                  "Confirmed By": state.user.userId,
                  "Type": "Confirmed"
                });
              } else {
                // Reconcile / Verify payment
                let found = false;
                if (paymentId && paymentId !== "DIRECT") {
                  const existing = state.payments.find(p => p["Payment ID"] === paymentId);
                  if (existing) {
                    existing["Amount Verified ($)"] = amount;
                    existing["Verification Ref"] = ref;
                    existing["Verification Date"] = new Date().toISOString();
                    existing["Verified By"] = state.user.userId;
                    existing["Type"] = "Verified";
                    existing["Processing Fees ($)"] = fees;
                    existing["Internal Notes"] = notes;
                    found = true;
                  }
                }
                if (!found) {
                  state.payments.push({
                    "Payment ID": "PAY-LOCAL-" + Math.floor(Math.random()*1000),
                    "Order ID": orderId,
                    "Client ID": order["Client ID"],
                    "Amount Confirmed ($)": amount + fees,
                    "Payment Method": method,
                    "Confirmation Ref": ref,
                    "Confirmation Date": new Date().toISOString(),
                    "Confirmed By": state.user.userId,
                    "Verified By": state.user.userId,
                    "Type": "Verified",
                    "Amount Verified ($)": amount,
                    "Verification Ref": ref,
                    "Verification Date": new Date().toISOString(),
                    "Processing Fees ($)": fees,
                    "Internal Notes": notes
                  });
                }
              }
              
              // Recalculate payments
              const grandTotal = parseFloat(order["Grand Total ($)"]) || 0;
              const { totalConfirmed, totalVerified } = getOrderPaymentSummary(orderId, grandTotal);
              
              if (isConfirm) {
                if (totalConfirmed < grandTotal) {
                  order["Payment Status"] = "Partially Confirmed";
                } else {
                  order["Payment Status"] = "Payment Confirmed";
                }
              } else {
                const calculatedTolerance = Math.min(grandTotal * 0.001, 20);
                const tolerance = Math.max(0.50, calculatedTolerance);
                
                if (totalVerified < grandTotal - tolerance) {
                  order["Payment Status"] = "Partially Paid";
                  order["Order Status"] = "Invoice Sent";
                } else {
                  const diff = grandTotal - totalVerified;
                  if (diff > 0 && diff <= tolerance) {
                    state.payments.push({
                      "Payment ID": "PAY-ADJ-LOCAL-" + Math.floor(Math.random()*1000),
                      "Order ID": orderId,
                      "Client ID": order["Client ID"],
                      "Amount Confirmed ($)": diff,
                      "Amount Verified ($)": diff,
                      "Payment Method": "Write-Off (Tolerance)",
                      "Confirmation Ref": "Reconciliation Adjustment",
                      "Verification Ref": "Within acceptable tolerance limit",
                      "Confirmation Date": new Date().toISOString(),
                      "Verification Date": new Date().toISOString(),
                      "Confirmed By": "System (Auto-Adjustment)",
                      "Verified By": state.user.userId,
                      "Type": "Verified"
                    });
                    totalVerified += diff;
                  }
                  order["Payment Status"] = "Payment Verified";
                  order["Order Status"] = "Firm Order";
                }
              }
              order["Last Updated"] = new Date().toISOString();
              
              state.interactions.push({
                "Interaction ID": "INT-LOCAL-" + Math.floor(Math.random()*1000),
                "Client ID": order["Client ID"],
                "Timestamp": new Date().toISOString(),
                "Type": "Payment",
                "Notes": `Payment VERIFIED for order ${orderId}. Amount: ${formatCurrency(amount)} via ${method} (Ref: ${ref})`,
                "Salesperson ID": state.user.userId,
                "Follow-up Date": ""
              });
            }
            renderOrdersView();
          } else {
            fetchLiveDatabase();
          }
        } else {
          showToast("error", res.message || "Failed to verify funds.");
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Database sync failed.");
      });
    }

    // --- 10. ORDER DETAILS MODAL CONTROLLER & QUOTE APPROVAL WORKFLOW ---

    function toggleItemCheckbox(index, checked) {
      if (state.currentOrderItems && state.currentOrderItems[index]) {
        state.currentOrderItems[index].checked = checked;
        renderOrderDetailsItems();
      }
    }

    function toggleSelectAllItems(checked) {
      if (state.currentOrderItems) {
        state.currentOrderItems.forEach(item => {
          if (item.qty > 0) {
            item.checked = checked;
          }
        });
        renderOrderDetailsItems();
      }
    }

    function getOrderPaymentSummary(orderId, grandTotal) {
      const payments = (state.payments || []).filter(p => p["Order ID"] === orderId);
      const totalConfirmed = payments
        .reduce((sum, p) => {
          const amtConf = parseFloat(p["Amount Confirmed ($)"] !== undefined ? p["Amount Confirmed ($)"] : p["Amount ($)"]) || 0;
          return sum + amtConf;
        }, 0);
      const totalVerified = payments
        .filter(p => (p["Type"] || "").toString().trim() === "Verified")
        .reduce((sum, p) => {
          const amtVer = parseFloat(p["Amount Verified ($)"] !== undefined ? p["Amount Verified ($)"] : p["Amount ($)"]) || 0;
          const fees = parseFloat(p["Processing Fees ($)"]) || 0;
          return sum + amtVer + fees;
        }, 0);
      const outstandingConfirmed = Math.max(0, grandTotal - totalConfirmed);
      const outstandingVerified = Math.max(0, grandTotal - totalVerified);
      const totalPaid = totalVerified;
      const outstanding = outstandingVerified;
      return { totalConfirmed, totalVerified, outstandingConfirmed, outstandingVerified, totalPaid, outstanding };
    }

    function renderOrderDetailsItems() {
      const order = state.currentOrder;
      const items = state.currentOrderItems;
      const isDraftQuote = order["Order Status"] === "Draft Quote";
      
      const container = document.getElementById("m-order-items-container");
      container.innerHTML = "";
      
      let totalBoxes = 0;
      let totalStems = 0;
      let standardTotal = 0;
      
      let tbodyHtml = "";
      
      items.forEach((item, index) => {
        if (item.qty > 0) {
          item.stems = item.stems || (item.qty * 100);
          item.finalPrice = item.finalPrice !== undefined ? item.finalPrice : ((parseFloat(item.price) || 0) * item.stems);
          
          let priceText = "";
          let rowStyle = "";
          
          if (item.checked) {
            totalBoxes += item.qty;
            totalStems += item.stems;
            standardTotal += item.finalPrice;
            priceText = `${formatCurrency(item.finalPrice)}`;
            if (item.isTbc) {
              rowStyle = "color: #10b981; font-style: italic;"; // emerald color for confirmed TBC
            }
          } else {
            priceText = item.isTbc ? "$0.00 (Pending)" : "$0.00 (Deselected)";
            rowStyle = "opacity: 0.6; color: var(--text-muted);";
          }
          
          let editBtnHtml = "";
          if (isDraftQuote) {
            editBtnHtml = `
              <button class="btn-icon-sourcing" onclick="event.stopPropagation(); openSourcingPopup(${index})" title="Edit Supplier & Price">
                <svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.07,6.19L3,17.25Z"/></svg>
              </button>
            `;
          }
          
          let supplierDisplay = item.supplier || item.suggestedSupplier || '-';
          
          tbodyHtml += `
            <tr style="${rowStyle}">
              ${isDraftQuote ? `
                <td style="text-align: center;">
                  <input type="checkbox" class="order-item-checkbox" data-index="${index}" ${item.checked ? 'checked' : ''} onchange="toggleItemCheckbox(${index}, this.checked)">
                </td>
              ` : ''}
              <td style="font-weight: 600;">
                ${item.variety} (${item.stem}cm)
                ${item.isTbc ? ' <span style="font-size:10px; opacity:0.8; padding:2px 4px; background:rgba(16,185,129,0.1); border-radius:4px; margin-left:4px;">TBC</span>' : ''}
                ${editBtnHtml}
              </td>
              <td style="text-align: left; color: var(--text-secondary); font-size: 13px; line-height: 1.2;">
                ${supplierDisplay}
              </td>
              <td style="text-align: right; color: var(--text-secondary);">${item.qty} box(es)</td>
              <td style="text-align: right; color: var(--text-secondary);">${item.stems.toLocaleString()} stems</td>
              <td style="text-align: right; font-weight: 500; color: var(--text-secondary);">$${item.stems > 0 ? (item.finalPrice / item.stems).toFixed(2) : "0.00"}</td>
              <td style="text-align: right; font-weight: 700; font-family: var(--font-display);">${priceText}</td>
            </tr>
          `;
        } else {
          tbodyHtml += `
            <tr>
              ${isDraftQuote ? '<td></td>' : ''}
              <td colspan="5" style="font-family: monospace; color: var(--text-secondary);">${item.rawLine}</td>
            </tr>
          `;
        }
      });
      
      // Select All checkbox header if Draft Quote
      const checkAllHeader = isDraftQuote ? `
        <th style="width: 40px; text-align: center;">
          <input type="checkbox" id="m-order-check-all" onchange="toggleSelectAllItems(this.checked)" ${items.every(i => i.qty === 0 || i.checked) ? 'checked' : ''}>
        </th>
      ` : '';
      
      const table = document.createElement("table");
      table.className = "order-items-table";
      table.innerHTML = `
        <thead>
          <tr>
            ${checkAllHeader}
            <th style="text-align: left;">Product Spec</th>
            <th style="text-align: left;">Supplier</th>
            <th style="text-align: right;">Boxes</th>
            <th style="text-align: right;">Stems</th>
            <th style="text-align: right;">Price/Stem</th>
            <th style="text-align: right;">Sales Value</th>
          </tr>
        </thead>
        <tbody>
          ${tbodyHtml}
          <tr style="border-top: 1px solid var(--border-card); background: rgba(255,255,255,0.01);">
            ${isDraftQuote ? '<td></td>' : ''}
            <td colspan="2" style="font-weight: 600; color: var(--text-primary);">Total Items</td>
            <td style="text-align: right;"><strong style="color: var(--text-primary);">${totalBoxes} box(es)</strong></td>
            <td style="text-align: right;"><strong style="color: var(--text-primary);">${totalStems.toLocaleString()} stems</strong></td>
            <td style="text-align: right;"></td>
            <td style="text-align: right;"><strong style="color: var(--text-primary);">${formatCurrency(standardTotal)}</strong></td>
          </tr>
        </tbody>
      `;
      container.appendChild(table);
      
      // If user has manually overridden the discount in the database, prioritize it
      const savedDiscount = order["Discount Amount ($)"];
      let discountAmount = 0;
      if (savedDiscount !== undefined && savedDiscount !== "") {
         discountAmount = parseFloat(savedDiscount) || 0;
      }
      let grandTotal = standardTotal - discountAmount;
      
      let grandTotalToDisplay = grandTotal;
      if (!isDraftQuote) {
        grandTotalToDisplay = parseFloat(order["Grand Total ($)"]) || 0;
      }
      
      document.getElementById("m-order-standard-total").textContent = `${formatCurrency(standardTotal)}`;
      document.getElementById("m-order-discount-amount").textContent = `-${formatCurrency(discountAmount)}`;
      
      // Update totals visually in the modal
      document.getElementById("m-order-grand-total").textContent = `${formatCurrency(grandTotalToDisplay)}`;
      
      // Show/Hide Override totals button based on status
      const overrideBtn = document.getElementById("btn-edit-order-totals");
      if (overrideBtn) {
        if (order["Order Status"] === "Draft Quote" || order["Order Status"] === "Quote Sent" || order["Order Status"] === "Invoice Sent") {
          overrideBtn.style.display = "inline-flex";
        } else {
          overrideBtn.style.display = "none";
        }
      }
      
      // Render Payments summary rows
      const { totalConfirmed, totalVerified, outstandingConfirmed, outstandingVerified, outstanding } = getOrderPaymentSummary(order["Order ID"], grandTotalToDisplay);
      
      const confirmedRow = document.getElementById("m-order-confirmed-row");
      const paidRow = document.getElementById("m-order-paid-row");
      const balanceRow = document.getElementById("m-order-balance-row");
      if (order["Order Status"] === "Draft Quote" || order["Order Status"] === "Quote Sent") {
        if (confirmedRow) confirmedRow.style.display = "none";
        if (paidRow) paidRow.style.display = "none";
        if (balanceRow) balanceRow.style.display = "none";
      } else {
        if (confirmedRow) {
          confirmedRow.style.display = "flex";
          document.getElementById("m-order-total-confirmed").textContent = `${formatCurrency(totalConfirmed)}`;
        }
        if (paidRow) {
          paidRow.style.display = "flex";
          document.getElementById("m-order-total-paid").textContent = `${formatCurrency(totalVerified)}`;
        }
        if (balanceRow) {
          balanceRow.style.display = "flex";
          const balEl = document.getElementById("m-order-outstanding-balance");
          balEl.textContent = `${formatCurrency(outstanding)}`;
          if (outstanding > 0) {
            balEl.style.color = "#ef4444";
            balanceRow.style.color = "#ef4444";
          } else {
            balEl.style.color = "#10b981";
            balanceRow.style.color = "#10b981";
          }
        }
      }

      // Render itemized payment ledger inside the modal details tab
      const orderPaymentsListContainer = document.getElementById("m-order-payments-list-container");
      const orderPaymentsListItems = document.getElementById("m-order-payments-list-items");
      if (orderPaymentsListContainer && orderPaymentsListItems) {
        const orderPayments = (state.payments || []).filter(p => p["Order ID"] === order["Order ID"]);
        if (orderPayments.length > 0 && order["Order Status"] !== "Draft Quote" && order["Order Status"] !== "Quote Sent") {
          orderPaymentsListContainer.style.display = "block";
          orderPaymentsListItems.innerHTML = "";
          orderPayments.forEach(p => {
            const amtConf = parseFloat(p["Amount Confirmed ($)"] !== undefined ? p["Amount Confirmed ($)"] : p["Amount ($)"]) || 0;
            const amtVer = parseFloat(p["Amount Verified ($)"] !== undefined ? p["Amount Verified ($)"] : p["Amount ($)"]) || 0;
            const type = (p["Type"] || "").toString().trim();
            const isVerified = type === "Verified";
            
            const feesVal = parseFloat(p["Processing Fees ($)"]) || 0;
            const noteText = p["Internal Notes"] || "";
            const feesStr = feesVal > 0 ? ` | Fees: ${formatCurrency(feesVal)}` : "";
            const noteHtml = noteText ? `<div style="color:var(--text-muted); font-size:11px; margin-top:3px; font-style:italic;">Memo: ${noteText}</div>` : "";
            
            const badgeBg = isVerified ? "rgba(16, 185, 129, 0.15)" : "rgba(245, 158, 11, 0.15)";
            const badgeColor = isVerified ? "#34d399" : "#fbbf24";
            const statusText = isVerified ? "VERIFIED" : "PENDING";
            
            const refText = isVerified ? (p["Verification Ref"] || p["Confirmation Ref"] || p["Transaction Ref"]) : (p["Confirmation Ref"] || p["Transaction Ref"]);
            const dateVal = isVerified ? (p["Verification Date"] || p["Confirmation Date"] || p["Payment Date"]) : (p["Confirmation Date"] || p["Payment Date"]);
            const dateStr = dateVal ? new Date(dateVal).toLocaleDateString() : "N/A";
            
            const confBy = p["Confirmed By"] || "N/A";
            const verBy = p["Verified By"] || "N/A";
            const auditLog = isVerified ? `By: ${confBy} | Verified By: ${verBy}` : `Confirmed By: ${confBy}`;
            
            const itemDiv = document.createElement("div");
            itemDiv.style = "display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.02); padding: 8px; border: 1px solid var(--border-card); border-radius: 6px; font-size: 12px;";
            itemDiv.innerHTML = `
              <div>
                <strong>${p["Payment ID"]}</strong> | <span style="font-family:monospace;">Ref: ${refText || 'None'}</span><br>
                <span style="color:var(--text-muted); font-size:11px;">Date: ${dateStr} | Method: ${p["Payment Method"] || 'Wire'}${feesStr} | ${auditLog}</span>
                ${noteHtml}
              </div>
              <div style="text-align: right;">
                <span style="font-weight: 700; color: ${isVerified ? 'var(--primary)' : 'var(--text-secondary)'};">${formatCurrency((isVerified ? amtVer : amtConf))}</span><br>
                <span class="badge" style="background: ${badgeBg}; color: ${badgeColor}; border: none; font-size: 9px; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-top: 2px;">${statusText}</span>
              </div>
            `;
            orderPaymentsListItems.appendChild(itemDiv);
          });
        } else {
          orderPaymentsListContainer.style.display = "none";
        }
      }

      // Render Staff-Only Costing Breakdown details
      const costingContainer = document.getElementById("m-order-costing-container");
      const costingDetails = document.getElementById("m-order-costing-details");
      
      if (costingContainer && costingDetails) {
        let hasCostingData = false;
        let costingHtml = "";
        
        items.forEach(item => {
          if (item.qty > 0 && item.checked) {
            let baseCost = item.supplierPrice !== undefined ? item.supplierPrice : 0;
            let totalSurcharges = item.opCost !== undefined ? item.opCost : 0;
            let finalPrice = item.price !== undefined ? parseFloat(item.price) : 0;
            if (finalPrice === 0 && item.stems > 0) {
              finalPrice = item.finalPrice / item.stems;
            }
            
            if (baseCost > 0 || totalSurcharges > 0) {
              hasCostingData = true;
              
              let breakdownLines = "";
              if (item.costBreakdown && item.costBreakdown.length > 0) {
                item.costBreakdown.forEach(s => {
                  breakdownLines += `
                    <div style="display: flex; justify-content: space-between; font-size: 11px; padding-left: 12px; color: var(--text-secondary); opacity: 0.85; line-height: 1.4;">
                      <span>↳ ${s.name} (${s.applyMargin ? 'Margined' : 'Pass-Through'}):</span>
                      <span>$${s.amount.toFixed(3)}/stem</span>
                    </div>
                  `;
                });
              } else if (totalSurcharges > 0) {
                breakdownLines += `
                  <div style="display: flex; justify-content: space-between; font-size: 11px; padding-left: 12px; color: var(--text-secondary); opacity: 0.85; line-height: 1.4;">
                    <span>↳ Total Surcharges:</span>
                    <span>${formatCurrency(totalSurcharges)}/stem</span>
                  </div>
                `;
              }
              
              costingHtml += `
                <div style="margin-bottom: 12px; border-bottom: 1px dashed var(--border-card); padding-bottom: 8px;">
                  <div style="display: flex; justify-content: space-between; font-weight: 600; color: var(--text-primary);">
                    <span>${item.variety} (${item.stem}cm) - ${item.qty} box(es)</span>
                    <span style="font-size: 11px; color: var(--text-secondary);">Supplier: ${item.supplier || 'N/A'}</span>
                  </div>
                  <div style="display: flex; justify-content: space-between; margin-top: 4px;">
                    <span>Base Farm Cost:</span>
                    <span>${formatCurrency(baseCost)}/stem</span>
                  </div>
                  <div style="display: flex; justify-content: space-between;">
                    <span>Landed Surcharges:</span>
                    <span>${formatCurrency(totalSurcharges)}/stem</span>
                  </div>
                  ${breakdownLines}
                  <div style="display: flex; justify-content: space-between; font-weight: 600; color: var(--primary); margin-top: 4px;">
                    <span>Blended Sales Price:</span>
                    <span>${formatCurrency(finalPrice)}/stem</span>
                  </div>
                </div>
              `;
            }
          }
        });
        
        if (hasCostingData && costingHtml !== "") {
          costingContainer.style.display = "block";
          costingDetails.innerHTML = costingHtml;
        } else {
          costingContainer.style.display = "none";
        }
      }
      
      const quoteBtn = document.getElementById("btn-approve-edit-email-quote");
      if (quoteBtn) {
        if (totalBoxes === 0 && items.length === 0) {
          quoteBtn.disabled = true;
          quoteBtn.style.opacity = "0.5";
          quoteBtn.style.cursor = "not-allowed";
        } else {
          quoteBtn.disabled = false;
          quoteBtn.style.opacity = "1";
          quoteBtn.style.cursor = "pointer";
        }
      }
    }

    function calculateEstimatedPricing(parsedItems, orderDate, orderIncoterm) {
      let sumEstimated = 0;
      
      let totalBoxes = parsedItems.reduce((sum, item) => {
        let isManual = (item.isManual === true || item.isManual === "true" || item.isManual === 1 || item.isTbc === true || item.isTbc === "true" || item.isTbc === 1 || item.isPriceLocked === true || item.isPriceLocked === "true");
        if (isManual) return sum;
        return sum + parseInt(item.qty || 0);
      }, 0);
      let totalStems = totalBoxes * 100; // STEMS_PER_BOX
      
      let marginDivider = 0.89;
      if (totalStems <= 2011) marginDivider = 0.72;
      else if (totalStems <= 4011) marginDivider = 0.82;
      
      let profitFloor = 0.03;
      if (totalStems <= 2011) profitFloor = 0.05;
      else if (totalStems <= 4011) profitFloor = 0.04;

      parsedItems.forEach(item => {
        if (item.qty <= 0) {
          item.finalPrice = 0;
          return;
        }
        
        let totalItemPrice = 0;
        let remainingQty = item.qty;
        
        if (item.price !== undefined && item.price !== null && parseFloat(item.price) > 0) {
          let clientPricePerStem = parseFloat(item.price);
          let roundedPrice = Math.round(clientPricePerStem * 100) / 100;
          let standardPriceBox = roundedPrice * 100; // STEMS_PER_BOX
          totalItemPrice = standardPriceBox * item.qty;
          item.suggestedPrice = clientPricePerStem;
          item.suggestedSupplier = item.supplier || "ALL";
        } else {
          const normIncoterm = orderIncoterm.toUpperCase().includes("FOB") ? "FOB" : "CIF MIA";
          
          let matches = state.inventory.filter(inv => {
            const invVar = String(inv["Variety"] || "").toUpperCase().trim();
            const invStem = parseInt(inv["Stem Length (cm)"]) || parseInt(inv["Stem Length"]) || 0;
            const invInco = String(inv["Incoterm"] || "").toUpperCase().trim();
            const invDate = formatToIsoDate(inv["Date"]);
            
            return invVar === String(item.variety).toUpperCase().trim() &&
                   invStem === item.stem &&
                   (invInco.includes("FOB") ? "FOB" : "CIF MIA") === normIncoterm &&
                   invDate === orderDate;
          });
          
          // Sort ascending by price
          matches.sort((a, b) => {
            let pA = parseFloat(a["Price per Stem ($)"]) || parseFloat(a["Price"]) || 0;
            let pB = parseFloat(b["Price per Stem ($)"]) || parseFloat(b["Price"]) || 0;
            return pA - pB;
          });
          
          // Split stock
          matches.forEach(entry => {
            if (remainingQty <= 0) return;
            let stock = parseInt(entry["Stock"]) || 0;
            if (stock <= 0) return;
            
            let qtyToFulfill = Math.min(remainingQty, stock);
            remainingQty -= qtyToFulfill;
            
            let basePrice = parseFloat(entry["Price per Stem ($)"]) || parseFloat(entry["Price"]) || 0;
            let entryInco = String(entry["Incoterm"] || "").toUpperCase().trim();
            
            let clientPricePerStem = 0;
            if (entryInco.includes("FOB")) {
              clientPricePerStem = basePrice / marginDivider;
            } else {
              let proxy = 0.20;
              if (item.stem <= 40) proxy = 0.17;
              else if (item.stem === 50) proxy = 0.20;
              else if (item.stem === 60) proxy = 0.23;
              else if (item.stem === 70) proxy = 0.28;
              else if (item.stem === 80) proxy = 0.30;
              else if (item.stem >= 90) proxy = 0.33;
              
              let productCost = Math.max(0, basePrice - proxy);
              clientPricePerStem = (productCost / marginDivider) + proxy;
            }
            
            clientPricePerStem = Math.max(clientPricePerStem, basePrice + profitFloor);
            
            let roundedPrice = Math.round(clientPricePerStem * 100) / 100;
            let standardPriceBox = roundedPrice * 100;
            
            totalItemPrice += standardPriceBox * qtyToFulfill;
            
            if (!item.suggestedPrice) {
               item.suggestedPrice = clientPricePerStem;
               item.suggestedSupplier = entry["Supplier"] || "ALL";
            }
          });
          
          if (remainingQty > 0) {
            let fallbackBasePrice = 0.00;
            let clientPricePerStem = 0.00;
            
            if (matches && matches.length > 0) {
              let entry = matches[0];
              fallbackBasePrice = parseFloat(entry["Price per Stem ($)"]) || parseFloat(entry["Price"]) || 0;
              let entryInco = String(entry["Incoterm"] || "").toUpperCase().trim();
              
              if (entryInco.includes("FOB")) {
                clientPricePerStem = fallbackBasePrice / marginDivider;
              } else {
                let proxy = 0.20;
                if (item.stem <= 40) proxy = 0.17;
                else if (item.stem === 50) proxy = 0.20;
                else if (item.stem === 60) proxy = 0.23;
                else if (item.stem === 70) proxy = 0.28;
                else if (item.stem === 80) proxy = 0.30;
                else if (item.stem >= 90) proxy = 0.33;
                
                let productCost = Math.max(0, fallbackBasePrice - proxy);
                clientPricePerStem = (productCost / marginDivider) + proxy;
              }
            }

            clientPricePerStem = Math.max(clientPricePerStem, fallbackBasePrice + profitFloor);

            let roundedPrice = Math.round(clientPricePerStem * 100) / 100;
            let standardPriceBox = roundedPrice * 100;
            
            totalItemPrice += standardPriceBox * remainingQty;
            
            if (!item.suggestedPrice) {
               item.suggestedPrice = clientPricePerStem;
               if (matches && matches.length > 0) {
                 item.suggestedSupplier = matches[0]["Supplier"] || "ALL";
               } else {
                 item.suggestedSupplier = "ALL";
               }
            }
          }
        }
        
        item.estimatedPrice = totalItemPrice;
        item.finalPrice = totalItemPrice;
        sumEstimated += totalItemPrice;
      });
      return sumEstimated;
    }
    
    function switchOrderTab(tab) {
      const detailsTab = document.getElementById("order-tab-details");
      const slaTab = document.getElementById("order-tab-sla");
      const btnDetails = document.getElementById("tab-btn-order-details");
      const btnSla = document.getElementById("tab-btn-order-sla");
      
      if (!detailsTab || !slaTab || !btnDetails || !btnSla) return;
      
      if (tab === "details") {
        detailsTab.style.display = "block";
        slaTab.style.display = "none";
        btnDetails.style.borderBottomColor = "var(--primary)";
        btnDetails.style.color = "var(--primary)";
        btnSla.style.borderBottomColor = "transparent";
        btnSla.style.color = "var(--text-secondary)";
        document.getElementById("m-order-actions-footer").style.display = "flex";
      } else {
        detailsTab.style.display = "none";
        slaTab.style.display = "block";
        btnSla.style.borderBottomColor = "var(--primary)";
        btnSla.style.color = "var(--primary)";
        btnDetails.style.borderBottomColor = "transparent";
        btnDetails.style.color = "var(--text-secondary)";
        document.getElementById("m-order-actions-footer").style.display = "none";
      }
    }
    
    function renderSlaTimeline(order) {
      const container = document.getElementById("sla-timeline-container");
      if (!container) return;
      
      const formatTime = (isoString) => {
        if (!isoString) return "<span style='color:var(--text-secondary)'>Pending</span>";
        const d = new Date(isoString);
        if (isNaN(d.getTime())) return "<span style='color:var(--text-secondary)'>Pending</span>";
        return `<span style="font-weight:600; color:var(--text-primary);">${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}</span>`;
      };
      
      const diffStr = (startIso, endIso) => {
        if (!startIso || !endIso) return "";
        const s = new Date(startIso).getTime();
        const e = new Date(endIso).getTime();
        if (isNaN(s) || isNaN(e)) return "";
        const diffMins = Math.round((e - s) / 60000);
        if (diffMins < 60) return `(${diffMins} mins)`;
        if (diffMins < 1440) return `(${Math.round(diffMins/60)} hrs)`;
        return `(${Math.round(diffMins/1440)} days)`;
      };

      const getSlaIcon = (startIso, endIso, warningMins, dangerMins) => {
        if (!startIso || !endIso) return "&#128994;"; // Default green if pending/missing data
        const s = new Date(startIso).getTime();
        const e = new Date(endIso).getTime();
        if (isNaN(s) || isNaN(e)) return "&#128994;";
        const diffMins = Math.round((e - s) / 60000);
        if (diffMins >= dangerMins) return "&#128308;"; // Red Circle
        if (diffMins >= warningMins) return "&#128993;"; // Yellow Circle
        return "&#128994;"; // Green Circle
      };
      
      const r = order["TS_QuoteRequested"];
      const s = order["TS_QuoteSent"];
      const p = order["TS_PaymentVerified"];
      const f = order["TS_FarmConfirmed"];
      const sc = order["TS_SupplierConfirmed"];
      const d = order["TS_Delivered"];
      
      let html = `
        <div style="display:flex; justify-content:space-between; border-bottom:1px dashed var(--border-card); padding-bottom:8px;">
          <span>&#128994; <strong>Quote Requested (App):</strong></span> <span>${formatTime(r)}</span>
        </div>
        <div style="display:flex; justify-content:space-between; border-bottom:1px dashed var(--border-card); padding-bottom:8px;">
          <span>${getSlaIcon(r, s, 45, 60)} <strong>Quote Sent (Sales):</strong></span> <span>${formatTime(s)} <span style="color:var(--primary); font-size:11px;">${diffStr(r, s)}</span></span>
        </div>
        <div style="display:flex; justify-content:space-between; border-bottom:1px dashed var(--border-card); padding-bottom:8px;">
          <span>${getSlaIcon(s, p, 1080, 1440)} <strong>Payment Verified (Bank):</strong></span> <span>${formatTime(p)} <span style="color:var(--primary); font-size:11px;">${diffStr(s, p)}</span></span>
        </div>
        <div style="display:flex; justify-content:space-between; border-bottom:1px dashed var(--border-card); padding-bottom:8px;">
          <span>${getSlaIcon(p, f, 90, 120)} <strong>Farm PO Sent (System):</strong></span> <span>${formatTime(f)} <span style="color:var(--primary); font-size:11px;">${diffStr(p, f)}</span></span>
        </div>
        <div style="display:flex; justify-content:space-between; border-bottom:1px dashed var(--border-card); padding-bottom:8px;">
          <span>${getSlaIcon(f, sc, 180, 240)} <strong>Supplier Confirmed:</strong></span> <span>${formatTime(sc)} <span style="color:var(--primary); font-size:11px;">${diffStr(f, sc)}</span></span>
        </div>
        <div style="display:flex; justify-content:space-between;">
          <span>${getSlaIcon(sc, d, 7200, 10080)} <strong>Delivered (Logistics):</strong></span> <span>${formatTime(d)} <span style="color:var(--primary); font-size:11px;">${diffStr(sc, d)}</span></span>
        </div>
      `;
      container.innerHTML = html;
    }
    
    function saveQcLog() {
      if (!state.currentOrder) return;
      const qcStatus = document.getElementById("qc-status-select").value;
      const qcNotes = document.getElementById("qc-notes-text").value;
      
      google.script.run
        .withSuccessHandler(function(res) {
          if (res.success) {
            showToast("Quality Control log saved.");
            fetchCRMData();
          } else {
            showToast("Error: " + res.message, true);
          }
        })
        .withFailureHandler(function(err) {
          showToast("Network Error: " + err, true);
        })
        .handleCrmAction({ action: "saveQcLog", orderId: state.currentOrder["Order ID"], qcStatus: qcStatus, qcNotes: qcNotes });
    }
    
    function generateQcEmail() {
      if (!state.currentOrder) return;
      const orderId = state.currentOrder["Order ID"];
      const incoterms = state.currentOrder["Incoterms"];
      const qcNotes = document.getElementById("qc-notes-text").value || "Various issues reported upon arrival.";
      
      const subject = `URGENT QUALITY CLAIM - Order ${orderId}`;
      const body = `
        <div style="font-family: Arial, sans-serif; color: #333; line-height: 1.5; font-size: 14px;">
          <p>Dear Supplier,</p>
          <p>We are writing to report a quality issue regarding the recent shipment for order <strong>${orderId}</strong> (${incoterms}).</p>
          <p><strong>Claim Details:</strong></p>
          <blockquote style="border-left: 4px solid #ef4444; padding-left: 10px; margin-left: 0; font-style: italic;">
            ${qcNotes.replace(/\n/g, "<br>")}
          </blockquote>
          <p>Please review the attached evidence photos and issue the corresponding credit note as soon as possible.</p>
          <p>Thank you,</p>
          <p><strong>Andean Valley Flowers - Quality Control Team</strong></p>
        </div>
      `;
      
      google.script.run
        .withSuccessHandler(function(res) {
          if (res.success) {
            showToast("QC Claim Email sent successfully.");
            fetchCRMData();
          } else {
            showToast("Error: " + res.message, true);
          }
        })
        .withFailureHandler(function(err) {
          showToast("Network Error: " + err, true);
        })
        .handleCrmAction({ 
          action: "sendQcEmail", 
          orderId: orderId, 
          clientId: state.currentOrder["Client ID"],
          recipient: "supplier@andeanvalleycollection.com", 
          subject: subject, 
          body: body 
        });
    }

    function openOrderDetails(orderId) {
      const order = state.orders.find(o => o["Order ID"] === orderId);
      if (!order) return;
      
      state.currentOrder = order;
      state.currentOrderItems = [];
      
      const client = state.clients.find(c => c["Client ID"] === order["Client ID"]);
      const clientName = client ? client["Company Name"] : order["Client ID"];
      
      const tsRaw = order["Last Updated"];
      let reqStr = "";
      if (tsRaw) {
        const d = new Date(tsRaw);
        if (!isNaN(d.getTime())) {
          const localDate = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, '0') + "-" + String(d.getDate()).padStart(2, '0');
          const localTime = String(d.getHours()).padStart(2, '0') + ":" + String(d.getMinutes()).padStart(2, '0');
          if (order["Order Status"] === "Draft Quote") {
            reqStr = `<span style="font-size:13px; color:var(--text-secondary); margin-left: 12px; font-weight: normal;">Req: ${localDate}-T${localTime}</span>`;
          } else if (order["Order Status"] === "Quote Sent" || order["Order Status"] === "Invoice Sent") {
            reqStr = `<span style="font-size:13px; color:var(--text-secondary); margin-left: 12px; font-weight: normal;">Sent: ${localDate}-T${localTime}</span>`;
          }
        }
      }
      
      document.getElementById("m-order-title").innerHTML = `${order["Order Status"].includes("Quote") ? "Draft Quote" : "Order"} <span style="color:var(--text-secondary);font-size:16px;font-weight:500;">#${getOrderDisplayId(order)}</span>${reqStr}`;
      document.getElementById("m-order-client-id").textContent = `${clientName} (${order["Client ID"]})`;
      document.getElementById("m-order-raw-id").textContent = order["Order ID"];
      document.getElementById("m-order-date").textContent = (order["Delivery Date"] || "").split("T")[0];
      document.getElementById("m-order-incoterm").textContent = order["Incoterms"];
      document.getElementById("m-order-status").textContent = `${getStatusDisplayName(order["Order Status"])} / ${order["Payment Status"]}`;
      
      const isDraftQuote = order["Order Status"] === "Draft Quote";
      
      // Show date picker only for Draft Quotes
      const datePickerEl = document.getElementById("m-order-date-picker");
      if (isDraftQuote) {
        datePickerEl.style.display = "inline-block";
        // Clear any stale handler BEFORE setting .value to prevent re-entrant firing
        // when openOrderDetails is called programmatically after a successful date update.
        datePickerEl.onchange = null;
        datePickerEl.value = formatToIsoDate(order["Delivery Date"]);
        document.getElementById("m-order-date").style.display = "none";
        datePickerEl.onchange = function() {
          handleDeliveryDateChange(orderId, datePickerEl.value);
        };
      } else {
        datePickerEl.style.display = "none";
        document.getElementById("m-order-date").style.display = "inline";
      }
      
      let rawPayloadItems = [];
      if (order["Raw JSON Payload"]) {
        try {
          const raw = JSON.parse(order["Raw JSON Payload"]);
          if (raw.items && Array.isArray(raw.items)) {
            rawPayloadItems = raw.items;
          }
        } catch(e) {}
      }
      
      const lines = String(order["Items Summary"] || "").split("\n").filter(l => l.trim() !== "");
      const parsedItems = [];
      let totalBoxes = 0;
      
      let availableRaws = rawPayloadItems.map(ri => ({ ...ri, remainingQty: parseInt(ri.qty) || 0 }));

      lines.forEach(line => {
        const match = line.match(/^(\d+)[xX]\s+(.+?)\s*\((\d+)\s*cm\)/);
        const isTbc = line.includes("[TO BE CONFIRMED]") || line.includes("TBC");
        if (match) {
          const qty = parseInt(match[1]) || 0;
          const variety = match[2].trim();
          const stem = parseInt(match[3]) || 0;
          const stems = qty * 100;
          
          totalBoxes += qty;
          
          let matchedRaw = availableRaws.find(ri => 
            ri.remainingQty >= qty && 
            ri.variety && String(ri.variety).toUpperCase().trim() === String(variety).toUpperCase().trim() && 
            parseInt(ri.stem) === stem
          );
          
          if (!matchedRaw) {
            matchedRaw = availableRaws.find(ri => 
              ri.remainingQty > 0 && 
              ri.variety && String(ri.variety).toUpperCase().trim() === String(variety).toUpperCase().trim() && 
              parseInt(ri.stem) === stem
            );
          }
          
          if (!matchedRaw) {
            matchedRaw = rawPayloadItems.find(ri => 
              ri && ri.variety && String(ri.variety).toUpperCase().trim() === String(variety).toUpperCase().trim() && 
              parseInt(ri.stem) === stem
            );
          }
          
          if (matchedRaw && matchedRaw.remainingQty !== undefined) {
            matchedRaw.remainingQty -= qty;
          }
          
          let customPrice = matchedRaw ? (matchedRaw.price || matchedRaw.suggestedPrice || matchedRaw.pricePerStem || matchedRaw.clientPricePerStem || (matchedRaw.finalPrice / Math.max(1, matchedRaw.stems || stems))) : undefined;
          
          if (customPrice === undefined || isNaN(customPrice)) {
            customPrice = undefined;
          }
          
          const customSupplier = matchedRaw ? (matchedRaw.supplier || matchedRaw.suggestedSupplier) : undefined;
          
          parsedItems.push({
            rawLine: line,
            qty: qty,
            variety: variety,
            stem: stem,
            stems: stems,
            type: matchedRaw && matchedRaw.type && matchedRaw.type !== "undefined" ? matchedRaw.type : "",
            isTbc: matchedRaw && matchedRaw.isTbc !== undefined ? (matchedRaw.isTbc === true || matchedRaw.isTbc === "true" || matchedRaw.isTbc === 1) : isTbc,
            checked: matchedRaw && matchedRaw.checked !== undefined ? matchedRaw.checked : !isTbc,
            estimatedPrice: 0,
            finalPrice: 0,
            price: customPrice,
            supplierPrice: matchedRaw ? matchedRaw.supplierPrice : undefined,
            opCost: matchedRaw ? matchedRaw.opCost : undefined,
            costBreakdown: matchedRaw ? matchedRaw.costBreakdown : undefined,
            supplier: customSupplier,
            isPriceLocked: matchedRaw ? (matchedRaw.isPriceLocked === true || matchedRaw.isPriceLocked === "true" || matchedRaw.isPriceLocked === 1) : false,
            stock: matchedRaw && matchedRaw.stock !== undefined ? parseInt(matchedRaw.stock) : undefined
          });
        } else {
          parsedItems.push({
            rawLine: line,
            qty: 0,
            variety: line,
            stem: 0,
            stems: 0,
            isTbc: false,
            checked: false,
            estimatedPrice: 0,
            finalPrice: 0
          });
        }
      });

      const orderIncoterm = String(order["Incoterms"] || "");
      const orderDate = formatToIsoDate(order["Delivery Date"]);
      const orderStandardTotal = parseFloat(order["Standard Total ($)"]) || 0;

      let sumEstimated = 0;
      if (isDraftQuote) {
        sumEstimated = calculateEstimatedPricing(parsedItems, orderDate, orderIncoterm);
      } else {
        // Strict historical lock for Quote Sent / Invoice Sent
        parsedItems.forEach(item => {
          if (item.qty > 0 && item.price !== undefined) {
            item.finalPrice = parseFloat(item.price) * Math.max(1, item.stems);
            sumEstimated += item.finalPrice;
          } else {
            item.finalPrice = 0;
          }
          item.estimatedPrice = item.finalPrice;
        });
      }

      // Update Standard Total purely for display parity if Draft Quote
      let finalStandardTotalToDisplay = orderStandardTotal;
      if (isDraftQuote && sumEstimated > 0) {
        finalStandardTotalToDisplay = sumEstimated;
      }

      state.currentOrderItems = parsedItems;

      // Dynamic Footer Actions
      const footer = document.getElementById("m-order-actions-footer");
      footer.innerHTML = "";
      
      const closeBtn = document.createElement("button");
      closeBtn.className = "btn-secondary";
      closeBtn.textContent = "Close";
      closeBtn.onclick = () => toggleModal("order", false);
      footer.appendChild(closeBtn);
      
      const cancelBtn = document.createElement("button");
      cancelBtn.className = "btn-secondary";
      cancelBtn.style.color = "var(--accent-crimson)";
      cancelBtn.style.borderColor = "var(--accent-crimson)";
      cancelBtn.textContent = "Cancel Order";
      cancelBtn.dataset.confirmState = "0";
      cancelBtn.onclick = (e) => {
        if (cancelBtn.dataset.confirmState === "0") {
          cancelBtn.dataset.confirmState = "1";
          cancelBtn.textContent = "Confirm Cancellation?";
          cancelBtn.style.backgroundColor = "rgba(239, 68, 68, 0.1)";
          setTimeout(() => {
            if (cancelBtn) {
              cancelBtn.dataset.confirmState = "0";
              cancelBtn.textContent = "Cancel Order";
              cancelBtn.style.backgroundColor = "transparent";
            }
          }, 3000);
        } else {
          toggleModal("order", false);
          triggerCancelOrder(orderId);
        }
      };
      footer.appendChild(cancelBtn);
      
      if (order["Order Status"] === "Draft Quote" || order["Order Status"] === "Quote Sent") {
        const editBtn = document.createElement("button");
        editBtn.className = "btn-secondary";
        editBtn.textContent = "Edit Quote";
        editBtn.onclick = () => { toggleModal("order", false); openLineItemEditor(orderId); };
        footer.appendChild(editBtn);
      }

      if (order["Order Status"] === "Draft Quote") {
        const quoteBtn = document.createElement("button");
        quoteBtn.className = "btn-primary";
        quoteBtn.id = "btn-approve-edit-email-quote";
        quoteBtn.textContent = "Approve & Edit Email Quote";
        quoteBtn.onclick = () => { triggerQuoteApproval(orderId); };
        footer.appendChild(quoteBtn);
      }
      
      if (order["Order Status"] === "Quote Sent") {
        const invBtn = document.createElement("button");
        invBtn.className = "btn-primary";
        invBtn.textContent = "Draft & Send Proforma Invoice";
        invBtn.onclick = () => { toggleModal("order", false); triggerInvoiceConfirm(orderId); };
        footer.appendChild(invBtn);
      }
      
      const grandTotalVal = parseFloat(order["Grand Total ($)"]) || 0;
      const { totalConfirmed, outstandingConfirmed, outstandingVerified } = getOrderPaymentSummary(orderId, grandTotalVal);

      if (order["Order Status"] === "Invoice Sent" && order["Payment Status"] !== "Payment Confirmed" && order["Payment Status"] !== "Partially Paid") {
        const payBtn = document.createElement("button");
        payBtn.className = "btn-secondary";
        payBtn.textContent = "Confirm Pay Note";
        payBtn.onclick = () => { toggleModal("order", false); triggerPaymentConfirm(orderId, outstandingConfirmed); };
        footer.appendChild(payBtn);
      }
      
      if (order["Order Status"] === "Invoice Sent" || order["Payment Status"] === "Payment Confirmed" || order["Payment Status"] === "Partially Paid") {
        const verifyBtn = document.createElement("button");
        verifyBtn.className = "btn-primary";
        
        // Calculate tolerance: 0.1% of grand total, capped at $20, floor at $0.50
        const calculatedTolerance = Math.min(grandTotalVal * 0.001, 20);
        const tolerance = Math.max(0.50, calculatedTolerance);
        
        const isConfirmed = (totalConfirmed >= grandTotalVal - tolerance) || (order["Payment Status"] === "Payment Confirmed");
        if (isConfirmed) {
          verifyBtn.style.background = "var(--primary)";
          verifyBtn.style.color = "#052e16";
          verifyBtn.disabled = false;
          verifyBtn.title = "Verify bank settlement for this order";
          verifyBtn.onclick = () => { toggleModal("order", false); triggerPaymentVerify(orderId, outstandingVerified); };
        } else {
          verifyBtn.style.background = "var(--border-card)";
          verifyBtn.style.borderColor = "var(--text-muted)";
          verifyBtn.style.color = "var(--text-muted)";
          verifyBtn.style.cursor = "not-allowed";
          verifyBtn.disabled = true;
          verifyBtn.title = "Verification is locked until client payment confirmation matches the order total.";
        }
        
        verifyBtn.textContent = "Verify Funds (Bank)";
        footer.appendChild(verifyBtn);
      }
      
      if (order["Order Status"] === "Firm Order") {
        const sourceBtn = document.createElement("button");
        sourceBtn.className = "btn-primary";
        sourceBtn.style.background = "var(--primary-glow)";
        sourceBtn.style.borderColor = "var(--primary)";
        sourceBtn.style.color = "var(--primary)";
        sourceBtn.textContent = "Confirm Sourced from Farms";
        sourceBtn.onclick = () => { confirmOrderSourced(orderId); };
        footer.appendChild(sourceBtn);
      }
      
      if (order["Order Status"] === "Firm Order" || order["Order Status"] === "Sourced" || order["Order Status"] === "In Transit") {
        const logBtn = document.createElement("button");
        logBtn.className = "btn-primary";
        logBtn.style.background = "var(--accent-indigo)";
        logBtn.style.color = "#fff";
        logBtn.textContent = "Manage FOB Logistics";
        logBtn.onclick = () => { toggleModal("order", false); triggerLogisticsUpdate(orderId); };
        footer.appendChild(logBtn);
      }
      
      renderOrderDetailsItems();
      renderSlaTimeline(order);
      switchOrderTab("details");
      
      const qcStatusSelect = document.getElementById("qc-status-select");
      const qcNotesText = document.getElementById("qc-notes-text");
      if (qcStatusSelect) qcStatusSelect.value = order["QC_Status"] || "Pending";
      if (qcNotesText) qcNotesText.value = order["QC_Notes"] || "";
      
      toggleModal("order", true);
    }

    function execEditorCommand(command, value = null) {
      document.execCommand(command, false, value);
      document.getElementById('m-email-visual-body').focus();
      updateEditorToolbarState();
    }

    function updateEditorToolbarState() {
      const boldBtn = document.querySelector('.editor-btn[title="Bold"]');
      const italicBtn = document.querySelector('.editor-btn[title="Italic"]');
      const underlineBtn = document.querySelector('.editor-btn[title="Underline"]');
      const bulletBtn = document.querySelector('.editor-btn[title="Bullet List"]');
      const numberBtn = document.querySelector('.editor-btn[title="Numbered List"]');
      
      if (boldBtn) boldBtn.classList.toggle('active', document.queryCommandState('bold'));
      if (italicBtn) italicBtn.classList.toggle('active', document.queryCommandState('italic'));
      if (underlineBtn) underlineBtn.classList.toggle('active', document.queryCommandState('underline'));
      if (bulletBtn) bulletBtn.classList.toggle('active', document.queryCommandState('insertUnorderedList'));
      if (numberBtn) numberBtn.classList.toggle('active', document.queryCommandState('insertOrderedList'));
    }

    function triggerQuoteApproval(orderId) {
      toggleModal("order", false);
      showGlobalLoading(true, "Generating quote email preview from database...");
      
      const selectedItems = state.currentOrderItems
        .filter(item => item.checked)
        .map(item => ({ ...item }));
        
      postPayload({
        action: "getQuotePreview",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: orderId,
        selectedItems: selectedItems
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          document.getElementById("m-email-recipient").value = res.recipient || "";
          document.getElementById("m-email-subject").value = res.subject || "";
          document.getElementById("m-email-visual-body").innerHTML = res.body || "";
          
          // Re-wire form to sendQuote handler and restore labels
          const form = document.getElementById("email-quote-send-form");
          form.onsubmit = submitSendQuote;
          
          document.getElementById("btn-email-send").textContent = "Send Quote Email";
          document.querySelector("#modal-email-backdrop h3").textContent = "Approve & Edit Email Quote";
          
          updateEditorToolbarState();
          toggleModal("email", true);
        } else {
          showToast("error", res.message || "Failed to generate email preview.");
        }
      }).catch(err => {
        showGlobalLoading(false);
        showToast("error", "Error contacting database.");
      });
    }

    function submitSendQuote(e) {
      e.preventDefault();
      
      const recipient = document.getElementById("m-email-recipient").value;
      const subject = document.getElementById("m-email-subject").value;
      const body = document.getElementById("m-email-visual-body").innerHTML;
      
      const selectedItems = state.currentOrderItems
        .filter(item => item.checked)
        .map(item => ({ ...item }));
        
      const deselectedItems = state.currentOrderItems
        .filter(item => !item.checked)
        .map(item => ({ ...item }));
        
      showGlobalLoading(true, "Sending quote and updating pipeline...");
      
      postPayload({
        action: "sendQuote",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: state.currentOrder["Order ID"],
        selectedItems: selectedItems,
        deselectedItems: deselectedItems,
        recipient: recipient,
        subject: subject,
        body: body
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", "Quote approved and email sent!");
          toggleModal("email", false);
          
          if (state.isDemoMode) {
            // Simulate the update locally in offline mode
            const orderId = state.currentOrder["Order ID"];
            const order = state.orders.find(o => o["Order ID"] === orderId);
            if (order) {
              order["Order Status"] = "Quote Sent";
              order["Last Updated"] = new Date().toISOString();
              
              // Filter order summary to selected items
              const summaryLines = [];
              selectedItems.forEach(item => {
                summaryLines.push(`${item.qty}x ${item.variety} (${item.stem}cm)`);
              });
              order["Items Summary"] = summaryLines.join("\n");
              
              // Recalculate totals
              let totalBoxes = selectedItems.reduce((sum, i) => sum + i.qty, 0);
              let totalStems = totalBoxes * 100;
              let standardTotal = parseFloat(document.getElementById("m-order-standard-total").textContent.replace("$", "")) || 0;
              let discountPercent = getDiscountPercent(totalStems);
              let discountAmount = standardTotal * discountPercent;
              let grandTotal = standardTotal - discountAmount;
              
              const orderStandardTotal = parseFloat(order["Standard Total ($)"]) || 0;
              
              order["Standard Total ($)"] = standardTotal.toFixed(2);
              order["Discount Amount ($)"] = discountAmount.toFixed(2);
              order["Grand Total ($)"] = grandTotal.toFixed(2);
              
              // Log sent interaction
              state.interactions.push({
                "Interaction ID": "INT-LOCAL-" + Math.floor(Math.random()*1000),
                "Client ID": order["Client ID"],
                "Timestamp": new Date().toISOString(),
                "Type": "Email",
                "Notes": `Sent Quote Email: ${subject}\n(Items: ${order["Items Summary"].replace(/\n/g, ", ")})`,
                "Salesperson ID": state.user.userId,
                "Follow-up Date": ""
              });
              
              // Handle deselected split
              if (deselectedItems.length > 0) {
                let baseId = orderId;
                if (baseId.indexOf("-R") !== -1) {
                  baseId = baseId.split("-R")[0];
                }
                let nextRev = 1;
                const rPattern = new RegExp("^" + baseId + "-R(\\d+)$");
                state.orders.forEach(o => {
                  const rowId = o["Order ID"];
                  const match = rowId.match(rPattern);
                  if (match) {
                    const revNum = parseInt(match[1]);
                    if (revNum >= nextRev) {
                      nextRev = revNum + 1;
                    }
                  }
                });
                const newOrderId = baseId + "-R" + nextRev;
                
                const splitSummaryLines = [];
                deselectedItems.forEach(item => {
                  splitSummaryLines.push(`${item.qty}x ${item.variety} (${item.stem}cm) [TO BE CONFIRMED]`);
                });
                
                // Add new split order row
                const splitStandardTotal = Math.max(0, orderStandardTotal - standardTotal);
                
                state.orders.push({
                  "Order ID": newOrderId,
                  "Client ID": order["Client ID"],
                  "Delivery Date": order["Delivery Date"],
                  "Incoterms": order["Incoterms"],
                  "Items Summary": splitSummaryLines.join("\n"),
                  "Standard Total ($)": splitStandardTotal.toFixed(2),
                  "Discount Amount ($)": "0.00",
                  "Grand Total ($)": splitStandardTotal.toFixed(2),
                  "Order Status": "Draft Quote",
                  "Payment Status": "Unpaid",
                  "Raw JSON Payload": order["Raw JSON Payload"],
                  "Last Updated": new Date().toISOString()
                });
                
                state.interactions.push({
                  "Interaction ID": "INT-LOCAL-" + Math.floor(Math.random()*1000),
                  "Client ID": order["Client ID"],
                  "Timestamp": new Date().toISOString(),
                  "Type": "Internal Note",
                  "Notes": `Deselected quote items split off into new revision draft ${newOrderId}`,
                  "Salesperson ID": "SYSTEM",
                  "Follow-up Date": ""
                });
              }
            }
            renderOrdersView();
          } else {
            fetchLiveDatabase();
          }
        } else {
          showToast("error", res.message || "Failed to send quote email.");
        }
      });
    }

    let currentOutreachClientId = null;

    function handleOutreachTemplateChange() {
      if (!currentOutreachClientId) return;
      const templateType = document.getElementById("m-outreach-template").value;
      
      const emailData = generateOutreachHtml(currentOutreachClientId, templateType);
      
      document.getElementById("m-email-subject").value = emailData.subject;
      document.getElementById("m-email-visual-body").innerHTML = emailData.htmlBody;
    }

    function generateOutreachHtml(clientId, templateType) {
      let client = null;
      let email = "";
      let contactName = "";
      let companyName = "";
      let greetingName = "Flower Professional";

      if (clientId) {
        client = state.clients.find(c => c["Client ID"] === clientId);
        if (!client) return { subject: "", htmlBody: "" };
        email = client["Email"] || "";
        contactName = client["Contact Name"] || "";
        companyName = client["Company Name"] || "";
        
        if (contactName && contactName.trim() !== "") {
          const parts = contactName.trim().split(/\s+/);
          if (parts.length > 0) {
            greetingName = parts[0];
          }
        } else if (companyName && companyName.trim() !== "") {
          greetingName = companyName.trim() + " team";
        }
      } else {
        // Bulk outreach fallback placeholders
        greetingName = "[Contact Name]";
        companyName = "[Company Name]";
      }
      const repName = state.user.name || "Andean Valley LLC Sales Team";
      const activeUserObj = state.users.find(u => u["User ID"] === state.user.userId) || {};
      const repEmail = state.user.email || activeUserObj["Email"] || "sales@andeanvalleycollection.com";
      const repPhone = state.user.phone || activeUserObj["Phone"] || "+1 (832) 510-1997";
      const repWhatsApp = state.user.whatsapp || activeUserObj["WhatsApp"] || "593988636402";
      const repRole = state.user.role === "Admin" ? "Sales Manager" : "Sales Representative";
      
      const repWhatsAppStr = String(repWhatsApp);
      const repPhoneStr = String(repPhone);
      
      let subject = "Access Multiple Farms. Live Availability. One Order.";
      if (templateType === "promo") {
        subject = "Order Promos Available Today in Miami - Act Fast!";
      }

      let dynamicMiddleSection = "";
      if (templateType === "promo") {
        dynamicMiddleSection = `
  <!-- Promo CTA Box -->
  <div style="margin: 25px 0; text-align: center;">
    <a href="https://andeanvalleycollection.com/quote" target="_blank" style="font-size: 14px; text-transform: uppercase; color: #b71c1c; font-weight: bold; text-decoration: underline; letter-spacing: 1px; margin-bottom: 15px; font-family: Arial, sans-serif; display: inline-block;">Check Promos Available Today in Miami - Act Fast!</a>
    <div style="background-color: #fff9e6; border: 1px solid #ffd700; padding: 20px; border-radius: 8px; margin-top: 15px;">
      <p style="font-size: 16px; color: #333; margin: 0; font-family: Arial, sans-serif;">
        <strong>Access our catalog and search "Promo" to view all varieties available today!</strong>
      </p>
    </div>
  </div>
        `;
      } else {
        dynamicMiddleSection = `
  <!-- Showcase Rose Gallery -->
  <div style="margin: 25px 0; text-align: center;">
    <p style="font-size: 12px; text-transform: uppercase; color: #777; letter-spacing: 1px; margin-bottom: 15px; font-family: Arial, sans-serif;">Active Farm Varieties Available for Order</p>
    <table cellpadding="5" style="margin: 0 auto; border-collapse: collapse; width: 100%; max-width: 550px;">
      <tr>
        <td style="text-align: center; width: 25%; padding: 5px;">
          <img src="https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/36b82217-980c-4868-83c0-62a592e91411.png" style="width: 100%; max-width: 100px; border-radius: 8px; border: 1px solid #eee; display: block; margin: 0 auto 5px;" alt="Freedom" />
          <span style="font-size: 11px; font-weight: bold; color: #333; font-family: Arial, sans-serif; display: block; word-break: break-all;">FREEDOM (Red)</span>
        </td>
        <td style="text-align: center; width: 25%; padding: 5px;">
          <img src="https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/cfe9f1b6-638c-4f4c-bd1f-fa3e611678b6.jpg" style="width: 100%; max-width: 100px; border-radius: 8px; border: 1px solid #eee; display: block; margin: 0 auto 5px;" alt="Tibet" />
          <span style="font-size: 11px; font-weight: bold; color: #333; font-family: Arial, sans-serif; display: block; word-break: break-all;">TIBET (White)</span>
        </td>
        <td style="text-align: center; width: 25%; padding: 5px;">
          <img src="https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/64211faa-6b7a-4699-bc7c-2881c76a24c4.png" style="width: 100%; max-width: 100px; border-radius: 8px; border: 1px solid #eee; display: block; margin: 0 auto 5px;" alt="Novia" />
          <span style="font-size: 11px; font-weight: bold; color: #333; font-family: Arial, sans-serif; display: block; word-break: break-all;">NOVIA (Pink)</span>
        </td>
        <td style="text-align: center; width: 25%; padding: 5px;">
          <img src="https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/bc8e4138-1c97-4b58-b73e-db1c9fecc506.png" style="width: 100%; max-width: 100px; border-radius: 8px; border: 1px solid #eee; display: block; margin: 0 auto 5px;" alt="Free Spirit" />
          <span style="font-size: 11px; font-weight: bold; color: #333; font-family: Arial, sans-serif; display: block; word-break: break-all;">FREE SPIRIT (Orange)</span>
        </td>
      </tr>
    </table>
  </div>
        `;
      }

      // Build dynamic HTML email body
      const htmlBody = `
<div style="font-family: Arial, sans-serif; color: #333; max-width: 650px; margin: 0 auto; border: 1px solid #e2ece2; border-radius: 12px; padding: 30px; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.03);">
  <div style="text-align: center; border-bottom: 2px solid #4A6A4A; padding-bottom: 20px; margin-bottom: 25px;">
    <table align="center" style="background: linear-gradient(#ffffff, #ffffff); background-color: #ffffff; padding: 15px 25px; border-radius: 8px; margin: 0 auto 10px; border-collapse: collapse; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
      <tr>
        <td style="text-align: center;">
          <img src="https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=768,fit=crop/YNq2Qob540ikPKVx/avf-logo01-ec9GQS1gGRgVMRbb.png" alt="Andean Valley LLC Wholesale Logo" style="width: 240px; height: auto; max-width: 100%; display: block; margin: 0 auto;" />
        </td>
      </tr>
    </table>
    <p style="color: #666; margin: 10px 0 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; font-family: Arial, sans-serif;">MULTIPLE FARMS. ONE RELATIONSHIP. ONE ORDER.</p>
  </div>
  
  <p style="font-size: 15px; line-height: 1.6; font-family: Arial, sans-serif;">Dear ${greetingName},</p>
  
  <p style="font-size: 15px; line-height: 1.6; font-family: Arial, sans-serif;">Andean Valley gives florists and event professionals access to inventory from multiple Andean farms through a single sourcing relationship, with live availability and same-day quotations.</p>
  
  <ul style="font-size: 15px; line-height: 1.6; padding-left: 20px; color: #444; font-family: Arial, sans-serif;">
    <li style="margin-bottom: 8px;"><strong>View upcoming inventory availability across partner farms</strong></li>
    <li style="margin-bottom: 8px;"><strong>Compare varieties, stem lengths, and upcoming availability in one place</strong></li>
    <li style="margin-bottom: 8px;"><strong>Receive quotes within one business hour for available stock</strong></li>
    <li style="margin-bottom: 8px;"><strong>Eliminate spreadsheet-based ordering delays and confusion</strong></li>
    <li style="margin-bottom: 8px;"><strong>Request unavailable varieties and receive timely alternatives</strong></li>
  </ul>
  
  <!-- Hero Flowers Banner Picture -->
  <div style="margin: 25px 0; text-align: center;">
    <img src="https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1920,fit=crop/YNq2Qob540ikPKVx/bicolor-roses-landscape-banner-loqbpZaqY0Uuh8XX.png" alt="Premium Andean Bicolor Roses" style="width: 100%; max-width: 600px; height: auto; border-radius: 8px; border: 1px solid #e2ece2;" />
  </div>

  ${dynamicMiddleSection}
  
  <div style="background-color: #f7faf7; border-left: 4px solid #4A6A4A; padding: 15px; margin: 25px 0; border-radius: 4px; text-align: left;">
    <h4 style="margin: 0 0 8px 0; color: #4A6A4A; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; font-family: Arial, sans-serif;">Wholesale Standards</h4>
    <ul style="margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: #444; font-family: Arial, sans-serif;">
      <li style="margin-bottom: 4px;">Premium roses grown at 2,800m+ altitude for exceptional head size and vase life</li>
      <li style="margin-bottom: 4px;">Multiple farms through one relationship</li>
      <li style="margin-bottom: 4px;">Live inventory updated daily</li>
      <li style="margin-bottom: 4px;">Inventory secured immediately upon payment confirmation</li>
      <li style="margin-bottom: 4px;">Minimum order: 5 boxes (500 stems)</li>
    </ul>
  </div>
  
  <p style="font-size: 15px; line-height: 1.6; font-family: Arial, sans-serif;">If you are planning upcoming installations, events, or retail purchasing cycles, you can access current availability below:</p>
  
  <!-- Interactive CTA Button -->
  <div style="text-align: center; margin: 30px 0;">
    <a href="https://andeanvalleycollection.com/quote" target="_blank" style="background-color: #4A6A4A; color: #ffffff; text-decoration: none; padding: 14px 28px; font-weight: bold; font-size: 15px; border-radius: 8px; display: inline-block; box-shadow: 0 4px 8px rgba(74,106,74,0.25); font-family: Arial, sans-serif;">CHECK LIVE AVAILABILITY & QUOTE</a>
    <p style="font-size: 12px; color: #777; margin-top: 10px; font-family: Arial, sans-serif;">Or visit: <a href="https://andeanvalleycollection.com/quote" target="_blank" style="color: #4A6A4A; text-decoration: underline;">www.andeanvalleycollection.com/quote</a></p>
  </div>
  
  <div style="border-top: 1px solid #eee; padding-top: 20px; margin-top: 25px; font-size: 14px; line-height: 1.5; color: #555; text-align: left;">
    <p style="margin: 0 0 5px 0; font-family: Arial, sans-serif;"><strong>Direct Contact:</strong></p>
    <p style="margin: 0 0 3px 0; font-family: Arial, sans-serif;">Call (US): <a href="tel:${repPhoneStr.replace(/[^0-9+]/g, '')}" style="color: #4A6A4A; text-decoration: none;">${repPhone}</a></p>
    <p style="margin: 0 0 3px 0; font-family: Arial, sans-serif;">WhatsApp (ECU): <a href="https://wa.me/${repWhatsAppStr.replace(/[^0-9]/g, '')}" target="_blank" style="color: #4A6A4A; text-decoration: none; font-weight: bold;">+${repWhatsApp}</a></p>
    <p style="margin: 0 0 15px 0; font-family: Arial, sans-serif;">Email: <a href="mailto:${repEmail}" style="color: #4A6A4A; text-decoration: none;">${repEmail}</a></p>
    
    <p style="margin: 15px 0 0 0; font-family: Arial, sans-serif;">Sincerely,</p>
    <p style="margin: 5px 0 0 0; font-weight: bold; color: #333; font-family: Arial, sans-serif;">${repName}</p>
    <p style="margin: 0; color: #777; font-family: Arial, sans-serif;">${repRole}</p>
    <p style="margin: 0; font-weight: bold; color: #4A6A4A; font-family: Arial, sans-serif;">Andean Valley LLC</p>
  </div>
  
  <div style="border-top: 1px solid #f2f2f2; margin-top: 30px; padding-top: 15px; font-size: 8.5px; color: #aaa; text-align: center; line-height: 1.4; font-family: Arial, sans-serif;" contenteditable="false">
    <p style="margin: 0 0 5px 0;">Andean Valley LLC</p>
    <p style="margin: 0;">You are receiving this because of your presence in the floral industry. If you'd prefer not to receive future wholesale updates, reply with &quot;Unsubscribe&quot; to opt out.</p>
  </div>
</div>
      `;
      return { subject, htmlBody };
    }

    function triggerOutreachEmail(clientId) {
      if (state.selectedClientId) {
        closeClientDrawer();
      }
      
      const client = state.clients.find(c => c["Client ID"] === clientId);
      if (!client) {
        showToast("error", "Client not found.");
        return;
      }
      
      if (!isClientAccessAllowed(client)) {
        showToast("warning", "Access Restricted: This client is assigned to another representative.");
        return;
      }
      
      currentOutreachClientId = clientId;
      
      // Default to standard template when opening
      document.getElementById("m-outreach-template").value = "standard";
      const emailData = generateOutreachHtml(clientId, "standard");
      
      document.getElementById("m-email-recipient").value = client["Email"] || "";
      document.getElementById("m-email-subject").value = emailData.subject;
      document.getElementById("m-email-visual-body").innerHTML = emailData.htmlBody;
      
      // Show the outreach template selector group since this is outreach mode
      document.getElementById("outreach-template-selector-group").style.display = "block";
      
      // Update form configurations to Outreach Mode
      const form = document.getElementById("email-quote-send-form");
      form.onsubmit = (e) => submitSendOutreach(e, clientId);
      
      document.getElementById("btn-email-send").textContent = "Send Outreach Email";
      document.querySelector("#modal-email-backdrop h3").textContent = "Approve & Edit Outreach Email";
      
      updateEditorToolbarState();
      toggleModal("email", true);
    }

    function submitSendOutreach(e, clientId) {
      e.preventDefault();
      
      const recipient = document.getElementById("m-email-recipient").value;
      const subject = document.getElementById("m-email-subject").value;
      const body = document.getElementById("m-email-visual-body").innerHTML;
      
      showGlobalLoading(true, "Sending outreach email and logging interaction...");
      
      postPayload({
        action: "sendOutreachEmail",
        userId: state.user.userId,
        passcode: state.passcode,
        clientId: clientId,
        recipient: recipient,
        subject: subject,
        body: body
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", "Outreach email sent successfully!");
          toggleModal("email", false);
          
          const interactionNotes = `Sent Cold Outreach Email: ${subject}\n\nBody Preview:\n${document.getElementById("m-email-visual-body").innerText.substring(0, 300)}...`;
          
          if (state.isDemoMode) {
            // Log interaction locally
            state.interactions.push({
              "Interaction ID": "INT-LOCAL-" + Math.floor(Math.random()*1000),
              "Client ID": clientId,
              "Timestamp": new Date().toISOString(),
              "Type": "Email",
              "Notes": interactionNotes,
              "Salesperson ID": state.user.userId,
              "Follow-up Date": ""
            });
            if (state.selectedClientId === clientId) {
              renderClientTimeline(clientId);
            }
          } else {
            fetchLiveDatabase().then(() => {
              if (state.selectedClientId === clientId) {
                renderClientTimeline(clientId);
              }
            });
          }
        } else {
          showToast("error", res.message || "Failed to send outreach email.");
        }
      }).catch(err => {
        showGlobalLoading(false);
        showToast("error", "Error sending outreach email.");
      });
    }

    // --- 11. FOB LOGISTICS STEPPER CONTROLLER ---
    function triggerLogisticsUpdate(orderId) {
      const logItem = state.logistics.find(l => l["Order ID"] === orderId);
      const order = state.orders.find(o => o["Order ID"] === orderId);
      const isCif = order && order["Incoterms"] && order["Incoterms"].includes("CIF");
      
      document.getElementById("m-log-order-id").value = orderId;
      document.getElementById("m-log-awb").value = logItem ? (logItem["Airway Bill (AWB)"] || "") : "";
      document.getElementById("m-log-carrier").value = logItem ? (logItem["Carrier"] || "") : "";
      document.getElementById("m-log-origin").value = logItem ? (logItem["Origin Airport"] || "Quito") : "Quito";
      
      const checkpointSelect = document.getElementById("m-log-checkpoint");
      checkpointSelect.innerHTML = "";
      
      if (isCif) {
        checkpointSelect.innerHTML = `
          <option value="MIA Warehouse">Arrived in Miami Warehouse</option>
          <option value="Delivered">Delivered to Final destination</option>
        `;
        document.getElementById("m-log-origin").closest(".form-group").style.display = "none";
      } else {
        checkpointSelect.innerHTML = `
          <option value="Origin Warehouse">Origin Warehouse (Confirmed)</option>
          <option value="In Flight">In Flight (Departed)</option>
          <option value="MIA Customs">MIA Customs Release</option>
          <option value="MIA Warehouse">Arrived in Miami Warehouse</option>
          <option value="Delivered">Delivered to Final destination</option>
        `;
        document.getElementById("m-log-origin").closest(".form-group").style.display = "block";
      }
      
      document.getElementById("m-log-checkpoint").value = logItem ? (logItem["Current Checkpoint"] || (isCif ? "MIA Warehouse" : "Origin Warehouse")) : (isCif ? "MIA Warehouse" : "Origin Warehouse");
      document.getElementById("m-log-notes").value = logItem ? (logItem["Destination Notes"] || "") : "";
      
      toggleModal("logupdate", true);
    }

    function submitLogisticsUpdate(e) {
      e.preventDefault();
      
      const orderId = document.getElementById("m-log-order-id").value;
      const order = state.orders.find(o => o["Order ID"] === orderId);
      const isCif = order && order["Incoterms"] && order["Incoterms"].includes("CIF");
      
      const awb = document.getElementById("m-log-awb").value;
      const carrier = document.getElementById("m-log-carrier").value;
      const origin = isCif ? "Miami" : document.getElementById("m-log-origin").value;
      const checkpoint = document.getElementById("m-log-checkpoint").value;
      const notes = document.getElementById("m-log-notes").value;
      
      toggleModal("logupdate", false);
      showGlobalLoading(true, "Updating shipment checkpoints...");
      
      const payload = {
        action: "updateLogistics",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: orderId,
        airwayBillNum: awb,
        carrier: carrier,
        originAirport: origin,
        currentCheckpoint: checkpoint,
        destinationNotes: notes
      };
      
      postPayload(payload)
        .then(res => {
          showGlobalLoading(false);
          if (res.success) {
            showToast("success", "FOB logistics checklist updated successfully!");
            if (state.isDemoMode) {
              let log = state.logistics.find(l => l["Order ID"] === orderId);
              const nowIso = new Date().toISOString();
              
              if (!log) {
                log = {
                  "Logistics ID": "LOG-LOCAL-" + Math.floor(Math.random()*1000),
                  "Order ID": orderId
                };
                state.logistics.push(log);
              }
              
              log["Airway Bill (AWB)"] = awb;
              log["Carrier"] = carrier;
              log["Origin Airport"] = origin;
              log["Current Checkpoint"] = checkpoint;
              log["Destination Notes"] = notes;
              
              // Set dates
              if (checkpoint === "Origin Warehouse") log["Origin Delivery Time"] = nowIso;
              else if (checkpoint === "In Flight") log["Flight Departure Time"] = nowIso;
              else if (checkpoint === "MIA Customs") { log["MIA Arrival Time"] = nowIso; log["Customs Release Time"] = nowIso; }
              else if (checkpoint === "MIA Warehouse") log["MIA Warehouse Time"] = nowIso;
              else if (checkpoint === "Delivered") log["Final Warehouse Time"] = nowIso;
              
              // Update order status
              const order = state.orders.find(o => o["Order ID"] === orderId);
              if (order) {
                order["Order Status"] = (checkpoint === "Delivered") ? "Delivered" : "In Transit";
                order["Last Updated"] = nowIso;
                
                // Add interaction log
                state.interactions.push({
                  "Interaction ID": "INT-LOCAL-" + Math.floor(Math.random()*1000),
                  "Client ID": order["Client ID"],
                  "Timestamp": nowIso,
                  "Type": "Delivery",
                  "Notes": `Logistics status: ${checkpoint} (AWB: ${awb})`,
                  "Salesperson ID": state.user.userId,
                  "Follow-up Date": ""
                });
              }
              renderLogisticsView();
            } else {
              fetchLiveDatabase();
            }
          } else {
            showToast("error", res.message || "Failed to update logistics.");
          }
        })
        .catch(() => {
          showGlobalLoading(false);
          showToast("error", "Error saving shipment record.");
        });
    }
    
    function openSourcingPopup(index) {
      const item = state.currentOrderItems[index];
      if (!item) return;
      
      document.getElementById("m-sourcing-index").value = index;
      
      // Determine if using suggested values (estimated failsafe pricing)
      const isEstimated = (!item.supplier && !item.price && (item.suggestedSupplier || item.suggestedPrice));
      
      document.getElementById("m-sourcing-supplier").value = item.supplier || item.suggestedSupplier || "";
      document.getElementById("m-sourcing-price").value = (item.price !== undefined && parseFloat(item.price) > 0) ? item.price : (item.suggestedPrice !== undefined ? item.suggestedPrice.toFixed(3) : "");
      document.getElementById("m-sourcing-boxes").value = item.qty || 1;
      document.getElementById("m-sourcing-confirm").checked = true;
      
      document.getElementById("m-sourcing-title").textContent = `Sourcing Spec: ${item.variety} (${item.stem}cm)`;
      
      // Show/hide estimated price warning label
      const warningEl = document.getElementById("m-sourcing-warning");
      if (warningEl) {
        warningEl.style.display = isEstimated ? "block" : "none";
      }
      
      toggleModal("sourcing", true);
    }
    
    function submitSourcingUpdate(e) {
      e.preventDefault();
      const index = parseInt(document.getElementById("m-sourcing-index").value);
      const supplier = document.getElementById("m-sourcing-supplier").value.trim();
      const price = parseFloat(document.getElementById("m-sourcing-price").value.replace(',', '.')) || 0;
      const boxes = parseInt(document.getElementById("m-sourcing-boxes").value) || 0;
      const confirm = document.getElementById("m-sourcing-confirm").checked;
      
      const item = state.currentOrderItems[index];
      if (!item) return;
      
      item.supplier = supplier;
      item.price = price;
      item.isPriceLocked = true;
      
      if (boxes > 0 && boxes !== item.qty) {
        const oldQty = item.qty;
        const oldStems = item.stems;
        item.qty = boxes;
        if (oldQty > 0) {
          item.stems = Math.round((boxes / oldQty) * oldStems);
        }
      }
      
      if (confirm) {
        item.isTbc = false;
        item.checked = true;
      }
      
      toggleModal("sourcing", false);
      showGlobalLoading(true, "Registering sourcing quote and recalculating margins...");
      
      postPayload({
        action: "saveOrderSourcing",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: state.currentOrder["Order ID"],
        items: state.currentOrderItems
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", "Sourcing details saved.");
          
          const order = state.orders.find(o => o["Order ID"] === state.currentOrder["Order ID"]);
          if (order) {
            order["Items Summary"] = res.itemsSummary;
            order["Standard Total ($)"] = res.standardTotal;
            order["Discount Amount ($)"] = res.discountAmount;
            order["Grand Total ($)"] = res.grandTotal;
            order["Raw JSON Payload"] = res.rawPayload;
            state.currentOrder = order;
          }
          
          openOrderDetails(state.currentOrder["Order ID"]);
        } else {
          showToast("error", res.message || "Failed to save sourcing quote.");
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Error connecting to database.");
      });
    }
    
    // Guard flag: prevents re-entrant calls to handleDeliveryDateChange while a request is in flight
    var _dateUpdating = false;

    function handleDeliveryDateChange(orderId, newDate) {
      // Hard-block re-entry: if a date update is already in progress, discard this call entirely
      if (_dateUpdating) return;
      _dateUpdating = true;

      const datePickerEl = document.getElementById("m-order-date-picker");
      if (datePickerEl) {
        datePickerEl.disabled = true;
        datePickerEl.style.opacity = "0.5";
        datePickerEl.style.pointerEvents = "none";
      }
      
      // Inject a dynamic blurring loading overlay inside the modal-container to fully block interaction
      const modalContainer = document.querySelector("#modal-order-backdrop .modal-container");
      if (modalContainer) {
        // Ensure container is relative so overlay matches its bounds
        modalContainer.style.position = "relative";
        
        const overlay = document.createElement("div");
        overlay.id = "m-order-loading-overlay";
        overlay.style = "position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.75); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10000; border-radius: 12px; backdrop-filter: blur(3px); pointer-events: auto;";
        overlay.innerHTML = `
          <div style="border: 4px solid rgba(255,255,255,0.1); border-top: 4px solid var(--primary); border-radius: 50%; width: 40px; height: 40px; animation: m-spin 1s linear infinite; margin-bottom: 16px;"></div>
          <div style="color: var(--text-primary); font-weight: 500; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">Updating Delivery Date & Inventory...</div>
          <style>
            @keyframes m-spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }
          </style>
        `;
        modalContainer.appendChild(overlay);
      }
      
      showGlobalLoading(true, "Updating delivery date and recalculating inventory...");
      
      postPayload({
        action: "updateDeliveryDate",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: orderId,
        deliveryDate: newDate,
        items: state.currentOrderItems
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          // Update in-memory state
          const order = state.orders.find(o => o["Order ID"] === orderId);
          if (order) {
            order["Delivery Date"] = newDate;
            order["Items Summary"] = res.itemsSummary;
            order["Standard Total ($)"] = res.standardTotal;
            order["Discount Amount ($)"] = res.discountAmount;
            order["Grand Total ($)"] = res.grandTotal;
            order["Raw JSON Payload"] = res.rawPayload;
            state.currentOrder = order;
          }
          
          showToast("success", "Delivery date updated. Inventory re-checked.");
          
          // Release the guard BEFORE calling openOrderDetails so the re-render
          // can proceed cleanly. The onchange=null guard inside openOrderDetails
          // ensures the programmatic .value assignment does not fire a new change event.
          _dateUpdating = false;
          openOrderDetails(orderId);
        } else {
          showToast("error", res.message || "Failed to update delivery date.");
          
          // Remove loading overlay and restore element state on failure
          const overlay = document.getElementById("m-order-loading-overlay");
          if (overlay) overlay.remove();
          if (datePickerEl) {
            datePickerEl.disabled = false;
            datePickerEl.style.opacity = "1";
            datePickerEl.style.pointerEvents = "auto";
          }
          _dateUpdating = false;
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Error connecting to database.");
        
        // Remove loading overlay and restore element state on error
        const overlay = document.getElementById("m-order-loading-overlay");
        if (overlay) overlay.remove();
        if (datePickerEl) {
          datePickerEl.disabled = false;
          datePickerEl.style.opacity = "1";
          datePickerEl.style.pointerEvents = "auto";
        }
        _dateUpdating = false;
      });
    }


    function openOverridePopup() {
      const order = state.currentOrder;
      if (!order) return;
      
      document.getElementById("m-override-subtotal").value = (parseFloat(order["Standard Total ($)"]) || 0).toFixed(2);
      document.getElementById("m-override-discount").value = (parseFloat(order["Discount Amount ($)"]) || 0).toFixed(2);
      document.getElementById("m-override-grand").value = (parseFloat(order["Grand Total ($)"]) || 0).toFixed(2);
      
      toggleModal("override", true);
    }
    
    function recalcOverrideTotal() {
      const sub = parseFloat(document.getElementById("m-override-subtotal").value) || 0;
      const disc = parseFloat(document.getElementById("m-override-discount").value) || 0;
      document.getElementById("m-override-grand").value = (sub - disc).toFixed(2);
    }
    
    function submitPricingOverride(e) {
      e.preventDefault();
      const sub = parseFloat(document.getElementById("m-override-subtotal").value) || 0;
      const disc = parseFloat(document.getElementById("m-override-discount").value) || 0;
      const grand = parseFloat(document.getElementById("m-override-grand").value) || 0;
      
      toggleModal("override", false);
      showGlobalLoading(true, "Saving pricing overrides...");
      
      postPayload({
        action: "savePricingOverrides",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: state.currentOrder["Order ID"],
        standardTotal: sub,
        discountAmount: disc,
        grandTotal: grand
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", "Invoice totals updated.");
          
          const order = state.orders.find(o => o["Order ID"] === state.currentOrder["Order ID"]);
          if (order) {
            order["Standard Total ($)"] = sub;
            order["Discount Amount ($)"] = disc;
            order["Grand Total ($)"] = grand;
            state.currentOrder = order;
          }
          
          openOrderDetails(state.currentOrder["Order ID"]);
        } else {
          showToast("error", res.message || "Failed to override pricing totals.");
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Error connecting to database.");
      });
    }
    
    function confirmOrderSourced(orderId) {
      if (!confirm(`Are you sure you want to mark Order ${orderId} as fully SOURCED from farms?`)) return;
      toggleModal("order", false);
      showGlobalLoading(true, "Marking order as Sourced...");
      
      postPayload({
        action: "confirmSourced",
        userId: state.user.userId,
        passcode: state.passcode,
        orderId: orderId
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", `Order ${orderId} is now Sourced!`);
          if (state.isDemoMode) {
            const order = state.orders.find(o => o["Order ID"] === orderId);
            if (order) {
              order["Order Status"] = "Sourced";
              order["Last Updated"] = new Date().toISOString();
              state.interactions.push({
                "Interaction ID": "INT-LOCAL-" + Math.floor(Math.random()*1000),
                "Client ID": order["Client ID"],
                "Timestamp": new Date().toISOString(),
                "Type": "Internal Note",
                "Notes": "Sourcing agent confirmed order " + orderId + " is fully sourced from suppliers.",
                "Salesperson ID": state.user.userId,
                "Follow-up Date": ""
              });
            }
            renderOrdersView();
          } else {
            fetchLiveDatabase();
          }
        } else {
          showToast("error", res.message || "Failed to confirm sourced status.");
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Error contacting database.");
      });
    }

    function renderLogisticsView() {
      const container = document.getElementById("logistics-cards-container");
      container.innerHTML = "";
      
      const searchVal = document.getElementById("logistics-search").value.toLowerCase();
      const originFilter = document.getElementById("logistics-filter-origin").value;
      
      // We look at orders that are Sourced, In Transit, or Delivered (or already have logistics records)
      const trackedOrders = (state.orders || []).filter(o => {
        const client = (state.clients || []).find(c => c["Client ID"] === o["Client ID"]);
        if (!client || !isClientAccessAllowed(client)) return false; // Filter unauthorized clients' shipments
        
        const hasLog = (state.logistics || []).some(l => l["Order ID"] === o["Order ID"]);
        const matchesStatus = ["Firm Order", "Sourced", "In Transit", "Delivered"].includes(o["Order Status"]);
        return hasLog || matchesStatus;
      });
      
      const filtered = trackedOrders.filter(o => {
        const log = (state.logistics || []).find(l => l["Order ID"] === o["Order ID"]);
        const awb = log ? (log["Airway Bill (AWB)"] || "") : "";
        const origin = log ? (log["Origin Airport"] || "") : "";
        
        const matchesSearch = 
          o["Order ID"].toLowerCase().includes(searchVal) ||
          awb.toLowerCase().includes(searchVal);
          
        const matchesOrigin = originFilter === "" || origin === originFilter;
        
        return matchesSearch && matchesOrigin;
      });
      
      if (filtered.length === 0) {
        container.innerHTML = `<div style="text-align: center; color: var(--text-secondary); padding: 40px 0;">No active shipments tracked.</div>`;
        return;
      }
      
      const checkpoints = ["Origin Warehouse", "In Flight", "MIA Customs", "MIA Warehouse", "Delivered"];
      
      filtered.forEach(o => {
        const log = state.logistics.find(l => l["Order ID"] === o["Order ID"]);
        const client = state.clients.find(c => c["Client ID"] === o["Client ID"]);
        const clientName = client ? client["Company Name"] : o["Client ID"];
        const isCif = o["Incoterms"] && o["Incoterms"].includes("CIF");
        
        const currentCheckpoint = log ? log["Current Checkpoint"] : (isCif ? "MIA Warehouse" : "Origin Warehouse");
        
        let stepperHtml = "";
        if (isCif) {
          const cifCheckpoints = ["MIA Warehouse", "Delivered"];
          const activeIndex = cifCheckpoints.indexOf(currentCheckpoint);
          const progressPercent = activeIndex >= 0 ? (activeIndex / (cifCheckpoints.length - 1)) * 100 : 0;
          
          stepperHtml = `
            <div class="stepper-progress-bar" style="width: ${progressPercent}%;"></div>
            
            <div class="stepper-node ${activeIndex >= 0 ? (activeIndex === 0 ? 'active' : 'completed') : ''}">
              <div class="stepper-circle">
                <svg viewBox="0 0 24 24"><path d="M12,3L2,12H5V20H19V12H22L12,3M12,7.7C13.4,7.7 14.5,8.8 14.5,10.2C14.5,12 12,14.9 12,14.9C12,14.9 9.5,12 9.5,10.2C9.5,8.8 10.6,7.7 12,7.7Z"/></svg>
              </div>
              <div class="stepper-label">MIA Whse</div>
            </div>

            <div class="stepper-node ${activeIndex >= 1 ? (activeIndex === 1 ? 'active' : 'completed') : ''}">
              <div class="stepper-circle">
                <svg viewBox="0 0 24 24"><path d="M9,20.42L4.83,16.25L3.41,17.67L9,23.25L21,11.25L19.58,9.83L9,20.42Z"/></svg>
              </div>
              <div class="stepper-label">Delivered</div>
            </div>
          `;
        } else {
          const activeIndex = checkpoints.indexOf(currentCheckpoint);
          const progressPercent = (activeIndex / (checkpoints.length - 1)) * 100;
          
          stepperHtml = `
            <div class="stepper-progress-bar" style="width: ${progressPercent}%;"></div>
            
            <div class="stepper-node ${activeIndex >= 0 ? (activeIndex === 0 ? 'active' : 'completed') : ''}">
              <div class="stepper-circle">
                <svg viewBox="0 0 24 24"><path d="M19 19H5V5H19V19M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M17 11H7V9H17V11M17 15H7V13H17V15Z"/></svg>
              </div>
              <div class="stepper-label">Origin Whse</div>
            </div>

            <div class="stepper-node ${activeIndex >= 1 ? (activeIndex === 1 ? 'active' : 'completed') : ''}">
              <div class="stepper-circle">
                <svg viewBox="0 0 24 24"><path d="M21,16V14L13,9V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V9L2,14V16L10,13.5V19L8,20.5V22L11.5,21L15,22V20.5L13,19V13.5L21,16Z"/></svg>
              </div>
              <div class="stepper-label">In Flight</div>
            </div>

            <div class="stepper-node ${activeIndex >= 2 ? (activeIndex === 2 ? 'active' : 'completed') : ''}">
              <div class="stepper-circle">
                <svg viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V15H11V17M11,13H13V7H11V13Z"/></svg>
              </div>
              <div class="stepper-label">Customs</div>
            </div>

            <div class="stepper-node ${activeIndex >= 3 ? (activeIndex === 3 ? 'active' : 'completed') : ''}">
              <div class="stepper-circle">
                <svg viewBox="0 0 24 24"><path d="M12,3L2,12H5V20H19V12H22L12,3M12,7.7C13.4,7.7 14.5,8.8 14.5,10.2C14.5,12 12,14.9 12,14.9C12,14.9 9.5,12 9.5,10.2C9.5,8.8 10.6,7.7 12,7.7Z"/></svg>
              </div>
              <div class="stepper-label">MIA Whse</div>
            </div>

            <div class="stepper-node ${activeIndex >= 4 ? (checkpointIndex === 4 ? 'active' : 'completed') : ''}">
              <div class="stepper-circle">
                <svg viewBox="0 0 24 24"><path d="M9,20.42L4.83,16.25L3.41,17.67L9,23.25L21,11.25L19.58,9.83L9,20.42Z"/></svg>
              </div>
              <div class="stepper-label">Delivered</div>
            </div>
          `;
        }
        
        const card = document.createElement("div");
        card.className = "logistics-card";
        
        card.innerHTML = `
          <div class="logistics-card-header">
            <div>
              <span class="badge badge-secondary" style="margin-bottom:6px;">Order #${getOrderDisplayId(o)}</span>
              <div class="logistics-card-title">${clientName} — ${isCif ? "FOB Miami Cargo" : "Sourced B2B Freight"}</div>
            </div>
            <button class="btn-secondary" onclick="triggerLogisticsUpdate('${o["Order ID"]}')">Update Checkpoint</button>
          </div>
          
          <!-- Horizontal Stepper -->
          <div class="stepper-container">
            <div class="logistics-stepper">
              ${stepperHtml}
            </div>
          </div>
          
          <!-- Info Details -->
          <div class="logistics-card-details">
            <div class="logistics-detail-item">
              <span>Airway Bill (AWB)</span>
              <span>${log ? (log["Airway Bill (AWB)"] || "Pending Assignment") : "Pending Assignment"}</span>
            </div>
            <div class="logistics-detail-item">
              <span>Carrier Airline</span>
              <span>${log ? (log["Carrier"] || "Pending Assignment") : "Pending Assignment"}</span>
            </div>
            <div class="logistics-detail-item">
              <span>${isCif ? "Import Terminal" : "Origin Warehouse"}</span>
              <span>${isCif ? "Miami Warehouse Pick-up" : (log ? (log["Origin Airport"] + " Terminal") : "Quito (Default)")}</span>
            </div>
            <div class="logistics-detail-item">
              <span>Transit Notes</span>
              <span style="font-style:italic; color:var(--text-secondary);">${log ? (log["Destination Notes"] || (isCif ? "Supplier transport in progress." : "Cargo awaiting dispatch at origin.")) : (isCif ? "Supplier transport in progress." : "Cargo awaiting dispatch at origin.")}</span>
            </div>
          </div>
        `;
        container.appendChild(card);
      });
    }

    // --- 12. PAYMENTS LEDGER CONTROLLER ---
    function renderPaymentsTable() {
      const tbody = document.getElementById("payments-table-body");
      tbody.innerHTML = "";
      
      const searchVal = document.getElementById("payments-search").value.toLowerCase();
      
      const filtered = (state.payments || []).filter(p => {
        const client = (state.clients || []).find(c => c["Client ID"] === p["Client ID"]);
        if (!client || !isClientAccessAllowed(client)) return false; // Filter unauthorized clients' payments
        
        const clientName = client["Company Name"] || "";
        
        return p["Payment ID"].toLowerCase().includes(searchVal) ||
               p["Order ID"].toLowerCase().includes(searchVal) ||
               clientName.toLowerCase().includes(searchVal) ||
               p["Client ID"].toLowerCase().includes(searchVal);
      });
      
      if (filtered.length === 0) {
        tbody.innerHTML = `<tr><td colspan="12" style="text-align: center; color: var(--text-secondary); padding: 40px 0;">No registered payments logged.</td></tr>`;
        return;
      }
      
      filtered.forEach(p => {
        const client = (state.clients || []).find(c => c["Client ID"] === p["Client ID"]);
        const clientName = client ? client["Company Name"] : p["Client ID"];
        
        const amtConf = parseFloat(p["Amount Confirmed ($)"] !== undefined ? p["Amount Confirmed ($)"] : p["Amount ($)"]) || 0;
        const amtVer = parseFloat(p["Amount Verified ($)"] !== undefined ? p["Amount Verified ($)"] : p["Amount ($)"]) || 0;
        const feesVal = parseFloat(p["Processing Fees ($)"]) || 0;
        const notes = p["Internal Notes"] || "";
        const confBy = p["Confirmed By"] || "-";
        
        const type = (p["Type"] || "").toString().trim();
        const isVerified = type === "Verified";
        
        const dateRaw = isVerified ? (p["Verification Date"] || p["Confirmation Date"] || p["Payment Date"]) : (p["Confirmation Date"] || p["Payment Date"]);
        const dateStr = dateRaw ? new Date(dateRaw).toLocaleString() : "-";
        
        const ref = isVerified ? (p["Verification Ref"] || p["Confirmation Ref"] || p["Transaction Ref"]) : (p["Confirmation Ref"] || p["Transaction Ref"]);
        
        const badgeClass = isVerified ? "badge-success" : "badge-secondary";
        const badgeText = isVerified ? (p["Verified By"] || "VERIFIED") : "PENDING";
        
        const tr = document.createElement("tr");
        tr.innerHTML = `
          <td><strong>${p["Payment ID"]}</strong> <span class="badge ${isVerified ? 'badge-success' : 'badge-primary'}" style="font-size:9px; padding:2px 6px; margin-left:4px;">${type.toUpperCase()}</span></td>
          <td><span style="color:var(--text-secondary);">${p["Order ID"]}</span></td>
          <td style="font-weight:600;">${clientName}</td>
          <td style="font-family:var(--font-display); font-weight:600; color:var(--text-primary);">${formatCurrency(amtConf)}</td>
          <td style="font-family:var(--font-display); font-weight:700; color:var(--primary);">${isVerified ? '' + formatCurrency(amtVer) : '-'}</td>
          <td style="font-family:var(--font-display); font-weight:600; color:var(--accent-crimson);">${isVerified && feesVal > 0 ? '' + formatCurrency(feesVal) : '-'}</td>
          <td>${p["Payment Method"]}</td>
          <td><span style="font-family:monospace; font-size:12px;">${ref || 'None'}</span></td>
          <td>${dateStr}</td>
          <td><span style="font-size:11px; color:var(--text-muted);">${confBy}</span></td>
          <td><span class="badge ${badgeClass}">${badgeText}</span></td>
          <td style="max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:italic; font-size:11px; color:var(--text-muted);" title="${notes}">${notes || '-'}</td>
        `;
        tbody.appendChild(tr);
      });
    }

    // --- 13. SETTINGS & USER MANAGEMENT (ADMIN ONLY) ---
    function renderSettings() {
      const tbody = document.getElementById("users-table-body");
      tbody.innerHTML = "";
      
      const btnAdd = document.getElementById("btn-add-user-restrict");
      const contentDiv = document.getElementById("settings-content");
      const deniedDiv = document.getElementById("settings-denied");
      
      if (state.user.role !== "Admin") {
        if (contentDiv) contentDiv.style.display = "none";
        if (deniedDiv) deniedDiv.style.display = "flex";
        
        tbody.innerHTML = `<tr><td colspan="7" style="text-align: center; color: var(--accent-crimson); padding: 20px 0;">Access Denied. Administrator clearance required.</td></tr>`;
        btnAdd.disabled = true;
        btnAdd.style.opacity = 0.5;
        return;
      }
      
      if (contentDiv) contentDiv.style.display = "grid";
      if (deniedDiv) deniedDiv.style.display = "none";
      
      btnAdd.disabled = false;
      btnAdd.style.opacity = 1;
      
      state.users.forEach(u => {
        const tr = document.createElement("tr");
        const isActive = u["Active"] === "TRUE" || u["Active"] === true;
        
        tr.innerHTML = `
          <td><strong>${u["User ID"]}</strong></td>
          <td style="font-weight:600;">${u["Name"]}</td>
          <td>${u["Email"]}</td>
          <td><span class="badge ${u["Role"] === 'Admin' ? 'badge-indigo' : 'badge-secondary'}">${u["Role"]}</span></td>
          <td><span style="font-family:monospace;">${u["Passcode"]}</span></td>
          <td><span class="badge ${isActive ? 'badge-primary' : 'badge-crimson'}">${isActive ? 'Active' : 'Deactivated'}</span></td>
          <td>
            <div class="table-actions">
              <button class="kanban-action-btn" style="padding:4px 8px;" onclick="openEditUserModal('${u["User ID"]}')">Modify</button>
            </div>
          </td>
        `;
        tbody.appendChild(tr);
      });
    }

    function openNewUserModal() {
      document.getElementById("m-user-title").textContent = "Add User Account";
      document.getElementById("m-user-id").value = "";
      document.getElementById("m-user-name").value = "";
      document.getElementById("m-user-email").value = "";
      document.getElementById("m-user-passcode").value = "";
      document.getElementById("m-user-role").value = "Agent";
      document.getElementById("m-user-active").checked = true;
      document.getElementById("m-user-phone").value = "+1 (832) 510-1997";
      document.getElementById("m-user-whatsapp").value = "593988636402";
      toggleModal("user", true);
    }

    function openEditUserModal(userId) {
      const u = state.users.find(usr => usr["User ID"] === userId);
      if (!u) return;
      
      document.getElementById("m-user-title").textContent = `Modify User ${userId}`;
      document.getElementById("m-user-id").value = u["User ID"];
      document.getElementById("m-user-name").value = u["Name"];
      document.getElementById("m-user-email").value = u["Email"];
      document.getElementById("m-user-passcode").value = u["Passcode"];
      document.getElementById("m-user-role").value = u["Role"];
      document.getElementById("m-user-active").checked = (u["Active"] === "TRUE" || u["Active"] === true);
      document.getElementById("m-user-phone").value = u["Phone"] || "";
      document.getElementById("m-user-whatsapp").value = u["WhatsApp"] || "";
      toggleModal("user", true);
    }

    function submitUserForm(e) {
      e.preventDefault();
      
      const userId = document.getElementById("m-user-id").value;
      const targetUser = {
        userId: userId || "USR-" + document.getElementById("m-user-name").value.substring(0, 5).toUpperCase().replace(/\s+/g, ""),
        name: document.getElementById("m-user-name").value,
        email: document.getElementById("m-user-email").value,
        passcode: document.getElementById("m-user-passcode").value,
        role: document.getElementById("m-user-role").value,
        active: document.getElementById("m-user-active").checked,
        phone: document.getElementById("m-user-phone").value,
        whatsapp: document.getElementById("m-user-whatsapp").value
      };
      
      toggleModal("user", false);
      showGlobalLoading(true, "Saving credentials...");
      
      postPayload({
        action: "updateUser",
        userId: state.user.userId,
        passcode: state.passcode,
        targetUser: targetUser
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", "User profile updated successfully.");
          if (state.isDemoMode) {
            let u = state.users.find(usr => usr["User ID"] === targetUser.userId);
            if (!u) {
              u = { "User ID": targetUser.userId };
              state.users.push(u);
            }
            Object.assign(u, {
              "Name": targetUser.name,
              "Email": targetUser.email,
              "Passcode": targetUser.passcode,
              "Role": targetUser.role,
              "Active": targetUser.active ? "TRUE" : "FALSE",
              "Phone": targetUser.phone,
              "WhatsApp": targetUser.whatsapp
            });
            renderSettings();
          } else {
            fetchLiveDatabase();
          }
        } else {
          showToast("error", res.message || "Failed to edit user.");
        }
      }).catch(() => {
        showGlobalLoading(false);
        showToast("error", "Error saving credentials.");
      });
    }

    // In-app Google Sheet background triggers execution helper
    function triggerGasAction(type) {
      if (state.isDemoMode) {
        showToast("warning", "Demo Mode: Background sheet actions are disabled.");
        return;
      }
      
      showGlobalLoading(true, "Triggering Spreadsheet macro...");
      
      // We will perform a GET/POST request with custom parameters
      let targetActionUrl = state.apiUrl;
      let params = {};
      
      if (type === 'syncSupplier') {
        params = { action: 'parseSupplierEmails' };
      } else if (type === 'syncClient') {
        params = { action: 'parseClientEmails' };
      } else if (type === 'setupCron') {
        params = { action: 'createTimeDrivenTriggers' };
      }
      
      fetch(targetActionUrl, {
        method: "POST",
        body: JSON.stringify(Object.assign(params, { passcode: state.passcode, userId: state.user.userId }))
      }).then(r => r.json())
        .then(res => {
          showGlobalLoading(false);
          showToast("success", "Spreadsheet operation triggered successfully.");
          fetchLiveDatabase(); // Reload view
        })
        .catch(() => {
          showGlobalLoading(false);
          showToast("success", "Spreadsheet process triggered. Check sheet logs.");
        });
    }
      // ==========================================
      // QUOTE BUILDER LOGIC
      // ==========================================
      const qbColorMap = {
        "RED": "#ef4444", "WHITE": "#f8fafc", "PINK": "#f472b6", "HOT PINK": "#db2777",
        "LIGHT PINK": "#fbcfe8", "PEACH": "#fb923c", "YELLOW": "#facc15", "ORANGE": "#f97316",
        "LAVENDER": "#a78bfa", "NOVELTY": "#c084fc", "BICOLOR": "#fbbf24", "GREEN": "#4ade80",
        "TINTED": "#38bdf8"
      };
      
      function getQbColorHex(category) {
        const key = (category || "").toUpperCase().trim();
        return qbColorMap[key] || "#94a3b8";
      }

      let qbSelectedItems = {};

      window.qbEditOrderId = null;
      window.openQuoteBuilder = function(clientId = null, editOrderId = null) {
        qbSelectedItems = {};
        window.qbEditOrderId = editOrderId;
        document.getElementById("quote-builder-form").reset();
        document.getElementById("qb-date").value = new Date().toISOString().split('T')[0];
        document.getElementById("qb-search").value = "";
        
        if (editOrderId && state.orders) {
          const order = state.orders.find(o => o["Order ID"] === editOrderId);
          if (order && order["Raw JSON Payload"]) {
            try {
              const pld = JSON.parse(order["Raw JSON Payload"]);
              document.getElementById("qb-company").value = pld.client.companyName || "";
              document.getElementById("qb-contact").value = pld.client.contactName || "";
              document.getElementById("qb-email").value = pld.client.email || "";
              document.getElementById("qb-phone").value = pld.client.phone || "";
              document.getElementById("qb-incoterm").value = pld.client.incoterms || "FOB";
              if (pld.client.deliveryDate) document.getElementById("qb-date").value = pld.client.deliveryDate;
              
              if (pld.items && Array.isArray(pld.items)) {
                const incoterm = pld.client.incoterms || "FOB";
                const dDate = pld.client.deliveryDate || "";
                
                pld.items.forEach(it => {
                  const key = it.variety + "_" + it.stem;
                  let livePrice = it.price !== undefined ? parseFloat(it.price) : undefined;
                  let liveSupplier = it.supplier || "";
                  
                  // LIVE INVENTORY REFRESH
                  // Cross-reference current state.inventory to find live Supplier Price for this specific Delivery Date
                  if (state.inventory && dDate) {
                    const normInco = incoterm.toUpperCase().includes("FOB") ? "FOB" : "CIF MIA";
                    const liveMatches = state.inventory.filter(inv => {
                      const invVar = String(inv["Variety"] || "").toUpperCase().trim();
                      const invStem = parseInt(inv["Stem Length (cm)"]) || parseInt(inv["Stem Length"]) || 0;
                      const invInco = String(inv["Incoterm"] || "").toUpperCase().trim();
                      const invDate = formatToIsoDate(inv["Date"]);
                      
                      return invVar === String(it.variety).toUpperCase().trim() &&
                             invStem === parseInt(it.stem) &&
                             (invInco === normInco || invInco === "ALL") &&
                             (invDate === dDate || invDate === "ALL");
                    });
                    
                    if (liveMatches.length > 0) {
                      const liveBaseCost = parseFloat(liveMatches[0]["Supplier Price ($/stem)"]) || parseFloat(liveMatches[0]["Supplier Price"]) || 0;
                      if (liveBaseCost > 0) {
                        livePrice = parseFloat((liveBaseCost / 0.67).toFixed(3)); // Automatically override with new valid client margin price
                      }
                      liveSupplier = liveMatches[0]["Supplier"] || liveSupplier;
                    }
                  }
                  
                  qbSelectedItems[key] = {
                    variety: it.variety,
                    type: it.type || "ROSE",
                    stem: parseInt(it.stem) || 0,
                    qty: parseInt(it.qty) || 0,
                    price: livePrice,
                    supplier: liveSupplier
                  };
                });
              }
            } catch(e) { console.error("Error parsing order payload for edit", e); }
          }
        } else if (clientId && state.clients) {
          const client = state.clients.find(c => c["Client ID"] === clientId);
          if (client) {
            document.getElementById("qb-company").value = client["Company Name"] || "";
            document.getElementById("qb-contact").value = client["Contact Name"] || "";
            document.getElementById("qb-email").value = client["Email"] || "";
            document.getElementById("qb-phone").value = client["Phone"] || "";
          }
        }
        
        renderQuoteBuilderInventory();
        toggleModal("quotebuilder", true);
      };

      window.closeQuoteBuilder = function() {
        toggleModal("quotebuilder", false);
      };

      window.renderQuoteBuilderInventory = function() {
        const tbody = document.getElementById("qb-inventory-table-body");
        const searchTerm = document.getElementById("qb-search").value.toLowerCase();
        const incoterm = document.getElementById("qb-incoterm").value;
        
        tbody.innerHTML = "";
        
        const selectedDate = document.getElementById("qb-date").value;
        
        let filtered = (state.inventory || []).filter(inv => {
          const invDate = formatToIsoDate(inv["Date"]);
          if (selectedDate && invDate !== selectedDate) return false;
          
          const invInco = (inv["Incoterm"] || "").toUpperCase();
          const targetInco = incoterm.toUpperCase();
          if (invInco !== targetInco && !(invInco.includes("CIF MIA") && targetInco.includes("CIF MIA"))) return false;
          
          const currentStock = parseInt(inv["Stock (Boxes)"]) || parseInt(inv["Stock"]) || 0;
          if (currentStock <= 0) return false;
          
          if (searchTerm) {
            const variety = (inv["Variety"] || "").toLowerCase();
            const color = (inv["Color Category"] || inv["Type"] || "").toLowerCase();
            if (!variety.includes(searchTerm) && !color.includes(searchTerm)) return false;
          }
          return true;
        });
        
        if (filtered.length === 0) {
          tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding: 20px; color: var(--text-muted);">No inventory matches your search.</td></tr>`;
          return;
        }
        
        filtered.forEach(inv => {
          const stemLength = inv["Stem Length (cm)"] || "-";
          const uniqueId = inv["Variety"] + "_" + stemLength + "_" + (inv["Supplier"] || "ALL").replace(/[\s\W]+/g, "");
          const baseCost = parseFloat(inv["Supplier Price ($/stem)"]) || parseFloat(inv["Supplier Price"]) || 0;
          const finalPrice = baseCost > 0 ? (baseCost / 0.67).toFixed(2) : "0.00";
          const currentStock = parseInt(inv["Stock (Boxes)"]) || parseInt(inv["Stock"]) || 0;
          const colorCat = inv["Color Category"] || inv["Type"] || "-";
          const supplierName = inv["Supplier"] || "-";
          
          const tr = document.createElement("tr");
          tr.style.borderBottom = "1px solid var(--border-card)";
          
          tr.innerHTML = `
            <td style="padding: 8px 10px; color: #fff;">${inv["Variety"] || "-"}</td>
            <td style="padding: 8px 10px; color: var(--text-muted);">${supplierName}</td>
            <td style="padding: 8px 10px;">
              <span style="display:inline-block; width:10px; height:10px; border-radius:50%; background:${getQbColorHex(colorCat)}; margin-right:6px;"></span>
              ${colorCat}
            </td>
            <td style="padding: 8px 10px; text-align: center;">${stemLength}</td>
            <td style="padding: 8px 10px; text-align: center; color: var(--accent-emerald); font-weight: 500;">${currentStock}</td>
            <td style="padding: 8px 10px; text-align: right; color: #fff;">$${finalPrice}</td>
            <td style="padding: 8px 10px; text-align: center;">
              <input type="number" min="0" max="${currentStock}" value="${qbSelectedItems[uniqueId]?.qty || ""}" 
                     style="width: 60px; padding: 4px 8px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-card-active); color: #fff; border-radius: 4px; text-align: center;"
                     onchange="updateQbQuantity('${uniqueId}', '${(inv["Variety"]||"").replace(/'/g, "\\'")}', '${(inv["Type"] || "Rose").replace(/'/g, "\\'")}', '${colorCat.replace(/'/g, "\\'")}', '${stemLength}', '${finalPrice}', '${(inv["Supplier"]||"ALL").replace(/'/g, "\\'")}', this.value)">
            </td>
          `;
          tbody.appendChild(tr);
        });
        
        updateQbTotals();
      };

      window.updateQbQuantity = function(id, variety, type, color, stem, price, supplier, qty) {
        const quantity = parseInt(qty);
        if (!quantity || quantity <= 0) {
          delete qbSelectedItems[id];
        } else {
          qbSelectedItems[id] = { variety, type, color, stem, price, supplier, qty: quantity };
        }
        updateQbTotals();
      };

      window.updateQbTotals = function() {
        let totalBoxes = 0;
        Object.values(qbSelectedItems).forEach(item => totalBoxes += item.qty);
        document.getElementById("qb-totals").textContent = `Total Selected: ${totalBoxes} boxes`;
      };

      window.submitQuoteBuilder = async function(e) {
        e.preventDefault();
        
        const itemsArray = Object.values(qbSelectedItems).map(item => ({
          variety: item.variety,
          type: item.type,
          stem: item.stem,
          qty: item.qty,
          stems: item.qty * 100,
          price: item.price,
          supplier: item.supplier
        }));
        if (itemsArray.length === 0) {
          showToast("error", "Please select at least one item from the inventory.");
          return;
        }
        
        const totalBoxes = itemsArray.reduce((sum, item) => sum + item.qty, 0);
        if (totalBoxes < 5) {
          showToast("error", "Minimum order is 5 boxes.");
          return;
        }
        
        const payload = {
          client: {
            companyName: document.getElementById("qb-company").value,
            contactName: document.getElementById("qb-contact").value,
            email: document.getElementById("qb-email").value,
            phone: document.getElementById("qb-phone").value,
            incoterms: document.getElementById("qb-incoterm").value,
            deliveryDate: document.getElementById("qb-date").value,
            buyerType: "Florist",
            resaleFile: "",
            resaleFileName: "",
            address: "",
            notes: "Automated Quote via CRM",
            substitutionAgreement: false,
            resaleCertificateNum: ""
          },
          summary: {
            totalBoxes: totalBoxes
          },
          items: itemsArray,
          user: {
            name: state.user["Name"],
            email: state.user["Email"],
            phone: state.user["Phone"],
            whatsapp: state.user["WhatsApp"],
            role: state.user["Role"]
          }
        };
        
        const btn = document.getElementById("btn-submit-qb");
        btn.disabled = true;
        btn.innerHTML = `<div class="loading-spinner" style="display:inline-block; width: 14px; height: 14px; margin-right:8px; border:2px solid #fff; border-top-color:transparent; border-radius:50%; animation: spin 1s linear infinite;"></div> Processing...`;
        
        try {
          if (window.qbEditOrderId) {
            payload.action = "updateCatalogCheckout";
            payload.orderId = window.qbEditOrderId;
            payload.auth = { username: state.user.userId, passcode: state.passcode };
            
            const res = await fetch(state.apiUrl, {
              method: 'POST',
              headers: { 'Content-Type': 'text/plain' },
              body: JSON.stringify(payload)
            });
            const data = await res.json();
            if (data.success) {
              closeQuoteBuilder();
              showToast("success", "Quote Order updated successfully!");
              fetchLiveDatabase();
            } else {
              showToast("error", "Error updating order: " + data.message);
            }
          } else {
            await fetch(state.apiUrl, {
              method: 'POST',
              mode: 'no-cors',
              cache: 'no-cache',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(payload)
            });
            closeQuoteBuilder();
            showToast("success", "Automated Quote generated and sent successfully!");
            fetchLiveDatabase(); // Refresh data
          }
        } catch (err) {
          console.error(err);
          showToast("error", "Failed to process Quote Request.");
        } finally {
          btn.disabled = false;
          btn.textContent = "Generate & Send Automated Quote";
        }
      };

      // --- LINE ITEM EDITOR LOGIC ---
      window.openLineItemEditor = function(orderId) {
        const order = state.orders.find(o => o["Order ID"] === orderId);
        if (!order) return;
        
        document.getElementById("m-line-item-order-id").value = orderId;
        
        const status = order["Order Status"] || "Draft Quote";
        document.getElementById("m-line-item-title").textContent = status + " Editor";
        
        const tbody = document.getElementById("line-item-edit-tbody");
        tbody.innerHTML = "";
        
        let items = state.currentOrderItems || [];
        if (items.length === 0) {
           try {
             const payload = JSON.parse(order["Raw JSON Payload"] || "{}");
             if (payload.items) items = payload.items;
           } catch(e){}
        }

        items.forEach((item) => {
           const stemCm = item.stem || "";
           const displayVariety = item.variety;
           
           const tr = document.createElement("tr");
           const safeItemAttr = JSON.stringify(item).replace(/'/g, "&apos;").replace(/"/g, "&quot;");
           tr.setAttribute("data-original-item", safeItemAttr);
           tr.innerHTML = `
             <td><input type="text" class="form-control e-variety" value="${displayVariety}"></td>
             <td><input type="number" class="form-control e-stem" value="${stemCm}" style="text-align:center;"></td>
             <td><input type="text" class="form-control e-supplier" value="${item.supplier || item.suggestedSupplier || ''}"></td>
             <td><input type="number" class="form-control e-qty" value="${item.qty || 0}" style="text-align:center;" onchange="updateLineItemTotals(this)"></td>
             <td><input type="number" class="form-control e-stems" value="${item.stems || 0}" style="text-align:center;" onchange="updateLineItemTotals(this)"></td>
             <td><input type="number" step="0.01" class="form-control e-price" value="${item.price || item.suggestedPrice || (item.finalPrice ? item.finalPrice / Math.max(1, item.stems || 1) : 0) || 0}" style="text-align:right;" onchange="updateLineItemTotals(this)"></td>
             <td class="e-subtotal" style="text-align:right; font-weight:bold; vertical-align:middle;">$0.00</td>
             <td style="text-align:center; vertical-align:middle;">
               <button class="btn-icon-sourcing" onclick="this.closest('tr').remove(); updateLineItemTotals(null);" style="color:#ef4444;" title="Remove Item"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/></svg></button>
             </td>
           `;
           tbody.appendChild(tr);
           updateLineItemTotals(tr.querySelector('.e-qty'));
        });
        
        toggleModal("lineItemEditor", true);
      };

      window.addLineItemRow = function() {
        const tbody = document.getElementById("line-item-edit-tbody");
        const tr = document.createElement("tr");
        tr.innerHTML = `
           <td><input type="text" class="form-control e-variety" placeholder="e.g. CARROUSEL"></td>
           <td><input type="number" class="form-control e-stem" placeholder="80" style="text-align:center;"></td>
           <td><input type="text" class="form-control e-supplier" placeholder="Supplier"></td>
           <td><input type="number" class="form-control e-qty" value="1" style="text-align:center;" onchange="updateLineItemTotals(this)"></td>
           <td><input type="number" class="form-control e-stems" value="100" style="text-align:center;" onchange="updateLineItemTotals(this)"></td>
           <td><input type="number" step="0.01" class="form-control e-price" value="0.00" style="text-align:right;" onchange="updateLineItemTotals(this)"></td>
           <td class="e-subtotal" style="text-align:right; font-weight:bold; vertical-align:middle;">$0.00</td>
           <td style="text-align:center; vertical-align:middle;">
             <button class="btn-icon-sourcing" onclick="this.closest('tr').remove(); updateLineItemTotals(null);" style="color:#ef4444;" title="Remove Item"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/></svg></button>
           </td>
        `;
        tbody.appendChild(tr);
        updateLineItemTotals(tr.querySelector('.e-qty'));
      };

      window.updateLineItemTotals = function(inputElem) {
        if (inputElem) {
          const tr = inputElem.closest('tr');
          const stems = parseFloat(tr.querySelector('.e-stems').value) || 0;
          const price = parseFloat(tr.querySelector('.e-price').value.replace(',', '.')) || 0;
          const subtotal = stems * price;
          tr.querySelector('.e-subtotal').textContent = "" + formatCurrency(subtotal);
        }
      };

      window.submitLineItemEdits = async function() {
        const orderId = document.getElementById("m-line-item-order-id").value;
        const order = state.orders.find(o => o["Order ID"] === orderId);
        if (!order) return;

        let payload = {};
        try {
          payload = JSON.parse(order["Raw JSON Payload"] || "{}");
        } catch(e) {
          payload = { client: {}, items: [] };
        }

        const tbody = document.getElementById("line-item-edit-tbody");
        const rows = tbody.querySelectorAll("tr");
        const newItems = [];

        rows.forEach(tr => {
          const varietyRaw = tr.querySelector('.e-variety').value.trim();
          if (!varietyRaw) return;

          const originalDataAttr = tr.getAttribute('data-original-item');
          let baseItem = {};
          if (originalDataAttr) {
            try { baseItem = JSON.parse(originalDataAttr.replace(/&apos;/g, "'").replace(/&quot;/g, '"')); } catch(e){}
          }

          newItems.push({
            ...baseItem,
            qty: parseFloat(tr.querySelector('.e-qty').value) || 0,
            variety: varietyRaw,
            stem: parseInt(tr.querySelector('.e-stem').value) || 0,
            stems: parseFloat(tr.querySelector('.e-stems').value) || 0,
            price: parseFloat(tr.querySelector('.e-price').value.replace(',', '.')) || 0,
            supplier: tr.querySelector('.e-supplier').value.trim(),
            isPriceLocked: true
          });
        });

        if (newItems.length === 0) {
          showToast("error", "Order must have at least one item.");
          return;
        }

        showGlobalLoading(true);
        try {
          const postData = {
            action: "updateCatalogCheckout",
            userId: state.user.userId,
            passcode: state.passcode,
            orderId: orderId,
            client: payload.client || {},
            items: newItems
          };

          const res = await fetch(state.apiUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'text/plain' },
            body: JSON.stringify(postData)
          });
          const result = await res.json();
          if (result.success) {
            toggleModal("lineItemEditor", false);
            showToast("success", "Order Items updated successfully!");
            fetchLiveDatabase().then(() => {
              openOrderDetails(orderId);
            });
          } else {
            showToast("error", "Error updating items: " + result.message);
          }
        } catch(err) {
          console.error(err);
          showToast("error", "Failed to update order items.");
        } finally {
          showGlobalLoading(false);
        }
      };

    // --- BULK OUTREACH LOGIC ---
    state.selectedBulkClientIds = [];

    function toggleBulkOutreachClient(checkbox) {
      const cId = checkbox.value;
      if (checkbox.checked) {
        if (!state.selectedBulkClientIds.includes(cId)) state.selectedBulkClientIds.push(cId);
      } else {
        state.selectedBulkClientIds = state.selectedBulkClientIds.filter(id => id !== cId);
      }
      updateBulkOutreachButtonState();
    }

    function toggleAllBulkOutreach(masterCheckbox) {
      const checkboxes = document.querySelectorAll('.bulk-client-check');
      state.selectedBulkClientIds = [];
      checkboxes.forEach(cb => {
        cb.checked = masterCheckbox.checked;
        if (masterCheckbox.checked) {
          state.selectedBulkClientIds.push(cb.value);
        }
      });
      updateBulkOutreachButtonState();
    }

    function updateBulkOutreachButtonState() {
      const btn = document.getElementById("btn-bulk-outreach");
      const countEl = document.getElementById("bulk-outreach-count");
      if (btn && countEl) {
        countEl.textContent = state.selectedBulkClientIds.length;
        btn.disabled = state.selectedBulkClientIds.length === 0;
      }
    }

    function triggerAutoFillIds() {
      if (!confirm("Are you sure you want to automatically generate missing Client IDs in the database?")) return;
      showGlobalLoading(true, "Auto-generating missing Client IDs...");
      postPayload({
        action: "autoFillMissingClientIds",
        userId: state.user.userId,
        passcode: state.passcode
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", res.message);
          fetchLiveDatabase(); // refresh
        } else {
          showToast("error", res.message || "Failed");
        }
      }).catch(err => {
        showGlobalLoading(false);
        showToast("error", "Error auto-generating IDs");
      });
    }

    function openBulkOutreachModal() {
      if (state.selectedBulkClientIds.length === 0) return;
      const count = state.selectedBulkClientIds.length;
      document.getElementById("bulk-email-summary").textContent = `Sending to ${count} client${count !== 1 ? 's' : ''}`;
      document.getElementById("m-bulk-outreach-template").value = "none";
      document.getElementById("m-bulk-email-subject").value = "";
      document.getElementById("m-bulk-email-visual-body").innerHTML = "";
      toggleModal("bulk-email", true);
    }

    function handleBulkOutreachTemplateChange() {
      const templateType = document.getElementById("m-bulk-outreach-template").value;
      if (templateType === "none") {
        document.getElementById("m-bulk-email-subject").value = "";
        document.getElementById("m-bulk-email-visual-body").innerHTML = "";
        return;
      }
      const emailData = generateOutreachHtml(null, templateType);
      document.getElementById("m-bulk-email-subject").value = emailData.subject;
      document.getElementById("m-bulk-email-visual-body").innerHTML = emailData.htmlBody;
    }

    function execBulkEditorCommand(command, value = null) {
      document.execCommand(command, false, value);
      document.getElementById('m-bulk-email-visual-body').focus();
      updateBulkEditorToolbarState();
    }

    function updateBulkEditorToolbarState() {
      const boldBtn = document.querySelector('.bulk-editor-btn[title="Bold"]');
      const italicBtn = document.querySelector('.bulk-editor-btn[title="Italic"]');
      const underlineBtn = document.querySelector('.bulk-editor-btn[title="Underline"]');
      const bulletBtn = document.querySelector('.bulk-editor-btn[title="Bullet List"]');
      const numberBtn = document.querySelector('.bulk-editor-btn[title="Numbered List"]');
      
      if (boldBtn) boldBtn.classList.toggle('active', document.queryCommandState('bold'));
      if (italicBtn) italicBtn.classList.toggle('active', document.queryCommandState('italic'));
      if (underlineBtn) underlineBtn.classList.toggle('active', document.queryCommandState('underline'));
      if (bulletBtn) bulletBtn.classList.toggle('active', document.queryCommandState('insertUnorderedList'));
      if (numberBtn) numberBtn.classList.toggle('active', document.queryCommandState('insertOrderedList'));
    }

    function submitBulkOutreach(e) {
      e.preventDefault();
      
      const subject = document.getElementById("m-bulk-email-subject").value;
      const body = document.getElementById("m-bulk-email-visual-body").innerHTML;
      
      if (!subject || !body || body.trim() === "") {
        showToast("error", "Please provide a subject and an email body.");
        return;
      }
      
      showGlobalLoading(true, `Sending outreach to ${state.selectedBulkClientIds.length} clients...`);
      
      postPayload({
        action: "sendBulkOutreachEmails",
        userId: state.user.userId,
        passcode: state.passcode,
        clientIds: state.selectedBulkClientIds,
        subject: subject,
        body: body
      }).then(res => {
        showGlobalLoading(false);
        if (res.success) {
          showToast("success", res.message);
          toggleModal("bulk-email", false);
          
          // Clear selections
          state.selectedBulkClientIds = [];
          const masterCheck = document.getElementById("bulk-outreach-master-check");
          if (masterCheck) masterCheck.checked = false;
          const checkboxes = document.querySelectorAll('.bulk-client-check');
          checkboxes.forEach(cb => cb.checked = false);
          updateBulkOutreachButtonState();
          
          fetchLiveDatabase();
        } else {
          showToast("error", res.message || "Failed to send bulk email.");
        }
      }).catch(err => {
        showGlobalLoading(false);
        showToast("error", "Error sending bulk outreach email.");
      });
    }
  </script>
</body>
</html>