{"id":12,"date":"2026-11-02T04:50:40","date_gmt":"2026-11-02T04:50:40","guid":{"rendered":"https:\/\/intefreight.co\/?page_id=12"},"modified":"2026-11-02T06:10:30","modified_gmt":"2026-11-02T06:10:30","slug":"customer-portal","status":"publish","type":"page","link":"https:\/\/intefreight.co\/?page_id=12","title":{"rendered":"Customer Portal"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-40ee1e93 e-con-full e-flex e-con e-parent\" data-id=\"40ee1e93\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-65f2e728 e-con-full e-flex e-con e-child\" data-id=\"65f2e728\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-14ebe721 e-con e-atomic-element e-flexbox-base e-default-div e-14ebe721-afb0a06 \" data-id=\"14ebe721\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"14ebe721\" data-e-type=\"e-flexbox\" data-id=\"14ebe721\">\n    \t\t<div class=\"elementor-element elementor-element-b0d41e0 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"b0d41e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/intefreight.co\/wp-content\/uploads\/2026\/11\/chatgpt-2-1024x683.png\" class=\"attachment-large size-large wp-image-9\" alt=\"\" srcset=\"https:\/\/intefreight.co\/wp-content\/uploads\/2026\/11\/chatgpt-2-1024x683.png 1024w, https:\/\/intefreight.co\/wp-content\/uploads\/2026\/11\/chatgpt-2-300x200.png 300w, https:\/\/intefreight.co\/wp-content\/uploads\/2026\/11\/chatgpt-2-768x512.png 768w, https:\/\/intefreight.co\/wp-content\/uploads\/2026\/11\/chatgpt-2.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<button class=\"e-75f38e7c-b440ba6 e-button-base e-default-button\" data-interaction-id=\"75f38e7c\" id=\"flf-dashboard\" data-e-type=\"widget\" data-id=\"75f38e7c\">\n\tDashboard\n<\/button>\n\t\t\t\t\t<button class=\"e-415b851c-46e27a7 e-button-base e-default-button\" data-interaction-id=\"415b851c\" id=\"flf-get-quote\" data-e-type=\"widget\" data-id=\"415b851c\">\n\tGet a Quote\n<\/button>\n\t\t\t\t\t<button class=\"e-628fe94b-7784b5c e-button-base e-default-button\" data-interaction-id=\"628fe94b\" id=\"flf-saved-quotes\" data-e-type=\"widget\" data-id=\"628fe94b\">\n\tSaved Quotes\n<\/button>\n\t\t\t\t\t<button class=\"e-303803d2-7aac415 e-button-base e-default-button\" data-interaction-id=\"303803d2\" id=\"flf-shipments\" data-e-type=\"widget\" data-id=\"303803d2\">\n\tShipments\n<\/button>\n\t\t\t\t\t<button class=\"e-3d019fa2-2429edb e-button-base e-default-button\" data-interaction-id=\"3d019fa2\" id=\"flf-claims\" data-e-type=\"widget\" data-id=\"3d019fa2\">\n\tClaims\n<\/button>\n\t\t\t\t\t<button class=\"e-396d77b3-971bbe1 e-button-base e-default-button\" data-interaction-id=\"396d77b3\" id=\"flf-billing\" data-e-type=\"widget\" data-id=\"396d77b3\">\n\tBilling\n<\/button>\n\t\t\t\t\t<h2 data-interaction-id=\"5ddd4b32\" class=\"e-5ddd4b32-f5a6bb0 e-heading-base e-default-h2\" data-e-type=\"widget\" data-id=\"5ddd4b32\">designed to connect <\/h2>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2c6d4344 e-con-full e-flex e-con e-child\" data-id=\"2c6d4344\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c2281c3 elementor-widget elementor-widget-html\" data-id=\"5c2281c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"flf-portal-content\">\r\n\r\n   <div id=\"flf-portal-dashboard\">\r\n\r\n    <div class=\"flf-dashboard-header\">\r\n\r\n        <div class=\"flf-dashboard-welcome\">\r\n            \r\n            <h1>Welcome back, <span>Sako<\/span><\/h1>\r\n            \r\n        <\/div>\r\n\r\n<div class=\"flf-dashboard-search\">\r\n    <span class=\"flf-dashboard-search-icon\">\u2315<\/span>\r\n    <input\r\n        type=\"text\"\r\n        id=\"flf-dashboard-search\"\r\n        placeholder=\"Search shipments, quotes, references...\"\r\n        autocomplete=\"off\"\r\n    >\r\n<\/div>\r\n\r\n        <div class=\"flf-dashboard-period\">\r\n            <select id=\"flf-dashboard-timeframe\">\r\n                <option value=\"month\">This Month<\/option>\r\n                <option value=\"3months\">Last 3 Months<\/option>\r\n                <option value=\"ytd\">YTD<\/option>\r\n                <option value=\"all\">All Time<\/option>\r\n            <\/select>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"flf-dashboard-kpis\">\r\n\r\n        <div class=\"flf-dashboard-kpi\">\r\n            <div class=\"flf-dashboard-kpi-label\">\r\n                WEIGHT MOVED THIS MONTH\r\n            <\/div>\r\n\r\n            <div class=\"flf-dashboard-kpi-value\">\r\n                48,620 <span>lbs<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"flf-dashboard-kpi-trend\">\r\n                \u2191 12% <span>vs. last month<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n\r\n        <div class=\"flf-dashboard-kpi\">\r\n            <div class=\"flf-dashboard-kpi-label\">\r\n                MILES MOVED THIS MONTH\r\n            <\/div>\r\n\r\n            <div class=\"flf-dashboard-kpi-value\">\r\n                12,840 <span>mi<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"flf-dashboard-kpi-trend\">\r\n                \u2191 18% <span>vs. last month<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n\r\n        <div class=\"flf-dashboard-kpi\">\r\n            <div class=\"flf-dashboard-kpi-label\">\r\n                SHIPPING SPEND THIS MONTH\r\n            <\/div>\r\n\r\n            <div class=\"flf-dashboard-kpi-value\">\r\n                $18,742\r\n            <\/div>\r\n\r\n            <div class=\"flf-dashboard-kpi-trend\">\r\n                \u2191 6% <span>vs. last month<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div class=\"flf-dashboard-map-shell\">\r\n\r\n        <div class=\"flf-dashboard-map-placeholder\">\r\n    <div id=\"flf-global-map\"><\/div>\r\n<\/div>\r\n\r\n        <div class=\"flf-dashboard-network\">\r\n\r\n    <div class=\"flf-world-clock\" data-timezone=\"America\/Los_Angeles\">\r\n        <span>PACIFIC<\/span>\r\n        <strong class=\"flf-clock-time\">--:-- --<\/strong>\r\n        <small>LOS ANGELES<\/small>\r\n    <\/div>\r\n\r\n    <div class=\"flf-world-clock\" data-timezone=\"America\/Denver\">\r\n        <span>MOUNTAIN<\/span>\r\n        <strong class=\"flf-clock-time\">--:-- --<\/strong>\r\n        <small>DENVER<\/small>\r\n    <\/div>\r\n\r\n    <div class=\"flf-world-clock\" data-timezone=\"America\/Chicago\">\r\n        <span>CENTRAL<\/span>\r\n        <strong class=\"flf-clock-time\">--:-- --<\/strong>\r\n        <small>HOUSTON<\/small>\r\n    <\/div>\r\n\r\n    <div class=\"flf-world-clock\" data-timezone=\"America\/New_York\">\r\n        <span>EASTERN<\/span>\r\n        <strong class=\"flf-clock-time\">--:-- --<\/strong>\r\n        <small>NEW YORK<\/small>\r\n    <\/div>\r\n\r\n    <div class=\"flf-world-clock\" data-timezone=\"Asia\/Shanghai\">\r\n        <span>CHINA<\/span>\r\n        <strong class=\"flf-clock-time\">--:-- --<\/strong>\r\n        <small>SHANGHAI<\/small>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n    <div id=\"flf-portal-quote\" style=\"display:none;\">\r\n\r\n        <h2>Get a Quote<\/h2>\r\n\r\n        <div class=\"flf-portal-section-title\">\r\n            Origin &amp; Destination\r\n        <\/div>\r\n\r\n        <div class=\"flf-portal-zip-row\">\r\n\r\n            <div class=\"flf-portal-field\">\r\n                <label for=\"flf-portal-origin-zip\">Origin ZIP Code<\/label>\r\n                <input\r\n                    type=\"text\"\r\n                    id=\"flf-portal-origin-zip\"\r\n                    placeholder=\"e.g. 90001\"\r\n                    maxlength=\"7\"\r\n                >\r\n            <\/div>\r\n\r\n            <div class=\"flf-portal-field\">\r\n                <label for=\"flf-portal-dest-zip\">Destination ZIP Code<\/label>\r\n                <input\r\n                    type=\"text\"\r\n                    id=\"flf-portal-dest-zip\"\r\n                    placeholder=\"e.g. 10001\"\r\n                    maxlength=\"7\"\r\n                >\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"flf-portal-section-title\">\r\n            Freight Details\r\n        <\/div>\r\n\r\n        <div id=\"flf-portal-items\"><\/div>\r\n\r\n        <button\r\n            type=\"button\"\r\n            id=\"flf-portal-add-item\"\r\n            class=\"flf-portal-secondary-btn\"\r\n        >\r\n            + Add an Item\r\n        <\/button>\r\n\r\n        <div class=\"flf-portal-section-title\">\r\n            Services\r\n        <\/div>\r\n\r\n        <div class=\"flf-portal-services\">\r\n\r\n            <div class=\"flf-portal-service-group\">\r\n                <strong>Pickup Services<\/strong>\r\n\r\n                <label>\r\n                    <input type=\"checkbox\" name=\"flf-portal-pu\" value=\"LGPU\">\r\n                    Liftgate\r\n                <\/label>\r\n\r\n            \r\n\r\n                <label>\r\n                    <input type=\"checkbox\" name=\"flf-portal-pu\" value=\"RESPU\">\r\n                    Residential\r\n                <\/label>\r\n\r\n                <label>\r\n                    <input type=\"checkbox\" name=\"flf-portal-pu\" value=\"LTDPU\">\r\n                    Limited Access\r\n                <\/label>\r\n            <\/div>\r\n\r\n            <div class=\"flf-portal-service-group\">\r\n                <strong>Delivery Services<\/strong>\r\n\r\n                <label>\r\n                    <input type=\"checkbox\" name=\"flf-portal-del\" value=\"LGDEL\">\r\n                    Liftgate\r\n                <\/label>\r\n\r\n                <label>\r\n                    <input type=\"checkbox\" name=\"flf-portal-del\" value=\"APPT\">\r\n                    Appointment\r\n                <\/label>\r\n\r\n                <label>\r\n                    <input type=\"checkbox\" name=\"flf-portal-del\" value=\"RESDEL\">\r\n                    Residential\r\n                <\/label>\r\n\r\n                <label>\r\n                    <input type=\"checkbox\" name=\"flf-portal-del\" value=\"LTDDEL\">\r\n                    Limited Access\r\n                <\/label>\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n        <button\r\n            type=\"button\"\r\n            id=\"flf-portal-get-rate\"\r\n            class=\"flf-portal-primary-btn\"\r\n        >\r\n            Get Live Rate\r\n        <\/button>\r\n\r\n        <div id=\"flf-portal-rate-result\"><\/div>\r\n\r\n    <\/div>\r\n    \r\n        <div id=\"flf-portal-other-screen\" style=\"display:none;\"><\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    \/\/ ===== PORTAL QUOTE LINE ITEMS =====\r\n\r\n    let portalItemCount = 0;\r\n\r\n    function addPortalItem() {\r\n        portalItemCount++;\r\n\r\n        const itemsWrap = document.getElementById('flf-portal-items');\r\n        if (!itemsWrap) return;\r\n\r\n        const n = portalItemCount;\r\n\r\n        const item = document.createElement('div');\r\n        item.className = 'flf-portal-item';\r\n        item.id = 'flf-portal-item-' + n;\r\n\r\n        const classOptions = [\r\n            '50','55','60','65','70','77.5','85','92.5',\r\n            '100','110','125','150','175','200','250',\r\n            '300','400','500'\r\n        ].map(function(value) {\r\n            return '<option value=\"' + value + '\"' +\r\n                (value === '70' ? ' selected' : '') +\r\n                '>Class ' + value + '<\/option>';\r\n        }).join('');\r\n\r\n        const packagingOptions = [\r\n            'Pallet','Box','Crate','Drum','Bag',\r\n            'Roll','Skid','Bundle','Piece'\r\n        ].map(function(value) {\r\n            return '<option value=\"' + value + '\">' +\r\n                value +\r\n                '<\/option>';\r\n        }).join('');\r\n\r\n        item.innerHTML =\r\n            '<div class=\"flf-portal-item-header\">' +\r\n                '<strong>Line Item #' + n + '<\/strong>' +\r\n                (n > 1\r\n                    ? '<button type=\"button\" class=\"flf-portal-remove-item\" data-item=\"' + n + '\">Remove<\/button>'\r\n                    : '') +\r\n            '<\/div>' +\r\n\r\n            '<div class=\"flf-portal-item-row\">' +\r\n\r\n                '<div class=\"flf-portal-field\">' +\r\n                    '<label>Packaging<\/label>' +\r\n                    '<select id=\"flf-portal-pkg-' + n + '\">' +\r\n                        packagingOptions +\r\n                    '<\/select>' +\r\n                '<\/div>' +\r\n\r\n                '<div class=\"flf-portal-field\">' +\r\n                    '<label>Units<\/label>' +\r\n                    '<input type=\"number\" id=\"flf-portal-units-' + n + '\" value=\"1\" min=\"1\">' +\r\n                '<\/div>' +\r\n\r\n                '<div class=\"flf-portal-field\">' +\r\n                    '<label>Pieces<\/label>' +\r\n                    '<input type=\"number\" id=\"flf-portal-pieces-' + n + '\" value=\"1\" min=\"1\">' +\r\n                '<\/div>' +\r\n\r\n                '<div class=\"flf-portal-field\">' +\r\n                    '<label>Freight Class<\/label>' +\r\n                    '<select id=\"flf-portal-class-' + n + '\">' +\r\n                        classOptions +\r\n                    '<\/select>' +\r\n                '<\/div>' +\r\n\r\n            '<\/div>' +\r\n\r\n            '<div class=\"flf-portal-item-row\">' +\r\n\r\n                '<div class=\"flf-portal-field\">' +\r\n                    '<label>Weight (lbs)<\/label>' +\r\n                    '<input type=\"number\" id=\"flf-portal-weight-' + n + '\" placeholder=\"e.g. 500\" min=\"1\">' +\r\n                '<\/div>' +\r\n\r\n                '<div class=\"flf-portal-field\">' +\r\n                    '<label>Length (in)<\/label>' +\r\n                    '<input type=\"number\" id=\"flf-portal-length-' + n + '\" placeholder=\"48\" min=\"1\">' +\r\n                '<\/div>' +\r\n\r\n                '<div class=\"flf-portal-field\">' +\r\n                    '<label>Width (in)<\/label>' +\r\n                    '<input type=\"number\" id=\"flf-portal-width-' + n + '\" placeholder=\"40\" min=\"1\">' +\r\n                '<\/div>' +\r\n\r\n                '<div class=\"flf-portal-field\">' +\r\n                    '<label>Height (in)<\/label>' +\r\n                    '<input type=\"number\" id=\"flf-portal-height-' + n + '\" placeholder=\"40\" min=\"1\">' +\r\n                '<\/div>' +\r\n\r\n            '<\/div>';\r\n\r\n        itemsWrap.appendChild(item);\r\n    }\r\n\r\n\r\n    \/\/ Start every new quote with Line Item #1\r\n    addPortalItem();\r\n\r\n\r\n    \/\/ Add another freight configuration\r\n    document.getElementById('flf-portal-add-item')\r\n        ?.addEventListener('click', function () {\r\n            addPortalItem();\r\n        });\r\n\r\n\r\n    \/\/ Remove additional line items\r\n    document.getElementById('flf-portal-items')\r\n        ?.addEventListener('click', function (e) {\r\n\r\n            const removeButton =\r\n                e.target.closest('.flf-portal-remove-item');\r\n\r\n            if (!removeButton) return;\r\n\r\n            const itemNumber =\r\n                removeButton.getAttribute('data-item');\r\n\r\n            document.getElementById(\r\n                'flf-portal-item-' + itemNumber\r\n            )?.remove();\r\n\/\/ Renumber remaining line items\r\nconst remainingItems =\r\n    document.querySelectorAll('.flf-portal-item');\r\n\r\nremainingItems.forEach(function(item, index) {\r\n    const label = item.querySelector('.flf-portal-item-header strong');\r\n\r\n    if (label) {\r\n        label.textContent = 'Line Item #' + (index + 1);\r\n    }\r\n});\r\n\r\nportalItemCount = remainingItems.length;\r\n             });\r\n             \/\/ ===== PORTAL LIVE RATE =====\r\n\r\ndocument.getElementById('flf-portal-get-rate')\r\n    ?.addEventListener('click', function () {\r\n\r\n        const results =\r\n            document.getElementById('flf-portal-rate-result');\r\n\r\n        const button =\r\n            document.getElementById('flf-portal-get-rate');\r\n\r\n        const originZip =\r\n            document.getElementById('flf-portal-origin-zip')\r\n                ?.value.trim();\r\n\r\n        const destinationZip =\r\n            document.getElementById('flf-portal-dest-zip')\r\n                ?.value.trim();\r\n\r\n\r\n        \/\/ Require both ZIP codes\r\n        if (!originZip || !destinationZip) {\r\n            results.innerHTML =\r\n                '<div class=\"flf-portal-error\">' +\r\n                'Please enter both Origin and Destination ZIP codes.' +\r\n                '<\/div>';\r\n\r\n            return;\r\n        }\r\n\r\n\r\n        \/\/ Collect freight line items\r\n        const cards =\r\n            document.querySelectorAll('.flf-portal-item');\r\n\r\n        const items = [];\r\n        let hasError = false;\r\n\r\n\r\n        cards.forEach(function(card) {\r\n\r\n            const id =\r\n                card.id.replace('flf-portal-item-', '');\r\n\r\n            const weight =\r\n                parseFloat(\r\n                    document.getElementById(\r\n                        'flf-portal-weight-' + id\r\n                    )?.value\r\n                );\r\n\r\n            const length =\r\n                parseFloat(\r\n                    document.getElementById(\r\n                        'flf-portal-length-' + id\r\n                    )?.value\r\n                );\r\n\r\n            const width =\r\n                parseFloat(\r\n                    document.getElementById(\r\n                        'flf-portal-width-' + id\r\n                    )?.value\r\n                );\r\n\r\n            const height =\r\n                parseFloat(\r\n                    document.getElementById(\r\n                        'flf-portal-height-' + id\r\n                    )?.value\r\n                );\r\n\r\n\r\n            if (!weight || !length || !width || !height) {\r\n                hasError = true;\r\n                return;\r\n            }\r\n\r\n\r\n            items.push({\r\n\r\n                freightClass:\r\n                    document.getElementById(\r\n                        'flf-portal-class-' + id\r\n                    ).value,\r\n\r\n                packagingType:\r\n                    document.getElementById(\r\n                        'flf-portal-pkg-' + id\r\n                    ).value,\r\n\r\n                units:\r\n                    parseInt(\r\n                        document.getElementById(\r\n                            'flf-portal-units-' + id\r\n                        ).value\r\n                    ) || 1,\r\n\r\n                pieces:\r\n                    parseInt(\r\n                        document.getElementById(\r\n                            'flf-portal-pieces-' + id\r\n                        ).value\r\n                    ) || 1,\r\n\r\n                totalWeight: weight,\r\n                length: length,\r\n                width: width,\r\n                height: height\r\n            });\r\n\r\n        });\r\n\r\n\r\n        if (hasError || items.length === 0) {\r\n\r\n            results.innerHTML =\r\n                '<div class=\"flf-portal-error\">' +\r\n                'Please enter Weight, Length, Width, and Height for every line item.' +\r\n                '<\/div>';\r\n\r\n            return;\r\n        }\r\n\r\n\r\n        \/\/ Collect pickup and delivery services\r\n        const accessorials = [];\r\n\r\n        document.querySelectorAll(\r\n            'input[name=\"flf-portal-pu\"]:checked,' +\r\n            'input[name=\"flf-portal-del\"]:checked'\r\n        ).forEach(function(checkbox) {\r\n\r\n            accessorials.push({\r\n                code: checkbox.value\r\n            });\r\n\r\n        });\r\n\r\n\r\n        \/\/ Loading state\r\n        button.disabled = true;\r\n        button.textContent = 'Fetching Rate...';\r\n\r\n        results.innerHTML = '';\r\n\r\n\r\n        fetch(\r\n            'https:\/\/finishlinefreight.com\/ltl-proxy\/ltl-rates.php',\r\n            {\r\n                method: 'POST',\r\n\r\n                headers: {\r\n                    'Content-Type': 'application\/json'\r\n                },\r\n\r\n                body: JSON.stringify({\r\n                    request_source: 'portal',\r\n                    origin_zip: originZip,\r\n                    dest_zip: destinationZip,\r\n                    items: items,\r\n                    accessorials: accessorials\r\n                })\r\n            }\r\n        )\r\n\r\n        .then(function(response) {\r\n            return response.json();\r\n        })\r\n\r\n        .then(function(data) {\r\n\r\n            button.disabled = false;\r\n            button.textContent = 'Get Live Rate';\r\n\r\n\r\n            if (data.error) {\r\n\r\n                results.innerHTML =\r\n                    '<div class=\"flf-portal-error\">' +\r\n                    data.error +\r\n                    '<\/div>';\r\n\r\n                return;\r\n            }\r\n\r\n\r\n            const rates = data.rateQuotes || [];\r\n\r\n\r\n            if (!rates.length) {\r\n\r\n                results.innerHTML =\r\n                    '<div class=\"flf-portal-error\">' +\r\n                    'No rate was found for this lane. Please contact us for a manual quote.' +\r\n                    '<\/div>';\r\n\r\n                return;\r\n            }\r\n\r\n\r\n            \/\/ Cheapest Priority1 rate only\r\n            rates.sort(function(a, b) {\r\n\r\n                return (\r\n                    (a.rateQuoteDetail || {}).total || 9999\r\n                ) - (\r\n                    (b.rateQuoteDetail || {}).total || 9999\r\n                );\r\n\r\n            });\r\n\r\n\r\n            const rate = rates[0];\r\n\r\n\r\n            const total =\r\n                rate.rateQuoteDetail &&\r\n                rate.rateQuoteDetail.total != null\r\n\r\n                ? '$' +\r\n                    parseFloat(\r\n                        rate.rateQuoteDetail.total\r\n                    ).toFixed(2)\r\n\r\n                : '\u2014';\r\n\r\n\r\n            const transit =\r\n                rate.transitDays != null\r\n\r\n                ? rate.transitDays +\r\n                    (rate.transitDays === 1\r\n                        ? ' Day'\r\n                        : ' Days')\r\n\r\n                : '\u2014';\r\n\r\n\r\n            const deliveryDate =\r\n                rate.deliveryDate\r\n\r\n                ? new Date(\r\n                    rate.deliveryDate\r\n                ).toLocaleDateString(\r\n                    'en-US',\r\n                    {\r\n                        month: 'short',\r\n                        day: 'numeric',\r\n                        year: 'numeric'\r\n                    }\r\n                )\r\n\r\n                : '\u2014';\r\n\r\n\r\n            const serviceType =\r\n                rate.laneType || '\u2014';\r\n\r\n\r\n            \/\/ Keep quote available for booking step later\r\n            window.flfPortalCurrentQuote = {\r\n                originZip: originZip,\r\n                destinationZip: destinationZip,\r\n                items: items,\r\n                accessorials: accessorials,\r\n                quotedRate: total,\r\n                transitTime: transit,\r\n                estimatedDelivery: deliveryDate,\r\n                serviceType: serviceType\r\n            };\r\n\r\n\r\n            \/\/ Inline rate result\r\n            results.innerHTML =\r\n\r\n                '<div class=\"flf-portal-rate-card\">' +\r\n\r\n                    '<strong>Finish Line Freight<\/strong>' +\r\n\r\n                    '<div>' +\r\n                        'Transit: ' + transit +\r\n                    '<\/div>' +\r\n\r\n                    '<div>' +\r\n                        'Estimated Delivery: ' +\r\n                        deliveryDate +\r\n                    '<\/div>' +\r\n\r\n                    '<div>' +\r\n                        'Service: ' +\r\n                        serviceType +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-rate-price\">' +\r\n                        total +\r\n                    '<\/div>' +\r\n\r\n                    '<button type=\"button\" ' +\r\n    'id=\"flf-portal-book-shipment\" ' +\r\n    'onclick=\"document.dispatchEvent(new Event(\\'flfOpenBookingForm\\'))\">' +\r\n                        'Book This Shipment' +\r\n                    '<\/button>' +\r\n                        '<button type=\"button\" id=\"flf-portal-save-quote\">' +\r\n    'Save Quote' +\r\n'<\/button>' +\r\n                '<\/div>';\r\n\r\n        })\r\n\r\n        .catch(function(error) {\r\n\r\n            button.disabled = false;\r\n            button.textContent = 'Get Live Rate';\r\n\r\n            results.innerHTML =\r\n                '<div class=\"flf-portal-error\">' +\r\n                'Could not connect to the rate service. Please try again.' +\r\n                '<\/div>';\r\n\r\n            console.error(error);\r\n\r\n        });\r\n\r\n    });\r\n    \/\/ ===== PORTAL NAVIGATION =====\r\n\r\n    const quoteScreen =\r\n        document.getElementById('flf-portal-quote');\r\n\r\n    const otherScreen =\r\n        document.getElementById('flf-portal-other-screen');\r\n\r\nconst dashboardScreen =\r\n    document.getElementById('flf-portal-dashboard');\r\n\r\nfunction showDashboardScreen() {\r\n\r\n    dashboardScreen.style.display = '';\r\n    quoteScreen.style.display = 'none';\r\n    otherScreen.style.display = 'none';\r\n\r\n}\r\n    function showQuoteScreen() {\r\n\r\n    dashboardScreen.style.display = 'none';\r\n    quoteScreen.style.display = '';\r\n    otherScreen.style.display = 'none';\r\n\r\n    }\r\n\r\n\r\n    function showOtherScreen(title, text) {\r\n\r\n    dashboardScreen.style.display = 'none';\r\n    quoteScreen.style.display = 'none';\r\n    otherScreen.style.display = '';\r\n\r\n    otherScreen.innerHTML =\r\n        '<h2>' + title + '<\/h2>' +\r\n        '<p>' + text + '<\/p>';\r\n\r\n}\r\n\r\ndocument.getElementById('flf-dashboard')\r\n    ?.addEventListener('click', function(e) {\r\n\r\n        e.preventDefault();\r\n        showDashboardScreen();\r\n\r\n    });\r\n    document.getElementById('flf-get-quote')\r\n        ?.addEventListener('click', function(e) {\r\n\r\n            e.preventDefault();\r\n            showQuoteScreen();\r\n\r\n        });\r\n\r\n\r\ndocument.getElementById('flf-saved-quotes')\r\n  ?.addEventListener('click', function(e) {\r\n\r\n    e.preventDefault();\r\n\r\n    \/\/ Hide quote screen without destroying it\r\n    quoteScreen.style.display = 'none';\r\n    otherScreen.style.display = '';\r\n\r\n    otherScreen.innerHTML =\r\n      '<h2>Saved Quotes<\/h2>' +\r\n      '<p>Loading your saved quotes...<\/p>';\r\n\r\n    const formData = new FormData();\r\n\r\n    formData.append('action', 'flf_get_quotes');\r\n    formData.append(\r\n      'nonce',\r\n      window.flfPortalBackend.shipmentNonce\r\n    );\r\n\r\n    fetch(window.flfPortalBackend.ajaxUrl, {\r\n      method: 'POST',\r\n      body: formData\r\n    })\r\n    .then(function(response) {\r\n      return response.json();\r\n    })\r\n    .then(function(response) {\r\n\r\n      if (!response.success) {\r\n        throw new Error(\r\n          response.data && response.data.message\r\n            ? response.data.message\r\n            : 'Saved quotes could not be loaded.'\r\n        );\r\n      }\r\n\r\n      const quotes = response.data.quotes || [];\r\n\r\n      if (!quotes.length) {\r\n        otherScreen.innerHTML =\r\n          '<h2>Saved Quotes<\/h2>' +\r\n          '<p>You do not have any saved quotes yet.<\/p>';\r\n        return;\r\n      }\r\n\r\n      let html = '<h2>Saved Quotes<\/h2>';\r\n\r\n      quotes.forEach(function(quote) {\r\n\r\n        const isExpired = quote.status === 'expired';\r\n\r\n        const rate = quote.sell_rate !== null\r\n          ? '$' + parseFloat(quote.sell_rate).toFixed(2)\r\n          : '\u2014';\r\n\r\n        const createdDate = quote.created_at\r\n          ? new Date(quote.created_at.replace(' ', 'T')).toLocaleDateString()\r\n          : '\u2014';\r\n\r\n        const expirationDate = quote.expires_at\r\n          ? new Date(quote.expires_at.replace(' ', 'T')).toLocaleDateString()\r\n          : '\u2014';\r\n\r\n        html +=\r\n          '<div class=\"flf-portal-rate-card\" style=\"margin-bottom:16px;\">' +\r\n\r\n            '<button type=\"button\" class=\"flf-view-quote\" data-quote-id=\"' + quote.id + '\">' +\r\n    quote.quote_number +\r\n'<\/button>' +\r\n\r\n            '<div style=\"margin-top:8px;\">' +\r\n              quote.origin_zip + ' \u2192 ' + quote.destination_zip +\r\n            '<\/div>' +\r\n\r\n            '<div>' +\r\n              '<strong>Rate:<\/strong> ' + rate +\r\n            '<\/div>' +\r\n\r\n            '<div>' +\r\n              '<strong>Transit:<\/strong> ' +\r\n              (quote.transit_time || '\u2014') +\r\n            '<\/div>' +\r\n\r\n            '<div>' +\r\n              '<strong>Created:<\/strong> ' + createdDate +\r\n            '<\/div>' +\r\n\r\n            '<div>' +\r\n              '<strong>Valid Through:<\/strong> ' + expirationDate +\r\n            '<\/div>' +\r\n\r\n            '<div>' +\r\n              '<strong>Status:<\/strong> ' +\r\n              (isExpired ? 'Expired' : 'Active') +\r\n            '<\/div>' +\r\n\r\n          '<\/div>';\r\n      });\r\n\r\n      otherScreen.innerHTML = html;\r\n\r\n    })\r\n    .catch(function(error) {\r\n\r\n      console.error('FLF saved quotes error:', error);\r\n\r\n      otherScreen.innerHTML =\r\n        '<h2>Saved Quotes<\/h2>' +\r\n        '<div class=\"flf-portal-error\">' +\r\n          'Saved quotes could not be loaded. Please try again.' +\r\n        '<\/div>';\r\n\r\n    });\r\n\r\n  });\r\n\r\n\r\n    document.getElementById('flf-shipments')\r\n    ?.addEventListener('click', async function(e) {\r\n\r\n        e.preventDefault();\r\n\r\n        showOtherScreen(\r\n            'Shipments',\r\n            'Loading your shipments...'\r\n        );\r\n\r\n        try {\r\n\r\n            const formData = new FormData();\r\n            formData.append('action', 'flf_get_shipments');\r\n            formData.append('nonce', window.flfPortalBackend.shipmentNonce);\r\n\r\n            const response = await fetch(\r\n                window.flfPortalBackend.ajaxUrl,\r\n                {\r\n                    method: 'POST',\r\n                    body: formData\r\n                }\r\n            );\r\n\r\n            const data = await response.json();\r\n\r\n            if (!data.success) {\r\n                throw new Error(\r\n                    data.data?.message || 'Shipments could not be loaded.'\r\n                );\r\n            }\r\n\r\n            const shipments = data.data.shipments || [];\r\n\r\n            if (!shipments.length) {\r\n\r\n                showOtherScreen(\r\n                    'Shipments',\r\n                    'You do not have any shipments yet.'\r\n                );\r\n\r\n                return;\r\n            }\r\n\r\n            const shipmentRows = shipments.map(function(shipment) {\r\n\r\n                const status = shipment.status\r\n                    ? shipment.status.charAt(0).toUpperCase() + shipment.status.slice(1)\r\n                    : 'Pending';\r\n\r\n                const transit = shipment.transit_time\r\n                    ? shipment.transit_time \r\n                    : '\u2014';\r\n\r\n                return `\r\n                    <div style=\"\r\n                        border:1px solid #e5e5e5;\r\n                        border-radius:8px;\r\n                        padding:18px;\r\n                        margin-bottom:12px;\r\n                        background:#fff;\r\n                    \">\r\n                        <div style=\"\r\n                            display:flex;\r\n                            justify-content:space-between;\r\n                            gap:20px;\r\n                            flex-wrap:wrap;\r\n                        \">\r\n                            <div>\r\n                                <button\r\n    type=\"button\"\r\n    class=\"flf-view-shipment\"\r\n    data-shipment-id=\"${shipment.id}\"\r\n    style=\"\r\n        background:none;\r\n        border:none;\r\n        padding:0;\r\n        margin:0;\r\n        font:inherit;\r\n        font-weight:700;\r\n        cursor:pointer;\r\n        text-decoration:underline;\r\n    \"\r\n>\r\n    ${shipment.shipment_number}\r\n<\/button>\r\n                                <div style=\"margin-top:6px;\">\r\n                                    ${shipment.origin_zip} \u2192 ${shipment.destination_zip}\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <div>\r\n                                <strong>Status:<\/strong> ${status}\r\n                                <div style=\"margin-top:6px;\">\r\n                                    Transit: ${transit}\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                `;\r\n\r\n            }).join('');\r\n\r\n            showOtherScreen(\r\n                'Shipments',\r\n                shipmentRows\r\n            );\r\n\r\n        } catch (error) {\r\n\r\n            console.error('FLF shipment loading error:', error);\r\n\r\n            showOtherScreen(\r\n                'Shipments',\r\n                'We could not load your shipments. Please try again.'\r\n            );\r\n\r\n        }\r\n\r\n    });\r\n    \/\/ ===== BOOK SAVED QUOTE =====\r\n\r\ndocument.addEventListener('click', function(e) {\r\n\r\n    const bookSavedQuoteButton =\r\n        e.target.closest('#flf-book-saved-quote');\r\n\r\n    if (!bookSavedQuoteButton) {\r\n        return;\r\n    }\r\n\r\n    e.preventDefault();\r\n\r\n    const savedQuote = window.flfPortalOpenedSavedQuote;\r\n\r\n    if (!savedQuote) {\r\n        alert('This saved quote could not be loaded. Please try again.');\r\n        return;\r\n    }\r\n\r\n    if (savedQuote.status === 'expired') {\r\n        alert('This quote has expired. Please get an updated rate.');\r\n        return;\r\n    }\r\n\r\n    window.flfPortalCurrentQuote = {\r\n        originZip: savedQuote.origin_zip,\r\n        destinationZip: savedQuote.destination_zip,\r\n        items: Array.isArray(savedQuote.freight_data)\r\n            ? savedQuote.freight_data\r\n            : [],\r\n        accessorials: Array.isArray(savedQuote.accessorials)\r\n            ? savedQuote.accessorials\r\n            : [],\r\n        quotedRate: savedQuote.sell_rate !== null\r\n            ? '$' + parseFloat(savedQuote.sell_rate).toFixed(2)\r\n            : '',\r\n        transitTime: savedQuote.transit_time || '',\r\n        estimatedDelivery: savedQuote.estimated_delivery || '',\r\n        serviceType: savedQuote.service_type || ''\r\n    };\r\n\r\n    window.flfPortalBookingQuoteId = savedQuote.id;\r\n    window.flfPortalBookingQuoteNumber = savedQuote.quote_number;\r\n\r\n    \/\/ Return to the preserved quote screen.\r\n    otherScreen.style.display = 'none';\r\n    quoteScreen.style.display = '';\r\n\r\n    document.dispatchEvent(\r\n    new Event('flfOpenBookingForm')\r\n);\r\n\r\n});\r\n    \r\n    \/\/ ===== SAVED QUOTE DETAILS =====\r\n\r\ndocument.addEventListener('click', async function(e) {\r\n\r\n    const quoteButton = e.target.closest('.flf-view-quote');\r\n\r\n    if (!quoteButton) {\r\n        return;\r\n    }\r\n\r\n    e.preventDefault();\r\n\r\n    const quoteId = quoteButton.dataset.quoteId;\r\n\r\n    showOtherScreen(\r\n        'Quote Details',\r\n        'Loading quote...'\r\n    );\r\n\r\n    try {\r\n\r\n        const formData = new FormData();\r\n        formData.append('action', 'flf_get_quote');\r\n        formData.append('nonce', window.flfPortalBackend.shipmentNonce);\r\n        formData.append('quote_id', quoteId);\r\n\r\n        const response = await fetch(\r\n            window.flfPortalBackend.ajaxUrl,\r\n            {\r\n                method: 'POST',\r\n                body: formData\r\n            }\r\n        );\r\n\r\n        const data = await response.json();\r\n\r\n        if (!data.success) {\r\n            throw new Error(\r\n                data.data && data.data.message\r\n                    ? data.data.message\r\n                    : 'Quote could not be loaded.'\r\n            );\r\n        }\r\n\r\n        const quote = data.data.quote;\r\n        window.flfPortalOpenedSavedQuote = quote;\r\n\r\n        const freight = Array.isArray(quote.freight_data)\r\n            ? quote.freight_data\r\n            : [];\r\n\r\n        const accessorials = Array.isArray(quote.accessorials)\r\n            ? quote.accessorials\r\n            : [];\r\n\r\n        const accessorialNames = {\r\n            LGPU: 'Pickup Liftgate',\r\n            RESPU: 'Pickup Residential',\r\n            LTDPU: 'Pickup Limited Access',\r\n            LGDEL: 'Delivery Liftgate',\r\n            APPT: 'Delivery Appointment',\r\n            RESDEL: 'Delivery Residential',\r\n            LTDDEL: 'Delivery Limited Access'\r\n        };\r\n\r\n        const accessorialCodes = accessorials\r\n            .map(function(item) {\r\n                return typeof item === 'object' && item !== null\r\n                    ? item.code\r\n                    : item;\r\n            })\r\n            .filter(Boolean);\r\n\r\n        const uniqueAccessorialCodes = [...new Set(accessorialCodes)];\r\n\r\n        const accessorialHtml = uniqueAccessorialCodes.length\r\n            ? uniqueAccessorialCodes.map(function(code) {\r\n                return accessorialNames[code] || code;\r\n            }).join(', ')\r\n            : 'None';\r\n\r\n        const freightHtml = freight.length\r\n            ? freight.map(function(item, index) {\r\n\r\n                return (\r\n                    '<div style=\"margin-bottom:12px;\">' +\r\n                        '<strong>Item ' + (index + 1) + '<\/strong><br>' +\r\n                        (item.units || 1) + ' ' +\r\n                        (item.packagingType || 'Item') +\r\n                        ' | Class ' + (item.freightClass || '\u2014') +\r\n                        ' | ' + (item.totalWeight || '\u2014') + ' lbs' +\r\n                        ' | ' + (item.length || '\u2014') + 'x' +\r\n                                 (item.width || '\u2014') + 'x' +\r\n                                 (item.height || '\u2014') + ' in' +\r\n                    '<\/div>'\r\n                );\r\n\r\n            }).join('')\r\n            : 'No freight details available.';\r\n\r\n        const rate = quote.sell_rate !== null\r\n            ? '$' + parseFloat(quote.sell_rate).toFixed(2)\r\n            : '\u2014';\r\n\r\n        const createdDate = quote.created_at\r\n            ? new Date(quote.created_at.replace(' ', 'T')).toLocaleDateString()\r\n            : '\u2014';\r\n\r\n        const expirationDate = quote.expires_at\r\n            ? new Date(quote.expires_at.replace(' ', 'T')).toLocaleDateString()\r\n            : '\u2014';\r\n\r\n        const isExpired = quote.status === 'expired';\r\n\r\n        let quoteHtml =\r\n            '<button type=\"button\" id=\"flf-back-to-saved-quotes\">' +\r\n                '\u2190 Back to Saved Quotes' +\r\n            '<\/button>' +\r\n\r\n            '<h2>' + quote.quote_number + '<\/h2>' +\r\n\r\n            '<div class=\"flf-portal-rate-card\">' +\r\n\r\n                '<div><strong>Route:<\/strong> ' +\r\n                    quote.origin_zip + ' \u2192 ' +\r\n                    quote.destination_zip +\r\n                '<\/div>' +\r\n\r\n                '<div><strong>Rate:<\/strong> ' +\r\n                    rate +\r\n                '<\/div>' +\r\n\r\n                '<div><strong>Transit:<\/strong> ' +\r\n                    (quote.transit_time || '\u2014') +\r\n                '<\/div>' +\r\n\r\n                '<div><strong>Estimated Delivery:<\/strong> ' +\r\n                    (quote.estimated_delivery || '\u2014') +\r\n                '<\/div>' +\r\n\r\n                '<div><strong>Service:<\/strong> ' +\r\n                    (quote.service_type || '\u2014') +\r\n                '<\/div>' +\r\n\r\n                '<div><strong>Created:<\/strong> ' +\r\n                    createdDate +\r\n                '<\/div>' +\r\n\r\n                '<div><strong>Valid Through:<\/strong> ' +\r\n                    expirationDate +\r\n                '<\/div>' +\r\n\r\n                '<div><strong>Status:<\/strong> ' +\r\n                    (isExpired ? 'Expired' : 'Active') +\r\n                '<\/div>' +\r\n\r\n                '<h3>Freight<\/h3>' +\r\n                freightHtml +\r\n\r\n                '<h3>Services<\/h3>' +\r\n                '<div>' + accessorialHtml + '<\/div>' +\r\n\r\n            '<\/div>';\r\n\r\n        if (!isExpired && !quote.shipment_id) {\r\n\r\n            quoteHtml +=\r\n                '<button type=\"button\" ' +\r\n                    'id=\"flf-book-saved-quote\" ' +\r\n                    'data-quote-id=\"' + quote.id + '\">' +\r\n                    'Book This Quote' +\r\n                '<\/button>';\r\n\r\n        } else if (isExpired) {\r\n\r\n            quoteHtml +=\r\n                '<p><strong>This quote has expired.<\/strong><\/p>';\r\n\r\n        }\r\n\r\n        otherScreen.innerHTML = quoteHtml;\r\n\r\n    } catch (error) {\r\n\r\n        console.error('FLF quote loading error:', error);\r\n\r\n        showOtherScreen(\r\n            'Quote Details',\r\n            'We could not load this quote. Please try again.'\r\n        );\r\n    }\r\n\r\n});\r\n\r\ndocument.addEventListener('click', async function(e) {\r\n\r\n    const shipmentButton = e.target.closest('.flf-view-shipment');\r\n\r\n    if (!shipmentButton) {\r\n        return;\r\n    }\r\n\r\n    e.preventDefault();\r\n\r\n    const shipmentId = shipmentButton.dataset.shipmentId;\r\n\r\n    showOtherScreen(\r\n        'Shipment Details',\r\n        'Loading shipment...'\r\n    );\r\n\r\n    try {\r\n\r\n        const formData = new FormData();\r\n        formData.append('action', 'flf_get_shipment');\r\n        formData.append('nonce', window.flfPortalBackend.shipmentNonce);\r\n        formData.append('shipment_id', shipmentId);\r\n\r\n        const response = await fetch(\r\n            window.flfPortalBackend.ajaxUrl,\r\n            {\r\n                method: 'POST',\r\n                body: formData\r\n            }\r\n        );\r\n\r\n        const data = await response.json();\r\n\r\n        if (!data.success) {\r\n            throw new Error(\r\n                data.data?.message || 'Shipment could not be loaded.'\r\n            );\r\n        }\r\n\r\n        const shipment = data.data.shipment;\r\n\r\n        console.log('FLF shipment detail:', shipment);\r\n\r\n        const freightItems = Array.isArray(shipment.freight_data)\r\n    ? shipment.freight_data\r\n    : [];\r\n\r\nconst accessorials = Array.isArray(shipment.accessorials)\r\n    ? shipment.accessorials\r\n    : [];\r\n\r\nconst status = shipment.status\r\n    ? shipment.status.charAt(0).toUpperCase() + shipment.status.slice(1)\r\n    : 'Pending';\r\n\r\nconst freightHtml = freightItems.length\r\n    ? freightItems.map(function(item, index) {\r\n\r\n        return `\r\n            <div style=\"\r\n                border:1px solid #e5e5e5;\r\n                border-radius:8px;\r\n                padding:14px;\r\n                margin-bottom:10px;\r\n            \">\r\n                <strong>Freight Item ${index + 1}<\/strong>\r\n\r\n                <div style=\"margin-top:8px;\">\r\n                    Packaging: ${item.packagingType || '\u2014'}\r\n                <\/div>\r\n\r\n                <div>\r\n                    Units: ${item.units || '\u2014'}\r\n                <\/div>\r\n\r\n                <div>\r\n                    Pieces: ${item.pieces || '\u2014'}\r\n                <\/div>\r\n\r\n                <div>\r\n                    Freight Class: ${item.freightClass || '\u2014'}\r\n                <\/div>\r\n\r\n                <div>\r\n                    Weight: ${item.totalWeight || '\u2014'} lbs\r\n                <\/div>\r\n\r\n                <div>\r\n                    Dimensions:\r\n                    ${item.length || '\u2014'} \u00d7\r\n                    ${item.width || '\u2014'} \u00d7\r\n                    ${item.height || '\u2014'} in\r\n                <\/div>\r\n            <\/div>\r\n        `;\r\n\r\n    }).join('')\r\n    : '<div>\u2014<\/div>';\r\n\r\n\r\nconst accessorialNames = {\r\n    LGPU: 'Pickup Liftgate',\r\n    RESPU: 'Pickup Residential',\r\n    LTDPU: 'Pickup Limited Access',\r\n    LGDEL: 'Delivery Liftgate',\r\n    APPT: 'Delivery Appointment',\r\n    RESDEL: 'Delivery Residential',\r\n    LTDDEL: 'Delivery Limited Access'\r\n};\r\n\r\nconst accessorialCodes = accessorials\r\n    .map(function(item) {\r\n        return typeof item === 'object' && item !== null\r\n            ? item.code\r\n            : item;\r\n    })\r\n    .filter(Boolean);\r\n\r\nconst uniqueAccessorialCodes = [...new Set(accessorialCodes)];\r\n\r\nconst accessorialHtml = uniqueAccessorialCodes.length\r\n    ? uniqueAccessorialCodes.map(function(code) {\r\n        return accessorialNames[code] || code;\r\n    }).join(', ')\r\n    : 'None';\r\n\r\n\r\nconst shipmentHtml = `\r\n\r\n    <div style=\"margin-bottom:20px;\">\r\n        <button\r\n            type=\"button\"\r\n            id=\"flf-back-to-shipments\"\r\n            style=\"\r\n                background:none;\r\n                border:none;\r\n                padding:0;\r\n                cursor:pointer;\r\n                text-decoration:underline;\r\n                font:inherit;\r\n            \"\r\n        >\r\n            \u2190 Back to Shipments\r\n        <\/button>\r\n    <\/div>\r\n\r\n\r\n    <div style=\"\r\n        display:grid;\r\n        grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));\r\n        gap:12px;\r\n        margin-bottom:25px;\r\n    \">\r\n\r\n        <div style=\"\r\n            border:1px solid #e5e5e5;\r\n            border-radius:8px;\r\n            padding:16px;\r\n        \">\r\n            <strong>Status<\/strong>\r\n            <div style=\"margin-top:6px;\">${status}<\/div>\r\n        <\/div>\r\n\r\n        <div style=\"\r\n            border:1px solid #e5e5e5;\r\n            border-radius:8px;\r\n            padding:16px;\r\n        \">\r\n            <strong>Route<\/strong>\r\n            <div style=\"margin-top:6px;\">\r\n                ${shipment.origin_zip} \u2192 ${shipment.destination_zip}\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div style=\"\r\n            border:1px solid #e5e5e5;\r\n            border-radius:8px;\r\n            padding:16px;\r\n        \">\r\n            <strong>Transit<\/strong>\r\n            <div style=\"margin-top:6px;\">\r\n                ${shipment.transit_time || '\u2014'}\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div style=\"\r\n            border:1px solid #e5e5e5;\r\n            border-radius:8px;\r\n            padding:16px;\r\n        \">\r\n            <strong>Estimated Delivery<\/strong>\r\n            <div style=\"margin-top:6px;\">\r\n                ${shipment.estimated_delivery || '\u2014'}\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <h3>Freight<\/h3>\r\n\r\n    <div style=\"margin-bottom:25px;\">\r\n        ${freightHtml}\r\n    <\/div>\r\n\r\n\r\n    <h3>Services<\/h3>\r\n\r\n    <div style=\"\r\n        border:1px solid #e5e5e5;\r\n        border-radius:8px;\r\n        padding:16px;\r\n        margin-bottom:25px;\r\n    \">\r\n        ${accessorialHtml}\r\n    <\/div>\r\n\r\n\r\n    <div style=\"\r\n        display:grid;\r\n        grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));\r\n        gap:20px;\r\n        margin-bottom:25px;\r\n    \">\r\n\r\n        <div>\r\n\r\n            <h3>Pickup<\/h3>\r\n\r\n            <div style=\"\r\n                border:1px solid #e5e5e5;\r\n                border-radius:8px;\r\n                padding:16px;\r\n                line-height:1.6;\r\n            \">\r\n\r\n                <strong>${shipment.pickup_company || '\u2014'}<\/strong><br>\r\n\r\n                ${shipment.pickup_address || '\u2014'}<br>\r\n\r\n                ${shipment.pickup_city || '\u2014'},\r\n                ${shipment.pickup_state || '\u2014'}\r\n                ${shipment.pickup_zip || ''}<br><br>\r\n\r\n                <strong>Contact:<\/strong>\r\n                ${shipment.pickup_contact || '\u2014'}<br>\r\n\r\n                <strong>Phone:<\/strong>\r\n                ${shipment.pickup_phone || '\u2014'}<br>\r\n\r\n                <strong>Email:<\/strong>\r\n                ${shipment.pickup_email || '\u2014'}\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div>\r\n\r\n            <h3>Delivery<\/h3>\r\n\r\n            <div style=\"\r\n                border:1px solid #e5e5e5;\r\n                border-radius:8px;\r\n                padding:16px;\r\n                line-height:1.6;\r\n            \">\r\n\r\n                <strong>${shipment.delivery_company || '\u2014'}<\/strong><br>\r\n\r\n                ${shipment.delivery_address || '\u2014'}<br>\r\n\r\n                ${shipment.delivery_city || '\u2014'},\r\n                ${shipment.delivery_state || '\u2014'}\r\n                ${shipment.delivery_zip || ''}<br><br>\r\n\r\n                <strong>Contact:<\/strong>\r\n                ${shipment.delivery_contact || '\u2014'}<br>\r\n\r\n                <strong>Phone:<\/strong>\r\n                ${shipment.delivery_phone || '\u2014'}<br>\r\n\r\n                <strong>Email:<\/strong>\r\n                ${shipment.delivery_email || '\u2014'}\r\n\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <h3>Shipment Information<\/h3>\r\n\r\n    <div style=\"\r\n        border:1px solid #e5e5e5;\r\n        border-radius:8px;\r\n        padding:16px;\r\n        line-height:1.7;\r\n    \">\r\n\r\n        <strong>Shipment Number:<\/strong>\r\n        ${shipment.shipment_number}<br>\r\n\r\n        <strong>Service:<\/strong>\r\n        ${shipment.service_type || 'Finish Line Freight'}<br>\r\n\r\n        <strong>Created:<\/strong>\r\n        ${shipment.created_at || '\u2014'}\r\n\r\n    <\/div>\r\n`;\r\n\r\nshowOtherScreen(\r\n    shipment.shipment_number,\r\n    shipmentHtml\r\n);\r\n         \r\n\r\n    } catch (error) {\r\n\r\n        console.error('FLF shipment detail error:', error);\r\n\r\n        showOtherScreen(\r\n            'Shipment Details',\r\n            'We could not load this shipment. Please try again.'\r\n        );\r\n\r\n    }\r\n\r\n});\r\ndocument.addEventListener('click', function(e) {\r\n\r\n    const backButton = e.target.closest('#flf-back-to-shipments');\r\n\r\n    if (!backButton) {\r\n        return;\r\n    }\r\n\r\n    e.preventDefault();\r\n\r\n    document.getElementById('flf-shipments')?.click();\r\n\r\n});\r\n    document.getElementById('flf-claims')\r\n        ?.addEventListener('click', function(e) {\r\n\r\n            e.preventDefault();\r\n\r\n            showOtherScreen(\r\n                'Claims',\r\n                'View or submit a freight claim.'\r\n            );\r\n\r\n        });\r\n\r\n\r\n    document.getElementById('flf-billing')\r\n        ?.addEventListener('click', function(e) {\r\n\r\n            e.preventDefault();\r\n\r\n            showOtherScreen(\r\n                'Billing',\r\n                'View invoices, balances and payment information.'\r\n            );\r\n\r\n        });\r\n \r\n \/\/ ===== PORTAL SAVE QUOTE =====\r\n\r\ndocument.getElementById('flf-portal-rate-result')\r\n  ?.addEventListener('click', function(e) {\r\n\r\n    const saveButton = e.target.closest('#flf-portal-save-quote');\r\n\r\n    if (!saveButton) return;\r\n\r\n    const quote = window.flfPortalCurrentQuote;\r\n\r\n    if (!quote) {\r\n      alert('Please get a live rate before saving.');\r\n      return;\r\n    }\r\n\r\n    if (\r\n      !window.flfPortalBackend ||\r\n      !window.flfPortalBackend.ajaxUrl ||\r\n      !window.flfPortalBackend.shipmentNonce\r\n    ) {\r\n      alert('Unable to save this quote. Please refresh the page and try again.');\r\n      return;\r\n    }\r\n\r\n    saveButton.disabled = true;\r\n    saveButton.textContent = 'Saving...';\r\n\r\n    const formData = new FormData();\r\n\r\n    formData.append('action', 'flf_save_quote');\r\n    formData.append('nonce', window.flfPortalBackend.shipmentNonce);\r\n    formData.append('quote', JSON.stringify(quote));\r\n\r\n    fetch(window.flfPortalBackend.ajaxUrl, {\r\n      method: 'POST',\r\n      body: formData\r\n    })\r\n    .then(function(response) {\r\n      return response.json();\r\n    })\r\n    .then(function(response) {\r\n\r\n      if (!response.success) {\r\n        throw new Error(\r\n          response.data && response.data.message\r\n            ? response.data.message\r\n            : 'The quote could not be saved.'\r\n        );\r\n      }\r\n\r\n      saveButton.textContent =\r\n        'Saved \u2014 ' + response.data.quote_number;\r\n\r\n      alert(\r\n        'Quote ' +\r\n        response.data.quote_number +\r\n        ' has been saved and is valid for 5 days.'\r\n      );\r\n    })\r\n    .catch(function(error) {\r\n\r\n      console.error('FLF save quote error:', error);\r\n\r\n      saveButton.disabled = false;\r\n      saveButton.textContent = 'Save Quote';\r\n\r\n      alert(\r\n        error.message ||\r\n        'The quote could not be saved.'\r\n      );\r\n    });\r\n\r\n  });\r\n        \r\n            \/\/ ===== PORTAL BOOK SHIPMENT - STEP 2 =====\r\n\r\ndocument.addEventListener('flfOpenBookingForm', function() {\r\n\r\n           \r\n\r\n            const quote = window.flfPortalCurrentQuote;\r\n\r\n            if (!quote) {\r\n                alert('Please get a live rate before booking.');\r\n                return;\r\n            }\r\n\r\n\r\n            \/\/ Hide quote screen without destroying it\r\n            quoteScreen.style.display = 'none';\r\n\r\n            \/\/ Use the existing secondary portal screen\r\n            otherScreen.style.display = '';\r\n\r\n\r\n            otherScreen.innerHTML =\r\n\r\n                '<div id=\"flf-portal-booking\">' +\r\n\r\n                    '<button type=\"button\" id=\"flf-portal-back-to-quote\">' +\r\n                        '\u2190 Back to Quote' +\r\n                    '<\/button>' +\r\n\r\n                    '<h2>Book This Shipment<\/h2>' +\r\n\r\n                    '<div class=\"flf-portal-booking-summary\">' +\r\n                        '<strong>Finish Line Freight<\/strong><br>' +\r\n                        quote.originZip + ' \u2192 ' +\r\n                        quote.destinationZip + '<br>' +\r\n                        quote.transitTime + '<br>' +\r\n                        '<strong>' + quote.quotedRate + '<\/strong>' +\r\n                    '<\/div>' +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Pickup Information' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Company \/ Location Name<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-pu-company\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Street Address<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-pu-address\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-item-row\">' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>City<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-pu-city\">' +\r\n                        '<\/div>' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>State<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-pu-state\" maxlength=\"2\">' +\r\n                        '<\/div>' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>ZIP Code<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-pu-zip\" ' +\r\n                                'value=\"' + quote.originZip + '\" readonly>' +\r\n                        '<\/div>' +\r\n\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Contact Name<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-pu-contact\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Phone<\/label>' +\r\n                        '<input type=\"tel\" id=\"flf-book-pu-phone\" ' +\r\n                            'inputmode=\"numeric\" maxlength=\"14\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Email<\/label>' +\r\n                        '<input type=\"email\" id=\"flf-book-pu-email\">' +\r\n                    '<\/div>' +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Delivery Information' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Company \/ Location Name<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-del-company\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Street Address<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-del-address\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-item-row\">' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>City<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-del-city\">' +\r\n                        '<\/div>' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>State<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-del-state\" maxlength=\"2\">' +\r\n                        '<\/div>' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>ZIP Code<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-del-zip\" ' +\r\n                                'value=\"' + quote.destinationZip + '\" readonly>' +\r\n                        '<\/div>' +\r\n\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Contact Name<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-del-contact\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Phone<\/label>' +\r\n                        '<input type=\"tel\" id=\"flf-book-del-phone\" ' +\r\n                            'inputmode=\"numeric\" maxlength=\"14\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Email<\/label>' +\r\n                        '<input type=\"email\" id=\"flf-book-del-email\">' +\r\n                    '<\/div>' +\r\n\r\n\r\n                    '<button type=\"button\" id=\"flf-portal-continue-booking\">' +\r\n                        'Continue' +\r\n                    '<\/button>' +\r\n\r\n                '<\/div>';\r\n\r\n        });\r\n\r\n\r\n    \/\/ Back to the original quote without losing anything\r\n    document.getElementById('flf-portal-other-screen')\r\n        ?.addEventListener('click', function(e) {\r\n\r\n            if (!e.target.closest('#flf-portal-back-to-quote')) {\r\n                return;\r\n            }\r\n\r\n            otherScreen.style.display = 'none';\r\n            quoteScreen.style.display = '';\r\n\r\n        });\r\n        \r\n    \/\/ ===== PORTAL BOOKING - VALIDATE STEP 2 =====\r\n\r\n    document.getElementById('flf-portal-other-screen')\r\n        ?.addEventListener('click', function(e) {\r\n\r\n            const continueButton =\r\n                e.target.closest('#flf-portal-continue-booking');\r\n\r\n            if (!continueButton) return;\r\n\r\n\r\n            function getValue(id) {\r\n                return document.getElementById(id)?.value.trim() || '';\r\n            }\r\n\r\n\r\n            const booking = {\r\n\r\n                pickup: {\r\n                    company: getValue('flf-book-pu-company'),\r\n                    address: getValue('flf-book-pu-address'),\r\n                    city: getValue('flf-book-pu-city'),\r\n                    state: getValue('flf-book-pu-state').toUpperCase(),\r\n                    zip: getValue('flf-book-pu-zip'),\r\n                    contact: getValue('flf-book-pu-contact'),\r\n                    phone: getValue('flf-book-pu-phone'),\r\n                    email: getValue('flf-book-pu-email')\r\n                },\r\n\r\n                delivery: {\r\n                    company: getValue('flf-book-del-company'),\r\n                    address: getValue('flf-book-del-address'),\r\n                    city: getValue('flf-book-del-city'),\r\n                    state: getValue('flf-book-del-state').toUpperCase(),\r\n                    zip: getValue('flf-book-del-zip'),\r\n                    contact: getValue('flf-book-del-contact'),\r\n                    phone: getValue('flf-book-del-phone'),\r\n                    email: getValue('flf-book-del-email')\r\n                }\r\n\r\n            };\r\n\r\n\r\n            const requiredFields = [\r\n                booking.pickup.company,\r\n                booking.pickup.address,\r\n                booking.pickup.city,\r\n                booking.pickup.state,\r\n                booking.pickup.contact,\r\n                booking.pickup.phone,\r\n                booking.pickup.email,\r\n\r\n                booking.delivery.company,\r\n                booking.delivery.address,\r\n                booking.delivery.city,\r\n                booking.delivery.state,\r\n                booking.delivery.contact,\r\n                booking.delivery.phone,\r\n                booking.delivery.email\r\n            ];\r\n\r\n\r\n            if (requiredFields.some(function(value) {\r\n                return !value;\r\n            })) {\r\n\r\n                alert('Please complete all pickup and delivery fields.');\r\n                return;\r\n            }\r\n\r\n\r\n            const statePattern = \/^[A-Za-z]{2}$\/;\r\n\r\n            if (\r\n                !statePattern.test(booking.pickup.state) ||\r\n                !statePattern.test(booking.delivery.state)\r\n            ) {\r\n\r\n                alert('Please enter a valid 2-letter state abbreviation.');\r\n                return;\r\n            }\r\n\r\n\r\n            const pickupPhoneDigits =\r\n                booking.pickup.phone.replace(\/\\D\/g, '');\r\n\r\n            const deliveryPhoneDigits =\r\n                booking.delivery.phone.replace(\/\\D\/g, '');\r\n\r\n\r\n            if (\r\n                pickupPhoneDigits.length !== 10 ||\r\n                deliveryPhoneDigits.length !== 10\r\n            ) {\r\n\r\n                alert(\r\n                    'Pickup and delivery phone numbers must contain exactly 10 digits.'\r\n                );\r\n\r\n                return;\r\n            }\r\n\r\n\r\n            const emailPattern =\r\n                \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n\r\n\r\n            if (\r\n                !emailPattern.test(booking.pickup.email) ||\r\n                !emailPattern.test(booking.delivery.email)\r\n            ) {\r\n\r\n                alert(\r\n                    'Please enter a valid pickup and delivery email address.'\r\n                );\r\n\r\n                return;\r\n            }\r\n\r\n\r\n            booking.pickup.phone = pickupPhoneDigits;\r\n            booking.delivery.phone = deliveryPhoneDigits;\r\n\r\n            window.flfPortalBooking = booking;\r\n\r\n\r\n                       \/\/ Build freight summary\r\n            let freightSummary = '';\r\n\r\n            window.flfPortalCurrentQuote.items.forEach(function(item, index) {\r\n\r\n                freightSummary +=\r\n                    '<div>' +\r\n                        '<strong>Line Item #' + (index + 1) + '<\/strong><br>' +\r\n                        item.units + ' ' + item.packagingType +\r\n                        ' | ' + item.pieces + ' Pieces' +\r\n                        ' | Class ' + item.freightClass + '<br>' +\r\n                        item.totalWeight + ' lbs' +\r\n                        ' | ' +\r\n                        item.length + ' \u00d7 ' +\r\n                        item.width + ' \u00d7 ' +\r\n                        item.height + ' in' +\r\n                    '<\/div><br>';\r\n\r\n            });\r\n\r\n\r\n            \/\/ Build services summary\r\n            let servicesSummary = '';\r\n\r\n            window.flfPortalCurrentQuote.accessorials.forEach(function(service) {\r\n\r\n                const serviceNames = {\r\n                    LGPU: 'Pickup Liftgate',\r\n                    RESPU: 'Pickup Residential',\r\n                    LTDPU: 'Pickup Limited Access',\r\n                    LGDEL: 'Delivery Liftgate',\r\n                    RESDEL: 'Delivery Residential',\r\n                    LTDDEL: 'Delivery Limited Access',\r\n                    APPT: 'delivery Appointment'\r\n                };\r\n\r\n                servicesSummary +=\r\n                    '<div>' +\r\n                        (serviceNames[service.code] || service.code) +\r\n                    '<\/div>';\r\n\r\n            });\r\n\r\n\r\n            if (!servicesSummary) {\r\n                servicesSummary = '<div>None<\/div>';\r\n            }\r\n\r\n\r\n            otherScreen.innerHTML =\r\n\r\n                '<div id=\"flf-portal-finalize\">' +\r\n                    '<button type=\"button\" id=\"flf-portal-finalize-shipment\">' +\r\n    'Finalize Shipment' +\r\n'<\/button>' +\r\n                    '<button type=\"button\" id=\"flf-portal-back-to-booking\">' +\r\n                        '\u2190 Back to Shipment Details' +\r\n                    '<\/button>' +\r\n\r\n                    '<h2>Review &amp; Finalize<\/h2>' +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Shipment' +\r\n                    '<\/div>' +\r\n\r\n                    '<div>' +\r\n                        '<strong>' +\r\n                            window.flfPortalCurrentQuote.originZip +\r\n                            ' \u2192 ' +\r\n                            window.flfPortalCurrentQuote.destinationZip +\r\n                        '<\/strong><br>' +\r\n\r\n                        'Transit: ' +\r\n                        window.flfPortalCurrentQuote.transitTime +\r\n                        '<br>' +\r\n\r\n                        'Estimated Delivery: ' +\r\n                        window.flfPortalCurrentQuote.estimatedDelivery +\r\n                        '<br>' +\r\n\r\n                        'Service: ' +\r\n                        window.flfPortalCurrentQuote.serviceType +\r\n                    '<\/div>' +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Freight Details' +\r\n                    '<\/div>' +\r\n\r\n                    freightSummary +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Services' +\r\n                    '<\/div>' +\r\n\r\n                    servicesSummary +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Pickup' +\r\n                    '<\/div>' +\r\n\r\n                    '<div>' +\r\n                        '<strong>' + booking.pickup.company + '<\/strong><br>' +\r\n                        booking.pickup.address + '<br>' +\r\n                        booking.pickup.city + ', ' +\r\n                        booking.pickup.state + ' ' +\r\n                        booking.pickup.zip + '<br>' +\r\n                        booking.pickup.contact + '<br>' +\r\n                        booking.pickup.phone + '<br>' +\r\n                        booking.pickup.email +\r\n                    '<\/div>' +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Delivery' +\r\n                    '<\/div>' +\r\n\r\n                    '<div>' +\r\n                        '<strong>' + booking.delivery.company + '<\/strong><br>' +\r\n                        booking.delivery.address + '<br>' +\r\n                        booking.delivery.city + ', ' +\r\n                        booking.delivery.state + ' ' +\r\n                        booking.delivery.zip + '<br>' +\r\n                        booking.delivery.contact + '<br>' +\r\n                        booking.delivery.phone + '<br>' +\r\n                        booking.delivery.email +\r\n                    '<\/div>' +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Total' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-review-total\">' +\r\n                        '<strong>' +\r\n                            window.flfPortalCurrentQuote.quotedRate +\r\n                        '<\/strong>' +\r\n                    '<\/div>' +\r\n\r\n                '<\/div>';\r\n\r\n        });\r\n        \r\n            \/\/ ===== PORTAL BACK TO SHIPMENT DETAILS =====\r\n\r\n    document.getElementById('flf-portal-other-screen')\r\n        ?.addEventListener('click', function(e) {\r\n\r\n            const backButton =\r\n                e.target.closest('#flf-portal-back-to-booking');\r\n\r\n            if (!backButton) return;\r\n\r\n            const quote = window.flfPortalCurrentQuote;\r\n            const booking = window.flfPortalBooking;\r\n\r\n            if (!quote || !booking) return;\r\n\r\n\r\n            otherScreen.innerHTML =\r\n\r\n                '<div id=\"flf-portal-booking\">' +\r\n\r\n                    '<button type=\"button\" id=\"flf-portal-back-to-quote\">' +\r\n                        '\u2190 Back to Quote' +\r\n                    '<\/button>' +\r\n\r\n                    '<h2>Book This Shipment<\/h2>' +\r\n\r\n                    '<div class=\"flf-portal-booking-summary\">' +\r\n                        '<strong>Finish Line Freight<\/strong><br>' +\r\n                        quote.originZip + ' \u2192 ' +\r\n                        quote.destinationZip + '<br>' +\r\n                        quote.transitTime + '<br>' +\r\n                        '<strong>' + quote.quotedRate + '<\/strong>' +\r\n                    '<\/div>' +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Pickup Information' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Company \/ Location Name<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-pu-company\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Street Address<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-pu-address\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-item-row\">' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>City<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-pu-city\">' +\r\n                        '<\/div>' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>State<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-pu-state\" maxlength=\"2\">' +\r\n                        '<\/div>' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>ZIP Code<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-pu-zip\" readonly>' +\r\n                        '<\/div>' +\r\n\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Contact Name<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-pu-contact\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Phone<\/label>' +\r\n                        '<input type=\"tel\" id=\"flf-book-pu-phone\" inputmode=\"numeric\" maxlength=\"14\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Email<\/label>' +\r\n                        '<input type=\"email\" id=\"flf-book-pu-email\">' +\r\n                    '<\/div>' +\r\n\r\n\r\n                    '<div class=\"flf-portal-section-title\">' +\r\n                        'Delivery Information' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Company \/ Location Name<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-del-company\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Street Address<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-del-address\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-item-row\">' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>City<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-del-city\">' +\r\n                        '<\/div>' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>State<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-del-state\" maxlength=\"2\">' +\r\n                        '<\/div>' +\r\n\r\n                        '<div class=\"flf-portal-field\">' +\r\n                            '<label>ZIP Code<\/label>' +\r\n                            '<input type=\"text\" id=\"flf-book-del-zip\" readonly>' +\r\n                        '<\/div>' +\r\n\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Contact Name<\/label>' +\r\n                        '<input type=\"text\" id=\"flf-book-del-contact\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Phone<\/label>' +\r\n                        '<input type=\"tel\" id=\"flf-book-del-phone\" inputmode=\"numeric\" maxlength=\"14\">' +\r\n                    '<\/div>' +\r\n\r\n                    '<div class=\"flf-portal-field\">' +\r\n                        '<label>Email<\/label>' +\r\n                        '<input type=\"email\" id=\"flf-book-del-email\">' +\r\n                    '<\/div>' +\r\n\r\n\r\n                    '<button type=\"button\" id=\"flf-portal-continue-booking\">' +\r\n                        'Continue' +\r\n                    '<\/button>' +\r\n\r\n                '<\/div>';\r\n\r\n\r\n            \/\/ Restore pickup information\r\n            document.getElementById('flf-book-pu-company').value =\r\n                booking.pickup.company;\r\n\r\n            document.getElementById('flf-book-pu-address').value =\r\n                booking.pickup.address;\r\n\r\n            document.getElementById('flf-book-pu-city').value =\r\n                booking.pickup.city;\r\n\r\n            document.getElementById('flf-book-pu-state').value =\r\n                booking.pickup.state;\r\n\r\n            document.getElementById('flf-book-pu-zip').value =\r\n                booking.pickup.zip;\r\n\r\n            document.getElementById('flf-book-pu-contact').value =\r\n                booking.pickup.contact;\r\n\r\n            document.getElementById('flf-book-pu-phone').value =\r\n                booking.pickup.phone;\r\n\r\n            document.getElementById('flf-book-pu-email').value =\r\n                booking.pickup.email;\r\n\r\n\r\n            \/\/ Restore delivery information\r\n            document.getElementById('flf-book-del-company').value =\r\n                booking.delivery.company;\r\n\r\n            document.getElementById('flf-book-del-address').value =\r\n                booking.delivery.address;\r\n\r\n            document.getElementById('flf-book-del-city').value =\r\n                booking.delivery.city;\r\n\r\n            document.getElementById('flf-book-del-state').value =\r\n                booking.delivery.state;\r\n\r\n            document.getElementById('flf-book-del-zip').value =\r\n                booking.delivery.zip;\r\n\r\n            document.getElementById('flf-book-del-contact').value =\r\n                booking.delivery.contact;\r\n\r\n            document.getElementById('flf-book-del-phone').value =\r\n                booking.delivery.phone;\r\n\r\n            document.getElementById('flf-book-del-email').value =\r\n                booking.delivery.email;\r\n\r\n        });\r\n            \/\/ ===== PORTAL FINALIZE SHIPMENT =====\r\n\r\n    document.getElementById('flf-portal-other-screen')\r\n        ?.addEventListener('click', async function(e) {\r\n\r\n            const finalizeButton =\r\n                e.target.closest('#flf-portal-finalize-shipment');\r\n\r\n            if (!finalizeButton) return;\r\n\r\n            const quote = window.flfPortalCurrentQuote;\r\n            const booking = window.flfPortalBooking;\r\n\r\n            if (!quote || !booking) {\r\n                alert('Shipment information is missing. Please return to the quote and try again.');\r\n                return;\r\n            }\r\n\r\n            if (\r\n                !window.flfPortalBackend ||\r\n                !window.flfPortalBackend.ajaxUrl ||\r\n                !window.flfPortalBackend.shipmentNonce\r\n            ) {\r\n                alert('The shipment system is unavailable. Please refresh the page and try again.');\r\n                return;\r\n            }\r\n\r\n            finalizeButton.disabled = true;\r\n            finalizeButton.textContent = 'Creating Shipment...';\r\n\r\n            const formData = new FormData();\r\n\r\n            formData.append('action', 'flf_create_shipment');\r\n            formData.append(\r\n                'nonce',\r\n                window.flfPortalBackend.shipmentNonce\r\n            );\r\n            formData.append('quote', JSON.stringify(quote));\r\n            formData.append('booking', JSON.stringify(booking));\r\n            if (window.flfPortalBookingQuoteId) {\r\n    formData.append(\r\n        'saved_quote_id',\r\n        window.flfPortalBookingQuoteId\r\n    );\r\n}\r\n            try {\r\n\r\n                const response = await fetch(\r\n                    window.flfPortalBackend.ajaxUrl,\r\n                    {\r\n                        method: 'POST',\r\n                        body: formData,\r\n                        credentials: 'same-origin'\r\n                    }\r\n                );\r\n\r\n                const data = await response.json();\r\n\r\n                if (!response.ok || !data.success) {\r\n                    throw new Error(\r\n                        data?.data?.message ||\r\n                        'The shipment could not be created.'\r\n                    );\r\n                }\r\n\r\n                const shipmentNumber =\r\n                    data.data.shipment_number;\r\n\r\n                window.flfPortalShipmentNumber =\r\n                    shipmentNumber;\r\n\r\n                otherScreen.innerHTML =\r\n                    '<div class=\"flf-portal-confirmation\">' +\r\n\r\n                        '<h2>Shipment Created<\/h2>' +\r\n\r\n                        '<p>Your shipment has been successfully created.<\/p>' +\r\n\r\n                        '<div class=\"flf-portal-booking-summary\">' +\r\n\r\n                            '<strong>Finish Line Freight<\/strong><br>' +\r\n\r\n                            'Shipment #' +\r\n                            shipmentNumber +\r\n                            '<br><br>' +\r\n\r\n                            quote.originZip +\r\n                            ' \u2192 ' +\r\n                            quote.destinationZip +\r\n\r\n                        '<\/div>' +\r\n\r\n                        '<p>' +\r\n                            'We have received your shipment information.' +\r\n                        '<\/p>' +\r\n\r\n                    '<\/div>';\r\n\r\n            } catch (error) {\r\n\r\n                console.error(error);\r\n\r\n                alert(\r\n                    error.message ||\r\n                    'The shipment could not be created.'\r\n                );\r\n\r\n                finalizeButton.disabled = false;\r\n                finalizeButton.textContent =\r\n                    'Finalize Shipment';\r\n            }\r\n\r\n        });\r\n});\r\n<\/script>\r\n\r\n<style>\r\n\/* =========================================================\r\n   FINISH LINE FREIGHT \u2014 CUSTOMER DASHBOARD\r\n   ========================================================= *\/\r\n\r\n#flf-portal-dashboard {\r\n    position: relative;\r\n    isolation: isolate;\r\n    width: 100%;\r\n    min-height: 760px;\r\n    padding: 24px 46px 36px;\r\n    box-sizing: border-box;\r\n    overflow: hidden;\r\n    color: #17191d;\r\n    font-family: inherit;\r\n\r\n    background:\r\n        radial-gradient(\r\n            circle at 85% 8%,\r\n            rgba(255,255,255,.95) 0%,\r\n            rgba(255,255,255,.55) 22%,\r\n            transparent 48%\r\n        ),\r\n        linear-gradient(\r\n            135deg,\r\n            #f5f6f7 0%,\r\n            #eceff1 48%,\r\n            #f8f8f8 100%\r\n        );\r\n}\r\n\r\n\r\n\/* ---------- HEADER ---------- *\/\r\n\r\n.flf-dashboard-header {\r\n    position: relative;\r\n    z-index: 5;\r\n\r\n    display: grid;\r\ngrid-template-columns: 1fr minmax(360px, 520px) 1fr;\r\nalign-items: center;\r\ngap: 24px;\r\n\r\n    margin-bottom: 14px;\r\n}\r\n\r\n.flf-dashboard-eyebrow {\r\n    margin-bottom: 8px;\r\n\r\n    font-size: 11px;\r\n    font-weight: 800;\r\n    letter-spacing: 2.3px;\r\n\r\n    color: #d80000;\r\n}\r\n\r\n.flf-dashboard-welcome h1 {\r\n    margin: 0;\r\n\r\n    font-size: clamp(24px, 2vw, 32px);\r\n    line-height: 1.05;\r\n    font-weight: 750;\r\n    letter-spacing: -1.5px;\r\n\r\n    color: #17191d;\r\n}\r\n\r\n.flf-dashboard-welcome h1 span {\r\n    color: #d80000;\r\n}\r\n\r\n.flf-dashboard-welcome p {\r\n    margin: 9px 0 0;\r\n\r\n    font-size: 14px;\r\n    color: #777b82;\r\n}\r\n\r\n\/* ---------- DASHBOARD SEARCH ---------- *\/\r\n\r\n.flf-dashboard-search {\r\n    flex: 1;\r\n    max-width: 420px;\r\n    position: relative;\r\n    width: 100%;\r\njustify-self: center;\r\n}\r\n\r\n.flf-dashboard-search-icon {\r\n    position: absolute;\r\n    left: 15px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    z-index: 2;\r\n\r\n    font-size: 17px;\r\n    color: #777b82;\r\n    pointer-events: none;\r\n}\r\n\r\n#flf-dashboard-search {\r\n    width: 100%;\r\n    height: 46px;\r\n    box-sizing: border-box;\r\n\r\n    padding: 0 18px 0 42px;\r\n\r\n    border: 1px solid rgba(20,20,20,.10);\r\n    border-radius: 9px;\r\n\r\n    background: rgba(255,255,255,.66);\r\n\r\n    backdrop-filter: blur(16px);\r\n    -webkit-backdrop-filter: blur(16px);\r\n\r\n    box-shadow:\r\n        0 8px 24px rgba(0,0,0,.05),\r\n        inset 0 1px 0 rgba(255,255,255,.85);\r\n\r\n    font-size: 13px;\r\n    color: #292c31;\r\n    outline: none;\r\n}\r\n\r\n#flf-dashboard-search::placeholder {\r\n    color: #8b8f95;\r\n}\r\n\/* ---------- TIMEFRAME ---------- *\/\r\n\r\n.flf-dashboard-period {\r\n    padding-top: 0px;\r\n    justify-self: end;\r\n}\r\n\r\n#flf-dashboard-timeframe {\r\n    min-width: 148px;\r\n\r\n    padding: 11px 36px 11px 16px;\r\n\r\n    border: 1px solid rgba(20,20,20,.10);\r\n    border-radius: 9px;\r\n\r\n    background: rgba(255,255,255,.66);\r\n    backdrop-filter: blur(16px);\r\n    -webkit-backdrop-filter: blur(16px);\r\n\r\n    box-shadow:\r\n        0 8px 24px rgba(0,0,0,.05),\r\n        inset 0 1px 0 rgba(255,255,255,.85);\r\n\r\n    color: #292c31;\r\n\r\n    font-size: 13px;\r\n    font-weight: 650;\r\n\r\n    cursor: pointer;\r\n    outline: none;\r\n}\r\n\r\n\r\n\/* ---------- KPI GLASS STRIP ---------- *\/\r\n\r\n.flf-dashboard-kpis {\r\n    position: relative;\r\n    z-index: 5;\r\n\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n\r\n    margin-bottom: 22px;\r\n\r\n    border: 1px solid rgba(225, 244, 252, .72);\r\nborder-radius: 15px;\r\n\r\nbackground: rgba(220, 239, 247, .30);\r\n\r\nbackdrop-filter: blur(22px) saturate(125%);\r\n-webkit-backdrop-filter: blur(22px) saturate(125%);\r\n\r\nbox-shadow:\r\n    0 12px 38px rgba(0, 12, 24, .18),\r\n    inset 0 1px 0 rgba(255, 255, 255, .90),\r\n    inset 0 -1px 0 rgba(165, 211, 230, .22);\r\n\r\n    overflow: hidden;\r\n}\r\n\r\n.flf-dashboard-kpi {\r\n    position: relative;\r\n\r\n    min-height: 82px;\r\n    padding: 4px 28px;\r\n\r\n    box-sizing: border-box;\r\n}\r\n\r\n.flf-dashboard-kpi:not(:last-child)::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    right: 0;\r\n    top: 22px;\r\n    bottom: 22px;\r\n\r\n    width: 1px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            transparent,\r\n            rgba(20,20,20,.10),\r\n            transparent\r\n        );\r\n}\r\n\r\n.flf-dashboard-kpi-label {\r\n    margin-bottom: 8px;\r\n\r\n    font-size: 10px;\r\n    font-weight: 800;\r\n    letter-spacing: 1.5px;\r\n\r\n    color: #858990;\r\n}\r\n\r\n.flf-dashboard-kpi-value {\r\n    font-size: clamp(26px, 2.5vw, 38px);\r\n    line-height: 1;\r\n    font-weight: 760;\r\n    letter-spacing: -1px;\r\n\r\n    color: #202328;\r\n}\r\n\r\n.flf-dashboard-kpi-value span {\r\n    font-size: .52em;\r\n    font-weight: 650;\r\n    letter-spacing: 0;\r\n\r\n    color: #777c83;\r\n}\r\n\r\n.flf-dashboard-kpi-trend {\r\n    margin-top: 10px;\r\n\r\n    font-size: 11px;\r\n    font-weight: 750;\r\n\r\n    color: #d80000;\r\n}\r\n\r\n.flf-dashboard-kpi-trend span {\r\n    margin-left: 3px;\r\n\r\n    font-weight: 500;\r\n    color: #8b8f95;\r\n}\r\n\r\n\r\n\/* ---------- MAP ---------- *\/\r\n\r\n#flf-global-map::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    z-index: -1;\r\n    pointer-events: none;\r\n\r\n    background:\r\n    \/* brighter anchor stars *\/\r\n    radial-gradient(circle at 7% 18%, rgba(255,255,255,1) 0 1.25px, transparent 1.8px),\r\n    radial-gradient(circle at 21% 8%, rgba(235,248,255,.95) 0 1.15px, transparent 1.7px),\r\n    radial-gradient(circle at 36% 29%, rgba(255,255,255,.90) 0 1.1px, transparent 1.65px),\r\n    radial-gradient(circle at 53% 7%, rgba(235,248,255,.95) 0 1.2px, transparent 1.75px),\r\n    radial-gradient(circle at 72% 18%, rgba(255,255,255,.95) 0 1.15px, transparent 1.7px),\r\n    radial-gradient(circle at 91% 11%, rgba(240,250,255,1) 0 1.3px, transparent 1.85px),\r\n    radial-gradient(circle at 96% 54%, rgba(255,255,255,.90) 0 1.1px, transparent 1.65px),\r\n    radial-gradient(circle at 86% 78%, rgba(235,248,255,.90) 0 1.15px, transparent 1.7px),\r\n\r\n    \/* medium stars *\/\r\n    radial-gradient(circle at 4% 43%, rgba(255,255,255,.75) 0 .8px, transparent 1.3px),\r\n    radial-gradient(circle at 11% 67%, rgba(220,242,252,.72) 0 .75px, transparent 1.25px),\r\n    radial-gradient(circle at 16% 31%, rgba(255,255,255,.72) 0 .8px, transparent 1.3px),\r\n    radial-gradient(circle at 24% 57%, rgba(230,246,255,.68) 0 .7px, transparent 1.2px),\r\n    radial-gradient(circle at 30% 14%, rgba(255,255,255,.75) 0 .8px, transparent 1.3px),\r\n    radial-gradient(circle at 41% 9%, rgba(225,244,255,.68) 0 .7px, transparent 1.2px),\r\n    radial-gradient(circle at 47% 38%, rgba(255,255,255,.72) 0 .75px, transparent 1.25px),\r\n    radial-gradient(circle at 58% 22%, rgba(230,247,255,.70) 0 .8px, transparent 1.3px),\r\n    radial-gradient(circle at 64% 61%, rgba(255,255,255,.68) 0 .7px, transparent 1.2px),\r\n    radial-gradient(circle at 69% 9%, rgba(225,244,255,.75) 0 .8px, transparent 1.3px),\r\n    radial-gradient(circle at 78% 36%, rgba(255,255,255,.72) 0 .75px, transparent 1.25px),\r\n    radial-gradient(circle at 83% 57%, rgba(230,247,255,.68) 0 .7px, transparent 1.2px),\r\n    radial-gradient(circle at 89% 29%, rgba(255,255,255,.75) 0 .8px, transparent 1.3px),\r\n    radial-gradient(circle at 94% 72%, rgba(225,244,255,.70) 0 .75px, transparent 1.25px),\r\n\r\n    \/* distant faint stars *\/\r\n    radial-gradient(circle at 2% 26%, rgba(255,255,255,.40) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 6% 81%, rgba(220,242,252,.38) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 9% 52%, rgba(255,255,255,.34) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 13% 12%, rgba(255,255,255,.42) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 18% 74%, rgba(220,242,252,.36) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 22% 39%, rgba(255,255,255,.38) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 27% 88%, rgba(255,255,255,.32) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 32% 48%, rgba(225,245,255,.40) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 35% 76%, rgba(255,255,255,.34) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 39% 18%, rgba(255,255,255,.38) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 44% 63%, rgba(220,242,252,.35) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 49% 16%, rgba(255,255,255,.40) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 52% 82%, rgba(255,255,255,.32) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 56% 46%, rgba(225,245,255,.38) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 61% 12%, rgba(255,255,255,.36) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 65% 79%, rgba(220,242,252,.40) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 68% 43%, rgba(255,255,255,.34) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 73% 69%, rgba(255,255,255,.38) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 76% 6%, rgba(225,245,255,.35) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 80% 84%, rgba(255,255,255,.40) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 84% 17%, rgba(255,255,255,.34) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 88% 48%, rgba(220,242,252,.38) 0 .5px, transparent .9px),\r\n    radial-gradient(circle at 92% 89%, rgba(255,255,255,.32) 0 .45px, transparent .85px),\r\n    radial-gradient(circle at 97% 33%, rgba(255,255,255,.40) 0 .5px, transparent .9px);\r\n}\r\n\r\n#flf-global-map {\r\n    \r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n.flf-dashboard-map-shell {\r\n    position: absolute;\r\n    z-index: 0;\r\n    inset: 0;\r\n\r\n    min-height: 620px;\r\n\r\n    border: 1px solid rgba(255,255,255,.85);\r\n    border-radius: 17px;\r\n\r\n    overflow: hidden;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            rgba(255,255,255,.64),\r\n            rgba(230,233,235,.54)\r\n        );\r\n\r\n    backdrop-filter: blur(16px);\r\n    -webkit-backdrop-filter: blur(16px);\r\n\r\n    box-shadow:\r\n        0 22px 55px rgba(32,38,43,.11),\r\n        inset 0 1px 0 rgba(255,255,255,.95);\r\n}\r\n\r\n.flf-dashboard-map-placeholder {\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    background:\r\n    radial-gradient(\r\n        ellipse at 18% -5%,\r\n        rgba(210, 229, 235, .28) 0%,\r\n        rgba(130, 164, 176, .16) 24%,\r\n        transparent 52%\r\n    ),\r\n    radial-gradient(\r\n        ellipse at 78% 2%,\r\n        rgba(190, 218, 228, .22) 0%,\r\n        rgba(105, 148, 165, .13) 28%,\r\n        transparent 55%\r\n    ),\r\n    radial-gradient(\r\n        ellipse at 50% -8%,\r\n        #91aab5 0%,\r\n        #587786 20%,\r\n        #2b4b5b 42%,\r\n        #102938 63%,\r\n        #061722 79%,\r\n        #020a12 100%\r\n    );\r\n}\r\n\r\n\r\n    \r\n\r\n.flf-dashboard-map-placeholder::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    z-index: 1;\r\n\r\n    left: 50%;\r\n    top: 52%;\r\n    transform: translate(-50%, -50%);\r\n\r\n    width: 45%;\r\n    aspect-ratio: 1 \/ 1;\r\n    border-radius: 50%;\r\n\r\n    background: transparent;\r\n\r\n    box-shadow:\r\n    0 0 12px 8px rgba(255, 255, 255, .82),\r\n    0 0 28px 16px rgba(240, 252, 255, .76),\r\n    0 0 55px 28px rgba(200, 240, 255, .68),\r\n    0 0 95px 45px rgba(125, 205, 235, .52),\r\n    0 0 160px 65px rgba(65, 150, 195, .30),\r\n    0 0 240px 85px rgba(30, 95, 135, .15);\r\n    \r\n    pointer-events: none;\r\n}\r\n\r\n.flf-dashboard-map-placeholder::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    opacity: .30;\r\n\r\n    background-image:\r\n        linear-gradient(\r\n            rgba(110,115,120,.12) 1px,\r\n            transparent 1px\r\n        ),\r\n        linear-gradient(\r\n            90deg,\r\n            rgba(110,115,120,.12) 1px,\r\n            transparent 1px\r\n        );\r\n\r\n    background-size: 52px 52px;\r\n\r\n    mask-image:\r\n        linear-gradient(\r\n            to bottom,\r\n            transparent,\r\n            black 20%,\r\n            black 80%,\r\n            transparent\r\n        );\r\n}\r\n\r\n.flf-dashboard-map-placeholder > div {\r\n    position: relative;\r\n    z-index: 2;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 7px;\r\n\r\n    color: #a1a5aa;\r\n}\r\n\r\n.flf-dashboard-map-placeholder strong {\r\n    font-size: 11px;\r\n    letter-spacing: 2px;\r\n}\r\n\r\n.flf-dashboard-map-placeholder span {\r\n    font-size: 12px;\r\n    color: #afb3b7;\r\n}\r\n\r\n\r\n\/* ---------- NETWORK TELEMETRY ---------- *\/\r\n\r\n.flf-dashboard-network {\r\n    position: absolute;\r\n    z-index: 5;\r\n\r\n    left: 22px;\r\n    right: 22px;\r\n    bottom: 20px;\r\n\r\n    display: grid;\r\n    grid-template-columns: repeat(5, 1fr);\r\n    align-items: center;\r\n\r\n    padding: 6px 18px;\r\n\r\n    border: 1px solid rgba(225, 244, 252, .72);\r\nborder-radius: 13px;\r\n\r\nbackground: rgba(220, 239, 247, .30);\r\n\r\nbackdrop-filter: blur(22px) saturate(125%);\r\n-webkit-backdrop-filter: blur(22px) saturate(125%);\r\n\r\nbox-shadow:\r\n    0 12px 38px rgba(0, 12, 24, .18),\r\n    inset 0 1px 0 rgba(255, 255, 255, .90),\r\n    inset 0 -1px 0 rgba(165, 211, 230, .22);\r\n}\r\n\r\n.flf-dashboard-network > .flf-world-clock {\r\n    flex: 1;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 3px;\r\n    padding: 4px 18px;\r\n\r\n    text-align: center;\r\n}\r\n\r\n.flf-dashboard-network > .flf-world-clock:not(:first-child) {\r\n    border-left: 1px solid rgba(190, 220, 232, .30);\r\n}\r\n\r\n.flf-world-clock > span {\r\n    font-size: 9px;\r\n    font-weight: 750;\r\n    letter-spacing: 1.5px;\r\n\r\n    color: rgba(70, 94, 108, .72);\r\n}\r\n\r\n.flf-world-clock > strong {\r\n    font-size: 20px;\r\n    font-weight: 750;\r\n    line-height: 1.05;\r\n    letter-spacing: -.3px;\r\n\r\n    color: #20272d;\r\n}\r\n\r\n.flf-world-clock > small {\r\n    font-size: 8px;\r\n    font-weight: 700;\r\n    letter-spacing: 1.2px;\r\n\r\n    color: rgba(105, 125, 137, .68);\r\n}\r\n\r\n\r\n\/* ---------- RESPONSIVE ---------- *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n    #flf-portal-dashboard {\r\n        padding: 30px 24px;\r\n    }\r\n\r\n    .flf-dashboard-header {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .flf-dashboard-period {\r\n        padding-top: 0;\r\n    }\r\n\r\n    .flf-dashboard-kpis {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .flf-dashboard-kpi:not(:last-child)::after {\r\n        right: 24px;\r\n        left: 24px;\r\n        top: auto;\r\n        bottom: 0;\r\n\r\n        width: auto;\r\n        height: 1px;\r\n    }\r\n\r\n    .flf-dashboard-network {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 16px;\r\n    }\r\n\r\n    .flf-dashboard-network > div {\r\n        border-left: none !important;\r\n        padding: 0;\r\n    }\r\n\r\n}\r\n\r\n\r\n@media (max-width: 600px) {\r\n\r\n    #flf-portal-dashboard {\r\n        padding: 24px 18px;\r\n    }\r\n\r\n    .flf-dashboard-welcome h1 {\r\n        font-size: 30px;\r\n    }\r\n\r\n    .flf-dashboard-map-shell {\r\n        min-height: 520px;\r\n    }\r\n\r\n    .flf-dashboard-network {\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n\r\n    .flf-dashboard-network-title {\r\n        grid-column: 1 \/ -1;\r\n    }\r\n\r\n\r\n\r\n<\/style>\r\n\r\n<!-- FLF GLOBAL GLOBE -->\r\n<link\r\n    rel=\"stylesheet\"\r\n    href=\"https:\/\/unpkg.com\/maplibre-gl@6.11.2\/dist\/maplibre-gl.css\"\r\n\/>\r\n\r\n<script type=\"module\">\r\nimport * as maplibregl from 'https:\/\/unpkg.com\/maplibre-gl@6.11.2\/dist\/maplibre-gl.mjs';\r\n\r\nconst mapElement = document.getElementById('flf-global-map');\r\n\r\nif (mapElement) {\r\n\r\n  const flfMap = new maplibregl.Map({\r\n    container: 'flf-global-map',\r\n    style: 'https:\/\/demotiles.maplibre.org\/style.json',\r\n\r\n    \/\/ Start over North America with gentle globe curvature.\r\n    center: [-98, 38],\r\n    zoom: 2.10,\r\n\r\n    minZoom: 2.10,\r\n    maxZoom: 12,\r\n\r\n    attributionControl: true,\r\n\r\ncanvasContextAttributes: {\r\n    antialias: true,\r\n    alpha: true\r\n}\r\n});\r\n\r\nflfMap.on('style.load', function () {\r\n    flfMap.setProjection({\r\n        type: 'globe'\r\n    });\r\n\r\n    flfMap.setMinZoom(2.10);\r\n\r\n    flfMap.on('zoom', function () {\r\n        if (flfMap.getZoom() < 2.10) {\r\n            flfMap.setZoom(2.10);\r\n        }\r\n    });\r\n    \r\n\r\n\/\/ Hide geographic reference lines and labels\r\nif (flfMap.getLayer('geolines')) {\r\n    flfMap.setLayoutProperty('geolines', 'visibility', 'none');\r\n}\r\n\r\nif (flfMap.getLayer('geolines-label')) {\r\n    flfMap.setLayoutProperty('geolines-label', 'visibility', 'none');\r\n}\r\n\r\n\/\/ Hide default country and territory labels\r\nif (flfMap.getLayer('countries-label')) {\r\n    flfMap.setLayoutProperty('countries-label', 'visibility', 'none');\r\n}\r\n    \r\n    flfMap.setSky({\r\n    'sky-color': '#061521',\r\n    'sky-horizon-blend': 0.22,\r\n\r\n    'horizon-color': '#d9edf4',\r\n    'horizon-fog-blend': 0.22,\r\n\r\n    'fog-color': '#edf8fb',\r\n    'fog-ground-blend': 0.10,\r\n\r\n    'atmosphere-blend': 1\r\n});\r\n\r\n\/\/ FLF icy steel-blue ocean\r\nif (flfMap.getLayer('background')) {\r\n    flfMap.setPaintProperty(\r\n        'background',\r\n        'background-color',\r\n        '#a8bec8'\r\n    );\r\n}\r\n\r\n\/\/ FLF neutral land styling\r\nflfMap.getStyle().layers.forEach(function(layer) {\r\n    if (layer.type === 'fill') {\r\n        try {\r\n            flfMap.setPaintProperty(\r\n                layer.id,\r\n                'fill-color',\r\n                '#e5ecef'\r\n            );\r\n\r\n            flfMap.setPaintProperty(\r\n                layer.id,\r\n                'fill-opacity',\r\n                1\r\n            );\r\n        } catch (e) {}\r\n    }\r\n});\r\n\r\n\/\/ FLF subtle map borders\r\nflfMap.setPaintProperty(\r\n    'coastline',\r\n    'line-color',\r\n    '#aeb9bd'\r\n);\r\n\r\nflfMap.setPaintProperty(\r\n    'coastline',\r\n    'line-width',\r\n    0.65\r\n);\r\n\r\nif (flfMap.getLayer('countries-boundary')) {\r\n    flfMap.setPaintProperty(\r\n        'countries-boundary',\r\n        'line-color',\r\n        '#b8c7cd'\r\n    );\r\n\r\n    flfMap.setPaintProperty(\r\n        'countries-boundary',\r\n        'line-width',\r\n        0.8\r\n    );\r\n\r\n    flfMap.setPaintProperty(\r\n        'countries-boundary',\r\n        'line-opacity',\r\n        0.75\r\n    );\r\n}\r\n\r\n\/\/ FLF shipment network nodes\r\nflfMap.addSource('flf-shipment-nodes', {\r\n    type: 'geojson',\r\n    data: {\r\n        type: 'FeatureCollection',\r\n        features: [\r\n            {\r\n                type: 'Feature',\r\n                properties: { city: 'Los Angeles' },\r\n                geometry: {\r\n                    type: 'Point',\r\n                    coordinates: [-118.2437, 34.0522]\r\n                }\r\n            },\r\n            {\r\n                type: 'Feature',\r\n                properties: { city: 'Dallas' },\r\n                geometry: {\r\n                    type: 'Point',\r\n                    coordinates: [-96.7970, 32.7767]\r\n                }\r\n            },\r\n            {\r\n                type: 'Feature',\r\n                properties: { city: 'Chicago' },\r\n                geometry: {\r\n                    type: 'Point',\r\n                    coordinates: [-87.6298, 41.8781]\r\n                }\r\n            },\r\n            {\r\n                type: 'Feature',\r\n                properties: { city: 'Atlanta' },\r\n                geometry: {\r\n                    type: 'Point',\r\n                    coordinates: [-84.3880, 33.7490]\r\n                }\r\n            },\r\n            {\r\n                type: 'Feature',\r\n                properties: { city: 'New York' },\r\n                geometry: {\r\n                    type: 'Point',\r\n                    coordinates: [-74.0060, 40.7128]\r\n                }\r\n            }\r\n        ]\r\n    }\r\n});\r\n\r\n\/\/ Build a smooth great-circle route across the globe\r\nfunction createGreatCircleRoute(start, end, steps = 64) {\r\n\r\n    const toRad = deg => deg * Math.PI \/ 180;\r\n    const toDeg = rad => rad * 180 \/ Math.PI;\r\n\r\n    const lon1 = toRad(start[0]);\r\n    const lat1 = toRad(start[1]);\r\n    const lon2 = toRad(end[0]);\r\n    const lat2 = toRad(end[1]);\r\n\r\n    const delta = 2 * Math.asin(Math.sqrt(\r\n        Math.pow(Math.sin((lat2 - lat1) \/ 2), 2) +\r\n        Math.cos(lat1) *\r\n        Math.cos(lat2) *\r\n        Math.pow(Math.sin((lon2 - lon1) \/ 2), 2)\r\n    ));\r\n\r\n    if (delta === 0) {\r\n        return [start, end];\r\n    }\r\n\r\n    const coordinates = [];\r\n\r\n    for (let i = 0; i <= steps; i++) {\r\n\r\n        const fraction = i \/ steps;\r\n\r\n        const A =\r\n            Math.sin((1 - fraction) * delta) \/\r\n            Math.sin(delta);\r\n\r\n        const B =\r\n            Math.sin(fraction * delta) \/\r\n            Math.sin(delta);\r\n\r\n        const x =\r\n            A * Math.cos(lat1) * Math.cos(lon1) +\r\n            B * Math.cos(lat2) * Math.cos(lon2);\r\n\r\n        const y =\r\n            A * Math.cos(lat1) * Math.sin(lon1) +\r\n            B * Math.cos(lat2) * Math.sin(lon2);\r\n\r\n        const z =\r\n            A * Math.sin(lat1) +\r\n            B * Math.sin(lat2);\r\n\r\n        const lat = Math.atan2(\r\n            z,\r\n            Math.sqrt(x * x + y * y)\r\n        );\r\n\r\n        const lon = Math.atan2(y, x);\r\n\r\n        coordinates.push([\r\n            toDeg(lon),\r\n            toDeg(lat)\r\n        ]);\r\n    }\r\n\r\n    return coordinates;\r\n}\r\n\r\n\/\/ FLF shipment routes\r\nflfMap.addSource('flf-shipment-routes', {\r\n    type: 'geojson',\r\n    data: {\r\n        type: 'FeatureCollection',\r\n        features: [\r\n\r\n            \/\/ Los Angeles \u2192 Dallas\r\n            {\r\n                type: 'Feature',\r\n                properties: {},\r\n                geometry: {\r\n                    type: 'LineString',\r\n                    coordinates: createGreatCircleRoute(\r\n                        [-118.2437, 34.0522],\r\n                        [-96.7970, 32.7767]\r\n                    )\r\n                }\r\n            },\r\n\r\n            \/\/ Los Angeles \u2192 Chicago\r\n            {\r\n                type: 'Feature',\r\n                properties: {},\r\n                geometry: {\r\n                    type: 'LineString',\r\n                    coordinates: createGreatCircleRoute(\r\n                        [-118.2437, 34.0522],\r\n                        [-87.6298, 41.8781]\r\n                    )\r\n                }\r\n            },\r\n\r\n            \/\/ Los Angeles \u2192 Atlanta\r\n            {\r\n                type: 'Feature',\r\n                properties: {},\r\n                geometry: {\r\n                    type: 'LineString',\r\n                    coordinates: createGreatCircleRoute(\r\n                        [-118.2437, 34.0522],\r\n                        [-84.3880, 33.7490]\r\n                    )\r\n                }\r\n            },\r\n\r\n            \/\/ Los Angeles \u2192 New York\r\n            {\r\n                type: 'Feature',\r\n                properties: {},\r\n                geometry: {\r\n                    type: 'LineString',\r\n                    coordinates: createGreatCircleRoute(\r\n                        [-118.2437, 34.0522],\r\n                        [-74.0060, 40.7128]\r\n                    )\r\n                }\r\n            }\r\n\r\n        ]\r\n    }\r\n});\r\n\r\n\/\/ Soft red route glow\r\nflfMap.addLayer({\r\n    id: 'flf-route-glow',\r\n    type: 'line',\r\n    source: 'flf-shipment-routes',\r\n    paint: {\r\n        'line-color': '#ff1717',\r\n        'line-width': 5,\r\n        'line-opacity': 0.16,\r\n        'line-blur': 3\r\n    }\r\n});\r\n\r\n\/\/ Sharp red route core\r\nflfMap.addLayer({\r\n    id: 'flf-route-core',\r\n    type: 'line',\r\n    source: 'flf-shipment-routes',\r\n    paint: {\r\n        'line-color': '#ff1717',\r\n        'line-width': 1.6,\r\n        'line-opacity': 0.9\r\n    }\r\n});\r\n\r\n\/\/ Soft outer glow\r\nflfMap.addLayer({\r\n    id: 'flf-node-glow',\r\n    type: 'circle',\r\n    source: 'flf-shipment-nodes',\r\n    paint: {\r\n        'circle-radius': 11,\r\n        'circle-color': '#ff1b1b',\r\n        'circle-opacity': 0.18,\r\n        'circle-blur': 0.7\r\n    }\r\n});\r\n\r\n\/\/ Bright red node\r\nflfMap.addLayer({\r\n    id: 'flf-node-core',\r\n    type: 'circle',\r\n    source: 'flf-shipment-nodes',\r\n    paint: {\r\n        'circle-radius': 4,\r\n        'circle-color': '#ff1717',\r\n        'circle-stroke-color': '#ffd6d6',\r\n        'circle-stroke-width': 1.2,\r\n        'circle-opacity': 1\r\n    }\r\n});\r\n\r\n\/\/ ======================================================\r\n\/\/ FLF ROUTE ANIMATION TEST\r\n\/\/ Dallas  = Traveling shimmer\r\n\/\/ Chicago = Flowing light stream\r\n\/\/ Atlanta = Progressive route draw\r\n\/\/ New York = Energy wave\r\n\/\/ ======================================================\r\n\r\nconst FLF_LA = [-118.2437, 34.0522];\r\n\r\nconst flfDallasPath = createGreatCircleRoute(\r\n    FLF_LA,\r\n    [-96.7970, 32.7767]\r\n);\r\n\r\nconst flfChicagoPath = createGreatCircleRoute(\r\n    FLF_LA,\r\n    [-87.6298, 41.8781]\r\n);\r\n\r\nconst flfAtlantaPath = createGreatCircleRoute(\r\n    FLF_LA,\r\n    [-84.3880, 33.7490]\r\n);\r\n\r\nconst flfNewYorkPath = createGreatCircleRoute(\r\n    FLF_LA,\r\n    [-74.0060, 40.7128]\r\n);\r\n\r\n\r\n\/\/ ------------------------------------------------------\r\n\/\/ Helper: return part of a route\r\n\/\/ ------------------------------------------------------\r\n\r\nfunction getFLFRouteSection(path, startProgress, endProgress) {\r\n\r\n    startProgress = Math.max(0, Math.min(1, startProgress));\r\n    endProgress = Math.max(0, Math.min(1, endProgress));\r\n\r\n    if (endProgress < startProgress) {\r\n        const temp = startProgress;\r\n        startProgress = endProgress;\r\n        endProgress = temp;\r\n    }\r\n\r\n    const coordinates = [];\r\n    const samples = 24;\r\n\r\n    for (let i = 0; i <= samples; i++) {\r\n\r\n        const progress =\r\n            startProgress +\r\n            (endProgress - startProgress) *\r\n            (i \/ samples);\r\n\r\n        const scaled =\r\n            progress * (path.length - 1);\r\n\r\n        const index = Math.min(\r\n            Math.floor(scaled),\r\n            path.length - 2\r\n        );\r\n\r\n        const localProgress = scaled - index;\r\n\r\n        const start = path[index];\r\n        const end = path[index + 1];\r\n\r\n        coordinates.push([\r\n            start[0] +\r\n            (end[0] - start[0]) * localProgress,\r\n\r\n            start[1] +\r\n            (end[1] - start[1]) * localProgress\r\n        ]);\r\n    }\r\n\r\n    return coordinates;\r\n}\r\n\r\n\r\n\/\/ ======================================================\r\n\/\/ A \u2014 DALLAS\r\n\/\/ TRAVELING SHIMMER\r\n\/\/ ======================================================\r\n\r\nflfMap.addSource('flf-dallas-animation', {\r\n    type: 'geojson',\r\n    data: {\r\n        type: 'Feature',\r\n        properties: {},\r\n        geometry: {\r\n            type: 'LineString',\r\n            coordinates: [FLF_LA, FLF_LA]\r\n        }\r\n    }\r\n});\r\n\r\nflfMap.addLayer({\r\n    id: 'flf-dallas-shimmer-glow',\r\n    type: 'line',\r\n    source: 'flf-dallas-animation',\r\n    paint: {\r\n        'line-color': '#ff2020',\r\n        'line-width': 7,\r\n        'line-opacity': 0.28,\r\n        'line-blur': 5\r\n    }\r\n});\r\n\r\nflfMap.addLayer({\r\n    id: 'flf-dallas-shimmer-core',\r\n    type: 'line',\r\n    source: 'flf-dallas-animation',\r\n    paint: {\r\n        'line-color': '#ffb0b0',\r\n        'line-width': 2.4,\r\n        'line-opacity': 0.95,\r\n        'line-blur': 0.5\r\n    }\r\n});\r\n\/\/ ======================================================\r\n\/\/ B \u2014 CHICAGO\r\n\/\/ FLOWING LIGHT STREAM\r\n\/\/ ======================================================\r\n\r\nflfMap.addSource('flf-chicago-animation', {\r\n    type: 'geojson',\r\n    data: {\r\n        type: 'Feature',\r\n        properties: {},\r\n        geometry: {\r\n            type: 'LineString',\r\n            coordinates: flfChicagoPath\r\n        }\r\n    }\r\n});\r\n\r\nflfMap.addLayer({\r\n    id: 'flf-chicago-flow-glow',\r\n    type: 'line',\r\n    source: 'flf-chicago-animation',\r\n    paint: {\r\n        'line-color': '#ffffff',\r\n        'line-width': 14,\r\n        'line-opacity': 0,\r\n        'line-blur': 7\r\n    }\r\n});\r\n\r\nflfMap.addLayer({\r\n    id: 'flf-chicago-flow',\r\n    type: 'line',\r\n    source: 'flf-chicago-animation',\r\n    paint: {\r\n        'line-color': '#ffffff',\r\n        'line-width': 5,\r\n        'line-opacity': 0\r\n    }\r\n});\r\n\r\n\/\/ ======================================================\r\n\/\/ C \u2014 ATLANTA\r\n\/\/ PROGRESSIVE ROUTE DRAW\r\n\/\/ ======================================================\r\n\r\nflfMap.addSource('flf-atlanta-animation', {\r\n    type: 'geojson',\r\n    data: {\r\n        type: 'Feature',\r\n        properties: {},\r\n        geometry: {\r\n            type: 'LineString',\r\n            coordinates: [FLF_LA, FLF_LA]\r\n        }\r\n    }\r\n});\r\n\r\nflfMap.addLayer({\r\n    id: 'flf-atlanta-draw-glow',\r\n    type: 'line',\r\n    source: 'flf-atlanta-animation',\r\n    paint: {\r\n        'line-color': '#ff1717',\r\n        'line-width': 6,\r\n        'line-opacity': 0.20,\r\n        'line-blur': 4\r\n    }\r\n});\r\n\r\nflfMap.addLayer({\r\n    id: 'flf-atlanta-draw',\r\n    type: 'line',\r\n    source: 'flf-atlanta-animation',\r\n    paint: {\r\n        'line-color': '#ff3434',\r\n        'line-width': 2.5,\r\n        'line-opacity': 1\r\n    }\r\n});\r\n\r\n\r\n\/\/ ======================================================\r\n\/\/ D \u2014 NEW YORK\r\n\/\/ ENERGY WAVE\r\n\/\/ ======================================================\r\n\r\nflfMap.addSource('flf-newyork-animation', {\r\n    type: 'geojson',\r\n    data: {\r\n        type: 'Feature',\r\n        properties: {},\r\n        geometry: {\r\n            type: 'LineString',\r\n            coordinates: [FLF_LA, FLF_LA]\r\n        }\r\n    }\r\n});\r\n\r\nflfMap.addLayer({\r\n    id: 'flf-newyork-wave-glow',\r\n    type: 'line',\r\n    source: 'flf-newyork-animation',\r\n    paint: {\r\n        'line-color': '#ff1717',\r\n        'line-width': 10,\r\n        'line-opacity': 0.12,\r\n        'line-blur': 7\r\n    }\r\n});\r\n\r\nflfMap.addLayer({\r\n    id: 'flf-newyork-wave-core',\r\n    type: 'line',\r\n    source: 'flf-newyork-animation',\r\n    paint: {\r\n        'line-color': '#ff7777',\r\n        'line-width': 1.6,\r\n        'line-opacity': 0.75,\r\n        'line-blur': 1.5\r\n    }\r\n});\r\n\r\n\r\n\/\/ ======================================================\r\n\/\/ ANIMATION LOOP\r\n\/\/ ======================================================\r\n\r\nlet flfAnimationProgress = 0;\r\nlet flfDashOffset = 0;\r\n\r\nfunction animateFLFRoutes() {\r\n\r\n    flfAnimationProgress += 0.0022;\r\n\r\n    if (flfAnimationProgress >= 1) {\r\n        flfAnimationProgress = 0;\r\n    }\r\n\r\n\r\n    \/\/ ------------------------------------------\r\n    \/\/ A \u2014 Dallas traveling shimmer\r\n    \/\/ ------------------------------------------\r\n\r\n    const dallasLength = 0.055;\r\n\r\nlet dallasHead = flfAnimationProgress;\r\nlet dallasTail = dallasHead - dallasLength;\r\n\r\n\/\/ Keep the shimmer completely off the route\r\n\/\/ until the full illuminated section can appear.\r\nif (dallasTail < 0) {\r\n    dallasTail = 0;\r\n}\r\n\r\nconst dallasSource =\r\n    flfMap.getSource('flf-dallas-animation');\r\n\r\nif (dallasSource) {\r\n\r\n    const dallasCoordinates =\r\n        getFLFRouteSection(\r\n            flfDallasPath,\r\n            dallasTail,\r\n            dallasHead\r\n        );\r\n\r\n    dallasSource.setData({\r\n        type: 'Feature',\r\n        properties: {},\r\n        geometry: {\r\n            type: 'LineString',\r\n            coordinates: dallasCoordinates\r\n        }\r\n    });\r\n}\r\n\r\n\r\n    \/\/ ------------------------------------------\r\n\/\/ B \u2014 Chicago flowing stream\r\n\/\/ Temporarily disabled while testing\r\n\/\/ ------------------------------------------\r\n\r\n    \/\/ ------------------------------------------\r\n    \/\/ C \u2014 Atlanta progressive draw\r\n    \/\/ ------------------------------------------\r\n\r\n    const atlantaSource =\r\n        flfMap.getSource('flf-atlanta-animation');\r\n\r\n    if (atlantaSource) {\r\n        atlantaSource.setData({\r\n            type: 'Feature',\r\n            properties: {},\r\n            geometry: {\r\n                type: 'LineString',\r\n                coordinates: getFLFRouteSection(\r\n                    flfAtlantaPath,\r\n                    0,\r\n                    flfAnimationProgress\r\n                )\r\n            }\r\n        });\r\n    }\r\n\r\n\r\n    \/\/ ------------------------------------------\r\n    \/\/ D \u2014 New York energy wave\r\n    \/\/ ------------------------------------------\r\n\r\n    const waveLength = 0.07;\r\n\r\n    const waveStart = Math.max(\r\n        0,\r\n        flfAnimationProgress - waveLength\r\n    );\r\n\r\n    const waveEnd = Math.min(\r\n        1,\r\n        flfAnimationProgress + waveLength\r\n    );\r\n\r\n    const newYorkSource =\r\n        flfMap.getSource('flf-newyork-animation');\r\n\r\n    if (newYorkSource) {\r\n        newYorkSource.setData({\r\n            type: 'Feature',\r\n            properties: {},\r\n            geometry: {\r\n                type: 'LineString',\r\n                coordinates: getFLFRouteSection(\r\n                    flfNewYorkPath,\r\n                    waveStart,\r\n                    waveEnd\r\n                )\r\n            }\r\n        });\r\n    }\r\n\r\n\r\n    flfMap.triggerRepaint();\r\n\r\n    requestAnimationFrame(animateFLFRoutes);\r\n}\r\n\r\n\/\/ animateFLFRoutes();\r\n\r\n    flfMap.jumpTo({\r\n        center: [-98, 38],\r\n        zoom: 2.10,\r\n        offset: [0, 60],\r\n        duration: 0\r\n    });\r\n});\r\n\r\n\r\n\r\n    flfMap.addControl(\r\n        new maplibregl.NavigationControl({\r\n            visualizePitch: true\r\n        }),\r\n        'top-left'\r\n    );\r\n}\r\n\r\nfunction updateFLFWorldClocks() {\r\n    document.querySelectorAll('.flf-world-clock').forEach(function(clock) {\r\n        const timeZone = clock.getAttribute('data-timezone');\r\n        const timeElement = clock.querySelector('.flf-clock-time');\r\n\r\n        if (!timeZone || !timeElement) return;\r\n\r\n        const time = new Intl.DateTimeFormat('en-US', {\r\n            timeZone: timeZone,\r\n            hour: 'numeric',\r\n            minute: '2-digit',\r\n            hour12: true\r\n        }).format(new Date());\r\n\r\n        timeElement.textContent = time;\r\n    });\r\n}\r\n\r\nupdateFLFWorldClocks();\r\nsetInterval(updateFLFWorldClocks, 30000);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dashboard Get a Quote Saved Quotes Shipments Claims Billing designed to connect Welcome back, Sako \u2315 This MonthLast 3 MonthsYTDAll Time WEIGHT MOVED THIS MONTH 48,620 lbs \u2191 12% vs. last month MILES MOVED THIS MONTH 12,840 mi \u2191 18% vs. last month SHIPPING SPEND THIS MONTH $18,742 \u2191 6% vs. last month PACIFIC &#8211;:&#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/intefreight.co\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/intefreight.co\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/intefreight.co\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/intefreight.co\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/intefreight.co\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":6,"href":"https:\/\/intefreight.co\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/intefreight.co\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/intefreight.co\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}